费茨定律如何指导界面设计

为什么有些按钮大有些按钮小?为什么有些按钮靠得近,有些按钮需要离得远?为什么不同场景下操作方式不一样?关于这些问题不知道你有没有思考过,其实这些都可以用设计法则费茨定律来解释。接下来一起来了解什么是费茨定律?它是如何指导界面设计的,以及它在移动端界面中的应用这三个方面来说。

什么是费茨定律

费茨定律是人类运动的预测模型,主要用于人机交互和人体工程学。该法则预测光标/手指从一个起始位置移动到一个最终目标所需的时间(T)由到目标的距离(D)和目标的大小(W)所决定,用数学公式表达为时间 T =a + b log2 ( D /W + 1 )。其中a、b是常数,a代表手指开始到停止的时间,b代表手指的移动速度。

举个生活中一个开灯的例子:

早期的开关只有一个手指大,每次开灯的时候都需要将手移动到开关上方,然后伸出手指调整到适合位置然后在按下。由于按钮小,在没开灯的时候你根本不知道它在哪里,需要不停的摸,所需时间就比较长。后期大家意识到了这个问题,将开关按钮设计变大,人们操作时只需要将手移动到按钮上方,由于面积大不需要调整直接按下即可,所需时间就比较短。

如何指导界面设计

费茨定律应用比较广泛,其在移动界面设计中也有很好的启发意义,结合费茨定律公式可以得出指导我们设计的三个要点:

1. 按钮越大,所需时间越短

根据公式,当到目标的距离(D)一定时,目标大小(W)越大,所需时间越短,反之越长。下面以支付宝的登录流程为例,如下图所示:

左图是支付宝初始页,该页面主要让用户选择合适自己的操作方式。因此在设计上采用登录和注册按钮并排的方式,目标区域较小,给用户充分选择的时间。

中图和右图,界面中仅仅只有一个按钮,其他注册、遇到问题都可弱化用文字高亮的样式展示,用户在操作时基本不用想就知道点击下一步按钮。大大的减少了操作时间,让用户可以专注于登录上。

2. 距离越远,所需时间越长

当按钮大小一定时,手到目标的距离越远,所需时间就越长,反之越短。但是这里就发现一个问题,移动端如何判断手到目标的距离呢?这里我们可以借用拇指热区来进行判断。随着手机越来越大,不同机型的拇指热区会有所差异,以iPhone6右手操作为例,它的拇指热区。如下图所示:

根据图例可知绿色区域是我们手指最容易轻松达到的,橙色是伸长手指才能触达,操作相对较难,红色区域为难以触及的区域。我们可以判断手指到绿色区域的时间最短,到红色区域的时间最长。因此在设计时我们需要将重要层级高的按钮放到拇指热区的绿色部分中,让目标离手指越近,从而提高操作速度。如下图所示:

以上两个案例均是Feed流界面,在卡片中露出功能有点赞、评论、分享这三个按钮,其中大众点评这三个中点赞的重要性层级最高,因此将其放在绿色最易触达区域,单手操作离手指距离最近,而分享和评论次之,因此将其放在了红色和橙色区域,单手操作离手指更远。

其中微信读书这三个中分享的重要层级最高,因此将其放在最易触达的绿色区域,单手操作更近。

3. 手移动越快,越易错误操作

其实不管你手的速度有多快,当距离较远、按钮较小时,当手移动到按钮上方就会停下来进行定位然后才能准确得进行操作,如果只要求速度,手移动过来直接点击有可能就点中不了按钮,容易进行错误操作。

因此在UI设计中,如果我们想要用户能够快速操作,可以为用户打破距离和大小带来的限制,结合手势操作来进行设计。如下图所示:

以微信为例,在微信列表中为了让用户能够快速操作列表,引入了手势操作(安卓长按、iOS侧滑),当长按或侧滑列表时,就会在当前位置出现操作内容,提高操作效率。

在移动端界面中的应用

在实际交互设计中,合理使用费茨定律,可以让我们的界面使用更流畅,错误率更低。下面我们一起来看看费茨定律的四大应用场景。

1. 来电显示场景——不同状态,不同设计方式

iOS的来电提示在锁屏和苏醒状态分别采用滑动接听和点击接听,可以很好的用费茨定律来解释。如下图所示:

锁屏时:用户手机场景不确定,很容易意外点击。在设计时就需要增加操作距离、延长操作时间,防止误操作的情况,采用滑动解锁就可以增加操作的距离,放在该场景中使用较为合适。

苏醒时:用户正在使用手机,这时候采用滑动操作距离太长了,因此设计为按钮的样式,用户可快速点击接听或拒绝,进而提高用户操作效率。

2. 将返回浮于底部操作栏中——缩短操作距离和时间

随着屏幕越来越大,拇指热区也发生了变化,你会发现左上角的返回按钮单手操作越来越不可能,尤其是Plus、iPhoneX的出现返回按钮显得有点鸡肋。不过在体验资讯类的产品时发现,部分界面他们将返回按钮放到类界面底部左下角的位置,下面将这两种进行对比下。如下图所示:

以今日头条的详情为例,返回按钮在常规的左上角。结合拇指热区你会发现左上角的区域单手是很难到达的。对于资讯类APP需要不断切换看的文章,返回键在左上角无疑加重了操作难度。

