图标+标签组合：转化率最高的布局模式

你已经决定在导航中使用带文字标签的图标。明智之举——数据支持这样做。但接下来的问题则不那么明显，却同样重要：图标和标签应该如何相对排列？竖直堆叠？水平并排？标签仅在悬停时显示？每种模式根据不同的环境会产生明显不同的效果，选错了布局方式会抵消添加标签带来的优势。

图标-标签对的布局同时影响三个方面：可扫描性（用户找到所需内容的速度）、点击准确度（击中正确目标的频率）和视觉密度（在给定空间内能容纳多少导航）。要为你的店铺导航找到合适的平衡，需要理解每种模式的优势和劣势所在。

模式1：竖直堆叠（图标在上，标签在下）

竖直堆叠是手机界面中最常见的图标-标签模式。图标在上方，文字标签直接在下方，两者形成单个视觉单元。这是 iOS 标签栏、每个 Android 底部导航栏以及几乎所有主流手机应用都采用的模式。

Apple 的《人机界面指南》明确为标签栏指定了这种布局：图标为 25×25 点，文字标签直接下方采用系统字体。Google 的 Material Design 指南也镜像了这一点，规定图标为 24×24 dp，下方标签为 12 sp。两个平台独立得出了相同的布局，因为竖直堆叠解决了手机的根本问题：水平空间有限。

为什么它在手机上有效：

竖屏手机通常宽 375–430 点。手机标签栏需要在这个宽度内放入 4–5 个导航项。把图标堆叠在标签上方可以容纳更多项目，因为每个项目占用大约 70–80 点的宽度，而水平排列则需要 120–150 点。

竖直堆叠还创造了一个比单独图标或标签都更大的自然点击目标。当用户的手指指向图标-标签对的一般区域时，他们有一个大约 48–56 点宽、44–52 点高的目标——远高于 Apple 的 44×44 最小值和 Google 的 48×48 最小值。这比 24–28 点的仅图标按钮约大 30–40%。

电商手机网站上的 A/B 测试证实了这一点。Blend Commerce 在 Shopify 店铺上进行的测试使用了竖直堆叠布局（与 iOS 约定相符），相比仅有图标的导航，测得转化率提升 10.37%。竖直堆叠不仅是最常见的模式——它也是测试最充分的模式。

何时使用：

• 手机标签栏或底部导航栏（3–5 个项目）
• 应用风格导航，希望与 iOS 和 Android 约定相符
• 任何跨页面保持在屏幕上的持久手机导航

何时失效：

竖直堆叠对于侧滑菜单或导航抽屉来说不够理想，在这些地方项目按竖直列出。在这种情况下，为每个菜单项把图标堆叠在标签上方会浪费竖直空间，创造出不寻常的视觉节奏。侧滑菜单改用水平模式。

模式2：水平并排（图标在左，标签在右）

水平并排将图标放在同一行文字标签的左侧。这是侧滑菜单、侧边栏导航、桌面导航栏和导航列表的标准模式。

为什么它对菜单和列表有效：

当导航项按竖直列出时——如在汉堡菜单、侧边栏或下拉菜单中——图标充当视觉锚点，帮助用户更快地扫描列表。MIT AgeLab 关于视觉扫描模式的研究发现，左对齐的图标创造了天然的扫描”地标”，相比仅文字列表，定位特定项目所需时间减少 18–25%。

水平并排也符合自然阅读模式。在从左到右的语言中，用户先扫描图标（即时识别），然后看标签（确认）。眼球运动平滑且线性。在竖直堆叠中，眼球必须从图标向下移动到标签，当扫描许多项目的列表时这会更慢。

有效的大小和间距：

Material Design 为导航抽屉中的水平图标-标签对提供了具体指导：图标 24×24 dp，图标和标签之间间距 16 dp，标签采用 14 sp 中等粗细字体。每行总高度为 56 dp，提供了舒适的点击目标。

Apple 针对列表风格导航的指南类似：图标 22–29 点（取决于图标的复杂度），标签在右侧采用系统字体。最小行高 44 点。

何时使用：

• 侧滑或汉堡菜单
• 桌面侧边栏导航
• 下拉菜单
• 设置界面
• 任何项目从上到下竖直堆叠的列表式导航

何时失效：

