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

2018-05-24 2,656 阅读5分钟

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

1、使用网格

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

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

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

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

2、注意像素网格

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

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

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

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

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

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

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

4、控制最小间隙的大小

一个图标中，邻近元素的距离不能太小；在一套图标中，确定一个最小的距离并应用于图标，这样可以避免图标给人黏在一起的感觉。

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

5、删掉重复的部分

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

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

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

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

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

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

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

7、用2的倍数为尺寸

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

8、保持轮廓干净和准确

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

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

9、清理源文件

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

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

当然，这些多余的东西都是可以删除的。

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

能够看到这里的，都是希望能够通过一些技巧和经验能够做出更好的设计，如果你想更深入的了解设计，推荐你阅读下面的文章：Why UX, CX, UI, IA, IxD, and Other Sorts of Design Are Dumb