无论屏幕多大,拇指驱动的重要性不会递减

本文着重介绍了为什么大拇指非常重要,通过我们如何抓住不同大小的屏幕来说明“拇指规则”。


本文着重介绍了为什么大拇指非常重要,通过我们如何抓住不同大小的屏幕来说明“拇指规则”。

无论屏幕多大,拇指驱动的重要性不会递减

我们的手和指头点在设备上的哪里?这个问题是关键,本书(本文是节选)考察每个成因,告诉你如何舒服和有效的设计布局。每当我们以不同方式拿着小屏手机,大屏手机,平板和笔记本,每种触屏都有他该有的UI是很正常的。但是这些设备同样分享了很多一致性,尤其是拇指的关键作用。不管我们在小手机还是大平板上点击,我们的拇指都使用的最多。是个事实帮我们建立了可靠的跨平台规范。本文着重介绍了为什么大拇指非常重要,通过我们如何抓住不同大小的屏幕来说明“拇指规则”。智能手机当然是我们持有的最多的设备。我们用在手机的时间占用超过我们的走路时间的20%,平均每天访问手机221次。让我们从最熟悉的设备开始。

握住手机

在2013年,研究者 Steven Hooker上街观察了超过1300个人点击他们的手机。他发现在几乎所有案例中,他们拿手机的姿势都是基于以下三种。49%的人使用单手操作,是最多的;36%用一只手抓住手机,用另一只手的拇指或食指点击屏幕;有15%的人采用双手操作,用两个大拇指点击。

无论屏幕多大,拇指驱动的重要性不会递减

智能手机被定义为三种手持方式,我们在这之中切换。

这个研究表明了我们大多数人使用手机的习惯:我们频繁的改变手持方式,取决于是否方便和在当时所处的情景。我们在单手和双手之间转变,或在左右手间交换,有时候是正在做某事的时候随便点击,有时候我们停下来集中全部的注意力。我们都非常的灵活。Hoober发现三分之二的单手操作都是右手,占大多数。但是远远小于占90%的惯用右手人群。这意味着我们很多人喜欢用非惯用手,比如在惯用手写作、喝咖啡、抱小孩儿或者读书的时候。所以当只有很少人一直使用同一种姿势的时候,我们才能展示明确的单手使用喜好。也就是使用大拇指的手势。当我们单手拿着我们的手机,大拇指是唯一舒服好用的手指。甚至在双手姿势的情况下,很多人还是喜欢用大拇指。在一只手持机,用另一只手点击的人中,Hoober发现他们大部分也使用大拇指。经过计算,大拇指胜出:

大拇指驱动了75%的手机交互。

无论屏幕多大,拇指驱动的重要性不会递减

虽然我们经常思考“手指友好”设计,但是拇指才是最重要的。

小屏手机上的拇指点击区域

当拇指在小屏手机上滑动,只有三分之一的屏幕真正的无效:在底部拇指的反方向。例如如果你右手持机,你的拇指自然下滑,在屏幕左下角会呈一个弧形(不要拉伸拇指或转变手机的需求)。这个弧形同样可以应用到双手持机,但是弧形更大因为拇指的移动范围更大。

但是舒适和精确并没有对应。在舒适区中,存在一个拇指点击最精确区域之外的扇形区域,由阿里巴巴的Qian Fei的研究发现。她也发现,对于右手操作用户来说,底部和右上角是最不精确的拇指区域。

无论屏幕多大,拇指驱动的重要性不会递减

单手持机,绿色区域是单手持机用户的最舒服和精确的范围。避免触及红色区域,或者用较大的点击目标作为补偿。

那左撇子呢?点击区域翻转。但是左和右的区别并没有那么明显,因为大部分人在不同情况下,很容易换手。甚至对一只手的优化会不利于另一只手:最好的办法是,将核心功能放在屏幕的中心,无论左右拇指都可以点击。最后,顶部和底部的位置,比起左右来说更重要。不管使用哪只手,屏幕底部都是舒服的,但是顶部要求拉抻手指。这个规则适合所有手机屏幕,大屏小屏。但是当手机增长为巨大的屏幕,顶部屏幕拉伸变为一个可变化的区域。

