扁平化图标的终极设计指南

本文翻译自设计师Slava Shestopalov的文章 原文连接

---

一、使用网格

一个图标一般是由矩形、圆形、三角形等基本元素演变而成，将图标模糊后再去观察它们的光斑，会发现它们基本有相同的视觉重量。

根据图标的形状将它们放在对应的网格中，就会发现，正方形图标会比三角形或者长方形的图标更加紧凑。

图标越紧凑，占用的空间就越少。图标的边缘越锋利或者细节越少，占用的空间就越大。

可是也不要被网格所控制，网格是用来帮助你而不是限制你的。若是一个图标加上某些突出的元素会更好看，那就加上吧！

---

二、注意像素网格

和网格对齐，并给线形图标2个像素的线宽度，可让图标在非retina屏幕上也很清楚。2像素中心对齐的边框能够保证足够的厚度和清晰的轮廓。

若是你选择使用线宽为1像素的图标，则应该使用内部对齐或外部对齐，而不是中心对齐。

1像素中心对齐的边框会使图标放大时变得模糊。

根据像素网格设置对角线的起始点。45°、30°和60°的对角线比不均匀的对角线看起来更加清楚，好比13.7°或81°。

---

三、使图标的细节保持一致

最好从最复杂的图标开始整套图标的创做，它将决定细节的多少，并让其它图标保持一样的细节程度。

当一套图标中每一个图标的细节程度不一样时，细节越多的那个将越容易吸引用户的注意力。

---

四、控制最小间隙的大小

一个图标中，邻近元素的距离不能过小；在一套图标中，肯定一个最小的距离并应用于图标，这样能够避免图标给人黏在一块儿的感受。

作线性图标时，让最小距离和线宽相同是一个很好的方法。线应该明确的分开或者链接，不要让用户产生困惑。

---

五、删掉重复的部分

在一套图标中可能会有重复的细节，删掉这些重复的部分，让用户的注意力集中在不一样的元素上。就像数学里面的分数简化，用户看到的干扰信息越少，就越容易理解图标。

若是目标用户已经意识到了他使用的是什么，就没有必要一次又一次地重复这些元素了。举个例子，不使用带邮件的图标并不会让用户以为他不是在使用邮件App。

这个准则一样适用于各类边框装饰、icon的背景等。若是它们不能帮助用户理解icon，就会反过来干扰用户。

---

六、选择一种特定的风格并遵循它

不要在一套图标中混合使用侧视图和前视图，让icon保持一致的风格能够帮助用户辨别icon，并暗示用户它们有相同的重要性或者状态。

这个准则一样适用于线性图标和填充图标。若是将这两种风格的图标混合在一块儿，用户便会认为它们可能有不一样的重要性或者状态。例如：填充图标会跳转到关键页面，而线性图标会跳转到其它页面。

在一套图标中有两种变体是很好的，例如用线性图标表明常态或者未激活状态；而用填充图标表明选中状态。

---

七、用2的倍数为尺寸

8像素网格和12分栏的布局被用于许多app界面，由于相比于十进制的尺寸，它们更加灵活易调节。12能够被二、三、4和6整除，所以24和48像素的图标区域已经成为标准区域，它们能够在须要时随时缩放。

---

八、保持轮廓干净和准确

咱们的目标不是作到完美，也不须要为了画完美的线条而画出一条完美的线条。但这对于最终产品中正确的，而不是扭曲的图标渲染是很重要的。永远记得尽可能使用最少的形状锚点绘制图标，并保证相邻元素间没有空隙。

这和恼人的“8.999 px”和“100.001px”同样。若是形状的锚点放在合适的位置，icon的边缘看起来就会很清晰，而且但你合并形状的时候，不会多出锚点或者空隙。

---

九、清理源文件

在用Sketch等设计工具产生SVG图时，会产生不少多余的“副产品“，例如多余的group、图层，还有裁剪的模板。虽然在Sketch中，全部事情看起来都很美好，没有多余的东西。

但当咱们用其余的编辑器例如（AI）打开此SVG文件时，你会发现空的图层，以及一些无用的蒙版，当开发者将SVG转化为图标时，或者直接在网页上使用这些SVG时，均可能会产生问题。

固然，这些多余的东西都是能够删除的。

通过删除编辑后的SVG的文件，会与原来的预览图有些不一样。

---

可以看到这里的，都是但愿可以经过一些技巧和经验可以作出更好的设计，若是你想更深刻的了解设计，推荐你阅读下面的文章：Why UX, CX, UI, IA, IxD, and Other Sorts of Design Are Dumb