扁平与线性iCON绘制指南——ARTUI用户体验设计学院

iCON绘制是UI设计里必不可少的部分，它看似简单，但很多同学还是把握不好细节，本篇文章分享iCON绘制中常见的问题与解决方法。

1.使用栅格

界面上的icon一般都能近似成一个基本形式，比如各个方向的长方形、圆、三角形、正方形。如果你把他们进行模糊化处理，你会发现他们都是差不多大的一小团黑色，也就是说其“视觉重量”是基本一致的。

把icon根据不同的形状放入栅格框架里面。举个例子，方形的icon就比三角和细长icon显得更紧密。

一个icon约紧密，他需要的空间就越少。一个icon的细节越多，我们再栅格框架中就应该给他更多的空间。

注意不要让栅格限制你的创作，如果这个icon超出格子后的效果非常好，那就完全可以突破栅格的限制。

2.注意像素对齐

在非retina屏上，icon的线条一定要紧贴像素网格，不要出现小数点；线型icon建议线宽2px。

如果你使用1px，那线条只能在内部或外部，不能使用中心对齐。

使用居中的1px边框，使得图标会在100%的比例时模糊，不过如果你放大的话，它看起来很清晰。

依照格子来确定斜线的角度。尽量使用45°、30°、60°等常见角度，他们会比13.7°或者81°这样不常见的角度更清晰。

3.把握细节程度

设计一组icon时，先从最复杂的开始做起。这样就可以控制图标的细节程度，保证所有icon的视觉重量相同。

如果icon的细节程度各不相同，那细节更多的icon就会吸引用户的注意力，看起来也更“重”一些。

4.控制最小间隔尺寸

在整套icon中，每个icon内部相邻元素之间的距离不应该太小。最好定义一个最小间隔尺寸，避免icon风格不同意。

对于线型icon来说，一个简单方法就是最小间隔大小与线宽保持一致。同时线条要清楚地分开或者相连，一定不要用那种似连非连的样式。

5.去除重复的部分

在整套icon中，每个icon内部相邻元素之间的距离不应该太小。最好定义一个最小间隔尺寸，避免icon风格不统一。

邮件产品的中回复转发等就不用把邮件图形带入。

6.保持风格的一致与协调

风格的一致会帮助用户理解icon意义、找出重要程度相似的icon。

面性icon同样适合这种规则。

7.使用严格的尺寸系统

8列栅格和12列栅格是目前最灵活的设计尺寸系统。12可以被2、3、4、6整除，所以24*24pix和48*48pix是目前的标准icon尺寸。如果需要更大尺寸的icon可以直接放大使用。

8.保持轮廓的清晰与锐利

8pix栅格和12列栅格是目前最灵活的设计尺寸系统。12可以被2、3、4、6整除，所以24*24pix和48*48pix是目前的标准icon尺寸。如果需要更大尺寸的icon可以直接放大使用。

• 开班时间：2018年7月下旬

• 学习方向：UI设计/交互设计

• 课程时长：3个月

• 上课时间：每周一、三晚19:00~21:30 / 每周六全天9:30 ~ 18:00

（与上班一致的项目方式进行学习，中间时间需完成相应的作业和项目任务）

长按二维码添加【小U】微信咨询&报名

原文始发于微信公众号（ARTUI用户体验设计中心）：扁平与线性iCON绘制指南——ARTUI用户体验设计学院