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

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

相关推荐

  • 双十一来了,淘宝的登录页有bug?我有解决方案!

    关于淘宝的登录页设计中的BUG,本文作者就用所学的用户研究、交互设计以及产品经理相关的知识来分析一下,并提出了自己的解决方案。

    2017-05-17
  • 交互设计师的60日计划之第十一天

    今天又是上下午都有会,下午还感冒了…差点忘记写每日,要睡了突然想起来,就拿用研小总结凑个数吧。 20150806 及时给出反馈结果 用户的一些基本特点比起用户体验更注重功能,期望能有更多的功能。开发人员学习能力…

    交互专题 2015-08-20
  • 译文 | 4种帮助设计师整理设计思路的方法

    当我们刚刚接手一个项目的时候,我们总能在初期迸发出很多有趣的想法,很多闪光的细节都是偶然闪现的,但当我们在设计的过程中,有多少能够真正落地到产出中呢?怎样才能成功捕捉到这些有趣的创意,并使之在后续的产品设计中表达出来?本文向大家推荐了四种方法,帮助大家整理设计思路,避免创意在你的脑海里逃走!下面进入译文。

    2017-05-25
  • 可视、清晰和简单:APP底部导航设计三原则

    作者:Nick Babich(译者:Darin) 设计师们都知道设计的目的不只是为了让产品看起来好看。无论是网站还是app,如何黏住用户,同样是设计所需要考虑的方面。设计就像是一次对话,导航也是一次对话。因为如果你的用…

    2017-08-04
  • 双11的电商设计风格:5个角度分析天猫视觉页

    天猫官方的双十一预热页面刚刚上线,本文作者就帮大家分析双十一电商设计的流行趋势,包括场景、配色、角度、标题、辅助性元素等。干货+趋势,绝对值得一读!

    2017-05-17
  • 通过减少认知超载,提升用户体验(上)

    “怎样才能改善用户体验设计?这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章太长,会分成两次推送,欢迎期待~“通常,飞速行驶的货车不可能轻松地停下来。因为它需要花费很多努力,运用更多的动能去改变运动状态。与其强迫人们从他们的主任务上转移注意力,不如直接带他们去他们想去的地方。”
    ——Luke Wroblewski,谷歌产品总监

    2017-05-07
  • IxD-IxDSchool百科

    IxD Interaction design  交互设计 很多人在问:IxD是什么意思?,IxD中文意思是交互设计 国外一般称之UX或IaD,国内一般称为交互/交互设计 标签:IxD是什么意思  

    交互设计 2015-01-05
  • 一次虚拟项目练习:支付宝到位-Redesign

    大家好,其实,我是一个视觉设计师。嗯,没错,因为对交互设计的兴趣使然,这次我想在此放一篇交互设计类的文章,以总结我这段时间的思考与设计过程,仅供交流。请多多指教。

    2017-05-11
  • 轮播图这样的交互方式,真的有效吗?

    轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢?
    固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户,投放100%符合他们预期的内容几乎是不可能的,这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。
    —— 电商专家 Depesh Mandalia

    2017-05-15
  • 做完这5次Axure实操,0基础不仅做出高保真,还能提升产品交互

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,2000多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)产品思维和交互贯穿全程,学完不仅能画出高保真,同时告别画图经理。具体来看,通过6...

    2018-04-07