系统图标(二) - 图标分解Material规范

版权申明：本文出自"罗耀_UI"原创，感谢"罗耀_UI"的原创文章分享！

前两篇文章讲到了谷歌的Material Design图标规范。谷歌的Material Design图标规范分为：产品图标和系统图标。系统图标比较复杂，分为上下两章来讲，第一章主要讲系统图标的基础认知，第二章讲系统图标的绘制方法与解析。今天讲一下系统图标的图标分解，以及一些绘制细节。

谷歌规范相对过于范式化，他们只告诉大家界面的大体规范，而具体里面的为什么要这么做完全没有讲，思维和思考一点没提。很多细节都是自己根据自身经验去做的补充，很多细节也都有相应的描述，希望能帮助到大家提升些设计认知吧。

目录

1. 系统图标 - 结构

1.1 什么是轮廓

1.2 什么是形状

1.3 外路径

1.4 主路径

1.5 内路径

1.6 笔画

1.7 圆角曲率

1.8 内部区域

1.9 边界区域

2. 系统图标 - 规范

2.1 视觉修正

2.2 曲率的统一性

2.3 去立体化

2.4 避免复杂化

2.5 避免生硬感

3. 绘制系统图标

3.1 确定图标尺寸

3.2 确定轮廓与关键线

3.3 绘制主轮廓 - 粗细

3.4 绘制主轮廓 - 曲率

3.5 绘制主轮廓 - 开口

3.6 绘制内路径 - 箭头

3.7 完成绘制

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

1.系统图标 - 结构

当我们把系统图标的结构分解后，就会发现一个系统图标是由很多个细小构件组成的，这些构件分别有自己的名字和用途，分别是外路径、主路径、内路径、笔画、圆角曲率、内部区域、边界区域，谷歌将它们称为"笔画末端、拐角、内部区域、笔画、内部笔画、边界区域"，这些原始的构件名真的太难理解了，我就根据自身理解重新来进行命名了。另外有一些构件的用途与用法谷歌没有讲，我也是根据自身理解来进行讲解的。每一个图标组成部分都是由其相对应的规范去约束它们，我会试着把它们都讲明白，来方便大家去理解它们。

1. 外路径 - 超出整体形状之外的路径

2. 主路径 - 整体的形状（主要的轮廓）

3. 内路径 - 内部的形状（不包含负形）

1/3. 笔画 - 产生路径基本点的方向、粗细和角度

4. 圆角曲率 - 所有形状的曲率

5. 内部区域 - 图标内部的空白区域

6. 边界区域 - 图标的尺寸形成的边界域

这里大家理解不了构件的概念也没有关系，接下来我会一个点一个点的进行讲解。

1.1 什么是轮廓

轮廓指的是图标周围的外框。图标的轮廓被图标的性质影响并支配着，图标的性质被定义下来，这个图标的轮廓也会随之定义下来。例如"日历图标"在我们的认知中它是与纸张和装订孔联系在一起，纸张是有棱角的、方形的形状，而装订孔是圆润的、圆形的形状，所以日历图标的主轮廓是"方形"的，而不是三角形或是认知外的其他的形状，想表现图标就要还原这个图标的本质，如下图所示。

1.2 什么是形状

形状指的是图标中所有形式的构成，如长方形、三角形、圆形等。一个图标是由很多个形状构成的，例如一个非常简单的"插图图标"，整体是由正方形和圆形构成的，里面的"山"是由三角形和圆角构成的，这些简单的形状整合在一起就会变成形式复杂的图标，并转变为象征性的图形，使整体赋予了新的意义。

插图图标中的"山"也是由形状（三角形和圆角）构成的。正因为图标中的形状可以根据需求进行任意的搭配，才会使图标具有无穷变化的属性。也正因为形状的变化，才能使图标的视觉语言发生不同的变化。

1.3 外路径

超出主要轮廓之外的路径是外路径。我们在设计一个图标时会实现考虑好它的轮廓，再根据它的轮廓绘制大体的形状，而超出大体轮廓之外的部分点组成的路径就是外路径了。因为形状是由路径的基本点构成的，外路径不一定是由正规的形状（方形、圆形、椭圆形等）构成的，也会有几条线段、几个角等不规则形状和路径构成的。