大屏手机

在第一代iPhone后,设备都始终维持在4寸以下,便于单手操作。但是2014年中期后,三分之一的移动浏览器被大屏占领,因为大屏手机成为了市场的依靠。超大屏手机在手机和平板之间,于是phablet一词出现了,有将近7寸的大屏。

无论屏幕多大,拇指驱动的重要性不会递减

三星的galaxy w和同类设备模糊了手机和平板的界限。

尽管大屏手机有巨大的尺寸,但人们仍然像小屏手机一样使用,并且仍然用以前的三种姿势。不同于小屏手机,大屏手机用户转变了姿势,开始使用整个屏幕,并需要双手操作。在另一个研究中,Hoober和Patti Shank 发现大屏手机使用者70%使用双手操作。在最受欢迎的三种姿势中,35%是用一只手抓住手机,用另一只手的食指点击。但是大拇指点击仍然保持了比例:60%的大屏手机使用者使用拇指或者双手拇指。

无论屏幕多大,拇指驱动的重要性不会递减

虽然拇指驱动姿势和食指点击差不多,但是拇指操作积累了更多活动。

大屏手机的点击区域

随着拇指越来越多的使用,拇指区域对于4-7寸屏幕来说越来越重要。大屏手机用户往往使用双拇指,这样可以对称,扩大屏幕底部的区域,并同时有一个细长的很难到达的顶部区域。尽管双拇指很普遍,但是这并不值得优化。虽然我们单手持机的姿势占25%,但单手拇指姿势对于设计师来说却异常的重要,因为单手拇指范围非常小。

让我们翻回到拇指规则:往往要为最不舒服的手势而设计,这样人们不管他们如何选择拿你的设备,都可以使用你的UI。在大屏手机上,意味着设计值应该把目标及中在单拇指姿势。

有一个惊喜:虽然大屏手机的单手拇指操作区域远远小于小屏手机,但随着屏幕增大,拇指区域却维持了大概同样大小和形状,且基于屏幕底部。除非改变一种稳定的手势,击中了爆点。在这种手势下,大部分人滑动他们在手机下方的小指使手机保持在舒适的位置,这样就减少了拇指的范围。

无论屏幕多大,拇指驱动的重要性不会递减

当手机需要小指的支持时,拇指区域的大小和形状改变。

由于拇指的局限性,屏幕上的一些狭长区域无法触及,一些单手拇指重度使用者,出现了操作被“阻塞”——必须要更高的滑动才能拓展拇指触及范围。在大屏手机中,这种姿势比传统的在手机屏幕底部滑动的姿势给人们更大的拇指范围。

无论屏幕多大,拇指驱动的重要性不会递减

大屏手机上,一个更高的单手操作会获得更大的拇指区域,但是底部的一半则无法到达。

平板:更大屏幕意味着更多的手持

当小屏手机和大屏手机用之前三种姿势时,平板则没有那么幸运。更大的屏幕意味着要用更多方法,这让事情变的无法预测。拇指规则仍然有效,但是有一个特别的问题:拇指区域并不一致,即使是独立设备。拇指区域转变取决于姿势和动作。

一般,我们典型的使用两只手控制大平板,比如ipad,利用杠杆原理,可以从半中间拿住(可以选择接近底部,超过平衡点),一些人装了像文件夹一样的外壳,用另一只手点击。更有可能,我们是坐着操作。Hoober和Shank发现88%的平板使用发生在坐态的时候。手机则为19%。坐在桌边,我们喜欢用一只手拿着平板的下方三分之一,用另一只手点击。在沙发上,我们倾向于把平板放在肚子上,或者用小毯子裹着,用另一只手点击。姿势中转变最大的,是每一种姿势往往影响我们拿设备的距离:我们倾向于在站立时拿平板距离最近,依靠时距离最远。

