新店铺从第一天起需要的 5 个必要菜单元素

当你遗漏五个必要菜单元素之一时，会发生什么呢？一个客户从 Instagram 跳转到你的产品页面，决定购买，寻找购物车图标，没找到，假设你的店铺出了问题，然后离开了。

这不是假设。我看过会话记录，用户在折叠的移动菜单中疯狂滚动寻找购物车。他们在 8 秒后放弃了。

新店铺老板常常过度思考导航——添加自定义页面、促销横幅和聪明的分类名称——同时忽略了基础知识。这份指南涵盖了从店铺上线那一刻起必须可见和易于访问的五个菜单元素，在你考虑其他任何事情之前。

元素 1：主页（你的导航锚点）

主页链接是客户的逃生舱口。无论他们在哪里登陆——产品页面、博客文章、分类页面——他们都需要一条清晰的路径回到起点。

为什么重要

根据 Baymard Institute 关于导航可用性的研究，43% 的用户期望标志链接到主页，另外 12% 特别寻找菜单中的”主页”链接。如果两者都不存在，他们会感到困惑。

这样想：在实体店中，客户总是可以走回入口。在线上，主页链接就起到这个作用。没有它，想要重新开始或探索不同分类的客户就没有明显的方式来重置。

放置位置

桌面端：

• 左上角的标志应该始终链接到主页（这是一个根深蒂固的网络惯例，用户甚至不会考虑）
• 可选：在主导航菜单中包含”主页”作为第一项，特别是如果你的标志很小或抽象

移动端：

• 顶部的标志仍然链接到主页
• 如果使用底部标签栏，包含一个专用的主页图标（通常是房屋符号）作为第一个或中心标签
• 在汉堡菜单式的滑出菜单中，”主页”应该是列表中的第一项

常见错误

不要让你的标志不可点击。某些主题或自定义设计会出于美观原因禁用标志链接——这违反了用户期望，令访客感到沮丧。

另外，避免歧义：如果你的标志是字母缩写或抽象符号，用户可能不会将其识别为导航元素。添加可见的”主页”标签可以消除困惑。

元素 2：分类（你的目录结构）

分类（也称为类别或商店）是客户浏览你的产品的方式。组织得当与否直接影响用户体验。

为什么重要

Nielsen Norman Group 的可用性研究发现，50% 的用户倾向于浏览分类，即使他们知道自己想要什么。他们在探索、比较和发现选项。

对于拥有 10-100 件产品的新店铺，清晰的分类可以减少决策疲劳。不是呈现”所有产品”（令人眼花缭乱），你可以引导客户进入与其意图相匹配的子集：男士 T 恤、50 美元以下的礼物、新到货。

放置位置

桌面端：

• 页头下方的主水平菜单栏中直接或整合
• 如果有子分类，使用下拉菜单（例如”服装”展开显示”上衣”、”下衣”、”外套”）
• 对于拥有 30 多件产品的店铺，考虑使用显示多列布局子分类的大菜单

移动端：

• 汉堡菜单仍然是最常见的模式，但确保图标有标签（三行图标旁边的”菜单”文本将可发现性提高 20%）
• 底部标签栏适用于拥有 4-6 个主要分类的店铺——为每个顶级分类专门分配一个标签
• 避免将所有分类隐藏在无标签图标后面；至少明显显示 1-2 个关键分类

如何组织分类

使用客户语言，而不是内部术语。如果你销售咖啡，按烘焙类型（”浅烘”、”深烘”）或产地（”埃塞俄比亚”、”哥伦比亚”）组织，而不是 SKU 代码或供应商名称。

将顶级分类限制在 5-9 个项目（认知的最佳点）。太少了，客户必须挖掘多层菜单；太多了，他们会经历选择瘫痪。

通过让不熟悉你产品的人找到特定物品来测试你的结构。如果他们犹豫或猜错了，你的标签需要更清晰。

店铺类型	良好的分类结构	不好的分类结构
服装	女性、男性、儿童、配饰、特价	产品、服装、其他、新品、全部商品
家居用品	客厅、卧室、厨房、户外	类别 A、类别 B、畅销品、杂项
美妆	护肤、化妆、护发、工具、套装	所有商品、热门、精选、店铺

元素 3：搜索（即使对于小目录）

许多新店铺老板认为搜索只适用于大型目录。错了。即使只有 20 件产品，客户也会使用搜索——而且当他们这样做时，转化率要高得多。

为什么重要

Baymard Institute 的 2024 年电商研究发现，30% 的访客使用网站搜索，这些搜索者的转化率是非搜索者的 2-3 倍。为什么？因为他们已经知道自己想要什么。你的工作是帮助他们快速找到。

