Desktop Mega Menu Slide Menu Tab Bar

GPS Nation —— Navi+ 的黄金三件套:Mega Menu、Slide Menu 与 Tab Bar 组成一套整体导航方案

一家大型 Garmin 店铺如何把三种 Navi+ 菜单当作一套完整方案来用 —— Mega Menu 覆盖桌面端、 Slide Menu 深入子层、Tab Bar 负责移动端 —— 在各种设备上配合得天衣无缝。

GN
GPS Nation
gpsnation.com
Garmin 设备零售 Shopify 庞大目录
速览
行业
Garmin 设备零售(GPS、智能手表、marine……)
平台
Shopify
挑战
目录庞大 —— 没有任何单一菜单能完整解决
Navi+ 菜单
Desktop Mega Menu · Slide Menu · Tab Bar(三件套配合)
重点
整体方案:桌面端 + 移动端 + tab bar

客户的问题

GPS Nation 几乎销售整个 Garmin 生态:智能手表与穿戴设备、手持户外设备、marine(声呐、 chartplotter、雷达)、road GPS、骑行码表、猎犬追踪,直到 refurbished 翻新机 —— 一个庞大、多层、按使用需求划分的目录。

面对这样一个目录,没有任何单一类型的菜单能完整解决问题: 桌面端需要铺得够广,让顾客看清店里有什么;移动端需要简洁地逐层深入;而搜索、购物车这类 操作必须随时触手可及。只用一种菜单,总会顾此失彼 —— mega menu 在移动端形同虚设, 默认的 hamburger 又展示不出目录,而操作栏则装不下整棵分类树。

Navi+ 解决了什么

这正是 Navi+ 黄金三件套最能发挥威力的地方:不是只选一种菜单, 而是把三种当作一套整体方案来用 —— 每一种负责一个场景,彼此配合,从探索一路覆盖到下单, 在所有设备上都不留空白。

Desktop Mega Menu —— 按使用需求覆盖整个目录

在桌面端,Mega Menu 按 use-case 分列:Smartwatch & Wearables、Outdoor、Marine、Road、 Sport & Fitness、Refurbished —— 每一列下面都有熟悉的子分组(running、cycling、golf、fishfinder……) 并配上图片。顾客只要把鼠标移上去,就能看到自己关心的那一支,完全不必事先知道型号名称。

Slide Menu —— 沿 use-case → 系列 → 型号一路深入

Slide Menu 负责目录里较深的部分:顾客从需求分组(Sport & Fitness)进入具体运动(Running), 再到每一个型号,像原生 App 一样一屏一屏地往下翻。在移动端,这是主要的导航主轴; 在桌面端,它则是给喜欢按列表方式浏览的顾客的备选方案。

Tab Bar —— 把 Search 和 Cart 放到移动端拇指可及之处

对于一家 SKU 众多的店铺,搜索是最重要的快捷入口。Tab Bar 固定在移动端屏幕底部, 包含 Home、Shop/Menu、Search、Cart、Account —— 并可以当场直接打开 Search panel 或 Cart panel。 顾客在比较多个型号时,不必每次都往上拉到 header。

关键在于:这三种菜单并非各自为政。它们按设备场景分工, 并共用同一套目录结构 —— 由此组成一套整体的导航方案,而不是三个临时拼凑的功能。

期望达到的结果

GPS Nation 不再是东补一块、西补一块,而是拥有一套完整的导航方案:每种设备都有对的工具, 三件套配合,从顾客探索一直覆盖到加入购物车。这正是把三种 Navi+ 菜单当作一个系统、 而不是零散几块来用所带来的力量。

  • 桌面端用 Mega Menu 把目录铺得很广 —— 顾客一眼就能看到整个 Garmin 生态。
  • 移动端用 Slide Menu 简洁地深入,结构与桌面端一致。
  • 有了 Tab Bar,搜索和购物车始终在拇指可及之处。
  • 一套整体方案,在所有设备上保持一致 —— 不必更换主题。

可复用的原则

这些经验适用于大多数目录庞大的店铺 —— 不只是 GPS Nation。

  • 庞大目录需要一个系统,而不是一种菜单:没有任何单一菜单能照顾到所有场景。
  • 每种菜单各司其职:桌面端铺得广,移动端深入,tab bar 负责操作。
  • 配合带来的价值大于各部分之和:三种菜单共用同一套结构,导航才能连贯一气。
  • 加一层,而不是换底子:整套三件套都能部署,不必更换主题,也不必卸载正在运行的应用。

如果你也有一家类似的店铺,想试一下 Navi+?可以看看 各种菜单类型 或者阅读 使用文档

K
Khoi — Founder, Navi+
打造了 Navi+,并亲自为分类繁多的 Shopify 店铺提供导航咨询。

开始使用 Navi+ AI Menu Builder

选择您的平台 — 免费安装,几分钟内上线。