说说用户界面那些事儿（第一部分）

第一章：可跳过不看的前言废话




之所以写这个文章，是因为最近在做一个基于手势的人机交互项目（自费的个人项目，暂定名为 #WheelUI）。




见过很多别人写的类似文章，都会讲自己“当年从低级到高级走过来的每一步”（往往还要提到ABC/XYZ等对新人来说很生疏的名词术语，外加感叹当时的条件有多艰苦），可我偏不愿意写那样的八股——我只想写一点可能对别人有用的知识、经验以及感悟，和一条可能的未来之路。




标题中使用UI而没有用GUI，是因为在通常的概念中，GUI一词和WIMP绑定得过于紧密。WIMP是指基于Window Icon Menu Pointer（窗口/图标/菜单/指针）的界面，这些东西是197x年在Xerox PARC搞出来的，在198x年苹果去挖了一批人做出了第一台Mac，之后微软也去挖了人搞出来Windows，后来Windows几乎一统江湖。不过近些年苹果又咸鱼翻身搞起了GUI的革命，主要武器就是Multi-Touch（多点触摸）。Multi-Touch和WIMP一样也不是苹果的原创，这两者的历史都可以追溯到197x年。以下是一些知识链接：




WIMP:  http://en.wikipedia.org/wiki/WIMP_(computing)   Please Note: P本来是Pointing Device，本文中我用了Pointer。
Multi-Touch in Wiki：  http://en.wikipedia.org/wiki/Multi-touch
还有Bill Buxton写的一个综述：  http://www.billbuxton.com/multitouchOverview.html
Bill Buxton也是Xerox PARC出身的，是Multi-Touch的先驱人物：  http://en.wikipedia.org/wiki/Bill_Buxton
这里是他的专栏：  http://www.businessweek.com/bios/Bill_Buxton.htm
从Market Value这个角度来说，Apple的咸鱼翻身相当成功：http://news.bbc.co.uk/2/hi/business/10168684.stm







早年的Apple MAC上的GUI







多点触摸的用户界面可以直接用手指点被控目标，相比使用鼠标间接输入算是前进了一步，但总会有人不满足：“还有没有别的方式可以人机交互？”说到这里可能有些人已经明白，我要说的其实不是UI而是HCI，只不过是HCI这个词在中文圈子里没人青睐，为了让更多的人听明白只好改说UI。
HCI:  http://en.wikipedia.org/wiki/Human-computer_interaction




本文就是想要说说用户界面HCI那些事儿。




注：关于上文中对苹果的创新的“贬低”，我想声明一下：口口相传的段子会把创新的“前传”全部剔除，只剩下一个孤独的英雄人物。想要了解更多？推荐去看一本叫做《创新的神话》的书，或者从google开始。另外还需要声明的是：将某项技术推广到全世界，同样是功劳大大地有，我一点我从不否认。







Xerox PARC外观







第二章：用户界面的科学定律（Laws of HCI）







作为正文的第一部分，一定要有一个好的开始。最近的CVPR2010上，有人用CV机器学习的方式来检阅论文质量，达到的效果是“以拒绝15%的正样本为代价，可以滤除一半的负样本”（http://dahuasky.spaces.live.com/Blog/cns!1AB3BC993DB84FD7!1168.entry ）。为了能够看起来像一篇好文章，我打算在这一章要介绍几个科学定律，大致有以下内容：Fitts’s Law, Meyer’s Law, Steering Law, Law of Crossing, Hick’s Law, Power Law of Practice等。




(2.1) Fitts’ Law （费兹定律）




（友情提示：在此处可以fork，但欢迎继续阅读本节中的实例分析和后面的内容http://en.wikipedia.org/wiki/Fitts’_law   ）




通俗来讲，Fitts定律是用来计算在目标已知的情况下，直线移动鼠标指针到目标所需要的时间的定律，它的数学表示形式如下：

Fitts定律：T = a + b * log2 (D/W + 1)




其中T是完成移动所需要的时间，a和b是常量，D当前指针距离目标的距离，W是目标的宽度。或者更精确地来说：

图解Fitts's Law中的变量




T = 平均完成移动的时间
a = 启动设备需要的时间常量
b = 设备固有速率的一个时间常量
D = 当前指针位置到目标的中心位置的距离
W = 在移动方向上目标的长度，或者是判断指针是否已在物体上的宽容度（比如针对1像素的点，设计宽容度为5*5=25个点，这时水平移动的W＝5）




