记得在上家公司，坐在我旁边的设计师曾经跟领导发生了争执，争执的内容是用户在使用手机时的手持习惯是怎样的，到底哪种手持方式是惯用手呢？结果一直没有个定论，被领导反驳说：“你又没有准确的依据！就按我说的来！”同事只好默默地去改设计稿。相信这样的情景在我们做设计的时候是非常常见的，但说不出依据所以只能硬着头皮去改。心里还在一万个不乐意，或者跟同事吐槽老板不懂就知道瞎BB之类的。
拇指规则在手持设备中的重要性
拇指的人机工程学
那么为以后不再遇到类似问题，我们首先来了解下用户的操作习惯，当我们单手手持手机的时候，无论是左手还是右手，还是双手手持，通常都是以手掌或者除拇指以外的四个手指为依托，用大拇指进行操作。那么实际上手持移动设备变成了拇指与触摸屏的一场“紧密接触”。
所以我们最常用的是大拇指，根据人机工程学的研究表明中，大拇指有三个关节能够活动：
1、拇指第一关节：位于包裹指甲关节的那一段区域，能向前弯曲最大90度，少数人能向后弯曲
2、拇指第二关节：位于拇指与手掌连接处以上的一段区域，能向前弯曲最大90度，少数人能向后弯曲
3、腕掌关节：位于手掌与手腕的连接处以上，腕掌关节能够进行较大程度的屈伸和收展。
那么有些同学会问了有些人是用食指操作的，他们经常手写，也不是都是大拇指啊。没错早在2013年，外国研究者 Steven Hooker上街观察了超过1300个人点击他们的手机。他发现在几乎所有案例中，他们拿手机的姿势都是基于以下三种：
· 49%的人使用单手操作，是最多的
· 36%用一只手抓住手机，用另一只手的拇指或食指点击屏幕
· 有15%的人采用双手操作，用两个大拇指点击
的确这个研究表明还有相当一部分人是用食指来进行操作的，实际上我们手持手机的方式并不是一成不变的，通常是根据我们所在的场景情况进行改变。我们在单手和双手之间转换，或在左右手间交换，有时候是正在做某事的时候随便点击，我们的手持方式都是非常的灵活的。
当我们单手拿着手机的时候，大拇指是最舒服好用的手指。比如在看电影，玩游戏的时候，我们都会采用双手操作，绝大多数人都会使用2只大拇指操作。在一只手持机，用另一只手点击的人中，虽然有一些老年人会使用食指进行手写操作，但经Hoober调查统计发现他们大部分也使用大拇指。
75%的手机交互都是由拇指完成的
所以当我们再纠结哪种手持几率大的时候，不妨抛开这些手持方式，而更多的考虑大拇指的触控区域。
手指在手机的活动范围热图
上图绘制了不同手持方式的拇指操作区域，重叠区域展示了大多数用户最好触及的区域。
通过不同颜色的拇指范围热区分为：
绿色：Natural区（容易操作的）
黄色：Stretching区（拇指需要伸直才可以操作）
红色：Hard区（拇指比较难操作）
这为我们在绘制产品原型或者做交互设计的时提供了很多帮助，比如将一些用户经常用到的功能放到绿色和黄色区域，不常用的放到红色区域。
拇指规则在UI中的应用
导航菜单
当触屏手机越来越大的今天，拇指原则似乎慢慢的被人遗忘，按钮越来越小，操作也越来越复杂，用户体验相去甚远的道路。当然还有很多人对键盘手机和iPhone5手机有着独有的情怀，因为这些小屏幕手机给我们操作上带来了更大的便利。不需要频繁停下手上的事情，一只手就可以应付得来。
Emblaze Mobile
曾经Emblaze公司出过一款Else mobile的手机，UI设计采用侧边扇形的菜单结构。他们提出了独有的单手操作概念，切换的过程相当的平滑，在当时也是独树一帜，令人印象深刻。
锤子手机的onestep
令人惊喜的是锤子手机新增了onestep这个新功能，也就是拇指在右上角斜45度下滑，会出现右侧和顶部的快捷操作栏。把常用的软件放置在右侧的快捷操作区域，也就是Natural区，不常用的放置到Hard区。大大提高了用户的操作效率，而且还可以同时选中相册里的图片，批量拖入微信发给朋友。可见遵循拇指规则设计，给用户带来很大的便捷性。
QQ抽屉式导航和底部导航
当然，我们也可以将导航菜单栏放在中间部位。这时的可操作区域就完全位于Natural区。更有利于用户操作。但往往我们实际APP界面中由于内容过多，大多数采用的是把导航菜单放置在页面底部，或者把导航隐藏掉，点击顶部左边的按钮做成抽屉式导航，也都是可以的。例如QQ把重要的操作放置在底部菜单，把不太常用的归类到抽屉式导航里。
京东金融混合式菜单
如果我们需要在同一页面放置多个非常重要的菜单入口，那么此时底部已经不能满足，混合菜单将会更有效果。由于混合菜单将会变得更复杂，所以需要根据APP内容的重要性去设计菜单的布局顺序。例如京东金融的财富页面，红色框框区域放置的2行菜单入口。
保持友好的卡片式设计
卡片模式一直被广泛使用。卡片式设计可以快速直接的将信息展示出来，我们常用的操作如发送，保存，完成，关闭等等。
天气类APP
在上面这款天气类APP中，我们可以看到“城市搜索”和“使用当前位置”被放在页面最顶部的Hard区，这是因为系统会记住你上次打开应用时的位置。而我们最关注的是当前所在地的天气情况，所有以上的两个功能我们很少会用到。那么一款天气类APP肯定希望可以得到推广以赢得更多的用户，所有将“分享”按钮放在Natural区来诱导客户将其分享到其他社交软件。
付款流程添加收货地址页面
看完好的例子，接下来再看一个反面的例子，这是一个APP的购买流程页面，点击“添加新的收货地”会弹出一个表单。这个页面乍一看没什么问题，但是仔细一观察就会发现问题。首先，页面左上方的“取消”按钮会给人带来歧义，我点击它到底是取消购买流程呢还是不添加收货地址呢？我们可以看到取消按钮位于Hard区的边缘，这就不易于用户操作。解决这个问题需要缩减表单的行数，这样取消按钮就会下降到Natural区。卡片式设计的特点是信息的归类精简和整理，如果信息过于繁杂，也就违背了卡片式设计的精髓。
总结
1、根据拇指的人机工程学和国外交互设计学者的研究75%的手机交互都是由拇指完成的
2、移动端设备不断在变化，新的技术也不断涌现。但是只要是触摸屏这种交互模式还在，那么拇指就是设计环节中必须要考虑的一个因素。
3、卡片设计意味着重要的功能（或者你希望用户操作）要位于拇指容易操作的区域，不重要的功能可以放在拇指不容易操作的区域。
网友评论