系统图标 - 基础认知 Material 规范

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

上一篇文章讲到了谷歌的Material Design产品图标规范。谷歌的Material Design图标规范分为：产品图标和系统图标。今天来讲一下系统图标，系统图标比较复杂，分为上下两章来讲，第一章主要讲系统图标的基础认知，第二章讲系统图标的绘制方法与解析。最近在积累公众号文章，也是40多天没有更了，就多写一些内容吧。

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

目录

1. 什么是系统图标

1.1 基础图标

1.2 棱角图标

1.3 线性图标

1.4 曲率图标

1.5 深浅图标

1.6 绝对棱角图标

2. 尺寸与网格

2.1 视图放大10倍

2.2 矢量工具绘制

2.3 避免小数位

3.图标区域

3.1 图标尺寸

3.2 尺寸24px

3.3 尺寸20px

4.关键线

4.1 24px关键线

4.2 20px关键线

5.绘制系统图标

1.什么是系统图标

谷歌的Material Design把下图中所示的这些图标习惯称作系统图标，系统图标会根据不同的系统/应用的需求来绘制相应的图标。系统图标中包含基础图标，上箭头、单选图标、复选图标、设置和位置等，都属于基础图标。在谷歌规范中系统图标有5种不同的主题样式，分别是有棱角图标、线性图标、曲率图标、深浅图标和绝对棱角图标。我们来一个一个来解析并理解它们之间的差异。

1.1 基础图标

基础图标属于整个系统图标里的一个小分支，主要由"基础的图标"组成的。如上下左右箭头、时间、位置、搜索、设置等都属于基础图标，基础图标应用最广也最为常用。在建立图标体系时应先考虑建立基础图标，这样利用帕累托定律就能减少80%的研发成本并带来20%的实际价值。

不是所有基础图标都是一种样式，不同的公司和业务对基础图标的定义均不同。

1.2 棱角图标

有棱角的图标并不是所有轮廓和细节全部都是直角的没有曲率的，是大体轮廓是有曲率的，而里面具体的细节是直角的。轮廓指的是图标中最大图形的边角；具体细节指的是图标中的最小单位、端点和末端。棱角图标的特点是外轮廓有曲率，而里面的细节是直角，如下图所示。

棱角图标的视觉表现有轮廓圆润细节棱角，个人感觉有包容性和亲和力的同时又能体现专注和专业性，非常适合中国人的思维表达（外有圆滑内有己见）。这类图标应用较广也最为常用。

1.3 线性图标

线性图标就比较好理解了，即图形不做全部填充的图标。图标不全部填充外轮廓就会形成条线，进而形成线性图标。线性图标也不一定就是完全闭合的，断开部分轮廓线也是可以的。线性图标的特点是视觉表现更轻盈、更精致、更清爽、更有活力等。但它的缺点也很明显，线条过于纤细会给人一种信赖感不强的感觉。 如下图所示，线性图标（左图）与棱角图标（右图）的对比图。

线性图标从细节上应该分为两种，一种是图标中的最小单位、端点和末端有曲率，一种则没有曲率（直角）。细节上的差异会给用户带来视觉感官上的不同，并影响着整个产品的性格与风格。