以虎嗅为例,他们将返回按钮移动到了底部左下角,结合拇指热区你会发现左下角的区域单手是可以轻松到达的,将返回按钮放在底部,大大的节约了用户操作时间。

需要注意的是,尽管通过分析,返回按钮在左下角单手更好操作,但是有时候习惯真的是一件可怕的事情,比如我在华西医院的微信小程序时,很少能够记住点击底部的前进和后退键,每次想返回上一级,就习惯性的点左上角,结果就直接退出小程序。如下图所示:

面对顶部返回键单手不方便点击、底部返回键又老是记不住点,同时在当前规范下又不适合大面积的使用,怎么样才能帮助用户操作呢?其实iOS按住左侧屏幕边缘向右滑既可以返回上一步,安卓自带虚拟返回键都是较为快捷的操作方式。

3. 合理利用手势操作——提高用户操作速度

安卓的长按和iOS的侧滑编辑大家都比较熟悉,他们多用在列表页的编辑状态,用户长按或侧滑列表,操作按钮就显示在当前位置,操作效率比较高,如下图所示:

以天猫购物车为例,大家知道长按是安卓端常用的功能,侧滑是iOS端的功能,然后天猫购物车这两种功能都支持。其主要原因考虑到安卓用户在使用苹果手机时,可能不知道侧滑的功能,因此在购物车的编辑中还加入了长按功能,让用户能够更快捷的操作。

4. 将操作按钮进行收纳——阻碍用户操作

在设计时如果控制不经常使用,或者想阻碍用户操作时,就可以把操作按钮放远一点,同时在设计上可以将其收纳,加大用户到操作难度。如下图所示:

以大众点评详情为例,在右上角并没有直接放举报到按钮,而是放到更多到按钮,一个原因是为了方便后期的拓展,另外很重要到一个原因是不想让用户举报加深用户的操作难度。

总结

本文主要分享了费茨定律在UI界面中的应用,结合今天的分析,总结起来主要有四个要点:

  • 1、我们想要更容易点击到目标,就需要将一个页面的主操作按钮放大。
  • 2、我们想要让用户快速点击目标,操作更方便,可以将目标放于拇指热区轻松触达区域。
  • 3、我们想要让用户快速移动时,就可以利用手势操作,它打破距离和大小的限制,从而让用户可以快速操作。
  • 4、我们不想要用户操作或不常用的控件时,就可以将按钮进行收纳,加大用户操作距离,从而增长用户的操作时间。

参考文献:

Technical Artist的不归路 —— 费茨定律(Fitts’s Law)在UI设计中的使用

设计法则: Fitts’ Law / 费茨定律(费茨法则)

《通用设计法则》立德威尔著   朱占星 薛江译 中央编译出版社 2013年9月北京第1版

海盐社 (公众号)

作者:风筝KK

(0)

相关推荐

  • 在移动界面设计中应用费茨法则

    在人机交互理论中,费茨法则是非常基本的准则.无论是桌面界面设计还是笔记本的界面设计,都要遵循这一定则,对于日益复杂的移动设备来说,这一法则是否依然适用?我们一起来探索一下. 首先,来了解一下什么是费茨 ...

  • 超密集的界面设计技巧(设计经验谈)

    常常在我们的设计中会出现内容实在多到难以消化的情况,为了填满这些东西不得不挡掉自己一个个好的创意.有什么好的办法可以做到设计和内容的平衡的呢?今天这篇文章或许能给你一些灵感吧. 1 尽量使用单列而不是 ...

  • 一个好的界面设计应该注意的75个原则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求. 有一个设计咨询公司根据自己的客户案例,总结了75个经过实践证明的原则: @乔向阳之前国内流传这篇文章 ...

  • 交互七大定律的理解与应用——菲茨定律

    在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,那么你都知道都有哪些吗?除非有更好的选择,否则就遵从标准.--阿兰·库珀(交互设计之父) 本次文章主要针对交互七大定律中的"Fit ...

  • VR界面设计实践指南

    小编:@C7210 VR硬件设备正爆发式发展,做为UI设计师在此领域的跟进也需时时,以下这篇是关于VR界面设计的实践指南,希望对你有帮助. 一篇VR实践指导文章.Smashing Magazine好久 ...

  • “手把手教你设计”—12个最佳手机APP界面设计教程

    UI/UX 设计确实是需要一定的和学识才能真正在这个行业立足,并不是所有想成为设计师的人最后都能如愿以偿.他需要对设计有基本的了解,清楚设计的基本原则. 用户界面设计师和其他行业设计面临一样的挑战,那 ...

  • TaskBuilder界面设计支持哪几种布局?

    操作方法 01 顺序布局:组件按从左至右.从上到下的顺序显示: 02 表格布局:类似Excel,组件都放在单元格内,可以合并单元格: 03 HTML布局:以可编辑的HTML内容的形式进行界面设计,也可 ...

  • 38 个界面设计技巧

    快来学习下这些界面设计的技巧吧! 原作者:翻译@刘哇勇   来源:http://goodui.org xueui.cn 学ui网发布高质量ui设计教程和设计分享,希望打造一个最好的ui学习教程平台!Q ...

  • 111个酷帅狂拽屌的Loading进度条界面设计

    [好东西当然是要大家一起分享哟~~~]第一次和大家分享,简直激动的~~内牛满面~~所以说话有点不太正常,还请大家勿怪~~ 今天和大家分享的是"111个酷帅狂拽屌的Loading进度条界面设计 ...