图标设计流程及规范

今天来梳理下的图标设计流程及规范～图标是基本功，是个注重细节的东西，对设计有很大帮助，不要忽视哦

整个设计流程分为以下步骤：

    1.总结项目和业务的特点

    2.根据项目制作图标绘制规则

    3.平台图标汇总优化

    4.明确图标规范后后期维护更新流程

1.总结项目和业务的特点

    如：

        1.识别性：造型不要繁琐、不要过多装饰；需要有较高的易读性和辨识度；

        2.品牌感：融入项目品牌和业务元素，提升用户对品牌的好感；

        3.一致性：图标的风格，如圆角、线条都需要保持一致，造型尽量保证偶数原则，去小数点。

2.图标绘制规则

2.1 icon命名规则

科学和高效的命名规则能够帮助我们快速定位到自己制作的图标，加强团队效率。

可将图标分类，命名规范如以下规则： 「默认状态」：类别/图标名     「状态」：类别/图标名/状态

2.2 线性、面性使用建议和规则

根据平台应用场景，icon绘制分为【线条 & 填充】两种形式，选中/强调状态下使用实心样式icon，使信息展示更明确。

• 线性图标是通过线条来表现物体的轮廓。

• 优点：具有辨识度高，清晰，简约易识别等有点，可以减少视觉干扰，让用户集中在产品核心功能上。不同线条粗细图标带来的视觉感受也不同，细线显得精致，粗线显得饱满。

• 缺点：线性图标的创作空间较少，太复杂的线性图标对识别性产生较大的困扰。

• 面形图标是以面为主要表现形式的图标，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。

• 优点：具有表意能力强，视觉突出，情绪感强，创作空间大等优点。面型图标的视觉面积较大，具有强烈的视觉表现力，短时间内更加容易识别；

• 缺点：面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。

  
  

2.3 设计要点

1.优化基础网格：优化图标输出的尺寸和视觉基准区域；

2.优化icon细节规范：绘制一个符合业务风格的图标，将图标中的细节元素（圆角、笔画末端等）进行分解，并在规范中制定细节元素的使用法则；如下：

3.平台图标汇总优化

3.1 功能划分

汇总项目图标，考虑图标的使用场景，将其分类；

3.2 图标细节调整

1. 干掉多余的节点，保持图形的整洁；

2. 对小数点以及奇数进行最后一遍的走查与修正；

3. 合并图形，便于输出；

4. 整洁的图层管理。

4.明确图标后期维护更新流程

4.1 icon导出 

图标绘制完成后导出svg格式，上传至iconfont指定项目组进行统一管理，便于后期项目迭代。

4.2 icon管理和交付

完成图标后需要进行视觉检查，避免多余的线条或形状，尽可能保持整洁。检查所有线条是否都在标准框架内，对图标精心设计评审，合格后再加入资源库，这样避免多人同时修改而造成混乱，同时提升团队协作效率。