Accordion Icons: Which Work Best?

• 5 分钟阅读
• 设计, 用户体验, 图标

深入探讨手风琴图标的设计原则，拆分菜单的潜在危害，以及为何不应让图标和文字标签指向不同操作。此外，我们将解释为何箭头符号是最安全的图标选择。在 Smashing Magazine 上，你还可以找到更多实用指南和在线研讨会，欢迎浏览探索。 那么，哪种图标最能可靠地表示手风琴的展开与收起？箭头符号、斜线箭头、普通箭头和三角形之间，真的存在明显差异吗？

研究显示确实存在差异。但更有意思的是，拆分菜单会带来负面影响，为何让图标和文字标签指向不同操作是更糟糕的设计，以及为何箭头符号是最安全的图标选择。让我们深入探讨！

NN/g 关于手风琴图标的研究显示哪些图标有效、哪些会造成混淆。如果是链接，使用下划线标注；如果是手风琴，使用箭头符号。就这么简单。(大图预览)

无图标 = 打开新页面

研究结果并不令人意外：当没有使用任何图标时，用户会认为点击菜单项会直接跳转到新页面。用户经常对自定义图标感到困惑，因为它们无法明确传达手风琴的展开行为。对于大多数图标，人们倾向于以相似的频率点击图标和文字标签。

参与者在文本标签和图标之间点击的频率基本相同，但使用箭头符号时，人们更倾向于点击图标本身。来自NN/g 手风琴图标研究。(大图预览)

许多设计（如下图所示）倾向于通过添加指向各处的箭头和箭头符号来过度复杂化交互，具体取决于手风琴的状态。但通常我们不需要使用箭头来指示分类链接。

人们倾向于几乎同等程度地点击图标和标签，这意味着图标选择会影响整个点击区域，而不仅仅是视觉信号。来自NN/g关于折叠面板图标的研究所。(大图预览)

经验法则非常简单：如果是链接，最简单有效的方式是直接加下划线——无需任何箭头、箭头符号或其他图标。或许这并不特别令人兴奋，但每次都能完美运作。

与箭头 ▶ 和分割按钮相关的混淆行为

使用向右箭头图标 ▶ 并不暗示会直接跳转到新页面。同样，向下的箭头 ▼ 也不一定意味着点击/单击时折叠面板会展开。

避免在折叠面板中使用分割按钮是个好主意——即文本标签直接链接到页面，而图标却展开折叠面板。更可靠的方式是让用户点击主类别以显示菜单；若要访问类别页面，我们则在菜单中添加链接。

DHL的折叠面板导航：没有多余的箭头，没有分割菜单，每个部分都有“概览”链接。（图片来源：DHL.de）(大图预览)

加号+/− 和箭头 ↓/↑ 被理解，但可能产生歧义

对于折叠面板，我们通常使用 +/− 或箭头 ↓/↑ 来表示展开和折叠状态，通常效果良好。然而，这两种方式存在许多不同解释。加号 + 可能代表从保存到添加到购物车再到放大等多种含义，在多级导航中尤其容易混淆，因为多个层级可能同时打开。

用户实际的预期：更多人点击箭头时期待跳转到新页面，而当完全没有图标时，这种预期甚至更强烈。来自NN/g关于折叠面板图标的研究所。(大图预览)

向下/向上的箭头（↓/↑）可以表示滚动、滑动或查找下一个匹配项，但也可能表示跳转到页面的特定部分。加号和箭头都已被广泛理解且功能正常，但根据设计不同，也可能造成混淆——主要是因为它们被过度使用。

总结

安全的选择是默认使用向下的箭头/三角形 ▼，在交互时将其改为向上的箭头或向右的箭头 ▶。如果需要替代方案，加号/减号（+/-）通常也能很好地工作。

箭头在搜索结果展开时表现良好。Lens.org 使用向下箭头表示可折叠条目。(大图预览)

但我们显然不需要更多图标或箭头来指示链接指向的位置。对于分割菜单也是如此，它们往往弊大于利。相反，我们只需要一个按钮或下拉菜单，它只做一件事——展示所有选项并允许用户逐步深入。

如果你需要直接链接，我们会将标题直接链接到页面并加下划线。大多数情况下，简单才是更好的选择。

编者按

我们希望你发现这些精彩的项目对工作有帮助——它们由优秀的创作者精心整理。向所有愿意分享作品供大家学习和使用的创作者致以友好的问候！这也是我们真正热爱网络以及构建和设计网络的人的原因之一。 💚

在 Smashing，我们热爱网络。这就是为什么我们发布文章和书籍，围绕网络相关主题举办研讨会和活动。我们喜欢看到大家如何共同努力，让网络更加易用和可访问。我们也喜欢组织和参加线上活动——为大型团队（5人以上）和学校学生提供友好的折扣。感兴趣的话，只需给我们发邮件，我们会帮你安排！

• 多个实时课程（每场2.5小时），
• 太平洋时间 09:00 – 11:30（中欧时间 18:00 – 20:30），
• 包含工作坊视频录像和幻灯片，
• 免费视频预览（2.5小时），
• 跳转至所有工作坊→

(yk)