大产品小细节!5分钟带你了解经典的费茨定律

金蝶云之家体验部交互设计 师-王梓铭:大家有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,非常重要的定律 —— 费茨定律 。

文章目录[隐藏]

大产品小细节!5分钟带你了解经典的费茨定律

金蝶云之家体验部交互设计师-王梓铭:大家有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,非常重要的定律 —— 费茨定律

上期回顾:《大产品小细节!5分钟了解格式塔原则》

一. 概述

首先来看看费茨定律公式:

大产品小细节!5分钟带你了解经典的费茨定律

看起来很复杂吧, 但实际上并不难,我用一张图给大家解释下费茨定律是什么。当用户需要拖动黄色点到目标区块中时:

大产品小细节!5分钟带你了解经典的费茨定律

费茨定律中的 D 就是从开始点到目标中心的距离,而 W 则是目标的宽度大小。根据公式可以看到,A和 b 都是常量,那么 MT (黄点从左移到目标中心所需的时间)的大小取决于 D 和 W 的值:

  • 当 D 一定时,W 越小,MT 越大;W 越大,MT 越小。
  • 当 W 一定时,D 越小,MT 越小;D 越大,MT 越大。

解释一下就是:

当距离一定时,目标越小,所花费的时间越长;目标越大,所花费的时间越短。(小而远的目标区域意味着用户需要将黄点移动较长距离,并且为了能对准目标还需要做一系列的微调,因为目标比较小嘛,所以耗费的时间自然就长了。)

大产品小细节!5分钟带你了解经典的费茨定律

当目标大小一定时,起点离目标中心的距离越近,所花费的时间越短;距离越远,所花时间越长。(这比较好理解,距离比较近嘛~ 所花时间自然比较短了。)

大产品小细节!5分钟带你了解经典的费茨定律

二. 启示与案例

按钮越大越易于点击

正如前面提到的,如果你想要让按钮的点击率更高可以尝试将按钮做大点,比如这样:

大产品小细节!5分钟带你了解经典的费茨定律

将按钮放置在离开始点较近的地方

还是拿上面两个界面为例子,大家有没有发现那两个大大的按钮是放在屏幕下方的?原因就是「将按钮放在底部可以使 D 变小」,要知道用户完成整个点击操作是要先将手指移动到目标上方,最后进行点击的。那么在这里 D 就是手指开始悬停的位置到目标上方的距离。根据研究表明,人们在使用手机的时候,75%的交互操作都是由拇指驱动的,而拇指悬停的位置恰恰就是屏幕下方。

PS:关于用户是如何使用触屏设备的,欢迎大家看看这篇读书笔记——「阅读」触类旁通:多终端时代的触屏界面设计 文中提到的书本,也推荐大家买来看看。

那么对于 PC 端设备,又是如何使用这一定律的呢?
最常见的使用就是鼠标右键操作了。点击右键,鼠标的右下或右上方就会出现一个菜单,鼠标移动到对应按钮上,点击一下即可完成操作。

相关按钮之间距离近点更易于点击

对于一些相关性较强的按钮,可以考虑将他们放在一起,比如:

  • 在设计 PC 端的翻页按钮时,就可以将「上一页」和「下一页」放在互相靠近的位置。
  • 在设计注册、登录界面的时候,可以将「注册」和「登录」放到一起,如果想要突出「注册」则可以考虑将「注册」按钮做大点。
  • 相关联的操作也可以尝试放在一起,不仅可以在视觉上增强用户对他们相关性的认知,还可以减少在他们之间的距离 D。

无限大的四角与四边

文章开头,我提出了一个疑问:

为什么 Win 系统要将「开始」按钮放在角落 ?

原因就是屏幕的四角和四边 W 无限大,W 无限大的话,MT 就很小了。像 Mac 的 Docker 更是将费茨定律发挥得淋漓尽致,当鼠标 hover 到对应的 App icon 上的时候,icon 还会放大,从而加大 App icon 的W 。

