做善待用户的设计——适当地使用图标

图标,在设计中这是个非常重要的元素。图标的作用不仅仅是设计看起来更有趣味更好看,同时也能做到以图释义,吸引用户注意力的作用。但是在设计师使用图标的时候,经常会误用一些图标设计的原则,给用户的使用造成一定的困扰。因此我们要做善待用户的设计,适当地使用图标。

在设计中,最容易错误的使用图标设计原则的就是图标的意义不强,同时又没有文字搭配以解释,给用户造成困扰。在大多数场合下,图标比文字更有说服力,这也正是一图胜千言的道理。但是图标与图片又有所区别。图标通常都是抽象的,只有一两个图形符合来阐明图标所代表的意义。而当按钮功能过于具象或者非常规的话,很难找到一个大众都能理解认同的图标。让我们看看微软在Windows 8开始界面的例子。

Windows 8的例子

design-the-icon-properly-windows-8

在Windows 8开始界面中,当你右键点击以选中一个磁贴,那么将会出现这样的快捷菜单。这个快捷菜单总共有4个按钮,左边第一个按钮是将选中的磁贴从开始屏幕中取消固定。从图标中可以看到一个图钉的形状,而背景是个禁止的符号,因此,即使这种功能是第一次出现在Windows系列系统中,但用户还是能比较容易地猜测出这个按钮的含义。第二个是卸载功能的按钮,采用了垃圾桶的符号,垃圾桶代表删除是已经被广泛使用与认可的,因此使用垃圾桶并不会给用户带来困扰,按钮的意义很明显。

到了第三个,这个功能是将磁贴缩小,展示为当前的一半大小。这是Windows 8中的新特性,用户并不熟悉。当没有下面的文字注释的时候,用户无法理解这个向左的肩头代表的是什么含义,是进入白色的方框中?还是别的其他的含义?只有试了才知道,而这是有风险的,如果点击按钮未有任何进一步的提示,用户就要冒着有可能遇到严重后果的位置风险。因此,这就给用户造成了困扰与未知性。同样,最后一个按钮是控制活动磁贴特性启用与否的,如果没有文字解释,那么这个圆圈形状的肩头最有可能的含义则是刷新,因为这种符号被广泛的用于浏览器中。

缩小磁贴与停用活动磁贴都是非常具象,同时又是非常新颖的概念。他们并未被广泛的使用以及被用户所接受,那么则需要有文字的配合才能确切的说明按钮的作用。图标能够更加形象,但同时图标也能让用户困惑,因为新的概念并未被广泛使用以达成共识。文字能够比图标更加准确的叙述功能的含义,但是却没有图标的直观,简洁与吸引人。

Vine的例子

design-the-icon-properly-vine

Vine是国外的电子商务网站。Vine的导航设计很具有参考价值,导航在正常的状态下是以纯文字的方式显示。而当鼠标划过的时候,导航则是以图标加文字的方式来显示。从截图中能够看到,前几个分别是婴儿用品,家庭清洁,美容健康等内容,这些产品很难使用一种用户广泛认知并被接受的图标来显示。虽然Vine的导航菜单的每项内容在鼠标划过的时候都具有图标,但是很明显,这些图标在没有文字的帮助下都无法准确的告知用户这是什么功能。一个好的交互设计,需要能够让用户有能力去预见到交互的下一步是什么,否则用户需要冒着很大的风险去使用。

Google Analytics例子

design-the-icon-properly-google-analytics

Google Analytics也是一个典型的例子。Google Analytics可以提供网站流量等各方面的统计信息,在界面左侧的功能模块导航页采用了大量的图标。用手盖住右侧的文字,你将会发现左侧的图标大部分都非常难以理解,甚至难以琢磨。图标必须搭配上文字才能具有更好的识别性。但是,如果试着用手盖住左边的图标,会发现右侧链接文字意思很好理解,但是却显得单调而不够明显。因为图标不仅能吸引人的注意力,同时当用户熟练使用了之后将有更快速的识别性,不必再完整地看完文字叙述就能找到相应的导航。

反例

尽管很多网站的设计师都能正确的使用图标,但也并不是每一个设计师都能够做得到。同时,有时网站的初衷并不是为了用户更好的使用,而是为了制作出更好更炫的效果来展示自己。尽管主观上就是想不走寻常路,但他们的图标应用确实给用户带来了困惑。

letters-inc

design-the-icon-properly-lettersinc

Letters-inc就是不走寻常路中的一员,网站的设计主要目的就是为了尽最大可能的展示自己。但是左侧的导航确实给用户带来了困惑,这些乱七八糟的图标到底代表了什么含义么?

Etchapps

design-the-icon-properly-etchapps

Etchapps的网站也是希望能够展示自己独特的一面,但是顶部的导航似乎也是有那么些特立独行。没有文字描述,图标晦涩难懂。

总结

从提升用户体验来说,使用图标确实会给用户带来很大的便利性。图标具有可识别性,能够吸引注意力等特点。同样,图标也是一个抽象符号,被大众所接受的图标少之又少,使用新的图标必须非常慎重,需要把自己假想为用户来设计。电脑上有鼠标,因此具有鼠标悬停的效果。当图标没有文字注解的时候,用户可以将鼠标悬停在按钮上等待提示。而触摸设备则没有鼠标悬停这样的状态,点了就是点了,那些新奇而又没有文字注解的图标用户不得不去猜测他的含义,而如果点击后的行为不具备可撤销性,那么用户将会冒着很大的风险去尝试。这对于用户来说是很不友好的,因此,我们要做善待用户的设计,适当地使用图标。

2 Comments

Leave a Comment.