什么样的图标更具有可用性
作者：hciobserve 来源：视觉中国 发布时间：2007-10-16 17:47:00
作为WIMP(Window/Icon/Menu/Pointing Device)界面设计的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新颖、富有创造力和想像力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回到它的基本功用去思考。
图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不应是好的图标。因此，图标的设计应该遵守以下的原则。
图标的可用性原则一：图标指向的映射关系应该尽可能的直接、简单。
可能与我们的直觉相反，一些研究显示图标界面与文本界面的比较中，并没有体现出明显的优越性，一个主要原因就是文字和意义的映射是直接的，而图标与意义的映射却不一定是直接和明显的。
在坏的图标设计中，用户需要花费几秒钟甚至更长的时间去猜测图标代表的意义，而且还很可能猜错，错误的理解导致错误的操作，错误的操作导致糟糕的结果，这决不是美妙的用户体验，即便从美学角度讲那个图标可能是上佳的艺术作品。
“直接”的意思是：不要绕弯。图标展现的视觉表象与其背后的意义只需要很短的意义路径即可连结。譬如对于“剪切”操作，使用“在文稿上打×”的图标形象比“剪刀”的图标形象更易理解，因为前者与剪切操作有更短的意义路径，尽管“剪刀”图标显得更加生动活泼。
认知心理学家提出过一个激活扩散模型，就是在人的知识和概念体系中，当一个概念被加工或受到刺激时，该概念结点就产生激活，然后激活与该结点直接相连的多个连结，并继续向四周扩散。与当前概念在概念网络上的连结关系决定了其被激活的强度。这种连结关系取决于人的知识体系的组织架构(即两个概念是否属于同一类别)和概念同时出现或使用的频率。
例如在人的知识和概念架构中，在纸质文稿上写字和在电脑上写字都属于撰写文档的类别，那么当“在文稿上打×”的图标形象出现时，被试就会快速地联想到在电脑上进行剪切操作。而“剪刀”的视觉形象最易归属到“衣服裁剪”或“手工劳动”这样的类别中去，因此映射关系具有教长的路径和较弱的连结强度。因此在图标设计中，设计师应该仔细考虑或者直接去调查用户的知识体系，找到最短的概念连结。
图标的可用性原则二：每个图标指向的映射关系应该是唯一的。
这个原则的意思就是，不要让图标产生歧义。想像一下，一个“飞旋的车轮”图标，它代表了什么?也许设计者的本意，是要用车轮的移动来象征电脑中文件的移动操作。可是，用户也许猜测出了其他十几种对应关系，比如一款3D赛车游戏。这个原则其实还有一个推论原则：
不要使用过于复杂的图标。
因为图标的视觉元素越多，那么其意义指向的可能性就越多，用户越有可能从各种各样的角度去解读，那么该图标的可用性就可能越差。
0
投稿猜你喜欢
一、jupyter notebook是什么官网的介绍是：Jupyter Notebook是一个Web应用程序，允许您创建和共享包含实时代码，- 彩色圆环更漂亮A.课程内容通过绘制彩色的圆环来学习列表的使用方法、颜色的使用技巧等，通过学习掌握python程序绘制彩色的图形的方法。B.知
- 1.链式法则根据以前的知识，如果我们需要寻找到目标参数的值的话，我们需要先给定一个初值，然后通过梯度下降，不断对其更新，直到最终的损失值最小
- 这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题vue-devtools是什么？vue
- 1、PandasPython Data Analysis Library 或 pandas 是基于NumPy 的一种工具，相当于这是Pyth
- 效果图：实现代码如下view<canvas id="radar-canvas" class="radar
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 圆圈检测概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.
- 前言序号算是在展示数据的时候，一种很普遍的属性了，我们可以自己写生成序号的规则，也可以借助第三方。这里我选择后者，使用Element-UI自
- 如下所示：<!--将以下代码加入HTML的<Body></Body>之间--><SCRIPT la
- 在本文中，我们将学习如何使用 OpenCV 为多个图像添加水印。1. 什么是水印？水印是有意叠加在不同图像上的标志、签名、文本或图案，用于保
- 网页布局中常有的一种情况就是网页主体部分分成一行两列；而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；
- 我就废话不多说了，大家看代码吧！dataset = ["el","tv"]model = [&quo
- 使用步骤大致分为两步，就不多废话第一步、修改hosts文件将0.0.0.0 account.jetbrains.com添加到hosts文件最
- 一、Mock介绍1、什么是Mock模拟接口接口Mock测试：在接口测试中，对于某些不容易构造或者不容易获取的接口，可以用一个模拟接口来代替2
- 0x00 前言eval是Python用于执行python表达式的一个内置函数，使用eval，可以很方便的将字符串动态执行。比如下列代码：&g
- 描述sin()返回的x弧度的正弦值。语法以下是sin()方法的语法:importmath math.sin(x)注意：sin()是不能直接访
- 我们都知道代码都是顺序执行的，也就是先执行第1条语句，然后是第2条、第3条……一直到最后一条语句
- python如何为创建大量实例节省内存，具体内容如下案例：某网络游戏中，定义了玩家类Player(id, name, status,....
- 首先是准备工作Python 2.7.11：下载pythonPycharm：下载Pycharm其中python2和python3目前同步发行，
- 环境pip install opencv-python==3.4.2.16pip install opencv-contrib-python
