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

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

相关推荐

  • 回答这3个问题,完善你的交互设计(文末有彩蛋)

    “我躺在沙滩上,感觉到细碎的沙子在后背陷入;我踩在小溪里,感觉到脚底的乱石和流过脚面的溪水。我和沙子,我和溪水,产生了交互。”如果是静态的画面,我们恐怕不能确定画面中人是先吼叫被抓住,还是先被抓住再吼叫:
    “疯狂罪犯终于落网!”
    “魔法界警察暴力执法!”
    ——这两者之间的差别可大了。“大页面的设计是焦点的设计,小页面的设计是空间的设计”“扁平化其实为了让你觉得地方足够大。你信吗?反正我信。”——“李白”“使用APP,你不需要别人告知左箭头是什么意思。”你应该熟读Android和ios的官方设计规范、人机交互指南文档,只要遵循这些规范,用户不会因此犯错。
    Ps:规范可以帮我们“不出错”,但要达成“绝妙的设计”还需更多创造力。突然!你被人打晕了!
    醒来的时候你发现自己到了一个陌生的地方。
    现在你在想啥?——
    “我在哪?”
    “我是谁?”
    “我该怎么办?”“我在18层1806,我要去3层0303。出门左拐坐电梯,出了电梯再右拐“

    2017-05-23
  • 交互总结篇(二):流程设计

    上篇文章介绍了交互框架与布局的设计, 详情请见《交互总结篇(一):框架与布局》,而本文作为交互设计总结篇的第二篇——流程逻辑篇,主要是系统地整理一下交互流程设计所需要思考的方向。指由两个及以上的业务步骤,完成一个完整的业务行为的过程。

    2017-08-04
  • 不会Sketch的设计师将要被淘汰!

    这  是 一 本 让 我 废 寝 忘 食 的 书前几天小花闲来无事逛知乎被一篇名为《写一本书出版是怎样一种体验?》的问答吸引了目光,里面有一位作者黄方闻详细的介绍了他的第一本书《动静之美——Sketch移动UI与交互动效设计详解》筹备历程。Sketch这款软件在UI设计上确实有着无可比拟的优势,很多大公司都在用sketch工作,再不会Sketch会被淘汰掉。目前用sketch跟ps的人数比越来越接近了。Sketch因其强大的功能以及极低...

    2018-03-02
  • 双11干货!写给运营视觉设计师的交互小技巧

    58UXD – 马世光:双十一就要来了,本文为你分享两套运营设计利器。运营视觉设计师不同于UI和交互设计师,运营视觉设计师的工作要求他们更加注重视觉丰富性的表现,难免会淡化交互逻辑层面的思考,优秀的体验需要视觉与交互兼顾,今天我就为运营视觉同胞get两点交互小技巧,方便我们的产出既能视觉爆炸也能体验棒棒!

    2017-11-01
  • Apple Watch超细致的硬件交互设计?什么!硬件还有交互设计?

    阿西导读:交互设计在任何有与人产生交互的设备|系统中,人机交互的范围很广,但交互设计的目的是为了提升整体的用户体验. 冷锻不锈钢,炼就强韧与魅力。 产品的用途,决定产品所用的材质。Apple Watch 设计的初衷是为…

    2015-01-26
  • [MUX翻译] Apple TV 人机界面指南

    作者:hexin 新Apple TV重新定义了起居室的体验,你能将非同凡响而身临其境的内容投放到大屏幕上,这是前所未有的体验。 1 概述 1.1 设计原则 无论你是在开发游戏、媒体流应用,还是家庭实用应用,在构想产品的时候…

    交互设计 2015-10-08
  • 现在时隔半年,再次分析一下微信读书这个产品

    从15年8月28日 微信读书 APP低调上线到现在已经差不多快半年了,对于这款含着金钥匙出身的产品,一开始似乎并有多得到太多的好评,甚至因为 好友阅读排行 功能而受到很多争议。 现在时隔半年,我以一个普通读书爱好…

    2016-02-23
  • 超全面!聊天机器人的界面交互设计实战经验总结

    最近在做智投App的机器人Neo的原型设计,是一个chatbot 聊天机器人 ,整理了一下关于 聊天机器人 设计的一些心得。一. 背景:这是Neo的第一个版本。Neo通过问答的方式了解用户的基本信息…

    2017-08-02
  • APP小红点如何使用与实现逻辑

    作者:APP君   我们现在已经习惯小红点的不断的骚扰了,每天都不知道要点掉多少个手机APP上的小红点。有些童鞋点击 APP小红点 都已经成瘾。只要看到有小红点就会自然而然去触摸一下。 所以,APP的交互设计已经影响…

    交互专题 2017-08-07
  • mBack交互方式分析

    本文作者将对魅族最新研发的交互方式—mBack进行分析,从谈论手机操作系统方式与电脑的操作系统方式有着两个较为明显的差异,到分析mBack的缺点,值得一看。乔布斯说:伟大的产品都是只有一个按键的。在已经将交互优化到已经不能再删减时,如何有效的组织和隐藏就显得尤为重要。随意性用户可能使用过类似的产品或服务,有兴趣使用更为复杂的产品,但是不愿意接触全新的产品,除非新功能足够简单。主流用户是最大地群体。他们使用产品的目的是完成任务,他们永远也不会产生学会所有功能的想法。

    2017-05-01