CS巴别塔(1)

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

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

(2.2) Steering law (转向定律)


书接上回……嗯,上回书说到:十位英雄正在青楼之上饮酒吃菜,忽听得“噔噔噔噔”有人上楼,直惊得十位英雄是苶呆呆发楞!要问来者何人?嘿嘿,我就是不说……

可Fork的岔口: http://en.wikipedia.org/wiki/Steering_law

在本章开始处,已经列出了即将要写的一些“定律”。我想好奇心强的人应该已经wiki+google过了。所以,如果在内容上本文无法胜出,那么就算白干了。嗯,多说一句:如果为此就故意在前面隐藏不写,也是没用的,因为wiki+google仍然会把这些“隐藏”的东西带给人们。所以关键还是content, content, content. (语感好的同学会知道这三个词应该怎么读)

Steering Law(转向定律)这个名字来源于汽车转向。根据中国特别色,可能用Handlebar Law(拐把定律)更合适一些——谁让我们是自行车大国呢?为了理解这个定律,设想你要通过一个又长又窄的隧道,对汽车来说这隧道是2米多宽(或者对自行车来说是两尺多宽),你敢用多快的速度通过呢?如果这隧道是20米宽,你敢用多快的速度通过呢?(注:关于速度/速率这样的名词问题,在这里就不细究了;另:一提到Steering就想到“外内外”的同学,请去找Stig切磋)

慢慢拖吧,撞坏了赔不起

慢慢拖吧,撞坏了赔不起


Steering Law在“隧道”为矩形的时候,其数学形式为

Steering定律: T = a + b * ( A / W )


其中的T是到达目标的时间,a和b还是常量,A是走过的路径的长度,W是矩形隧道的宽度。

Steering定律图解

Steering定律图解

(Steering定律还有一个通用的“计算器”形式,路径宽度用函数来描述,本文就不涉及了,还是矩形的好理解)


这个公式表明:路径越短,到达目标的时间就越短;隧道越宽,到达目标的时间就越短。联系前文的例子,这是符合生活经验和直觉的。

Steering定律是根据Fitts定律推导出来的。在应用Fitts定律分析的时候,如果对用户的输入所经过的2维空间上的路径有要求,就需要考虑Steering定律了,比如前面分析过的Pie Menu,就不能忽略Steering定律——Pie Menu项目的宽度 really matters(不过不能用矩形隧道的简化形式,呵呵)。


Steering Law实例分析1:神秘的三角区域

在此文中有一个很好的实例,我就直接给出链接了:http://www.scsblog.cn/articles/fittslaw.html (简体转贴版,底下有原文链接,懂繁体的可以去看原文)


Steering Law实例分析2:杯具的DataTip

Visual Stuio 2005的DataTip功能是一个不错的设计,当鼠标指针指向一个变量后,就会出现一个DataTip来显示它的内容,并且通过点击加号,还可以把变量的成员展开。这是个方便操作的好设计,但在某些情况下,它也会成为杯具,见下图(点击图片可以看100%全图):

谁能点到最左端那个加号

谁能点到最左端那个加号

想要点击加号,鼠标就只能横移,上下都不能出界太多。否则DataTip会被关闭,只能重头再来一次。虽然上图中的数据和变量是专门为了演示而编写的,但是在实际调试中,这样的超长DataTip也很常见。

应用Steering Law来分析,我们会发现这个“隧道”的宽度W太小了,如果增大宽度W,就可以使操作更方便。增加宽度的效果可以用下述实验来体验:在DataTip弹出之后,在DataTip上的任意位置点击鼠标右键弹出菜单,这时DataTip就会被“冻结”在屏幕上,然后我们就可以经过任意路径移动鼠标到加号处,此时的W是一个相当大的值(超过一个屏幕的高度)。

(注:DataTip的加号并不一定非要点击,用鼠标指向这个加号也能展开成员。减少点击次数也是一种提高易用性的方式,后面会有内容专门谈这个问题)


实例分析3:人人都恨滚动条

不管是用手,用笔,还是用鼠标,使用滚动条都是一件很不爽的事情。之所以这么说,是因为以下的这些原因,以垂直滚动条为例:

问题1:滚动条的水平宽度很小,从当前鼠标位置移动到垂直滚动条上,平均移动距离D大约是半个屏幕,而W则是非常小的一个值(20个像素以下)。按照Fitts定律,这样的移动,效率不高(对于最大化的窗口,如果屏幕的最右边也计入滚动条的区域,则会大大改观W值)。
问题2:很多人不知道滚动块是可以拖、滚动条的空白区是可以点的,他们只会点击两端标有箭头的按钮。这两个按钮很小,不好定位。如果当前视图在文档中占的比较很小,可拖动的滚动块也会非常地小(还是Fitts定律)。
问题3:对滚动块进行拖动的时候,如果在水平方向上鼠标位移大于5~6倍的滚动条宽度,滚动块就会跳回原来的位置。应用Steering Law来分析,宽度W虽然有所提高,但仍然不够大。
问题4:滚动条能指示视图在文档中的位置和比例,但无法提供与内容相关的滚动信息(嗯,Chrome的搜索结果指示算是一个特例)。当然这一条不是用Fitts/Steering定律来分析得到的。

