交互七大定律之菲茨定律

我们先来看看雅虎ued绘制的关于Fitts’ Law的Q版小漫画:

图片发自简书App

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

1、一句话描述:

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

2、定律内容:

从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

解读:

图片发自简书App
T = a + b log2(D/W+1)


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

两点含义:

1)、设备当前位置和目标位置的距离D越长,所用时间越长;

2)、目标的大小W越大,所用时间越短。

理解:

目的地明确的移动可以细分为两个部分,以移动光标为例:

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

第二步、紧接着是一系列精细的小幅度微调来将光标精确定位在目标中心。

小实验帮助理解Fitts’ Law:举起你的手臂并试着用手指指向远处的一个小物体,例如远处墙上的一个电灯开关。开始你的手臂可能会往开关的位置大幅的移动而且很有可能稍微过头了一点。接下来你会做一些微小的调整动作直至你的手指正好对准目标开关的中心。现在你可以试着指向一个更大的物体 – 比如说电视或一面墙壁。这一次你也会以大幅度的手臂动作来使手指指向目标方向, 但因为目标体积很大所以一般情况下你只需要做很少(甚至不需要任何)的微调。

3、菲茨定律的启示:

1)、按钮等可点击对象需要合理的大小尺寸。

2)、屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

3)、出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

4、典型应用及案例:

菲茨定律虽然在很多领域都得到了应用,但其在人机交互(HCI)和设计领域的影响却最为广泛和深远的。

例一、油门和刹车:增大目标大小、减小与目标的距离来提高效率。

我们从日常生活中体会下费茨法则的应用:

汽车上的刹车踏板和油门踏板:它们相距很近(D小),并且刹车踏板要比油门踏板大很多(W大),那么它们为什么没有被设计成相距很远,或者将两者的大小颠倒过来呢?使用经验告诉我们,这样的设计可以使得驾驶员能够以最短的时间把脚从油门踏板移动到刹车踏板上,从而达到以最快的速度准确制动的目的(D小,W大,时间短)。

可能去过电玩大世界的人会有这样的疑问,电玩大世界中那些赛车的油门和刹车踏板大小刚好与常规的相反,这又是为什么?这也正是应用费茨法则的高明之处,因为游戏中我们需要的是更快的速度去超越对手,因此你会更加容易的去踩到油门,争取更多的时间,而且你人身安全不会受到威胁,因为刹车踏板就明显变小了。

例二、window和mac系统菜单设计:增大目标大小以缩短定位时间(边缘无限大)。

两大主流OS中又有非常好的案例:Mac OS X默认将底栏(Dock)放到了屏幕的最下方;这样的话底栏就变得“无限可选中”,因为用户不能将光标移到底栏下方所以在向底栏方向做出大幅度移动后光标始终是落在底栏上的。

图片发自简书App

Mac OS X默认将底栏(Dock)放到了屏幕的最下方


图片发自简书App

屏幕边缘,W无限大,T近似等于0


在Windows中,开始菜单在屏幕的左下角,这个角落是“无限可选中”的,因为不管用户朝左下角方向做多大幅度的摆动,光标总是会停在开始菜单按钮的上方。(另一个案例:QQ右上角吸附隐藏,光标移动到右上角弹出)

图片发自简书App

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


图片发自简书App

屏幕角落,W无限大


这方面最经典的例子是 Windows 操作系统和MAC操作系统中的应用程序菜单区域(menu bar)位置的设计。实际测试和理论计算结果都表明,在使用 MAC操作系统 时,用户点击某个菜单所需的平均时间要比Windows上快0.4秒(《The humane Interface》Jef Raskin )。注:随着屏幕越来越大、双屏的出现,由于移动距离的变长,移动时间的对比不太强烈。

图片发自简书App

MAC OS 的 menu bar位于顶部边缘

图片发自简书App

windows os 的menu bar 位于title bar下方


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


图片发自简书App

IE浏览器的便签栏


图片发自简书App

chrome浏览器的标签栏


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

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

图片发自简书App

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


例四、WEB设计中的应用

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

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

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

图片发自简书App

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


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

图片发自简书App

登陆按钮被设计的更大


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

例四、移动端设计中的应用

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

图片发自简书App

miui系统中的删除应用


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

图片发自简书App

反例:iPhone关机操作

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容