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