(写这段文字的时候,我坐在办公室,听着四面八方传来的“哗哗哗”的滚轮的声音)

作为对比,我们来考查一下iPhone触摸屏上的滚动:不管是单指还是双指滚动,都是对几乎所有可视区域可用的。此时的W=屏幕宽度(或几乎等于屏幕高度——对于水平滚动)。如果你有iPhone,请回想一下这种操作或者直接体验一下,比如故意斜向滑动手指,来滚动重直内容(测试宽度W)。

图:iPhone滚动“条”,WP7的滚动“条”

(另:对于有索引的内容,一个可以操作的指示器会比滚动条更有优势,比如各种通讯录界面中的A-Z指示器)


虚拟的宽度W:辅助和宽容

让我们再回过头来考查Steering定律:汽车通过狭窄的隧道,速度肯定会降下来,可火车却能很快通过。这中间的区别当然不是因为火车司机不怕死,而是在于火车有铁轨,铁轨限制了火车的方向,不会让它“出轨”撞到墙上(再比如拓海的排水沟过弯)。

拓海的排水沟跑法

拓海的排水沟跑法

同样的道理,在绘图程序中,如果想用鼠标绘制一条水平直线(同样,不深究“直线”和“线段”这样的名词区别),相当于让鼠标指针通过一个高度为1像素的横向隧道。这种操作非常困难(用直尺比着鼠标都很难做到,不信你试)。所以在绘图程序中会提供一种“限制”功能,限制鼠标只能水平或者垂直运动(或者加上四个斜45度方向共计8个方向),这就相当于把汽车变成了有铁轨的火车来通过隧道。Photoshop移动物体时的Shift键限制也是同理。在分析Fitts定律时,我们认为屏幕边框代表了一个相当大的宽度W;同理,我们可以认为,在这些例子中Steering定律的隧道宽度W也是一个相当大的数字,所以最终时间T可以很小。


离开鼠标屏和触屏,在有实体的交互中,这种增大W的方式依然存在。汽车的人机交互界面一般称为HMI(人·机器接口)。在汽车的HMI中,也包括一些电子交互系统,比如Audi的MMI和Bimmer的iDrive,通过屏幕和旋钮/按键来进行交互。Lexus的Remote Touch用的则是力回馈控制杆和按钮。假设屏幕上有两个选项,那么你在拨动控制杆的时候,会感觉到控制杆不是可以连续搬动的,而是有两个很明显的“档位”;如果屏幕上有三个选项,那么就会有三个“档位”,以此类推。这种交互设计,通过“档位”的辅助,为运动轨迹增加了辅助(Steering定律的W),同时也增加了目标物体定位的宽容度(Fitts定律的W),最终使得用户能快速操作,并且不用集中全部精力在屏幕上,最终提高了驾驶安全性。

Lexus的Remote Touch

Lexus的Remote Touch

Lexus Remote Touch的Screen

Lexus Remote Touch的Screen


如果你认为这种带回馈的控制杆还不算实体交互,那么可以考虑一下汽车的换档杆:

手动换档杆

手动换档杆


不管是鼠标屏、触屏,还是刚买回家的新电器,对于同样的操作,熟手和新手的完成时间大相径庭(想想你的父母第一次用iPhone的时候误拨了多少次电话出去?或者你多久才教会他们用一件新电器?),各位看官,这——究竟是为何——呢?……嗯,欲知此中的规律,且听下回书——分解——


扩展阅读&扩展练习

上次写的内容,在结尾处扔了一堆扩展阅读和扩展练习,感觉有点像讲课了(要知道我很讨厌老师的——所以我这回装得像说书的)。所以,这次的文章取消这两部分——当然,我并没有拦着你使用大脑和google,对不?


更新关于触屏的触感:2011 CES上露面的TeslaTouch是一个伟大的发明,它的网站是:http://www.teslatouch.com/ 大约来说,它看起来是一个普通的触屏,但是能够在指定的区域提供指定的触感,开发人员可以将屏幕上的内容和屏幕的触感结合起来,有一个演示的例子:屏幕上显示的是结冰花的玻璃,当你的手在上面摸的时候,会有类似冰花的触感;你摸过的区域会显示为透明的玻璃,这时候再去摸这个区域,它就是玻璃的触感了——还记得iPhone上的iSteam程序么?很明显,这个冰花程序要比它cool多了:) 另外,那些靠马达震动的触屏,比起来简直就是XXXXX(省略140字)。最后多说一句,这个TeslaTouch的名字也揭示了它的原理,详见它官网中的PDF 🙂




Advertisements
Tagged with: , ,

2 Responses

Subscribe to comments with RSS.

  1. Fred said, on 2010/06/30 at 00:03

    话说WP的二级域名居然不墙了

    lz小心了

    • Kenny Yuan said, on 2010/06/30 at 12:48

      呵呵,估计暂时轮不到我这种写技术文章的,但愿到在“轮到我”的时候我已经出国了


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: