每一种菜单类型都是为了解决一个不同的问题而诞生的。选错了不会马上让你的店铺崩掉，但会让顾客多花心思去琢磨——而每一次让顾客不得不动脑筋，都是他们可能离开的瞬间。这篇文章会逐一过一遍最常见的 Shopify 菜单类型，对每一种都讲清楚：它是什么、什么时候合适、什么时候不合适，以及商家容易犯的错误。
在进入细节之前，有一个数字值得先记住。根据 Baymard Institute 的数据，电商的平均购物车放弃率在 70% 左右。并非每一次流失都怪导航，但混乱的导航确实在顾客还没走到购物车之前，就把他们往外推了一把。
下面这四种类型并不是互相排斥的。一家店铺常常会同时用上好几种——比如桌面端用 mega menu，移动端用 tab bar。关键在于：在对的场景里用对的类型。
Mega menu：适合品类繁多、且顾客在桌面端浏览的店铺
mega menu 是一块大型的展开面板。当你把鼠标悬停在或点击某个顶层项目时，会打开一块宽大的面板，一次性展示很多子品类，常常还配有图片或一个主推商品。顾客一眼就能看清整个店铺的布局。
当一家店铺品类繁多时，它的效果很好——粗略地说，比如有 10 个分组以上——而且大多数顾客都用电脑访问。那些买家喜欢先逛逛再决定的行业，比如服装、化妆品、家居用品和家具，往往都适合这种风格。顾客还不确定自己到底想要什么，所以把许多路径摆在他们面前会很有帮助。
mega menu 不适合商品很少、或大多数顾客用手机访问的店铺。一家只卖十款衬衫的店铺却打开一块巨大的面板，那就太过头了——看上去空荡荡的。而且既然 79% 的 Shopify 流量都来自移动端（根据 Shopify 的数据），一个只在宽屏上才好看的设计，等于抛弃了大多数顾客。
最常见的错误是塞得太满。商家想把所有东西都展示出来，于是把每一个品类、每一张横幅都堆进同一块面板里。结果就是顾客感到不知所措，什么都不点。选择太多和没有选择没什么两样。把内容紧凑地分好组，留出留白，只突出那几样你真正想卖的东西。
Slide menu：适合多层级品类、且目标明确的顾客
slide menu（也叫汉堡菜单，从三横线图标打开）会从屏幕边缘滑入。它以树状结构展示品类——点一个分组，它的子分组就展开，可以一层层深入好几级。这是把复杂结构装进狭窄空间的一种利落方式。
当一家店铺有很多品类层级、你需要一个清晰的层次结构时，slide menu 就很合适，尤其是在以移动端为先的思路下。拿一家汽车配件店来说：品牌 › 车型 › 配件类型。slide menu 让顾客可以顺着对的分支一路下钻，而不必每一步都加载一个新页面。
它不适合结构简单的店铺。如果你只有寥寥几个品类，把它们藏在一个图标后面只会给顾客添麻烦。Nielsen Norman Group 的研究表明，隐藏式导航会降低顾客找到所需商品的几率，并且让他们比菜单可见时找得更慢。
理解它的本质会有帮助：slide menu 是把信息藏起来的。这让它很适合那些已经知道自己想要什么的人——他们会主动打开菜单，直奔一个熟悉的分支。它在”浏览”方面较弱，因为顾客在点击之前什么都看不到。如果你的目标是让顾客偶然发现商品，那么单靠一个 slide menu 是不够的。
Tab bar：当大多数顾客都用手机时很合适
tab bar 是固定在手机屏幕底部的一条导航条，通常放 4–5 个最重要的项目，比如首页、品类、搜索、购物车和账户。它始终可见——无论顾客滚动到多远，它都待在那里。
tab bar 的优势在于它的位置。Steven Hoober 关于人们如何握持手机的研究（超过 1,300 次真实世界的观察）发现，大多数移动操作都是用一根拇指完成的，而屏幕底部中央正是拇指最容易够到的地方——常被称为拇指区。把主要操作放在底部，就等于把它们放在了顾客的手早已停留的地方。
当大多数流量都来自手机时，tab bar 就很合适，而这对如今大多数 Shopify 店铺来说都是事实。它还能让重要的东西——尤其是购物车——始终一触即达，而不必逼着顾客滚回页面顶部。
要注意，tab bar 能放的项目非常有限。别想着硬塞七八个图标进去；挑出 4–5 个最重要的，剩下的交给 slide menu 或品类页面。把 tab bar 当作一条快捷方式，而不是你的整套导航。
FAB：一个浮动按钮，对应一个动作
FAB（浮动操作按钮）是一个悬浮在内容之上的圆形按钮，用于一个重要动作——和店铺聊天、查看购物车，或跳回页面顶部。它始终在那里，却很低调，几乎不占什么空间。
当你只想让顾客能从任何地方做某一件事时，FAB 就很合适。在越南，一个常见的例子是浮在右下角的 Messenger 或 Zalo 聊天按钮——一个正在看商品、心里有疑问的顾客可以马上点开就问，不用到处找。
要记住的一点：FAB 不能取代菜单。它是某一个动作的快捷方式，而不是你整套导航系统的归宿。常见的错误是给它装得太多——一个按钮展开成五六个选项，或者一次出现三四个浮动按钮，盖住内容，甚至挡住”加入购物车”按钮。到了那个地步，FAB 就从一种便利变成了一道障碍。一个 FAB，一个用途。
几条适用于这四种的通则
无论你选哪一种类型，下面这三点始终成立。
- 把移动端和桌面端的配置分开。 还是同一家店铺，但两种设备上的顾客行为是不一样的。一套对两者都堪称完美的菜单通常并不存在；更好的做法是桌面端用 mega menu，移动端用 tab bar 或 slide menu。
- 不要拿速度去做交换。 Google 为 Core Web Vitals 设定的良好目标是 LCP 低于 2.5 秒、INP 低于 200 毫秒、CLS 低于 0.1。一个漂亮但会让页面跳动或加载缓慢的菜单，弊大于利。根据 Shopify 的数据，一家店铺平均安装约 6 个应用，所以你每加一个应用都会拖慢页面——有所取舍很重要。
- 别让你的菜单在换主题时坏掉。 如果菜单是写死在主题里的，那么每次换外观你都得从头重建一遍。
这也是为什么很多人会用一个独立的导航工具。Navi+ 可以用拖放的方式、无需代码地搭建上面这全部四种类型——mega menu、slide menu、tab bar、FAB，还有网格菜单——移动端和桌面端可以分开配置，而且换主题时菜单依然完好。这个工具的设计也保证它不会拖累你的 Core Web Vitals。但无论你用什么工具，原则都是一样的：根据顾客的设备和他们的购买方式来选择菜单类型，而不是看哪一种最花哨。
本文是更完整的指南如何为你的 Shopify 店铺选对菜单类型的一部分。