当前课程知识点：软件工程 > 第12章 软件交互设计 > 12.5 Fitts定律 > 讲授视频
我们设计原理的最后一个定律
叫做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
就是纯文本的
你读懂了以后
你要去找一找
相应他文中提到的这类的界面
如果你找出来以后
你做一个对比
你会心领神会
才知道哪些设计
为什么我用起来会舒服
哪些设计为什么不舒服
当然还有背后很深沉的原因
比如已经知道这样的优劣
为什么它不改过去呢
大家可以作为问题
继续来讨论
-1.1 软件无处不在
--讲课视频
-1.2 软件的本质特性
--讲授视频
-1.3 软件工程的产生与发展
--讲授视频
-1.4 软件工程的基本概念
--讲授视频
-1.5 软件质量实现
--讲授视频
-1.6 业界人士谈软件工程
-测验题--作业
-讨论题
--讨论题
-作业题
--第一张 作业题
-2.1 编程过程与规范
--讲课视频
-2.2 良好的编程实践
--讲课视频
-2.3 Python集成开发环境
--讲课视频
-2.4 代码静态检查
--讲课视频
-2.5 代码性能分析
--讲课视频
-2.6 结对编程实践
--讲课视频
-2.7 刘贺谈软件工程
--讲课视频
--讨论
-测验题--作业
-作业题
--第二章 作业题
-3.1 单元测试概述
--讲课视频
-3.2 黑盒测试方法
--黑盒测试方法
-3.3 白盒测试方法
--基本概念
--代码覆盖标准
--基本路径测试
-3.4 单元测试工具
--单元测试工具
--html
-测验题--作业
-作业题
--第三章 作业题
--作业题附件
-4.1 软件过程
--讲课视频
-4.2 软件过程模型
--讲课视频
-4.3 敏捷开发过程
--讲课视频
-4.4 微软公司开发过程
--邹欣经理自我介绍
--微软开发过程之一
--微软开发过程之二
-测验题--作业
-5.1 团队组织与管理
--讲课视频
-5.2 项目沟通管理
--讲课视频
-5.3 软件项目计划
--讲课视频
-5.4 软件项目估算
--讲课视频
-测验题--作业
-讨论题
--讨论
-6.1 敏捷开发之Scrum
-- 敏捷开发之Scrum
--html
-6.2 用户故事与估算
--讲课视频
-6.3 团队协作工具Tower
-6.4 配置管理
--讲课视频
-6.5 配置管理工具Git
--讲课视频
-测验题--作业
-作业题--作业
-7.1 需求工程师
--讲课视频
-7.2 需求定义
--讲课视频
-7.3 需求的类型
--讲课视频
--讲课视频（2）
-7.4 需求工程过程
--讲课视频
-7.5 需求的主要来源
--讲课视频
-7.6 需求获取技术
--讲课视频
--讲课视频二
--讲课视频三
-7.7 撰写需求文档
--讲课视频
-测验题--作业
-讨论题
--讨论
-8.1 用例建模概念
--讲课视频
-8.2 用例建模过程
--讲课视频
-8.3 用例建模精讲
--讲课视频
-8.4 建模工具介绍
--讲课视频
-8.5 微信抢票应用案例
--讲课视频
-测验题--作业
-讨论题
--讨论
-9.1 面向对象分析
--讲课视频
-9.2 CRC卡片分拣法
--讲课视频-1
--讲课视频-2
-9.3 面向对象设计
--讲课视频-1
--讲课视频-2
-9.4 类图建模
--讲课视频-1
--讲课视频-2
-第9章 面向对象分析与设计--测验题
-讨论题
--讨论
-10.1 顺序图概念
--讲课视频
-10.2 顺序图建模
--讲课视频
-10.3 顺序图风格
--讲义视频
-10.4 状态建模
--讲课视频
-10.5 状态图
--讲课视频
-10.6 状态图精讲
--讲义视频
-测验题--作业
-讨论题
--讨论
-11.1 软件体系结构概念
--讲授视频
-11.2 软件设计原则
--讲授视频
-11.3 软件体系结构风格（一）
--讲授视频
-11.4 软件体系结构风格（二）
--讲授视频
-11.5 软件体系结构风格（三）
--讲授视频
-11.6 软件设计过程
--讲授视频
-11.7 Web系统架构设计
--讲授视频
-11.8 数据库选择策略
--讲授视频
-测验题--作业
-作业题
--html
--html
--html
-作业题--作业
-12.1 交互设计概述
--讲授视频
-12.2 交互设计目标
--讲授视频
-12.3 GUI设计原则
--讲课视频
-12.4 KLM效率模型
--Video
-12.5 Fitts定律
--讲授视频
-12.6 交互设计过程
--讲授视频
-测验题--作业
-13.1 软件测试概念
--讲课视频
-13.2 软件测试类型
--讲课视频
-13.3 软件功能测试
--讲课视频
-13.4 软件性能测试
--讲课视频
-测验题--作业
-14.1 软件部署与交付
--讲课视频
-14.2 软件演化与维护
--讲课视频
-测验题--作业
-第一部分：基础知识
-第二部分：编程与测试（选做）
