图标设计的原则.docx

图标设计的原则.docx

《图标设计的原则.docx》由会员分享，可在线阅读，更多相关《图标设计的原则.docx（19页珍藏版）》请在冰豆网上搜索。

图标设计的原则

图标设计的原则

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

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

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

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

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

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

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

先说优点：

1：

代替文字，比文字要直观，提高软件可用性；

2：

代替文字，比文字更漂亮，提升视觉效果；

缺点：

不如文字表达的准确。

因此，图标设计的核心思想，就是要尽可能的发挥图标的优点：

比文字直观，比文字漂亮，减少图标的缺点：

不如文字表达的准确

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

第一：

可识别性原则

可识别性原则，意思是说，图标的图形，要能准确表达相应的操作。

换言之，就是我看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。

可以当之无愧称之为图标设计的第一原则。

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

见图

（1）：

（图1）

公路路标的特点，注定图标的设计要简单明了，要具有非常直观的可识别性，司机只需要瞄上一眼，就能准确理解路标的含义，这样便于他继续驾驶，如果图标设计的不够直观，不具有可识别性，那么司机在开车的时候会一直盯着路标看，一直在想这是什么含义，你可以想象他面临的危险会有多大，另外在高速上，如果路标设计不够直观，也有可能在司机还没有明白什么意思呢，就错过了路标。

（图2）

图

（2）是我设计的一些常用工具类的图标，你是否一眼就能看出每个图标的区别和含义呢？

这套图标虽然很简单，但是很实用，因为通常的界面不需要精度很高、尺寸很大的图标，并且这套图标符合差异性，可识别性，风格统一性的原则。

（图3）

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

第二：

差异性原则

差异性原则，什么意思呢？

意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？

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

我们看一些现实中的例子:

（图4）

见图（4），这是我平时最常用的一套软件：

用友致远办公管理系统，我只能说从差异性和可识别性来讲，这里的图标设计非常失败。

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

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

（图5）

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

（图6）

怎么办？

我想应该这样，在一套图标中，如果各个图标需要使用相同的元素，那么我们要尽量放大他们之间的差异性，减弱他们之间的相似性。

如果一套软件的六个图标有同一元素，为了强调他们之间的差异性，我甚至建议考虑放弃使用同一元素。

比如图（4）的“新建事项”“待发事项”“已发事项”，在这里我们需要强调的是“新建”“待办””已发”而不是”事项。

因此，代表事项的相同元素”文档”可以抛弃。

我们看下图AdobePhotoshop的图标，精致，专业，图标设计的典范。

我们看它完全符合差异性的原则，每个图标一眼望上去，都不一样，并且能够代表所需要的操作，可谓望图知意。

图（7）

第三：

合适的精细度，元素个数

首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。

但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。

其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。

在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。

变化曲线如下图：

（图8）

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

图（9）

Vista是微软的比较失败的一个产品，原因很多，但主要的原因之一是被人称之为华而不实。

我们看一下Vista的图标设计，见图（10），很漂亮，很精细，但是很显然，图标包含的元素过多了，不够直观，用户需要思考这么多元素，代表的到底什么意思？

这正好违反了交互设计第一原则“不要让我思考”

图（10）

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

图（11）

第四：

风格统一性原则

终于提到了视觉了，你是不是着急了？

我们马上开始：

）

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

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

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

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

怎么做呢？

第一步：

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

是简约的，还是精致的？

是平面的，还是立体的？

是古典的，还是现代的？

是写实的，还是卡通的？

是单色的，还是多彩的？

是绚丽的，还是柔和的？

是抽象的，还是具体的？

是有框的，还是无框的？

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

第二步：

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

第三步：

统一你的色彩，准备好你的调色板。

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

图（12）

在这里，工具是不重要的，无论你是使用PHOTOSHOP，ILLUSTRATOR，FIREWORKS，FLASH，FREEHAND，还是其他。

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

图（13）

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

图（14）

上图同样出自ICONFACTORY，平面的，带边框的的，简单的可爱的卡通的风格。

图（15）

上图这套图标出自俄罗斯设计师之手，看到这套图标，你是否会想起中世纪的欧洲，大航海时代？

图（16）

这是我06年为一款叫DOPWARS的小游戏做的任务角色图标设计，你可以看到它那种可爱的、3D的、卡通的风格，色彩也和谐一致。

第四：

与环境的协调性

图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。

因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？

比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。

如果你的界面是平面的，简约的，你可以考虑用一些简单的平面的符号或者图形来设计你的图标，这样整个界面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强的，在简洁的界面里，会透露出一种简约之美。

下图是我对UI设计四个阶段“用户研究，交互设计，视觉设计，可用性测试”的图标定义

图（17）

体育运动类图标的设计

图（18）

第五：

视觉效果

追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。

图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。

这一条我不想说的太多，因为这是几乎是每个设计都努力的目标，我提供一套迅速提高技能方法，最原始，但也最管用：

那就是多看，多模仿，多创作。

当然还少了一个前提，那就是设计师的天赋。

勤奋+天赋=成功

第六:

原创性

这一条对图标设计师提出了更高的要求，这是一个挑战，但我认为，图标设计的原创性并不是必要的，因为目前常用的图标风格种类已经很多，易用性较高的风格也就那么多种，过度追求图标的原创性和艺术效果，会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。

当然，这里也要看你的产品的侧重点，如果考虑更多的是情感化的设计，完美的艺术效果，这样做也无可厚非。

图（19）

上图是一个“中国风图标”我们可以说它具有原创性，它很美，但是这样的图标做不到望图知意，实际上失去了易用性，所以说，原创性与易用性，很多时候是一把双刃剑，看你的选择了。

图（20）

上面的图标设计，相信很多设计师都看过，简直就是完美的艺术品，我惊叹于它的艺术效果和原创性。

从艺术性上它可以拿到10分，从可用性上，它可能是0分，因为图标是拿来用的，我实在不知道它表达的是什么意思。

永远记住这一条，图标的价值在于它比文字更直观，失去了这一条，就是去了它的意义。

第七：

尺寸大小与格式

图标的尺寸常有以下几种：

16×1624×2432×3248×4864×64128×128256×256

图标过大占用界面空间过多，过小又会降低精细度，具体该使用多大尺寸的图标，常常根据界面的需求而定。

图（21）

图标的常用格式有以下几种：

PNG，GIF，ICO，BMP，

PNG：

无损压缩格式，支持透明，兼顾图像质量和文件大小，但是请注意，PNG格式在网页中，IE6.0或者之前的所有版本，不支持透明和半透明。

GIF：

网页图片常用格式，支持透明，优点是压缩的文件小，支持GIF动画，缺点是不支持半透明，颜色数最多只能显示256种颜色，透明图标的边缘会有锯齿，要解决此问题，必须在存成此格式时候，添加相同背景色的杂边，比较麻烦。

JPG：

有损压缩，优点是文件小，图像颜色丰富，缺点是不支持透明和半透明

ICO：

WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色

你可以用ICONWORKSHOP软件，把PNG,GIF,JPG等格式的图标，转换成ICO格式。

ICNS：

Macintosh系统里独特支持的格式，仅限于此系统。

本文作者：

樊利杰Jacky

Orangedesign（www.orangedesign.cc）设计师

长期从事交互设计，视觉设计工作