香港一家大型维修连锁如何用 Navi+ 替换掉整个默认 header —— 把成百上千个 品牌 × 型号 × 故障 × 门店的页面,变成在移动端和桌面端都一致的一套导航系统。
Heater 是一个庞大的网站:超过 13 个品牌,每个品牌有多个型号, 每个型号又有多种故障(屏幕、电池、充电口、摄像头、进水……),再加上 5 家门店以及一套 预约 / 报价流程。它的结构本质上是一棵又宽又深的树:品牌 × 型号 × 故障 × 门店。
主题自带的默认 header 撑不起这棵树。在桌面端它是一条扁平的菜单条; 在移动端却是另外单独做的一个 hamburger drawer。两种不同的体验、两套不同的逻辑 —— 顾客在桌面端用惯了,换到移动端又得从头学起。一个庞大的网站如果 header 太弱,整个站点 都会变得难以导航,而手机坏了、本来就着急的顾客就更容易直接离开。
提议的方向不是"再加一个菜单",而是用一套统一的 Navi+ 系统替换掉主 header 的角色 —— 所有设备共用同一套结构来源,让移动端和桌面端说同一种导航语言。
Mega Menu 替换桌面端默认的菜单条:整套品牌 × 故障类型被整理成结构清晰、按列展示、配有图片的形态。 一个庞大的网站,只需把鼠标移上去一次就能快速扫完 —— 顾客马上看到店里能修哪些品牌、哪些故障, 而不必逐个点开每个品牌的页面去试。
在移动端,Slide Menu 替换默认的 hamburger,并使用与 mega menu 完全相同的结构: 顾客按品牌 → 型号 → 故障逐级滑动。因为来源相同,移动端与桌面端保持一致 —— 不必再分别搭建和维护 两套菜单,顾客换设备时也不用重新学习。
Tab Bar 固定在移动端屏幕底部,让重要操作始终就位:预约、门店、致电、菜单。 它与 Slide Menu 一起,替换掉默认 header 剩下的部分 —— 顾客有了一条简洁、正好在拇指可及之处的 导航栏,而不必再往上拉到页面顶部。
当主 header 被替换成一套统一的 Navi+ 系统,一个非常庞大的网站就变得易于导航, 更重要的是 —— 移动端和桌面端的体验合二为一。顾客学一次,处处都能用。
这些经验适用于大多数庞大、多层的网站 —— 不只是 Heater。