Shopify 扁平 vs 深度导航：你的商店需要几级菜单

Shopify 店主经常面临一个架构上的两难：商店应该采用宽而扁平的菜单，一次性展示所有系列，还是采用深层级结构，引导买家逐层深入？

这两种极端在实践中都不理想。把几十个系列塞进主页眉会让访客不知所措，而把商品埋在多层嵌套子菜单之下又会让商品更难找到。更好的做法是在 Shopify 的三级限制之内搭建均衡的金字塔结构，并以点击深度而不是菜单行数来衡量。

快速解答

扁平导航让大多数页面距离首页只有几次点击；深层导航则堆叠更多层级。两者都没有绝对优势：深层结构更难使用，而过于扁平的菜单又会让买家应接不暇。对大多数 Shopify 商店来说，目标是在 Shopify 三级菜单限制内搭建金字塔结构。要衡量的是点击深度，而不是菜单层级。

Shopify 扁平 vs 深度导航的实际含义

扁平导航使用宽泛的分类和较浅的分支，访客只需几步就能到达大多数页面。深层导航使用更高的结构，起始分组更窄，再向下分出嵌套的子层级。有一种机构惯例常把扁平导航描述为层数很少，通常是 1 到 3 层（Fresh Consulting）。在 Shopify 上应用这一点，需要把菜单配置与买家实际的浏览路径区分开。

点击深度不等于菜单层级

店主常常把菜单层级与点击深度混为一谈。菜单层级描述的是链接列表（linklist）在主题设置中的嵌套方式。点击深度衡量的则是从首页到目标页面实际需要的点击或轻触次数。

例如，一家服装店可能设置了两级菜单，“Women”下拉出“Dresses”。如果买家点击“Women”，查看一个中间的系列页面，再点击“Summer Dresses”，最后选择一件商品，那么点击深度已经是好几次点击了。反过来，桌面端的超级菜单可以在有条理的各列中展示三层内容，让买家从首页一次点击就能到达某个具体的子系列。点击深度衡量的是顾客的操作阻力；菜单层级描述的是主题结构。

Shopify 的三级菜单限制

在 Shopify 后台的“内容 > 菜单”中，下拉菜单有平台设定的上限。顶级菜单项最多可以有两层嵌套的下拉菜单（Shopify Help），也就是在 Liquid 的 linklist 对象中最多 3 级（Shopify Dev Docs）。

大多数主题最多支持两层嵌套的下拉菜单（Shopify Help），但具体的视觉实现各不相同。请检查主题设置，确认多级菜单在桌面端和移动端屏幕上是如何呈现的。

为什么过深的菜单会流失顾客与爬虫

把导航拉伸到过多的纵向层级，会给买家和搜索机器人都带来阻力。当买家要连续点击好几层子菜单才能看到商品时，思考负担成倍增加。Nielsen Norman Group 的可用性研究证实，“在其他条件相同的情况下，深层级结构更难使用”（NN/g）。每多一层下拉，顾客就要多做一次选择，也就多一次走错路的机会。

对搜索引擎来说，嵌套很深的结构会让抓取更困难。Google 的 John Mueller 指出，“如果你把结构做得太深，我们抓取起来就更困难”（Search Engine Journal）。

Google Search Central 的指南指出，你关心的每个页面都应该至少有来自网站上另一个页面的链接，并且要使用带有有效 href 属性、可抓取的 HTML <a> 标签。店主必须确保 Google 能够正确抓取你的菜单。此外，层级更深的网站需要面包屑导航，它会为从首页到当前页面的每一层显示一个链接，帮助买家保持方位感（NN/g）。

过度扁平化的结构性风险

意识到深层菜单的缺点后，一些商家走向了另一个极端：把整个商品目录压平成单一层级。他们把几十个系列链接直接放在首页上，或在顶部页眉横向排开一长串分类链接。

然而，去掉结构上的深度会带来严重的用户体验缺陷。正如 NN/g 所警告的，“用户也可能被冗长、杂乱的菜单弄得不知所措”（NN/g）。当网店展示一长排无序的分类链接时，买家可能很难找到具体的品类。