大产品小细节!5分钟带你了解经典的费茨定律

估计大家又会有个疑惑,那就是——为什么四角和四边的 W 无限大?

那是因为光标没法移动到四角与四边之外的地方,你再怎么移动鼠标,光标也没办法移到屏幕以外的地方,所以他们就进入到了「无限可选中」状态。

但是,随着屏幕尺寸越来越大,而且双屏幕的配置越来越常见,这个设计也变没得那么好用了,因为 D 变大了。同理手机端的四角与四边也是「无限可选中」位置,因为手点击屏幕以外屏幕不会响应嘛。(所以各位可以发现左上角按钮一般为返回,右上角为确定)但是在手机上时候,依然会面临屏幕越来越大,按钮越来越不好点击的问题。

三. 小练习

最后,我想跟大家一起做个小练习,那就是请大家和我一起设计手机的关机界面。

明确设计目标

首先明确设计目标:设计手机的关机界面。

明确约束与限制

明确了设计目标后,需要考虑设计约束与技术限制有哪些?(这里我们不考虑技术问题)对于关机操作来说,本身是个非常高危的操作,一经生效就没法撤销了。那么这里的设计约束就有:

  • 此操作不能过于便捷
  • 防止误触
  • 如有必要需要有防待操作

将理论应用到设计中

根据约束,我们开始设计方案。在设计时候,我们不妨将我们所学的费茨定律应用到设计之中,估计这里又有同学会问,费茨定律不是教我们设计出易于点击的设计吗?很明显与你提到的约束相违背啊。其实费茨定律不只能正着用,还能反着用。比如我们可以尝试加大 D 和降低 W。

大产品小细节!5分钟带你了解经典的费茨定律

先尝试加大拇指到目标的距离 D,那么可以得出甲方案。(这设计就是很多安卓手机提供的的方案)

不过正如前面提到的第三条启示,相关的按钮放在一起更便于点击。但是我们实际上并不想让用户点击「关闭手机」而是希望用户点击「取消」,将两个放在一起并不合适,那么我们可以尝试降低「取消」按钮的 D 从而削弱用户点击「关闭手机」的可能,并且根据费茨定律我们可以将「关闭手机」的 W 做小,从而得出乙方案。

但是这个方案还不够极致,这里我想跟大家明确另一点:D 的距离是可以创造出来的。

触屏的伟大之处就在于,它不仅仅有点击操作,还有滑动操作。通过滑动操作也可以创造出 D 出来。如丙方案所示,完成关机操作的总 D 等于「大拇指移动到顶部滑块的距离」加上「按住滑块滑动到右边的距离」。

为什么很多人会觉得 iPhone 的体验比绝大多数的安卓手机要好,看看这个关机界面就知道原因在哪里了吧 。

四. 总结

在文章的最后,回顾一下费茨定律给我们的启示:

  • 按钮做大点(W大点)更易于点击。
  • 将按钮放置在离开始点较近的地方。
  • 相关按钮之间距离近点(D小点)更易于点击。
  • 屏幕的四角与四边是「无限可选中」位置。
  • 通过费茨定律的反向使用,可以降低按钮被点击的可能。

欢迎关注微信公众号:「UXD-Cloudhub」

大产品小细节!5分钟带你了解经典的费茨定律

「作为设计师你需要知道的设计法则」

大产品小细节!5分钟带你了解经典的费茨定律

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com

是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34277/

(0)
震天下震天下
上一篇 2017-09-25 12:22
下一篇 2017-09-26 12:39

相关推荐

  • 隐藏在今日头条百亿市值背后的算法:巨大可能与现实困境

    文/余亮 无论2016年科技圈热门的噱头有多少,对数据基础设施方面的耕耘仍然是决定实力的关键。阿里之类电商数据帝国自不待言,今日头条、一点资讯等在资讯数据领域的开拓更加值得注目。比起电商的物流数据,资讯算…

    2016-01-27
  • ​50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载

    50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载素材下载方法:长按识别二维码,用微信扫描或者长按识别二维码即可加入。并不是只是下载这个素材。超过200G精品素材全部任意下。素材不断更新,添加。。。有任何问题,请联系微信uisheji----------------------------------------欢迎订阅,查看更多精品UI设计素材下载,请关注公众号mobileui

    2018-04-08
  • 从用户体验的角度聊《南方公园:手机破坏者》是如何盈利的

    原文作者:Matt Suckley & DeltaDNA欢迎回到In-App Purchase Inspector,在这里我们会以消费者的视角,定期测评一些F2P游戏。每期文章,我们都会考虑游戏中IAP的诱因、压力、它们的感知价值、IAP带来的扩展内容还有整个游戏体验的评估。最终目的就是看看这游戏究竟值不值得我们砸钱,不花钱的游戏体验是否也能让玩家感到满足。本期文章,我们与数据分析公司DeltaDNA合作,对改编自动画情景喜剧《南方公园...

    2018-04-02
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类 智能推荐大都基于海量数据的计算和处理,然而我们发现在海量数据上高效的运行协同过滤算法以及其他推荐策略这样高复杂的…

    2015-12-22
  • 交互设计五要素

    在交互设计中,我们要了解这一过程的流程是什么?总体可以分为五个要素:目的、用户、场景、媒介、行为。1、目的:首先要弄清楚,这个产品或功能的目的是什么?目的是为了解决用户的某个需求或者给公司带来价值,这…

  • 交互设计思路:积分模块改版总结

    作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。

    2017-05-04
  • 交互设计牛校排行榜 | 卡内基梅隆

    创艺典国际艺术教育之院校介绍有一位老大哥是高校里的老大哥他在艺术、工业、计算机专业非常强势除此之外它还拥有全美顶尖对顶尖的计算机学院和戏剧学院他就是Carnegie Mellon UniversityCMU卡耐基梅隆大学这些看上去毫不相干但都那么强势的学科结合在一起岂不是成了飞机中的战斗机赛车中的四驱兄弟?卡梅这位老大哥还真这么干了他们开设了一个项目那就是——人机交互交互设计中应用最广泛的学科分支卡内基梅隆的人机交互项目是全球的交互项目...

    2018-04-26
  • 【每周开眼】这一周你应该看到的交互设计圈最棒的设计作品

    Duang Duang Duang!【五一免费体验营】“五一”3天假 出去玩? 还是提升专业能力? 来新易,将两者结合!小长假结束了!考研党又纷纷开始了图书馆的占座活动又开始了肖秀荣英语I英语II工业设计史世界现代设计史画手绘呀,搞透视,搞线条,搞设计辛苦了一天就这么结束了哦不是该来一波优秀的设计作品洗洗眼睛了小新给大家准备了晚间夜宵【洗眼睛必备】交互圈国内外大神的优秀作品从中我们不但审美可以得到提升最重要的我们可以学到很多设计的创意方...

    2018-04-08
  • 【线下沙龙】产品经理交互设计大会

    2018年产品经理交互设计交流分享大会活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己...

    2018-04-22
  • 重版权轻用户体验 盲目IPO的腾讯音乐或成下一个多米

    最近,音乐版权又起风云,各大新闻版面被网易云音乐因版权续约未果,下架周杰伦作品的信息霸占,这场由杰威尔音乐独家版权方腾讯音乐主导的“版权狙击战”再次成为行业焦点。众所周知,自在线音乐兴起至今,腾讯与网易云音乐、虾米音乐等音乐平台之间在版权上的纷争已经历了多个回合。但是,距离国家版权局宣布推动腾讯音乐和网易云音乐达成版权合作还不到两个月,在线音乐市场版权之争就因腾讯再起硝烟,令人诧异之余不免有些心寒。所以,腾讯音乐“阳奉阴违”背后,到底有...

    2018-04-08