(素材)拇指热区

为拇指而设计

什么是为拇指而设计?简单的来说,就是设计用户界面让用户感觉操作舒适,符合我们手指自然移动的弧度区域。但是,用户的操作是很复杂的,我们会下意识的调整我们手握设备的姿势来触及显示屏的不同可操作区域。我敢打赌,进入大屏时代后,你一定会伸展握姿或调整角度来更加容易的触及不同的区域。

我们需要做一些思考。研究显示,大部分的用户是以下图的方式抓握手机:以拇指的底部为支点,抵在手机的右下角。

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

单手操作:49%

一手支撑,一手操作:36%

双手操作:15%

△ 用户如何使用自己的手机

当然,以上数据来自大约 60% 的被观察者,另外约 40% 的被观察者并没有操作手机屏幕,而是在通话、听音乐或者看视频。

在单手操作的情况下,左右手使用比例:

右手拇指操作:67%

左手拇指操作:33%

Hoober 指出,左撇子的人口数量大约是总人口的 10% ,但是观察到的左手用户比例却高于这一比例。可能的原因是一些被观察者在操作手机的同时还在做其他的事情,比如抽烟,骑车,喝咖啡,吃德国咖喱香肠等等。

拇指区域

这里的拇指区域以热图的形式来展示。它可以显示出大拇指操作手机屏幕区域的难易程度。借以Hoober的研究结果,画出最常见的使用情境的拇指热图:

单手操作

右手拇指操作

拇指底部固定在手机右下角

△ iPhone6 和 iPhone6 Plus 的拇指热图对比

你会发现安全的绿色区域大致相似,但是又有所不同。因为我们的大拇指不会随着屏幕的大小而变化。

与 iPhone 6 相比,iPhone 6 Plus 的 OW 区域(无法触及的区域)明显增加了很多。另外, iPhone 6 Plus 的绿色舒适区域的形状也不太一样,那是因为尺寸变大后,抓握的手势改变了,用户会利用小拇指来稳定住手机。这样的经历让我有些惊讶。

注:我的拇指无法触及整个屏幕,但是你的手掌以及拇指或许比我的大。每个人的条件情况可能会不一样。

如果手的位置改变了,拇指活动区域会如何改变?有时候你可能会上移你的手握姿势,将拇指底部固定在手机垂直方向的中间部位,以便更容易的触及屏幕的一些区域。如下图:

△ 拇指底部固定在手机垂直方向的中间位置

图中可以清晰地看到 iPhone 6 Plus 的大屏幕所能触及到的自然区域。相比而言,在 iPhone 6 上的自然区域少了一些。

可触及性

实际上苹果系统早就考虑到了这一点(从iOS 8开始)。通过两次轻击home键(不是按下Home键展示正在运行的应用),iOS会将整个屏幕区域下移,避免了用户需要通过被动的改变手握姿势,来进行想要的操作。

以下是在iPhone 6 Plus上,拇指区域热图与可触及性结合的示意图:

△ 苹果演示图片中拇指位置刚好在绿色自然区域

另一个观察来自 John Gruber :就可触及性而言,屏幕在6 Plus上的移动比例要比在6上的更加智慧,因为可触及的区域更加符合一个典型的拇指长度(在拇指底部固定在右下角的常见情境下)。如下图:

总体上,手机的尺寸趋于相似,这是一件好事。但是,这也意味着我们不能只是简单的把5.5英寸的屏幕当做小屏幕的放大版。手握姿势改变了,你的用户界面也需要考虑更多。因此,原型设计并进行真实场景下的用户测试就更加重要了。

个人总结

原文使用的是 iPhone6 和 iPhone6 Plus 作为研究对象,但是之后出现的新系列 iPhone 与之基本一致(显示屏和机身尺寸),所以结论仍然可以用来借鉴。

值得注意的是,前不久发布的 iPhone X 的实际尺寸大小介于 8 和 8 Plus 之间,然而X的显示屏为 5.8 英寸,虽然屏幕宽度和 6、6S、7、8 一样,但是高度却高出了 145pt ,大约高出了 22% 。因此,对于设计师来说如何设计出舒适操作的交互界面就更加重要了。尤其是在进行创新设计以及界面可操作元素较少的情况下,可以多考虑为大拇指而设计。

最后,用下面一个简单的案例让大家更好的理解为拇指而设计:

图一是按照苹果的设计规范进行的设计,底部标签栏有五个标签;如果在不改变标签大小和位置的情况下,将标签数量缩减到3个,你会如何选择?图二还是图三?

根据上文的拇指热区示意图,相比于图二的交互界面,图三更符合单手拇指的舒适操作。但是在实际项目当中,还是需要通过用户测试来进行验证,可能还需要适当的调整标签的位置,而不是简单的删除多余的标签。

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

推荐阅读更多精彩内容

  • 此文获权转载自 Mingfang Wu —— 不久前,和另外一位同事对于某一界面操作按钮的位置有过争论,于是产生了...
    Z_Yuhan阅读 846评论 2 16
  • 原文地址:http://augix.me/archives/5056欢迎关注Augix微信订阅号: 在第二次世界大...
    Majirefy阅读 2,884评论 2 7
  • 2017年9月12日,苹果发布了新一代的 iPhone 8 和 iPhone X,iPhone 手机已在不知不觉中...
    40c0490e5268阅读 3,553评论 6 34
  • iPhone的历史 每次苹果发布会UI设计师可能是最睡不着觉的人啦。每次发布会苹果推出全新iPhone时,我们在i...
    不二先僧阅读 15,783评论 3 36
  • 接龙客栈——悬赏任务 【09】年味 2017,鸡年大吉,心想事成,万事如意! 今天晒过被子,晚上,我得意地问女儿:...
    阳光Sunflower阅读 463评论 5 6