2.3 利用预设用途设计出能够表明其用法的界面

预设用途（英文为affordance）这个概念最初是由感知心理学家J.Gibson（1972）提出来的，它表示的是人或动物同外部世界之间可能的动作。后来，Donald.A.Norman在他的著作《设计心理学》一书中把这个概念应用到了产品设计中，并通过一系列通俗易懂的例子形象地说明了预设用途这个概念，这其中最有名的例子就是门。不同的门有不同的开启方式，有些需要推，有些需要拉，也就是说，推或者拉是我们可以施加于门上以便操作它的方式，这就是门的预设用途。不过，正如Norman所指出的，对于产品设计来说，为了得到一个容易使用的产品，真正重要的是产品通过其外观所表现出来的让人们感觉到的可以如何对它进行使用或操作。例如，假设门上没有任何可以用手握住的把柄，那么人们只能去推它，此时，人们所感觉到的这种门的预设用途就是推。不幸的是，在我们的实际生活中的很多门的设计都很糟糕，它们让人们无法看出是应当推还是拉，因此不得不用文字明确地标出应当是推还是拉。尽管如此，还是有人会用错误的方式去操作，以至于某些门都被弄坏了。近些年来，随着越来越多的基于红外感应的自动平开门或旋转门的使用，更是出现了很多可笑的事。有些时候当人们走到一个门的前面时，由于不知道是自动门，所以会试图伸手去推或拉，结果扑了个空，门自己开了；在另外一些时候，当人们走到一个自以为是自动门的时候，他们会站在那里等着门自己打开或旋转，不过等了一会之后发现门没有任何反应，这才意识到它不是自动门，需要用手去操作。这些情况在人们去一些陌生的建筑物的时候尤为明显。

那么，如何将预设用途这个概念应用到软件界面设计中来提高软件的易用性呢？

首先需要看到的是，同我们的错觉相反，我们对于软件的可能的操作方法其实只有很少的几种，这主要是因为我们所能使用的输入设备很有限。到目前为止，对于大多数的计算机系统来说，主要的输入设备就只有两种，即键盘和鼠标。这两种设备所允许的软件能够识别的常用操作方式包括以下几种：

● 按下键盘上的某个按键；

● 单击鼠标；

● 双击鼠标；

● 移动鼠标；

● 鼠标上的滚轮操作。

其次，当我们说某个界面元素具有某种人们可感知的预设用途时，比如说可以点击，我们真正的意思是说，当把鼠标移动到这个元素所占据的屏幕位置上并单击鼠标后，软件会有所响应并执行相应的动作。这一点很好理解，因为不管当前界面的状态如何，你总是可以把键盘上的某个键按下去，你总是可以在桌子上随意移动鼠标，你总是可以把鼠标的左键或右键按下去。这些动作其实是输入硬件设备自身的预设用途，我们真正感兴趣的则是此时进行这些操作会不会使得软件执行某个动作。

第三，同物理世界中相似，不存在绝对意义上的可感觉到的预设用途。考虑婴幼儿对于一些物品的操作反应和大人的不同就不难看出这一点。例如，不论门的外形设计如何，婴幼儿都不会想到正确的推或者是拉的动作，他们很可能只是在上面触摸。对于一个旋钮状的开关，他们的反应可能是去抓或者拍打，而不是旋转。换句话说，人们对于物品的预设用途的感知是需要一些后天的学习和使用经验的。在软件界面设计中，那些能让人感觉到其操作方式的设计或者是借助于比拟，或者是一种已经广为接受的约定俗成的习惯表示。你所设计的界面只有符合这些条件才能让用户联想到正确的操作方法。

下面我们就来分别看看上述几种常用的界面操作的预设用途的设计方法：

2.3.1 如何让用户知道当前可以用键盘输入文字

让用户知道当前处于键盘输入状态的设计方法采取的是一种习惯表示法，即用一个方框表示可输入区域，同时用闪烁的I符号表示将输入的字符会被显示在那里。

2.3.2 如何让用户知道某个区域是可以用鼠标单击的

