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

Posted by Yice on May 24, 2018

本文翻译自设计师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