图标设计指南（四）：图标网格与图标绘制

by Jimmy Cheung

本篇文章是《图标设计指南》系列文章的第四篇，在 第一篇文章 里我们讲述了「 定图标的义」 和「 图标的种类」；在 第二篇文章 中，我们讲述了「图标的风格」；在 第三篇文章 中，我们讲述了 「图标的设计原则」和「图标的性格」；本篇内容，我能将一起探讨 「图标的网格」与「图标的绘制」。

图标的网格

网格的定义

图标网格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统。

网格的内容

下图是非常经典的 Google Material Design 图标的辅助网格，我们以此为例进行介绍。

Material Design 官网需要搭梯子才能访问。

图标网格通常包含三部分内容：活动区域，修饰区域，关键线形状。

  1. 活动区域：是指图标主要内容的绘制区域，通常而言图标图形的主要内容都在该区域内。

  2. 修饰区域：是指用于承载部分图标的一些出格图形，某些视觉占比较小的图形可以延伸到修饰区域，但不能超出网格范围。

  3. 关键先形状：关键线形状是网格的基础。使用这些核心形状作为准则，你可以在产品图标的设计中保持一致的视觉比例。

如 Material Deisgn 的图标网格中，活动区域宽度为 20dp，修饰区域宽度为 2dp，4 种关键形状分别对齐于 20pd和 18dp 和 16dp的边缘，对齐于像素。

上图为基于网格和关键线形状绘制图标的示例：如左侧「剪切板」图标，整体核心图形部分以网格中的正方矩形为模板，顶部的挂钩图形视觉面积较小，部分内容伸入修饰区域。右侧「相机」图标以长方矩形为模板。

网格的设计

网格的设计与制定需要确保以下原则：

  1. 关键线形状视觉面积相等。网格设定好之后会影响以此为基准的一系列产品图标，因此要在设定网格之初确保关键线形状的视觉大小尽量相等。由于尺寸越小的图标所能发挥和调整的像素网格越少，如果是基于 24dp 绘制，建议可以采用 Material Design 的网格，这套网格经过时间验证，确实是不错的网格基准。
  2. 基于实际使用尺寸进行制定。比如实际场景中用到的图标大小为 96dp，则不要以 24dp 为基准，因为尺寸越大所能发挥的像素格越多，越能尽量保证视觉大小的一致性；如果实际使用为 24dp，则不要以 96dp 为基准，会导致缩放后使用时线条无法对其像素，导致渲染时以次像素形式呈现，出现边缘模糊的情况。
  3. 适合的宽高比例。还记得之前提到的图标的中宫的概念吗，其实对于图标而言，其中宫即为关键线形状。其中长方矩形的宽高比例更是直接决定了图标的 「字面」 比例，影响着图标的高矮胖瘦与气质。长方矩形的宽高越接近，整套图标会显得越稳重，视觉大小越均匀。

最后我想说，网格是为了让绘制图标更加自由，而非限制自由，在绘制的时候可以针对特殊情况适当调整。如果是针对视网膜屏幕的图标设计，在未对齐像素的情况下不易轻易察觉到边缘模糊，但也请尽量至少对其到半像素，这是我们作为设计师的自我修养。

图标的绘制

这部分内容我们将以 Sketch 为例进行介绍，但不同的工具原理相同，操作也大体一致。

绘制方式

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

布尔运算

不要被这个名字唬到，听起来好像需要复杂的运算逻辑一样，其实在图形工具上操作非常简单，这个名字只是沿用了开发中的概念，即处理两个值之间的关系：或or，非not，与and，异或xor，对应到我们设计软件中，便是：合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。

不了解布尔运算的小伙伴可以结合上图灰色区域来理解，自己在矢量软件中操作一下立马就明白了。

合并形状 就是将两个形状合并为一个形状，取的是全集；

**减去顶层形状 **形状顾名思义，就是用底层图形减去顶层图形，剩下的部分则为最终图形；

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

排除重叠形状 最后得到的图形区域相当于 「合并形状」 减去 「与形状区域相交」 之后剩下的区域。

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

贝塞尔曲线

无论是直线还是曲线，都能在数学上予以描述，从而绘制出矢量图形，我们在设计软件中绘制的各种曲线，其实就是电脑通过数学运算的方式去实时绘制的贝塞尔曲线，也就是说，圆形、方形、矩形、形形色色的矢量形状，都可以被贝塞尔曲线所描述，它是计算机图形学中非常重要的参数曲线，我们在使用矩形工具或者钢笔工具绘制曲线时，其实就是在用鼠标拖拽调整各种参数数据，这些数据可以在被缩放和调整时重新录入和计算，从而实现矢量的特性。

贝塞尔曲线是在1962由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表的，因此以此命名。

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

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

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

基本上在日常绘制图形的过程中，这四种节点类型我们都会用到。

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