Fitts不仅仅是对鼠标移动任务起作用。触摸屏/键盘/其它硬件等，只要涉及到人机界面和人的操控动作，都适用Fitts’ Law。




对于使用者来说，时间T越小表明当前的操作越快捷。时间T和很多因素有关，从数学式中不难看出它们的含义（请注意其中的线性/对数关系）。之所以说Fitts定律是科学定律，因为它提出了预测，并且有实验证伪的可能。在实际的实验中，Fitts定律和实验结果吻合得很好、很精确。




举一个最常见的例子来解析Fitts定律：如果想要关闭窗口，你需要把鼠标指针移动到窗口右上角的close按钮上（很显然这是在说“低级”的Win32 GUI）：
a = 你用手去抓住鼠标的时间；或者：已经抓着鼠标的手，从静止状态启动进入到运动状态的时间；
b = 和鼠标速率反相关的时间系数，速率越高，时间系数b越小。
D = 当前的鼠标指针位置到close按钮的直线距离。距离越短移动得就越快（时间T就越小）。
W = 红色close按钮的size，一般是20多个像素见方。很明显它的个头越大越好找到（时间T也就越小）。




从上面这个鼠标指针的例子，我们也能发现Fitts定律的所存在的问题：
Fitts定律问题1：它只适用于单个直线方向上的时间计算；（2D空间上的后文后谈到）
Fitts定律问题2：在鼠标的应用研究中，如果有鼠标加速度，它就不适用了；
Fitts定律问题3：如果用户经过了多次训练，它也变得不适用了（下面有一个小节将要讨论这个问题）




在实际使用中，有许多人用下述方式来关闭已经最大化的窗口——他们用鼠标狠狠地向右上角一甩，之后鼠标指针就一定是位于屏幕的最右上角了，这个位置虽然看上去不在close按钮范围内，但是它仍然被视为在close按钮内部——如果考虑一个虚拟平面的话，其实这时候鼠标指针的位置早就在屏幕之外了，但因为屏幕实际空间有限，所以鼠标指针被限制到了屏幕右上角。此时Fitts定律仍然有效：只要将W视作非常大的一个值即可（甚至可以比屏幕还大），于是套用公式时会发现T值最终很小，这正好与实际情况相符。

虽然看上去鼠标没有在关闭按钮上，但实际上却可以关闭窗口




根据Fitts定律，我们不难推出以下结论：




Fitts定律推论1：可操作元素（如图标）需要有合适的大小，太小的话操作会变慢（W变小，T就变大）；
Fitts定律推论2：如果可操作元素布局合理，可以更迅速地操作，因为D变小，T就变小；
Fitts定律推论3：Popup菜单比窗口上方的下拉菜单好使，因为D变小，T就变小。（注：D并不仅仅是对指针来说的，如果为了弹出Popup菜单，需要另一手的配合运动，那就是另外一回事了——除非熟练掌握了键盘，否则另一只手的启动时间a往往是一个不小的数值）
Fitts定律推论4：屏幕的四个边缘和四个角落是非常容易找到的位置，比如在Win32下，最大化状态的窗口，其关闭按钮非常容易找到，就是因为它利用了屏幕角落（W变得很大，甚至超过了D，此时T会很小）。Mac的下拉菜单容易找到，也是同理。




