| 第3章 |
工具图标的设计







工具图标是用户界面中用来传达特定信息的图形，具有非常多的功能和优点。它不仅能增加用户获取信息的效率，还可以提升界面的视觉体验。
工具图标看起来很简约，只通过一些基本的几何图形组合就能完成，对于软件操作的要求并不高。但是，工具图标简约却并不简单。对于整套图标的设计来说，想要得到正确合理的结果，需要很多基础设计知识的应用与考量。
想要设计出优秀的图标并不容易，本章会从基础的设计知识入手，并通过案例对理论和软件进行进一步的整合。
◎ 学习目标
(1) 认识图标。
(2) 了解工具图标的基础规范和设计理论应用。
(3) 学会如何应用工具图标的格线系统。
(4) 学会如何正确地绘制线性图标。
(5) 学会如何正确地绘制面性图标。
◎ 基本技能
掌握图标的基础规范和常用图标的绘制方法。







3．1工具图标的规范
在开始设计案例演示前，首先谈谈工具图标包含的规范和基础特征，这是在设计应用时必须满足的要素，切记不可忽视。


3．1．1表意准确
我们知道图标的主要作用之一就是传递信息。有些图标标示的功能和寓意都非常清晰，例如，看见放大镜，就会当成搜索； 看见钥匙或者锁，就会理解成是密码。
虽然图标在设计时要经过抽象化的处理，但清晰表达寓意是工具图标最基本的要求，否则会给用户制造不必要的困扰。如图31所示。

很多图标图形的寓意已经广泛被用户所接受，达成了共识，但我们也说过，图标的抽象性有一部分来源于信息的抽象化。比如图32中的这组图标，你能否直接得出结论，说出它们指代的信息是什么？




图31表意准确的图标举例





图32表意模糊的图标举例


相信这些是读者无法给出准确定义的图标，而当人们为它们加入文字解释之后，再分析一下这些图形，就很容易理解其表达的含义。如图33所示。



图33加入文字表述的图标举例


即使一开始并不认识这些图标，但只要这些图形与其表达的含义具有较为准确的关联，那么就能被很快记忆并运用。就像在Photoshop工具栏中选择的各种图标，往往也由一眼无法理解其含义的图形组成，但只要经过几次操作就可以快速识别了。如图34所示。



图34Photoshop工具栏图标举例

在我们设计图标前，要先确认每个图标的图形样式，并判断它们是否可以准确地表达出指定的含义。无论之后为图标增加什么创意细节或视觉效果，表意准确都不容忽视，这是衡量一个图标正确与错误的基本原则。
3．1．2一致性
第二个规范就是图标的一致性。即在一个或一套图标中，细节应该保持一致性。图35是典型的反面案例。



图35细节不一致的图标举例


在图35的案例中，不同图标间有很大的割裂感，完全不像处于同一套设计体系之中，这就是缺乏一致性的表现。初期设计一套完整图标最大的难点，就是让所有图标保持视觉细节上的一致性。
要保持图标的一致性，需要满足以下五个标准。
1． 类型一致
工具图标有线性、面性等不同的类型与风格，在正常情况下，同一套图标应该保持类型与风格的一致，即不要在使用了线性的同时又应用了面性风格。如图36所示。



图36类型一致图标举例


2． 风格一致
每一套图标都有自己的设计风格，不同风格在细节中有不同的表现。在设计图标时，需要让这些风格特征保持高度的统一，比如下面这些案例。
案例一，为图标添加缺口的设计风格。要保证这个缺口的大小是一致的，并且每一个图标中有且只有一个缺口，而不是靠感觉随意添加。如图37所示。
案例二，在偏圆润可爱的设计风格中，如果外轮廓使用了较大的圆角，那么要尽可能保证圆角的大小是一致的，而不是有的用4pt，有的用2pt或者直接使用直角。如图38所示。




图37风格一致图标举例1





图38风格一致图标举例2


案例三，在采用了填充色偏移的设计风格中，首先要保证填充色的一致性，并且偏移的距离和方向也要有固定的规律，而不是完全凭个人感觉制定。如图39所示。



图39风格一致图标举例3