钢笔工具：绘制自由贝塞尔曲线常用的工具便是钢笔工具，钢笔工具也是所有矢量软件的核心工具。它的使用对于新手可能稍微薇有点复杂，但是一但上手，将非常方便。钢笔工具单击时会生成「直线节点」，点按后不松手继续拖拽，就能生成「镜像关联节点」，如果绘制的同时按住 ⌘ 或者 ⌥/alt 或者⌃键，就可以改变节点的类型为「无关联节点」，不同的软件按键有所不同，大家自己尝试一下应该会很容易上手。

The Bézier Game 这个是一个非常不错的练习钢笔工具的网站，以游戏的形式练习钢笔工具，通关的时候你对钢笔工具就已经轻车熟路了。

剪刀工具：Sketch 中我们也会通过剪刀工具制造开放路径，比如绘制断点效果的图标，剪刀工具便非常合适。其他软件可能没有这个工具，他们制造开放节点的方式有些不同，有的是先添加节点然后删除，会连同新节点和节点两侧的曲线一起删除，从而制造开放节点；还有的工具可以直接选中节点之间的曲线，然后删除即可。

图标绘制的学习路径

手绘临摹 → 软件临摹 → 软件创作

手绘临摹：用于在大脑中建立语义符号库，学会不同的场景该用哪些约定俗成的符号或类型进行表示；

软件临摹：主要是为了掌握软件的使用技巧，了解一些比较复杂的图形结构该如何运用软件进行勾勒描述；

软件创作：以上熟练之后，就可以软件创作图标了。大家可以借助软件探索更丰富的图标风格和表现方式，放飞自己的想象力，还记得前面讲的图标的表现手法吗？

绘制原则：

  1. 先画草图：可以在纸上快速尝试，找到最佳语义符号和图形结构，然后再用软件精确绘制，这样可以大大提升创作效率。
  2. 布尔为主，贝塞尔为辅：布尔运算是基于圆形和矩形进行组合操作，所以得到的图形也更加圆润规则，而纯手绘的贝塞尔曲线相对来说会不规则一些，通常我们都是用布尔运算完成之后转曲为贝塞尔曲线，然后再二次使用节点工具调整曲线来达到理想的效果。
  3. 参考成品：通常成品图标已经被用户广泛熟知和接受，成为了某个事物的特征符号，比如使用「山」和「太阳」的组合代表「图片」。我们可以参考这个符号的内容，从表达手法和线条形式上出发，进而二次创新。熟练之后，我们再辩证参考，进而打破常规。
  4. 选用适合的绘制方式：比如通过「圆形路径描边」的方式或者「两个圆形布尔运算」的方式都能得到一个圆圈，但在不同的场景下适合不同的方式，大家在绘制的时候选用适合自己的去完成设计。比如贝塞尔曲线图标适合描边，有的时候适合用内描边，有的时候适合居中描边...大家在绘制时需要多总结。

绘制实战

这里选择了几个比较典型的图标，原本是应该实战演示绘制方法的，但篇幅和文字表达的方式受限就不一一详细演示了（主要是懒），我大概介绍一下各自的绘制思路：

  1. 月亮：布尔运算相减 / 描边 / 轮廓化 / 增加节点 / 转角度参数

    这个案例的难点在于，月亮的两个小尖角具有轻微的弧度，不是锐利的尖角。如果尖角弧度稍微大一些，我们可以直接采用居中描边的方式获得，但这里不行。这里我们通过得到描边的月牙之后，进行轮廓化操作，然后手动添加节点在尖角附近，然后将尖角转为「直线节点」，然后再添加圆角度。

    之所以添加节点操作， 是因为 sketch 只能给无控制点的角，也就是 「直线节点」 增加圆角度，我们添加了节点之后，就可以在将两个顶点的节点转为 「直线节点」 而不影响月牙的整体弧度。

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

  3. 坐标：贝塞尔曲线调整 / 相减

    这个就是典型的先用矩形圆形工具，再调整节点的贝塞尔曲线的方式设计的图标。这里我们可以看到坐标底部的顶点和上半部分圆弧的连接部分的曲线是有弧度的，而非直线，所以不能用圆形和正方形结合的方式获取。我们需要手动调整圆形底部的节点，转为 「无关联节点」，然后手动控制节点调整到合适的位置。

  4. 齿轮：旋转 / 相减

  5. 刷新：合并 / 相减 / 相交 / 旋转

    这个图标主要是用圆形和三角形结合出来的，三角形和圆形的断开区域，可以用三角形先描边，然后轮廓化描边，然后再在圆上减去轮廓化后的一边即可。

  6. 头像：贝塞尔曲线 / 描边。

    这个图标也是先用圆形和矩形打底，然后再转曲后手动添加节点和调整节点控制点的方式来绘制，最后描边即可。

OK，到这里，我们的《图标设计指南》系列文章的第四篇就讲完了~

下一篇 文章章是本系列的最后一篇文章，我们简单讲几个绘制小细节以及那些年我我踩过的坑。