下面我们利用Fitts定律来考查一种设计：Pie Menu (http://en.wikipedia.org/wiki/Marking_menu )




Pie Menu类似于右键弹出菜单，但是它的每个选项是一个扇形，最中间的“Pie Hole”（不是骂人）被用来直接关闭Pie Menu，参见下面的示意图：

Pie Menu示例




或者一个实际的例子：

Pie Menu实例




从Fitts定律的角度，我们很容易发现Pie Menu的优点：
Pie Menu优点1：移动到每个选项的时间都很短，因为D很小且W较大
Pie Menu优点2：经过处理，可以使W变得更大（超过屏幕大小），这样就更方便操作——只需要限制鼠标指针不得离开Pie Menu即可达到此效果（后面有个例子要说到这一点）
Pie Menu优点3：如果Pie Menu是误触发，关闭它的时间是接近零的常量




Pie Menu在实际中




（示意图）罗技的MouseWare驱动中的Pie Menu

后来版本的“Web风火轮”

第一个版本虽然是方的，不是Pie，但使用起来其实更方便：当鼠标中键（滚轮）按下的时候，会在当前鼠标位置显示3×3网格的的Pie Menu，鼠标位于正中央，点击中间的cell可以关闭Pie Menu。其它8个cells代表了8个功能，这8个方向非常容易区分，很难混淆。并且无论鼠标实际移动了多少距离，它都会被限制在这3×3的网格中，不会离开（这就使得公式中的W变得相当大）。

除了“第一次点击呼出，第二次点击执行”这样的两次点击的方式，这个Pie Menu还有如下的操作方式：如果鼠标中键按下但并未抬起，然后移动鼠标到相应的cell，此时再抬起鼠标，同样可以激活该cell代表的命令。整个过程变为：按下->移动（在某方向上移动任意距离）->抬起，一气呵成。




可以想像，如果右上角的cell的功能是关闭窗口，这个方式会比点击窗口上的关闭按钮要方便许多。后来版本的“Web风火轮”花哨了许多，但也变得不实用了，因为8方向的Pie Menu非常容易找到cell，而更多的方向则不那么好控制，毕竟在这时候的指针移动是2维的，而不仅仅是沿着一条限定好的直线进行（见前面的Fitts定律问题1）。本文后面的章节会谈到Steering Law，这个定律就是Fitts’ Law在二维平面上的形式。







文章内容已经很长了，先写到这里吧，待续 













——————

注1：Fitts’ Law的标准译法不详，见过有一个人翻译成“费兹”，于是就这样写了。其文章的UR是L：http://www.scsblog.cn/articles/fittslaw.html   在这个文章里作者也举了一些例子。不过不如我的例子用得好，嘻嘻……




注2：还有一个Meyer’s Law也试图建立类似的模型：

Meyer定律：T = A + B * Sqrt (D/W)




其中：
T = 移动到目标的时间
D = 当前位置和目标的距离
W = 目标的宽度（或容忍度）
A 约为 -13 msec
B 约为 108 msec







扩展阅读

除去前文中已经给出的链接，下列资料也可作为扩展阅读材料：

1. 可视化的 Fitts定律  http://particletree.com/features/visualizing-fittss-law/
2. Fitts定律的在线Demo  http://fww.few.vu.nl/hci/interactive/fitts/
3. Fitts’ Laws以及其它定律的简介  http://www.sapdesignguild.org/community/design/print_laws.asp
4. CodingHorror Blog中对Fitts定律的介绍文章（注意其示意图中有标注错误）http://www.codinghorror.com/blog/2006/08/fitts-law-and-infinite-width.html
5. 2000年MSDN的文章，简单用Fitts Law分析了Web元素  http://msdn.microsoft.com/en-us/library/ms993291.aspx
6. Pie Menu  http://www.piemenus.com/
7. Pie Menu开源实例  http://sourceforge.net/projects/circledock/
8. QT的一个Pie Menu粗糙实现  http://qt.nokia.com/products/appdev/add-on-products/catalog/4/Widgets/qtpiemenu/
9. Pie Dock  http://www.markusfisch.de/?PieDock
10. JavaScript Pie Menu online demo  http://www.markusfisch.de/downloads/PieDockDemo/   源码在http://www.markusfisch.de/downloads/PieDockDemo/PieMenu.js
11. http://en.wikipedia.org/wiki/Marking_menu#External_links




扩展练习

1. 比较Popup Menu和Pie Menu的优劣
2. 用Fitts’ Law来分析鼠标手势的优劣
3. 用Fitts’ Law来分析一个你认为设计得很好的网站，再分析一个你认为设计得很差的网站
4. 这个平板杂志的概念设计中用到了Pie Menu，请分析它的优劣http://berglondon.com/blog/2009/12/17/magplus/   （首页有视频和图像）
5. 为这篇文章寻找理论基础  http://www.ifanr.com/3559   （《触不到的按钮》by ifanr 爱范儿 ♂专注于拇指设备的小众讨论）
6. 用Fitts’ Law来分析Touch Pad和IBM小红点的优劣
7. 思考Fitts’ Law有哪些不足/不适用的情形