图标设计五部曲
作者： Luke@优品用户体验设计中心
图标在一个App中有着举足轻重的地位,图标直接决定了这款App的精致程度。经本文作者研究发现，一个精致的图标和一个不够好的图标区别其实非常的小，但这些细微的区别对设计质量的影响却特别大。这篇文章我会从三个属性和五个步骤来给大家分析如何设计一个看上去还不错的优质图标。
三个属性
1.形状
忽略一个图标的细节，它的组成是不是变成了最基础的几何形状。就像我们最开始学素描头像一样，把头想象成一个长方体、眼睛想象成一个球体、鼻子想象成一个圆柱体等。从简至繁会比较容易，先确定大体形状，再添加更多的细节。
这个糖果图标由5个大小不同的圆形组成，清楚它的构造后再添加细节会容易很多。
2.统一
一款App多达几十个图标，让他们细节保持统一非常重要。比如都是方角或者圆角（2px、4px等)、使用线的粗细一致（2px、4px等)、风格（面、线、线面结合等）。
这一组图标使用了统一的颜色、圆角、一样粗细的线以及线性风格。所以我们认为它们是统一的。
3.可识别
可识别可以理解为两层意思：
一是大家对事物的普遍看法。比如首页用一所房子表示、个人中心用一个人表示。
二是这个图标的元素是独特的，大家看到这个图标就知道所处这个App。比如闲鱼的个人中心是用一个笑脸表示的，黑线和黄色的块面大家一看就知道是闲鱼风。
京东的导航栏是很常规的图标，可识别性很高。闲鱼则更多的强调了自己的风格。
分析了优质图标的三个属性。下面分五个步骤让大家快速设计出一个看上去还不错的优质图标。
五个步骤
这里借用了Iconfinder的设计师Scott Lewis设计出来的表格和大家简单说明一下。
1.建立一个网格
我们使用一个32x32px的网格。
这个网格分为28x28px的内容区，用2px的边界留出喘息的空间，绘制图标时尽量避免图标出现在这个区域。
圆形的图标会接触到内容区域的边缘。因为方形的视觉重量比圆形大，如果方形需要和圆形以及三角形图标视觉保持一致时，需要向内容区再缩小2px左右，如图中的橙色区域。
如果是比较长或者是比较宽的图标，如图所示，调整为28x20px的的大小。
网格的作用只是为了保持图标的大小统一，不用严格遵循。练习多了自然会有自己的设计直觉。
2.从简单的形状着手
用简单的几何形状开始图标的设计，比如圆形、方形、三角形。这样图标的边缘更加清晰，而且可以方便快速的对图标进行调整。确保设计的图标遵循了网格和形式的设计。
3.边, 线, 角保持统一
使用严格的数字来设计图标。
- 用45°的角或者它的倍数，会有清晰的边缘线，抗锯齿性很好。看上去比较舒服。
- 使用精确的圆角。无论你规定的圆角2px或者4px，或者是方角。都一定要贯彻整个设计。
- 线的粗细保持统一。最好保持在3种以下，超过三种会让图标失去统一性。
4.使用一致的设计风格
在很多时候，即使一个图标集的风格发生了改变，他们之间统一的元素仍然能够使它们看起来是一个整体。
比如这一组图标，风格是圆润的，颜色是统一的黑色和黄色。即使图标之间的细节差别很大，但他们看上去仍然是统一的。
5.让它有个性
虽然现在很多App风格千篇一律，图标也越来越像。毕竟我们是创意行业的工作者，独特的设计一定会让我们的作品大放异彩。
文章转载自微信公众号优品用户体验设计中心。
推荐阅读
关于图标的可用性测试
聊聊图标设计流程及小技巧
细腻有趣的三色极简图标设计案例
为加快图标识别速度而设计
【视频课】6周锻造1名优秀的产品设计师
写的太浅了