什么样的图标更具有可用性
作者：hciobserve 来源：视觉中国 发布时间：2007-10-16 17:47:00
作为WIMP(Window/Icon/Menu/Pointing Device)界面设计的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新颖、富有创造力和想像力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回到它的基本功用去思考。
图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不应是好的图标。因此，图标的设计应该遵守以下的原则。
图标的可用性原则一：图标指向的映射关系应该尽可能的直接、简单。
可能与我们的直觉相反，一些研究显示图标界面与文本界面的比较中，并没有体现出明显的优越性，一个主要原因就是文字和意义的映射是直接的，而图标与意义的映射却不一定是直接和明显的。
在坏的图标设计中，用户需要花费几秒钟甚至更长的时间去猜测图标代表的意义，而且还很可能猜错，错误的理解导致错误的操作，错误的操作导致糟糕的结果，这决不是美妙的用户体验，即便从美学角度讲那个图标可能是上佳的艺术作品。
“直接”的意思是：不要绕弯。图标展现的视觉表象与其背后的意义只需要很短的意义路径即可连结。譬如对于“剪切”操作，使用“在文稿上打×”的图标形象比“剪刀”的图标形象更易理解，因为前者与剪切操作有更短的意义路径，尽管“剪刀”图标显得更加生动活泼。
认知心理学家提出过一个激活扩散模型，就是在人的知识和概念体系中，当一个概念被加工或受到刺激时，该概念结点就产生激活，然后激活与该结点直接相连的多个连结，并继续向四周扩散。与当前概念在概念网络上的连结关系决定了其被激活的强度。这种连结关系取决于人的知识体系的组织架构(即两个概念是否属于同一类别)和概念同时出现或使用的频率。
例如在人的知识和概念架构中，在纸质文稿上写字和在电脑上写字都属于撰写文档的类别，那么当“在文稿上打×”的图标形象出现时，被试就会快速地联想到在电脑上进行剪切操作。而“剪刀”的视觉形象最易归属到“衣服裁剪”或“手工劳动”这样的类别中去，因此映射关系具有教长的路径和较弱的连结强度。因此在图标设计中，设计师应该仔细考虑或者直接去调查用户的知识体系，找到最短的概念连结。
图标的可用性原则二：每个图标指向的映射关系应该是唯一的。
这个原则的意思就是，不要让图标产生歧义。想像一下，一个“飞旋的车轮”图标，它代表了什么?也许设计者的本意，是要用车轮的移动来象征电脑中文件的移动操作。可是，用户也许猜测出了其他十几种对应关系，比如一款3D赛车游戏。这个原则其实还有一个推论原则：
不要使用过于复杂的图标。
因为图标的视觉元素越多，那么其意义指向的可能性就越多，用户越有可能从各种各样的角度去解读，那么该图标的可用性就可能越差。
0
投稿猜你喜欢
- 一般一个网站的首页访问量是最大的,如果您的网站的首页打开的非常缓慢,您的客户将会陆续离开你的网站.通常我们把需要经过复杂运算或者查询数据库得
- 为庆祝jQuery的四周年生日，jQuery官方团队正式发布了jQuery 1.4版本。在这个版本中，jQuery官方团队做了大量的编码、测
- 当使用AJAX进行GET请求的时候，会有一个现象就是刷新网页后，AJAX请求的数据没有改变，只有把IE的缓存清空，或者从新打开一个IE窗口的
- 读《论语》，子张十九，子夏曰：博学而笃志，切问而近思，仁在其中矣。 博学：架构需要广度，要尽量多学习各方面的知识。笃志：除了广度，架构师还需
- CSS文件的链接方式·附加链接：外部CSS文件·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中CSS规则定义有三种：
- write2vin 的 PPT原文路宛兮写的简介：本文解释了以下问题: 1.什么是用户体验？ 2.谁发明了这个术语？他想表达什么意思？ 3.
- 在ASP中加密方法有对应的解密方法好象不多,现在根据前辈资料整理出在asp中加密与解密函数，根据RSA 算法实现的。什么是RSA？
- 我们有理由相信采用新的内核版本（2.2.16-3 smp）也应该有性能的提升： OS2: Newer minor version kerne
- 返回页面的类容，weburl为页面urlFunction GetBytes(weburl) '创建
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。你在写HTM- ACCESS数据库中Field对象的caption属性（也就是标题）是用来设置数据字段的标题，在正常的数据库设计中为了保持维护的便利性，许多
- 见以下两个文件：showimage.asp Change the HTTP header
- 来炫耀一下，谁看得懂我写的加密算法写了一整天了，这个代码用于ajax提交，要求就是加密后内容不能变得过长，加密解密需要效率高，至于安全性，被
- 区别IE6与FF：background:orange;*background:blue;区别IE6与IE7：background:green
- 用下列代码即可:<％On error resume nextSet session=Creat
- MySQL是一个跨平台的开源关系型数据库管理系统，是我们常用的最经济实惠的数据库，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特
- 在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节。CSS是Cascad
- 阅读：Chapter 3 * 的表格“Misquotations are the only quotations tha are never
- 触发器权限和所有权CREATE TRIGGER 权限默认授予定义触发器的表所有者、sysadmin 固定服务器角色成员以及 db_owner
- 对网站的LOGO设计做了一些归纳，希望得到批评，发现写的太长了，又不忍心删减，就分成两部分了，第一部分是有关设计基础的。第二部分是关于网站L
