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