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

你有没有遇到过一款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

相关推荐

  • 营销型网站建设如何优化网站, 提高用户体验!

    营销型网站建设如何优化网站, 提高用户体验!据相关研究表明:当页面加载时间从 1 秒到 3 秒,跳出的机会增加了30%左右。1s到5s的机会增加到90%,如果你的网站需要10s的加载,跳出的机会将会超过120%。  这是令人难以置信的,因此有效的提高网站加载速度,对于搜索引擎优化而言很重要。  那么,我们该如何提高页面加载速度呢?  首选,我们需要对已知网站速度测试,总结归纳问题:其次,制定相应的整改策略:1、开启MIP百度对于MIP的...

    2018-04-11
  • 运营设计常用“套路”拾趣(附实战案例)

    阳春白日风花香,又是一年芳菲至,在这最美的时节,各种运营活动又开启了,就此从视觉角度结合实战案例的小心得,对运营设计的“套路”浅谈一二。罗伯特.庞德说过:“这是一个两分钟的世界,你只有一分钟展示给人们,另一分钟让他们喜欢你。”

    2017-04-30
  • 未来的用户界面,将重新定义设计师的角色

    如果用户界面能够自适应用户的需求,那么设计师实际需要设计什么?如果没有图形用户界面,还需要设计师吗?

    2017-05-10
  • 字体的性格【转】

    任何字体都有其独特的风格,有的让人感觉现代、古典;  柔美、刚毅; 迅速、缓慢;  稳重、轻盈… 在设计时,通常为表达某种情感而选择字体。对字体情感的产生是因为对某种字体的内在韵律,而产生的视觉反应。 另外,…

    2014-09-18
  • 如何制作交互组件库

    曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做个交互组件库了~ 什么是组件库? 就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用…

    2017-07-24
  • 从情景出发的可用性设计

    设计文章 / 交互设计 | 来源:TID | 作者:stephyl 前言         为了优化产品,提升用户体验,产品团队经常做很多事情:数据监测、数据分析、竞品分析…然后给交互设计师提需求,让交互设计师把需求转化为可用的功能…

    2014-12-01
  • 记忆篇|从心理学理解交互设计原则

    无论是设计网页还是APP,我们必须要满足用户的需求, 用户体验的好坏完全取决于你多了解用户。用户是如何思考,记忆,做决策?什么促使他们点击?知道了这些,对交互设计很有帮助。让我们从了解人记忆的复杂性和弱点开始。

    2017-04-30
  • 交互设计 | 如何创作一本足够打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,汉艺国际(H·Art)为大家带来《如何创作一本打动考官的作品集》系列第九期,与大家分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计必须要强调的事儿①——交互设计不仅仅是网页和APP▼交互设计并不是一个单纯研究电子产品用户界面交互的学科。 交互设计包括但不限于用户界面设计...

    2018-04-06
  • 交互设计三要素–目标、任务、行为

    设计文章,交互设计, 基础知识 2014-09-04 来源:阿里巴巴国际UED 作者:zhoudong 编者按:交互设计师是为用户创造好的使用体验,这么纠结出来的方案有时候用户根本不care,看一下这东西不是自己想要的扭头就走,哪怕…

    2014-09-04
  • 移动界面动效设计的全方位科普指南

    读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。

    2017-05-13