图标设计的原则Word文档格式.docx

图标设计的原则Word文档格式.docx

《图标设计的原则Word文档格式.docx》由会员分享，可在线阅读，更多相关《图标设计的原则Word文档格式.docx（18页珍藏版）》请在冰点文库上搜索。

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

不如文字表达的准确

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

第一：

可识别性原则

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

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

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

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

见图

（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）设计师

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