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

  之前读过《视觉重量》和《光学矫正》的老朋友们会发现,这篇文章作者一改之前的写作风格,内容以动图为主,文字为辅。

  界面图标通常可能与某个基本的格式近似:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。模糊显示使它们具有相同的视觉重量,因为它们变成了或多或少相同的团块。

  根据图标的形状,将其嵌入到相应的光栅框架中。例如,方形的图标比三角形或细长的图标更紧凑。

  图标越紧凑,所需的空间就越小。图标边缘越锐利或者细节越多,那么所占据的画布空间就会越大。

  设计师不要因为栅格而限制了图标的设计。栅格的存在是为了辅助设计,而不是妨碍设计。如果一个图标添加一些突出的元素会带来更好的视觉效果,那不妨抛开栅格的规则限制,大胆使用这些元素!

  设计师如果要想在非视网膜屏幕上突显图标,则需要使用像素网格,并优先考虑用2像素的线条作为图标边框。

  居中的2像素边框能够使图标具有足够的厚度和清晰的轮廓。如果选择1像素边框设计图标,这样的大小只适用外部边框或者内部边框,而不是居中的边框。否则,图标在100%的比例下显示会变得模糊。

  设计一个图标集最好从最复杂的图标开始,这样做可以帮助定义不同细节的层次,并创建相同视觉重量的图标。

  当图标有不同层次的细节时,细节更详细的图标会引起更多用户的注意,而且在视觉上看起来更重。

  图标中的相邻元素之间的距离不应该太小或不一致,因此设计师要定义图标的最小间距,并保证任意元素之间保持这种大小,以避免图标轮廓重叠。

  对于线条图标,最小的间距等于线的厚度就刚刚好,而线条也应该明显地分开或精确地连接,绝对不要让线条的分开和连接看起来模模糊糊。

  在设计师设计的图标集中,可能存在一些重复的细节。将观看者的注意力转移到不同的地方,这就像数学中的分数化简一样。你看到的图像杂物越少,你的理解也就越清晰。

  如果目标用户已经意识到他或她的正在进行什么操作或工作,就不需要反复提示。如下图所示,避免基于信封的图标让人们认为这是一个电子邮件应用程序。

  这个规则也涉及到各种各样的装饰——框架、背景——围绕着一个图标。如果它们不能帮助用户阅读图标,它们的存在则会阻碍用户阅读图标。

  在同一个图标集内,不要将侧面图标与正面图标混合在一起。风格的一致性有助于用户识别图标并了解它们相同的重要性或状态。

  但是,在某种情况下,界面中有两个不同类型的图标也不错。使用线条图标来表示禁用或正常状态;使用一个填充的图标用于表示单击选中状态。

  众所周知,8像素网格和12列栅格布局被用于许多界面设计,因为它们比基于十进制的分级系统更灵活。12可以被2 ,3 ,4 ,6整除,使用起来更加方便。因此,24或48像素的图标区域已经成为标准。

  完美主义并不是我们追求的目标,没有必要为了追求像素完美的线条而去设计。图标的最终显示更为最重要,一定要确保最基本的形状锚点数量和相邻元素之间没有多余的间隙,保持轮廓的干净整洁。

  在设计中设计师如果遇到“8.999 px”或“100.001 px”这样特殊的数值,你必须将其修改为整数。只有形状锚定位准确,图标边缘看起来才会非常清晰。当你合并形状时,你也不会承担图标锚点过多和间隙过大的风险。

  许多界面编辑器(如Sketch)可能会产生许多不必要的的SVG 垃圾-过多的组,颜色层和剪切遮罩。让我们一起来看看下图的这个例子,在Sketch中,这个图标看起来一切正常。

  在其他编辑器中打开这个SVG(例如,Adobe illustrator), 你会注意到有空图层、不必要的组,有时还会有剪切遮罩。当前端开发人员将图标转换为字体图标或在网页上使用SVG时,所有这些都会引起一些问题。

  如果你有什么建议,欢迎在评论区分享你的建议,让我们让一起让这个图标设计指南更加全面!

您可能还会对下面的文章感兴趣: