手指太短点不到？拇指热区了解一下

先来看一个熟悉的场景：

每次广告的「跳过」按钮都这么难点到，是不是自己手指太短了……？

当然不是！是设计师故意将它放置在拇指操作的盲区，让你难以点到，目的就是让你浏览广告。

接下来我们就来看看拇指操作的热区和盲区。

操作手势

为什么我们讨论的是「拇指」热区而不是「手指」热区呢？

我们看看来自于手机专家 Steve Hoober 的一项实验。当时一共有 1333 名参与者参与了该项研究。他通过观察发现用户会用以下三种姿势进行手机操作：

单手操作：49%

一手支撑，一手操作：36%

双手操作：15%

显而易见几乎三种姿势都离不开拇指操作。虽然一手支撑一手操作中包含其他手指操作，但是这种情况下几乎不存在盲区（下文会提到），所以也就失去了讨论的价值。

下面我们就三种姿势来分析他们各自的盲区和热区。

单手操作

一般情况是以拇指的底部为支点，抵在手机的右下角（左利手是左下角）。但也有少部分用户希望轻松的点到屏幕顶部而提高他们的支点位置。

可以看到在拇指方向的上角（图中左上角）以及靠近拇指支点的区域是很难触及的盲区；而以支点为圆心，转动拇指，拇指指尖可以触及到的区域是热区。

此外，虽然左利手人数只占总人口数量的10%，但在单手操作手机时，左手拇指占到了33%。这可能与用户在同时执行其他任务有关，比如他更熟悉的右手在抽烟、书写或者喝咖啡等等。所以无论是左手拇指还是右手拇指我们都不应该忽略。（左手拇指操作的热区和盲区即上图左右翻转）

一手支撑，一手操作

一手支撑，一手操作是指利用非惯用手托住手机，另一只更灵活熟悉的手来进行操作，通常是拇指或者食指。

显而易见，拇指的盲区变小了。因为不需要拇指所在的这只手去托住手机了，拇指可以更灵活的去进行操作了，但因为拇指的长度有限，所以还是有一定的难以点击区域。而食指的长度则决定了在操作时几乎无盲区。

双手操作

双手操作是指将手机放在手指中，通过两个拇指来进行操作。

在竖屏的时候，双手操作的盲区的屏幕的上半部分；而横屏时，双手操作的盲区则在屏幕中间的顶部。

运用到设计中

那么了解了拇指热区，我们应该如何运用到设计中呢？

大家在设计界面的过程中，是否思考过以下这些问题：

1.为什么标签栏置于底部？

2.为什么「编辑」按钮常常位于右上角？

3.为什么MD设计规范中的悬浮按钮(FAB)置于右下角？

标签栏置于底部是因为标签栏几乎是每个APP的标配，将其置于易于操作的底部是最合理的。

「编辑」按钮在界面右上角的位置对拇指来说显然是不友好的。然而，这样做的原因也是显而易见的，编辑功能会让数据发生变化。将这类控件放在难以操作的位置上（与左上角的返回是一个道理），就是一种防御性的设计策略，可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。

至于悬浮按钮（FAB）为什么置于右下角，则是因为虽然它很重要，但是不能忽视的一点是它是悬浮的，它会遮挡下方的信息。而根据我们的视觉习惯，一般左侧的信息优先级高于右侧，如果将悬浮按钮置于左侧，会对我们接收信息造成干扰。

此外随着大屏时代的到来，手机屏幕越变越大，我们的手指可没有越来越长，所以相应的拇指热区正在慢慢变小。通过下图可以看见，Plus上的热区占比相比于4.7寸的屏幕小了很多。所以我们在设计时应该为大屏做更精确的思考。

总结

通过以上各种操作姿势的热区盲区分析，我们可以发现屏幕顶部一般是用户难以触及的区域，而底部则反之。所以我们应该将用户常用且安全的操作置于底部，而相反的，危险或者低频的操作应置于顶部两侧。

参考

从「手势交互」出发，分析产品设计背后的原理

https://www.uisdc.com/gesture-interaction-analysis-product

经典好文！如何为拇指做设计？

https://www.uisdc.com/professional-designer-thinking-2