读完关于各类菜单的文章后，很多人仍然卡在最后一步：那我的店铺到底该用哪种？这种感觉很正常。关于 Tab Bar、Mega Menu 或 Slide Menu 的理论，只有套用到你自己的数据上才真正有用。
本文给出一套包含 5 个步骤的菜单选型流程，大约一个下午就能走完。没有哪个公式能套用所有店铺，但有一种工作方式可以帮你依据真实数据、而非凭感觉来决策。我是在经营了几家小店、并且猜错过几次之后，才摸索出这套做法的。
第一步：看清你自己店铺的移动端与桌面端占比
不要轻信”大家都说移动端占多数”这类说法。打开你自己的数据看一看。
进入 Google Analytics（Tech / Device 类别）或 Shopify Analytics（Online store sessions by device type）。拉取最近 30–90 天的数据，确保样本足够大。你会看到来自手机和电脑的会话各占多少比例。
这个数字决定了你优先为哪块屏幕做设计。如果 80% 的访客都用手机进入，那手机体验就是主舞台，桌面端是次要的。如果你做的是 B2B、大多数客户在办公室用电脑，情况就反过来了。
同时也要看按设备拆分的转化率，而不只是流量。根据 Baymard Institute 的数据，移动端的购物车放弃率约为 80%，高于桌面端（约 66%）。如果你的店铺移动端访客很多、但移动端转化率偏低，那难用的导航可能就是原因之一。
第二步：清点你的一级与二级分类
打开 Shopify 中的 Navigation 部分，认真数一遍。
- 一级分类：最大的几个分组。以一家服装店为例：”女装”“男装”“配饰”“特卖”。
- 二级分类：每个一级分类下面的分支。”女装”下面可能包含”上衣”“下装”“连衣裙”“鞋履”。
这个数字能帮你缩小选择范围。一家只有 3–4 个一级分类、几乎没有二级分类的店铺不需要 Mega Menu——Mega Menu 的存在就是为了承载多层级结构。反过来，一家有 8 个一级分类、每个下面又有 5–6 个分支的店铺，如果把所有内容都塞进一个 Slide Menu，会让顾客滑到手酸。
我常用的一条粗略规则：结构越扁平、越精简，就越应该倾向于常驻可见的菜单（比如底部的 Tab Bar）；结构越深、分支越多，就越需要能分组和展开的菜单（桌面端用 Mega Menu，移动端用 Slide Menu）。
第三步：找出顾客最需要到达的 3–5 个页面
这一步最常被跳过，却很重要。
回到 Google Analytics 或 Shopify Analytics，打开浏览量最高的页面报告（Top pages / Landing pages）。写下顾客真正需要到达的 3–5 个目的地。它们通常包括：首页、几个关键的商品集合、搜索页、购物车，有时还有订单追踪页或联系页。
为什么只要 3–5 个？因为这才是你能放在最易点击位置的”快捷入口”的合理数量。移动端屏幕底部的 Tab Bar 通常只能放下 4–5 个项目，再多就会显得拥挤。如果你准确找出了最重要的 4 个目的地，就明确知道该把什么放进 Tab Bar。
这一步要诚实。你希望顾客看到的（比如品牌故事页），未必是他们购买时需要的。跟着行为数据走，而不是跟着愿望走。
第四步：基于四个因素来确定你的菜单配置
现在把前面三步与早前文章中讨论过的四个因素结合起来：主导设备、分类深度、重要目的地的数量，以及你所在商品品类的特性。对照那些文章里的对比表来交叉验证。下面是几种常见的组合。
| 你的情况 | 建议配置 |
|---|---|
| 访客以移动端为主，结构扁平，有 4 个明确目的地 | 底部 Tab Bar + Slide Menu 承载其余内容 |
| 分类多、分支多，桌面端流量可观 | 桌面端 Mega Menu + 移动端 Slide Menu |
| 需要一个突出的操作（聊天、预约、电话） | 用 FAB 承载该操作，并搭配主菜单 |
| 图片为主、文字很少的目录（化妆品、食品） | 视觉网格菜单（Visual Grid Menu） |
关于人们如何握手机有一点要说。根据 Steven Hoober 的研究，约有一半的用户单手握持手机，大部分操作靠拇指完成。拇指轻松够到的区域在屏幕的下半部分。这就是为什么底部的 Tab Bar 通常比顶角的汉堡图标更容易点击——顶角恰好落在”够不太到”的区域。
这也是该思考隐藏式导航的时候。Nielsen Norman Group 通过测量发现，常驻可见的菜单被发现和使用的次数，大约是藏在汉堡图标后面的菜单的 1.5 倍。这并不意味着汉堡菜单是错的——它在承载次要项目方面仍然有用——而是说：不要把你最重要的目的地藏在它后面。
第五步：安装 Navi+，搭建原型，并在真实设备上查看
到这里你已经有了一个假设。剩下的任务就是把它搭建出来，亲眼看一看。
Navi+ 让你无需写代码就能搭建 Tab Bar、Mega Menu、Slide Menu、FAB 和网格菜单——只需拖放即可——并且可以分别为移动端和桌面端做配置。你按照第四步选定的方案精确搭建，每种设备一套样式，然后开启预览模式。由于菜单是独立于主题创建的，即使你之后更换主题，它也能保持完好。
我想强调的一点是：要在真实手机上查看，而不只是在模拟器里看。
浏览器里的模拟器能给你正确的屏幕尺寸，但它无法还原真实手指点击按钮的体验——按钮是不是太小，或者 Tab Bar 会不会被键盘、被手机的导航栏遮住。有些问题只有当你拿起手机、像真实顾客那样去尝试下单时才会暴露出来。
预览时也要关注速度。Google 为 Core Web Vitals 设定的”良好”阈值是：LCP 低于 2.5 秒，INP 低于 200 毫秒，CLS 低于 0.1。一个过重的菜单会让页面卡顿或发生布局偏移。Navi+ 已经做过优化，以限制它对这些指标的影响，但你仍然应该在自己的店铺上验证一遍。
最后，不要害怕调整。你在第四步选定的配置只是一个起点，而不是定论。增加或移除一个导航工具并不是什么大事。先搭一个原型，过几周看看数据，再做调整。这套流程正是这样才真正见效的。
简而言之，好的菜单选型流程不是从你喜欢哪种菜单类型开始，而是从数字开始：你的移动端与桌面端占比、分类深度，以及顾客真正需要的目的地。这四个因素再加上一个真实设备上的原型，会给你一个比任何通用建议都更贴近你店铺的答案。
本文是更大篇幅指南 如何为你的 Shopify 商店选择合适的菜单类型 的一部分。