審美、效用與情感——關(guān)于icon和Logo設(shè)計(jì)的一些想法

1 評(píng)論 2681 瀏覽 1 收藏 15 分鐘

你們覺(jué)得iWork 3個(gè)icon里哪個(gè)最好。 Pages, Keynote 還是 Numbers?

雖然Pages和Keynote擁有非常精致的造型和擬真效果,但是就icon設(shè)計(jì)而言,Numbers要超過(guò)它們。 Numbers脫胎于現(xiàn)實(shí)中的物體但又不是完全模擬它們,形象更簡(jiǎn)潔有力。

從表意性上,Numbers 對(duì)圖表工具的概念進(jìn)行了成功的提取和抽象,相信任何人第一次見(jiàn)到這個(gè)icon的時(shí)候都能認(rèn)出它是一種什么工具,但墨水瓶(Pages)的象征性太模糊,演講臺(tái)(Keynote)是一個(gè)人們不熟悉的且特征不明顯的事物。人們?cè)谕ㄟ^(guò)icon形象識(shí)別出工具用途時(shí)要更困難。

從辨識(shí)度上,透視和視角的選用形成了很強(qiáng)的立體感,配色也非常鮮明。這些都提高了你從dock條上把它辨識(shí)出來(lái)的幾率。它的小尺寸表現(xiàn)也好于其它兩者。

Icon的成功更多取決于它是否能有效表意(功能、用途或者非常鮮明的個(gè)性特征)并且具有很強(qiáng)區(qū)分度,容易認(rèn)出并建立關(guān)聯(lián)。而不是在于它是否材質(zhì)更漂亮或更擬真。

為什么iOS UI上所有的icon都限制為圓角矩形?

844f_iPhone

有一些設(shè)備的UI上的icon允許透明通道,也就是允許icon是各種形狀的。這顯然讓設(shè)計(jì)師有更大的發(fā)揮余地,能夠創(chuàng)作出更漂亮的作品。

但是iPhone的桌面是一個(gè)訪問(wèn)頻率非常高、空間有限、icon放置密度非常高的環(huán)境。icon之間的間距沒(méi)法很大,如果不統(tǒng)一上面幾十個(gè)icon的形狀,會(huì)導(dǎo)致一個(gè)非常雜亂的界面,icon之間也會(huì)彼此干擾。(雖然LaunchPad也是這種羅列icon的方式,但擁有較大的空間和間距,情況會(huì)好一點(diǎn)。)所以規(guī)整統(tǒng)一的形狀可以帶來(lái)良好的節(jié)奏和協(xié)調(diào)的感官,同時(shí)也可以和設(shè)備的整體外形相呼應(yīng)。

f47e_launchpad
此外,設(shè)定這一“游戲規(guī)則”也平均了icon們的風(fēng)格和水準(zhǔn)。目前app stone上已經(jīng)上架了10W個(gè)應(yīng)用,也就有10W個(gè)icon,設(shè)計(jì)水平參差不齊。但統(tǒng)一的形狀和iOS官方icon設(shè)計(jì)所引導(dǎo)的風(fēng)格,讓最差的設(shè)計(jì)師也不會(huì)做出爛得超過(guò)底線,影響整個(gè)設(shè)備UI的icon來(lái)。即使你啥都不會(huì),選一個(gè)背景色,在上面放一個(gè)字母,也能成為你的icon,而且效果也不太壞。所以在iOS設(shè)備上你不會(huì)看到那種一堆icon里突然冒出一個(gè)特別土帶著粗大的鋸齒邊和蹩腳陰影的刺眼玩意。

從iOS的開(kāi)發(fā)定位來(lái)看,Apple一直都選用的是一個(gè)平均化但是最能保證整體效果的方案。讓一個(gè)工程師,僅僅利用默認(rèn)控件,也能做出可用可看的App。

設(shè)計(jì)和藝術(shù)的區(qū)別之一正是“設(shè)計(jì)是帶著鐐銬跳舞”。

