这是一个简短的故事,讲述一家 powersports 商店如何在桌面和移动端上 为顾客重新组织导航 —— 不更换主题,也不卸载任何正在使用的应用。
Turbo Powersports 销售 ATV、雪地摩托、水上摩托的零件和配件 —— 商品目录非常庞大,分类层级很深。他们当时使用的主题在 header 上只有一条 简单的菜单条,在移动端则是一个汉堡菜单形式的 slide menu。
两个明显的问题:
1. 没有 mega menu —— 所有分类都被藏在 header 上一个很短的 下拉菜单里。顾客进店后看不到店里到底在卖什么,没有代表性的图片, 也没有办法快速浏览各个主要产品分组。
2. Slide menu 太简单,层级不够完整 —— 主题自带的 slide menu 是有的,但它只列出了大的分类项,对于这么深的商品目录而言,子级层次远远不够。
我向 Turbo Powersports 提议:不换主题,不动布局 —— 只在真正需要的位置插入三种 Navi+ 菜单。每种菜单负责解决一个独立的问题:
在桌面端,mega menu 按列清晰分组:按车型(ATV / 雪地摩托 / 水上摩托 / UTV……)、 按零件分组(Engine / Body / Wheels……),每个分组都配上代表性的图片。 顾客只要把鼠标移上去,整家店的内容就铺开了 —— 不用猜,也不用一个个点开试。
Slide menu 用来处理目录里比较深的部分 —— 每种车型下的子分组、每个系列、 每个年份。在移动端,顾客点击汉堡按钮就能打开, 像原生 App 一样一层层翻进去。在桌面端,slide menu 作为备用方案, 留给那些更喜欢按列表方式浏览(而不是悬停 mega menu)的顾客。
只在移动端显示,固定在屏幕底部。每个 tab 不仅是一个导航链接 —— 而是可以当场打开购物车面板、搜索面板、Slide menu。 这样一来,header 就可以彻底精简,不需要再把购物车图标、搜索图标、 汉堡按钮全部堆到页面顶部了 —— header 看起来干净很多, 但功能一个都没少,而且都在拇指可以轻松够到的位置。
分类结构被重新梳理得清清楚楚,在桌面端和移动端都能完整地呈现出来。 顾客一进店就能立刻明白 店里有什么、品牌是谁、自己想找的东西在哪里。
结果是:解决了顾客对产品的认知、对品牌的认知, 并且全新的商品分类结构非常友好和清晰。 不需要更换主题,也不需要卸载任何正在运行的应用。
Turbo Powersports 店铺上三种菜单的完整演示
这些经验适用于大多数目录庞大、层级很深的店铺 —— 不只是 Turbo Powersports。