用户界面的图像设计历史可谓是越来越趋向于现实。随着电脑运行越来越快,设计师开始逐渐添加一些现实元素,如颜色、3D效果、阴影或半透明,甚至是实物。其中一些效果确实能提高使用效率。窗口下的阴影能让我们知道那个窗口是活动着的,而iPhone用户界面的实物性使iPhone更易于使用。
在其他地区,这样的趋势则遭到了质疑。典型的用户界面图像设计几乎都是象征性图标。大多数在屏幕上出现的图标代表的是一个想法或概念。比如,一间小房子图标代表的不是房子,而是“Home(主页面)”;一只眼睛也并非单纯指眼睛,而是指“查看所选文件”。
细节和现实是可区分的概念。我从Scott McCloud的著作《理解漫画》中节选了一幅图,这本书是设计师必读的教科书。
在其他地区,这样的趋势则遭到了质疑。典型的用户界面图像设计几乎都是象征性图标。大多数在屏幕上出现的图标代表的是一个想法或概念。比如,一间小房子图标代表的不是房子,而是“Home(主页面)”;一只眼睛也并非单纯指眼睛,而是指“查看所选文件”。
细节和现实是可区分的概念。我从Scott McCloud的著作《理解漫画》中节选了一幅图,这本书是设计师必读的教科书。
从上图中我们看到,最左边的图像是一个具体的人脸,而最右边则只是“脸”的概念,它能代表任何人。其实,在设计用户界面时,我们没必要展示那么具体现实的人脸,有时候只需要表达一个想法或概念。具体的细节反而会弄巧成拙。
然而,有时候则需要一些细节。太少细节则会让用户一头雾水。如下图,左边的让人一看就知道是脸,而最右边则无法表达脸的概念。
让我们再来看看一组已经应用到用户界面的图标,它们均代表“Home”键。
这四个图标表现了设计由“具体”转向“抽象”的过程。我们可以感受到,越是具体的图标,我们越难理解它所代表的功能。相反,如果图标太过于简单,也会让人产生误解。如下图,前面三个图标我们都能理解是“Home”键,但是最后面的则有可能代表一个向上的箭头“⇧”。
如果总结起来,我们可以用一个坐标图展示人们面对“具体”和“抽象”的图标时的混淆程度。纵坐标表示抽象图标,横坐标则表示具体的图标。粉色柱体部分则表示混淆程度。我们可看到,人们对图标的理解程度是呈弧线变化的。
观察以下两个界面的Home图标,哪个让你有“主界面”的感觉,而哪个让您有真正的“家”的感觉?
无论是设计什么样的图标,最重要的是能让用户很容易明白图标所代表的功能和意义。图标就像设计者与用户的对话,越易于明白越好。