图标设计的原则.doc

图标设计的原则 最近想到要写一篇关于图标设计的原则，理由如下： 图标设计在GUI中所占的比重越来越大，很多GUI设计师都是从图标设计开始的的； 同时由于软件界面设计的未来方向是简洁、易用、高效，精美的图标设计往往起到画龙点睛的作用，从而提升软件的视觉效果； 但现实中很多设计师往往过度追求图标的视觉效果而忽视了其他几个方面，舍本逐末； 客户片面的要求图标要震撼，要立体，要发光，要高对比度，而忽视了图标所处的环境； 我们的团队经常做一些大量的图标设计工作，需要一些规范和原则； 谈到原则，我要先说图标设计的目的：先说优点： 1：代替文字，比文字要直观，提高软件可用性； 2：代替文字，比文字更漂亮，提升视觉效果； 缺点：不如文字表达的准确。 因此，图标设计的核心思想，就是要尽可能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确 以下是我总结的几条原则： 第一：可识别性原则 可识别性原则，意思是说，图标的图形，要能准确表达相应的操作。 换言之，就是我看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。 可以当之无愧称之为图标设计的第一原则。 我们看一下高速公路上的路标设计，我只能说，这是最好的图标设计，可识别性强，简单，直观，即使是不认识字的人，也能立即理解图标的含义。见图（1）： （图1） 公路路标的特点，注定图标的设计要简单明了，要具有非常直观的可识别性，司机只需要瞄上一眼，就能准确理解路标的含义，这样便于他继续驾驶，如果图标设计的不够直观，不具有可识别性，那么司机在开车的时候会一直盯着路标看，一直在想这是什么含义，你可以想象他面临的危险会有多大，另外在高速上，如果路标设计不够直观，也有可能在司机还没有明白什么意思呢，就错过了路标。 （图2） 图（2）是我设计的一些常用工具类的图标，你是否一眼就能看出每个图标的区别和含义呢？ 这套图标虽然很简单，但是很实用，因为通常的界面不需要精度很高、尺寸很大的图标，并且这套图标符合差异性，可识别性，风格统一性的原则。 （图3） 图（3）为我们的设计师Veronica为6301项目进行的图标设计，符合可识别性原则。 第二：差异性原则 差异性原则，什么意思呢？意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？ 这是图标设计中很重要的一条原则，但也是在设计中最容易被忽略的一条，图标和文字相比,它的优越性在于它更直观一些，但是如果图标设计失去了这一点，我认为图标设计就失去了意义。我们看一些现实中的例子:  （图4） 见图（4），这是我平时最常用的一套软件：用友致远办公管理系统，我只能说从差异性和可识别性来讲，这里的图标设计非常失败。“新建事项”“待发事项”“已发事项”“待办/已办”“超期督办”“流程管理”这六个图标一眼望上去，几乎是一样的，其中五个图标采用了相同的元素“淡蓝色文档”，这里图标的设计，已经失去了存在的价值，因为图标设计的目标是提高效率，用户一眼望上去他们都一样，如果不看文字，用户真的很难区分它们，这实际上是降低了工作效率。 图（5）这套图标很漂亮，但是从差异性上来讲，这套图标也是失败的，黄色的文件夹部分的六个图标，一眼望去几乎又是一样的，差异极小，在具体应用过程中会很吃力，用户需要仔细观察才能区分出他们的差别。 （图5） Catia是世界领先的CAD\CAE大型软件系统，但是它V5R16版本图标设计同样存在上述问题，见图（6），一眼望上去几乎一个样子，同时边缘粗糙，配色生硬，缺乏美感 （图6） 怎么办？ 我想应该这样，在一套图标中，如果各个图标需要使用相同的元素，那么我们要尽量放大他们之间的差异性，减弱他们之间的相似性。如果一套软件的六个图标有同一元素，为了强调他们之间的差异性，我甚至建议考虑放弃使用同一元素。 比如图（4）的“新建事项”“待发事项”“已发事项”，在这里我们需要强调的是“新建”“待办””已发”而不是”事项。因此，代表事项的相同元素”文档”可以抛弃。 我们看下图Adobe Photoshop的图标，精致，专业，图标设计的典范。我们看它完全符合差异性的原则，每个图标一眼望上去，都不一样，并且能够代表所需要的操作，可谓望图知意。 图（7） 第三：合适的精细度，元素个数 首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。变化曲线如下图： （图8） 下图是一个表示“设置”的齿轮图标，我们看到，最左边的最简单的