写给程序员的UI设计书 (译) (四)
申明：本文及以后一系列有关都将《User Interface Design for Programmers》持续转载自tobybateer 的博客：http://tobybateer.blog.163.com/
感谢tobybateer的辛勤付出，给我带来了如此优秀的学习文档。
第四章：功能可见性和类比
概述
设计一个程序模式与用户模式相匹配的UI并不容易。有时你的客户对程序该如何工作以及程序的设计目的并没有什么清晰概念，所谓的“用户模式”并不存在。
当用户模式不完整或者错误的时候，程序员可以利用功能可见性或类比向用户展示应有的模式。
这种情况下，你需要寻找一些方法给用户某种提示，教他们程序如何工作。有了图形化界面之后，一种常见的解决方案是使用类比。但并不是所有的类比都有效，所以理解类比之所以工作的原因就非常重要，这也能帮你判断是否使用了合适的类比。
最著名的类比莫过于Windows和苹果的“桌面类比”（图4-1）。电脑屏幕就好像某个真实存在的桌面。上边放了一些装有文件的文件夹，可以往里边拖放垃圾的回收站，以及很卡通的图标（如打印机）。这个类比工作得很好的原因是因为这些小的文件夹图标真能使人们联想到文件夹，然后让他们意识到可以往里边放文档。
图4-1 经典的桌面类比
看一下图4-2，Kai’s Photo Soap（一款图片处理软件，由MetaCreations公司开发。这款软件于99年被ScanSoft公司购得，而该公司于05年被Nuance Communication并购，对这款软件的研发维护也随之停止——译者注）的截图。你能猜到如何放大图片么？
图4-2 你能猜到在Kai’s Photo Soap里边如何放大图片么？
这并不困难。放大镜就是一个真实世界的类比。人们知道放大镜是干什么的，所以人们不会担心使用放大操作会实际地改变图片尺寸，因为放大镜并不是做这个事儿的。
即便是一个不大完美的类比也比没有要强得多。如图4-3所示，你能猜到在微软的Word里，如何放大么？
图4-3 那在微软的Word里如何放大呢？
Word界面包含了两个放大镜。一个在打印预览的按钮上（其实干的是缩小的事儿），另一个在文档结构图按钮上（它爱是什么就是什么）。真正改变视图大小的方式，其实是一个当前显示了“100%”的下拉列表框。它并没有试着使用类比，所以对用户而言，猜测如何放大要更困难些。这也并非是件坏事，因为缩放对于文字处理软件来说也许并没有Kai这种软件来得重要。但是我敢打赌，相比较Word用户，有更多的Kai用户知道如何放大。（如今微软的Word在这方面已经做了许多改进——译者注）
功能可见性
设计优良的事物仅仅通过观察就能发现如何使用。有些门在扶手位置装有一大块金属板。对于金属板，你唯一能做的就是推，你无法拉也无法旋转。据可用性方面的专家Donald Norman称，平板只接受推（的操作）。其他一些门装配有环形大手柄，希望你去拉。它们甚至暗示你该把手放在哪儿。手柄接受拉（的操作），使你想去拉。
还有一些东西设计的就没这么好，（使你）不知道该做什么。一个典型的例子就是CD盒，它需要你将大拇指放到盒的侧面然后按照一定的方向拉开。盒子上没有任何一处设计告诉你需要如何打开。如果你不晓得窍门，就会非常受挫，因为盒子无论如何都打不开。
设计功能可见性的最好方式，是利用“负空间”与人手的形状相呼应。仔细瞧瞧（相当棒的）柯达DC-290数码相机，如图4-4
图4-4 柯达DC290数码相机正视图。注意到左侧和右下方的橡胶把手。
图4-5 背面视图。看到左下方的拇指印没？
从前边你可以看到有一大块橡胶把手，似乎需要你把右手放在那儿。更聪明的是，在背面左下方，你可以看到缩进去了一块类似拇指一样形状的东西。当你把左手拇指放在那儿，会很自然地卷起食指放到了相机前面，扶在镜头和另一块橡胶套之间。它给了你一种确信的感觉，就类似于吮吸大拇指（与此同时，你会卷起食指放在鼻子附近）。
柯达工程师试图说服你用两只手握相机，这种姿势有利于保持机身稳定，同时也不会无意间用手指遮住镜头。这所有的橡胶都不是功能性的，它们存在的唯一目的是确保你正确地握相机。
优秀的计算机UI也使用功能可见性。大约十年前，大部分按钮使用“3D”样式，灰色的阴影使它们好像从屏幕凸出来。这并不只是看起来酷而已，最重要的原因是3D按钮只接受点击（的操作）。它们看起来好像是凸出来的，而且唯一操作它们的方式就是点击。不幸的是，如今许多网站（并没有意识到功能可见性的价值）宁可让按钮看起来酷一点儿，也不愿意让它们看起来是可以点击的，因此，有时你必须仔细推敲哪些按钮是可以点击的。看看E*TRADE主页的最上方，如图4-6。
图4-6 E*TRADE的主页。黑色标题中的哪些部分可以点击？
顶部的标题部分，GO和LOG ON按钮凸出来，看起来可以点击。SITE MAP和HELP按钮看起来不可点击，事实上，它们和QUOTES标签的外观完全一直，的确不能点击。
大概四年前（其实是针对Windows 95，这一章节写于2000年——译者注），许多Windows窗口开始在右下角使用三角形的条纹。它看起来像一个把手。
图4-7 右下角的把手允许你拖动
它看起来像是某个人放到平板上增加摩擦力的东东，允许拖动，让你试着拖动它来放大窗口。
标签对话框
有一个程序员非常苦恼的问题（特别是那些没有买这本书，没有读第三章的人），那就是对话框的选项太多了，屏幕根本放不下。处理这种情况的唯一方式就是使用动态变化的对话框。例如，仔细看看图4-8显示的Netspace浏览器的首选项对话框。
图4-8 Netspace处理多个选择项的方式
对于你和我这种高级程序员，自然很熟悉这类对话框。我们看看图4-8，可以立即理解，从左边的类别里随便选择一项，然后右侧部分会随之改变，呈现出当前可用的选择项。
从某种原因上说，这种不直接的表达方式对于设计它的程序员而言再合理不过了，但是众多用户并不理解。你还是不清楚问题在哪儿？好吧，大多数人并不是高级程序员。
许多人永远都不会猜到，从左侧的列表选择一项会改变对话框右侧的内容，因为没有任何可见的理由让你联想到这一点。事实上，大多数人都认为，左侧的列表只不过是另一个设定，而且他们不敢点击，因为它属于那种让人无法理解、骇人的设定。
当你用这种对话框去做可用性测试的时候，如果你要求人们改变当前选择项（例如，“导航”选项）没有呈现的设定，你会发现许多人根本无从下手。当微软使用旧版Word里边一个类似的对话框去做可用性测试的时候，只有30%的人成功完成任务。足足有70%的人没有完成任务，放弃了。
因此微软Word开发团队选择了这种著名的标签对话框，如图4-9所示。
图4-9 IE浏览器使用了标签
他们试着用标签对话框去做测试，可用性从30%上升到100%。根据我的经验，能够将可用性从30%提升到100%的东西确实没有多少。
标签对话框就是很好的功能可见性。图4-9显示了一共有六个标签，对于当前选择了哪个标签一目了然，同时也显示了如何切换到另一个不同的标签。考虑到这个类比的革命性成功，以及标签对话框的代码已经被写入操作系统，可以免费获取等因素，如今居然还有程序不利用它们，这真让人疑惑。这些程序饱受各种可用性问题的摧残，因为它们拒绝使用标签对话框。
图4-10 Napster 2.0的UI一共有五个单独的屏幕（Chat，Library，Search，Hot List，和Transfer），你可以用顶部的按钮来切换，这是标签的另一种实现方式。诡异的地方在于，Napster的代码虽然用到了微软的标签对话框控件，但出于某种原因，它实际上以另一种搞笑的模式显示为按钮而不是标签。Napster的程序员Shawn Fanning还可以再努力一把，做一个可用性更好的界面。
