B端系统 如何从零构建图标组件

编辑导语： 组件库是设计系统里的一个重要分支，一个合适的组件库可以帮助团队更好的高效协作。本篇文章通过自己做的项目“华为xxxx平台”中常用的图标为例，总结了平台中这些图标的差异、组成、流程以及在设计时所要遵循的规范。有不足之处还望指教。

一、在平台设计的背后，进行了大量思考，盘点B端图标设计的几个典型问题。

· 因为B端产品的本质是满足用户的需求。因而要与同类型的图标尽量保持表意一致，在图标表达形式上差距不要 太大，相似性要高。

· 因为B端平台因其覆盖的业务类型多，操作链路长，角色权限复杂等特性，图标种类多、数量大。因而需要去思考每个业务所表达的特殊含义。

· 由于B端产品使用图标场景较少，但在图标的数量上会比C端图标多上好几倍，同时你还需要使用图标去表达不同业务间的关系，因此B端图标更讲究扩展性。

二、居高临下的整体把握

准确： 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。

简单： 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。

节奏： 挖掘构图中的秩序之美。

愉悦： 赋予适度的情感。

三、制图规范

a. 大小尺寸

PC端的图标常用 16 x 16 、24 x 24 、32 x 32 两种尺寸。16 x 16 的图标周围预留1px的出血区。 24 x 24 、32 x 32 的图标周围预留2px的出血区。

b. 轮廓模版

为了使图标保持视觉效果一致，请根据图标的形状在安全区内绘制图标，也可根据实际情况适当变形。

这四个关系的约束，会让图标集里的所有图标大小，看起来是一致的、统一的。横矩形、竖矩形这两个比例，会决定整套图标的饱满程度，横竖比例越一致，图标整体越饱满。

c. 线条粗细、正负形间距

定了比例后，接下里就是对图标的细节刻画。最重要的细节就是线条粗细与正负形之间的间距。(线条的规格采取的也是 8 倍数原则，从小到大以 8 的规律递增。常用的规格也是 4 种，分别为 56、64、72、80。)

所以这些核心元素，在图标的核心线条、核心区域部分，间距样式都应当保持统一。

d. 圆角、角度个性化元素

大比例跟基本元素确定后，也可以制定一些图标的个性化元素规范，比如图标的圆角大小、角度位置，等一些特殊的样式。(圆角的规格采取的也是 8 倍数原则，最常用的是 3 种，分别是 8，16、32，它们之间是两倍数的关系。而图标内部空间的圆角则保持直角的处理方式。)

e. 贴合栅格线

保证图标的节点都贴合在栅格线上。避免出现小数点、奇数等数值。（点的规格采取的是 16 倍数原则，分别为 80、96、112、128。当出现特殊尺寸的需求时，会按照 16 的倍数进行延展。）

f. 视觉对齐

保持视觉对齐

g. 化繁为简

去掉不必要的装饰，保持图标的清晰、整洁。

h. 简化节点

删除多余的节点，保持图形的简洁、易读。

四、图标的设计流程

上面讲了关于图标的分析及规范。为了方便大家掌握，接下来咱们就来讲讲，具体动手做，流程是什么样的。这里我给个我的步骤作为参考：

a. 图标定位

经过一系列的背景调查，精致与商务风格的图标是更适合“华为xxxx平台”。因此在的设计过程中，我们要与产品的设计理念相融合。通过对图标理念的确立，我们也能更好的缩小范围减少设计资源浪费。

ps：当然你应该根据自身产品的视觉表现进行相应优化，拒绝生搬硬套。

b. B端系统功能性图标

做过B端系统设计的同学都知道，B端系统中会有大量的专业功能性图标，作为文字性功能操作的图形化展示。

只需3步，图标设计思路清晰明了

① 拆解归类 、② 元件绘制 、③ 元件重组

c. 风格统一

风格一致性是图标的基础，我们在绘制整套图标时要确保它们的基础属性全部一致，细节统一，图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性，就要从以下七个方向去评判：尺寸大小、图形角度、拐角（曲率）、描边、间距、透视、颜色。

d. 细节调整

因为是多个图标进行重叠形成，所以也会存在许多图标连接间细节毫无规律的情况，因此保留相应的细节，比如图标间的间距、图标未来的扩展性等。

按照以上梳理好的列表整理所有图标。整体输出风格统一，类目清晰。

五、图标库下载

Iconfont上优质的图标资源：上传成功后，直接分享项目链接给相关的开发，开发可在此项目上直接一键下载。

图标格式的最好归属是svg，一方面svg本身就是拥有伸缩的特性，能够满足图标任意放大缩小的功能；另一方面在众多编辑绘图软件中，都支持svg的任意编辑，非常适合设计师再修改。

同时svg可以直接使用，也会避免字体图标那样需要需要通过管理平台进行维护。

六、命名规范

命名没有特别规范，每个团队都有自己的习惯。先问问跟开发小哥沟通好，看他们有什么习惯，跟着做就好。

比较常用的命名格式是：模块_类别_功能_状态.png 名称用英文小写和数字，不要出现汉字和大写英文

举例：登录页的启动图标 login_icon_logo_nor@2x.png