5个通用图标（以及为什么其他所有图标都需要标签）

请一群设计师列举他们愿意不加文字标签单独使用的图标，你会得到二十份不同的清单。问用户这些相同的图标是什么意思，你会得到两百份不同的答案。设计师假设通用的图标与用户实际理解的图标之间的差距，是电商导航中成本最高的错误之一。

由Nielsen Norman Group、Apple、Google以及大规模A/B测试公司多年研究支持的事实要狭隘得多。只有少数几个图标可以单独使用而不会造成混淆。其他所有图标都需要标签。

5个通用图标

实际上能不用文字就行得通的图标，是那些在整个平台上标准化了数十年、在用户遇到的几乎所有主要应用中都有近乎相同实现的图标。这份清单很短。

1. 主页（房子图标）

房子图标长期以来都表示”转到主页”，这个含义已经根植于用户的预期中。每个浏览器、每个移动操作系统以及几乎每个应用都使用相同的视觉隐喻。在大多数用户测试中，主页图标的识别率超过95%。

不过，在电商中，主页图标多少有些冗余。大多数Shopify主题已经使用商店标志作为主页链接，这提供了相同的功能并加强了品牌认知。如果你同时有标志和主页图标，你就在为同一个操作占用两块导航空间。

2. 搜索（放大镜）

放大镜是网络上测试最多的图标之一。其识别率持续高于90%，用户毫不犹豫地点击它。这个图标的优势在于视觉上具有描述性——放大镜看起来就像是寻找东西的工具——并且从1980年代开始就被用于桌面操作系统。

在电商中，搜索至关重要。放大镜图标可以安全地单独用于移动标题或标签栏，不过在其下面添加”搜索”一词仍然会产生小但可测量的参与度提升。即使是通用图标，带上标签时也会获得更多点击。

3. 购物车或购物袋

几十年的在线购物使购物车图标变得无误。无论是来自杂货店的购物车还是来自零售店的购物袋，用户都知道它表示”查看我打算购买的商品”。该图标通常包含显示商品数量的徽章，这增加了功能清晰度。

Baymard Institute的测试显示，在电商背景下购物车图标的识别率超过95%。与其他一些图标不同，购物车图标没有被附加替代含义所负累——它表示一件事，这个含义在各平台间稳定一致。

4. 菜单（汉堡图标）

三条线汉堡图标已成为移动设备上”打开菜单”的默认符号。随着移动优先设计成为标准，其识别度在过去十年里大幅提高。对汉堡图标的早期批评——特别是2014年的一个著名测试显示”菜单”二字优于图标——随着用户适应这一模式，基本上已经消散。

不过，将汉堡图标与”菜单”二字结合仍然优于单独使用图标。Nielsen Norman Group在数十万个会话中的测试发现，当图标与文字配对时，菜单参与度提升20%。用户理解该图标，但标签消除了最后一点犹豫。

5. 关闭（X图标）

关闭窗口、对话框和覆盖层的X图标是通用理解的。从最早的图形用户界面开始，它就一直是标准。识别率接近100%，用户看到它时不会犹豫。

X图标是少数几个标签实际上会损害可用性的情况之一。在X旁边添加”关闭”一词会造成冗余而不增加清晰度，而且它占用的空间通常在模态标题中非常有限。

为什么其他一切不加标签都会失败

一旦你离开这5个图标，识别率就会急剧下降。原因是平台不一致。同一个视觉符号在不同背景下表示不同的东西，用户没办法知道哪个含义适用于你的商店，除非你告诉他们。

心形图标是一个完美的例子。在Instagram上，它表示”赞”。在Pinterest上，它表示”保存”。在许多电商网站上，它表示”添加到心愿单”。在健康应用中，它代表健康数据或收藏。当用户第一次在你的商店上遇到心形图标时，他们是在猜测。Nielsen Norman Group的研究发现，在电商背景下，无标签心形图标被超过40%的用户误解。

