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

原创 2010年06月24日 22:55:00

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


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



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


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


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



Xerox PARC外观

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中的变量

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


或者一个实际的例子:

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的标准译法不详,见过有一个人翻译成“费兹”,于是就这样写了。其文章的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有哪些不足/不适用的情形

说说Xcode LLDB调试的那些事儿

使用场景之一,接收他人的项目,快速理清其层次结构,可以打标识符断点,如下图 每一个VC,都加了个在viewDidLoad方法处的断点,这样运行程序时,逐步断点,便可以理清层次, 但是,需要手动不断的...
  • jiahao8915
  • jiahao8915
  • 2016年12月07日 18:57
  • 4325

说说项目管理的那些事儿

在我们的开发团队里,每一个带过项目的人都成了优秀的员工. 这不是偶然,领导别人才会明白如何被领导,有句话叫”没有当过老板的员工不是好员工.”五年前听说这句话的时候还很不理解,等到自己做了项目负责人才...
  • zhuanzhe117
  • zhuanzhe117
  • 2015年07月19日 16:12
  • 2076

《明朝那些事儿》心得体会

这本书我看了两遍,并且还正在看第三遍。        因为它实在是太经典了。对于我来说,这些书籍中。文学名著,现代书籍首推《平凡的世界》,仙侠类首推《诛仙》,科幻类推荐《三体》和《小兵传奇》,穿越类首...
  • a1456123a
  • a1456123a
  • 2016年03月10日 11:04
  • 1982

明朝那些事儿里的王守仁

今天我想跟大家分享的是有关王守仁,也就是王阳明的成长经历。字伯安,别号阳明。我对王守仁了解的不是太多,对他的心学更是还没进行过钻研。所以今天跟大家只是进行一些浅层面的分享。各位同学多多批评指正。一直以...
  • hahawhyha
  • hahawhyha
  • 2016年05月26日 18:31
  • 1789

WEB开发那些事儿

web开发由于技术更新快、热点多、新框架层出不穷、贴近最终用户、应用范围广,造成的结果是:它是一个相当令人迷失的领域。写作此文的目的,一方面,是为了寻找一些万变不离其宗的东西,一方面,是对自己在开发过...
  • deltatang
  • deltatang
  • 2014年07月29日 17:55
  • 1880

数据库设计的那些事儿!~(第一篇)

数据库设计的那些事儿!~(第一篇) 各位客官,大家好!今天让我们来聊一聊数据库设计的那些事儿!~ 数据库已经离不开我们的生活,作为一个后端开发人员,数据库的使用更是必不可少的,让我们来看一看为什么...
  • s740556472
  • s740556472
  • 2017年02月15日 21:34
  • 755

Java编程那些事儿系列文章(全集)

Java编程那些事儿1——序言Java编程那些事儿2——程序设计是什么?Java编程那些事儿3——你适合学习程序设计吗?Java编程那些事儿4——如何学好程序设计?Java编程那些事儿5——程序设计介...
  • haifeng314
  • haifeng314
  • 2009年09月23日 12:32
  • 2522

读书笔记:《明朝那些事第三部:妖孽宫廷》

1.“莫须有”杀掉了岳飞,“意欲”杀掉了于谦。2.徐有贞聪明绝顶,认定李贤是他的亲信,可是他错了。石亨位高权重,对李贤许以官位,以为可以拉拢他,可是他也错了。他们都认为这个叫李贤的人会乖乖地听他们的话...
  • ansenamerson
  • ansenamerson
  • 2017年08月25日 12:14
  • 311

编程那些事儿(持续更新中)

现在在用STC12C5A60S2单片机做32*128的LED点阵,各种纠结的问题是遇到不少的。当然,其实大都是一些常识性的错误,但是这些对于初学者而言,如果没有人指导,自己又不喜欢去看书,很难找到错误...
  • fushiqianxun
  • fushiqianxun
  • 2012年04月21日 15:21
  • 659

IP 库的那些事儿之 2013 - 2014 流水帐版

@高春辉 2014 年 11 月 好吧,我先承认我写这篇文章的目的之一是希望各位能重视 IP 库,而不是某个开发人员随便从某些地方就下载一个用然后万年不更新,或者虽然更...
  • charleslei
  • charleslei
  • 2014年11月18日 23:03
  • 2956
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:说说用户界面那些事儿(第一部分)
举报原因:
原因补充:

(最多只允许输入30个字)