搜索也能揭示客户在寻找什么。如果”纯素蛋白粉”每月获得 40 次搜索，但你只销售乳清蛋白，你就找到了产品线的一个空白。

放置位置

桌面端：

• 页头右上角（通用惯例）
• 始终可见——不要将其隐藏在图标后面，除非屏幕空间极其有限
• 使用带放大镜图标的搜索输入字段，而不仅仅是图标（该字段表示”你可以在这里输入”）

移动端：

• 页头中的放大镜图标是可以接受的；点击它应该打开全宽搜索覆盖层或展开输入字段
• 或者，在底部标签栏中为搜索分配一个标签（应用风格界面中常见）
• 在汉堡菜单中显著放置搜索——理想情况下是”主页”之后的第二项

搜索功能基础

Shopify 的默认搜索处理精确匹配效果很好，但在拼写错误、同义词和部分查询方面遇到困难。例如，搜索”tshirt”可能不会返回标记为”t-shirt”的产品。

对于新店铺，默认值足以开始。但一旦你达到 50 多件产品或在你的分析中注意到高零结果搜索率，考虑升级到搜索应用，如 Searchanise、Boost Product Filter 或 Instant Search+。这些添加了自动完成、容错和过滤器（价格、颜色、尺寸）。

跟踪搜索查询每月查看你的搜索分析。高容量查询告诉你客户想要什么。零结果查询告诉你你缺少什么。两种见解都是库存规划的金矿。

元素 4：购物车（你的收入引擎）

购物车图标是结账的入口。如果客户找不到它，你就会丧失销售。就这么简单。

为什么重要

Baymard Institute 进行的一项研究发现，18% 的购物车被放弃是因为用户无法轻松访问他们的购物车。在移动端，购物车图标可能被埋在汉堡菜单中或隐藏在折叠的页头后面，这个问题会加倍。

Shopify 的 2025 年商务数据显示，80% 的移动购物涉及客户在浏览的前 30 秒内点击购物车图标。这是一个参考点——客户检查他们添加的内容、比较总数并决定是否继续购物或结账。

放置位置

桌面端：

• 页头右上角，靠近或在搜索栏附近
• 始终可见，永远不要隐藏
• 显示一个带有购物车中项目数的徽章（例如，一个小圆圈，上面覆盖”3”）——这提供即时反馈并鼓励客户查看他们的购物车

移动端：

• 右上角仍然是标准位置
• 如果使用底部标签栏，为购物车分配一个标签（通常是最右边的位置）
• 使用一个粘性购物车图标，在用户滚动时保持可见——不要让其消失

购物车图标设计

使用通用认可的符号：购物袋或购物车。不要用需要用户解释的抽象图标。

显示项目数的徽章至关重要。没有它，客户不知道他们的”加入购物车”点击是否已注册。有了它，他们就能获得即时的视觉确认，这降低了焦虑感和购物车被放弃。

元素 5：账户（登录和档案访问）

账户访问在新店铺上常被忽视，但它对于回头客和建立忠诚度至关重要。

为什么重要

首次访客可能不需要立即访问账户，但回头客需要。他们想检查订单历史、更新收货地址、管理订阅或访问已保存的商品。

将账户登录隐藏在多次点击后表明你不重视他们的回头业务。它还为忠诚度计划、愿望单和个性化体验造成了摩擦。

放置位置

桌面端：

• 右上角，通常靠近购物车图标
• 使用人形图标或”账户”/”登录”文本链接
• 登录后，显示客户的名字或首字母（增建熟悉感和信任）

移动端：

• 购物车旁边的右上角，或
• 在汉堡菜单中包含”账户”作为一项（靠近顶部）
• 如果使用底部标签栏，账户可以占据 5 个标签槽中的一个，尽管购物车和搜索通常具有优先级

访客结账考虑

不是每个客户都想在购买前创建账户。确保你的结账支持访客结账（在 Shopify 中默认启用）。账户链接适用于那些确实想登录的客户——不要对首次购买者强制执行。

放置策略：桌面端与移动端

五个元素在各个设备上保持不变，但它们的布局必须适应屏幕大小和交互模式。

桌面端布局

标准桌面页头结构（从左到右）：

• 标志（链接到主页）
• 主导航菜单（分类）
• 搜索栏
• 账户图标
• 购物车图标

这种布局利用了眼动的 F 模式——用户从左到右扫描顶部，所以关键元素位于该顶部条带中。

移动端布局

移动端需要优先级划分。你无法在狭窄的页头中舒适地容纳五个元素而不造成混乱。

选项 A：页头 + 汉堡菜单

• 页头：标志（主页）、汉堡菜单图标、购物车图标
• 汉堡菜单包含：分类、搜索、账户

选项 B：页头 + 标签栏

• 页头：标志（主页）、购物车图标
• 底部标签栏：主页、分类、搜索、账户、购物车

