UI设计中的图标设计应该遵守以下原则

UI / UI设计教程 /      

uimaker
UI设计师 / 江苏 南京

来源:未知   作者:ui制造者

关键词

图标的可用性原则一:图标指向的映射关系应该尽可能的直接、简单。

可能与我们的直觉相反,一些研究显示图标界面与文本界面的比较中,并没有体现出明显的优越性,一个主要原因就是文字和意义的映射是直接的,而图标与意义的映射却不一定是直接和明显的。



在坏的图标设计中,用户需要花费几秒钟甚至更长的时间去猜测图标代表的意义,而且还很可能猜错,错误的理解导致错误的操作,错误的操作导致糟糕的结果,这决不是美妙的用户体验,即便从美学角度讲那个图标可能是上佳的艺术作品。



“直接”的意思是:不要绕弯。图标展现的视觉表象与其背后的意义只需要很短的意义路径即可连结。譬如对于“剪切”操作,使用“在文稿上打×”的图标形象比“剪刀”的图标形象更易理解,因为前者与剪切操作有更短的意义路径,尽管“剪刀”图标显得更加生动活泼。



认知心理学家提出过一个激活扩散模型,就是在人的知识和概念体系中,当一个概念被加工或受到刺激时,该概念结点就产生激活,然后激活与该结点直接相连的多个连结,并继续向四周扩散。与当前概念在概念网络上的连结关系决定了其被激活的强度。这种连结关系取决于人的知识体系的组织架构(即两个概念是否属于同一类别)和概念同时出现或使用的频率。



例如在人的知识和概念架构中,在纸质文稿上写字和在电脑上写字都属于撰写文档的类别,那么当“在文稿上打×”的图标形象出现时,被试就会快速地联想到在电脑上进行剪切操作。而“剪刀”的视觉形象最易归属到“衣服裁剪”或“手工劳动”这样的类别中去,因此映射关系具有教长的路径和较弱的连结强度。因此在图标设计中,设计师应该仔细考虑或者直接去调查用户的知识体系,找到最短的概念连结。

图标的可用性原则二:每个图标指向的映射关系应该是唯一的。

这个原则的意思就是,不要让图标产生歧义。想像一下,一个“飞旋的车轮”图标,它代表了什么?也许设计者的本意,是要用车轮的移动来象征电脑中文件的移动操作。可是,用户也许猜测出了其他十几种对应关系,比如一款3D赛车游戏。这个原则其实还有一个推论原则:

不要使用过于复杂的图标。

因为图标的视觉元素越多,那么其意义指向的可能性就越多,用户越有可能从各种各样的角度去解读,那么该图标的可用性就可能越差。

图标的可用性原则三:同一个图标系列中,最好使用相同的映射模式。

在真实世界与计算机世界(或网络世界)的对应中,存在很多种映射模式。笔者粗粗地归纳下,可以发现这样几种映射模式:外观映射、功能映射、语词(字母)映射、部分指代映射和综合映射。在同一个系列图标中,用户极易对图标形成某种固定的映射模式,如果突然出现了另一种模式的映射,用户可能仍将延用先前形成的思维定势进行理解,从而出现理解困难或理解偏差。

图标的可用性原则四:最好使用简短文字做为图标的冗余编码。

在信息传播的过程中,增加信息的冗余度是保证信息传输的可靠性的最有效的方法。在人机交互设计中,最常见的冗余编码就是红绿灯,即每个颜色皆对应位置,使得在人口中占具相当比例的色盲人群也可以通过灯的位置来接收是否可以通行的信息。图标设计也需要增加冗余编码,以保证绝大多数的人都能够快速、准确地理解图标的含义。一个很好的例子出现在手机主菜单的设计中,下面看两种常见的手机主菜单的设计:

在图一中的图标都在下方加注了简单的文字,和图标一起形成冗余编码。这样即使用户是第一次使用该手机,也能避免图标选择错误。而图二的图标没有将文字直接标注在图标下方,而是在只有选中某个图标的情况下,在屏幕上方显示文字标注,这样无疑增加了用户操作的负担。尽管某些图标,用户很容易理解其含义,比如图二中第二行第一个“相机”图标,用户很容易清楚这是指拍照功能;但有些图标,在没有文字标注的情况下,还是令人费解,比如图二中第四行第一个“礼品盒”图标。因此,笔者认为,在大多数情况下,给图标加注文字是比较好的选择。
 

 收藏