ICON规范总结

1、ICON

图标是具有指代意义的图形，也是一种标识。通过使用图标表达一种图形化概念，强调状态，表示产品、功能或类别。 它区分了与其他图形不同的含义，美丽令人难忘的图标能瞬间抓住用户的注意力，在场景中脱颖而出，便于用户快速与之产生对话（交互）。

图标已经在人生生活中发挥至关重要的作用，平常到你可能都觉察不到，你每天打开的手机，里面排满了启动图标，每一个启动图标下页面里的icon，你乘坐的地铁，商场里的指引，电梯里的按钮，各种智能设备上的按键，图标让人们快速的理解了场景中的含义。然而在一套产品体系内，具有美观、清晰、一致的icon需要设计师在方寸之间更多努力、关注细节。

2、设计规范

统一的设计规范可以保持不同项目成员在设计时的一致性，以及建立公司统一共用的图标库。基础Icon统一在AI中绘制，可复制到ps、skech中使用。

主要参照： 

Google的material design https://wiki.jikexueyuan.com/project/material-design/style/icons.html

蚂蚁金服的Ant design http://design.alipay.com/design/web/icon

方寸之间，皆有讲究 http://www.zcool.com.cn/article/ZNDY2MTQ4.html

3、尺寸

关键轮廓线，视觉比例栅格，常用24px/32px。建议画32px，2px描边，2px边距，居中描边，然后扩展形状到其他场景中使用，尽量整数倍放大缩小去使用。

AI中绘制技巧：

创建px、rgb模式文档

先设置网格4x4(打开首选项，参考线与网格，网格线间隔4px，次分隔线4）

绘制32px方形，填充#000 10%作为bg，绘制辅助参考线用最细的描边,将参考线打成组，接下来就可以制作icon了，保证图层的清晰，可以如下图。

附下图按规范整理图标：

注：也可以用ios图标规范画法，1024px画布，注意留白，64px线条

4、细节

简约可识别。

笔画一致，对齐像素，单数像素不要用居中对齐，用内对齐

圆角大小统一，图形简单，去透视，去断线等风格

（简单的图形语言以及高辨识度，保持图标之间一致的风格和表现方式）

绘制参照，然后上传http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.14&helptype=draw

可以方便前端、销售、方案或其他部门同事使用

5、Icon命名规范

主要是切图命名规范，统一英文小写命名， 用在什么页面可命名为：login_button_pressed

用在功能模块处可名为：nav_menu

常规命名：icon_xx，img_xx

应尽量保证命名精简易理解。

6、切图规范

图标统一切图尺寸，留有边界

7、业务图标

原则上一致，需要更多细节，可根据具体情况调整

8、Icon的演化

先做到产品体系内的规范统一，方便后续扩展演化

方向1：1px细线条 → 粗线条 → 透明度 → 多彩 →组合

方向2：加装饰

方向3：改面状 → 改渐变 → 改多彩

方向4：改线面 → MBE → 插画风

方向5：改高光阴影 → 实体

附由标准icon可以去演化的方向，下图icon来源于网络仅表示icon的种类，。

THANKS