写给程序员的UI设计书 (译) (五)

申明:本文及以后一系列有关都将《User Interface Design for Programmers》持续转载自tobybateer 的博客:http://tobybateer.blog.163.com/

感谢tobybateer的辛勤付出,给我带来了如此优秀的学习文档。

第五章:不恰当的类比

概论

还记得Windows 95的公文包么(图5-1)?有好几年这个可爱的小图标一度占据了每个用户桌面的一平方英寸,直到微软意识到没人愿意使用?没人愿意用,因为它是不恰当的类比。它本来被设计成“公文包”,能够放入一些需要带回家的文件。但是当你要把文件带回家的时候,你仍然需要将它们放进移动存储器。因此,你是把文件放到公文包里边还是放到移动存储器上?我不大确定…我从来没使用过。

clip_image002

图5-1 Windows里边不受人喜爱的公文包

一个不恰当的类比比没有类比更加糟糕。不幸的是,桌面UI设计者觉得如果不使用类比的话,他们就破坏了某种规则,于是他们宁可使用不恰当的类比也不愿意不用。

当你使用类比的时候,试着让它们以一种与真实世界相似的方式运行。违背真实规律只能令人更加迷惑。

第一次提到类比的时候,是出于什么目的?是为了告诉用户程序模式到底是什么样子的,从而让程序模式与用户模式达成一致。如果使用不恰当的类比,你实际上在以一种错误的方式告诉用户程序的运行方式,所以非但没有解决问题,还带来更多麻烦。历史证据表明,Windows 95公文包类比并没有(按照设计)工作:稍后版本的Windows试图去弥补这个不恰当的类比,从而在你每次想要把文件拖放到那个该死的小玩意儿里边时,就会强迫你阅读整屏幕的说明。

猜猜发生了什么?没有人真正阅读说明。我新买的大蒜碾碎器一定贴了三百来张标签,写着“不阅读这些说明的话,压根儿别想弄清如何去操作这个设备,说的就是你!”作为正常人,这意味着数百万人使用大蒜碾碎器之前都不会阅读说明。我待会儿再详细谈这个问题。不过现在,我只想说一说类似公文包这样不恰当的类比以及它们是多么令人讨厌。

遵守物理规律

第四章我谈到标签对话框是多么的棒。微软的Excel在工作簿里边使用标签来存储多张表单,如图5-2。

clip_image003

图5-2 微软的Excel使用标签来显示多个页面

标签就是那种很小,人们不必刻意注意,但所有人又都知道它们如何工作,不会在使用上碰到麻烦的东东。例如图5-2,显然当前打开的不是“Income”表单。同样显而易见的是并没有一张名叫“Wombats”的表单。同时,查看“Income”表单的方式是单击“Income”标签。我一直说这些显而易见的东西,会不会弄的你有些无聊?类比最重要的一点就是它们允许你从真实世界“借鉴”相关事物。

当你使用类比的时候,如果计算机程序遵守真实世界的物理规律,将会很有帮助。许多不恰当的类比就是没能遵守“自然规律”(也即它们所模拟真实世界事物的规律)的失败产物。

看一看Windows里的微软Word,特别是在左侧控制左缩进、悬挂缩进和首行缩进的三个小东东,如图5-3。

clip_image004

图5-3 Windows的微软Word有三个小东西,可以拖拽以调整段落缩进

人们发现它有点难以使用。原因就是:如果你拖动顶端的小东西(代表着首行缩进,如图5-4),正如你所期待的,仅仅只有顶部的小东西会移动。但是如果你移动底部的小东西(代表整体缩进),三个东东会整体移动,如图5-5所示。这不仅是不一致——它违背了自然法则。现实中,事物要么捆绑在一起,要么不捆绑。如果我移动了叉子,我不会要求刀和勺子也一起移动!

clip_image005

图5-4 拖拽顶部的小东东。至此一切正常。

clip_image006

图5-5 拖动底部的小东西会移动整个三个,因此违背了“自然法则”。

多行标签

当我第一次把第四章放到网上时,许多读者给我发电子邮件,说标签对话框总体来说不错,但是一旦有超过一行的标签就会非常可怕。最大的问题就是处理多行标签的方式似乎总是违背了物理规律:当你点击另一行标签时,整行标签都会打乱,就像校园开放日不知疲倦的孩子一样到处乱跑,如图5-6a和5-6b所示。

clip_image007 clip_image008

图5-6(a) 单击上一行的一个标签      (b) …标签以令人迷惑的方式整体移动

这种违反现实是如此的令人痛苦,以至于微软的Visual C++ IDE设计者克服了大量麻烦,实现了滚动标签。它添加了一些小箭头来控制哪些标签可见,同时一个“被撕裂的标签”效应让你注意到右侧还有未显示的标签。(如图5-7)

clip_image009

图5-7 另一种处理太多标签的方式

我认为这个问题的正解是找出你为什么会有如此多的选择,然后排除掉一些,就像第三章讨论的那样。没人喜欢有几十个标签的对话框,各种稀奇古怪的名字背后充斥着各种复杂的选项。但是如果你的确需要多行标签,那么至少试着不要违背物理规律。如今的高速处理器和显卡已经可以轻松地创建简单的动画效果,在你单击后排标签的时候,让前面一行的标签整体往下滑动。为了解释这一点,请看图5-8a至5

