讲授视频在线视频

我们设计原理的最后一个定律

叫做Fitts定律

英文叫Fitts law

那么前面讲到

我们GUI的界面元素

是由WIMP组成的

前面三个元素组成了所谓的

我们GUI界面的叫Widget

也就是说这三个元素

是我们看得到的

当然Pointing也看得到

有cursor

但是这三类元素是比较固定的

它组成了我们

这些元素本身的表现

以及它们的布局

除了GUI的Widget

我们屏幕上还有一个对象

就是我们看到的这个光标

光标是由叫

Pointing devices

就是指点设备来驱动的

那么指点设备我们都很习惯了

已经有Mouse

有Touch screen

那么实际上现在还有一些新的

比如Gesture

我们运动捕捉的传感器

都可以来驱动

我们鼠标的运动

因为指点设备

指点设备在我们屏幕上

显示为Pointer

我们也叫Cursor这个光标

因为我们运动空间和显示空间

它的不一致就是两个

我们其实还有一个参数

就是叫CD Ratio

就是控制和显示之间的

运动比例

大家可能在自己的设备应用中

可能都调整过

那么在GUI中

这个Fitts定律是用来指导

GUI Widget Layout

以及我们

Pointing Devices的

运动方式的这样一些设计

我们具体来看一下

这个Fitts定律

Fitts定律的出现要远早于

我们图形用户界面

Fitts本人是心理学家

他的论文是发表在1954年

他当年是用刚刚出现的

香侬的信息论的方法

来进行的实验设计

实验本身是关于点击任务

我们会看到

这个心理学的实验

都是非常细节的

我们很准确地点击任务

就是我们从这个图上看到

就是用笔来进行点击

它控制了两个参数

一个是距离

还有一个是要点击的对象

本身的宽度

那么实验验证的什么呢

是任务的难度

它这里称为ID

就是

Index of difficulty

任务的难度或者叫运动时间

是跟什么有关系呢

是跟这种幅度

就是说我要运动

手要运动的幅度

以及要点击的对象的宽度

存在的线性关系

也就是这是从整体活动的难度

这个是从运动的时间

叫Motion time

我们可以看到

这个Motion time

是跟运动难度

有一个线性的关系

而控制的难度或者动作的难度

是跟幅度和宽度的有关的

具体的证明过程

我们在这里就不讲了

Fitts定律是在GUI上

它体现为这样一个公式

这里D是表示我的鼠标的

当前位置离我的目标位置

之间的距离

因为在屏幕上我们刚才讲到

有这几类位置

我们都是要用

Pointing Devices

来操纵它的

所以在Fitts定律里面

我们首先考虑这个距离叫D

就是跟我们Fitts

基本定律中的运动距离

是一致的

然后还有一个S

就是我们要点击的

这个目标的大小

我们称为S

那么它们之间的关系

形成这样一个a+blog2为底的

这样一个倍数

就是B除以S

我们可以看到

可以跟这个B是成正比的

跟这个S是成反比的

这是我们的运动时间

那么A和B是和具体的

就是说人的控制能力

以及人掌握的设备的

特征相关的两个参数

在我们典型代入中

我们取50到150

但是具体的取值

待会儿会有实验

大家可以去测测

你自己的这个值

那么T是运动的时间

也就是在这个公式里面

D和S其实我们刚才

已经定义了它

那么这个Fitts定律

告诉我们什么呢

就是在我们的界面设计中

你应该使得你的对象越大越好

容易操作

因为从操控时间上来看

而这个距离当然是越小越好

这是Fitts的基本定律

大家对它的认识

我推荐了一个网址

这个网址上

你可以来体验和测试一下

就是说你在用不同的设备上

你 就是这个具体的人

在A B这两个常数上

以及在这两个作为变化过程中

就是说这个距离

和这个目标的大小

作为变量的时候

我们测到的这样的一个值

你会看看你的分布是否

