| 高级搜索 | 同时使用百度 | 同时使用google |
| 高级搜索 | 同时使用百度 | 同时使用google |
| 高级搜索 | 同时使用百度 | 同时使用google |
| 高级搜索 | 同时使用百度 | 同时使用google |
| 高级搜索 | 同时使用百度 | 同时使用google |
 |
 |
|
|
 |
|
|
||||
 |
精华条目 |  |
 |
上一条目 [MAD-Weather ] 下一条目 [可爱型，派不上用场的] |
|
 |
|
作为WIMP(Window/Icon/Menu/Pointing Device)界面设计的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新
|
|
图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不应是好的图标。因此，图标的设计应该遵守以下的原则。
图标的可用性原则一：图标指向的映射关系应该尽可能的直接、简单。
可能与我们的直觉相反，一些研究显示图标界面与文本界面的比较中，并没有体现出明显的优越性，一个主要原因就是文字和意义的映射是直接的，而图标与意义的映射却不一定是直接和明显的。
在坏的图标设计中，用户需要花费几秒钟甚至更长的时间去猜测图标代表的意义，而且还很可能猜错，错误的理解导致错误的操作，错误的操作导致糟糕的结果，这决不是美妙的用户体验，即便从美学角度讲那个图标可能是上佳的艺术作品。
“直接”的意思是：不要绕弯。图标展现的视觉表象与其背后的意义只需要很短的意义路径即可连结。譬如对于“剪切”操作，使用“在文稿上打×”的图标形象比“剪刀”的图标形象更易理解，因为前者与剪切操作有更短的意义路径，尽管“剪刀”图标显得更加生动活泼。
认知心理学家提出过一个激活扩散模型，就是在人的知识和概念体系中，当一个概念被加工或受到刺激时，该概念结点就产生激活，然后激活与该结点直接相连的多个连结，并继续向四周扩散。与当前概念在概念网络上的连结关系决定了其被激活的强度。这种连结关系取决于人的知识体系的组织架构(即两个概念是否属于同一类别)和概念同时出现或使用的频率。
例如在人的知识和概念架构中，在纸质文稿上写字和在电脑上写字都属于撰写文档的类别，那么当“在文稿上打×”的图标形象出现时，被试就会快速地联想到在电脑上进行剪切操作。而“剪刀”的视觉形象最易归属到“衣服裁剪”或“手工劳动”这样的类别中去，因此映射关系具有教长的路径和较弱的连结强度。因此在图标设计中，设计师应该仔细考虑或者直接去调查用户的知识体系，找到最短的概念连结。
图标的可用性原则二：每个图标指向的映射关系应该是唯一的。
这个原则的意思就是，不要让图标产生歧义。想像一下，一个“飞旋的车轮”图标，它代表了什么?也许设计者的本意，是要用车轮的移动来象征电脑中文件的移动操作。可是，用户也许猜测出了其他十几种对应关系，比如一款3D赛车游戏。这个原则其实还有一个推论原则：
不要使用过于复杂的图标。
因为图标的视觉元素越多，那么其意义指向的可能性就越多，用户越有可能从各种各样的角度去解读，那么该图标的可用性就可能越差。
图标的可用性原则三：同一个图标系列中，最好使用相同的映射模式。
在真实世界与计算机世界(或网络世界)的对应中，存在很多种映射模式。笔者粗粗地归纳下，可以发现这样几种映射模式：外观映射、功能映射、语词(字母)映射、部分指代映射和综合映射。在同一个系列图标中，用户极易对图标形成某种固定的映射模式，如果突然出现了另一种模式的映射，用户可能仍将延用先前形成的思维定势进行理解，从而出现理解困难或理解偏差。
图标的可用性原则四：最好使用简短文字做为图标的冗余编码。
在信息传播的过程中，增加信息的冗余度是保证信息传输的可靠性的最有效的方法。在人机交互设计中，最常见的冗余编码就是红绿灯，即每个颜色皆对应位置，使得在人口中占具相当比例的色盲人群也可以通过灯的位置来接收是否可以通行的信息。图标设计也需要增加冗余编码，以保证绝大多数的人都能够快速、准确地理解图标的含义。一个很好的例子出现在手机主菜单的设计中，下面看两种常见的手机主菜单的设计：
图一、诺基亚N95的主菜单
图二、阿尔卡特OT-C825的主菜单
在图一中的图标都在下方加注了简单的文字，和图标一起形成冗余编码。这样即使用户是第一次使用该手机，也能避免图标选择错误。而图二的图标没有将文字直接标注在图标下方，而是在只有选中某个图标的情况下，在屏幕上方显示文字标注，这样无疑增加了用户操作的负担。尽管某些图标，用户很容易理解其含义，比如图二中第二行第一个“相机”图标，用户很容易清楚这是指拍照功能;但有些图标，在没有文字标注的情况下，还是令人费解，比如图二中第四行第一个“礼品盒”图标。因此，笔者认为，在大多数情况下，给图标加注文字是比较好的选择。
最后，我要说明的是，图标设计中的可用性原则与图标的美学考虑在实践中可能存在矛盾，这时候权衡两者是必须的。好的可用性可以让用户更方便地使用产品，而漂亮、时尚或者富有情趣的外观设计可以给用户带来喜悦感等良好的心理体验。很难说哪一方理所应当地取得主导地位，更理想的状态是交互设计师和视觉(外观)设计师进行良好的沟通和合作，求得双赢的设计方案。
所属分类标签:观点
愚见
这是一个案例由Jakob Nielsen 1995年为Sun设计图标的过程
这组图标展示了Technology and developer的概念。第一行前两个有光盘和芯片的图标对用户来说较难理解所指代的内容，而且更像表示已完成产品而不是开发的过程。第三个有建筑工人图标也在用户测试中被否定了，因为这样的图标在互联网上通常表示“网页正在建设中”，这是非常不好的用户体验。
在第二轮测试中，我们试图用用一个人的形象表示developer。第二行第一个图标最受用户好评，但也有人说这个图标只代表了硬件没有涵盖软件的概念。也有一些用户喜欢第二个图标，认为可以展现有力量的感觉。
我们根据第二轮测试的结果做成彩色的图标，于是有了第三行第一个图标，但是这个的图标的测试结果非常不好：闪电给人感觉痛苦，人好像是被技术杀死了，图标看上去像是一个跳舞机等等。看来人的造型不适合出现在这个图标中。所以第二个图标只留下了闪电和齿轮，但用户依然抱怨感觉好像是被毁坏的意思。因此在最终的设计中我们用了光盘和齿轮的概念。事实上产品中可能根本没有齿轮，但这个形象却一直被用户接受，形象虽已过时，但是能唤起用户正确的认知，这样的元素依然可以使用在图标中。
products and solutions (最后一个为最终设计稿）
Sun on the net(最后一个为最终设计稿）
  1 2   |
GO |
 |
快速回复 |  高级回复 |
1 
