15919993369

移动端UX设计也应遵循拇指法则

更新时间:2021-06-13

我回想起以前看过的拇指法则。如果应用在近年的设备上,是否会改变设计师遵循的接口设计法则呢?

iphone6iphone11-2048x988.jpg

iPhone 6 vs. iPhone 11


你都使用单手滑手机吗?如果是的话,仔细思考一下是否主要依赖大拇指的移动来操作呢?资深互动设计师 Steven Hoober 在 2013 年针对一千三百名手机用户的量化研究发现以下数据:


1、单手使用手机的比率 49%

2、以右手拇指操控的比率为 67%

3、以左手拇指操控比率为 33%

4、通过 Steven 的研究发现,有一半的使用者单手持拿手机,依靠拇指进行操作。而在近年大屏幕手机的趋势下,不得不利用双手持握手机时,人们大部分仍依赖拇指进行互动。而 Josh Clark 的研究也支持这个结果说明 75% 互动任务是由拇指完成。

The-Thumb-Zone.png

拇指 vs. 小屏幕

根据 2016 年 Samantha 提供的模型,以一个 4.7 寸手机女生能触及的范围如下图所示,绿色是轻松可以触碰到的,橘黄色区域是需要伸展甚至移动抓握区域,而红色则是困难碰到的地方。通过这个模型,我们可以发现许多 APP 接口的趋势由上方的 button 默默移至下方绿色拇指区域,让用户常用的功能可以更轻松的达成任务。例如旧版的 Facebook 将上方汉堡 menu 和信息功能统一放到下方工具栏,并摆出最常用的四大功能,其他就合并在汉堡里收纳;而 Airbnb 的固定式工具栏则简单明了列出所有五大项功能在最下方。深圳区我则举虾皮为例,除了工具栏外,可以看到虾皮将主要服务也都置放在易触碰的位置,并往左滑看更多。

UI-Thumb-Zone.png

那大屏幕手机呢?

通过我自身使用 iPhone 11 的经验,这个模型已经改变。我利用手机内建绘图软件简单绘制了以 S 号手掌在 6.1 吋手机上的触碰轨迹如下,可见手机上层几乎是触碰不到的,而右手持握者则是触碰不到左侧 1/5 处屏幕。

UI-Thumb-Zone-iPhone11.png

6.1 吋手机拇指触碰轨迹 (不移动手机的情况下)

若是将此模型套在 airbnb 现在的手机 APP 上,可以看到下方工具栏的探索如果单利用右手持手机,是无法不变换手掌位置轻松用大拇指按到的。这也是为什么在 2020 年的接口设计趋势里,不但主功能往下移,甚至连 IMDb 和微软 APP 都将搜索栏直接挪至下方,让拇指可以做的事一气呵成。


再来看看深圳 Richart 的 APP 支付页面,将五大主功能罗列在画面底部,让使用者在点击工具栏的收付后可以轻松用拇指按到下一个功能菜单。比起以前开方块或 list 的呈现方式,又更符合手机上的行为互动了。这个 UI 真的是要给台新银行拍拍手,不愧是年轻人的移动银行当之无愧啊!

app-UI-Thumb-Zone.png

大手机已是基本盘

一年前大手机只是趋势,而现在大手机已经基本款。在 2018 十月 Missbeez (one of the hottest startups in Tel Aviv) 在 on-demand app 的数据显示使用大手机 (iPhone X/XS/XR, etc.) 占比约 16.3%,而在 2019 十二月经历一波 iPhone 11 的换机潮,大手机的占比已经来到 41% 且尚在稳定的成长中。可以预估明年 iPhone 12 在双模式解锁且支持 5G 的情况下,苦苦支撑的小屏幕手机用户将会加入这波风潮,大增大手机用户的占比。


而 iPhone 本身因应超高屏占比的措施,从小手机时代其实就已经做了在 home 键点双击就会画面下拉的互动设计。而在取消 home 键后的 X 系列则是在设定 > 一般 > 辅助使用开启屏幕上方触控,便可以使用稍微下滑横条的手势来下拉屏幕画面。而在 iPhone 11 则是直接在设定 > 辅助使用 (Accessibility) > Touch 开启 Reachability 就可以使用画面下拉功能。听说 Andriod 手机是直接开大绝,单手模式让画面往右下缩到拇指触及范围内。这个方式的确比 ios 又更进一步增加拇指触及范围了。但我自己是还不习惯这个下拉画面功能的行为模式,且对用户来说其实是多两个拉收步骤增加认知负担,蛮好奇真正使用这个功能的比率有多少。

QQ图片20210613154853.png

iPhone 11 辅助画面下拉

PS. 如果你觉得玩游戏的时候,那横条很碍眼的话,可以看看这篇文章教你怎么隐藏 home indicator 喔!


互动设计的改变

产品的本质没变,但会随着科技的演变而改变它的形式。因应大手机屏幕的风潮,为了让单手使用者可以更顺畅的浏览网站,接口互动模式也逐渐改变。从以前的按钮式互动,2020 的 Call to Action 形式产生各种变化。


从 2020 mobile UX design trend 来看,instagram 经营的 Stories 形式就是一个最佳的例子。除了可以简单使用大拇指左右滑动查看前后则内容,往下滑关闭 Story 模式,甚至利用往上滑的方式达成 Call to Action 的任务。instagram stories 的成功也引领的这股 “故事风” UI 概念落实在其他 APP 的表现形式里。

Mobile-UX-design-trends.png

结语

其实手机的形式从早期超级大,到超级小,到现在因为内容王道的世代渐渐做越大,互动模式也跟着使用方式逐渐改变。从基本的点按触发,到现在使用者也早已习惯左右滑动的行为模式。在我换 iPhone 11 的时候曾和弟弟抱怨过手机太大握不住,他回答我说:没关系啦,妳的手会变长,虽然我当时是白眼以对,但仔细回想,的确自己会渐渐习惯大手机的握法,找到最适合偷懒的方式滑手机。也许使用者会因为大手机而渐渐改回用两只手滑手机也不一定,不然就要看设计师们能祭出像手势等创新的互动设计来满足单手使用者啰!









Copyright © 2016-2020 https://www.xundang.com 深圳市迅当网络科技有限公司 版权所有 粤ICP备16022386号