关于可点击性预设用途的第一个方法是各种按钮的设计。这里实际上是借助于比拟手法，将屏幕上可接受点击操作的那片区域显示为类似于日常生活中的物理按钮的样子，从而让人们感觉到按下鼠标的按键就好像按下了那个像似按钮的区域，从而引发按钮上的文字或图片所表示的动作。需要注意的是，图片越是像一个立体的按钮形状，人们越容易看出点击的用法；相反地，接近于平面效果的一个图片往往不会被用户认为可以点击。

关于可点击性预设用途的第二个方法是网页上的文字超链接的设计：即用加下画线的蓝色文字表示该文字是超链接，用鼠标单击后可以跳转到另一个页面或位置。这又是一种典型的基于约定俗成的表示方法。为什么没有选择其他颜色，例如红色或黄色来表示？为什么没有选择斜体字或字体加粗来表示？尽管很显然这种表示方法在起初看起来有很大的随意性，不过当所有的网页都是这样的设计时，人们也就逐渐适应了这种方法。如果你是一个网页设计师，你也只能别无选择地这样做，否则大部分用户将无法理解你的设计。实际上有关用加下画线文字表示可点击性的方法，流传着一个开玩笑的说法：那些上网成瘾的人甚至在杂志或书本上看到下画线时都想用鼠标去点它。

实际上，最初起源于网页上的这种基于下画线的表示方法是如此流行，以至于现在很多的桌面软件都采用了这种设计，即用加下画线的文字表示单击后可以引发动作或命令。例如，在图2-14所示的“360安全卫士”杀毒软件的界面上，就有很多的命令是通过加下画线的文字表示的。

2.3.3 如何让用户知道某个区域可以被拖曳

这是一种较新的界面上的预设用途表示法，它用来表示可以在该区域上拖拽鼠标来进行某种操作，例如拖动。比如，某些窗口大小可变，我们可以把鼠标放在窗口右下角上并拖拽就可以达到这个目的，但问题在于，我们如何容易地看出可以通过拖拽右下角的区域来完成这个操作呢？要知道，还有很多窗口的大小是不可以改变的。又比如，很多软件的工具栏上的按钮被分成了很多组，你可以以组为单位把某些按钮从工具栏上的一个位置拖动到另一个位置，甚至是彻底从工具栏上脱离出来，悬停在主窗口中的任意位置处形成一个单独的小窗口。为了完成这个操作，用户应当去拖拽哪个区域呢？

在Windows XP操作系统上，某些软件对于这个问题的解决方法是用一种特殊的外观来表示这些支持拖拽的区域。如图2-15所示，

这些区域看上去有很多凹下或凸起的小圆点，从而给人的感觉是，你可以很容易地用手按住并推动这些部分，因为很显然这些部分的摩擦力会比较大，在推动的时候不会打滑，如图2-16所示的是Word中对于窗口大小可调整的视觉表示。这种手法明显利用了物理世界中的类似设计，例如某些照相机上的放置电池或存储卡部位的外壳设计，如图2-17所示。

其他类似的例子还包括Google拼音输入法的小窗口，Google桌面工具的小窗口，以及MSN的聊天窗口中用于分割上下两部分的可拖拽横条的设计，这些屏幕截图如图2-18和图2-19所示。

作为一个反面的例子，如图2-20所示，IE的“整理收藏夹”对话框窗口的设计就很不好，你能从其界面上看出它可以通过拖拽右下角来改变大小吗？

2.3.4 如何让用户看出应当采用鼠标双击操作

遗憾的是，现在还没有一种较为自然的，或者至少是广为接受的习惯表示法能够让用户一眼看出应当对某个界面元素采取双击操作。实际上，双击操作方法不仅不够直观，而且在做该动作时也需要比单击操作更多的技巧。熟练用户也许意识不到这一点，然而非熟练计算机用户或老年人却很难掌握，因为双击操作需要用户在很短的时间内连续两次按下鼠标按键。另一个让计算机初学者经常感到困惑的问题是：什么时候应当单击，什么时候应当双击。不同的软件对于这两种操作有不同的解释，有时候单击表示选择一个对象，有时候单击表示触发一个动作（例如按钮）；有时候双击会表示选择一个对象，例如在Word中，双击一个单词会选中该单词，而有时候双击会触发一个动作，例如在资源管理器或桌面上双击一个文件或图标。如果你以为自己已经非常熟悉双击操作并且知道应当在什么情况下使用该操作，那么进行下面两个小实验或许会改变你的看法。

打开Word，如图2-21所示，在上部的工具栏右边有一小片空白，你认为在这里双击会发生什么事情呢？同时，在窗口底部的状态显示区域中，你认为双击其中的某项文字（例如行号、列号等）又会发生什么呢？

正如你将发现的，在工具栏右边空白区域中双击时会弹出一个用来定制工具栏的对话框，而在底部的状态栏中双击会弹出另一个“查找和替换”对话框。如果这让你感到了一些惊讶，那么你在设计界面时也要注意这方面的问题，即要让用户尽可能很容易地看出可能的操作是什么，否则这项功能将永远地隐藏在用户的计算机中。

由于有这么多关于单击和双击的不一致的用法，你就不难理解为什么很多不会使用桌面软件的人却能够轻松地使用浏览器来上网浏览各个网站：因为浏览网站时只需要单击操作。

2.3.5 如何让用户看出应当使用鼠标滚轮操作

滚轮操作现在最为广泛的应用仍是卷滚窗口的内容。除此之外，不同的软件对于滚轮的使用有不同的解释和用法，有些用它来在一组对象中为跳转到上一个或下一个，例如在Google的照片浏览软件Picasa中，滚轮被用来顺序显示在一个文件夹中的上一个或下一个照片。有些软件用滚轮来完成放大或缩小图像的操作，例如某些地图查看软件，如图2-22所示的Google地图网站的界面。在这些特定的应用中，使用滚轮操作的确是很方便的，但它的主要问题在于，用户从界面上很难看出可以使用滚轮来完成哪些操作。

因此，对于上述的双击和滚轮操作，由于缺乏能够让用户看出应当使用这些操作方法的视觉表示手法，界面上还应当同时提供其他的基于单击的操作来完成双击或滚轮操作所能够完成的任务。用户对于计算机操作的熟练程度越低，就越有这种必要性。例如，在Google的地图网站中（ditu.google.com），用户可以通过滚轮来放大或缩小地图，不过同时，界面上还是提供了表示放大的“+”号按钮和表示缩小的“-”号按钮，用户通过单击这两个按钮也能够完成放大或缩小地图的操作。

2.3.6 被动式预设用途

对于鼠标单击和拖拽操作，还有一种方法可以表示屏幕上的某区域可以支持这两种操作，也就是说当用户在该区域上进行这些操作时会触发软件开始某些动作。不过，和上面的几种方法不同，在这种方法中，该区域并不是主动地、无论何时都显示出某种让人可以感觉到能够对其进行操作的视觉暗示，而是只有当鼠标指针经过该区域时才会改变视觉外观，所以可以认为这是一种“被动”的表示预设用途的方法。此时，被改变的视觉外观可能是鼠标指针的形状，也可能是鼠标指针所在的屏幕区域中的内容，也可能是两者同时改变。

1.仅仅改变鼠标指针的形状

在软件界面中，鼠标指针在正常状态下是一个指向左上角的箭头。如果当鼠标指针经过某个可以接受点击或拖拽的区域时，我们改变它的形状，那么就可以给用户一种视觉暗示，表示这个区域会对鼠标动作有反应。一个最常见的例子是，如果一个窗口大小是可变的，那么当用户把鼠标指针移动到窗口的四个边框时，鼠标指针将由通常状态下的箭头变为如图2-23所示的两种不同的形状，带有左右指向箭头的形状是当鼠标指针停留在左右两侧的边框时，它表示可以左右拖拽鼠标来改变窗口的宽度；类似地，带有上下指向箭头的形状是当鼠标指针停留在窗口的上下两侧的边框时，它表示可以上下拖拽鼠标以改变窗口的高度。而如果某个窗口的大小不可以被改变，则当鼠标指针经过边框时，其形状是不会发生变化的。

再来看另一个例子，在很多软件中，窗口被分成了两个部分以显示不同内容。你可以通过拖动这两个部分之间的分隔线来调整两部分的相对大小。例如，在文件管理器界面中，窗口的左边部分用来显示用户的存储系统中的所有设备以及其中的目录结构，而右边的部分用来显示某个选中目录下的文件和子目录信息。用户如何才能看出可以左右拖拽中间的分割线来调整左右两部分的相对大小呢？方法就是当用户把鼠标指针移动到分割线上之后，把其形状改变为左右两端各有一个水平箭头的形状。

改变鼠标指针形状以表示可点击性的做法还大量应用在网页的设计上。某些图片是可以点击的图片超链接，某些图片仅仅是普通的图片，因此区分某图片是否可点击的方法就是看当鼠标指针经过该图片时，其形状是否由箭头改变为手状。

这种方法尤其擅长于让用户识别出一些看上去似乎是不可点击但实际上是可以点击的区域。例如，在Word中的“页面视图”下，你也许认为文档的相邻两页之间的分隔区域点击了之后不会发生什么事情。不过，如果你把鼠标指针移动到此处后，你将会发现它的形状变成了上下相对的两个竖直箭头，如图2-24所示。结合随后弹出的工具提示窗口“隐藏空白”，你就能很容易看出这个功能了。

2.改变屏幕上被鼠标指针所指向的目标区域的视觉外观

如图2-25所示的是Windows操作系统中自带的绘图软件。窗口左侧是工具箱区域，在进行某项操作之前，你需要首先选择一个相应的工具，然后才能在窗口主区域中的画板上进行操作。选取某个工具的方法是鼠标单击操作：当用户把鼠标指针移动到某个工具图标上时，该图标所在的那片小区域就会凸起显示，就像一个按钮，这会给用户一种可点击的暗示。不过，同样是在这个软件中，另一个功能的界面设计在这方面就有所欠缺。仍然是在图2-25中，窗口底部是选择画笔颜色的控件，用户可以直接单击某个颜色板来选取一种将要使用的画笔颜色。然而在这里，当用户把鼠标指针移动到某个颜色板上后，颜色板所在的区域没有发生任何的变化，鼠标形状也没有发生任何变化，用户怎么能看出这里是可以单击的呢？

实际上，在Windows XP操作系统中，这种做法已经被应用到了界面上的几乎所有的标准控件上。随便打开一个对话框，例如图2-26所示的IE的选项对话框窗口，不论你把鼠标指针移动到标题栏中的帮助按钮、关闭窗口按钮，或者是窗口的标签控件上的“安全”、“隐私”这些标题文字上，或者是移动到窗口中的各个按钮上，或者是按钮“清除历史记录”左侧的调节数字值的带有上下箭头的调节控件上，你都会发现鼠标指针下的可单击区域发生了一些变化（通常是有一些颜色上的变化），这些变化暗示出这个区域有些特殊，点击这里可以触发一些动作。

3.同时改变鼠标指针形状和目标区域的视觉外观

图2-27显示的是Word中的任务窗格窗口，这个窗口中列出了用户将能进行的那些操作。这些操作不是以按钮的方式表示的，而是采用了普通文字的方式。为了让用户看出这些文字可以点击，当用户把鼠标指针移动到这些文字上时，不仅鼠标指针形状变成了手状，而且文字也加上了下划线，这就让用户可以清楚地看出这些文字可以被点击来触发动作。

2.3.7 主动式预设用途表示法和被动式预设用途表示法的比较

现在假设你正在一片曾在战争期间埋有地雷的土地上走过。第一种情况是每个埋有地雷的地点都一个醒目的标记，这样当你看到后就可以绕开它走；第二种情况是埋有地雷的地点没有标记，不过你手上有一个探测地雷的装置，你可以在迈出每一步之前用这个装置探测一下周围的土地。如果某个地点下面埋有地雷，探测器就会发出声音。这样，你也同样可以躲开地雷了。你更愿意面对上述的哪一种情况呢？

