1.使用光栅界面图标通常可以近似为基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。模糊显示它们具有相同的视觉重量，因为它们变成或多或少相同的斑点。根据图标形状，将其刻入光栅的相应框架中。例如，方形图标比三角形或细长图标更紧凑。图标越紧凑，所需空间越小。图标具有更锐利的边缘或小细节，它应占据的画板空间越多。小心你成为网格的奴隶。它是帮助，而不是限制。如果一个图标在视觉上更好用一些伸出的元素，让它们伸出来。2.注意像素网格要在非视网膜屏幕上使图标清晰，请坚持使用像素网格，并优先选择2像素边框作为线条图标。中心2像素边框提供足够的厚度和清晰的轮廓。如果为图标选择1像素边框，则它们应该是外部或内部但不是居中。居中的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中，一切看起来都很好。在另一个编辑器（例如，Adobe Illustrator）中打开此SVG。你会注意到空图层，不必要的组，有时还有剪贴蒙版。当前端开发人员将图标转换为iconfont或在网页上使用SVG时，所有这些都可能会导致问题。你可以删除此垃圾并保存。你将看到Sketch SVG（picture.svg）和已编辑的Illustrator SVG（picture_new.svg）在文件查看器中具有不同的预览。分享最新鲜的设计文章！提供最优质的设计服务！设计师：umthink1080