最新公告
  • 欢迎您光临xd素材中文网xdsucai.cn,服务于广大UI设计师。立即加入我们
  • 手机拿法也会影响介面设计– 浅谈拇指法则

    行动互动设计Thumb Zone – Mobile UX

    当萨哈跟随2019换机潮从万年的iPhone6更新到iPhone 11,拿到新手机的那一刻不是欣喜与期待,而是默默在心中大惊「怎么那么大!好重好不习惯!」从4.7寸直上6.1吋萤幕的iPhone 11手感是全新的体验,第一件事担心的是躺在床上滑手机砸到一定超痛(误)原本只手能遮天的范围,缩小到只能按到萤幕宽度3/4是极限,甚至要按关机键都得在手掌上挪个位置,对于单手使用者转换期需要较长适应的时间。这让我回想起以前看过的拇指法则。如果应用在近年的装置上,是否会改变设计师遵循的介面设计法则呢?

    iPhone 6 vs. iPhone 11

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

    • 单手使用手机的比率49%
    • 以右手拇指操控的比率为67%
    • 以左手拇指操控比率为33%

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

    拇指vs. 小萤幕

    根据2016 年Samantha 提供的模型,以一个4.7 寸手机女生能触及的范围如下图所示,绿色是轻松可以触碰到的,橘黄色区域是需要伸展甚至移动抓握区域,而红色则是困难碰到的地方。

    The Thumb Zone: Designing For Mobile Users

    透过这个模型,我们可以发现许多APP 介面的趋势由上方的button 默默移至下方绿色拇指区域,让使用者常用的功能可以更轻松的达成任务。例如版的Facebook 将上方汉堡menu 和讯息功能统一放到下方工具列,并摆出最常用的四大功能,其他就合并在汉堡里收纳;而Airbnb 的固定式工具列则简单明了列出所有五大项功能在最下方。台湾区我则举虾皮为例,除了工具列外,可以看到虾皮将主要服务也都置放在易触碰的位置,并往左滑看更多。

    那大萤幕手机呢?

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

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

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

    大手机已是基本盘

    一年前大手机只是趋势,而现在大手机已经基本款。

    在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 又更进一步增加拇指触及范围了。但我自己是还不习惯这个下拉画面功能的行为模式,且对使用者来说其实是多两个拉收步骤增加认知负担,蛮好奇真正使用这个功能的比率有多少。

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

    互动设计的改变

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

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

    结语

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

    xd素材中文网,提供优质的UI设计资源免费素材,有xd源文件,sketch源文件,设计规范,实用的商业ui设计教程。
    xd素材中文网 » 手机拿法也会影响介面设计– 浅谈拇指法则

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    xd素材中文网
    致力于ui设计领域

    发表评论

    • 6758会员总数(位)
    • 26583资源总数(个)
    • 198本周发布(个)
    • 12 今日发布(个)
    • 386稳定运行(天)

    提供最优质的资源集合

    加入会员 免费领会员