费兹定律告诉你按钮要多大?

   你知道为什么Microsoft Windows 的选单列放置在视窗上,而Apple Mac OS X 的选单列放在萤幕的最上方吗?

  你知道为什么Mozilla Firefox 浏览器左上角的「回到上一页」和「到下一页」两个按钮的大小不一样吗?

  其实费兹定律(Fitts’ Law)都已经在许多使用者界面里面偷偷运作了!

  费兹定律(Fitts’ Law)是心理学家Paul Fitts 所提出的人机介面设计法则,主要定义了游标移动到目标之间的距离、目标物的大小和所花费的时间之间的关系。费兹定律目前广泛应用在许多使用者介面设计上,以提高介面的使用性、操作度和效能。费兹定律长得就像下面这个公式:


  其中T 代表所花费的时间,a 是系统一定会花费的时间,b 是系统速率,D 代表启始点到目标之间的距离,而W 则是目标物平行于运动轨迹的长度。看起来一点都不讨喜,对吧?我们可以用下图来简化一下费兹定律的意思:


  用图来解释,就是当D(启始点到目标之间的距离)越长,使用者所花费的时间越多,而当W(目标物平行于运动轨迹的长度)越长,则花费的时间越少,使用效能也比较好。

  这跟Mozilla Firefox 的「回到上一页」按钮的大小有什么关系呢?这要从「回到上一页」和「到下一页」两个按钮的行为有什么不同来进行分析。

  一般而言,我们在点选回到上一页按钮的时候,都是正在浏览网站而想要回到刚刚看过的页面,这时滑鼠位置通常都在浏览器的页面内容上,要把滑鼠从页面上移动到「回到上一页」的按钮的距离很长,而且我们不能确定使用者会从哪个位置开始移动。因此Firefox 将「回到上一页」的按钮加大并设计成圆形,以因应来自不同角度的滑鼠操作。而「到下一页」的按钮,通常都是因为点选了「回到上一页」而感到反悔,希望可以回到上一个页面,此时滑鼠是从左往右移动一个小段的距离,角度和距离都可以控制,所以Firefox 就设计了比较宽的按钮了!


  至于Windows 和Mac OS X 的选单位置的差别呢?Windows 将选单位置放置在视窗标题的下方,如果滑鼠要从视窗内移动到选单上,这个选单的上下间距是非常狭窄,所以比较不容易点选到正确的按钮。而Mac OS X 则将选单放到萤幕的正上方,由于滑鼠移动到萤幕边界的时候,会被萤幕边界限制而停下,因此可以将选单的高度(也就是费兹法则中的W)视为无限大,所以使用者所花费的时间减少,效率也就提升了。


  果然恶魔住在细节里,对吧!

时间: 2024-09-30 23:59:06

费兹定律告诉你按钮要多大?的相关文章

费茨定律也有不适用的时候

  费茨定律是指用户使用指点设备到达一个目标的时间同以下两个因素有关,距离和目标大小. ( 1.设备当前位置和目标位置的距离(D).距离越长,所用时间越长;2.目标的大小(S).目标越大,所用时间越短.该定律可用以下公式表示:t = a + b log2 (D / S + 1) 距离越近,目标越大,点击所需时间越短.这看起来很好理解,也很容易运用在设计中.但当使用费茨定律去衡量所有设计时,就会发现一些交互体验上的问题. 费茨定律之一:更大的可点击区域 费茨定律最主要的理论是:点击区域越大,点击目

谈谈费茨定律在网页设计中的应用

摘要: 时代的进步和变迁,对于人才的要求逐步提高.作为一名SEOER,除了掌握专业优化技巧之外,还应有各个学科的知识储备,学会将各个学科的知识融会贯通,应用在网页设计中. 费茨定 时代的进步和变迁,对于人才的要求逐步提高.作为一名SEOER,除了掌握专业优化技巧之外,还应有各个学科的知识储备,学会将各个学科的知识融会贯通,应用在网页设计中. 费茨定律,也许业内的许多SEOER从未听过.这个定理简单且容易理解,意思是说使用指点设备到达一个目标的时间和设备当前位置与目标位置的距离.大小有关,距离越短

bShare:小分享按钮里的大生意

中介交易 SEO诊断 淘宝客 云主机 技术大厅 bShare按钮的作用(图片由bShare官方提供) bShare创始人.CEO李彦枢 也许你从未点击过社会化分享按钮,但你一定见过它已经悄然出现在各大网站的页面中.伴随着各大社交网络的发展,社会化分享按钮已经成为几乎所有网站的标配. "安装社会化分享按钮,每天能够给网站带来0.5%至5%的免费流量,这就是它们安装分享按钮的主要动力."bShare创始人.CEO李彦枢告诉新浪科技,来自于社会化媒体的流量,比其他流量来源的价值高一些. bS

对话框-VC++美化按钮,绿色大按钮用的是什么技术?

问题描述 VC++美化按钮,绿色大按钮用的是什么技术? 很多软件都有绿色大按钮,和button控件很不同,MFC对话框中怎么模仿呢? 解决方案 参考:http://blog.csdn.net/jiht594/article/details/7448010 解决方案二: 用贴图的方式,很多界面库都有提供

提高流量转化:行为请求按钮设计6大必杀技

This is where the rubber meets the road. 行为请求按钮在网页流量转化成商业价值的过程中起了多大的作用呢? 网站的用户体验设计师或许明白行为请求按钮在该转化中的重要作用,但是接下来要讲的6个因素,每一个想从网站获取商业利益的人都应该了解. 什么是行为请求按钮呢? 行为请求按钮是可以从网络访问者那获取点击行为的按钮. 一般来说,一个点击行为可能会链接到下载.注册或出售.它们也可能会把用户引向一个有更多信息的网页从而让用户采取行动(比如:了解更多--) 行为请求

网站分析:行为请求按钮设计6大必杀技

中介交易 SEO诊断 淘宝客 云主机 技术大厅 This is where the rubber meets the road. 行为请求按钮在网页流量转化成商业价值的过程中起了多 大的作用呢? 网站的用户体验设计师或许明白行为请求按钮在该转化中的重要作用,但是接下来要讲的6个因素,每一个想从网站获取商业利益的人都应该了解. 什么是行为请求按钮呢?行为请求按钮是可以从网络访问者那获取点击行为的按钮. 一般来说,一个点击行为可能会链接到下载.注册或出售.它们也可能会把用户引向一个有更多信息的网页从

网站设计分析:行为请求按钮设计6大必杀技

中介交易 SEO诊断 淘宝客 云主机 技术大厅 This is where the rubber meets the road. 行为请求按钮在网页流量转化成商业价值的过程中起了多大的作用呢? 网站的用户体验设计师或许明白行为请求按钮在该转化中的重要作用,但是接下来要讲的6个因素,每一个想从网站获取商业利益的人都应该了解. 什么是行为请求按钮呢? 行为请求按钮是可以从网络访问者那获取点击行为的按钮. 一般来说,一个点击行为可能会链接到下载.注册或出售.它们也可能会把用户引向一个有更多信息的网页从

小按钮引发的大爆炸:方兴未艾的社交组件

互联网是一场伟大的变革. 互联网的精神是开放.自由与分享,在这个网络上,人人皆是知识的创造者,又是知识的接收者,信息量呈现爆炸式的增长,信息的流动与传播越来越快.随之而来的一个问题就是:人们如何选择自己所需的信息? 在Facebook诞生之前,只有搜索引擎拥有触及每个网页的能力,Google索引每一个网页并提供给人们检索. 这是以网页为中心的互联网,这是搜索引擎统治下的互联网; 直到有一天,Facebook的社交组件(Social Plugins )和开放图谱(Open Graph)发布,随处可

Instagram告诉你 2014 年十大拍照圣地

Instagram 每天产生的照片多达 6000 万张,全球各地的人在这一软件上记录出行.旅游,Instagram 带有地理标示功能,大量图片伴随着地理位置而生,基于此,每年岁末的时候,Instagram 都会计算出当年十大流行拍照圣地,告诉外界这个地方是被拍照最多的地方.今年的名单也已经出来了,10 个地方都是有名的地标,是一个城市,乃至一个国家的名片,可惜的是,由于软件在中国无法使用,所以没有中国的地点入榜.以下为 10 个最流行的拍照圣地:10.阿联酋,迪拜塔josephinehastig