CS巴别塔(1)

说说用户界面那些事儿(第一部分)

Posted in Uncategorized by Kenny Yuan on 2010/06/24

(读者请跳过本段括号内的文字:经常来骂人的那位同学,您请回吧,每回都那么激动,别气坏了身体,要知道,这篇文章的ZB程度可是很严重的……)


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


之所以写这个文章,是因为最近在做一个基于手势的人机交互项目(自费的个人项目,暂定名为 #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

早年的Apple MAC上的GUI



Xerox Star 8010

比Apple更古老的GUI



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


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


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



Xerox PARC外观

Xerox PARC外观

(图片注解:多年以后,当榨布丝和给慈站在行邢队的面前,肯定会想起当年他们参观Xerox PARC的那个下午。当时,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中的变量

图解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


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


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

Pie Menu示例

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

(示意图)罗技的MouseWare驱动中的Pie Menu

后来版本的“Web风火轮”

后来版本的“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的标准译法不详,见过有一个人翻译成“费兹”,于是就这样写了。其文章的URL是: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



扩展阅读

除去前文中已经给出的链接,下列URL同样推荐观看:

  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. 分析Chrome浏览器在最大化状态下的标签页布局安排
  2. 寻找上文中没有提到的新视角,来比较Popup Menu和Pie Menu的优劣
  3. 用Fitts’ Law来分析鼠标手势的优劣
  4. 用Fitts’ Law来分析一个你认为设计得很好的网站,再分析一个你认为设计得很差的网站
  5. 这个平板杂志的概念设计中用到了Pie Menu,请分析它的优劣 http://berglondon.com/blog/2009/12/17/magplus/ (首页有视频和图像)
  6. 为这篇文章寻找理论基础 http://www.ifanr.com/3559 (《触不到的按钮》by ifanr 爱范儿 ♂专注于拇指设备的小众讨论)
  7. 用Fitts’ Law来分析Snap to Grid功能(或者allSnap小程序/winamp或gtalk等内建Snap功能的程序/Win7新增的窗口大小管理功能/Mac的窗口最合适尺寸功能/etc.)
  8. 用Fitts’ Law来分析Touch Pad和IBM小红点的优劣
  9. 分析这样的快捷键安排:Ctrl+X, Ctrl+C, Ctrl+V (为什么不用Ctrl+P来执行Paste?)
  10. 试着再举几个Fitts’ Law的应用实例(比如Anykey)
  11. 思考Fitts’ Law还有哪些不足/不适用的情形




Advertisements
Tagged with: , ,

4 Responses

Subscribe to comments with RSS.

  1. yskin said, on 2010/06/25 at 00:16

    看起来很不错,期待续篇。

    当年罗技的菜单很不错,但是新版的SetPoint软件里没有了,唉,杯具。

  2. audioearth said, on 2010/06/25 at 11:15

    我都不懂, 看来我out 了

  3. sdf said, on 2011/09/05 at 11:43

    晕掉……

  4. xavierskip said, on 2012/10/09 at 18:33

    这都有公式可循呀!!!长见识了


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: