当前位置:首页 > 天道酬勤 > 正文内容

保罗定律(费斯汀格法则)

张世龙2021年12月21日 02:25天道酬勤1290

有没有想过为什么按钮越大越容易点击? 为什么需要将相关按钮配置得相互靠近? 为什么Win系统要把“开始”按钮放在角落里? 这些设定的背后其实是人机交互中,非常重要的定律——费兹定律。 作者结合具体案例,从四个方面对费兹定律进行了梳理和阐述,并与大家分享。

的补充宗旨手镯ued画的关于fitts’law的q版小漫画,先初步了解一下:

fitts’law/KDD HB的定律(费茨定律(费茨定律) ) (注) ) ) ) ) ) ) ) ) (注) ) ) ) ) (注) )

Fitts’ Law / kddhb定律(费茨法则)

1. 一句话描述

任一点移动到目标中心位置所需的时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。

2. 定律内容

开始位置移动到最终目标所需的时间由两个参数决定,到目标的距离和目标的大小(上图的d和w )用时间t=ablog2(d/w1 )和公式表示。

解密:

t=a博客2 (d/w1) ) )。

t=a博客2 (d/w1) ) )。

T=移动设备所需的时间a、b是经验常数,D=设备的起始位置与目标位置的距离W=目标宽度的大小。

两点的含义:

1 )设备当前位置与目标位置的距离d越长,使用时间越长;

2 )目标的大小w越大,所需时间越短。

理解:

目的地明确的移动可以分为两部分。 请考虑一个移动光标的例子。

第一步是大幅移动,首先将光标移动到与目标大致相同的方向和区域;

在第2步中,将继续进行一系列细微的调整,以使光标准确地位于目标的中心。

小实验有助于理解fitts’law。 举起你的手臂,试着用手指指着远处的小物体,比如远处墙上的电灯开关。 你的手臂可能会在开关位置起很大作用,而且很可能有点过头了。 然后,进行一点调整动作,直到手指与目标开关的中心完全吻合。 现在,请试着指向电视和墙壁等更大的物体。 虽然这次也会通过大幅的手臂动作将手指指向目标方向,但是由于目标体积较大,通常只需要进行微小的调整就可以了。

3. kddhb定律的启示

1)按钮等可点击对象需要适当的大小。

2 )画面的边缘和边角适合放置菜单栏和按钮之类的要素。 角是一个巨大的目标,有无限的高度或无限的宽度,所以鼠标不能超过它。 也就是说,无论移动多远,鼠标最终都会停在屏幕上的sldyc上,位于按钮和菜单上。 (以下结合案例进行说明)

3 )与下拉菜单和工具栏相比,用户操作的对象旁边显示的控制菜单(右键菜单)可以更快地打开。 这是因为不需要移动到画面的其他地方。

4. 典型应用及案例

kddhb定律应用于许多领域,但在人机交互(HCI )和设计领域的影响最广泛、最深远。

例一)加大油门和刹车)目标的大小,缩小与目标的距离,提高效率。

我们从日常生活中体会到了费兹定律的应用:

的刹车踏板和油门踏板:距离近(d小),刹车踏板比油门踏板大很多) w大,那么为什么没有设计成距离远,或者是两者的大小相反? 使用经验表明,这样的设计允许驾驶员在最短的时间内将脚从油门踏板移动到制动踏板,从而最快、准确地制动。

去过游戏世界的人可能会怀疑,在游戏世界里,那些赛车的油门和刹车踏板的大小为什么正好相反? 这就是应用费兹定律的高明之处。 游戏需要更快的速度才能超越对手,所以更容易踩油门,也能争取更多的时间。 而且,刹车踏板明显变小,所以不会威胁到你的人身安全。

例2 )窗口和mac的系统菜单设计(增大目标尺寸缩短定位时间) sldyc无限大)。

在两个主要的操作系统中,有一个非常好的例子。 默认情况下,Mac OS X将底栏(Dock )放置在屏幕的底部。 这样,下栏就会变成“无限选择中”。 由于用户无法将光标移动到下栏,因此在向下栏方向大幅移动后,光标也会始终落在下栏。

默认情况下,Mac OS X将底栏(Dock )放置在屏幕的底部

屏幕sldyc,w无限大,t几乎等于0

在Windows上,开始菜单位于屏幕的左下角。 这个角落是“无限可选”的。 因为无论用户向左下角方向摆动多么大,光标始终停留在开始菜单的按钮上。 (另外

一个案例:QQ右上角吸附隐藏,光标移动到右上角弹出)

Windows7,开始菜单在屏幕的左下角

屏幕角落,W无限大

这方面最经典的例子是 Windows 操作系统和MAC操作系统中的应用程序菜单区域(menu bar)位置的设计。实际测试和理论计算结果都表明,在使用 MAC操作系统 时,用户点击某个菜单所需的平均时间要比Windows上快0.4秒(《The humane Interface》Jef Raskin )。

注:随着屏幕越来越大、双屏的出现,由于移动距离的变长,移动时间的对比不太强烈。

MAC OS 的 menu bar位于顶部sldyc

windows os 的menu bar 位于title bar下方

另一个对比案例:IE浏览器和chrome浏览器的便签栏设计

IE浏览器的便签栏

chrome浏览器的标签栏

例三:鼠标右击菜单设计:缩短当前位置到目标区域的距离。

右键菜单技术(或上下文菜单)是采取这种思路的一个很好的例子。为了弹出这种菜单,用户只要将鼠标指针移动到需要对其进行操作的某个对象所占据的区域中并单击右键即可。而在一般情况下,这个移动的距离要远小于将鼠标指针移动到应用程序主窗口顶部的下拉菜单区域。

右键菜单缩短了光标的移动距离D,提高了效率

例四:WEB设计中的应用

网页设计师最大的遗憾之一就是不能利用浏览器的边角和sldyc作为可“无限可选中”的区域。不过设计师仍然可以按照kddhb定律在设计上做一些优化。

1)放大链接点击区域。在链接文字周围放置可点击的填充区域,这样用户想要点击的链接文本会有更大的容错性。

2)当您有几个放置在一起的可点击目标或链接时,把它们的体积增大或增加他们之间空白区域的大小。搜索结果中的网页导航链接通常都有很差的可用性。例如,下图所示的搜索结果页面的底部,用户可以通过点击链接文字为“1”,“2”到“10”跳转到特定的页面。这里的问题在于这些超链接的可点击区域太小,只有一个数字加一个“o”的大小,因此很难快速将鼠标指针准确移动到它们上面。在某些情况下,这种设计可能会带来很大的使用困难。例如,鼠标灵敏度低难以定位,又或者,一些老年用户或者存在运动机能障碍的用户在精确控制鼠标方面有困难。这些都将导致用户更难于点击某个想要浏览的页面的链接。

搜索结果页面的底部页码链接

3)将用户最有可能点击(或最想要)的按钮放大。例如,将”登陆”按钮设计的更大:

登陆按钮被设计的更大

4)将动作分类 – 如果相关的操作按钮靠近彼此的话,则不仅可以在视觉上增强用户对它们相关性的认知,还可以减少光标在它们之间移动所需的距离和时间。

例五:移动端设计中的应用

移动端交互设计中也有很多案例应用了Fitts’ Law,举一个Android系统中删除应用的例子,用户拖拽想要删除的应用到顶部删除,顶部W无穷大,增加了用户操作效率和精准度。

miui系统中的删除应用

Fitts’ Law鼓励减少距离,增加目标大小以提升用户效率,但反过来应用也会有意想不到的效果,比如iPhone关机,不采用按钮点击,而采用滑动操作,这样虽然减低了用户操作效率,但增加用户操作时间可以起到警示用户谨慎操作的目的。

反例:iPhone关机操作

参考文献:

腾讯CDC:kddhb定律与互联网设计 Fitts’LawWindows 设计规范中的鼠标交互;費茲定律Fitts’ Law與使用者介面設計;Google Chrome 与 Fitts Law,一个很好的实践;谈谈 Fitts 定律;费茨法则在交互设计中的应用(Readlists)When You Shouldn’t Use Fitts’s Law To Measure User Experience

作者:kfdwd;公众号:chuangshe_space

本文由 @kfdwd 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/26024.html

标签: httpsoriginpgc
分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。