2.5 自然匹配

如图2-32所示的是一个有着四个灶头的煤气灶，你能看出台面右侧的那四个开关分别控制着哪个灶头吗？

如果你无法容易地看出来，这很正常，因为这个煤气灶的设计违反了一个设计原则：自然匹配。Norman在他的《设计心理学》一书中指出，所谓自然匹配，就是指人在使用物品时，能够很容易地从操作本身看出它将产生的结果，或者或能够理解操作及其结果之间的对应关系。这种对应关系越是显得自然，人们就越容易记住它的操作方法。在上面的例子中，四个操作开关的位置分布呈一字形，是一维的，而四个被开关所控制的操作对象，即那四个灶头，却是在一个二维的平面上分布的。用户很难把一条直线上的四个点和一个平面上的不在一条直线上的四个点对应起来。这就是你为什么无法很容易地看出哪个开关可以控制哪个灶头的根本原因。解决方法也很简单，只需把四个开关的分布方式做得像四个灶头的分布那样就可以了。

下面，我们就将详细讨论一个操作会在哪些方面有可能和它的结果之间形成一种自然的、有助于用户记忆和理解的匹配关系。

2.5.1 操作控件的位置和它的作用之间的对应关系

上述灶头的例子实质在于，操作控件的位置和其用途之间缺乏自然的关系。在计算机软件中同样存在着一些类似的情况。现在大多数计算机键盘上都有四个方向键，如图2-33所示。

在大多数使用这四个键的软件中，它们的作用正如它们的位置分布一样，分别表示向上、下、左、右四个方向移动，例如在文字编辑器软件中移动光标。但是，在更早些时候的键盘上却没有这些方向键，那么在文字编辑器类的软件中，用户应当使用哪四个按键来控制光标在上、下、左、右四个方向上移动呢？在早期比较流行的vi编辑器中，这四个功能分别由k,j,h,l四个键来控制。从这四个键在键盘上的分布可以看出，它们从左到右分布在一条线上，如图2-34所示。

因此这四个按键只有左右之分，而不存在上下的关系。用h和l来分别表示向左、右的移动很自然，但是用k和j来表示上、下两个方向比较难以理解了。可能的改进方法是选取在键盘上的分布具有自然的上、下、左、右关系的按键，例如，我们可以用j和l来表示左和右，用i和k表示上和下，仍如图2-34所示。

在Windows Mobile平台上的Windows Media Player软件中，对于音量的控制既可以用触笔点击屏幕上的相应按钮，也可以用手直接去按硬件设备上的物理按钮，其中位置靠上的表示向上的方向键的作用是增高音量，位置靠下的表示向下的方向键的作用是减低音量。在这里，按钮位置的高低和音量的高低形成了一种自然的对应关系。如图2-35所示。

再来看一个不自然的例子。软件“掌上书院”是一款运行于手机上的图书阅读软件。在其为运行S60操作系统的诺基亚手机所设计的版本中，为了向下翻一页，用户需要按下靠右的表示向右的方向键。这里靠右的位置和向下翻页的效果之间的关系并不是那么的自然，不容易被用户理解和记忆。

2.5.2 操作控件的形状和它的作用之间的对应关系

图2-36所示的是一个电风扇的控制部分。有四个外形一模一样的按钮排列在一起，按钮下面标有“关”、“弱”、“中”、“强”的文字。用户在按下按钮之前需要仔细查看按钮下的文字。不幸的是，“弱”和“强”两个字正好有比较类似的偏旁，这更进一步增大了混淆度，使人容易按错。如果用户是视力不好的人或盲人用户，可以想像这样的电扇几乎无法使用。对于年轻人来说，如果房间里的灯光比较按，或者没有开灯时，想要正确无误地按下一个也很费劲。

在这个例子中，所要控制的参数是风力的大小，产品界面提供了四个按钮来将风力设置为四个级别之一（包括一个停止状态）。这里的设计问题在于，这四个按钮的外形一模一样，人们无法从它们的外形中得到某种按下它们后会产生什么样的结果的暗示。由于这样的原因，人们每次必须仔细查看标在按钮上面的文字才可以。

针对这个问题的一个可能的解决办法是改变按钮的大小，使得其大小和风力大小相关联：即用大按钮表示将风力调大，用小按钮表示将风力调小，最小的按钮表示停止，如图2-37所示。

和这个风扇按钮的改进方案很类似，很多的网页提供了让用户可以改变页面上文字大小的功能，这个功能的使用法如图2-38所示的某网页的设计所示，在其右上角有三个大写的A，其中点击较小的A表示使用小字体，点击较大的A表示使用大字体。这里按钮控件的大小和它所表示的字体大小的意义正好相符，很容易理解和使用。

2.5.3 操作控件的操作方式和它的作用之间的对应关系

如图2-39所示的是某立体车库的控制车位升降的按钮设计。为了升高车位，你需要顺时针旋转这些开关；为了降低车位，你需要逆时针旋转。类似地，有些汽车车窗玻璃的升降也是通过一个摇把来进行操作的，如图2-40所示。

以某个方向摇动会把玻璃摇下来，而按相反的方向摇动会把玻璃摇上去。在这两个例子中，操作的结果是把某物体升高或降低的直线运动，而操作方式却是旋转这样的圆周运动，显然，它们之间缺乏自然的匹配关系，我想这就是我为什么总也记不住应当是顺时针还是逆时针才能把那种摇把式的车窗玻璃摇上去，有50%的时候，我在第一次尝试时总是弄反了方向。

