用户界面图标设计进行中（翻译）
你是否曾经盯着键盘，想知道你的大脑如何识别各种符号并将其与操作相关联？或者，即使 Apple 产品上的所有图标代表相同的事物，
你是否曾经盯着键盘，想知道你的大脑如何识别各种符号并将其与操作相关联？或者，即使 Apple 产品上的所有图标代表相同的事物，它们看上去与 Google 产品上的图标又有何不同？你是一位刚为现有图标系列创建新图标而又不知道从何开始的设计师吗？那么，你很幸运。我们这里将涵盖所有这些内容以及更多内容！
在本文中，我们将进行剖析：
图标如何工作
为什么要创建图标？它们在用户界面设计中如何起作用？
有关图标和可用性的一些迷思
如何有效地创建和验证图标设计
图标是如何工作的
用户界面（UI）图标是用于表达想法、物体或操作的视觉符号。他们一目了然地交流消息，提供交互性，并让你去关注重要的信息。
闹钟图标和真实闹钟
UI图标采用视觉隐喻，通过转移我们已经了解的属性来加快理解速度。UI图标通常在正方形（1：1）画布上创建，并遵循一组严格的规则以确保一致性。另一方面，插画也使用视觉隐喻来实现类似的目标。但是，它们在视觉表现形式上往往倾向于自由形式，并不总是遵循图标所遵循的严格规则。
在某些情况下，隐喻是字面意思的。例如，由 IBM 创建的 Carbon Design System 中的闹钟图标代表带有铃铛的经典机械闹钟，保留了我们期望的功能——响铃会及时唤醒我们。
保存图标和软盘
有时候，这个隐喻有点过时了，但是通过反复使用可以理解。在个人计算机的早期，我们使用软盘保存和备份文件。尽管我们不再使用该技术，但许多应用程序仍使用软盘图标表示保存操作。
随机播放图标和撤消图标
其他时候，这个隐喻有点抽象。随机图标和撤消图标通过箭头的隐含移动传达其含义。
在用户界面中使用图标
以下是一些图标如何增强用户成功完成任务的能力的示例：
图标可以：
创建一种通用的视觉语言，可以有效地弥合语言差距。
用于提高设计的视觉趣味并吸引用户的注意。
提供功能和反馈。 想象一下，视频播放器中的播放和暂停的图标如果是使用文字来表达。
使我们能够快速传达想法。
通过提供另一种表达品牌身份的媒介来支持产品系列的概念。
用户体验的迷思：图标可以增强可用性
根据尼尔森·诺曼集团的说法，
“用户对图标的理解是基于以前的经验。由于大多数图标缺乏标准用法，因此文本标签对于传达含义和减少歧义是必不可少的。”
研究表明，图标很难记住，而且效率通常很低。在大多数项目中，图标难以正确执行并且需要大量测试。在表示复杂或抽象概念时，图标很少能很好地工作。
UX Myths 是一个博客，收集了最常见的用户体验误解，并解释了为什么它们不成立，他精心策划了一系列有关上述迷思的研究和文章，即“图标可以增强可用性”。以下是重点内容：
UIE 进行了两个实验，以测试用户如何使用图标。他们首先在工具栏中更改了图标的图片，但将它们保留在相同的位置。用户迅速适应了这一变化。之后，他们保留了图像，但改变了它们在工具栏中的位置。此更改使用户感到困惑，并且使他们放慢了速度，并且在某些情况下，他们无法完成常见任务。
Michael Zuschlag 说：“与直觉相反，图标不一定比单独的文本标签（Text label）更好地帮助用户找到菜单项。这不值得。” 他还讨论了他对 UX Exchange 的看法。
Microsoft Outlook 中以前的仅图标工具栏具有较差的可用性，并且更改图标或其位置并没有太大帮助。图标旁边的文本标签的引入立即解决了可用性问题，用户开始使用工具栏。另一项测试表明，人们记住按钮的位置，而不是功能的图形解释。— The Importance Of Labels
用户对图标的理解基于先前的经验。由于大多数图标缺乏标准用法，因此文本标签对于传达含义和减少歧义是必不可少的。— Icon Usability
在图标和标签之间的清晰度争夺战中，标签总是赢家。— Labels always win
“如有疑问，请始终记住这一点：最好的图标是文本标签。”
唐·诺曼（Don Norman）表示：“尽管研究界长期以来一直证明，人们记住的图标数量很少，但令人费解的图标却散布在苹果设备的面孔。图标加标签优于单独的图标或单独的标签。谁能记住每个图标的含义？反正我不能。”
在另一项研究中，UIE 的团队观察到，人们记住按钮的位置，而不是功能的图形解释。
他们的发现中还有其他一些关于 UX 迷思的内容，但它们重复了与上面列出的相同的观点。如果愿意，你可以在此处阅读整个列表。
尽管图标的使用不太可能对产品的可用性产生实质性影响，但它可以帮助提供更好的用户体验。
图标网格（Icon Grids）
始终存在明确的既定规则，以在图标系列中始终一致但灵活地定位图形元素。这些规则通常采用图标网格的形式。它们描绘了图标的尺寸，基础像素网格以及要遵循的关键网格线（或关键线）。
图标网格结构：网格、关键形状/线条、正交线、蒙版和安全/修剪区域。
图标网格由5个元素组成：
像素网格
关键线/形状
正交线
蒙版
安全/修剪区域
像素网格（Pixel Grid）
如果使用网格来实现像素捕捉（Pixel-snapping），像素网格可帮助你以特定的增量单位绘制。1像素的增量已经成为数字标准了一段时间。然而，由于屏幕分辨率，子像素提示和抗锯齿的改进，近来越来越多采用半像素增量。
1像素网格上的回形针图标
像素捕捉有助于在较低分辨率的屏幕上使图标清晰显示，但随着硬件渲染的改进，重要性已降低。
关键线和关键形状（Keylines and Keyshapes）
关键线用于在图标网格中垂直或水平对齐线和形状。沿着图标网格的关键线进行绘制有助于确保图标集的视觉一致性。
图标网格的关键形状、横向矩形、圆形、纵向矩形和正方形。
关键形状提供了模板形状的起点。四个基本标准是：横向矩形，圆形，纵向矩形和正方形。
具有网格-关键形状的 IBM 图标：电子邮件，下一个，沙漏和日历图标。
在他们的 Carbon Design System 中，IBM 使用这四个关键形状为电子邮件，下一步，沙漏和日历绘制图标。
你可以将关键形状视为入门工具包，提供足够的设置标准，同时留出灵活性和创造力。并不是要让每个图标都完美地映射到基本形状，而是要建立一个起点并促进一致性。
正交线（Orthogonal）
正交是从数学派生的术语，意思是“成直角”。它与正交投影有关，后者是绘制三维对象的另一种方法。在图标网格的上下文中，“正交”是指与图标的中心点以及其他的顶点相交的关键线。这些线通常将画布以90°和45°进行切割。当需要不同的角度时，通常下一步是增加15°和5°。
具有正交线的 API 图标。
蒙版（Mask）
蒙版可通过默认的方形画布自定义图标的容器。蒙版可以嵌入到资产本身中，也可以在以后使用 CSS 样式应用。在这里，你可以看到 Apple 的 App Store 如何在其所有图标（Spotify 的应用程序图标）上使用圆角矩形蒙版。
带 Apple’s App Store 蒙版的 Spotify 图标
安全/修剪区域（Safe/Trim Area）
安全区域（或活动区域）显示图标的重要内容应活动的区域，而它的对立面——修剪区域——显示的则是要避免的区域。在某些情况下，建议使用安全区域，但是裁剪内容时，安全区域是必须恪守的。
带有安全区域叠加层的 Google 应用程序图标。
视觉（Optics）大于网格
与任何网格一样，对图标网格的快速建议是用作指导，而非硬性规定。当它们行不通的时候，那就放下它们。始终检查视觉平衡（optical balance）。下面的示例显示了 forward-5 图标的曲线并没有匹配圆形关键形状。
Forward-5 icon with circle keyshape. 带圆形关键形状的 Forward-5 图标。
通常有必要偏离网格以获得视觉平衡。遵循看起来正确的内容，而不是严格的指标值。
有关视觉效果的更多信息，Slava Shestopalov撰写的这篇文章： Optical Effects in User Interfaces: An Illustrated Guide 是对该主题的出色介绍。
图标在用户界面中的实操
当涉及到图标设计时，上下文就是一切。从用户开始，用户将在哪里遇到图标。参考用户人物角色、人口统计信息等，作为你的上下文起点。他们说什么语言？他们来自哪个国家？涉及哪些可访问性注意事项？他们会在手机或高速公路标志上看到该图标吗？
像大多数与用户体验设计相关的任务一样，创建高质量的图标需要考虑周全的方法、训练有素的眼睛、一些迭代和大量实践。
设计图标的一个好过程始于快速缩略图。 在短时间内生成尽可能多的内容至关重要。 对这些事情进行时间排序很有帮助，因此，开始尝试尝试生成20个缩略图，并且在每个缩略图上花费不超过一分钟。
然后，选择三个草图中最能传达创意和产品品牌的草图。接下来，尝试对所选的每个缩略图提示绘制至少五种改编，在每个素描上花费不超过5分钟。
在这15个左右的草图中筛选，或者征求另一个设计师的意见作为参考，挑出3个最好的。然后在图标网格中重新绘制它们。在此阶段，利用关键线和关键形状有助于确保草图在图标组中的直观体现。
品牌定位
最后，如果图标可以很好地融入设计并增强美观性而不是与之抗衡，那是最佳选择。 根据公司的品牌准则评估图标设计。 这种美学与你的品牌个性和调性相符吗？
美学吸引力也可以通过偏好测试进行测试，该测试很大程度上取决于受众的意见和口味。
验证图标
现在有了这些经过改进的构图，现在该评估用户是否理解新图标了。这是你可以测试的关键属性的列表，以及用户可能对界面提出的一些问题，例如文件管理器：
可发现性（Findability）
首先，你的用户必须能够在你的设计中找到图标。
“如何删除此文件？删除按钮在哪里？”
导航测试（ Navigation test）和首次点击测试（First click test）都非常适合测试可发现性，这对于测量上下文至关重要。 界面的剩余部分是用户查找一个图标，因此如果不进行测试，将很难获得准确的可发现性数据。
可识别性（Recognizability）
其次，你的用户必须识别图标的形式-它是诸如软盘之类的真实对象，还是诸如箭头或网络节点之类的隐喻设备。
“这个图标是垃圾桶还是一杯茶？”
可理解性（Comprehensibility）
接下来，用户必须能够简短地解释该图标的功能。用户能否快速确定该图标是干什么的，而不是它是什么东西？
“垃圾桶是否意味着我将永久删除它？还是我将来可以恢复原状？”
可识别性和可理解性可以通过多种方式进行测试：
设计调查将为你提供了参与者的非结构化、自由文本反馈。
五秒钟测试（Five-second tests）可衡量该图标的记忆性。
偏好测试可帮助你发现参与者最容易理解的图标。
首次点击测试或导航测试可让你查看图标的整体性能。
进阶学习
本指南概述了以下主题，因此建议你进行探索。以下是进阶学习的资源列表：
Optical Effects in User Interfaces
Apple Human Interface Guidelines
IBM Carbon Design System Icon Guidelines
参考文献：
Nielsen Norman Group, Icon Usability
Material Android Icon Guidelines
Material System Icon Guidelines
Carbon Design System Icon Guidelines
UX Myths, Icons Enhance Usability
