1.利用网格
一个界面图标常日可以视作为一种根本形状:矩形、纵向矩形、对角线矩形、圆形、三角形、正方形。
模糊显示它们后,创造它们具有相同的视觉权重,或多或少的变成相同的斑点。
根据图标的形状,把它变成一个相应的网格框架。例如,方形比三角或长方形更紧凑。
图标越紧凑,所需的空间就越小。边缘更锋利、细节更多的图标,则须要占用更多的画板空间。
不要过于依赖网格。网格起到的浸染是帮助我们制作图标,而不是限定。如果一个图标与一些突出元素拥有更好的视觉表现,那么就让它们突出。
2.把稳像素网格
在非视网膜屏上想要使图标清晰,就要利用像素网格,并优先选择2像素的描边作为线条图标。
2像素居中描边,能够供应足够的厚度和清晰的轮廓。如果你选择1像素的描边,该当利用外部或内部描边,而不是居中描边。否则,图标将100%模糊。
根据像素网格设置对角线的起始点和结束点。45°、30°和60°的对角线,比像13.7°或81°这种参差不齐的对角线看起来更清晰。
3.保持一定程度的细节
最好从最繁芜的图标开始绘制,它将定义细节的层次,并帮助绘制具有相同视觉权重的图标。
当图标有不同层次的细节时,更风雅的图标会吸引更多用户的把稳,而且视觉上看起来更重。
4.掌握最小间隙大小
图标的相邻元素之间的空间不应该太小或不一致。定义最小的间隙,并担保它在任何地方,都以避免轮廓“卡住”。
对付线条图标,最好是最小的空间即是线的宽度。线条该当清晰地分开或精确地连接,而不是看起来是险些连在一起的样子。
5.删除重复的部分
在一组图标中,可能有重复的细节。把它们的把稳力转移到不同的地方。这就像数学中的分数简化一样。你看到的图像噪音越少,你的理解就越清晰。
如果目标用户已经实现了他的任务,就不须要反复地重复。例如,避免绘制基于信封元素的图标,这并不会让人们以为这不是一个电子邮件运用程序。
这个规则也涉及到各种环绕图标的装饰——如框架、背景。如果这些装饰不能帮助用户理解图标,那么它们反而会阻碍图标的理解。
6.选择一种风格并延续它
在一组图标内,不要将侧视视角与正视视角图标混在一起显示。风格的同等性将帮助用户识别图标并理解它们具有同等的主要性或状态。
不要将线性图标和面型图标混在一起。
但是,在界面中有两个不同的图标是精确的。
线性图标-为禁用或正常状态。面型图标-点击状态。
7.基于利用2的分级系统
8像素网格和12列栅格被用于许多界面设计当中,相较于十进制更灵巧。12可以除以2、3、4、6。因此,24-48像素大小的图标已经成为标准。如果须要更大的尺寸,这些图标可以缩放。
8.保持轮廓整洁和准确
完美主义不是目标。没有人为了完美的像素线条,而须要完美像素线条。但对付终极产品,精确的、不失落真的图标渲染非常主要。记住最基本的形状锚点数量和相邻元素之间的间隙。
同样还有恼人的“8.999 px”或“100.001 px”大小。如果形状的锚点定位准确,图标边缘看起来锐利。当你合并形状时,你不会冒着得到过多的锚点和间隙的风险。
9.净化SVG中的\"大众垃圾\"大众
sketch制作SVG格式图标时,带有许多不必要元素(既:我们所指的\"大众垃圾\公众),比如:过多的分组、颜色图层和剪切蒙版。它们在sketch中看起来统统都很好。
在不同的软件(如Ai)中打开SVG文件。你会看到空的图层,不必要的分组,有时还会有剪切蒙版。当前端开拓职员将图标转换为iconfont或在网页上利用SVGs时,所有这些\"大众垃圾\公众都会引起问题。
你可以在Ai中删除这些\公众垃圾\"大众,并保存。
在文件查看器中预览,你将看到用sketch导出的SVG(picture.svg)和用Ai导出的SVG (picture_new.svg)有不同的效果。