很显然，第一种更容易些。预设用途的主动和被动表示法分别同以上的两种躲避地雷的方法很类似。主动表示法就像是上述的第一种情况，用户不必付出额外的努力，他们只需看一眼界面就能知道在什么地方可以进行操作以及进行怎样的操作，因为这些可能的操作位置主动地把该信息以可视化的方式表达了出来。另一方面，被动式预设用途表示法就像是上述的第二种情况，此时用户利用鼠标在屏幕上四处移动以发现可能的操作区域的做法就像是拿着地雷探测器在雷区中寻找地雷一样。区别仅在于，探测的目的在于“触发”这些目标，而不是躲开它们。如果用户没有将鼠标移动过某块区域，他将有可能错过某个操作。

因此，主动式预设用途表示法是界面设计人员应当首先努力做到的。在上面的被动预设用途的讨论中，我们讲到了表示窗口的不同部分之间的分割线可以被拖拽的例子。当用户把鼠标指针移动到分割线上后，鼠标指针形状会被改变。如果采用主动式预设用途表示法，我们首先应当尝试的是能够让这个分割线自身呈现出一种可以被拖拽的外观。实际上，Google的照片管理软件Picasa正是这样设计的，如图2-28所示，窗口左侧是含有照片的目录列表，右侧是某个选中目录中的照片信息。在这两个部分中间的分隔线上，有一部分看起来有三个凸起的小点，给人一种可以按住并推动的感觉，这正是我们在前文提到的对于“可拖拽”操作的预设用途的表示手法。

当然，在主动式预设用途手法的基础上，如果用被动式的手法加以辅助，那就是锦上添花了。它将能够更好地向用户表达某一区域是可以被操作的，从而能够增加用户进行该操作的信心。例如在Picasa的分割线的例子中，当用户把鼠标指针移动到分割线上后，其形状也同样发生了改变，用户因此将能更确信自己的对于该区域是可以被拖拽的判断是正确的。

然而，在一些些情况下，由于某些其他的限制因素，主动式预设用途表示方法的效果不好或不可行，此时就只能采取被动的策略了。在Word中就有这样的两个例子：

● 目标区域很小，难以有效地表示出某种效果。在Word中有这样一个功能，在查看或编辑一个文档时，可以把窗口水平分割为上下两部分，这样用户可以同时看到一个文档的不同部分，从而可以进行对比。然而，为了进入这种状态，用户所需要进行的操作方式是：按住窗口右侧的卷滚条上方的一个很小的长方形区域并向下拖拽。在这个特定的环境中，即使是按照上述表示可拖拽操作的方法来处理，用户也不太容易注意到这里，因此有必要采取被动的预设用途表示法。Word中的做法是改变鼠标指针形状。在改变后的鼠标指针的形状中，上下两个箭头分别从中指向上下两个方向，提示用户可以上下拖动。

● 在上文谈到被动的预设用途表示法时，所举的一个例子是Word中如何表示可以在“页面视图”模式下的两页之间的空白处单击鼠标来隐藏两页之间的空白。在这里，两页之间有很大的空间来支持点击操作，因而完全有机会在这里改变这片区域的外观以表示出可点击性。然而，在这里采取主动的预设用途表示法是不合适的。这是因为，在“页面视图”模式下，Word试图把一篇电子文档显示得尽可能像真实的基于纸张的文档一样，就好像是一张张的纸从上到下整齐地排列在屏幕上，并且能够看出每页“纸”还都显示出了阴影效果，这都给用户一种所见即所得的真实感。此时，如果在两页之间的空白处做一些特殊的视觉显示以表示该区域可以点击，则原来的“所见即所得”的效果就将被破坏。这就是为什么Word中在这里采取的策略是被动的预设用途表示：即只有当用户把鼠标指针移动到两页之间的空白处时，才会改变鼠标指针形状以表示此处可以进行某项操作。