随着屏幕变大,同样也会越重,我们往往会把它放下。Hoober和Shank发现人们人们愿意把平板放倒,占比例为三分之二。我们有40%会把平板放平(无论桌子上还是大腿上),在站立时有22%会把平板竖直(小于7-8寸的平板非常容易拿住,69%的小平板是手持的),这些平放或者站立的姿势说明我们使用平板更像是使用传统监视器而不是手持设备——换句话说,更接近带键盘可触屏的平板电脑。

平板拇指区域

当我们拿起我们的平板,对于一只手的操作来说还是太大了,所以要使用两只手。再次,拇指很重要。我们倾向于在边缘抓住平板,在确定的位置上下移动,拇指位置在中部到顶部三分之一范围移动。这个姿势使得相邻边和顶部角非常容易点击。在手指不相邻边,顶部和底部是不友好的区域,由于需要拉伸拇指。底部尤其困难,拇指几乎没有靠近底部。有时候,那个部分甚至无法看到,因为最懒或许也是最正常的平板姿势是:放平平板,底部边沿靠近毛毯,毛衣或者腹部。

无论屏幕多大,拇指驱动的重要性不会递减

由于平板握姿在屏幕边缘,拇指区域和手机上的完全不同。

当然我们也点击屏幕中间。屏幕增大,我们手的区域也增加。但是不同于鼠标光标,我们的手指被胳膊的拖累,不能非常有效的在屏幕上滑动。 手指要带动整个肩膀,这样做需要花更多力气。一个界面不应该要求生理运动:

将常用操作成组的放置在拇指可到达区域。

大家都愿意使用拇指。

笔记本平板电脑:在上面装一个键盘

如果按比例放大屏幕对于我们如何操作设备有一个很强的影响,那么增加键盘对于使用习惯产生更加巨大的改变,则很容易理解。我们的姿势,包括我们的手和胳膊,随着增加了键盘而改变。直到最近,平板触屏结合键盘的电脑几乎不能被辨认出来。直到win8出现。

在2012年,windows用尽全力,向世界上使用人数最多的系统的人,介绍了笔记本的触摸交互。作为结果,一个新触摸设备类型——触摸屏笔记本和平板加键盘的组合,冲击了消费市场,创造了全新的经济环境,刷新了对设计师的要求。

亮点是,平板电脑要求我们的双手在键盘和屏幕之间移动。在平板电脑一代来临之前,很多对这个概念的冲击都失败了:手来来回回要做太多工作,乃至使人变成了大猩猩一般笨重。在科学小说《少数派报告》和《钢铁侠》中也有同样的批判:”谁想要在空中不断地用他们的胳膊工作?““没人想垂直的点击屏幕。”2010年乔布斯蔑视地说。“这是个不错的dbo,但是经过一段时间你开始疲劳,再过一段时间,你的胳膊就抬不起来了。”

研究表明并不需要有这种担心。一项intel的研究表明,人们快速适应在这类新设备上触摸,选择使用触屏相对于选择鼠标和键盘,占了77%。尽管老式的光标有可用性和精确度,但人们所触屏感觉更加自然和直接。其他的研究也说明了这种情绪共鸣。其中一个研究说,当人们“触摸”一个网站而不是用鼠标点击时,人们对产品附加了更多价值。当点击被引入,冷冰冰的像素在某种程度上变得有了物理对象般的温度和情绪化投入。我们将更加深入的探讨这一话题,在第四章中,我们主要谈谈手势界面。

同样的,触摸屏不能完全取代鼠标,但是可以欢迎这种混合的附加“就像有一个额外功能的笔记本,”一个intel测试员说。通过使用平板电脑,人们可以轻松的通过触摸,键盘,鼠标和触控板操作:不管怎样,输入变得更方便了。虽然有很多批评,使你觉得这只会比大猩猩的胳膊更糟。但为什么大家的胳膊没有变得麻木?原来,人们很快就找到了如何不需要抬起胳膊使用触摸屏。John Whalen的一项研究表明,当我们使用触摸屏,我们把我们的手臂放松的放在键盘旁,在屏幕的角落保持一个放松的手势。

