10 Mistakes in Icon Design

这篇文章是一位来自俄罗斯的设计师 Turbomilk 先生在08年写的博客，主要探讨的是系统图标在设计的时候需要考虑到的10个有关用户体验的细节。

前言 （Introduction）

给别人的作品挑刺比自己的要容易的多。不过，如果使用比较系统的方法去评价，列出一条编号表和插图，就很有说服力了。我认为：icon设计正在经历一个过渡期。一方面屏幕分辨率在变大，图标也会变大；另一方面，我们仍然有很多好的像素尺寸：比如16*16甚至更小的，经常用。所以在这里列出关于icon设计最容易犯错的地方

1. 图标之间的对比不够强烈(Insufficient differentiation between icons)

有时候一组图标，看起来都很相像，很难去辨别啥是啥。如果没注意文字说明，你就很容易把它们弄混淆

上图是Mac OS X系统的三个图标，我经常把它们搞混，以至于老是打开错误的应用。并且在显示器上显示更小尺寸的图标时，问题更严重。（见下图）

2. 图标包含了太多的元素信息( Too many elements in one icon)

一个图标越简洁效果越好。(尝试)把个图标上的元素精简到最少才算完美的。然而，微软的设计师们从Windows Vista的新式图标受到启发，决定把图标设计的大而臃肿以显示他们的“财大气粗”

每个纵横交错的线条组成的图标都向我们展示一个精简的故事。在小的尺寸下，你看不清实际描绘的是什么，甚至是在更大一点的图标，也并不是那么容易

3. 多余的元素信息（Unnecessary elements）

图标的辨识度要高，它包含的元素信息应该越少越好，如果这整个的图形是相关的且不只是一部分那就更好了。所以你应该把注意力放在图标的本身的内涵（意义内容）上。下面我们列举几个数据库图标的例子

初看，感觉还不错。但是假如这个应用(或者是一个单独的工具栏)只是关于数据库的，我们可以（甚至应该是）去掉那些不必要的部分

（当去掉之后）含义没变，但是图标的辨识度更高了。下图就是一个很实际的例子：BeOS5系统图标中多余的信息元素

里边的虚线是不必要的部分，顺便吐槽下：干嘛要用红色的对勾做标记呢？

4. 一组图标中风格不统一（ Lack of unity of style within a set of icons）

把那些风格统一的图标放在一起。可以是色调上的统一，透视比例，尺寸大小，绘画技巧甚至是几种其中属性的组合。当图标比较少的时候，设计师可以保留一些自己的想法。当图标比较多的时候，并且还是几个设计师同时为这一组图标做设计的时候（比如一个操作系统所有的图标设计），那么就需要有一个详细的设计指南规定图标的设计风格来和整个图标集协调

上图所显示的是Windows XP系统的Shell32.dll文件中，多种设计风格的图标。这种默认的图标集让人看了想换掉

5. 多余的透视和投影效果（Unnecessary perspective and shadows in small icons）

进展永不停息：用户界面已经拥有展示半透明对象的潜在能力， 没有色彩数量的限制并且有向3D图标发展的趋势。但是这真的有用么？不一定。比如当这些图标的尺寸是16*16px甚至更小的时候下图这个例子，我们从GNOME 2.2.0打开应用管理器

图标在最小尺寸下的透视关系是不必要的，甚至会有副作用；下图所示的是Windows XP系统的应用管理器的（图标设计）

按照标准，Windows XP的图标有2px的黑色投影，对于尺寸为16*16px的图标来说太大了，看起来显得很脏，上边的图标集中的“Address Book”（通讯录）图标更是不堪入目。

6. 过于隐晦（Overly original metaphors）

选择图标中所要展示的内容，通常是在它的可识别性与它的原始功能之间进行权衡。设计一个形象的图标之前，明智的做法是看它如何与其他产品相协调。也许最好的解决办法不是构思出某些原创的想法而是与现有的环境相适应（协调）。举个（反面）例子：.OS/ Warp 4系统的垃圾箱图标设计，看起来不像是垃圾箱而是碎纸机。

(上图中)碎纸机的另一个问题是大家的认知里并没有碎纸机。这个图标看起来像是打印机，而且当垃圾箱装满了垃圾时的效果很不模糊（不够明确）

7. 忽略（图标的）社会属性与国家属性（National or social characteristics not being taken into account）

考虑到你的图标会应用到什么地方是非常有必要的，其中一点就是图标的国家属性。在不同的国家，文化传统，环境以及生活习惯可能截然不同。就比如说我们设计一个邮箱图标，那么参考真实的纸质邮件就非常有用。看下图的邮筒。

这些图像来自维基百科的文章Post box。答案在Mac OS X图标设计手册这篇文章中：使用常规的图像能够很容易识别。把焦点集中在元素的主要部分。比如一个邮件图标，一张邮票就比乡间邮筒来的直观

设计成邮票的形式非常好，不过那只翱翔的红尾鹰却不合适。还有，你需要考虑的不仅仅有国家因素，这倒提醒了我一些有趣的事情：有一次，我们需要设计一个数据过滤器（的图标），通常会设计成一个漏斗的形式，像下图所示：

（然后）客户的反应是：我不太理解我要的是数据过滤器，而你们绘制的图标像个马丁尼酒杯

8. 图标中真实的界面元素（ Images of real interface elements in icons）

Mac OSx系统图标设计手册提到：不要在你的图标中使用半透明溶液状效果；因为他们可能会与边框界面混淆。请看下图的例子：

点击单选按钮，摁到的却是整个图标！

请注意上图中向前和向后的按钮（下方有文字说明）。但是，他们根本不是按钮，而是图标。

9. 在图标中嵌入文字（ Text inside icons）

这是应用图标设计中的常见问题。在设计一款app图标时首要考虑的就是加入该App的logo,（但是）把文字写入图标中是多么糟糕的一件事啊：首先，它是与语言相关的，不利于地方化；然后就是当图标比较小的时候，根本看不清文字内容；最后就是图标中的文本和这个app的名字有重复

10. 超越像素框架（Outside the pixel framework）

一般来说，这个问题多出现在绘制矢量图标的时候，当图标比较大的时候，看起来效果不错，很清爽干净；但实际上，图标都比较小，并且是在栅格系统下，有锯齿边缘

尾记：强烈建议感兴趣的朋友请移步原文，本文纯属个人练习和分享