过度扁平化电商商品目录也会损害自然搜索。John Mueller 提醒说，“如果结构非常扁平，那么我们会认为，哦，这些页面都同样重要”（Search Engine Journal）。搜索引擎依靠内部链接来理解主题层级。当商店在主页眉中以同样醒目的方式直接链接到每一个子系列时，就更难表明哪些系列是主要业务、哪些是次要的。

在 Search Engine Journal 那篇文章中，一位站长就一个拥有超过 1,000 个链接的超级菜单的网站向 Mueller 提问（Search Engine Journal）。文章没有报道该网站后来怎么样了，所以只应把它当作商家会提出的问题的一个例子。一个对所有系列一视同仁地罗列的菜单，无法让人看出哪些页面属于一组，而把所有系列简单地塞进主菜单，并不是健康的扁平架构。

图 1：Concept illustration，展示过度扁平的菜单与金字塔结构的对比。

金字塔结构：绝大多数商店的黄金平衡

与其在两种失灵的极端之间二选一，店主更应该建立一个有条理的中间地带。John Mueller 明确推荐过这种做法：“我会尽量朝金字塔结构的方向去做”（Search Engine Journal）。金字塔结构能更有效地帮助搜索引擎理解网站内各个页面的上下文（Search Engine Journal）。

在电商的金字塔层级中，首页位于顶端。首页之下是一排简洁清晰的分类，代表主要的商品部门（例如“Men”“Women”或“Living Room”）。每个主分类再向下分出重点明确的子分类（例如“Outerwear”“Footwear”或“Lighting”），最终通向单个商品页面。

这种视觉对比凸显了核心的取舍：

• 过于扁平的架构会产生冗长、杂乱的菜单，其中所有条目看起来同等重要，让顾客应接不暇，并掩盖了语义层级。
• 均衡的金字塔结构把商品归入清晰的分类，在尽量减少不必要的点击深度的同时，为买家和搜索爬虫提供直观、合乎逻辑的过渡台阶。

正如 Nielsen Norman Group 所总结的，并不存在唯一正确的答案（NN/g），两种极端都有代价。Mailchimp 的架构指南同样指出，对大多数网站来说，更扁平的架构通常效果更好（Mailchimp DE）。目标是找到一种比迷宫般的目录更扁平、又不会塌缩成毫无结构的商品目录的结构。

按商品目录规模选择适合的层级深度

你的商店理想的导航深度取决于商品目录的规模和复杂程度。由于每种商品组合对分类体系的要求都不同，商家应把下面的建议视为经验法则，而不是固定的阈值。

• 小型目录（几十件商品）： 1 级或 2 级结构通常就足够了。经营手工配饰或单一服装系列的精品店，可以直接在主页眉中展示主要产品线，无需嵌套子菜单。买家可以快速浏览现有商品，点击深度也保持在较低水平。
• 中型目录（几百件商品）： 2 级层级往往效果不错。顶级分类划分主要的商品板块，二级链接指向精心策划的子系列，在不让买家迷失方向的前提下提供清晰的主题筛选。
• 大型目录（数千件商品）： 库存扩大后，需要充分利用 Shopify 的 3 级菜单限制，并结合页面上的系列筛选器和专门的分类落地页。规模扩大时，详细的架构规划至关重要；可参阅我们的深度指南：如何组织 1,000 件以上商品的目录，以及随着商品目录增长，导航会如何变化，获取结构化的分类体系框架。

移动端的深度导航：抽屉菜单、底部标签栏与折叠层级

在屏幕空间有限的移动端，保持直观的层级尤为重要。在智能手机上，多级导航通常依靠使用手风琴式展开开关或逐级深入面板的侧滑抽屉菜单（有关模式的详细拆解，可参阅我们对 Shopify 多级菜单模式和移动端抽屉菜单设计的评测）。

移动端逐级深入菜单中的一个关键可用性难题，是如何让买家把某个父分类作为一个整体来浏览。当买家点击“Men’s Apparel”并进入“Shirts”和“Jackets”等子分类时，他们常常希望一次性查看所有男装。Baymard Institute 的电商可用性基准研究显示，只有 24% 的网站做得好（Baymard），做法是在每个嵌套菜单层级的顶部提供一个独立的“View All”链接。

