拇指规则在触屏手机中的应用

记得在上家公司,坐在我旁边的设计师曾经跟领导发生了争执,争执的内容是用户在使用手机时的手持习惯是怎样的,到底哪种手持方式是惯用手呢?结果一直没有个定论,被领导反驳说:“你又没有准确的依据!就按我说的来!”同事只好默默地去改设计稿。相信这样的情景在我们做设计的时候是非常常见的,但说不出依据所以只能硬着头皮去改。心里还在一万个不乐意,或者跟同事吐槽老板不懂就知道瞎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、卡片设计意味着重要的功能(或者你希望用户操作)要位于拇指容易操作的区域,不重要的功能可以放在拇指不容易操作的区域。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容