如果只能选一项改动来让手机端的购物者买得更顺手，我会加上一条移动端 Tab Bar。它是一条固定在屏幕底部的导航栏，显示几个带文字标签的图标。购物者不必去搜索，也不必打开菜单——往下一看，就能直接找到自己要去的地方。这正是几乎所有主流电商 App 都在用它的原因。
为什么放在底部很重要
大多数人都是单手握手机。Steven Hoober 的研究观察了超过 1,300 人，发现约 49% 的人单手握持、用拇指点按。这样握的时候，拇指只能轻松够到屏幕的下半部分——也就是通常所说的拇指可触区。
屏幕顶部则恰恰相反：要够到那里，人们得伸长拇指或者换手。传统的汉堡菜单恰好就在顶部角落，是离得最远的位置。而底部的 Tab Bar 正好落在容易触及的区域里。购物者操作更快、误触更少，原因很简单：它就在拇指本来就在的地方。
随着大屏手机越来越普及，这段距离就更重要了。底部的按钮始终触手可及；顶部的按钮就未必总是如此。
立刻可见，无需任何操作
Tab Bar 和隐藏式菜单最大的区别在于可见性。它一直都在，4-5 个带文字标签的图标，购物者不必打开任何东西。
这一点比很多人想的更重要。Nielsen Norman Group 研究了 6 个网站上的 179 名用户，得出结论：隐藏主导航会明显降低购物者找到它的频率、拉长完成任务所需的时间，并让体验变得更费力。当菜单可见时，人们使用它的次数远多于需要先点一个三横线图标的情况。
对一家店来说，”购物者更多使用导航”通常意味着”购物者浏览更多商品”。卖化妆品的商家可以在 Tab Bar 上保留一个搜索图标；想找某一支特定口红的购物者只需点一下，而不必在菜单里翻找。每减少一步多余操作，就多一次留住这位购物者的机会。
当购物者轻松找到自己的路时，也会间接帮到结账环节。根据 Baymard Institute 对大量研究的汇总，平均购物车放弃率在 70% 左右，多年来几乎没怎么变动。大部分原因出在结账步骤本身，但让购物者分心或迷失的混乱导航也有份。一个始终显示在底部、带数量角标的购物车图标，会提醒购物者他们的购物车还在等着。
4-5 个项目的规则：只留主要去处
Tab Bar 最难的部分不在技术上——而在于挑选项目时的克制。空间非常狭窄，所以只应留给主要去处——也就是购物者最常需要的地方。
一套对大多数店铺都适用的经典配置：
- 首页——回到主页
- 分类 / 商城——进入商品类目
- 搜索——快速搜索
- 购物车——购物车，带数量计数
- 账户——账户、订单，或你自己定的某个优先项
第五个项目要结合你的商业模式来权衡。如果你正在做大力度促销，可以把它换成限时秒杀。如果是内容把购物者吸引回来的，那可以是博客。一家应季的时尚店可以临时放上新品上架。关键在于：只放一个优先项，不要硬塞。
为什么不超过 5 个项目
这个上限不只是为了好看。在手机屏幕上硬塞进 6-7 个图标，会让每个项目都变小、标签难以辨认，还会让点按目标挨得太近以致误触。当所有东西都”重要”时，反而没有一个能突出。
我曾经就犯过这个错误：我想把商品、促销、联系、博客、账户和购物车全都放在同一条栏里。结果是一排挤作一团的图标，购物者依然不知道该点哪个。把它精简到 5 个清晰的项目后，一切才重新透了口气。Tab Bar 把一件事做好：把购物者快速送到几个最重要的地方。其余的一切——政策、指南、次级类目——都可以放进侧滑菜单或页脚里。
一种购物者早已熟悉的模式
这里有一个少有人留意的优势：购物者在到达你的店铺之前，就已经知道怎么用 Tab Bar 了。他们每天都在购物 App、社交 App、银行 App 里见到它。底部一排带首页、搜索、购物车、账户的图标，几乎是人人都懂的惯例。
当一家店用上这套完全相同的模式时，购物者不必学任何新东西。他们看一眼底部，立刻就知道该怎么做。这种熟悉感本身就是一种转化优化——你在无需任何解释的情况下减少了摩擦。
对 Shopify 上的商家来说，难点通常出在技术上：大多数主题并不自带 App 风格的 Tab Bar，而自己写代码成本高，换主题时还容易出问题。这正是专门工具能帮上忙的地方。Navi+ 让你用拖放方式搭建 Tab Bar，无需写代码，移动端和桌面端可分别设置，而且换主题时菜单依旧保持原位。
不要用它去换页面速度
最后一点。Tab Bar 会出现在每一个页面上，所以一旦它过重，就会拖慢整家店。而 Google 会通过 Core Web Vitals 直接给速度打分：LCP 应低于 2.5 秒，INP 应低于 200 毫秒，CLS 应低于 0.1。尤其是 CLS——也就是布局偏移——如果底部栏加载得太晚、把其他内容挤来挤去，就很容易出问题。
在挑选搭建 Tab Bar 的工具时，要优先选择轻量、稳定、不会拖垮速度评分的那种。Navi+ 在 Shopify App Store 上评分很高，并带有”Built for Shopify”徽章。一条好的 Tab Bar 必须既容易点按，又不让人等待。
简而言之，Tab Bar 是手机端汉堡菜单最主要的替代方案：它位于拇指可触区，无需打开即可一直可见，只保留几个最重要的去处，并建立在购物者早已熟悉的模式之上。把这几条基础做对，通常就足以让移动端购物者的购物体验明显变得更顺手。
本文是更完整指南 移动端导航——为什么汉堡菜单正在淡出，以及应该改用什么 的一部分。