用戶界面的圖像設(shè)計(jì)歷史可謂是越來(lái)越趨向于現(xiàn)實(shí)。隨著電腦運(yùn)行越來(lái)越快，設(shè)計(jì)師開(kāi)始逐漸添加一些現(xiàn)實(shí)元素，如顏色、3D效果、陰影或半透明，甚至是實(shí)物。其中一些效果確實(shí)能提高使用效率。窗口下的陰影能讓我們知道那個(gè)窗口是活動(dòng)著的，而iPhone用戶界面的實(shí)物性使iPhone更易于使用。
在其他地區(qū)，這樣的趨勢(shì)則遭到了質(zhì)疑。典型的用戶界面圖像設(shè)計(jì)幾乎都是象征性圖標(biāo)。大多數(shù)在屏幕上出現(xiàn)的圖標(biāo)代表的是一個(gè)想法或概念。比如，一間小房子圖標(biāo)代表的不是房子，而是“Home（主頁(yè)面）”；一只眼睛也并非單純指眼睛，而是指“查看所選文件”。
細(xì)節(jié)和現(xiàn)實(shí)是可區(qū)分的概念。我從Scott McCloud的著作《理解漫畫(huà)》中節(jié)選了一幅圖，這本書(shū)是設(shè)計(jì)師必讀的教科書(shū)。
從上圖中我們看到，最左邊的圖像是一個(gè)具體的人臉，而最右邊則只是“臉”的概念，它能代表任何人。其實(shí)，在設(shè)計(jì)用戶界面時(shí)，我們沒(méi)必要展示那么具體現(xiàn)實(shí)的人臉，有時(shí)候只需要表達(dá)一個(gè)想法或概念。具體的細(xì)節(jié)反而會(huì)弄巧成拙。
然而，有時(shí)候則需要一些細(xì)節(jié)。太少細(xì)節(jié)則會(huì)讓用戶一頭霧水。如下圖，左邊的讓人一看就知道是臉，而最右邊則無(wú)法表達(dá)臉的概念。
讓我們?cè)賮?lái)看看一組已經(jīng)應(yīng)用到用戶界面的圖標(biāo)，它們均代表“Home”鍵。
這四個(gè)圖標(biāo)表現(xiàn)了設(shè)計(jì)由“具體”轉(zhuǎn)向“抽象”的過(guò)程。我們可以感受到，越是具體的圖標(biāo)，我們?cè)诫y理解它所代表的功能。相反，如果圖標(biāo)太過(guò)于簡(jiǎn)單，也會(huì)讓人產(chǎn)生誤解。如下圖，前面三個(gè)圖標(biāo)我們都能理解是“Home”鍵，但是最后面的則有可能代表一個(gè)向上的箭頭“⇧”。
如果總結(jié)起來(lái)，我們可以用一個(gè)坐標(biāo)圖展示人們面對(duì)“具體”和“抽象”的圖標(biāo)時(shí)的混淆程度?？v坐標(biāo)表示抽象圖標(biāo)，橫坐標(biāo)則表示具體的圖標(biāo)。粉色柱體部分則表示混淆程度。我們可看到，人們對(duì)圖標(biāo)的理解程度是呈弧線變化的。
觀察以下兩個(gè)界面的Home圖標(biāo)，哪個(gè)讓你有“主界面”的感覺(jué)，而哪個(gè)讓您有真正的“家”的感覺(jué)？
無(wú)論是設(shè)計(jì)什么樣的圖標(biāo)，最重要的是能讓用戶很容易明白圖標(biāo)所代表的功能和意義。圖標(biāo)就像設(shè)計(jì)者與用戶的對(duì)話，越易于明白越好。
