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

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

相关推荐

  • 任务优先级的重要性:为核心任务设计

    作为一个交互设计师,在日常的设计工作中经常会问自己或者产品经理最多的问题就是,“这个功能用户用得多吗?用户主要在什么场景下用这样的功能?他用这个功能的目的是什么?等等”,问这类问题的主要目的是判断功能的优先级,在确定了优先级后再根据它去想办法去简化任务流程以及界面设计。

    2017-05-28
  • 给用户带来新的feel|5个好玩的交互设计效果

    真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。—— 巴尔扎克近期在工作中偶然发现的3种移动界面布局,从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式,更多的让点击率、产品凸显展示,总共5个好玩的交互效果给大家分享。开发资源不够或快速上线的页面交互设计上图在专业术语中叫做流体交互效果,这种交互效果的好处与坏处优点:避免小分辨率的情况下,出现水平条的情况。缺点:分辨率小...

    2018-04-17
  • 如何输出一份合格的交互设计文档?

    做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。

    2017-05-15
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25
  • APP设计:那些打动人心的设计点(二)

    上周写了一篇文章《APP设计:那些打动人心的设计点》,总结了八个APP的小设计点,这些小设计点不是针对APP的核心业务和功能的设计,但会给用户带来一点小便利和小惊喜,就像电影最后的彩蛋,让人期待而心动。紧接着上篇,我们继续说说那些打动人心的APP设计。

    2017-05-05
  • 目标导向设计法02:如何确定设计目标?

    上一篇文章《目标导向设计法01:如何才能让交互方案更靠谱?》说的是设计的本质是解决问题,所以做交互设计要有设计目标;而设计目标包含产品目标和用户目标。这篇文章来说说如何确定设计目标。用户场景:在某时间(when),某某地点(where),周围出现了某些事物时(with what),特定类型的用户(who)萌发了某种欲望(desire),会想到通过某种手段(method)来满足欲望。某理财应用要做一个续约的功能,主要针对购买的理财产品将要到期的用户,提醒他们可以续约。提供的续约信息包括用作续约的本金,续约方式(本息续约),预期增加收益,续约期限,续约后的到期日,续约说明。续约操作后需要审核,审核一般需要1~2小时,通过后会有短信通知。由于续约能够给公司带来不少收益,因此希望用户在操作上比较流畅,保证不会因为操作而流失用户。“心理模型指相互关联的言语或表象的命题集合,是人们作出推论和预测的深层知识基础。”

    2017-05-07
  • 用超多案例,帮你避免交互设计中的「刻板印象 」

    一直在看奇葩说,听到很多次的一个词叫“刻板印象 ”。而人之所以有“刻板印象 ”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象 ”。毋庸置疑,使用“刻板印象”(经验)能无形中提升工作效率;减少沟通和开发测试成本;也不会太多的打破用户习惯。然而,它也会带来负面影响,让我们对真实世界失去客观判断。

    2017-06-21
  • 抛砖引玉——VR应用UI设计心得

    “2016是VR元年”,这一观点早已在计算机互联网行业中流行开来,与VR相关的各种分析研究也是层出不穷,包括盈利模式、发展预测、平台构建等。而随着Google Cardboard等技术逐渐普及,VR使用成本也在不断降低。因此在未来,VR技术对于日常生活的影响,也将变得非常令人期待。目前很多VR应用不在以PC端为主要载体,而是将平台选定为保有量大、技术成熟的手机作为硬件平台。而UI作为应用中一个重要组成部分,其对于用户体验和产品推广的重要性可想而知。笔者想借此机会简单分享一下个人对于VR应用UI设计的心得和体会。(注:笔者在下文中所指的VR模式指用户已经带上VR体验设备,双眼通过分屏已经进入沉浸式体验情况)

    2017-05-28
  • 设计思考模式(一):删除、组织、隐藏、附加

    “删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“先假定所有内容都是视觉噪音,除非你证明它们不是。”(《Don’t make me think》)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-03
  • 老外看中国的移动App设计精髓-4 定位、下载、广告

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11