一家店铺可以拥有出色的商品目录、公道的价格和干净的照片——可顾客仍然会离开，因为他们找不到自己想要的东西。在这种时刻，问题通常不出在商品上，而出在导航上。这篇文章会逐一介绍 Shopify 常见的几种菜单类型，更重要的是，讲清每一种菜单当初是为了解决哪一类瓶颈。技术细节会尽量少讲，重点放在它们如何帮助顾客更轻松地完成购买。
在进入细节之前，有一个数字值得记住：根据 Baymard Institute 的数据，平均购物车放弃率长期稳定在 70% 左右，多年来几乎没有变化。其中并非全部由导航造成，但有一部分正是因为顾客到不了自己想去的页面，或者到得太晚而放弃了。
Mega Menu：让顾客一眼看清整个商品目录
Mega Menu 会打开一个大面板，一次性展示众多分类，通常还配有图片。它解决的是桌面端的一个具体瓶颈：顾客不知道店里卖什么，也不知道商品线有多深。
设想一家有几百个 SKU 的服装店。如果菜单里只列着”男士 / 女士 / 配饰”，顾客就得先点击、等页面加载，然后才能看到里面有什么。每一次点击，都是他们改变主意的机会。而 Mega Menu 让他们在一次悬停之间就能扫到”衬衫、牛仔裤、夹克、鞋……”，再配上几张图片来勾起兴趣。
这之所以有效，是因为顾客倾向于扫视一个分组清晰的宽菜单来确定方向，而不是一层一层地摸索下去。对于商品线众多的店铺来说，这通常是桌面版首先值得考虑的 Shopify 菜单类型。
需要提醒一点：只有当商品目录足够宽、值得展开时，Mega Menu 才有优势。如果你只有 15 个商品，普通菜单就够了；硬塞进 Mega Menu 只会显得既空又乱。
Tab Bar：抛开汉堡菜单，把关键操作送到指尖
在移动端，很多店铺习惯把所有导航都藏在那个三横线图标后面（也就是汉堡菜单）。这正是 Tab Bar——固定在屏幕底部的导航栏——最能发挥作用的地方。
原因有两个。其一，来自 Nielsen Norman Group 的可用性研究表明，被藏在汉堡菜单后面的导航，被注意到和被使用的频率远低于一直可见的导航；任务完成所花的时间也更长。一句话：藏起来的东西，被点的次数更少。
其二在于人们握手机的方式。Steven Hoober 观察了 1300 多人的研究发现，大多数人用一只手握手机，主要靠拇指操作。拇指最容易够到的区域，是屏幕的下半部分。而汉堡菜单偏偏在顶部角落——恰好是最难够到的地方。Tab Bar 则把首页、分类、搜索和购物车直接放在屏幕底部，正好是拇指所在的位置。
对于几乎每一笔订单都来自手机的越南商家来说，一次点击就能打开购物车或搜索，可能就是成交和关掉 App 之间的区别。这是我在移动端通常建议最先尝试的一种。
Slide Menu：呈现多层级分类树，又不让顾客感到不知所措
Tab Bar 适合承载少数几条主路径，但它装不下整棵很深的分类树。这正是 Slide Menu 的任务——一个从屏幕边缘滑入的面板。
这里的瓶颈在于结构多层级的店铺：大类目下有子分类，子分类下还有更细的子分类。一次性全摊开会让顾客不知所措；藏得太好则会让他们根本看不到。Slide Menu 的处理方式是一次只展开一层——点”家居用品”，就滑到里面那一层的条目。
一个常见的例子是网上杂货店或汽配店，里面有几十个商品组。顾客顺着分类树往下走，而不必滚动一份没完没了的长清单。Slide Menu 让每一步的屏幕都保持整洁，让顾客按自己的节奏一层层深入。
Slide Menu 和 Tab Bar 并不互相排斥。一种常见的搭配是：让 Tab Bar 处理最热门的路径，同时由一个”分类”标签打开 Slide Menu，呈现完整的结构。
FAB：让一个重要操作始终触手可及
FAB（悬浮操作按钮）是一个固定的圆形按钮，通常位于屏幕下方角落，在顾客滚动页面时一直浮在内容之上。它解决的是一个虽小却常见的瓶颈：顾客读到商品页的中段时，那个重要的按钮早已滑出视野之外。
随着顾客往下滚动查看商品描述、照片和评价，原本在顶部的”加入购物车”“在 Zalo 上咨询”或”致电下单”按钮已经不见了。他们得往回滚，而每多一步操作，都是一次离开的机会。FAB 把你最希望顾客采取的那个操作钉住，让它始终在那里，并且就落在拇指方便触及的区域。
关键在于克制：一个 FAB 只应承载一个 CTA。塞进三四个悬浮按钮会挡住内容，反而适得其反。一个按钮，一项任务。
加载速度：一个好看但慢的菜单，比难看的菜单更糟
这一节和上面四种类型同样重要。一个看起来很优雅、却让页面卡顿、加载缓慢的菜单，会在顾客还没用上它之前就把人赶走。
Google 通过 Core Web Vitals 来衡量体验，其”良好”的阈值是：LCP 低于 2.5 秒（主内容显示得有多快）、INP 低于 200 毫秒（点击后的响应速度），以及 CLS 低于 0.1（稳定性，避免布局乱跳）。一个臃肿的菜单可能把这三项全部拖下来——尤其是 CLS，当一个加载较晚的菜单让它下方的内容跳动时，会导致顾客点错地方。
之所以值得一提，是因为店铺往往会安装很多 App，而每多一个 App 都可能增加加载负担。一个写得粗糙的菜单 App，会悄悄拖慢每一个页面。
这正是 Navi+ 试图做得不一样的地方。Navi+ 是一款无需写代码的导航构建工具，可以创建 Tab Bar、Mega Menu、Slide Menu、FAB 和 Grid Menu，能分别配置移动端和桌面端，并经过优化以避免拖累 Core Web Vitals。即使你更换主题，菜单也会原样保留，所以每次翻新外观时都不必从头重建。你可以在 naviplus.io 了解更多。我在这里提到它，是因为速度恰恰是商家在挑选菜单 App 时最容易忽略的标准——而它对转化的影响，比我们想象的要大。
小结
每一种菜单类型都对应不同的瓶颈。没有绝对的”最好”——只有最契合你顾客迷路方式的那一种：
- Mega Menu —— 顾客在桌面端看不到整个商品目录。
- Tab Bar —— 移动端的关键操作被藏在汉堡菜单后面。
- Slide Menu —— 多层级的分类树让人不知所措。
- FAB —— 顾客滚动时主 CTA 渐渐消失。
- 速度 —— 让上面四种类型真正有意义的基础。
切实可行的做法，是回头审视自家店铺上的顾客旅程，找出他们容易卡住的地方，然后选择正好能修复那一处的菜单类型——而不是为了装而装。
本文是更大篇幅指南顾客来了店里却不下单——以及导航在其中的作用的一部分。