能回归到这个Fitts定律上

那么这个在我们桌面系统

或者说在我们PC

以及我们的手机应用程序中

它的界面设计中

应用的效果或者说

你体会和应用的效果

是很不同的

我这里取了两个界面的一部分

就是同一个应用程序

在两个系统上的界面的局部

我们来讨论一个问题

就是说如果我现在给大家的

任务是点击文件菜单

这是我们很常见的

在我们操作中

在这也可以点击文件菜单

可以也假设这两个对象的大小

都是一样的

我们需要出发的位置

到这个对象的距离也是一样的

比如在这两个任务中

这里我给大家来看一下

运用Fitts law这两个设计

实际上的效率

当然差异还是很大的

那么刚才提到了

如果用Fitts law的话

这个距离也一样

这个S也一样

那么操控时间应该是一样的

就是从公式带进去

但是结果是不一样的

不一样是为什么

刚才前面我谈到

Pointing devices

我们也有一个CD Ratio

实际上是说不但有那个Ratio

而且我们的C空间

就是说我们Control空间

我们的显示空间

是通过软件可以来控制

可以来定义的

我们现在来看一下

看我的鼠标网上走

走到这个边

你走再快它都不会再走了

这是软件来控制的

实际上硬件就是说你的

Control space你一直在动

但是它不会出去

这是我们软件在控制的

这是一个非常好的属性

那么恰恰是这个属性的应用

使得这个值的表现

是很不一样的

那么我们再回到这个界面上

来看看

两个程序都有标题栏

这两个程序界面

只有标题栏的差异

我们可以认为

在这个界面设计上

左边这个它标题栏在最上面

右边这个标题栏我隐进去了

在这个菜单栏的下面

只是这个位置的简单的差异

当然这里我都是

在这个程序全屏

最大化的程度情况下

也就意味着这个标题栏

在我们最上边

而这个是我的菜单栏

在最上边

在最上面我们刚才看到了

我们软件控制

实际上你不用小心翼翼地

去触及这个边

如果是你要访问最边上的话

你还可以向在中间移动一样的

速度很快

是因为你知道

到边上这个程序

会自动让你截下来

这样的一个效果我们如果用

这个Fitts law的公式的定义

可以有这样一个假设

实际上在这个设计中

这个菜单还是这个文件

它的访问

它因为是在最上面

所以我可以直达那个边上去

而不受什么控制

这就相当于在我的控制域里面

我的S就是这个对象的大小

给放大了很多

这是我简单地说

放大了10倍

实际上不止这种感觉

如果这样放大了10倍

我们会看到这个计算结果

毫秒

单位是毫秒

那么右边的

这是右边的这个值

它相当于左边的这个值的

在Fitts law定义出来的

这样一个操作任务

很细节的一次鼠标

去访问一个菜单项的

这样一个时间

大概差将近3倍

那么实测中

表现可能还不止是3倍

我们利用这个Fitts law

其实可以做很多

这个GUI界面上的一些优化

这些优化在这个公式里面

可以直接表现出来

就是说我们不管是在显示域

还是在控制域里面

去减少运动距离

以及放大要访问的对象

其实像这个

其实这个已经给放大了

虽然它显示空间中

没有占那么大的面积

以及双管齐下 两个都去

一个做减 一个做加

所以这个呢

因为这里需要讲的

细节的内容非常多

也有很多例子

也给大家一个网址

这个网址给了大家九个

实际上一共写了十个

就是十个问题

并且这十个问题全有答案

第十个比较Open

前面九个都非常具体

并且是Pure text

就是纯文本的

你读懂了以后

你要去找一找

相应他文中提到的这类的界面

如果你找出来以后

你做一个对比

你会心领神会

才知道哪些设计

为什么我用起来会舒服

哪些设计为什么不舒服

当然还有背后很深沉的原因

比如已经知道这样的优劣

为什么它不改过去呢

大家可以作为问题

继续来讨论