星形图标有同样的问题。根据应用的不同，它可以表示评分、收藏、高级功能或特色商品。没有标签，用户必须从背景推断，这引入了摩擦。

人形或用户图标可能看起来显而易见——它代表”账户”或”档案”，对吧？除非在某些网站它表示”登录”，在其他网站它表示”客服”，在还有其他网站它打开包含多个账户相关操作的下拉菜单。识别研究显示，在第一次接触时，只有约60%的用户正确识别人形图标为”账户”。

网格、标签、筛选和书签图标都存在严重的模糊性。网格可能表示”以网格显示”、”类别”、”集合”或”所有产品”。标签可能表示”销售商品”、”标签”或”整理”。筛选图标稍好一些，但仍然只有约70%的用户在没有标签的情况下识别它。

模式很清晰：在所有主要平台上有一个稳定含义的图标可以单独使用。在不同应用中含义不同的图标则不能。

识别数据

Nielsen Norman Group在过去十年中进行了多轮图标可用性测试。他们的发现是一致的。在一项广为引用的研究中，他们测试了75个在电商和内容网站上使用的不同图标。只有6个图标的识别率超过80%。其余的落在一个范围内，其中40%到70%的用户要么误解了图标，要么因为不确定而完全跳过了它。

Apple的内部研究（它影响了他们的Human Interface Guidelines）导致他们明确建议在所有标签栏项目上添加文字标签。他们的指南规定：”如果你从标签栏移除标签，请确保图标清晰易懂。”但随后它更进一步：”通常最好包含标签，因为它们帮助用户一眼就理解每个标签的目的。”

Google的Material Design指南更加直接。底部导航的指南规定：”所有目的地都应使用文字标签。没有文字标签的目的地本身无法清楚地传达。”他们测试了仅图标的底部栏，发现添加文字标签将导航成功率提升18%。

这不是理论。当拥有数十亿用户和几乎无限资源进行测试的主要平台告诉你文字标签是强制性的时，那是因为他们的数据显示无标签图标会损害可用性。

即使是通用图标也能从标签中受益

即使是5个通用图标在许多背景下有标签时也能表现得更好。差异比模糊图标的情况要小，但它是可测量的。

Blend Commerce对Shopify商店的测试发现，带有图标和文字标签的移动标签栏产生的转化率比仅有图标的相同标签栏高10%——即使使用的图标来自通用集（主页、搜索、用网格表示的集合、购物车、账户）。

为什么给放大镜图标添加标签会增加参与度？两个原因。首先，标签提供确认。用户看到图标，识别它，标签在他们点击前确认他们是正确的。这一瞬间的确信消除了微摩擦。其次，标签创建了一个更大、更宽容的点击目标，这改善了小屏幕上的可用性。

实用要点：通用图标在空间真正受限时可以单独使用，但添加简短标签是更好的默认选择。

这对你的导航意味着什么

如果你正在为Shopify商店构建或审计导航，这是决策框架：

安全单独使用的图标：

• 搜索（放大镜）
• 购物车或购物袋
• 关闭（X）
• 主页（如果与标志不冗余）
• 菜单（汉堡）

需要标签的图标：

• 其他所有图标。集合、账户、心愿单、收藏、筛选、排序、分享、设置、通知、聊天和你正在考虑的任何特定类别图标。

最佳实践： 即使通用图标也应在移动标签栏等持续导航中带有标签。空间成本很小——每个图标下方一到两个词——而可用性收益是实际的。

如果你的导航目前对搜索、购物车或关闭之外的任何东西使用仅图标按钮，请进行一个简单测试。添加文字标签并测量参与度。像Navi+这样的工具使得轻松切换标签打开和关闭变得容易，所以你可以测试两个版本而无需重建主题。数据几乎总是有利于标签版本。

本文是关于导航中的图标与文字：何时选择哪个（以及何时同时使用两者）的更大指南的一部分。