大产品小细节!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

相关推荐

  • 如何设计一份专业且有价值的交互规范

    很多设计团队都会有一套比较成熟完整的交互规范,好的交互规范能够保证设计的一致性,减少沟通和开发成本,提升效率。由于笔者是设计手机系统和App相关的,所以简单的和大家聊下如何设计交互规范。

    2017-05-11
  • 【新锐玉商风云榜】颜传赞:以‘用户体验’为支点 撬动家装行业“一键式”转型升级

    在父辈创造的奇迹上,是传承、是创新、是开拓,每一位新生代年轻玉商都在给出自己的答案。——“新锐玉商”专栏总题记新锐玉商风云榜他是“2016浙商年度创新人物”;他提出“构家”如“构车”的“一键式”整体家装新理念,推动家装行业从传统的手工作业升级为家装工业4.0;他的公司“构家”获得复星集团数亿A轮投资。他就是坊间广称为“船长”——杭州构家创始人兼CEO颜传赞。在经济创新这条漫长的大道上,颜传赞以玉环人海派的作风和追求卓越品质的韧性,谱写“...

    2018-02-03
  • 摧残人类的交互

    特仑苏:积分系统 购买每箱牛奶都会有一张积分卡片,上面有一行验证码。如果你认为在官网输入验证码就能获取积分,那就想的太简单了。你要拿起手机,编辑短信“CZ+长长的16位数字的验证码”,发送到长长的16位数字的…

    2014-12-24
  • 听说,昨天网上打了这么一场营销+公关大战~

    你喜欢我们这些文字的话就推荐给更多的人吧。姐姐先行谢过了!我们公众号是:Aioued,记得分享哦,么么哒! ----------------------------我是一条分割线,你看不见我!-------------------- 正文: 这件事的起因,…

    2014-10-30
  • 交互设计控件之按钮设计

    ♝点击上方“交互设计学堂”关注我们,送电子书一.主按钮和次按钮很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去做的。主次按…

    2017-08-04
  • UCD,以用户为中心的设计

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。任何项目都从一个idea开始,你走在路上,蹲在马桶上;吃着饭,看着电视,灵光一闪,觉得大致可以做一个什么东西来实现世界的爱与和平,这就是一个愿景的诞生;来源无法归纳,却是后面折腾的开始。
    然后就是“分析研究”,分析市场,分析技术,分析用户,一边分析一边验证愿景;顺利通过这个环节,得到的就是设计需求。需求的来源多元,组成亦是多元。需求得到,就要进行梳理,以确定下来;这就是“需求过滤”或者“需求定义”。
    接下来就是把需求转化成对应的功能和数据,这是产品的骨骼血肉,功能数据要满足需求。比如需求是解渴,对应的功能就能是可乐或者矿泉水,但不能是热干面。从这个环节起,产品从抽象变具体。
    功能数据有了,长什么样?我们要把它们设计出来。设计分成“概念设计”和“细节设计”两个阶段,设计又分为“交互设计”和“视觉设计”两条线,所以就有了“概念交互和视觉设计”及“细节交互和视觉设计”。
    设计过程中需要进行“测试验证”,验证的结果用来迭代设计,所以大家看到有个双箭头。设计好了,提交研发。在这个阶段,我们做“研发支持”,也就是传达设计需求给研发,并且做研发过程中针对突发情况进行及时的设计修改;比如某个提示的补漏之类的。
    最后是“设计验收”。一般来讲,刚研发出来的版本多少有些变形有些不符合设计需求,所以我们要验收。列出结果清单,打回去重新调整。调整到什么程度才可以,要看具体到项目周期和策略。举个例子:我们筛选好约好被试(测试用户),分配给他们分析产品和分析任务,比如对比京东和淘宝的支付流程,让他们回去好好体验一个礼拜,让用户熟悉产品以心里产生评价。然后回到我们实验室,再走一遍,这一遍是被观察。然后就是访谈,询问他们的各种维度的评价,比如对于收货地址选择方式的偏好,最后我们统计归纳。这就是让用户来帮我们分析。“其实你什么都没有做错,错在你太老了。我们最早看到Snapchat,外国13-18岁小孩在用,我们高管用了觉得好傻好无聊,看不到价值,只投了一点,后来涨得很快。这个公司我们副总去过,就是海边一个玻璃房,很小的公司,感觉一个石头就把他们击破了。当时只有2000万美金,我们没进去,现在远远超过我们想象,百亿美金。

    2017-05-31
  • Medium评选的年度最佳设计文章2016

    译者:陈晶,审校:刘洁 该文章为UXRen翻译组的陈晶和刘洁同学基于Medium的文章《Medium’s Best Design Writing of 2016》整理、翻译和审校完成,为我们呈现了北美科技圈在2016年的最佳设计文章。 注明: 1、以下文…

    交互专题 2017-08-07
  • 怎样挣钱?用户体验是一个值得关注的话题

    近年来,“快闪”成了营销届的新玩法,不少大品牌纷纷开起了快闪店。何为“快闪店”Pop-upshop在一个固定地点,临时搭建起来的零售商店,存在时间长短不一,几天或者几周,有的几个月,也称Pop-up shop。坐标:成都远洋太古里品牌:欧舒丹时间:2018年3月2日—8日欧舒丹粉樱咖啡快闪店的出现,正值樱花季。这场满载法式浪漫的活动,呈现出唯美场景,现场随处可见,络绎不绝的打卡人群,这场营销又让欧舒丹火了一把。坐标:香港皇后大道品牌:C...

    2018-03-30
  • 交互设计中的视觉基础-格式塔理论

    爱UI小课堂今天从交互设计开始Interaction design交互设计师是一个理性与感性相结合的职业,既要有严谨的逻辑思维能力还要有良好的审美能力,所要具备的知识涉及方方面面,格式塔理论作为视觉设计的基础知识也是交互设计师必备知识之一。20世纪初奥地利及德国心理学家创立了一套视觉感知的格式塔理论,格式塔理论是我们在心不在焉与没有引入反思的现象学状态时的知觉的最终结果,强调经验和行为的整体性。这个理论为用户界面设计准则提供了相关的基础...

    2018-04-26
  • iOS与安卓的交互特点

    1、物理硬件(detail返回到list) 电源、屏幕、返回、搜索 2、操作动作:(编辑删除、长按删除) android:长按-双击 ios:基本手势(滑动) 3、导航栏(detail返回到list、个人中心drawer) 跳转按钮、展示数据(…

    交互设计 2018-03-13