您的位置: 首页 > 艺术设计 > 设计理论 > 什么样的图标更具有可用性
图标可用性测试 回到列表 别让过度品牌毁了你的品牌
 什么样的图标更具有可用性

作者:hciobserve 时间: 2007-10-15 文档类型:合作网站提供 来自:视觉中国

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


图一、诺基亚N95的主菜单


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

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

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

本文链接:http://www.blueidea.com/design/doc/2007/4987.asp 

出处:视觉中国
责任编辑:moby

相关文章 更多相关链接
图标可用性测试
解决缩小图标变样问题
Photoshop制作msn水晶图标
Photoshop 制作金属质感图标
Fireworks 制作一个水晶图标
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
国外创意名片设计欣赏
情感化界面
线下项目工作流程(归纳篇)
线下项目工作流程(分析篇)
简约而不简单-Practise平面设计
培养用户的使用习惯
优秀名片设计
专题头图的秘密武器
别让UED忽悠你(2):多少钱一斤
别让UED忽悠你(1):天生的矛盾

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2