图标设计的原则

图标设计的原则

最近想到要写一篇关于图标设计的原则，理由如下：

图标设计在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）

下图是一个表示“设置”的齿轮图标，我们看到，最左边的最简单的和最右边的照片级的，可用性都是非常低的，都不适合做图标。

图（9）

Vista是微软的比较失败的一个产品，原因很多，但主要的原因之一是被人称之为华而不实。我们看一下Vista的图标设计，见图（10），很漂亮，很精细，但是很显然，图标包含的元素过多了，不够直观，用户需要思考这么多元素，代表的到底什么意思？这正好违反了交互设计第一原则“不要让我思考”

图（10）

我很推崇ICONFACTORY的图标设计，见图（11），合适的精细度达到精美的视觉效果，同时又很直观，不会包含过多的元素，让你去思考。

图（11）

第四：风格统一性原则

终于提到了视觉了，你是不是着急了？我们马上开始：）

如果一套图标的视觉设计非常协调统一，我们就说这套图标具有自己的风格，这样的图标看上去也会更美丽，更专业，同时也会增强用户的满意度。

我们经常会看到很多界面上，往往会堆砌着各种不同风格的图标，显然，这些图标都是从互联网上收集起来，由于没有完全配套的图标，只能东拼西凑，导致界面粗制滥造，业余。

统一风格为什么这么重要，理解这一点，你会明白互联网上有数百万的图标资源，为什么你的老板还要花钱雇一个图标设计师。

一套好的图标，要有统一的风格，这条原则，很多设计师都明白，但是真正实现起来，也许并不那么容易。怎么做呢？

第一步：我建议你在设计之前，先做如下的定义：

是简约的，还是精致的？

是平面的，还是立体的？

是古典的，还是现代的？

是写实的，还是卡通的？

是单色的，还是多彩的？

是绚丽的，还是柔和的？

是抽象的，还是具体的？

是有框的，还是无框的？

也许我的定义并不能囊括所有的风格，但是至少可以给你提供一种思路

第二步：如果可能的话，我建议你用铅笔，在白纸上勾勒出你的草图，用什么符号图形代表什么操作，在画的时候，尽可能的想象第一步的风格定义。

第三步：统一你的色彩，准备好你的调色板。

比如我喜欢 …… 此处隐藏：1508字，全部文档内容请下载后查看。喜欢就下载吧 ……