移动端基础组件｜图标 icon

🌟🌟什么是icon
icon翻译为图标，是信息的图像表达方式。
在设计页面的时候使用icon有很多优点，icon可以将某个功能进行直观的视觉表达，减少用户的认知成本。在早期的实验中，人们发现大脑处理图片的速度比处理文字的快60000倍。早期的icon都是拟物风格，用户很容易将这些图标和生活用品一一对应，具有强识别性。

🌟🌟icon的应用场景
在app上图标的应用无处不在，常见的应用场景有三大类，分别是：应用图标 、 功能性图标、装饰性图标。

🌟🌟icon的设计风格
扁平风格（面性、线性、渐变风格）、2.5D风格、3D风格、拟物、轻拟物。

🌟🌟如何搭建icon的设计规范
当一个项目中有很多地方都需要用到图标时，就需要制定一个图标的设计规范。
图标规范要包含几点：
1.视觉统一性，即端点一致、角度一致、描边一致（描边不要使用居中描边）
2.对齐像素点，尽量避免小数点
3.能准确传达信息
4.与品牌的基调一致

🌟🌟icon栅格如何绘制
在网上重新看了一遍关于iOS栅格绘制的方法，发现根号2、三分法和黄金分割的计算还是没有看明白，还是用一些技巧，使用以前网易设计师推荐的栅格画法。假设现在要画一个30pt的图标，那么30pt是这个图标的点击范围，在中间画一个24pt的矩形作为这个图标的视觉范围。那么，如果提取一个缩进值，缩进值=icon视觉区域*10%。
⚠️注意：所禁止取整数、偶数，举例如果是4.4就取4，取最近的一个值
正方形：视觉区域减去缩进值就得到了正方形icon的尺寸
横向长方形：宽度为视觉区域的最大值，高度=视觉区域-2*缩进值
纵向长方形：高度为视觉区域最大值，宽度=视觉区域-2倍缩进值
圆形：视觉区域就是圆形尺寸
哪怕依旧做好了栅格规范，在绘制图标的时候也要适当关掉栅格，用肉眼对比一下图标整体的大小，尤其在在绘制异形图标的时候，物体对齐并不意味着是视觉对齐，这时就需要根据实际的情况进行调整。

🌟🌟-如何交付？
可以通过图片格式或svg格式交付，如果是svg格式交付需要注意的是：
1.svg不支持颜色填充
2.保留点击区域的位置，点击区域为一个透明矩形
3.svg格式要将描边转化为闭合图像，在Ai中这一步叫做转曲


分享结束，希望以后能在项目中有意义地使用icon～👋