clip_image010 clip_image011

图5-8 (a) 两行标签                          (b) 当你点击前排标签时,一切按期望发生

clip_image012 clip_image013
      (c) 当你点击后排标签时, (d) 经过半秒的动画,前排依然在前面,
前排开始往下滑 现在已经位于对话框的底部,同时后排充分展开。

那些讨厌的导航标签

在网页上标签似乎也很流行。看看图5-9,Urbanfetch网站。从页面的外观来看,很显然不同的标签代表了网站的不同部分。

clip_image015

图5-9 单击Electronics标签,等待五秒钟…

存在两个问题。第一个是网页的速度很慢。我知道,抱怨网络速度慢很讨人嫌。最后,几秒钟之后,你在乐高的详细目录中你找到了心仪的、橘红色、斜面形状的乐高积木,然后大概不到24小时就会送货到你家——在以前这大概需要好几个月的时间,同时要花整整一个痛苦的周末跑到最近的大城市去。但我被宠坏了,对我而言,点击网页的时候,那无法避免的三秒钟延时很令我讨厌。有一个尚未出书的小孩儿床头故事——公主和高网络延时连接。这个故事里,“网络”王子和它的妈妈——“鼠标”皇后,确信在暴风雨里敲他们房门的那个可怜小孩儿就是真正的公主,因为她习惯使用城堡里的私人T-1线路(一种美、日等国家的数字通信标准,速率为1.544Mbps——译者注),而现在她被迫使用28.8 kbps的猫,她总会不停地抱怨,不停地抱怨……

等等,我讲到哪儿了?噢,想起来了,网页的标签。当你点击桌面程序的标签时,屏幕会迅速给予反馈,这遵循物理定律。但是当你点击网页的标签时,即便是快速的网页,你也不得不至少等三秒钟,直到慢腾腾地显示出几乎没有任何差别的新页面(这篇文章写于2000年左右,而如今宽带网已经大大缓解了等待延时——译者注)。如图5-9,当你点击Unbanfetch网站,可能会发生5件违背物理规律的事情:

1. 在新页面送达之前的几秒钟什么都不会发生

2. 然后整个页面会持续一会儿空白

3. 最终,新的页面出现

4. 但是现在所有的标签都出现在不同的地方(因为缺少对网站细节设计的考虑,整行标签往上移动了一些)。

5. 整个配色模式发生了改变,包括Urbanfetch图标的颜色,而这本来不是标签区域的一部分。

其中有些怪事儿对所有的网站都是如此,例如对于网络延时或者网页刷新方式(缺乏JavaScript和动态HTML的使用,因为它们尚未形成统一标准[1]。)没有任何解决办法。不过有些东西却是Urbanfetch本身的问题。

这儿讲这件事儿的意思是,尽管某些著名的网站可用性专家一直在抱怨这些东西,但并非所有由标签导致的麻烦都是真正意义上的可用性问题。站点本身其实具有完美可用性。为什么?回到我们第四章讲到的规则。类比的关键是给用户展示程序模式。在网页上,标签向用户展示了站点如何被组织成不同的部分。用户点击之后,它几乎就不用再管到底发生了什么事儿——因为标签已经完成任务了。(关于网站的另一个更坏的问题如图5-10,就是标签下方大量的链接,它们看起来不像是链接,也无法点击。如果你认为他们仅仅只是广告,不能点击的话,你就会忽略它们。)

clip_image017

图5-10 看看整个屏幕,包括颜色在内都发生了变化。这种稍稍违背物理规律并不会降低网站的可用性。

微软的Outlook引入了一种新的UI概念,称之为“Outlook工具栏”,位于窗口的左侧。它可能是本已经令人困惑的窗口中,最令人困惑的一部分了。

看看图5-11。是的,我知道,你急切地想要去看我的收件箱到底有些什么,但是请先不要管那个,把注意力集中到屏幕的左侧,也就是所写的“Outlook Shortcuts”。仅仅通过观察,你能弄清楚该如何使用么?如果你点击左侧写有“Outlook Shortcuts”的按钮,会发生什么?或者写有“My Shortcuts”的按钮?你是应该点击它们还是拖动它们?界面本身并没有给你任何关于使用方面的指示。

clip_image018

图5-11 Outlook工具栏。仅仅通过观察,你能弄清它是如何工作的么?

现在来看看我重新设计的版本,如图5-12所示。它与之前的运行方式完全一致,但是使用了一个类比,用了一些微妙的视觉提示告诉你它该如何工作。“Outlook Shortcuts”看起来像一张绘制了图标的卡片,同时令人清晰地感觉到,“My Shortcuts”和“Other Shortcuts”同样是绘有图标的卡片,收缩起来以方便你查看“Outlook Shortcuts”。当你点击其余卡片中的一张,它就会滑上去展开,让你看到相关内容。

clip_image019

图5-12 我重新设计的Outlook 工具栏使用了真实生动的类比来告诉用户它是如何工作的。


[1] 在十年后的今天,JavaScript和DHTML已经被广泛应用。——译者注

转载于:https://www.cnblogs.com/vincentradcliffe/archive/2010/12/02/1894731.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值