什么样的图标更具有可用性_网页设计教程

推荐：设计师的框架
byJeffCroft翻译：qing原文地址：http://www.alistapart.com/articles/frameworksfordesigners近来，在Web开发中”框架”是一个相当时髦的词。比如JavaSc

作为WIMP(Window/Icon/Menu/Pointing Device)界面设计的要害部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新奇、富有创造力和想像力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回到它的基本功用去思考。

图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，假如这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不应是好的图标。因此，图标的设计应该遵守以下的原则。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

图一、诺基亚N95的主菜单

图二、阿尔卡特OT-C825的主菜单

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

最后，我要说明的是，图标设计中的可用性原则与图标的美学考虑在实践中可能存在矛盾，这时候权衡两者是必须的。好的可用性可以让用户更方便地使用产品，而漂亮、时尚或者富有情趣的外观设计可以给用户带来喜悦感等良好的心理体验。很难说哪一方理所应当地取得主导地位，更理想的状态是交互设计师和视觉(外观)设计师进行良好的沟通和合作，求得双赢的设计方案。

分享：天极产品设计流程
写这个的目地，主要是系统理下目前产品设计的流程,提醒自己尽量去避免一些常见的问题，也能让大家系统的了解天极网的产品设计流程。当然，不保证任何产品都能套