游戲規(guī)則的設(shè)定,就是為了保障整個(gè)游戲的可玩性和所有玩家的利益,我想對(duì)所有icon外形的限制(包括HIG中對(duì)許多控件及交互方式的限制)就是整個(gè)平臺(tái)設(shè)計(jì)策略的一環(huán)。

為什么Adobe套裝里的icon都做成那個(gè)樣子?

2f66_adobecs

CS2在04年發(fā)布,CS3在07年發(fā)布。這3年間Adobe做了很多重要的戰(zhàn)略調(diào)整,事件之一是收購(gòu)了Marcomedia,并且更強(qiáng)調(diào)工具之間的兼容性,并提供一些平臺(tái)化工具。Adobe需要推出更多套裝,并在里面包含更多應(yīng)用。從提供工具變成了提供工具箱。

CS3剛出來(lái)的時(shí)候,對(duì)icon設(shè)計(jì)進(jìn)行了重大的改變,當(dāng)然獲得了大量惡評(píng),理由都是一個(gè)丑。就單個(gè)icon來(lái)看,CS3的PS圖標(biāo)比CS2差幾個(gè)級(jí)別,Adobe不是找不到好設(shè)計(jì)師,為什么要這么做。

5d73_a74e55b4jw1dwuyjzsk8zj

看完這張圖就明白了。Adobe的設(shè)計(jì)工具都比較難以根據(jù)功能來(lái)提取出一個(gè)具象概念,只好用羽毛,花朵,樹(shù)葉這種很“精神層面”的的物體來(lái)表示。當(dāng)套裝變得更大,設(shè)計(jì)師桌面上需要放下更多Adobe應(yīng)用的icon時(shí)會(huì)出現(xiàn)什么狀況,他的鼠標(biāo)會(huì)在幾個(gè)icon之間遊移。當(dāng)然假以時(shí)日,反射弧會(huì)被建立,也會(huì)通過(guò)擺放位置來(lái)進(jìn)行記憶,但對(duì)于新用戶(hù)而言,這無(wú)疑是一個(gè)悲劇。

efca_a74ecc4cjw1dwuykpnzakj

展示這張圖不是為了說(shuō)明Adobe的新icon們?cè)谏喹h(huán)上的分布,而是為了說(shuō)明有它們工具數(shù)量的龐大。

CS3系列后的新icon雖然不好看,但無(wú)疑極為直觀,無(wú)需建立對(duì)象及其象征物之間的關(guān)聯(lián),這不是表意而是直接對(duì)著你喊出來(lái),“我是PS”。文字帶來(lái)最快速的反應(yīng)。

風(fēng)格強(qiáng)烈,你可以輕易識(shí)別出它們是屬于一個(gè)Adobe的。

此外它最大化利用了系統(tǒng)中icon的尺寸限制,一整個(gè)大色塊。所以你會(huì)發(fā)現(xiàn)它們無(wú)論是在dock條還是windows桌面上,都是搶眼的。

設(shè)計(jì)過(guò)程中如何做決策,美的標(biāo)準(zhǔn)是什么,我借用一下《data visualization》一書(shū)中的觀點(diǎn):novel (創(chuàng)新), informative (這里可以理解為否實(shí)現(xiàn)設(shè)計(jì)的功能,傳達(dá)出需要傳達(dá)的信息), efficient (能否有效地達(dá)成設(shè)計(jì)訴求), aesthetic (是否有視覺(jué)魅力)。受眾、目標(biāo)和情境是設(shè)計(jì)開(kāi)始之前必須回答的問(wèn)題,一個(gè)不能保障可用性(有效達(dá)成目標(biāo),滿(mǎn)足需求,適配于使用情境)的設(shè)計(jì),再好看再創(chuàng)新也是失敗的。Adobe的選擇也正是基于這一點(diǎn)。

OS X官方App中最打動(dòng)你的icon是哪個(gè)?

Automator. 這是一個(gè)通過(guò)點(diǎn)擊拖拽這些操作在不同應(yīng)用間創(chuàng)建工作流(批處理)的工具。這用一個(gè)拿著管道(連接件)的高科技機(jī)器人來(lái)表示最非常恰當(dāng)?shù)摹>?、冷酷、充滿(mǎn)魅力的質(zhì)感,直接就是蘋(píng)果的氣質(zhì)的體現(xiàn)。

