图标设计的原则

图标设计的原则

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

图标设计在GUI中所占的比重越来越大，很多GUI设计师都是从图标设计开始的 的；

同时由于软件界面设计的未来方向是简洁、 易用、高效，精美的图标设计往往起 到画龙点睛的作用，从而提升软件的视觉效果；

但现实中很多设计师往往过度追求图标的视觉效果而忽视了其他几个方面， 舍本 逐末；

客户片面的要求图标要震撼，要立体，要发光，要高对比度，而忽视了图标所处 的环境；

我们的团队经常做一些大量的图标设计工作，需要一些规范和原则；

谈到原则，我要先说图标设计的目的：

先说优点： 1：代替文字，比文字要直观，提高软件可用性； 2：代替文字，比文字更漂亮，提升视觉效果； 缺点：不如文字表达的准确。

因此，图标设计的核心思想，就是要尽可能的发挥图标的优点：比文字直观，比 文字漂亮，减少图标的缺点：不如文字表达的准确

以下是我总结的几条原则：

第一：可识别性原则

可识别性原则，意思是说，图标的图形，要能准确表达相应的操作。 换言之，就是我看到一个图标， 就要明白他所代表的含义， 这是图标设计的灵魂。 可以当之无愧称之为图标设计的第一原则。

我们看一下高速公路上的路标设计， 我只能说， 这是最好的图标设计， 可识别性 强，简单，直观，即使是不认识字的人，也能立即理解图标的含义。见图（ 1）：

（图1）

公路路标的特点，注定图标的设计要简单明了，要具有非常直观的可识别性，司 机只需要瞄上一眼，就能准确理解路标的含义，这样便于他继续驾驶，如果图标 设计的不够直观，不具有可识别性，那么司机在开车的时候会一直盯着路标看， 一直在想这是什么含义，你可以想象他面临的危险会有多大，另外在高速上，如聂示只难一切车辆靠右侧道路行驶Q 曲标志设在车辆必溥右侧行赧的路 口以前适当如 盡蠶憲肆議鑫鸚齟蠶

表示车辆在立交处可以直行和按囹示

踣线右转克行驶。止需志设在立交右 转毎出口处适当位贵“ 表示只准车辆靠右环行d此标志设在 环岛面向路口来车方向适当位蛊©

羌示机动车行至该标志处宓须鸣喇 呱此标志设在公賂的急拷音处、瞇 城等视纟主不良路谴的起点。 烹示机动车驶入前方道路之最倨时谨

阻刮£此标志设在高谏处路或算他道 路限速路段的起点。 靠右侧道略行驶 靠左侧道路行驶

立交直行和右转晋行胆 口以前适当位置。

环岛行驶

呜喇叭 最低限谨 果路标设计不够直观，也有可能在司机还没有明白什么意思呢，就错过了路标

B

锁定

（图2）

图（2）是我设计的一些常用工具类的图标，你是否一眼就能看出每个图标的区 别和含义呢 这套图标虽然很简单，但是很实用，因为通常的界面不需要精度很高、尺寸很大 的图标，并且这套图标符合差异性，可识别性，风格统一性的原则。 0

创建 恭加 后退 ©按框

UD檢隔腕

手动 七相对

（图3）

图（3）为我们的设计师Veronica为6301项目进行的图标设计，符合可识别性 原则。 设1 第二：差异性原则

差异性原则，什么意思呢意思是如果一个界面上有六个图标， 我一眼看上去，要

能第一时间感觉到他们之间的差异性，否则我怎么辨认呢

这是图标设计中很重要的一条原则，但也是在设计中最容易被忽略的一条，图标 和文字相比，它的优越性在于它更直观一些，但是如果图标设计失去了这一点， 我认为图标设计就失去了意义。我们看一些现实中的例子 ：

协同工作

lol 已煖事顶 IF^I （图4）

见图（4）,这是我平时最常用的一套软件：用友致远办公管理系统，我只能说 从差异性和可识别性来讲，这里的图标设计非常失败。“新建事项” “待发事项”

“已发事项” “待办/已办”“超期督办”“流程管理”这六个图标一眼望上去， 几乎是一样的，其中五个图标采用了相同的元素“淡蓝色文档”，这里图标的设 计，已经失去了存在的价值，因为图标设计的目标是提高效率，用户一眼望上去 他们都一样，如果不看文字，用户真的很难区分它们，这实际上是降低了工作效 率。

