图标无处不在。从 Internet™️ 下载数以千计的免费矢量图标工具包中的一个，然后开始在您的画板上投掷汉堡包、烤肉串和放大镜形状的像素，您就拥有了自己的设计。但是你有没有停下来思考什么时候使用一个图标，什么时候不使用一个？什么时候使用哪个图标？
这篇文章分享了SEEK UX 团队关于图像的一些思考和一些研究，希望这能让您更加了解这些 8 位小艺术作品背后的 UX 复杂性。
静态图标是用作装饰元素的图标，用于传达离散信息或帮助查找路径。像一切一样，它们可以是好的也可以是坏的。
图标很好
精心设计且易于识别的图标可以快速传达用户可能正在扫描的信息——例如，扫描具有 WiFi 的酒店的搜索结果页面，或物业中的卧室数量。我们在无障碍停车场的象征意义、浴室的标志和毒药的普遍象征中看到了这一点。
Realestate.com.au 图标，用于显示房产列表中卧室、浴室和车位的数量
图标无需针对每个列表重新阅读同一条信息，从而节省空间并减少认知负担，从而减少摩擦。
没有图标的 REA 设计增加了摩擦
图标可以改善界面的外观，增加视觉吸引力，众所周知，可以增强产品的（感知）用户体验和可用性。这被称为美学可用性效应，您可以在此处 (NN/G) 阅读有关它的信息。
当图标与文本配对时，它可以通过提供一种替代机制来传递信息——带有视觉线索的文本——来提高可访问性，这对有认知问题、无法正确看到图标的低视力者等人来说是有益的。
NAB 的聊天图标清晰
图标还可以帮助将界面语言作为非主要语言（或根本不会）说（或阅读）的人进行导航。我可能无法阅读界面上的文字，但图标可以让我了解如何导航，或者如何找到我要找的东西。在现实世界中也是如此，这也是我们为浴室、机场、电梯等设计标准化图标的原因。
尽管我的加泰罗尼亚语很差，但多亏了图标，我还是能够在巴塞罗那成功地洗衣服
图标不好
当我们不知道它们试图向我们表示什么时，设计糟糕的图标会增加混乱，尤其是当它们没有附带文本或工具提示时。
如果没有文字，一朵花是否代表 “水疗和健康中心”？
为了图标而使用的图标几乎没有价值，而且会给界面增加噪音。
在左边的设计中，图标没有增加任何价值，所以我们删除了它们并减少了噪音
没有替代文本的图标会让屏幕阅读器用户感到困惑。特别是如果它只是读出类似 “Star” 而不是 “Save Job” 的内容。文本标签也有助于减少视力正常用户的这种混淆。
图标是主观的。相同的图标在不同的网站上可能有不同的含义（例如，“保存”的星号和 “评级” 的星号）。相同的图标在不同的上下文中可能有不同的含义（例如用于分享、回复、转发、下一步的箭头）。图标可能难以辨认。
所有不同的洗衣图标都是什么意思？来源
图标的目的可能会令人困惑
这是静态图标还是交互元素？有时图标是可点击的并执行操作，当可点击元素直接位于不可点击元素旁边并且在平面设计中时，这可能会特别令人困惑。
星星更厚，所以我知道它是可点击的——但普通用户可以吗？它与其他非操作图标分开——这是否意味着普通用户可以点击？
我们需要确保这个元素是可点击的，我们称之为可供性——特别是当它只是一个没有文本的图标时。
在应用程序或网站上看到过您想轻松找到的项目？只需点击方便的花花公子 “保存” 图标！但是，究竟什么是保存图标？
哪个图标，什么时候？
在拟物化时代，它曾经是磁盘的一个图标——软件中的一个对象用它的现实世界中的对应物来表示，在这个例子中是一张软盘💾。当我们从磁盘转移到 CD 再到 USB 和云时，软盘从未得到升级，但它的含义仍然是众所周知的。您可能听说过这样一个民间传说：“哇，有人用 3D 打印了保存图标！” 看到 3 1/2 英寸软盘 IRL。
今天，您仍会在 Microsoft Office 产品中看到这一点。
微软保存图标
要在 Airbnb 上放置房产，请点击心脏❤️
爱彼迎保存房产
我喜欢这个地方，也许我会留在这里！
虽然也许我不喜欢这个地方，但也许只是我想把它放在一边以供以后进一步评估，因为它可能满足我作为旅行者的需求。Airbnb 可能选择了星形图标，因为它已经用于评分，也许我们希望将 “爱” 与保存保持距离，特别是在用户不喜欢做的事情的情况下（这是必需的，而不是一个有趣的假期） ）。
像 Twitter 这样的产品模糊了这条线——我可以作为社交验证（比如 Instagram 和 Facebook）来打动人心，或者我可以用它来保存它供自己以后检索。不想使用心形在已经意味着其他东西的地方尤其如此——喜欢或反应——例如在 Instagram 和 Facebook 上，他们已经回到拟物化设计并决定用书签来代表 “保存”🔖。像在书本上（或在 Kindle 上）一样，用实物找到您的位置。
Medium 为故事添加书签以备后用
一颗星星呢？⭐️ 如果我为要保存的东西加星标，这是否意味着它是我的最爱？如果用户回来并看到列表中的一个项目有一个星，这是否意味着我们向他们推荐它作为一个很好的匹配？还是他们救了它？
在 Slack 上为消息加星标
亚马逊通过简单的带有 “添加到列表” 文本的按钮，没有图标，一起避免了这些问题。
亚马逊 - 添加到列表
带有文本的图标和适当的可供性，具有清晰的动作并且更有用。它还使使用屏幕阅读器的人、认知能力低的人等更容易访问这些操作。
标签为图标添加上下文
除了图标操作令人困惑之外，普遍理解的图标很少。
在SEEK，我们进行了一项有关图像学理解的研究。
我们首先询问参与者他们希望点击什么图标来将工作放在一边以备后用（我们避免使用 “保存” 这个词，因为我们不想让他们准备好）。这是一个自由文本答案，他们可以在其中解释他们希望看到的符号。
想象一下，上图中的黑色方块隐藏了一个图标（符号或图片），您可以单击该图标将作业放在一边以备后用。你期望什么符号或图片？
最受欢迎的回应是：
- 星形图标 (24%)
- “保存” 作为通用答案 (15%)*
- 软盘 (11%)
- 文件 / 档案柜 (6%)
*不清楚受访者所说的 “保存” 是什么意思，因为许多人没有详细说明。一些人写了诸如 “软盘保存图标” 或“保存图标即软盘”等回复，但不清楚是否所有 “保存” 受访者都是这个意思。
此外，SEEK 网站上使用了一颗星，因此这可能会导致受访者回答他们所知道的黑色方块后面的内容。
我们问了与 Twitter 民意调查相同的问题，有 4 个选项，大多数回答软盘意味着保存！
Twitter 民意调查——哪个图标表示保存？
软盘可能仍然被普遍理解，但作为设计师，我们不希望古老的技术使我们的界面变得混乱，所以我们已经转向星形或心形。我们真的需要一个图标吗？为什么不只是简单的 “保存” 按钮？
接下来，我们向参与者展示了 4 个与界面隔离且没有标签的图标，并询问他们与该图标相关联的单词、短语或动作。
您将哪些词、短语或动作与此图标相关联？
没有一个图标是普遍理解的，并且可以根据参与者以前的经验和技术熟练程度进行解释。这表明将标签放在图标旁边会增加可用性和易用性。它还遵循可访问性指南，我们不应该仅仅依靠视觉线索来描述一个动作——上下文 + 视觉线索 = 可用
受访者在他们的文字回复中回应了这种情绪：
“网上的大多数东西都让我感到困惑，为什么不能每个视线[原文如此]使用相同的形状来做同样的事情？”
“图标可能有点令人困惑，因为它们对用户及其使用情况非常主观”
“我喜欢让事情保持简单——找工作压力已经够大了，而且没有一个复杂的网站在这个过程中导航”
书签图标最有可能让参与者表示他们不知道它做了什么，但许多人确实明白它会将工作搁置一旁。有些人认为这意味着工作 / 公司获奖或与他们匹配。总的来说，它被解释为：
- 书签 (38%)
- 不知道 / 不确定 (11%)
- 节省 (11%)
- 旗帜 (9%)
心形图标与爱和识别社交媒体帖子（来自 Instagram 或 Twitter 的先验知识）相关联。熟悉 SEEK 的受访者回答说它用于保存的搜索。然而，总体而言，受访者并没有强烈地将这与将某些东西放在一边以备后用。它更多地与积极的情绪（爱，喜欢，幸福）联系在一起。心形图标被理解为：
- 爱 (54%)
- 喜欢 (35%)
- 最喜欢 (21%)
有些人真的不喜欢使用心脏的想法：
“爱，不适用于招聘广告”
星星被理解为标记某些东西以备后用或同样重要。然而，它也被认为是一份工作与他们的匹配度或公司评级的指标。这位明星被视为：
- 最喜欢 (37%)
- 节省 (20%)
- 明星 (17%)
- 重要 (10%)
- 评分 (8%)
共享箭头被压倒性地误解为 “前进” 到“下一个”，但显示是脱离上下文的：
- 前进（或转发电子邮件？），下一页或下一页 (81%)
- 回复电子邮件 (10%)
- 份额 (8%)
先验知识影响理解
就像我们设计的任何东西一样，我们需要测试我们的目标用户对我们图标的理解。三角形对一个人来说可能只是一个三角形，但对物理学家或数学家来说，它可能很明显意味着 “变化”。
我曾经用下面的涂鸦在 3 秒内赢得了一场 Pictionary 游戏。这是什么意思？对你来说，可能什么都没有。但对我和我的 Pictionary 伙伴来说，这是我的贵宾犬 Penny。我们的比赛并不愉快。
这对你来说意味着 Penny 吗？
上下文很重要
另一个箭头旁边的箭头可能意味着 “下一个”，而如果它靠近一颗心，则可能很明显它意味着 “分享”。在上下文中测试图标。
如果你喜欢它，那么你应该给它贴上标签
如果您希望大多数用户能够理解图标的作用，请使用标签。用户测试发现，用户在 88% 的时间里点击带有标签的图标时能够正确预测会发生什么。对于没有标签的图标，这个数字下降到 60%。对于定制的无标签图标，这一比例进一步下降到只有 34%。在此处阅读有关他们研究的更多信息。
这取决于。
问问自己，这里是否使用图标：
- 帮助用户找到他们想要的东西？
- 减少认知负荷？
- 增加产品的视觉吸引力？
是选择的图标：
- 在给定的上下文中，用户可以理解吗？是否已与目标群体进行测试以进行理解？
- 明显可以点击？
- 附有文字以提高可用性和可理解性？
如果您对上述问题的回答是肯定的，则您可能可以使用图标。
在以下情况下不要使用图标：
- 似乎没有提供任何价值；
- 使界面杂乱；
- 对解释持开放态度。
https://medium.com/seek-blog/iconography-good-or-bad-as-always-it-depends-8ea9a28e0b
若有收获，就点个赞吧
0 人点赞