它打動(dòng)我是因?yàn)樗且粋€(gè)被人格化的icon,也是OS X官方icon中唯一一個(gè)擬人化的設(shè)計(jì)。用一個(gè)令人愛(ài)不釋手的高科技機(jī)器人來(lái)表達(dá)一個(gè)編程工具。Automator代表了apple script的最高成就,這種東西對(duì)于編程語(yǔ)言的意義,相當(dāng)于GUI對(duì)桌面系統(tǒng)。高科技機(jī)器人帶給我們的,正是利用高水平的技術(shù)和工業(yè)設(shè)計(jì),提供了生產(chǎn)率,降低了使用門(mén)檻和成本。這個(gè)形象是不是也讓你作為一個(gè)普通人也有興趣去嘗試編寫(xiě)程序。比Terminal的icon給你的心理壓力小多了吧。

這個(gè)設(shè)計(jì)在可用性和美觀的標(biāo)準(zhǔn)之上,體現(xiàn)對(duì)情感的傳遞。它建立的不僅僅是效用,而是喜愛(ài)。很多時(shí)候 ,感性認(rèn)識(shí)比理性認(rèn)識(shí)對(duì)于人們做出決定更為關(guān)鍵。

新版的icon更換了質(zhì)感,簡(jiǎn)化了材質(zhì)上的細(xì)節(jié), 加深對(duì)比度和整體顏色,強(qiáng)化了輪廓。我感覺(jué)是一個(gè)從 炫目、模擬真實(shí)質(zhì)感->更簡(jiǎn)潔和抽象、和環(huán)境能搭配 的變化過(guò)程。新版的在小尺寸下表現(xiàn)也更好。

5282_a74eed94jw1dwuylff8c4j

NeXT的logo是不是很丑?

很多人都知道它是Jobs請(qǐng)Paul Rand花了10W刀設(shè)計(jì)的。

54df_a74e55b4jw1dwuylubu9bj

首先我覺(jué)得它并不好看。但是好看絕對(duì)不是一個(gè)LOGO設(shè)計(jì)是否成功的唯一標(biāo)準(zhǔn)。

首先試圖追溯Paul為什么要這樣設(shè)計(jì)NeXT的logo

5678_a74ecc4cjw1dwuym4b93wj

這就是NeXT cube, NeXT computer的機(jī)箱,它最大的特征就是 方正(據(jù)說(shuō)Jobs花了很大代價(jià)追究8個(gè)角的銳利,就像用尺規(guī)工具在紙上畫(huà)出來(lái)的那樣干凈準(zhǔn)確)、極簡(jiǎn)(用色純粹,沒(méi)有多余的線條和裝飾)。這個(gè)工設(shè)放到30年后來(lái)看都毫不遜色。

4ea0_a74eed94jw1dwuymf4uh5j

這是NeXTSTEP / OPENSTEP 1.0 (released in 1989)。該 GUI 的圖標(biāo)很大,48×48像素,包含更多顏色,從1.0開(kāi)始支持彩色,已經(jīng)可以看到現(xiàn)代 GUI 的影子。

比較一下同年代的其它GUI水準(zhǔn)。

Windows 2.0x (released in 1987)

7e76_a74ecc4cjw1dwuyn4ajheg

OS/2 1.20 (released in 1989)

0e0d_a74e55b4jw1dwuymrrfr5g

Desktop Computer操作系統(tǒng)之GUI發(fā)展?http://blog.csdn.net/greenhand_/article/details/7787861

N e X T 這4個(gè)字母的顏色,搞設(shè)計(jì)的同學(xué)應(yīng)能容易聯(lián)想到CMYK,現(xiàn)在找不到原設(shè)計(jì)圖了,沒(méi)法取到精確色值,但我推測(cè)都是滿(mǎn)值的。大紅 M100%Y100%, 綠色 C100%Y100%, 黃色Y100%, 品紅M100%。
我的一個(gè)在蘋(píng)果工作過(guò)的朋友,在那個(gè)年代見(jiàn)過(guò)NeXT的LOGO,他的印象是顏色非常艷麗飽滿(mǎn),這也正是Paul想傳達(dá)給消費(fèi)者的關(guān)于這個(gè)產(chǎn)品的特征。在當(dāng)時(shí)的印刷平均條件下,Paul的這個(gè)用色選擇是大膽,同時(shí)也是成功的。

