费茨法则在交互设计中的应用
作者:释子 来源:Water is wide 发布时间:2009-07-09 19:02:00
费茨法则是人机交互领域里一个非常重要的法则,在10年来得到了广泛的应用。Fitts法则最基本的观点就是任何时候,当一个人用鼠标来移动鼠标指针时,屏幕上的目标的某些特征会使得点击变得轻松或者困难。目标离的越远,到达就越是费劲。目标越小,就越难点中。漂亮简单,对么?这意味着要是目标定位越容易,距离鼠标当前位置就应该越近,目标占用空间应该有更大。Fitts花了好几页来描述这些发现,用明显数学式的严谨,用公式表达出了怎样去测量不同速度距离目标尺寸对用户点中目标的影响。目标和鼠标指针越远,尺寸越小,就越难点中目标。
从鼠标到达目标的时间可以用公式Time = a + b log2 ( D / S + 1 )来计算。其中
D:鼠标达到目标的距离
S:目标的宽度(尺寸)
费茨法则为人机交互提供了一个度量的法则,从而也为我们设计人机交互界面提供了科学依据,也就是告诉我们怎样设计一个界面可以让用户比较容易使用,提高用户的操作体验。从上面的公式中,我们可以得出一个结论:如果我们要想鼠标比较快速的命中目标可以采取两个措施,要么减少鼠标与目标之间的距离,要么使目标足够大(哈,当然还要有一个好鼠标,以前我用过一个鼠标突然出了问题,鼠标指针离按钮很近却费了我几秒钟才移到按钮上面去,一笑)。这里面的另一个考究就是要尽量将按钮集中在一起,同时要将经常使用到的按钮放在最醒目的位置上。
且让我们来看看几个费茨法则的应用:
从WindowsXP之后的操作系统开始菜单增加一个选项,就是可以隐藏长时间没有使用的菜单,简单的考虑是从使用频率的角度出发的,实际上我认为这也是为了减少用户单击开始以后弹出菜单的长度,减少鼠标到目标菜单之间的距离。
OfficeXP以后的菜单也提供了隐藏菜单和工具条的功能。
Mac操作系统的快捷工具条上按钮很大,象StarDock公司就为我们提供了Mac操作系统工具条的实现,点击一个按钮的命中几率却是要大很多,而windows的任务栏上的按钮都是16X16的,一不小心还容易点错。
同时也让我们来看几个不好的交互设计
1. 在web页面中经常要使用到分页的功能,但是往往分页的页码显示的数字特别小,而且密密麻麻,如果您使用过asp.net提供的datagrid控件就知道其分页显示的页码是多么难用,要选中一个页码真的很难,还要小心翼翼的。
2. 在gotdotnet查询页面上也有一个分页功能,不过其提供了“next>>”的方式,点击分页不是特别困难,但是页面滚动到下面去以后如果要翻页还要将页面滚到上面去翻页,使用十分不便。
3. 在uninstall这样的工具中,界面只有一个主窗口,但是不经常使用到的按钮很大,经常使用到的按钮倒很小,如下图所示:
费茨公式为我们设计交互提供了一个依据,那么是否回答了所有的问题呢?其主要缺点是:
其应用范围只是2D的。我觉得还缺乏一个因素就是方向的问题,对于右手使用的用户来说往左上和左下的方向一般命中要困难,因为操作不便的原因,不信的话大家可以试试,因此如果您要做的特别细致,就要考虑界面上按钮的布局了,一般按钮放在右边可能会比较好。
缺乏对虚拟距离的度量。从鼠标到目标是一个可以度量的距离,也就是说这个距离是连续的,然而在实际的使用中,这个距离并一定是连续的,实际上有可能是离散的。举个例子,当你操作文档的时候需要设置段落的格式,在word中提供了专门的段落菜单,在文档窗口上有,在工具条上,那么为了使用户能够快速的设置段落的格式,提供了尽可能多的入口,那么这里的目标就不是一对一,而是一对多。这里提出的另一个命题就是为了能够让用户快速的命中目标,那么你必须在程序中设置多个目标的等同目标,也就是说在一个有限的范围内,要让目标尽可能无处不在。windows shell里的sendto,提供了另外一种更为快捷的解决方案。另外一个可行性的方案就是可以让用户根据自己的习惯和喜好来DIY目标的摆放,就像windows开始菜单一样,我们可以按照自己的喜好进行分组。


猜你喜欢
- Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css".....相信看完
- 其他语言中,比如C#,我们通常遍历数组是的方法是:for (int i = 0; i < list.Length;
- 1、argparse是一个python模块,用途是:命令行选项、参数和子命令的解释。2、使用步骤:导入argparse模块,并创建解释器添加
- 简单介绍NumPy系统是Python的一种开源的数组计算扩展。这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested
- 您在访问网站时是否会在有些页面上见到这种功能---您在可以访问此网站的同时,还可以查看您免费邮箱中是否有新邮件。这个功能是不是让您觉得很心动
- 本文实例为大家分享了Echarts单条折线可拖拽的具体代码,供大家参考,具体内容如下1、步骤:  
- 导 读vue3.0中,响应式数据部分弃用了 Object.defineProperty ,使用 Proxy 来代替它。本文将主要通过以下方面
- 1、安装setuptools命令如下:wget --no-check-certificate https://pypi.python.org
- 安装淘宝镜像:要安装Angular4。于是我对着一股浓郁口音的视频开启了Angular4安装之旅。那口音说了,ang哥乐4不是那么好装的,由
- asp之家注:也许很多人对网页设计中的,id和class和name的区别不是很清楚,好像觉得都可以使用,没什么不同。就我个人来讲,我的理解是
- 在做手机开发时,经常碰到一些比较耗时的操作,这个时候进度条就开始派上用场了。这个demo展示了ProgressBar进度条和Progress
- 前言fixture是在测试函数运行前后,由pytest执行的外壳函数。fixture中的代码可以定制,满足多变的测试需求,包括定义传入测试中
- 前言: 在爬虫过程中,我们可能需要重复的爬取同一个网站,为了避免重复的数据存入我们的数据库中 通过实现增量去重 去解决这一问题 本文还针对了
- 1.前言数据库的重要性相信大家都有所了解,作为各种数据的电子资料夹,其中可能包含了各种信息,从企业员工信息到网站访问或成交数据无所不包,甚至
- typetype方法有两种重载形式:type(o: object);type(name: str, bases:Tuple[type, ..
- 随着项目越来越大,采用写原生SQL的方式在代码中会出现大量的SQL语句,那么问题就出现了:SQL语句重复利用率不高,越复杂的SQL语句条件越
- 目标嗯,我们知道搜索或浏览网站时会有很多精美、漂亮的图片。我们下载的时候,得鼠标一个个下载,而且还翻页。那么,有没有一种方法,可以使用非人工
- 从那起,我已经对这些方法做了大量的研究,并且已经在很多场合使用他们。在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 DOM 选择器
- 我们首先来看下实例代码:import urllibimport urllib.requestimport refrom urllib imp
- 代码如下:<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001&quo