这里有一个你现在就能做的小实验。像排队等候或坐公交时刷手机那样，用一只手握住手机。然后试着在不改变握姿的情况下，用拇指去触碰屏幕的左上角。很难，对吧？那种摇晃、勉强够到的感觉，正是拇指热区的起点——也就是单手握手机时，拇指能够轻松触及的区域。
理解拇指热区不只是理论。它决定了买家能不能轻松点到”加入购物车”，能不能找到菜单，能不能完成下单，还是在中途流失。这篇文章讲的就是拇指在屏幕上的触及范围、它为什么对移动端购物体验如此重要，以及为什么把导航放在底部更贴合人们真实的握机方式。
什么是拇指热区，以及它为什么真实存在
拇指热区这个概念由 Steven Hoober 推广开来，他在真实场景中观察了超过 1,300 名手机用户。他注意到三种主要握姿：单手握持、单手托住另一只手点击、双手握持。其中单手使用约占全部观察的一半——是最常见的一种。换句话说，人们经常只用一根拇指来操作手机。
当你单手握手机时，拇指会沿着一道弧线移动，弧心大致落在掌根附近。正因如此：
- 最容易触及的区域是屏幕的中部和下部。拇指自然停在这里，毫不费力。
- 勉强能够到的区域是屏幕中部的两侧。够得到，但手会有点紧绷。
- 最难触及的区域是顶部的两个角，尤其是与握持手呈对角线的那个角。要够到它，通常得改变握姿或动用另一只手。
你不必只听我说。在 Google 里输入”thumb zone”，你就会看到那张熟悉的三色图——绿色表示容易触及、黄色表示勉强够到、红色表示难以触及——这是 Samantha Ingram 在 Smashing Magazine 上基于 Hoober 的研究描述出来的。这是 UX 领域被反复引用最多的观点之一，它之所以经久不衰，是因为它契合的是手的解剖结构，而不是一时的潮流。
悖论：最重要的东西恰恰放在最难触及的位置
这一点值得停下来想一想。在很多购物网站上，汉堡图标（三条横线）——所有主导航都藏在它后面——就放在顶部角落。这意味着通往所有商品分类的入口，恰好落在拇指热区里最难触及的部分。
问题还不止于手够得累。汉堡菜单同时还把内容藏了起来。Nielsen Norman Group 在手机和桌面端都研究过这一点，结论是：把导航藏在汉堡图标后面，会让用户更难找到所需内容、花更多时间，并且感觉更吃力。两相叠加：你既把菜单放在了手难以触及的地方，又把它从用户眼前藏了起来。
对商家来说，这带来的是非常实在的代价。根据 Baymard Institute 的数据，平均购物车放弃率十多年来一直徘徊在 70% 左右，而移动端往往更高。每一个稍微难一点的步骤，都是顾客离开的又一个理由。当一个人在买与不买之间犹豫时，仅仅为了打开菜单就得换握姿，这是一点小小的阻力——但它会不断累积。
把移动端设计好：让重要操作落在拇指可及之处
原则很简单，尽管落实起来需要克制：把重要的交互放进拇指热区，别把它们推到边缘。
具体到店铺：
- 主操作按钮——”加入购物车”“立即购买”“结账”——应该落在屏幕的下半部分，也就是拇指停留的地方。许多优秀的主题正是出于这个原因，把购买按钮固定吸附在商品页底部。
- 主导航应该出现在容易触及的区域里清晰可见，而不是藏在角落的一个图标后面。
- 那些很少用、又略有风险的操作——删除、退出登录、关闭——可以放到较难触及的区域。在这里不好点，反而成了一层防误触的保护。
一个常见的例子：如果你卖的是食品或服饰，顾客通常是在路上单手握着手机浏览你的店铺，那么把”加入购物车”按钮放在拇指可及之处，就可能是促成下单与匆匆划过、随后被遗忘之间的分水岭。
这也是为什么拇指热区常常和 F 型、Z 型这类阅读模式一起被提及。F 型和 Z 型讲的是眼睛如何扫视内容；拇指热区讲的是手能伸到多远。一个好的移动端布局需要同时尊重两者：把重要的东西放在眼睛会看到并且手能触到的地方。
为什么底部的 Tab Bar 贴合人们的握机方式
如果最容易触及的区域是屏幕下部，那么把导航栏放在底部，就是对这一生理事实的直接回应。这就是 Tab Bar——屏幕底部固定的几个图标组成的一条横栏，就像大家都熟悉的 Shopee、Lazada 或 Instagram App 里的底部栏。
Tab Bar 在移动端之所以流行，是因为它一次性带来了好几样好处：
- 它始终可见——不用打开就能看到——因此解决了 NN/g 指出的导航被隐藏的问题。
- 它正好坐落在拇指热区里，拇指毫不费力就能够到。
- 它限制了项目数量（通常 3–5 个），逼着你挑出最重要的几条路径：首页、分类、搜索、购物车、账户。
Tab Bar 并不能替代一切。一个层级很深、品类繁多的商品目录，可能仍然需要一个 Slide Menu。但作为移动端导航的主干，Tab Bar 远比放在顶角的汉堡菜单更贴合人们的握机方式。
这正是 Navi+ 无需写代码就能搭建的菜单类型之一，同时还能搭配桌面端的 Mega Menu 和 Slide Menu。你可以分别配置移动端和桌面端——手机用底部的 Tab Bar，电脑用 Mega Menu——全程都是拖拽完成。有一点值得商家留意：加上一条导航栏很容易让页面变重，而 Google 对 Core Web Vitals 的”良好”门槛相当严格（LCP 低于 2.5 秒、INP 低于 200 毫秒、CLS 低于 0.1）。Navi+ 经过优化，不会拖累这些指标，因此你既能把导航精准放进拇指热区，又不必拿速度来交换。
几点值得记住的事
拇指热区不是一个装饰性的小技巧。它是一种对简单事实的尊重：很多时候，买家用的只是一根拇指。
当你拿起手机重新审视自己的店铺时，有几个问题值得问一问：
- 主购买按钮在屏幕的下半部分吗？
- 主菜单是大方地展示出来，还是藏在了顶部的角落？
- 有没有哪个重要操作，逼着顾客把手伸到遥远的角落？
你不必一口气把一切都推倒重来。只要单手握住手机，亲自走一遍自己的购买流程，让拇指来告诉你哪些地方还卡手。
本文是更完整的指南移动端导航——为什么汉堡菜单正在过时，又该用什么来替代的一部分。