一位店主看到某个大品牌用了一个看起来很精致的 Mega Menu，于是原封不动地照搬到自己的商店里。问题是这家店只卖二十款商品，菜单却比一个完整的大型市场还要繁杂。而在另一端，有些商店卖着上百个品类，却只用了一条朴素的水平菜单栏——顾客进来后到处翻看，始终弄不清这家店到底卖什么。
这两种做法犯了同一个错误：他们是按照自己喜欢看什么来选菜单，而不是按照商店真正需要什么。并不存在一种适合所有商店的最佳菜单类型。选对 Shopify 菜单类型取决于你有多少商品、顾客如何购物，以及其中有多少人在用手机。这篇文章汇总了我在运营和观察众多商店后所积累的经验——不是要告诉你哪种类型最好，而是帮你自己看清哪一种最合适。
- 选择菜单要从店铺场景出发，而不是只看喜好。
- 移动端和桌面端通常需要不同的导航模式。
- 最好的菜单会解决一个明确的购物路径瓶颈。
为什么菜单比你想象的更重要
菜单是顾客在看商品之前最先接触到的东西。如果他们找不到路，就不会购买。这听起来理所当然，但它直接关系到一个鲜有人留意的数字。
根据 Baymard Institute 的数据，电商行业的平均购物车放弃率在 70% 左右，这个数字来自数十项研究，多年来一直稳定在这一水平。菜单当然不是唯一原因，但有些顾客离开，仅仅是因为他们没能足够快地找到所需的东西。好的导航不会创造收入，但糟糕的导航会一点一点把它漏掉。
还有一点：如今大多数商店流量都来自手机。顾客在小屏幕上使用菜单的方式，与在电脑上截然不同，所以一个在桌面端好用的菜单，在移动端未必同样好用。正因如此，像 Navi+ 这样的工具才允许你分别配置移动端和桌面端的菜单，而不是强行让同一个菜单同时服务两边。
决定你需要哪种菜单类型的四个因素
在逐一了解各类菜单之前，先回答关于你自己商店的四个问题。这四个因素几乎决定了一切。
- 商品和品类的数量。 一家有二十款商品的商店和一家有两千款商品的商店，需要的结构完全不同。品类越多，你越需要一种方式，让顾客既能看到商店的纵深，又不会感到不知所措。
- 移动端与桌面端的占比。 打开 Google Analytics 实际看一看。如果大多数顾客都在用手机，那么移动端菜单就是主菜单，桌面端是次要的。
- 顾客如何购物。 他们是清楚自己想要什么、直奔目标，还是过来随便逛逛、四处探索？目的明确的买家需要捷径；闲逛的人需要引导提示。
- 商店最重要的那个动作。 每家商店都有一件最希望顾客去做的事——发起聊天、打开购物车，或跳转到某个促销页面。这个动作应当始终触手可及。
第二个因素值得多说几句。Steven Hoober 对超过 1,300 名用户的研究发现，大多数人用拇指操作手机，而拇指最舒适触及的区域是屏幕的下半部分。这就是为什么放在底部的按钮或导航栏，通常比塞在顶部角落里的东西更容易被点到。
每种菜单类型都在解决一个问题
每种菜单类型的诞生都是为了解决某个特定的问题。理解了那个问题，你就知道何时该用它。
Mega Menu 是桌面端那个宽幅的下拉菜单，能一次铺开许多品类，通常还配有图片。它适合品类繁多、需要展现自身纵深的商店。但对于商品很少的商店来说，mega menu 只会显得空荡而徒增复杂。
Tab Bar 是固定在移动端屏幕底部的导航栏，通常包含三到五个项目，比如首页、品类、搜索、购物车和账户。它正好位于拇指最容易触及的位置，而且始终可见，顾客永远不必去找它。这是最可靠的移动端布局之一。
Slide Menu（汉堡菜单）把整个菜单藏在一个三横线图标后面，点开后会滑出一个面板。好处是它整洁，能容纳很多项目。坏处是它把一切都藏了起来。Nielsen Norman Group 已经证明，隐藏导航会明显降低顾客发现它的频率——他们用得更少，而且即便用，也用得更晚。Slide menu 本身没错，但别让你最重要的项目藏在里面。
FAB（Floating Action Button，悬浮操作按钮）是那个悬浮着的圆形按钮，通常位于底部角落，用于单一动作——拨打电话、发起聊天、打开促销。当商店恰好只有一件最想让顾客去做的事时，它非常有力。不过，把几个悬浮按钮堆在一起，它们就会遮住内容。
| 菜单类型 | 适合的情况 | 需要警惕的情况 |
|---|---|---|
| Mega Menu | 品类繁多，以桌面端为主 | 商店商品很少 |
| Tab Bar | 移动端流量高 | 试图塞进超过五个项目 |
| Slide Menu | 次要项目较多，想保持整洁 | 把重要项目藏了起来 |
| FAB | 有一个明确的优先动作 | 同时放置多个悬浮按钮 |
深入了解阅读完整指南 → 逐一剖析各类菜单：何时该用，何时不该用
针对不同类型商店组合菜单
实际操作中，一家商店很少只用一种菜单类型。价值在于把它们组合起来——而组合得好不好，取决于你的商店属于哪一类。
一家品类繁多的时尚商店，往往在桌面端用 Mega Menu 来铺开各个产品线，在移动端用 Tab Bar，好让顾客随时能触及品类和购物车。两个不同的菜单服务于两种不同的场景，但底层是同一套品类逻辑。
只有一款或少数几款商品的商店则恰好相反。Mega menu 是杀鸡用牛刀。一条精简的桌面端菜单栏，再加上移动端的一个聊天 FAB，通常就够了——因为对这类商店来说，最重要的是回答问题、促成成交，而不是在层层品类中穿行。
一家中等规模的商店，几十到几百款商品，通常落在两者之间：一个适中的桌面端菜单、一个移动端 Tab Bar，有时再加一个 Slide Menu 来放置政策、博客、联系方式等次要项目。总的原则是：把顾客经常需要的东西保持可见，把他们偶尔才需要的东西藏起来。
让这种组合无需改动代码就能实现的关键，在于你可以为每块屏幕独立配置各自的菜单。用 Navi+，你可以在同一个地方为移动端搭一个 Tab Bar、为桌面端搭一个 Mega Menu，全程拖放，无需改主题。
选对菜单的流程
与其凭感觉来选，不如遵循一套简单的顺序，带你从数据走向决策。
- 先看数字。 打开 Analytics，记下你的移动端/桌面端占比，以及顾客访问最多的页面。这是你的基础，而不是凭空猜测。
- 列出顾客需要经常触及的东西。 通常只有三到五项。这些就是 Tab Bar 或主菜单的候选项。
- 把次要项目单独分出来。 政策、博客、关于我们——这些可以放进 Slide Menu 或页脚，不必占用宝贵的空间。
- 挑一个优先动作。 如果有一件你明确想让顾客去做的事，可以考虑用 FAB。
- 先试，再测。 把菜单放上去，观察一两周，看看顾客是否点击了你所预期的位置。
最后一步很重要却常被跳过：速度。加一个会拖慢页面的菜单，弊大于利。Google 建议遵循 Core Web Vitals 的阈值：LCP 低于 2.5 秒，INP 低于 200 毫秒，CLS 低于 0.1。一个沉重的菜单让页面卡顿、加载时布局还在跳动，就足以把你挤出”良好”区间。在选择菜单搭建工具时，要留意它是否针对”不拖慢页面”做过优化——这正是 Navi+ 专注于让菜单保持轻量、并赢得 Built for Shopify 徽章的原因。
从哪里开始
从这里开始先检查移动端占比，再列出顾客最常需要到达的三条路径。
如果你不确定该从何下手，那就先做最小的一件事：打开 Analytics 查看你的移动端占比，然后写下顾客最需要触及的三样东西。仅凭这两条信息，就能排除掉大多数错误的选择。剩下的就是不断尝试和调整。
别想着一开始就做到完美。菜单是应当随着顾客对商店的实际使用方式逐步打磨的东西——而不是随着你想象中他们会怎么用。
归根结底，好的菜单是顾客从不会去想它的菜单。只有当它挡了路，他们才会注意到它。所以目标不是一个看起来漂亮的菜单，而是一个顾客无需思考就能使用的菜单——他们找到自己要找的东西，然后继续向前，从未意识到是菜单刚刚帮了他们一把。
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。