平板电脑的点击区域

这种“手在角落”的姿势,定义了平板电脑拇指区域。又一次,把触摸目标放在拇指容易接触到的位置,避免抬高手臂。

无论屏幕多大,拇指驱动的重要性不会递减

在平板电脑中 ,拇指的热区在设备的底部角落,拇指热区之外的其他区域是食指热区。

不是人人都适应底部姿势。有一些人用食指点击屏幕作为主要手势。对于设计师,这样会抓不着头脑。食指的热区和拇指的热区正相反。对于食指,屏幕的中心很容易点击,角落则比较困难。

优化拇指意味着会弱化食指,反之亦然。虽然一个布局不得不获得,和其他的触摸设备一致,研究仍然给出了边界。在随着使用设备的经验增加,平板电脑用户更倾向于使用拇指,将手臂平放。

无论屏幕多大,拇指驱动的重要性不会递减

触摸屏平板电脑的专家级用户更偏向于使用拇指,甚至点击屏幕较深的位置。

通过我们审查,成因中最惊人的一致性是:

无论屏幕多大,均为拇指驱动。

拇指提供了最方便的移动范围,而出了最小的力。这种生理上的放松是贝尔实验室的研究者们在设计界面时不得不去重视的,这点同工业设计师们一致。这种人类环境学的考量会决定数字界面的布局。我们开始着手于一些关于触摸设计的普遍规律研究,然后驱动不同设备的规范。

 

作者:liguoran

原文地址:http://www.ui.cn/detail/87858.html

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30347/

(0)
CatherineCatherine
上一篇 2017-05-28 06:08
下一篇 2017-05-28 08:27

相关推荐

  • 多媒体H5:移动端最简单的动画制作方案

    了解和使用多媒体制作H5已经成为前端工程师的必备技能。

    2017-05-10
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • 以手机淘宝为例,看原型图易缺失的交互场景

    Echo :以iOS版手机淘宝历史搜索为例,本文作者希望通过展示的原型图来讨论易遗漏的交互场景,让读者得到收获,并总结出以后如何避免遗漏交互细节与定义。

    2017-09-29
  • 小而美的过场-视觉设计

    有些网站无论在内容,可用性,设计或者功能等方面胜人一筹,其取胜之道在于交互和动效的细节上。在这里通过各种模型和大家分享一些案例,并分析为什么这些简单的方式能产生让人难忘的效果。   我们常常会用Pho…

    2014-09-20
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11
  • 使用Axure制作出信息化风格的精美简历(提供模板源文件下载)

    最近又到了每年“金三银四”的求职旺季,相信这段时间很多同行朋友们也正在找工作。在求职的过程中简历是非常重要的一块敲门砖,设计精美的简历能帮助你获得更多引起招聘人员注意的机会。如果我们能花点时间从设计感方面来包装一下自己的简历,这样既能体现自己的求职态度,又能展示出自己的专业细节,相信能让大家的简历增色不少,所以今天这篇分享我将教大家如何使用Axure制作出信息化风格的精美简历。从正式分享之前我需要先说明为何要使用Axure来设计简历,而...

    2018-03-24
  • 大势APP的用户体验究竟“火”在哪儿?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:大势APP的用户体验究竟“火”在哪儿?周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目本期主讲老师▼用户体验设计UX是交互设计中非常重要的一点,每个APP根据适用人群和功能设计的不一样,都会有不同的用户体验,下面来说一说在众多...

    2018-04-07
  • 一年多的时间中经历2次爆发,Faceu在运营方面的过人之处在哪?

    作者:思达维琦   1. 产品介绍 1.1 产品形态与定位 faceu激萌是一款主要面向年轻用户(15-35岁女性为主)的自拍P图工具、视频社交工具,在app store中的官方描述为“Faceu激萌—动态贴纸、美颜自拍、视频聊天、卖萌神…

    交互专题 2017-08-07
  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03