Paul 從NeXT的經(jīng)典產(chǎn)品中抽離除了最本質(zhì)的幾個(gè)特征。立方體,極簡(jiǎn),純黑的底色,還有顏色豐富、富有魅力的GUI。

抽象的過(guò)程就是一個(gè)簡(jiǎn)化的過(guò)程,也是一個(gè)靠近事物本質(zhì)的過(guò)程。得到本質(zhì)以后,其他一切都只是從屬,都可以根據(jù)恰當(dāng)?shù)臈l件進(jìn)行省略。

Jobs看到方案問(wèn)Paul, 還有其它可選方案嗎?Paul 說(shuō):“沒(méi)有,我已經(jīng)解決了你的問(wèn)題。付錢(qián)吧。想要可選方案?找別人去吧?!?/p>

我的理解是,設(shè)計(jì)是為了解決問(wèn)題達(dá)成訴求,所以最合適的方案當(dāng)然只有一個(gè)。Paul自信他提出的這個(gè)設(shè)計(jì)就是這個(gè)最合適的方案,因?yàn)樗呀?jīng)解決了“品牌傳達(dá)”這個(gè)最核心的問(wèn)題。

Paul 是包豪斯設(shè)計(jì)思想的繼承者,同時(shí)為商業(yè)服務(wù)的使用美術(shù)大師,他喜歡拼貼風(fēng)格,拼貼可以突破空間的限制,用色強(qiáng)烈,造型簡(jiǎn)單,追求準(zhǔn)確的傳達(dá)而不是盲目的創(chuàng)新。Jobs的評(píng)價(jià)也是這樣,認(rèn)為Paul 是藝術(shù)家和商業(yè)問(wèn)題解決者的結(jié)合,認(rèn)為 Paul 的設(shè)計(jì)很 emotional(感性),同時(shí)又很 intellectual(理智)。

所以關(guān)于這個(gè)問(wèn)題我想說(shuō)的是,美的標(biāo)準(zhǔn)是變化的,建立在時(shí)代和文化背景上的,在觀看一件歷史上的設(shè)計(jì)或者藝術(shù)作品時(shí),只有理解了它的背景、出發(fā)點(diǎn)和訴求之后,才能觸摸到它的本質(zhì),學(xué)習(xí)到它的成功之處。同時(shí)對(duì)于一件為商業(yè)服務(wù)的設(shè)計(jì)而言,“有效”是最核心的,而不是“好看”或者什么別的。當(dāng)然達(dá)到有效的手段有很多種,比如創(chuàng)新、情感化,視覺(jué)表現(xiàn)手法當(dāng)然也在其中。

為什么世界五百?gòu)?qiáng)中大部分的Logo都很“難看”?

回答完了上一個(gè)問(wèn)題之后,我覺(jué)得這個(gè)問(wèn)題也不用回答了。

我給難看加上了引號(hào)是因?yàn)閷徝烙肋h(yuǎn)是一個(gè)相對(duì)標(biāo)準(zhǔn),隨個(gè)人偏好、時(shí)代定位和文化背景所變化。

世界500強(qiáng)公司能做大往往也有著悠久的歷史。他們的LOGO穿過(guò)了幾個(gè)文明快速發(fā)展、觀念快速變化的時(shí)代,其傳播載體和條件也在不斷更新。無(wú)論它們是否還符合現(xiàn)在的審美,它們?cè)诋?dāng)時(shí)的背景下都已經(jīng)完成了品牌傳達(dá)的目標(biāo),建立了鮮明識(shí)別度,并且成為企業(yè)文化的一部分。

來(lái)源:http://blog.xiqiao.info/2012/09/13/1254

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 難看的才是永恒的····

    來(lái)自四川 回復(fù)