浅析手机交互设计中的“拇指法则”

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


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

浅析手机交互设计中的“拇指法则”

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

人类的拇指远比猿类灵活有力,使人类拥有了准确的抓握能力,最终发展出使用工具的能力 。然而在手机操作中,拇指的可操作区域是有限的。如果我们竭尽全力,拇指可以在整个手机屏幕上进行操作(大屏手机除外),但是这也会影响用户使用的舒适度。

浅析手机交互设计中的“拇指法则”

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

导航菜单

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

浅析手机交互设计中的“拇指法则”

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

浅析手机交互设计中的“拇指法则”

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

浅析手机交互设计中的“拇指法则”

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

友好式卡片设计

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

浅析手机交互设计中的“拇指法则”

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

浅析手机交互设计中的“拇指法则”

看完好的例子,接下来再看一个反面典型,这是一个电商APP的购买流程页面,点击“添加新的收货地”会弹出一个表单。这个页面乍一看没什么问题,但是仔细一观察就会发现问题。首先,页面左上方的“取消”链接会给人带来误解,如果我点击它那么是整个购买流程被取消还是“添加新的收获地”这个操作被取消?还有表单右上方的关闭按钮位于Hard区的边缘,拇指很难进行直接有效的操作。这时最好的方法就是缩减表单内容,让关闭按钮可以下降到Natural区。我们要知道卡片式设计最吸引人之处就是其可以在很小屏幕区域内展示尽量多的内容,卡片的本身也对信息进行了归类整理的作用,使用户看的一目了然。如果我们一味着追求设计感而使卡片内容过于臃肿这无异丢掉了卡片固有短小精悍的精髓。

手势

浅析手机交互设计中的“拇指法则”

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

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

浅析手机交互设计中的“拇指法则”

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

总结

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

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

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

 

本文由 @王M争 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-02 16:53
下一篇 2017-05-02 18:42

相关推荐

  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • 交互设计文档如何写,才给程序员以美得享受?

    阿西UED授权发布作者公众号艾欧交互设计ID:aioued文章最后报名线上线下活动:【HBAT创新设计峰会:design+下的生存之道】“写交互设计文档(DRD)目的在于:便于与前端、测试以及开发工程师沟通”交互设计文档重要么?重要!但不是项目必需具备的内容,为什么还要学习呢?其实对于初学者来说,交互设计文档能够很好的梳理产品的逻辑关系、基本的设计规范等问题,让你真正透彻的认识一个产品所有可能性。基本上,在大公司都会写交互设计文档的,便...

    2018-02-01
  • 如果想做好产品,你懂人性心理吗?

    来源:市场部 作者:IT精英 众所周知,产品研发的过程除了必备的资源配给外,都离不开人的参与,需要有客户,需求分析人员,开发人员,测试人员等角色参与其中,才能使一个产品研发的过程顺利开展。既然离不开人的…

    2014-09-21
  • 网站交互设计模式为什么值得读

            对于现在的web的发展来说,这本书优点旧了,里面的相关案例网站都是一些比较早的数据。但是这本书还是很值得一读。就像作者所说的,时间在流逝,模式会变化,适当改变信息密度,网站的…

    2017-08-03
  • 顾振宇:Ubiquitous Fun-交互设计的享乐主义未来——上海交通大学创新设计论坛-体验和交互设计分论坛

    演讲题目 Ubiquitous Fun-交互设计的享乐主义未来 在可预见的未来,随着用户数据的积累和人工智能的发展,产品“可用性”问题会逐渐淡出我们的讨论主题,同时,人们对物质的需求总是非常有限的,因此“实用性”价值空间…

    2017-01-03
  • 交互设计 | 面向“交互领域”的能力转型

    点击上方“蓝色字体”,即可关注公众号文章来源:http://www.zcool.com.cn/article/ZNjM3MDAw.html(  站酷  )文章作者:千夜Ryan_Vision( 授权发布 )立足于交互设计及用户体验的角度谈一谈我的观点,希望对你有帮助。版权声明版权属于原作者,其内容归原作者所有如需转载请联系原创作者往期回顾APP UI结构-用户引导&提示UI设计师们还不重视闪屏设计?设计师的职场习惯如何让你的设计更精致-...

    2018-03-28
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10
  • 「Sketch | 译文」用共享样式创建文本系统

    原文作者:Bunin Dmitriy来自:Medium阅读全文大约需要 6 分钟相信字体样式管理对很多新人设计师而言并不是一件容易的事,甚至很多工作多年的设计狮也并没有很好的规划自己的项目字体样式的习惯,这不但增加了设计项目的维护难度,更主要的是随着项目的不断膨胀,你项目中的排版会变得杂乱无章、极不统一。其实使用Sketch来进行字体管理并不复杂,今天带来的是Bunin Dmitriy的一篇关于文本样式系统的文章,不到十分钟可以让你对文...

    2018-04-14
  • 浅谈“效率导向”的交互设计

    作者: 欢童鞋 周二下午,送妈妈上车后,去奈雪点了杯奶盖,坐在面对门口的位置,看着络绎不绝的人流队伍,除了感叹生意好以及好奇心使然查阅奈雪的开店背景之外,不由的思考“效率”在这里的重要性,店员需要高效为…

    交互专题 2017-12-05
  • 用户体验之网站导航设计师指南

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。“如果用户在导航上遇到困难,他们通常会犹豫是否要回到网站上。”大多数人可能有过这样的体验,当你打开了一个APP,由于没有导航或者导航设计不合理,你花费了很多时间去寻找你需要的东西。那么你很可能不会逗留在这个页面,甚至不会再想使用这个网站。那么你如何创造出“清晰,简单,一致”的导航呢?让我们来模拟一个场景,你在一个星期天的早晨出门去买自己喜欢...

    2018-03-14