3． 透视一致
透视关系是在平面中对物体空间性质的表现方式，当应用了透视时，物体就有了一定的 “立体感”。如图310所示。



图310透视关系手绘图


透视的表现方式不是绘制图标时必须使用的，但是如果在图标中应用了透视，就要确保使用的视角是一致的，要避免在同一套图标中既用了正视图又包含了斜视图。如图311所示。



图311透视一致图标举例

4． 描边一致
在图标中会用到矩形线段或是描边，要尽可能保证它们的粗细是一致的，即在 Ai 中描边应该使用相同的尺寸。如图312所示。

在填充图标中，可以在一个矩形或是圆形中增加镂空，如图313中的几个图标。应注意这种情况下也要保证它们的粗细是一致的，而不是各不相同。




图312描边一致图标举例1





图313描边一致图标举例2


5． 大小一致
大小一致是指图标的视觉大小保持一致，而不是它们在 Ai 中长宽属性的值保持一致。如图314所示。



图314大小一致图标举例


保持大小一致是一个比较复杂的问题，在初期往往会认为使用一个固定尺寸的画布或是参考线，就能规范出图标统一的尺寸，但这个思路是错误的。
要保持图标视觉大小的一致，需要理解几何图形的视觉差以及对应的格线系统，具体将在3.2节具体说明。
3．1．3格线系统



图315标准的格线系统

在绘制图标时，我们要建立一套标准的格线系统，用来规范元素图形的边界和尺寸，如图315所示，其中包含一个横向矩形和纵向矩形，还有正方形和圆形。

为什么需要这样的格线系统辅助我们的设计呢？我们需要先理解几何的视觉差。
首先，设立一个目标，如画出边界大小相等的正方形、圆、三角形。理论上，只要将这三个图形的长、宽属性参数设置成一样的，问题就解决了。如图316所示。
如果仔细观察，就会发现这三个图形给人们的视觉感受是大小不一致的，即正方形大于圆大于三角形。
导致这个问题的原因就是几何图形的视觉差——占用面积越大的图形，给人们的视觉的大小感受就越大。如果在图315中图形右侧空白处画一条等高的竖线，通常会觉得这条竖线比左侧的三个图形上下距离都短。
针对这个特性，要让前后三个图形在视觉大小上保持一致，就需要放大圆和三角形。如图317所示。




图316绘制边界大小一致的正方形、圆、三角形







图317实际边界大小不一致但视觉大小

一致的正方形、圆、三角形


当要设计一整套图标的时候，也面临这样的问题。不同形状的图形给我们视觉的大小感受是不同的，如果单纯依靠感觉来调整，那么效率和准确性都极低。这时候，图标的格线系统就要派上用场了。
在这个格线系统中，正方形的尺寸最小，圆比它稍大，长方形的最大长度比圆稍大一些。当在实际设计过程中，就可以根据参考线提供的尺寸设计对应的图形了。如图318所示。



图318符合视觉大小一致的图标参考线举例


当然，以上展示的效果是理想状态。格线无法完美地匹配要设计的所有图形，所以，要记住该系统仅是一个 “参照物”。正方形是图形中长宽最小的图形，其他图形的尺寸，则在正方形到外边界之间缩放，最终得到视觉大小一致的效果。如图319所示。



图319图标参考线运用举例

3．2线性图标的设计
这一节我们会演示如图320所示线性图标案例的设计。



图320线性图标案例设计

在开始设计前，先要做一些基础的准备。
（1） 创建一个 1000×1000 像素的画布。
（2） 在 “编辑”→“首选项”→“参考线和网格”设置面板中，将里面的网格线间隔和次分隔线设置成 1 像素，单击“确定”按钮。
（3） 在栏目中单击 “视图”→“显示网格”，在画布中开启网格参考线。
（4） 确定图标设计的尺寸，并绘制对应的格线系统。在这里使用 28×28 像素的图标，先画一个对应尺寸的矩形，填充黑色并将透明度设置成 10%，对应绘制出格线。最后，选中它们右键 “编组” 即可。


前期准备及建

立格线系统


完成了以上步骤，就可以开始具体的设计操作了。
3．2．1搜索图标
第1步： 绘制一个 20px大小的圆，并将描边设置为 2px。然后再画一个宽为 2px，高为 9px 的圆角矩形。
第2步： 将矩形移动到圆形下方相交，并单击右键进行编组。如图321所示。

第3步： 选中“编组”，在“属性”的旋转角度属性中，将参数改成 -45°，再调整一下位置，即可得到最终图形。如图322所示。




图321搜索图标的绘制





图322搜索图标最终效果




线性搜索

图标


3．2．2聊天图标



图323聊天图标绘制步骤1

第1步： 首先画出聊天的气泡外轮廓，它是由一个 22px×18px的矩形和一个 12px×6px 的三角形构成的。矩形圆角为4px，三角朝下的圆角为2px。如图323所示。
第2步： 将它们连接并垂直方向居中，然后使用路径查找器面板的 “联集” 选项，将它们合并成一个图形。如图324所示。

第3步： 在轮廓内部画一个 2px×10px 的长矩形和一个 2px×7px 的短矩形，即可得到最终图形。如图325所示。




图324聊天图标绘制步骤2




图325聊天图标绘制步骤3



线性聊天

图标


3．2．3眼睛图标
第1步： 画两个2px 描边垂直方向对齐并相交的圆，并使用路径查找器中的 “交集” 功能获取它们相交的部分。如图326所示。



图326眼睛图标绘制步骤1



第2步： 将左右两个尖角的圆角大小改为2px。如图327所示。


线性眼睛

图标


第3步： 在中央位置添加一个8px 大小的圆，即可得到最终效果。如图328所示。




图327眼睛图标绘制步骤2




图328眼睛图标绘制步骤3

3．2．4心形图标
第1步： 画两个 14px×21px 的矩形，一个竖直，另一个水平放置，并将上方和右侧的两个边缘进行圆角处理。如图329所示。



图329心形图标绘制步骤1


第2步： 将两个图形移动相交，并保证上方和右侧的两个半圆正好紧贴在另一个矩形的边缘，然后使用路径查找器中的“联集”功能，即可得到一个躺着的心形。如图330所示。
第3步： 将心形进行旋转，并置入模板中，将描边属性的边角改为圆角连接，底部的尖角圆角改为 2px，即可得到最终效果。如图331所示。




图330心形图标绘制步骤2




图331心形图标绘制步骤3



线性心形

图标


3．2．5卡券图标

第1步： 画一个 28px×24px 的圆角矩形，圆角为3px，在它的上下方各画一个 4px 大小的圆，并与矩形的边缘相交。




图332卡券图标绘制步骤1

如图332所示。
第2步： 确认两个小圆图层顺序在矩形的上层，然后选中三个图层，使用路径查找器中的 “减去顶层” 操作即可得到外轮廓。如图333所示。

第3步： 画出卡片中的两段 2px×3px 的 “虚线”，即可得到最终效果。如图334所示。




图333卡券图标绘制步骤2





图334卡券图标绘制步骤3




线性卡券

图标


3．2．6房屋图标
第1步： 首先画出一个 28px×10px 的等腰三角形，再画一个 22px×16px 的矩形，将它们的边缘进行重叠。如图335所示。



图335房屋图标绘制步骤1

第2步： 设置三角形三个尖角的圆角依次为 3px、1px、1px (上、左、右)，再为矩形下半部分的两个直角添加4px圆角。如图336所示。
第3步： 执行 “联集” 操作，生成完整的外轮廓。之所以先做圆角再执行联集，是因为提前合并两个形状，会导致一些尖角无法使用圆角工具。如图337所示。

第4步： 画出房屋中间8px大小的圆形。然后将图形置入模板中，即可得到最终效果。如图338所示。




图336房屋图标绘制

步骤2




图337房屋图标绘制步骤3





线性房屋

图标





图338房屋图标绘制

步骤4

3．3面性图标的设计
在完成了线性图标的设计以后，再开始面性图标的设计就容易不少。我们依旧使用图320所示的六个图形，将它们通过面性的风格演示一遍。如图339所示。



图339面性图标案例设计


本案例依然使用28像素长宽的图标尺寸，应用前文所说的准备内容，并将格线的模板复制过来，就可以开始进行设计了。