标签栏特别适合拥有 4-6 个主要分类的店铺，因为它们使导航可见且可拇指访问，而无需额外点击。

布局	优势	劣势	最适合
页头 + 汉堡菜单	熟悉、节省空间	在点击后隐藏分类	拥有多个子分类的店铺
页头 + 标签栏	始终可见、拇指友好	限于 5 个标签	拥有 4-6 个主要分类的店铺
混合（标签栏 + 滑出菜单）	平衡可见性和深度	需要更多设计考虑	中到大型目录

视觉一致性：图标、标签和颜色

一旦你放置了五个元素，确保它们在视觉上是一致的，以便用户可以立即识别它们。

图标

使用标准的、通用认可的图标：

• 主页： 房屋符号
• 搜索： 放大镜
• 购物车： 购物袋或购物车
• 账户： 人形剪影或带首字母的圆圈

不要使用需要解释的抽象或自定义图标。客户用于弄清楚图标含义的每一秒都是他们不在购物的一秒。

标签

在可能的情况下，特别是在有空间的桌面端，用文本标签配对图标。购物袋旁边的”购物车”消除了歧义。

在移动端，图标单独使用对购物车和搜索是可以接受的（广泛认可），但考虑标签不太明显的元素，如账户（”登录”或”档案”）。

颜色和对比度

你的导航元素应该从页面的其余部分中脱颖而出，而不与你的品牌相冲突。

• 最小对比度： 文本和图标为 4.5:1（使用 WebAIM 的对比度检查器进行验证）
• 悬停状态： 在桌面端，图标和链接应该在悬停时改变颜色或加下划线，以便用户知道它们是可点击的
• 活动状态： 当客户将商品添加到购物车时，购物车图标应该短暂动画或高亮以确认操作

组合在一起：真实示例

让我们看看不同的店铺类型如何实施五个必要元素。

示例 1：小型服装品牌（30 件产品）

桌面端：

• 标志（主页）— 左上角
• 主菜单：女性、男性、特价 — 水平栏
• 搜索栏 — 右上角
• 账户、购物车图标 — 右上角

移动端：

• 页头：标志、汉堡菜单、购物车
• 汉堡菜单：主页、女性、男性、特价、搜索、账户

示例 2：家居用品店（80 件产品）

桌面端：

• 标志（主页）— 左上角
• 大菜单：客厅、卧室、厨房、户外（每个都展开显示子分类）
• 搜索栏 — 右上角
• 账户、购物车图标 — 右上角

移动端：

• 页头：标志、购物车
• 底部标签栏：主页、商店、搜索、账户、购物车
• 点击”商店”打开带有完整分类树的滑出菜单

示例 3：数字产品店（5 件产品）

桌面端：

• 标志（主页）— 左上角
• 简单菜单：课程、模板、套装 — 水平栏
• 搜索栏 — 右上角（即使只有 5 件产品，客户也可能按关键字搜索）
• 账户、购物车图标 — 右上角

移动端：

• 页头：标志、菜单、购物车
• 汉堡菜单：主页、课程、模板、套装、账户
• 汉堡菜单内的搜索

无需代码实施的工具

大多数 Shopify 主题现成就包括这五个元素，但它们的放置和可见性各不相同。

Dawn、Sense 和 Refresh（Shopify 的免费主题）支持：

• 标志主页链接（自动）
• 主导航菜单（在在线商店 → 导航中配置）
• 搜索栏（在主题设置中启用）
• 带项目计数的购物车图标（内置）
• 账户链接（内置）

要获得更多控制——特别是对于标签栏之类的移动专用布局——考虑使用 Navi+ 菜单生成器 之类的导航应用。它允许你分别配置桌面和移动导航、添加图标、自定义颜色并在发布前预览更改，所有这些都无需编写代码。

你的 5 分钟实施检查清单

使用这个检查清单审核你当前的菜单设置：

1. 主页： 你的标志链接到主页吗？移动端有可见的”主页”菜单项吗？
2. 分类： 你的主要分类在页头可见（桌面端）或在一次点击内可访问（移动端）吗？
3. 搜索： 搜索栏在桌面端始终可见吗？在移动端一次点击内可访问吗？
4. 购物车： 购物车图标在右上角吗？是否显示项目计数徽章？
5. 账户： 页头或主菜单中是否有清晰的登录/账户链接？

如果任何答案是”否”，优先在本周修复。这些不是可有可无的——它们是功能型店铺的基础。

---

把五个必要元素做好不会上头条，但它会静悄悄地将更多访客转化为客户。从这里开始，然后一旦基础知识扎实，再加入高级功能（大菜单、个性化推荐、多币种支持）。

本文是更大指南的一部分：新店铺的导航基础知识：5 个必要元素。