图（5）这套图标很漂亮，但是从差异性上来讲，这套图标也是失败的，黄色的 文件夹部分的六个图标，一眼望去几乎又是一样的，差异极小，在具体应用过程 中会很吃力，用户需要仔细观察才能区分出他们的差别。新建爭顶

待发爭项 茬劳事顶CO

我的日程事

③些该：俣

@ 蒔办/己办

超期習办

曰

流程管理

（图5）

Catia是世界领先的CAD'CAE大型软件系统，但是它V5R16版本图标设计同样存 在上述问题，见图（6），一眼望上去几乎一个样子，同时边缘粗糙，配色生硬， 缺乏美感

（图6） 怎么办

我想应该这样，在一套图标中，如果各个图标需要使用相同的元素， 那么我们要 尽量放fc/y CcTuptiter

-•— n

Fo dei CktM

MOM Fo'der w«h I

筝巴品结枸

L®拭料库

（33 £ATIA g 金 YZ

屋］catalog）编辑器

Plioto Studio

immersive System AESIstartt

E*fcl Timw R«nd«ring

Pr殳du* Het* fil 侵征字典躺辑器 L J »u — lomaxya i.ts t j

Q幵贻& 丈件® 漏辐厉视團&

alysis Manager

Links Manager. 1

Finite Elcmcnt Model・ 1

—包 Nodes and El巳ments 一了

Properties・ 1 人目 Et a~tic Cam已 Recycle Bin Full

Ft der ivitri Fii*» Fokdcr Apple Clow Giflck Recycle bin Dlu 大他们之间的差异性，减弱他们之间的相似性。如果一套软件的六个图标 有同一元素，为了强调他们之间的差异性，我甚至建议考虑放弃使用同一元素。 比如图（4）的“新建事项”“待发事项”“已发事项”，在这里我们需要强调 的是“新建”“待办” ”已发”而不是”事项。因此，代表事项的相同元素”文档' 可以抛弃。

我们看下图Adobe Photoshop的图标，精致，专业，图标设计的典范。我们看它 完全符合差异性的原则，每个图标一眼望上去，都不一样，并且能够代表所需要 的操作，可谓望图知意。

图（7）

第三：合适的精细度，元素个数

首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但 现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实， 图标的可用性随着精细度的变化， 是一个类似于波峰的曲线。在初始阶段，图标 可用性会随着精细度的变化而上升， 但是达到一定精细度以后，图标的可用性往

往会随着图标的精细度而下降。变化曲线如下图:

（图8） 下图是一个表示“设置”的齿轮图标，我们看到，最左边的最简单的和最右边的

照片级的，可用性都是非常低的，都不适合做图标。

图（9）

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

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

® ■ T ©

图（11）

第四：风格统一性原则

终于提到了视觉了，你是不是着急了我们马上开始：） 如果一套图标的视觉设计非常协调统一， 我们就说这套图标具有自己的风格，这 样的图标看上去也会更美丽，更专业，同时也会增强用户的满意度。

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

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

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

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

是简约的，还是精致的 是平面的，还是立体的？ 是古典的，还是现代的？ 是写实的，还是卡通的？ 是单色的，还是多彩的？ 是绚丽的，还是柔和的？ 是抽象的，还是具体的？

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

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

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

比如我喜欢用ILLUSTRATOR我会从调色板面板里调出一种风格的色彩，略加调 整，这将是我这套图标的色彩定义，在画图标的时候，尽可能选择你定义好的颜 色，这样，你就能尽可能的保证你的图标色彩的统一。 爭节

金雇

图（12）

在这里，工具是不重要的，无论你是使用PHOTOSHOPILLUSTRATQRFIREWORKS FLASH

FREEHAND 还是其他。 定义好了风格，草图，调色板，就开始充分发挥你的想象吧。

图（14） 上图同样出自ICONFACTOR丫平面的，带边框的的，简单的可爱的卡通的风格图（13）

上图是ICONFACTORY设计的一套图标，色彩唯美，风格统 你不觉得它很美吗 ，散发着神秘感,

图（15）

上图这套图标出自俄罗斯设计师之手,

洲，大航海时代看到这套图标，你是否会想起中世纪的欧