H5页面及手机网站设计规范之拇指法则

移动互联网使人们可以随时随地通过手机上网查询相关信息，进行即时交易，可以真正地实现移动办公、移动生活。而这一切，都基于手机网站的支撑，手机网站将随着手机互联网技术的迅速发展而提供越来越多种多样的服务。

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

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

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

01

-

网站主导航菜单

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

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

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

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

02

-

用户体验友好的式卡片设计

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

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

03

-

滑动手势研究

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

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

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

04

-

总结

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

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

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