用户界面设计

序章 关于这本书 没错，你看到的是一本关于人机交互的书。 如果你还不太了解这本书要讲什么东西……不知道你在住宅区或学校里面看到过减速 板没有。它是横在道路中间凸起的一道铁板，用于限制机动车的速度。这是个增强了路人安 全性的很好的办法。但是，它在限制汽车的同时却又难为了自行车。在很多小区或者校园， 我发现几乎所有的减速板统统是一长条铁板，那些骑自行车的人就只能溜边，从减速板和马 路牙子间的狭小缝隙中穿过。 这种糟糕的设施就是没有充分考虑“用户”的结果。其实要限制机动车而不阻碍自行车， 只需要把长长的一整条减速板分成几块短板，短板之间留出十几厘米的空隙便于自行车穿过 就行了。 这就是是否“人性”的思维方式。在人机交互 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 中，也就是我们所说的“可用性”和 “用户体验”。网页也好，软件也好，或者是手机、影碟机等设备，只有充分考虑用户在使 用时的感受，才能开发出令人满意的产品。 When you were young, And your heart was an open book. What does it matter to ya? When you got a job to do, you gotta do it well. ——Paul McCartney 如果你不考虑用户，或者说没有考虑所有的用户，那么有可能就会出现类似下面这种情 况： 在你打开的这本书里面，我们主要讨论的是网页产品的界面设计。这包括： l Web，也就是网站。不管是个人网站还是商业网站，你都需要考虑用户体验和 可用性问题。 l Web-based 产品。所谓的 Web-based 也就是基于网页的产品或服务。它们不 用安装客户端，用户以网页形式就能登录使用。例如网络管理系统或一些在线软件。 简单来说，实现更好的“可用性”和“用户体验”就是我们要谈论的内容——如何才能 充分考虑用户的感受？ 0.1 谁该看这本书？ 先看看你自己。如果你是： l 一个界面美术设计师，使用 Photoshop和 Flash软件来展现自己的创意和美学 素养，考虑材质、渐变和光影效果以及页面的布局，但却不太清楚最合用户心意的 到底是简洁实用还是美观大方； l 一个软件程序员，对 Java、C++和 ASP.NET都很熟悉，戴着眼镜写出一行行漂 亮的代码。你觉得对软件来说功能的强大和完备才是最重要的，从没怎么在意过用 户怎么使用它； l 一个页面制作员，使用 Dreamweaver把 100个 表格 关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载 嵌套在一起，随心所欲地通 过 CSS样式表来控制页面的视觉效果。你认为自己掌握了不少知识和经验，如果 有机会可以往更高的层次发展； l 一个产品经理，甚至是一个网站或网络软件公司的老总，你知道自己手下的技术 都很厉害，但不知为什么最后的成品总是有点无法让你安心。或者你想让自己推出 的产品或服务能够有更大的竞争力，获得更多的好评从而占有更大的市场份额； l 一个初出茅庐的本科生或研究生，你掌握了很多人机交互的专业知识，了解很 多这方面的技术，但不知道如何才能把你的本领发挥出来，并且告诉上司你做的工 作并不比程序员们简单或者低级； l …… 如果你是上述这几类人的其中之一（可能有些家伙还身兼多职），而且： 那么我很高兴这本书非常适合你。如果你还在书店里犹豫……赶紧买下来吧！ 但是，如果你满足以下任何一种情况： 那么，很遗憾，这本书不适合你，再看看架上其它的书吧！ 0.2 这是本什么样的书？ 我们仍然需要知道，人机交互是一门严谨的学科。它涉及到很多方面的知识，包括人体 工程 路基工程安全技术交底工程项目施工成本控制工程量增项单年度零星工程技术标正投影法基本原理 学、软件工程学、心理学、美学、计算机科学、社会科学……很多很多。这个领域在西 方研究得比我们要早，大概在 70年代就已经发展成为一门正式的学科了，到今天也已形成 了无数的理论和流派。市面上你能找到很多交互设计方面的书，它们绝大部分都非常有用， 讲述了很多人机交互的内容，而且非常专业。 是的，非常专业。有时候甚至专业得没有人愿意看下去。不知道你有没有这种体验，就 是面对着那些艰涩难懂、通篇专业术语的长篇累牍，明明都看在眼里，却没有经过大脑，然 后在十分钟之后把它们全部忘光。过于专业的词汇会让你的大脑有一种潜在的抵触情绪，它 会欺骗你的眼睛，让你以为已经“看过”了，但其实你只是“看到”了，而没有形成印象。 ……我只是开个玩笑 在这本书里，我不想让你感觉责任重大。毕竟我们的目的只是为了让我们的产品有更好 的表现，能够让用户们更方便地操作，从而伸出他们的大拇指：“这些家伙干得不错”。 所以我不想和你谈论过多技术方面的问题。不论你是一个界面美术设计师，还是一个程 序设计师，或者是产品经理，甚至是公司的老总，其实你所需要关注的并不是实现的手段如 何，或者到底使用了什么技术，你所应该关心的只是“目的达到了没有”。 这是因为，用户不会去在乎你是用 HTA技术还是 GOMS技术来分析他们的典型任务， 或者摆在他们面前的是 PICTIVE模型还是 CARD模型。他们根本不会考虑这些问题。他们 只需要感觉你的产品好用、方便、舒服，他们就会高兴，那么你的目的就达到了。 因此，我希望在你面前的这本书能够告诉你一些需要知道的东西，而不是要逼你了解所 有的交互设计技术。我们需要了解必备的常识，然后要保证自己不会忘记。填鸭式的硬塞可 达不到这种效果——除非你是一个自虐式的学习狂人。我希望你能够轻松地学到知识，而不 是强迫自己的大脑去死记硬背。 你怎么看待知识？ 要想做到这一点，我总结了一些方法： l 多给你一点好玩的图片 有人说“对大脑而言，一幅图顶得上 1024 个字。”与单纯的文字相比，图片更能让人 看懂、记得住，学习效率也会更高。你的大脑会喜欢一些新鲜的玩意，也许它们只是让 你感到有趣、奇怪或者幽默，但你的大脑会投入更大的注意力，它会觉得这些东西更有 可能要被记住。也许画图会耗费我更多的时间和精力，但为了让你高兴和轻松，我觉得 这是值得的。此外我对自己的联想和绘图能力感到很骄傲，也很愿意把这种能力展示出 来。 l 用一种交谈的方式 我可不想用干巴巴的语调来介绍知识。照本宣科地作 报告 软件系统测试报告下载sgs报告如何下载关于路面塌陷情况报告535n,sgs报告怎么下载竣工报告下载 应当更容易，但那样很没意思， 也不会提高你的积极性。想想看，与一个朋友交谈和坐在一堆人中间听报告，哪一种会 让你更想打瞌睡？其实你的大脑并不在乎“交谈”的对象究竟是谁，即使是一本书，这 对它来说也没什么太大分别。所以我会用很通俗的语言来描述哪怕是很艰深的知识，而 且不会板着面孔，偶尔可能会开些玩笑。 l 引起你的注意，并保持你的注意 你肯定有过这样的体验：“我真的很想把这个学会，但是看过一页之后我实在是昏昏欲 睡”。你的大脑注意的是那些不一般、有意思、有些奇怪、意料之外的东西。学习一项 有难度的新技术并不一定枯燥。所以我可能会使用一些方法来引起你大脑的“警觉”， 让它做一些评价和判断，而不会老是呆在那里打瞌睡。 l 有所取舍，才能有所收获 这本书的目的是让你了解交互设计“可用性”方面的知识，从而使你的工作（不管是结 构设计、程序开发还是美术设计）更系统，更容易达到好的效果。之前我已经说过，介 绍技术不是这本书的重点。如果你真的要成为人机交互设计的大师，这本书肯定也不会 是你唯一关于交互设计的书。所以我不打算方方面面都照顾到，以免弄成了“贪多嚼不 烂”。这里只提供你真正需要的东西。 l 我不布置作业 在上学的时候作业已经做得够多的了。这本书不会让你感到自己必须付出多少劳力来应 付老师（如果存在一个“老师”的话）。很多书提供了各种各样的习题，但没有提供答 案。这种习题除了让我们对自己更加怀疑之外没有什么作用。还有很多书在习题下面就 是答案。既然答案就在下面，为什么不把它们以更好、更容易接受的方式呈现出来？真 正的习题是我们在现实中遇到的具体案例。 在这本书里，我尽力做到系统、流程化地描述交互设计的方方面面。如果你在某个环节 遇到了问题，翻翻对应的章节。翻个两三次你就记住了。我们不需要习题。 0.3 怎么用这本书？ 前面已经说了这么多，下面就看你的了。我在这里提出了一些建议，你可以看看，然后 听听你的大脑怎么说，弄清楚对你来说哪些做法可行，哪些做法不能奏效。当然你也可以做 一些新的尝试。 l 看慢一点 毕竟你不是在看小说。也许你会觉得有些意思，但如果只是随便翻翻，不用心去理解的 话，可能也没有多少效果。慢一点，有些东西需要想一想。如果在书里感觉有些疑惑， 先弄清楚再接着读，而不要把它放在一边“待会再去考虑”。我希望你能读进去，越深 越好。要知道，理解的越多，需要记住的就越少。 l 大声说出来 如果你想看懂什么，或者想把它记得更牢，就大声地说出来。比如：“这家伙这里写得 有点深奥。我想他是这么个意思……”。更好的办法是，拉个人过来，问他“你觉得这 里是个什么意思？”，然后再把你的理解讲述给他听。至于他懂了没有……反正我不太 在乎。总之这样你会学得更快，这是以前光看不说的时候未曾发现的。 l 不要三心二意 没错这本书里面有不少好玩的图片。但别只去看那些漫画，它们是一种辅助，为了让你 更轻松地理解书里面要讲的东西。这不是一本漫画书。 l 别跟你的大脑过不去 如果你发现看的内容开始不经过脑子了，例如开始浮光掠影地浏览，不太想记住，这说 明你的大脑已经有点吃不消了。这种时候你该休息一会。如果到达了某个极限时还在一 味地往里面塞东西，野战排的包也受不了，更何况你 1300克的大脑了。 l 一些小提示 多喝点水。充足的液体供应能够让你的大脑处于最佳状态。不要在椅子或床上一呆就是 两小时，多走动一下可以调整你大脑的紧张程度。此外，看完一些章节之后别再看其它 书了，或者暂时不要看其它有难度的东西。你的大脑需要有一段时间对刚吸收的知识进 行处理，如果此时你又往里面灌输了新的知识，那么你刚才学到的东西就会丢掉。 我相信你是最棒的。如果你对书里的内容有些疑问，或者希望更深入的探讨，给我发邮 件，或者光临我的网站 http://www.messiahbook.com。我会一直等在那里。 0.4 感谢这些伙计 请允许我在这里占一点篇幅。这本书的完成与以下人是分不开的，我必须在这里告诉所 有人，我以他们为骄傲： 我的父母及家人。很明显他们对人机交互一窍不通。但是他们永远都一如既往地支持 着我，使我虽然离家千里却从没感到过烦恼。我非常、非常地爱他们。 编辑陈冰。感谢他对我的肯定。作为清华大学出版社最富创新精神的编辑之一，他直 接影响了我的写作风格，并且对我极为信任。一个快活的老伙计。 夏德安。作为优秀的程序员、我最好的朋友之一，也是我第一本书的合著者，他一直 关注着我的这次写作，并且提供了莫大的帮助——尤其是在寻找案例方面。我仍记得那些和 他通宵探讨直到天明的日子（尽管其中大部分时间他都在玩 PSP）。 我的朋友曲佳。作为我的好友，以及我所在公司的 UE（用户体验）工程师，他带我 参加了很多交互设计的公开活动，也认识了很多朋友。 James R Palmer。嗯，我认识的最好的历史作家，他把自己一生中最好的光阴放在 了中国，研究中日战争和中俄战争。他教给我一些非常有用的写作技巧。 我的乐队。也许我更应该感谢他们的宽容和耐心。由于写作我失去了很多写歌和参与 排练的时间，以至于无法在主音吉他手的小孩出生之前录好我们的专辑小样。非常抱歉！ 第一章 你首先要知道的一些事情 以下是一些我们在学习网络界面的交互设计之前先要理解的东西。有一个好的开始才能 有好的结束。 1.1 我听说过这些词……不过它们到底是什么？ 很多从事界面图形设计的朋友经常会彼此发牢骚：“那个程序员刚才又在叫我‘美工’ 了。” 当你问他们“那你们是什么？”的时候，他们一般都会很理直气壮地告诉你：“我当然 是 UI设计师！” 我不止在一个公司发现这种情形 现在的界面图形设计行业中，“交互”、“可用性”还有“人机工程学”之类词汇的使用 频率越来越高。每个设计人员都会在解释自己设计成果的时候说：“这个按钮用这种颜色、 放在这里，是因为我考虑了人机工程学的一些原理。这样便于用户识别和点击。” 这句话说得很漂亮。而且体现出该设计人员高人一等：我不仅考虑了美观，我还考虑了 更多。与此同时，这也确实涉及到人机交互学中的一些理论——比如“从用户的角度出发考 基督：“你们必晓得真理，真理必使你们自由。” ——《约翰福音》 虑问题”还有“突出可识别性”等等。 但实际上呢？ 可能 80%的图形设计人员这么设计和放置按钮的原因只是：“我只是认为这么设计比较 好，它可能会给用户带来方便。”他们都是凭借自己的设计经验得出的结论，而这些经验， 并没有经过具体的考证和研究——也许它们是对的，也许不是——设计人员没有通过具体的 询问用户或者测试用户来得出这些结论。他们只是感觉这样是对的。 你可以这么做。但你不能因此就说：“我当然是 UI设计师。” 达·芬奇 可能很多朋友会有些生气。“美工”这个称谓当然令人感到受了些许侮辱：它让人联想 起以前工厂里的黑板报工人。因此很多新时代的设计师们对被称为“美工”非常反感。我从 事了多年的图形设计，我也曾经对人说“请称呼我 UI设计师”。但后来我了解了这两个含义 之间的不同，于是稍后一段时间我对人说“请称呼我美术设计师”。直到我开始从事真正的 界面设计工作（这个词的具体含义马上就会谈到），我才逐渐以 UI设计人员自居（但仍然有 些汗颜）。 那么到底什么是 UI设计师？ 不，我不是 UI设 计师。 1.1.1 什么是 UI设计 UI设计师，英文的全称是“User Interface Designer”，也就是“用户界面设计人员”。 用户界面设计人员的工作不是要表明网站或者软件界面完成后看起来是什么样子。他们 的工作是要指出软件如何从一个版本升级到另一个版本，如何更容易地学习、使用，还有如 何能帮助用户达到他们的目标。一个激情四射、吸引眼球的用户界面并不等于就是一个易学 易用的用户界面。 他们研究的是产品的“可用性（Usability）”和“用户体验（User Experience）”的问 题。用户界面设计，很大程度上就是在探讨如何让产品的界面更具可用性，如何让用户能有 更良好的体验。这是一种优化后的界面，通过这种界面，用户能够更方便地完成任务，获得 更好的感觉。 让我们打个比方。现在网页中可能要放置一个按钮。美术设计人员所需要做的，是让这 个按钮更好看，显得时髦，或者符合界面中其它元素的美术风格。而用户界面设计人员所要 考虑的，则是这个按钮的摆放位置、上面显示什么文字，甚至是我们到底要不要这个按钮。 很多管理者，例如产品开发经理，并不了解美术设计人员和用户界面设计人员的区别。 他们认为用户界面只是一个应用程序的表面，漂亮和酷就等于好用，所以他们雇佣美术设计 人员来设计用户界面。这样做的结果，往往是产品的样本演示看起来很吸引人，而一旦真正 工作起来就不好用或者不实用了。 由于所谓的多媒体软件越来越受到欢迎，这种误解变得越来越普遍，审美的要求和娱乐 的价值被更多地推到了首要地位。现在的公司招聘界面设计师，提出的都是关于美术设计的 问题。这是一种危险的兆头，说明就连雇佣者都不明白用户界面设计究竟指的是什么。所以 前面谈到的那些自称为 UI设计师的朋友也就不足为怪了。 以下是用户界面设计人员要做的各种工作中的一些例子： l 协助为拟定开发的产品定义用户模型。 l 参与产品的可用性测试和评估，并提出修改建议。 l 将完成一个普通任务所需要的鼠标动作减少一半。 l 将网站中弹出窗口的总数量从 27个减少到 15个以内。 l 修改菜单中的命令，将原来不一致的、令人困惑的短语改成容易理解的词。 l …… 这些都是对“可用性”和“用户体验”的设计。它既不是美术设计，也不是写代码。感 觉非常枯燥，嗯哼？ 要么你就让别人去关注 UI设计。然而一旦你完成了这些工作，或者尽可能多地做了其 中的一部分工作，你的成果所带来的收益将是无法想象的。你的素质将会更高，也因此成功 地迈上了新一级的台阶：你将会真正地、更为全面地看待界面设计工作，不管是美术方面、 程序方面还是用户界面方面。 要想完善自己，获得更多人的承认，或者干脆承认吧，要想找到更好的工作、得到更多 的薪水或者报酬，我们就必须付出一些努力。下面是需要掌握的另外一些基础知识。 1.1.2 什么是交互设计 许多产品都要求用户与之进行交互来完成它们的任务。交互就是指用户通过某种方式发 出指令，例如用遥控器打开空调并降低温度，或者把微波炉设置为 3分钟的“烧烤”模式。 影碟机、电视、卡拉 OK里面的点歌机，这些都是交互产品。要想让产品服从你的命令， 你就必须和它交互。那么如何让用户能够轻松地发出命令，或者明了产品当时的状况，就需 要良好的交互设计才能解决。 这就是个交互产品……不过不够好 我们这本书主要讲的是 Web 和 Web-based 产品。举个例子来说，现在你想在网上预 订一场演唱会的门票。你首先需要登录该演唱会的官方指定网站，然后选择是 VIP 席位还 是最便宜的站票，再选择支付票款的方式、输入需要送票的地址，此外可能还要输入交易金 额等等。这些都是交互。你需要和某个东西（也许是网站，也许是某台机器）发生关系，给 它数据或信息，然后得到它的数据或信息反馈，最终达到目的。 不幸的是，很多产品或服务在设计的时候，根本就没有考虑到用户。虽然从功能的角度 来看或许可以工作，但它们往往忽略了真实用户将如何使用这个系统。 在刚才网上订票的例子中，可能会出现这种情况：你想用自己的招商银行一卡通来在线 汇款。你经过了一系列订票的操作步骤，包括选择价位，然后输入自己的真实姓名、身份证 号码和联系电话，填写了送票地址，甚至还选择了“希望周一至周五工作时间送票”。然而 到了选择支付方式的时候你才发现，这个网站只支持工商银行的网上支付，不支持你的招商 银行。 …… 你没有工商银行的卡。你在呆滞了一分钟后关掉了订票页面，怅然若失。 为什么不在一开始就告诉我们招商银行的卡不能使用呢？或者是网站提示了这一信息 但很不醒目？虽说我们还可以通过电话订票或者直接去售票点，但是已经白白耗费了数分钟 在网站上去思考和输入各种信息。最重要的是，你的心情会较之刚才要糟糕一些，对这个网 站的好感度则下降得更多。甚至可能你以后压根儿就不愿意再进行网上订票这种本来很方便 的活动了。 你的表情大概是这样的： 而交互设计（Interaction Design）的目的，就是在设计过程中引入“可用性”和“用 户体验”的概念，从而解决以上谈到的类似问题。从用户的角度而言，交互设计在本质上就 是关于开发易学易用、使用有效果而且令人愉悦的交互式产品。 所谓的“交互设计”指的是： 设计支持人们日常工作与生活的交互式产品。 具体地说，交互设计就是关于创建新的用户体验的问题，它的目的是增强和扩充人们工 作、通信及交互的方式，使他们能更有效地进行日常工作和学习。 交互设计现在已经成了一个重要的商业领域。很多网站咨询、新生公司和移动计算行业 都已经意识到交互设计在产品中起到的关键作用。对于 Web 及 Web-based 产品来说，要 吸引人们的注意，就必须能从众多的竞争对手中脱颖而出，那么就面临着一个核心的问题： 产品应该易用，而且有效。市场部门也开始意识到Web产品的可用性对于品牌的创建、点 击量、客户回头率和客户满意度的影响很大。 好的交互设计可以造就一家公司的成功，反之，则可能导致一家公司的失败。因为现在 有太多的网站和产品可供用户选择，如果在你这里感觉不好，他们随时可以很轻松地找到一 个替代品。而当这个替代品给他们的感觉更好的时候，这些人就可能永远不再光顾你的网站 了。 以前，当一家公司在计划开发交互式产品的界面时，只需招聘“界面设计师”（这个词 汇在当时相当笼统），主要参与的是产品界面元素的设计。而现在，交互式产品的范围已经 大大拓宽，人们对界面重要性的认识也随之提高，所以也出现了其它一些工作岗位，包括： l UI设计师（参与有关交互的各种设计，而不仅仅是界面的美术设计） l 可用性工程师（使用可用性方法及原理进行产品优化） l Web设计师（设计网站的视觉效果，例如排版和按钮） l 信息规划师（规划和组织信息的架构，尤其是网站） l 用户体验工程师（组织用户测试、分析结果并且协助制定改进 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 ） l …… 总之，用户界面的好坏不仅仅只是它看上去如何，还在于它是否易学易用、没有风险， 是否能让用户在潜意识中去逐步了解它，以及它是否能更好地支持用户完成任务。 那么什么才是易学易用、没有风险的设计呢？ 1.1.3 什么是好的用户界面设计 我们要理解什么是好的设计，先来看看什么是不好的设计。不好的设计就是可用性不强 的设计。它们一般都会包括以下几个特点（甚至更多）： 视觉表达不清 也就是说没有明显的视觉顺序和用户焦点。例如网页的内容之间没有明确划分、用户不 清楚什么地方可以点击、到处都是闪动的广告和促销信息等等。在这样的界面中，用户很难 把注意力集中到相关的信息上。 用户界面设计中有句话叫“用户想得到的信息才是屏幕上最应明确显示的部分”。看看 下面这张图，你觉得它最明确显示的是什么（在一阵头晕目眩之后）？这种网页好用吗？ 非常繁琐 也就是说，哪怕是最常见的基本任务也需要很多执行步骤。我们拿两个例子比较一下就 会很清楚。 Windows Live Spaces里面的博客系统非常简便，当你浏览某篇文章感觉有必要引用到 自己博客里面的时候，直接点击下方工具栏中的“写入博客”（英文为“Blog It”）链接， 便能够自动跳转到你自己的博客页面，同时文章的内容和引用地址也被自动复制到新的 页面中。 在这个操作中你只需要两个步骤： 1. 点击“写入博客”。 2. 点击“发布博客”。 但我们再看看“和讯博客”的引用功能。当你看到一篇文章想要引用的时候，就比较麻 烦了。你需要： 1. 先把想引用的整篇文章复制到剪贴板中； 2. 在自己的博客里面新建一个空白文章，再把复制的文章粘贴到文本编辑器中； 3. 回到引用的那篇文章，复制其引用通告的地址； 4. 点击自己的文章页面下方的“更多选项”，找到相应栏目，粘贴引用地址。 5. 点击“发布博客”。 这样的“引用”操作无疑比Windows Live Spaces更繁琐、不方便，没人愿意这么麻 烦。因此我们可以看到和讯的博客里面很少有相互引用的，导致一个个博客成为老死不 相往来的孤岛。该系统根本没有实现博客的主要功能。 提示混乱 例如没有明确告诉用户他或她所要执行的操作到底是什么意思，是否能达到自己的目 标。 我们来看看 Yahoo! 中国。首页里面的搜索栏工具后面有一个叫做“全网搜索”的按钮。 我不知道这个“全网搜索”究竟是指“全 Yahoo! 网站搜索”还是“全互联网搜索”？ 也许有很多用户并不在乎到底是从哪里搜索得出的结果，但对我这种比较关注搜索得到 的信息量大小的人而言，也许会产生一个顾虑。我可能仍然会去 Google，因为那里更 明显地告诉我，我将得到的是整个互联网的搜索结果（其实 Yahoo! 这里的全网搜索同 样也是全互联网搜索）。 难以使用 比如说，使用了很多用户不太能理解的词汇，或者容易引起误解的词汇。 例如某人可能会说：“这个在线银行业务要求我输入‘PIN号’，但他们给我的卡上有个 ‘密码’。我不知道是不是这个？肯定是，因为他们没有给我任何叫做‘PIN 号’的东 西。”但其实 PIN是指个人身份号码（Personal Identification Number）。 又或者：“嗯。这个复选框标注着‘水平排列图标’。我想知道如果我不选中它会发生什 么。我的图标会垂直排列，或者它们只是没有排列？” 强迫用户 也就是说系统提供的一些元素让用户难以接受。例如难听的按钮点击声音，或者强制播 放的背景音乐。 在淘宝网，如果个人店铺的店主设置了背景音乐，在浏览时就会自动循环播放。这是个 很有特色的点子。但是有一点让人很不舒服，就是当我在店铺中进行一些操作的时候， 例如选择某个商品分类或者翻看商品列表，就会跳转到一个新页面，所有的元素全部重 新载入。此时播放了一半的背景音乐也会中断而重新开始，尽管我其实根本没有离开过 这个店铺。 另外，也许我当时正在听其它音乐，或者正在听英语，或者正在和朋友语音聊天，这时 背景音乐就显得有些讨厌了。但是我把页面找了个遍也没有发现有关背景音乐的任何控 件。很多店主也发现了这种情况，于是他们只能在店铺公告中多输入一些文字以提示浏 览者：“要想关闭背景音乐，你可以按 Esc键。” 哦！原来我还是可以控制音乐的。但尽管这样也仍然没有完全解决问题。因为当我点击 下一页的时候背景音乐又自动开始从头播放了，除非我再次按 Esc。 其实要改善这个问题非常简单：把页面改为框架结构，在主框架中提供能控制背景音乐 的小工具。当子框架中页面更改时主框架不会重新载入，音乐便能够完整地循环播放了， 也便于浏览者对其进行控制。 以上这些都是用户界面设计没有注意到的一些方面，也还有更多问题我没有提到。当然， 这些网站在很多方面都非常优秀，但是如果能够更全面地解决可用性问题，我想它们会更加 让人流连忘返。 1.1.4 那么该怎么做？ 我们在设计交互式产品时，需要考虑什么人将使用它，以及它将用于何处。另一方面， 我们也要理解人们在与产品交互时的各种行为。如何选择不同类型的界面、提供哪些功能选 项，这些都取决于产品应支持何种行为。 什么人会使用产品？用在什么地方？ 比如说现在我们有一个在线 blog 网站。它的用户范围非常广泛，可能年龄跨度也比较 大，但是有一点很明确，就是用户只能够通过互联网对其进行使用。基于这一点，在开 发的时候就必须注意页面下载和显示的时间，不能让页面里包含太多图片。 此外，如果这个 blog 网站主要针对年轻时尚的用户，那么可能界面风格会活跃一些； 如果是面对事业有成的成功人士，那么可能体现出稳重、睿智的感觉会比较好。 用户会有些什么样的行为？ 假设某个 blog专栏首页显示的是该作者最近的 10篇文章列表。当访问者对这位作者很 感兴趣的时候，他们会想看看其它一些文章，甚至可能是很久以前写的。在这个时候， 可能有些人希望找到“所有文章”这一选项便于自己选择想看的文章来读；而另一些人 则可能更习惯于在打开一篇文章后在该页面直接点击“上一篇”或者“下一篇”的链接， 从而直接欣赏该作者的每一篇作品。 如果该系统既有“所有文章”的选项，又在每一篇文章中提供“上一篇”或者“下一篇” 的链接，那么就说明其用户界面设计在这一方面考虑了用户。 据我所知，新浪的 blog 系统就没有这种“上一篇”或“下一篇”的功能链接。我点击 某篇文章后会弹出一个新窗口，看完之后如果想要看其它文章，又会从这个窗口弹出更 多的新窗口。 可能新浪在这里是这么想的：用户把首页作为出发点，每看一篇文章都弹出一个新窗口， 如果想看其它的，就切换到首页窗口，打开其它文章（同样是弹出窗口）。这样首页就 好像是一个出发点。但是，这个出发点并不唯一，我从弹出窗口中也能继续点其它文章。 这样一来就会产生混淆：到底哪一个才是出发点？而且它也导致一个问题：如果看完文 章后忘记去关闭的话，可能过了 10 分钟会出现一堆窗口，把 Windows 最下方的任务 栏都给占满了。有时候这让人很恼火。 不过新浪也并不是完全不考虑用户。文章列表中系统提供了“大中小”三个选项，是为 了方便视力不好或不适应太小字体的用户，这一点是非常贴心的设计。只不过如果在前 面加上“字体：”会更好一点，可以让用户更为直接地理解这三个字的含义。 我想说的是，交互设计的关键在于如何优化用户与产品之间的交互，从而使产品 满足用户的期望（哪怕是潜在的）。在做选择的时候你应当有所依据，而这个依据就是对用 户的理解。这就涉及到： l 考虑人们擅长什么、不擅长什么。 l 考虑什么可能对用户的当前做法有所帮助。 l 考虑如何提供高质量的用户体验。 l 听取人们想要些什么，并让他们参与设计。 l 在设计过程中，让用户来尝试和验证。 1.2 我干嘛得学这些玩意……还要买本书？！ 我想你已经明白了，用户界面设计并不只是“把界面设计得多么美观”那么单纯。美观 是必要的，但绝不仅仅是美观就行了。没错，我们可以花上一两个星期去为新网站制作精美 绝伦、眼花缭乱的 Flash演示片头，从美术角度我们中的某个人甚至可以做到完美——但用 户却可能因此花上数分钟的下载时间，也许他们在下载完毕之前就不耐烦地把网页给关掉了 ——连一个画面都没显示出来。 另一方面，即使产品的功能再强大，程序设计员殚精竭虑、日以继夜地开发代码，可最 后如果用户下一个订单往往需要超过 20分钟的时间，其间需要经过一系列繁琐、缓慢的步 骤，填写一系列在线表格，而到头来却发现往往不能如愿，那么这个功能强大的网页或软件 同样也不会受到用户欢迎。 因此，用户界面设计是非常重要的，尤其是在今天这个追求速度、简洁、方便和高效的 时代。只有充分地考虑用户，以用户的感受为出发点，你才有可能制作出能经受考验的产品 ——毕竟，你所做的一切都将呈现给用户，只有得到用户的承认，他们才会购买你的产品或 服务，这样你的努力才不会付诸东流。 或者不妨说，只有用户满意了，你才能赚钱。 ……当然这也有点夸张 1.2.1 用户界面不是次要的工作 很多人（他们主要是一些软件开发人员和产品经理）都认为，用户界面与软件开发中的 其它工作相比是次要的工作。他们常常会觉得，雇一个只是写点代码（或者干脆不写）的人 来做用户界面设计和可用性测试，这简直是一种浪费。 他们的一些成见比如说： l 认为可用性不太重要，又很浪费钱 他们认为，用户界面的好坏对于产品在市场上是否成功影响不大。很明显这是错误的， 我们之前已经举了很多不好的例子。 重视可用性问题在产品开发初期看起来似乎增加了开销（人员、时 间、资金），但其实这些投资很容易就可以从不断增加的收入中弥补 回来，而且会节省很多后期的开销（例如售后支持的费用）。 很容易想到的问题：一个更为可用的产品，会很快被市场和客户接 纳。而如果一些产品没有考虑可用性问题而匆匆上市，这种不负责 任的行为肯定会减缓销售量的增长。 l 认为用户界面不过就是“字体和颜色” 还有些人对于“用户界面”所包含内容的理解过于狭隘。他们觉得这种工作只不过就是 让界面更清晰、漂亮一点而已，认为它是软件中最为表面化的东西，可以一直等到发布 之前再做，甚至干脆不做。但实际上，用户界面绝不仅仅只包括“字体和颜色”，它关 心的也并不只是关于字体和颜色的处理。它关心的是软件究竟如何工作，而不是表面看 上去如何。 此外，用户界面还包含一些深层次的问题。例如用户学习使用产品的时候是否感到费力、 产品功能是否能满足用户的目标，用户完成任务的效率如何。这些问题和软件的标记、 布局和颜色选择不同，不能在开发的后期才进行。如果不对这些问题尽早考虑，并进行 测试，那么最终的版本一定不能满足要求。 l 认为用户能够适应所有的情况 一些软件经理和开发人员坚信，只要软件提供相应的功能，用户就能学会使用。没错， 人类的确有惊人的适应能力，但是认为一个潜在的用户会不顾用户界面的糟糕状况，只 是因为产品的功能而购买产品，这种逻辑是错误的。 用户凭什么要这么做呢？他们可能根本就没时间去学习如何使用，也可能没有足够的动 力，也可能竞争者的产品更加容易使用，也能提供相似的功能。不管什么原因，只要用 户觉得你的产品“有点讨厌”，他们就不会去购买和使用你的产品。谁受到了损失？不 是用户，而是你自己。 l 认为在没有足够资源的情况下可以放弃用户界面设计 领导们经常会这么说。 有些软件经理和开发人员在预算紧张、资源不足或时间进度要求严格的情况下，认为只 能“挑重要的事情来做”，而用户界面这种“不太重要”的事情可以放在一边。这种把 用户界面作为产品特性之一而牺牲掉的做法同样 是不对的。 用户界面不是产品的一种特性，甚至可以说，它 超越了产品的所有特性。它可以决定每一个特性 的好坏，进而决定了整个产品的好坏。一个没有 有效用户界面的产品就像一个没有窗户和门的仓 库：货物就在里面，但没有人能拿到。 l 认为用户界面设计只是凭空生成的灵感体现 有些人把用户界面设计看成是创造艺术，把用户界面设计人员当成是艺人（而不是工程 师），使用右脑思索，激发灵感，然后在瞬间的火花中看到一个完美的用户界面。这一 切似乎是他们凭空变戏法一般就得出了结果。 但事实上，用户界面设计工作是一种工程性的工作，以科学为基础，需要明确的要求， 要考虑候选设计方案，同时它还有限制条件，需要综合考虑，还需要测试、评估和修正。 这就好比程序设计也需要测试一样。不要说“我们需要你的设计一次成功”或者“为什 么要测试？难道你不是个好的设计师？”之类的话，因为这是不可能的。 1.2.2 用户界面设计不是界面程序设计，也不是界面图形设 计 《软件设计的艺术》的作者，Terry Winograd（2004年度的 ACM人机交互院士）曾把 交互设计和软件工程比作是“建筑师与土木工程师之间的区别”。我们不妨对此观点稍加引 申。 可以说，交互设计、美术设计和软件设计这三者的区别，有点类似建筑行业中的建筑设 计师、装修设计师和土木工程师。 l 建筑设计师最关心的是房屋居住者的感受。这些问题包括：房屋的外观是不是足 够好看？客厅会不会太大、餐厅会不会太小？卫生间是一个还是两个？居住者会不 会觉得现在的房屋空间不尽如人意？ l 而装修设计师则考虑的是在现有的空间中如何美化环境。这些问题包括：房间的 整体色调是明快还是稳重？客厅中需不需要加上修饰作用的背景墙？地板是深色 还是浅色？地毯、沙发以及茶几之间的造型、色彩搭配应该如何考虑？ l 相比之下，土木工程师则更关心工程的实现。这包括一些实际问题，例如成本、 工期和结构问题、环境问题、防火措施以及建筑方法等等。 可见，“设计”、“修饰”和“建造”房屋彼此之间并不相同。与此相类似，交互设计、 当我们有求于领导的时候…… 美术设计和软件设计之间也存在着差别。 美术设计师 用户界面设计师 软件设计师 对于软件设计师来说 学会了如何识谱，不一定就能写出脍炙人口的乐曲；会做木匠活，也不能说明就能设计 出别具一格的家具。同样的，知道如何使用编程工具和编程组件，也不代表你就一定能知道 如何创建可用、好用的软件。 即使是拔尖的程序员，对开发工具非常的了解，也仍然可能开发出拙劣的用户界面，即 便是在时间和资源都很充足的情况下。导致这种现象发生的原因有几个： l 缺乏设计用户界面的经验 一个编程经验丰富的程序员并不一定具有很多设计用户界面的经验。与此类似，进行用 户界面设计也并不一定需要太多编程的知识。 l 程序员对于某个工具越熟悉，就越容易受其影响 他知道这个工具的能力，他驾轻就熟。但工具提供的功能并不 总是与用户的需求完全吻合。 l 拔尖的程序员往往是一些意志坚强的人 他们很牛，也知道自己很牛。所以他们不愿意和他人协商，也 不会轻易妥协。如果一个开发队伍里面有几个这样的成员，而 同时他们的管理者没有足够的权威，那么结果往往是不同程序 员开发的不同部分之间存在着严重的不统一，每个人都以自己 的方式去做自己的事情。 对于美术设计师来说 美术设计人员更擅长于设计各种元素和控件的艺术外观，形象地表达功能，为整个应用 程序创建一致的艺术风格，同时让那些数据排列起来更加好看，让用户感觉这个网站或产品 确实很漂亮或很酷。 但是，尽管美术设计师们有着良好的美学素养，他们并不一定就适于用户界面设计。他 们很可能只去在乎如何让界面更酷更炫，但是却不会去关心怎样能使用户更方便地使用产 品，他们也不知道怎么做能让用户更方便。漂亮和酷并不等于好用，如果只去考虑“外观美 不美好”，很可能最后产品只是“看上去很美”，但其实只是个绣花枕头。 记住，设计用户界面和设计用户界面的图片是不同的行为。 真正的用户界面设计人员 这些家伙擅长的是分析和理解用户的任务需求，使控件和信息的安排更加合理，还有简 化产品的复杂度。同时他们能认识到用户在学习或使用产品的过程中，一般可能会在哪些地 方遇到问题。 一般来说，应该由用户界面设计师来设计界面，然后美术设计师对其进行艺术加工，最 后软件设计师来编写程序将其实现。这是一种分工合作的产物。 当然，作为一个开发团队，任何角色的成员都可以来参与用户界面设计和评估，发表看 法、交换意见（我非常鼓励这么干）。但是用户界面的设计主导工作，仍然需要专业的用户 界面设计师来完成。 1.2.3 交互设计是一门跨学科领域 现在的世界是个什么样子？语音识别、多媒体、移动计算技术、网络技术、可视化信 息……这些新技术的发展浪潮一波接一波，人们总是在不停地展望和发现新的学习、交流、 工作和生活的方式。与此同时他们还把视线转向了人生的方方面面——不论是在家里，还是 在学校；不论是在休闲，还是在工作中；也不论是独处，还是与家人或朋友共度——所有这 些细节都在启发新的设计构思，从而不断地增强和扩充原有的交互方式。 所以，交互设计的范围也越来越庞大，与各种学科相互交叉渗透，共同发展，相互之间 的要求也更高。 简单一点说，与交互设计相关的学科包括： 举一个浅显的例子。如果我们在开发一个供儿童使用的交互式讲故事网站，就需要知道 怎么给儿童编写故事，他们才会觉得精彩。这涉及到人类心理学的知识。而怎样讲他们才能 理解，就涉及到人类感知科学。当然还有网站的按钮怎么摆放、有没有背景音乐和动画，这 些又牵扯到人类工程学和行为学。此外网站的制作又需要软件工程学和计算机科学、美术设 计等等。 更别提那种艺术展览的交互式介绍指南了，你还需要对艺术作品有很深的理解能力，还 要知道人们的欣赏习惯和游览路线。 这些都需要很专业的知识，就好像不懂油盐酱醋，就做不出好菜。为了解决这种情况带 来的问题，人们也想出一种办法，那就是跨学科小组协作。也就是把许多有着不同背景、受 过不同专业训练的人员结合起来，共同参与产品设计。这样将会带来更多的构思，有助于开 发新方法和提出更新颖、更富创意的设计。 但另一方面，这种协作也会带来很多问题。首先就是成本。如果是各行业的专家和带头 人，那么成本会更高。谁也不知道这种大规模的邀请会花多少钱。 其次，背景不同的人员越多，成员之间的沟通和设计的进展也就越困难。因为不同背景 的人，在观察和讨论同一个事物时会有不同的视角和方法。某个人认为重要的东西，其他人 可能根本就视而不见。 也就是说，如果是跨学科小组协作，那么小组中可能经常会出现混淆、误解和沟通障碍 的问题。这有点类似我们常说的“公说公有理，婆说婆有理”。如果设计组的成员没有什么 团队协作的经验，可能问题还会更多。 似乎这是一条不归之路……那么该怎么办呢？ 1.2.4 不用成为专家，理解方式即可 放轻松一点。没有人是全才，也没有谁要求你精通一切。 正因为我们不可能成为涵括上述那些领域的专家，所以才会有人总结出多年的经验和成 果，提出了一系列交互设计的科学方法。这些科学方法是在积累了许多人的智慧、汇集了几 十年交互系统设计的经验基础上建立的，也是建立在关于人类学习、认知、阅读和理解的一 个世纪的研究基础之上的。 通过这些科学方法，你就能按部就班地开展工作。这有点类似“依葫芦画瓢”，但同样 也需要付出。 从另一方面来说，也没必要去成为交互设计或者人机交互设计的专家。没人逼着你考级、 评职称。你的目的只是为了让自己的产品或服务能够变得更好。也许做着做着你就能成为专 家。 所谓多少年总结出来的人机交互设计的科学方法，其实就是下面这句话： 仅此而已。 在网页或基于网页的软件设计中，我们时刻把握住这句话，不需要专家们的介入，我们 自己能够完成一切。 Google那句话怎么说来着？ “Focus on the user, and all else will follow.”——“以用户为中心，其他一切纷至沓 来。” 1.3 OK，那我该怎么做？ 我想你已经了解了交互设计的重要性。简而言之，用户界面设计就是在产品功能完整的 基础之上，考虑如何更好地展现，以及如何让用户能够更方便容易地使用它，从而在各个方 面提升产品的质量，得到用户和客户们更高的评价，最终扩大产品和服务的销售。 从我们自身来说，好的交互设计能够更充分地体现开发人员的价值。作为一个 UI设计 师，做出成绩是自身得到更好发展的前提。 很多公司意识到交互设计的重要性。但同样有很多公司仍然不知道该如何进行。那么到 底该怎么做呢？ 首先我们需要知道有关交互设计的具体组成以及涉及的各种过程。全面地了解交互设 计，摸清它的轮廓，我们才能明白这到底是怎么回事，在这些过程中我们需要做些什么。 1.3.1 交互设计的 4个内容 一般来说，交互设计过程涉及以下 4项基本活动： 这些过程的目的，是要保证产品是可用的。因为不同的用户有不同的需要，你需要相应 地设计不同类型的产品。例如，儿童和成人之间的不同，会导致他们的衣服、食品和游戏都 各不相同。做做小游戏、加入点卡通形象更有助于激发儿童的学习兴趣，但这种方式是否适 用于 25岁的男性研究生就很难说了。 为用户“度身订造”产品或服务，这一点通常可以采用“以用户为中心”的设计方 法（也就是 UCD方法，User Centered Design，记住这几个字母）来实现。“以用户为中 心”，也就是要一切以用户的最终感受为出发点，让用户参与整个设计过程。同时，为了验 证产品确实能够满足用户，你也需要通过测试和评估来进行判断。 下面我们再来看看交互设计的 4个基本活动。 理解用户需要，建立用户需求 我们必须了解谁是目标用户、他们需要哪些支持，才可能设计出能支持这些用户的产品。 首先找到真正的用户，然后从他们那里找到需求。用户和他们的需求是所有设计、开发工作 的基础。在“以用户为中心”的方法中，这个活动是最基本的，“万物之源”。简而言之，在 这个阶段我们需要知道：1. 用户想要什么；2. 我们要做什么。 开发一些候选设计方案 这是设计的核心活动，也就是提出满足用户需求的构思。它可以划分为两个子活动：概 念设计和物理设计。所谓概念设计就是用一种用户能够理解的方式去描述产品应该做些什 么、如何运作、外观如何；而物理设计考虑的则是产品的细节，包括要使用的色彩、声音和 图像，还有菜单设计和图标设计。 这些设计构思都需要提出各种候选方案，从而制作出原型以供评估。这个阶段其实就是： 试试该如何来做。 制作设计方案的原型 评价一个交互设计的最佳方法，就是让用户与产品进行交互，让他们去感受。这就要求 我们要把设计方案转化为可以交互的版本，或者说产品的原型。 这些原型并不一定必须是能够运行的真正软件版本，我们可以采用很多技术来实现所谓 的“交互”。比如说，制作纸张原型（把步骤画在纸片上并口头为用户演示）就又快捷又便 宜，而且能在设计的早期阶段就发现问题。这个阶段概括来说就是：先简单地做个样子 出来。 用户测试和评估 也许你和你的同事都能自如地浏览并使用自己开发的网站，或者能够顺利地通过产品或 软件完成某个任务。你们甚至还征求了专家的意见。你们可能觉得不需要其它什么保证了。 但是适应开发者和专家的产品并不一定适合绝大多数普通用户。作为开发者，你对自己 产品了解得太多了，你清楚网站里栏目的内容、产品的层次和架构，你也知道要想完成一个 任务应该按什么顺序点击什么按钮。而且作为自己领域的专家，你了解每一种流行的趋势和 约定俗成的使用规则，熟知每一个专业词汇和术语，但其实这些规则或词汇很可能让那些真 正的使用者感觉根本不知所云。 这就好比要想知道设计的玩具是否能让小孩感到好玩，你就需要把玩具塞到他们手里看 看他们的反应一样。我们需要让用户自己来检验。同样，用一句简单的话来概括这个阶段也 就是：看看这个设计行不行。 这些活动是相互联系的，交织在一起，也需要重复进行。比如说，制作了某个设计方案 的原型后，我们需要让用户来进行评估，从而得到一些反馈信息，如必须进行哪些修改，或 者哪些需求仍未满足等等。这样就要求我们再次找到用户明确需求，然后提出修改设计的方 案。同样的，这些方案仍然需要测试和评估以获得新的反馈。 这个相互联系并且重复进行的特征被称为“迭代”，是交互设计过程的关键特征之一。 1.3.2 交互设计的 3个特征 那么我们就来看看交互设计过程的 3个关键特征： 同样的，我一个一个地向你解释一下。 以用户为中心 “以用户为中心”的意思就是“让用户参与整个项目开发过程”。这是交互设计的一个 重要观点，因为只有用户才是产品成功与否的最终评判者。产品只有在用户满意的条件下才 可能卖得好，从而为你带来效益。用户不满意的产品肯定会被淘汰。 也许我们并不能保证让用户参与开发的方方面面，但把“以用户为中心”作为一个口号， 能鼓励我们关注这些问