面对移动端空间的限制，一些商店试图通过彻底去掉下级子分类来简化移动端页眉。Baymard 对这种折中做法提出警告，强调在移动端去掉下级层级是移动端用户体验的一种糟糕实现（Baymard）。去掉子分类会剥夺智能手机买家精细的导航路径，迫使他们在让人眼花缭乱的系列网格中翻找。此外，Shopify Help 文档指出，某些主题可能需要调整 CSS 来改善移动端可用性（Shopify Help）。

要在不压平分类树的前提下降低移动端的点击深度，底部标签栏可以充当快捷入口。一个常驻的标签栏能让买家一键进入某个主要系列或某个嵌套很深的系列，而它下面的分类树保持不变。

图 2：Concept illustration，展示带有 View All 项的抽屉逐级深入菜单与标签栏快捷入口。

利用超级菜单缩短路径且不显杂乱

对桌面端买家来说，设计良好的超级菜单是降低点击深度、同时保持清晰层级组织的实用方式。超级菜单不会强迫用户一层一层地穿过嵌套的弹出菜单，而是在一个宽阔的二维面板中同时展示二级和三级链接。

超级菜单的效果在于结构化的视觉分组。它不是呈现一份未经整理、可能让访客应接不暇的链接清单（NN/g），也不是像 Search Engine Journal 那个问题中那样拥有超过 1,000 个链接的超级菜单（Search Engine Journal）；整洁的超级菜单会把链接组织成均衡的列，列上方是各自独立、不可点击或可点击的分类标题。这让买家在一次交互中就能浏览整个部门的全貌，同时保持合乎逻辑的金字塔结构。

在移动端，同样的内容通常需要以逐级深入的抽屉菜单或可折叠的手风琴形式呈现，而不是宽大的面板。关于布局和分列分组的思路，可参阅我们的 超级菜单最佳实践 指南。

如何衡量点击深度并安全测试调整

更改商店的导航结构，会改变买家和搜索爬虫找到你页面的方式。为了在不干扰现有表现的前提下安全地优化层级，请遵循下面这套结构化的五步评估框架：

1. 审查你的畅销商品： 在 Shopify 分析中找出销量最高的 10 件商品。以首次访客的身份从首页导航到每件商品，数出所需的确切点击或轻触次数。如果你的畅销品离首页有很多次点击，可以考虑添加直达子系列的链接或快捷入口。
2. 验证可抓取的 HTML 链接： 确保每个重要页面至少有来自网站上另一个页面的链接（Google Search Central）。确认导航链接渲染为带有有效 href 目标的可抓取 HTML <a> 标签（Google Search Central），而不是搜索引擎可能无法追踪的 JavaScript 点击事件。
3. 进行轻量的树状测试： 在大改线上主题之前，先和一小群同事或顾客做一次简短的树状测试。可用性研究表明，树状测试让用户尝试在拟议的层级中查找信息，从而帮助验证网站结构（NN/g）。
4. 先在单个系列上试点： 不要一夜之间重构整个商品目录，而是先调整一个主要系列部门。保持现有的系列 handle 和商品 URL 不变——更新导航链接并不会改变规范页面 URL。在更新推广到整个商店之前，用数周时间在 Google Search Console 中观察展示次数、点击率和索引覆盖情况，以评估影响。
5. 把“三次点击规则”当作非正式的参考： 请记住，被广泛引用的“三次点击规则”只是一条实用的经验法则，并不是严格的搜索排名标准，也不是科学的可用性定律。Google 的 John Mueller 指出，搜索引擎看重的是合理的点击次数（Search Engine Journal），关注的是逻辑上的连通性，而不是死板的点击上限。

权衡取舍：何时深度菜单是更正确的选择

尽管更扁平的导航结构对大多数直面消费者的商店有利，但在一些明确的零售场景中，更深的层级才是更优、更实用的解决方案。

处理高度专业或分类繁多的库存的商店，例如按品牌、车型、年份和发动机类型组织的汽车替换零件，可能需要更深的层级路径。试图把复杂的商品目录硬塞进扁平的 1 级或 2 级菜单，只会产生难以驾驭的列表，让寻找特定兼容性的买家感到沮丧。

当有清晰的面包屑导航支持时，更深的导航架构就能成功，面包屑会显示从首页到当前页面每一层的链接（NN/g）。反过来，对高度专业的商品目录强行压平，会剥离关键的语义关系，削弱搜索引擎所依赖的上下文理解（Search Engine Journal）。

