图标 Icon

定义

图标是图形界面的重要组成部分，具有指导和标识性质的图形，它具有高度浓缩并快捷传达、便于记忆的特性。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。

设计目标

在我们的平台应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。
我们对全套的基础系统图标进行了改造，通过对图标尺寸、图标颜色、图标风格的定义来塑造图标。

设计原则

准确： 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
简单： 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
节奏： 挖掘构图中的秩序之美。
愉悦： 赋予适度的情感。

视觉面积

为了保持整体图形占比的和体量感的统一，图形设计时保持整体图形视觉面积基本一致，以128×128/48x48/24x24/16x16为例，相应的图形区域供参考：

设计规格

我们按照10241024的“独立画板”进行绘制图标，
在图标的设计过程中需要预留出血位，可以预防某些造型的图标在具体应用时出现边缘被切掉的风险；同时在设计过程中，也为设计师把握图标间平衡留下了进退的余地。
在10241024的画板中按16栅格进行划分，预留出血位为1024/16=64；多数的图标在设计中我们都不建议超过这个区域。

轮廓线与版型

我们对设计模版进行了优化，根据出血位的尺寸，调整轮廓线的宽高，这些都是图标设计中最常用的基本形式，设计师可以快速的调用并在此基础上做变形。

点、线、角

点：

点是很多图形中都会出现的元素。我们在绘制图标时，对于点的尺寸选择上会保持 16 的倍数这一原则。比如，在绘制中，点的选择会根据所放置图形的容积大小进行调整尺寸，通常推荐四种尺寸：80、96、112、128
通常在复杂构形里面，点作为其中一个元素构建出现时，选择推荐尺寸中最小的80；
如果当前图标构型较为基础简单时，考虑视觉面积的平衡性，需要对应选择较大尺寸的点；如下案例中警示号的点，应用的尺寸为96x96，实际输出后的16px符号就是

线：

线条也是非常通用的元素之一。我们图标在线条之间的关系采用 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56、64、72、80。
如下案例，在较复杂的构型中，同样我们需要选择宽度最小的线条来绘制，以便达到视觉质量的平衡。

圆角：

圆角的规格采取的也是 8 倍数原则，最常用的是 3 种，分别是 8，16、32，它们之间是两倍数的关系。而图标内部空间的圆角则保持直角的处理方式。

要保持整套图标在视觉重量上的平衡，是一件不太容易的事并且是一件需要大量实践的工作。图标的造型、线条摆放的角度甚至是留白空间等，都是会影响视觉平衡的因素，因此需要设计师适时的通过对基本元素规格上的微调来达到图标的平衡感。

绘制方法建议

设计师绘制图标时，可以通过sketch或ai进行绘制，两者都需要在独立画板（1024*1024）中进行绘制，画板中分层为实际绘制区、栅格层、轮廓层、绘制图标层。

输出图标时一定要按照当前画板进行输出，不能选中图标直接输出，否则就会失去出血范围；输出时隐藏除去图标外的所有辅助层，并选择SVG格式进行输出。