查看类别为 《人机交互》学习笔记 的文章

未来的UI设计 2:直接操纵

2007-12-11 22:05:43

前几天曾经写(主要是翻译)过一篇“未来的UI设计 1”,在那篇文章的结尾,我提到说打算写一篇关于“直接操纵”(direct manipulation)的文章,那么你现在看到的文字,就是我这两日酝酿的部分结果。

顾名思义,直接操纵就是你按照真实世界中的做法,对物体进行操纵。比如你想看看手机是不是放在抽屉里了,只要打开抽屉就知道了。这听起来好像有点奇怪,因为这不是再正常不过的事情了吗?可是你想想在电脑里,就拿AVG或RPG游戏来说,你扮演的角色要喝水的时候是不是要先用鼠标点杯子,然后在弹出的菜单中选择“喝水”?这就不是直接操纵,并且在GUI中,非直接操纵的交互太普遍了,以致大家都见怪不怪了。

直接操纵的好处很多。最大的好处就是没有或几乎没有学习成本,现实当中的做法和计算机中的没有区别,预期和结果相符;其次就是出错的可能性会大幅度降低,操作时间也会下降,因为所有的结果都是可预期的;最后,直接操纵所带来的乐趣比较大,比如玩游戏的时候。写到这儿突然想起一个绝妙的例子:Westwood的经典名作“C&C”和尚洋工作室的“血狮”。这两款游戏我就不介绍了,老玩家应该都记得,不知道的可以自己Google,我要说的是它们虽然同为战争类的RTS游戏,但操作方式却大相径庭。C&C是对直接操纵的典型应用(虽然很多方面还不是):选中一个物体-比如一辆坦克-然后点击目的地,坦克就会自动开过去;可到了血狮那里,好不容易选中了一辆坦克后(血狮程序有Bug,选东西经常选不中),你还需要在菜单中选择让它干吗-是移动还是攻击?让人哭笑不得,期待了那么久的国产游戏,拿到手后却被拙劣的操作方式搞的兴趣索然(我知道尚洋也是有原因的,作为国产游戏早期的从业者,他们的开拓精神值得尊敬,这里的讨论只是就事论事)。

有人可能会问,直接操纵是不是等于所见即所得(WYSIWYG)?我觉得直接操纵肯定是所见即所得的,但反过来则不一定。比如在Photoshop里调整一个对象大小的操作就是所见即所得的,如果你通过鼠标拉动来调整,这就是直接操纵;如果在工具面板中直接输入对象大小的数值,虽然你也能即时看到结果,但这就不是直接操纵,按照我最最崇拜的HCI专家Shneiderman (1997)和Preece(1994)两口子的观点,这叫做“form fillin”。

直接操纵当然也有很多缺点。对于UI设计师和程序员来说,最大的问题就是对技术要求太高,相比非直接操纵的程序,开发人员需要付出更多努力,这一点极大地阻碍了这一交互方式的普遍应用。幸运的是,Apple公司Core Animation的出现,可能会在整个IT行业加速推动直接操纵的应用。对于普通用户来说,并不是所有操作需要直接操纵。比如按照“文件XX”的形式给一个目录下100个文件改名(其中的XX代表数字编号),直接操纵显然不如命令行来得快。

在应用方面,我接下来会特别谈谈Core Animation,因为它可能会带来一场UI设计上的革命!还是那句话:敬请期待 :)

浅谈人的视觉对交互设计的影响

2007-04-07 17:03:54

这是阅读《人机交互(第三版)》一书1.2.1"视觉"小节的读书笔记。

1.受人类眼睛的工作原理所限,"注视着屏幕中部的用户"难以或无法"读到底线上的帮助文字"(p5)。

遗憾的是,相当多的软件设计违背了这一原则。常见的如浏览器的状态栏,浏览器在接收到用户的点击后,通常将相应的反馈信息放在状态栏中显示,问题是状态栏通常位于浏览器底部,处于视野范围的边缘,其中的变化很难引起用户的注意。我有很多次亲眼所见用户忽略了提示信息而不断的重复点击(这一般发生在网速不是那么快,或者用户当前的操作引起服务器端高负荷量计算时)。

在Mac OS X的Spotlight搜索中,反馈信息处于用户关注点之外的远处,虽然从软件界面的变化中用户可以得知搜索过程已经开始,但要想知道是否结束,就必须将目光移动到Finder窗口的底部 - 如果他知道这里有反馈的话(如下图)。

在设计公司内部使用的开发工具"代码助手"时,我改进了这一设计,将表示搜索过程正在进行中的陀螺图标放置在输入框的右面,并且设定当陀螺出现并旋转时表示搜索正在进行中,如其消失则表示搜索过程结束。

在现有的主流浏览器中(如Firefox、IE、Opera和Safari),这一问题是普遍存在的。在没有很有效的方法之前,类似抓虾这样的提示框或许是个不错的做法。

zhuaxia.png

2.人眼对亮度的感知

曾有一个问题困扰了我很久:晚上在关了灯的房间里,余光会清晰地看到墙壁开关上的指示灯,但如果直视却看不清了。这个问题很古怪,甚至有些恼人。怎么可能余光看的清,直视却不行了呢,一点也不符合常理!

当我读到人眼感知亮度的原理后,这一谜团终于迎刃而解了:"在昏暗灯光下,视杆细胞主导着视觉。因为在中央凹视杆细胞较少,所以凝视低照亮度下的物体时不大容易看得见,处在外围视野中时反而比较容易看到。在正常光照下,视锥细胞会取而代之起主导作用"(p5)。

3.文本的大小和颜色、行的间距和长度对可用性的影响

就我的个人经验来看,这部分并没有在很大范围内引起足够的重视。实际上我个人也是如此,每次只是习惯性的将字体设置在12像素,间距在20-22左右,至于长度几乎从未考虑过。但显然它们是会对可用性产生影响的。

书里面提到"9磅至12磅大小的标准字体是同样易读的。类似的,行的长度在58mm至132mm时也是同样易读的",不过这是英文的情况,中文字体应该有所不同。UI花园上有一篇名为"高分辨率下文字字体、图像、界面布局的解决方案"的文章,不妨一读。

最后说一下为了尽可能的提高阅读舒适度,究竟是应该采用白色背景深色文字还是反过来。书中认为前者(即所谓的"负反差")可以提供较高的亮度和敏锐度,从而提高易读性,但"屏幕也更容易闪烁"。虽然书中没有明确交待,但常识告诉我们闪烁会造成眼疲劳。因此到底该采用怎样的方案,的确是一个有待商榷的问题。