浅谈设计师必看的图标和ICON设计指南(4)

5.2 图标绘制细节

清晰是图标的基本要素，在sketch中，参数不要有小数点，让图标占满像素网格。因为计算机不能识别小数点，导出图标时计算机会把不能识别参数的部分拉伸填满像素网格，导致图标出现虚边。

如果为图标设置1像素的边框，边框应该使用外部或内部的描边样式，但是不建议居中描边样式，居中描边的1px边框，虽然在放大它们的时候，它们看起来很清晰。但在100%比例大小显示的时候，它们会模糊，如下图：

根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。通常情况下，线的倾斜角度在45°，30°，60°的时候，清晰度会比一些不常见的角度效果会更好，比如13.7°，81°等等。所以，尽量避免用这些奇怪的数值。

从一套图标中最复杂的那个开始来设计通常是最有效的，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。因为当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。

5.3 图标的基本元素

5.3.1 大小

一致性是设计图标的关键，在绘制时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕;@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。

通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。

不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的产品图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。

这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

5.3.2 描边和填充

没有什么比看到一个填充图标和一个线性图标放在一起更让人抓狂的了。确保你的图标风格一致是非常非常重要的。比如你想用填充图标来表示选中状态，那么请一定要确保你的其他图标风格一致，只有少量的变化。

通常，填充图标具有更高的可识别性，而描边图标更方便添加细节。并且在选择你哪种风格更合适的时候，也别忘了考虑品牌定位和风格。

如果你要绘制描边图标，那么需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。

当我们绘制线性图标的填充版本时，首先需要考虑如何简化线条。理想情况下，填充图标类似于阴影，而不是直接翻转颜色。绘制填充图标的描边版本，需要确定好线条的粗细，以及在保证清晰度的情况下可以添加多少细节。

5.3.3 颜色

如果是功能图标，那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂，不利于和其他设计师协作。而对于营销图标，出于品牌宣传的目的，你可能会想要使用两种颜色，个人认为图标最好是单一颜色的，3种或3种以上颜色的东西都是插图，而不是图标。

5.4 功能图标的风格

常见的功能性图标风格大致有三种：线性图标、面形图标和扁平化图标。但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式，所以归根到底，基础的图标风格有两大类：「线性图标」和「面型图标」;

5.4.1 线性图标

线性图标是通过线条来表现物体的轮廓，它比面形图标更能塑造优美的外观，且作为贯穿图标绘制的线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。例如twitter和微信底部的tab图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，会给人一种权重上存在差异的感觉。所以，在绘制线型图标时，通常会使用统一粗细的线条。

常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。

线性图标根据样式还可以分为：双色线性图标、线面填充图标、线性渐变图标。

5.4.2 面形图标

面形图标是以面为主要表现形式的图标。在「微信」底部标签栏中，为选中的图标是线性图标，而选中的图标则是面形图标，同时颜色会变成微信的品牌绿色再次暗示用户选中状态。面形图标占用的面积要比线性图标多，所以更加显眼。实际上，苹果在新的设计规范中也建议开发者在APP底部标签栏中全部使用面形图标，是否处于点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。

面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。

基于最基本的「线性图标」和「面型图标」，通过不同的形态和风格的组合，再结合丰富的 表现手法，就可以设计出形形色色的图标风格了。比如：不同粗细线条线性图标的组合，或者面面组合，或者线面组合。大家在设计图标的时候，需要根据自己的产品特征、受众和使用场景，去选择适合自己的表现形式。

6.1 图标绘制方法

图标的绘制方式主要有两种：布尔运算和贝塞尔曲线。

6.1.1 布尔运算

布尔指的是乔治·布尔，19世纪的一位数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以将这种运算称为布尔运算。

布尔运算听起来比较难，但其实非常简单，布尔运算采用的数字逻辑推演法，主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法，对应到设计软件中，就有：合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。例如两个圆形相减可以得到一个月亮的造型，这就是布尔运算。

合并形状：将两个形状合并为一个，取的是交集;

减去顶层形状：用底层图形减去顶层图形所得最终图形;

与形状区域相交：得到的形状是两个图形重叠的部分，取的是交集;

排除重叠形状：简单理解就是减去两个图形重叠的部分，与「与形状区域相交」相反;

基本上通过布尔运算，我们能绘制出常见的大部分图标了，但有时我们需要针对某些线条进行单独的调整，又或者我们需要打造一套手绘风的矢量图标，这个时候就需要用到贝塞尔曲线了。

6.1.2 贝塞尔曲线

贝塞尔曲线适用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔(Pierre Bézier)所发表。他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线是绘制矢量图形时的重要工具，使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。

贝塞尔曲线包括：节点、控制点、控制线、曲线这几个基本概念。

矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成，控制点和节点之间的线段称为控制线，控制线就像皮筋一样，调整控制点的位置，可以改变曲线的形状，就像被皮筋(控制线)拉扯一样。

节点包括 4 种基础属性类型，一种是没有控制点和控制线的「直线节点」;另一种是「镜像关联节点」，这种节点控制其中一侧的控制点，另一侧的控制点会发生镜像变化，适合绘制对称结构的曲线;再有一种是「无关联节点」，即节点两侧的控制点可以各自自由控制它们那一侧的曲线而不互相影响;最后一种是「不对称关联节点」，这种类型下，节点两侧的控制点和节点会永远保持在同一条直线上，但是却不会对称控制线的长度。

在 Sketch 中，我们可以在选中节点后通过快捷键 1 / 2 / 3 / 4 来快速切换当前节点的类型，加快绘制效率。

 

6.1.3 钢笔工具

绘制自由贝塞尔曲线常用的工具便是钢笔工具，钢笔工具也是所有矢量软件的核心工具。它的使用对于新手可能稍微薇有点复杂，但是一但上手，会非常方便。The Bézier Game 这个是一个非常不错的练习钢笔工具的网站，以游戏的形式练习钢笔工具，通关的时候你对钢笔工具就已经轻车熟路了。

绘制实战

这里选择了几个比较典型的图标，简单演示下绘制方法和各自的绘制思路：

6.1.4 面性

眼睛：布尔运算相交 / 相减 / 合并形状

绘制一个正圆，然后复制这个正圆形，通过布尔运算「与形状区域相交」得到眼睛外轮廓，再绘制两个圆通过「相减」与合并形状得到眼睛造型。

位置定位：旋转 / 相减

这个图标由两个大小圆形相减，得到环形，再绘制一个和大圆半径相等的正方形，和圆环左、下对齐，最后逆时针旋转45度完成。

WIFI：相加 / 相减 / 旋转

绘制多个圆通过布尔运算的相加减得出三个圆圈嵌套“靶子造型，再绘制一个正三角形，和靶子图形相交得到Wi-Fi图标。

齿轮：旋转 / 相减

通过两个图形的布尔运算得到环形，然后绘制一个梯形，复制一个镜像，将其对齐环形两端，复制梯形编组并旋转复制三次(45度)，最后合并全部形状完成。

铃铛：相加 / 相减

由3个矩形组成铃铛主体，铃铛顶部圆顶结构通过设置全圆角所得，铃铛底部的半圆使用圆形和矩形进行布尔运算，完成。

6.1.5 线性

放大镜：旋转 / 相加

绘制一个正圆和一条线，用对齐工具将其居中对齐，编组后逆时针旋转45度即可。

时钟：钢笔 / 剪刀工具

绘制一个正圆和一个矩形，使圆形的左下角对齐圆形中心，用钢笔工具在矩形左边和下边增加两个锚点，再用剪刀工具减去多余的线条即可。注意指针的长短关系。

雨伞：相减 / 剪刀工具

绘制一个正圆，再绘制一个矩形与其相减得到伞顶，然后绘制一个矩形，通过剪刀工具减去多余部分，得到伞架，完成。

相机：合并

绘制一个矩形和一个梯形，通过合并得到相机主体，再绘制一个正圆完成相机镜头部分，完成。

爱心：相加 / 旋转

绘制两个正圆和一个直径与圆形等宽的正方形，然后逆时针旋转45度所得。

6.2 制定规范

无规矩不成方圆，规矩的出现可以让一切杂乱的东西变得合理，统一起来。在设计上也是如此，规范具有统一输出，指引细节、便于查看的好处，规范就是一组图标中的规矩，所有图标的绘制都按照规矩来，最终的成品就会显得井然有序。

小小的图标是由很多图形元素组成的，在这些图标中，元素的一致性是建立一个共同视觉于洋的关键。熟悉这些元素可以更容易地理解每个图标和他们之间细微的差异，也将帮助我们学会图标设计的底层结构，依次是笔画末端、圆角、留白、笔触、内部角、禁绘区。

在制定规范时，我们通常先绘制出一个符合业务风格的图标，然后根据这一个图标定制后续的图标规范，依次按照上述图标元素进行规范。如果是渐变填充图标还要规定它的渐变角度，光影角度等。在一组中的图标需要在这些图形属性中进行统一，这样的图标虽然形状不一样但是在视觉上看起来是属于同一系列的。

制定规范的三个过程：

拆分细节：将图标中的细节元素(圆角、笔画末端等)进行分解，并在规范中制定细节元素的使用法则。

风格定位：根据产品调性，业务属性在规范中制定相应的色彩、质感风格。

功能划分：不同功能(金刚区和标签栏等)的图标要区分开来，功能相近的包括色彩、质感应该采取相近性。

图标设计规范