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

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 制定规范

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

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

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

制定规范的三个过程：

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

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

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

图标设计规范

6.3 图标管理和交付

完成图标后需要进行视觉检视，避免任何多余的线条或形状，保证尽可能整洁。检查所有线条是否都在标准框架内，让其他人帮忙来检查你的图标是否整洁是非常有必要的。对图标精心设计评审，合格后再加入资源库，这样避免多人同时修改而造成混乱。

文件格式是导出图标的关键。不同的人需要的文件格式也不同，如果你为外部合伙人提供图标，那么可能会提供1x、2x和3x.的png文件，以适应多种设备。而对于开发和其他设计人员，则通常需要导出.svg文件，这些文件可以在设计程序中编辑，并且可以通过代码在应用程序或浏览器中绘制。当导出SVG时，代码应该尽可能简洁。选择Figma的另一个重要原因是它有超小的SVG导出，并且还能自动优化。

图标资源管理工具：Nucleo

或许你能做出完美无瑕的图标，但如果不能让它们产品中发挥作用的话，那将毫无意义。所以在你开始设计之前，可以和开发人员谈谈，他们能告诉你图标交付的要求，这将改变你的一些选择，比如图标的粗细或大小。问问其他设计师过去做过什么，以确保你们没有重复工作。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多向别人寻求反馈、建议和帮助。他们会激励你发现更好的想法，并让你了解自己应该做什么。一套完整的图标设计规范是有必要的。

6.4 线性or面性

设计中，我们应该是用「线性图标」还是「面性图标」呢?

其实二者没有太明显的选择优劣，很多场景下已经越来越模糊，但总的来说，还是有一些法则可以作为参考：

常用的手法：在App的底部导航栏，选中状态使用面型图标，而非选中状态使用线性图标;

16px左右的小图标慎用线性图标，线性图标在16px下，可排布像素的区域较小，这个时候线性图标不容易设计;

面型图标比起线性图标，除装饰性外具备更强的视觉信息层次感，更具引导性，比如金刚区功能图标、IOS设置界面，使用面型图标;

车载等系统界面，更适合用面型图标，面型图标的视觉面积较大，短时间内更加容易识别;

线性图标看起来通常会更加细腻精致，适合比较精致简洁的设计或者女性化产品设计;