水平并排在水平空间受限的环境中效果不佳，如手机标签栏。五个项目，每个都带图标和标签并排，在 375 点的宽度内根本放不下，除非要么截断标签，要么让文字小到无法阅读。

模式3：悬停显示标签（仅图标，文字在悬停时出现）

悬停显示标签是桌面上越来越常见的模式，特别是在侧边栏导航中，如 Gmail、Slack 和各种仪表板应用所使用的。导航在狭窄列中仅显示图标，悬停在图标上会显示包含文字标签的提示。

为什么它有诱惑力：

吸引力很明显。你得到了紧凑的导航，占用最少屏幕空间，加上用户在需要时发现标签的能力。这感觉像是两全其美。

为什么数据讲述了不同的故事：

悬停显示标签有一个根本问题：它要求用户交互才能识别导航项。这比始终显示标签的方式（一眼即可识别）是倒退。

Nielsen Norman Group 关于基于悬停的提示的测试发现，仅 15% 的用户会故意悬停在导航项上以显示标签。 其他用户要么已经知道东西在哪里（资深用户），要么放弃并寻找别处。这为新访客创造了陡峭的学习曲线，这恰好是电商店铺最不希望的，因为大多数访客是初次来访者。

Baymard Institute 关于电商导航模式的研究发现，依赖提示的导航相比始终显示标签的方式，成功完成导航的次数减少 22%。用户速度变慢，更容易犯导航错误，更可能点击浏览器后退按钮（表明他们去错了地方）。

然后还有明显的问题：手机上不存在悬停。 触屏设备没有悬停状态。在仅图标导航上点击要么立即触发操作，要么打开需要第二次点击的提示——增加了手机用户不期望且不能接受的额外步骤。

何时可能可以接受：

• 内部仪表板或管理工具，用户经过培训并每天使用界面
• 屏幕空间极其受限的仅桌面应用
• 二级工具栏（如格式工具栏），其中图标高度标准化

何时应避免：

• 任何面向客户的电商导航
• 任何类型的手机导航
• 初次访客需要找到方向的主要导航

模式4：仅在活跃状态下标签在下方

一种获得关注的变体是仅在当前活跃导航项上显示标签。这在 Material Design 实现中很常见，其中底部栏为所有项显示图标，但仅在选定标签上显示文字标签。

权衡：

这种模式节省了水平空间，同时仍然提供当前位置的背景。Google 的 Material Design 指南为有三个以上项目的底部导航将其作为选项提供。

不过，测试表明这种方法不如在所有项目上显示标签。Booking.com 的 UX 团队进行的一项研究（在 2019 年 NNG 会议上分享）发现，相比仅活跃项目标签模式，始终显示标签将导航错误减少了 15%。用户需要看到所有选项是什么，而不仅仅是他们已经选择的那个。

Material Design 之后更新了他们的指导，推荐为所有目的地标记导航，而不仅仅是活跃的那个。

为你的店铺选择合适的模式

决定归结为两个因素：导航背景和设备。

背景	最佳模式	原因
手机标签栏（3–5 个项目）	竖直堆叠	符合平台约定，点击目标大，适合宽度
手机标签栏（5+ 个项目）	可水平滚动的竖直堆叠栏	仍为竖直堆叠，但允许水平滚动
侧滑菜单	水平并排	在竖直列表中自然扫描
桌面标题栏	水平并排或仅文字	水平空间充足
桌面侧边栏	水平并排（始终显示标签）	用户需要快速扫描选项
页脚导航	仅文字	图标在这里没有价值
浮动操作按钮	仅图标（带提示）	单一操作，图标足够

快速测试在手机上打开你的店铺，尝试识别每个导航项而不读取标签。如果你甚至在某个项目上停顿了，那就是应该放置标签的地方。如果你的手机标签栏使用水平并排且项目感觉拥挤，切换到竖直堆叠。Navi+ 让你在菜单生成器中在布局模式之间切换，因此测试不同组合只需几秒钟而非数小时的主题编辑。

对于大多数 Shopify 店铺，最安全的默认方案是手机标签栏采用竖直堆叠，侧滑菜单采用水平并排。这些模式与用户每天在使用的应用中已经期望的相符，并且它们背后有最强的测试数据。从这里开始，然后根据你的店铺分析进行迭代。

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