浅析手机交互设计中的“拇指法则”

你有没有遇到过一款APP让你用的很不舒服？你的拇指必须要伸得老远才能够得到菜单，或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受，或者更学术化点说，没有考虑到“拇指法则”。

“拇指法则”是资深交互设计大神Steven Hoober在2013年对1300名手机用户的调查研究后提出来一个新名词。他通过研究发现，49%的用户都是单手拿着手机，使用拇指进行操作。甚至某些大屏手机使我们不得不进行双手持握的时候，多数人也还是倾向于使用自己的拇指。Josh Clark在另一项研究中也得出了类似的结论，他指出：75%的手机交互都是由拇指完成的。因此我们也可以说，对触摸屏手机进行交互设计，主要针对的就是拇指。

人类的拇指远比猿类灵活有力，使人类拥有了准确的抓握能力，最终发展出使用工具的能力 。然而在手机操作中，拇指的可操作区域是有限的。如果我们竭尽全力，拇指可以在整个手机屏幕上进行操作（大屏手机除外），但是这也会影响用户使用的舒适度。

上图就是手指在手机的活动范围热图，我们通过到拇指距离将其分为Natural区（容易操作），Stretching区（拇指需要伸直才能操作）和Hard区（拇指比较难操作）。这个手指活动热图可以在我们产品原型图设计时提供很多帮助，比如将一些用户经常用到的功能放到Natural区或Stretching区，一些用户不怎么使用的模块可以放到Hard区。

我们都记得曾经有一段时间手机的导航功能是通过下拉列表来实现的，用户通过点击列表里的相应的链接进入特定的页面。这种设计虽然不好看，但是却很实用。最起码它实现了导航的基本功能：告诉用户“他们在哪儿？”以及“他们能去哪儿？”。现如今新的设计理念不断涌入到导航设计中，那么哪种导航模式最适合我们的拇指呢？

如果使用一个长的链接列表来做导航菜单的话，那么全屏菜单这个模式可能会更加适合一些。因为所有的列表项都处于拇指容易操作的区域，而且元素都足够大也不会发生误操作的情况。

当然，我们也可以将导航菜单栏放在顶部或者底部，这种设计模式也可以提供多条链接。比如新浪微博，将用户主要使用的功能都放在底部栏中，用户可以很容易的进行操作。

如果你的网站内容比较多，混合模式的导航菜单可能会更加适合。网易云采用的就是混合模式的菜单布局，我们可以看到底部和顶部各有一个菜单栏，顶部菜单栏处于Stretching区，拇指可以相对容易的进行操作。而“发现音乐”，“我的音乐”，“朋友”和“帐号”这四个用户使用频率更高的功能被放在Natural区，拇指可以很方便的进行操作。

卡片式设计现在大行其道，被广泛应用。卡片式设计可以快速直接的将信息展示出来，比如新消息，天气，日程等信息直接在卡片上呈现。接下来我们将通过两个例子来看“拇指法则”在卡片设计中应用。

在上面这款天气类APP中，我们可以看到“城市搜索”和“使用当前位置”被放在页面最顶部的Hard区，这是因为系统会记住你上次打开应用时的位置。而我们一般只关注自身所在地的天气情况，所有以上的两个功能我们很少会用到。那么一款天气类APP肯定希望可以得到推广以赢得更多的用户，所有将“分享”按钮放在Natural区来诱导客户将其分享到朋友圈。

看完好的例子，接下来再看一个反面典型，这是一个电商APP的购买流程页面，点击“添加新的收货地”会弹出一个表单。这个页面乍一看没什么问题，但是仔细一观察就会发现问题。首先，页面左上方的“取消”链接会给人带来误解，如果我点击它那么是整个购买流程被取消还是“添加新的收获地”这个操作被取消？还有表单右上方的关闭按钮位于Hard区的边缘，拇指很难进行直接有效的操作。这时最好的方法就是缩减表单内容，让关闭按钮可以下降到Natural区。我们要知道卡片式设计最吸引人之处就是其可以在很小屏幕区域内展示尽量多的内容，卡片的本身也对信息进行了归类整理的作用，使用户看的一目了然。如果我们一味着追求设计感而使卡片内容过于臃肿这无异丢掉了卡片固有短小精悍的精髓。

在上图中，圆圈代表点击，剪头代表滑动。研究数据表明，用户习惯于由边缘向中间滑动和由上向下滑动。而且大部分滑动操作都是在Natural区完成。

我以前误以为滑动的时候是完全水平方向的，这让我在设计过程中给单个元素的滑动高度过小，因为我没有考虑用户向下滑动的距离。这样就导致了用户在滑动过程中会触碰到下面的其他元素。最后我经过多次的实验发现一个的滑动手势的完成最少是45*45像素。

谷歌的Inbox就是一个很好的例子。

1、移动端设备不断在变化，新的技术也不断涌现。但是只要是触摸屏这种交互模式还在，那么拇指就是设计环节中必须要考虑的一个因素。

2、友好式卡片设计意味着重要的功能（或者你希望用户操作）要位于拇指容易操作的区域，不重要的功能可以放在拇指不容易操作的区域。

3、让滑动手势尽量远离拇指难以触碰的范围，提供足够大的点击区域，避免误操作。

文章作者系 @王M争 未经许可，禁止转载。

编辑：未知