由于 Shopify 在 Liquid linklist 中强制设定了 3 级的硬性上限（Shopify Dev Docs），管理复杂产品线的商家应借助分面系列筛选器和子系列网格卡片来处理更深的层级。归根结底，正如 NN/g 的研究所确认的，并不存在适用于所有网站的唯一正确答案（NN/g），最优的层级必须反映你的受众的具体搜索习惯。

Navi+ 的价值与定位

如果你当前的 Shopify 主题限制了你搭建清晰的金字塔导航结构，Navi+ 可以让你在其之上构建独立的导航组件。Navi+ 菜单限制为三级，与 Shopify 菜单的上限相同。

Navi+ 专注于实用的店面导航组件：

• Mobile Menu： 最多三级的移动端抽屉菜单。你可以像添加其他菜单项一样，在每一级的顶部添加一个“View All”项。
• Tab Bar： 底部栏，为你最重要或层级最深的系列提供一键快捷入口，在不改变分类树的前提下降低点击深度。
• Desktop & Mobile Mega Menu： 多列面板，把链接归入各个标题之下，而不是一长串列表。Mobile Menu 可以嵌入 Desktop Mega Menu 的树结构，让桌面端和移动端共用同一套结构。
• Icon Menu： 基于图片的磁贴，可作为进入主要分类的视觉入口。

如果你的主题菜单无法呈现你规划的结构，Navi+ 让你在其之上构建 Mobile Menu、Tab Bar 或 Mega Menu，且保持在同样的三级之内——不妨先在一个系列上试一试。

商店行动清单

• 测量从首页到你 10 件畅销商品的点击深度。
• 检查当前主题设置，确认它支持多少层嵌套菜单（大多数最多支持 2 层嵌套）。
• 把顶部导航整理成均衡的金字塔层级，并设置清晰的父级分类。
• 确保移动端抽屉菜单在每个嵌套层级的顶部都有一个可见的“View All”链接。
• 为嵌套很深的系列设置直达快捷入口（例如固定的底部标签栏或面包屑导航）。
• 先在单个系列上测试结构调整，并保持现有 URL 不变。
• 持续数周监测 Search Console 的展示次数和索引情况，观察效果。

常见问题（FAQ）

Shopify 菜单应该有几级？

Shopify 菜单在 Liquid linklist 中最多允许 3 级，大多数主题在顶级菜单项之下最多支持两层嵌套下拉菜单。大多数商店保持在这一 3 级结构之内就能做得很好。

每件商品都应该在三次点击之内吗？

三次点击只是一条经验法则，并不是经过证实的定律。Google 只要求合理的点击次数，并且要求每个重要页面都至少有来自网站上另一个页面的链接。

扁平的网站结构对 SEO 更好吗？

不一定。John Mueller 指出，非常扁平的网站会让每个页面在搜索引擎看来同样重要，并建议朝均衡的金字塔结构去做。

庞大的超级菜单会损害 SEO 吗？

如果实施不当，它可能会模糊层级。Search Engine Journal 上讨论的案例涉及一个拥有超过 1,000 个链接的超级菜单；把链接按逻辑分列、并让菜单只包含真实的分类路径，有助于保持层级清晰。

深层菜单在移动端应该如何运作？

使用逐级深入的抽屉菜单或手风琴来保留必要的分类层级，但要在每一级添加一个可见的“View All”项。Baymard 的可用性研究表明，在移动端去掉下级层级是一种糟糕的用户体验实现。

参考来源

• Nielsen Norman Group (Kathryn Whitenton, 2013)：Flat vs. Deep Website Hierarchies
• Search Engine Journal (Roger Montti，引用 John Mueller，2021)：John Mueller Recommends Pyramid Site Structure
• Shopify Help Center：Drop-down menus in Shopify
• Shopify Developer Documentation：Liquid linklist object
• Google Search Central：Creating crawlable links
• Baymard Institute：Mobile navigation ‘View All’ usability research
• Fresh Consulting：UI/UX Principle #23: Flatter Navigation is Better Than Deeper Navigation
• Mailchimp (DE)：Website-Architektur optimieren