用户界面
为用户界面创建图标。有关光学效果的文章的续篇。这是中文版。
[
](https://shestopalov.medium.com/?source=post_page——-3b4fc87dc6b5————————————————)
界面图标通常可以近似为一种基本格式：横向矩形，纵向矩形，对角线矩形，圆形，三角形，正方形。模糊显示它们具有相似的视觉重量，因为它们变成或多或少相同的斑点。
图标的基本轮廓
根据整体图标的形状，将其铭刻在光栅的相应框架中。例如，方形图标比三角形或细长图标更紧凑。
光学网格上的矩形
光栅上的正方形，圆形和三角形
图标越紧凑，所需的空间就越少。图标具有的锐利边缘或小细节越多，它应该占据的画板空间就越大。
可以刻在不同矩形中的图标示例
可以题为正方形，圆形和三角形的图标示例
当心成为网格的奴隶。这是帮助，而不是限制。如果图标在视觉上更好，但带有一些突出的元素，则让它们突出。
要使图标在非视网膜屏幕上清晰可见，请坚持像素网格并优先使用 2 像素边框作为线形图标。居中的 2 像素边框通常提供足够的厚度和清晰的轮廓。
具有 2 像素线的图标的示例
具有 2 像素线的图标的示例
如果为图标选择 1 像素边框，则边框应位于外部或内部，但不能居中。
具有外部 1 像素线的图标示例
具有外部 1 像素线的图标示例
居中的 1 像素边框使图标以 100％的比例模糊，但如果放大则显得清晰。
具有居中的 1 像素线的图标示例
具有居中的 1 像素线的图标示例
设置像素网格之后对角线的起点和终点。角度为 45°，30° 和 60° 的对角线比不平坦角度为 13.7° 或 81° 的对角线尖锐。如今，有数百万人使用具有低分辨率屏幕的设备，这就是为什么图标清晰度仍然很重要的原因。
矢量与栅格图标示例
最好从最复杂的图标开始设置图标集。它将定义详细程度并帮助制作具有相同视觉重量的图标。
高低细节的示例
当图标的详细程度不同时，更详细的图标会引起更多用户的注意，并且视觉上看起来更重。
详细程度不一致
图标的相邻元素之间的间隔不应太小或在整个集合中前后不一致。定义最小间隙并将其保留在各处，以免轮廓 “卡死”。
线之间的间隙不一致
线之间的间隙固定
对于线条图标，最好使最小间距等于线条粗细。线路应明显分开或准确连接，切勿几乎连接。
线之间的间隙不一致
线之间的间隙固定
在图标集中，您可能有重复的详细信息。摆脱它们，将观众的注意力集中在不同之处上。您看到的视觉噪声越少，您的理解就越清晰。如果用户已经意识到他们的工作方式，则无需再次重复。例如，避免基于信封的图标不会使人们认为这不是电子邮件应用程序。
该规则还涉及图标周围的各种装饰（框架，背景）。如果他们不帮助阅读图标，则会阻碍阅读图标。
不要在一个图标集内将显示的音量与正面的描述混在一起。样式的一致性将帮助用户识别图标并理解它们具有同等的重要性或状态。
统一尺寸示例
尺寸不一致的示例
线图标和填充图标使用相同的原理。如果将它们混合使用，人们可能会认为它们具有不同的重要性或地位。当然，除非您故意要这么做。例如，填充图标用于键盘命令，而行图标用于其他命令。
一组一致的图标的示例
一组不一致的图标的示例
界面中的每个图标都有两个变体是很好的。线路图标—用于禁用或常规状态。填充的图标 - 用于单击状态。
用于不同状态的样式示例
8 像素网格和 12 列布局用于许多接口，与基于十进制的大小确定相比更加灵活。12 可以除以 2、3、4 和 6。因此，24 像素或 48 像素的图标区域已成为标准。如果需要更大的尺寸，可以缩放这些图标。
完美主义不是目标：没有人需要像素完美的线条。但是，这对于最终产品中正确而不失真的图标渲染很重要。请记住，所需的形状锚数量最少，并且相邻元素之间没有间隙。
矢量图标结构：损坏和固定
那么令人讨厌的 “8.999 像素” 或“ 100.001 像素”大小又如何呢？如果形状锚点定位正确，则图标边缘看起来会很锐利。此外，合并形状时，也不会冒过多的锚点和间隙的风险。
矢量图标结构：损坏和固定
许多接口编辑器（例如 Sketch）生成的 SVG 都带有不必要的伪像 - 过多的组，颜色层和剪贴蒙版。让我们来看看。在 Sketch 中，一切看起来都不错。
Sketch 中的图标示例
在其他编辑器（例如 Adobe Illustrator）中打开此 SVG。您会注意到空的图层，不必要的组，有时还会剪切蒙版。当前端开发人员将图标转换为图标字体或在网页上使用 SVG 时，所有这些都可能导致问题。
Adobe Illustrator 中的图标示例
您可以删除此垃圾并保存文件。
Adobe Illustrator 中的整理图标示例
您将看到 Sketch SVG（picture.svg）和已编辑的 Illustrator SVG（picture_new.svg）在文件查看器中具有不同的预览。顺便说一句，有可能在代码编辑器中摆脱垃圾。如果您知道 SVG 代码的样子，请尝试直接删除不必要的数据字符串。
带 SVG 垃圾桶和不带 SVG 垃圾桶的图标示例
当然，所有这些建议并不是牢不可破的法律。如果您知道自己的工作，请随时跳过它们。在我看来，至少有两种情况是严格的几何图标不是最佳选择。
- 非典型的 UI 命令。如果要让人们理解比 “保存”，“发送” 或“存档”更复杂的操作，图标可能不是最佳选择。即使您设法找到一个很好的隐喻，不同的用户也不会以相同的方式解释图像。
- 吉祥物和插图。如果您的界面带有吉祥物或带有插图的车载屏幕，则此类图形应具有情感色彩并传达品牌声音。我不知道设计师如何通过有限的简单形状和粘贴网格来描绘角色。
还有一件事：首先问自己是否真的需要图标总是很高兴。这是解决问题的最佳方法吗？撰写有意义的文字该怎么办？否则，令人难以置信的平衡，可爱，时尚的图标会让人们感到沮丧，而所有的努力都是徒劳的。
https://medium.muz.li/icon-set-3b4fc87dc6b5
若有收获，就点个赞吧
0 人点赞