再来看一个好的设计的例子。某公司的会议室里在某面墙上有一块可以升降的投影仪幕布，它的按钮控制如图2-41所示。按钮可以扳到向上、向下或停留在中间的位置。即使按钮上不标文字，我想大部分人看一眼也能猜出如何把幕布升高或降低。

在Google地球软件中，把当前画面以其中心点为圆心旋转的操作遵守了自然匹配的设计原则，如图2-42所示的右上角所示，这个操作的控件部分就像是一个方向盘的设计，你只需用鼠标按住圆周上的任何部分，然后绕着中心旋转就可以了，那种体验就好像是在转动方向盘。

不过，在Google的另一款照片管理软件Picasa中，有一项功能的操作方式却缺乏这样的自然匹配关系，如图2-43所示。Picasa提供了一项名为“拉直”的功能。这个名字有些误导和难懂，它的实际作用是将照片做轻微的旋转，这样就可以处理那种由于照相机被端得不水平而造成的原本是水平的物体在照片上显得倾斜的问题。Picasa对于这个功能的操作方式是，当把滑块由中间位置向右拖动时，照片逆时针旋转，反之向左拖动时，照片顺时针旋转。这里的操作方式是一条直线上的左右方向，而操作结果是圆周式的旋转，因此无法从界面上直观地看出应当对一幅倾斜的照片采取向左还是向右拖动滑块的操作。

2.5.4 操作空间的维度和结果状态改变的维度不符

经常在北京的环路上开车的朋友都有这样一个体会，即一定要注意在正确的出口位置驶出主路。过早地驶出将会提前进入路况复杂的辅路，导致行使速度下降；而错过了出口位置就更麻烦了，你只能在最近的下一个出口出主路，然后选择调头或其他绕行路线。

由于以上的原因，判断自己当前位置和出口的大致距离就成为了在环路上驾驶的一个应当注意的问题。在离出口还很远时，司机可以选择靠近左侧的快速车道行驶；而随着逐渐接近出口，司机就需要根据路况及时将车向最外侧车道并线，以便在出口前能够及时驶入到最外侧车道并安全驶出主路。

在北京市的各条环路上，几乎所有的出口都是和各个立交桥联系在一起的，因此对于出口位置的判断就几乎等同于对于这些立交桥位置的判断。例如，人们在规划自己的行驶路线时经常采取类似这样的描述：“在某某环路上开到某某桥出主路，然后在辅路上行驶至某处，左转、右转或调头”。

现在就设想一下你正驾车由东向西行驶在北三环的主路上，如图2-44、图2-45、图2-46 和图2-47所示是四个设想的交通提示牌。当你只用两三秒钟的时间很快地分别扫视过这些指示牌后，你能否立刻知道这三座立交桥和你的相对远近位置呢？哪个桥离你最近？哪个最远呢？换句话说，你认为哪种表示法更形象、更直观地将距离远近的信息表达出来了呢？

在这些指示牌上，用于表示这些地点相对位置的信息是用这些文字之间的相对位置来表示的。不幸的是，用平面上的相对位置来表示空间的纵深信息很不直观。例如在其中一幅图中，用靠左表示该地点离你近，而用靠右表示离你远。那么，为什么左边就表示近，而右边就表示远呢？这种对应关系很随意，因此人们无法找出一个很好的方法来记住这种对应关系。这就是为什么大多数人看到上述四个样式的指示牌后无法很快地做出正确判断的原因。不幸的是，北京市的环路上的交通标志牌正是这样设计的，如图2-48所示。你不得不借助于比较地点后面的公里数才能知道哪个桥离你最近。

在软件界面的设计中也有类似的困境。计算机屏幕是个二维的平面体，如果用显示在平面上的二维空间来进行三维操作，就会出现类似上述交通标志牌的难以理解的问题。例如，在Google地球软件中，有一个界面上的控件用来控制更加接近地面或是远离地面的操作，从而可以相应地放大或缩小地球图像，如图2-49所示。

显然，这个接近或远离地面的运动方向和计算机屏幕所在的平面是垂直的，然而，操作控件自身却是显示在计算机屏幕的平面上，点击靠近上部的按钮表示接近地球，点击靠下的按钮表示远离地球。除非我们可以把屏幕中靠上的位置理解为“远处”和靠下的位置理解为“近处”，否则我们很难看出点击靠上的按钮就能表示向远处的地球飞去。

在解决这个难题之前，先来看看我们可以如何解决北京环路上的那个交通标志不易理解的问题吧。解决方法的关键之处在于，利用绘画中的透视原理，在一个平面上表示出立体的效果。图2-50 显示的是改进后的设计。现在，你不需要看后面的公里数，只需简单地扫一眼就应当能理解哪个地点离你最近了。

应用同样的原理，我们可以把Google地球中的控制接近或远离地球的操作控件修改得具有穿透屏幕的立体效果，就像是苹果操作系统中“时间机器”的操作界面中用于控制穿梭时间索道的控件一样。两个箭头的形状给人的感觉更像是穿透了屏幕、分别指向屏幕的里面和外面，这样，操作维度和结果维度就一致起来了。用户就会觉得该操作比较自然和易于理解，如图2-51所示。