搜索
序章关于这本书没错，你看到的是一本关于人机交互的书。如果你还不太了解这本书要讲什么东西……不知道你在住宅区或学校里面看到过减速板没有。它是横在道路中间凸起的一道铁板，用于限制机动车的速度。这是个增强了路人安全性的很好的办法。但是，它在限制汽车的同时却又难为了自行车。在很多小区或者校园，我发现几乎所有的减速板统统是一长条铁板，那些骑自行车的人就只能溜边，从减速板和马路牙子间的狭小缝隙中穿过。这种糟糕的设施就是没有充分考虑“用户”的结果。其实要限制机动车而不阻碍自行车，只需要把长长的一整条减速板分成几块短板，短板之间留出十几厘米的空隙便于自行车穿过就行了。这就是是否“人性”的思维方式。在人机交互设计中，也就是我们所说的“可用性”和“用户体验”。网页也好，软件也好，或者是手机、影碟机等设备，只有充分考虑用户在使用时的感受，才能开发出令人满意的产品。Whenyouwereyoung,Andyourheartwasanopenbook.Whatdoesitmattertoya?Whenyougotajobtodo,yougottadoitwell.——PaulMcCartney如果你不考虑用户，或者说没有考虑所有的用户，那么有可能就会出现类似下面这种情况：在你打开的这本书里面，我们主要讨论的是网页产品的界面设计。这包括：lWeb，也就是网站。不管是个人网站还是商业网站，你都需要考虑用户体验和可用性问题。lWeb-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用一种交谈的方式我可不想用干巴巴的语调来介绍知识。照本宣科地作报告应当更容易，但那样很没意思，也不会提高你的积极性。想想看，与一个朋友交谈和坐在一堆人中间听报告，哪一种会让你更想打瞌睡？其实你的大脑并不在乎“交谈”的对象究竟是谁，即使是一本书，这对它来说也没什么太大分别。所以我会用很通俗的语言来描述哪怕是很艰深的知识，而且不会板着面孔，偶尔可能会开些玩笑。l引起你的注意，并保持你的注意你肯定有过这样的体验：“我真的很想把这个学会，但是看过一页之后我实在是昏昏欲睡”。你的大脑注意的是那些不一般、有意思、有些奇怪、意料之外的东西。学习一项有难度的新技术并不一定枯燥。所以我可能会使用一些方法来引起你大脑的“警觉”，让它做一些评价和判断，而不会老是呆在那里打瞌睡。l有所取舍，才能有所收获这本书的目的是让你了解交互设计“可用性”方面的知识，从而使你的工作（不管是结构设计、程序开发还是美术设计）更系统，更容易达到好的效果。之前我已经说过，介绍技术不是这本书的重点。如果你真的要成为人机交互设计的大师，这本书肯定也不会是你唯一关于交互设计的书。所以我不打算方方面面都照顾到，以免弄成了“贪多嚼不烂”。这里只提供你真正需要的东西。l我不布置作业在上学的时候作业已经做得够多的了。这本书不会让你感到自己必须付出多少劳力来应付老师（如果存在一个“老师”的话）。很多书提供了各种各样的习题，但没有提供答案。这种习题除了让我们对自己更加怀疑之外没有什么作用。还有很多书在习题下面就是答案。既然答案就在下面，为什么不把它们以更好、更容易接受的方式呈现出来？真正的习题是我们在现实中遇到的具体案例。在这本书里，我尽力做到系统、流程化地描述交互设计的方方面面。如果你在某个环节遇到了问题，翻翻对应的章节。翻个两三次你就记住了。我们不需要习题。0.3怎么用这本书？前面已经说了这么多，下面就看你的了。我在这里提出了一些建议，你可以看看，然后听听你的大脑怎么说，弄清楚对你来说哪些做法可行，哪些做法不能奏效。当然你也可以做一些新的尝试。l看慢一点毕竟你不是在看小说。也许你会觉得有些意思，但如果只是随便翻翻，不用心去理解的话，可能也没有多少效果。慢一点，有些东西需要想一想。如果在书里感觉有些疑惑，先弄清楚再接着读，而不要把它放在一边“待会再去考虑”。我希望你能读进去，越深越好。要知道，理解的越多，需要记住的就越少。l大声说出来如果你想看懂什么，或者想把它记得更牢，就大声地说出来。比如：“这家伙这里写得有点深奥。我想他是这么个意思……”。更好的办法是，拉个人过来，问他“你觉得这里是个什么意思？”，然后再把你的理解讲述给他听。至于他懂了没有……反正我不太在乎。总之这样你会学得更快，这是以前光看不说的时候未曾发现的。l不要三心二意没错这本书里面有不少好玩的图片。但别只去看那些漫画，它们是一种辅助，为了让你更轻松地理解书里面要讲的东西。这不是一本漫画书。l别跟你的大脑过不去如果你发现看的内容开始不经过脑子了，例如开始浮光掠影地浏览，不太想记住，这说明你的大脑已经有点吃不消了。这种时候你该休息一会。如果到达了某个极限时还在一味地往里面塞东西，野战排的包也受不了，更何况你1300克的大脑了。l一些小提示多喝点水。充足的液体供应能够让你的大脑处于最佳状态。不要在椅子或床上一呆就是两小时，多走动一下可以调整你大脑的紧张程度。此外，看完一些章节之后别再看其它书了，或者暂时不要看其它有难度的东西。你的大脑需要有一段时间对刚吸收的知识进行处理，如果此时你又往里面灌输了新的知识，那么你刚才学到的东西就会丢掉。我相信你是最棒的。如果你对书里的内容有些疑问，或者希望更深入的探讨，给我发邮件，或者光临我的网站。我会一直等在那里。0.4感谢这些伙计请允许我在这里占一点篇幅。这本书的完成与以下人是分不开的，我必须在这里告诉所有人，我以他们为骄傲：我的父母及家人。很明显他们对人机交互一窍不通。但是他们永远都一如既往地支持着我，使我虽然离家千里却从没感到过烦恼。我非常、非常地爱他们。编辑陈冰。感谢他对我的肯定。作为清华大学出版社最富创新精神的编辑之一，他直接影响了我的写作风格，并且对我极为信任。一个快活的老伙计。夏德安。作为优秀的程序员、我最好的朋友之一，也是我第一本书的合著者，他一直关注着我的这次写作，并且提供了莫大的帮助——尤其是在寻找案例方面。我仍记得那些和他通宵探讨直到天明的日子（尽管其中大部分时间他都在玩PSP）。我的朋友曲佳。作为我的好友，以及我所在公司的UE（用户体验）工程师，他带我参加了很多交互设计的公开活动，也认识了很多朋友。JamesRPalmer。嗯，我认识的最好的历史作家，他把自己一生中最好的光阴放在了中国，研究中日战争和中俄战争。他教给我一些非常有用的写作技巧。我的乐队。也许我更应该感谢他们的宽容和耐心。由于写作我失去了很多写歌和参与排练的时间，以至于无法在主音吉他手的小孩出生之前录好我们的专辑小样。非常抱歉！第一章你首先要知道的一些事情以下是一些我们在学习网络界面的交互设计之前先要理解的东西。有一个好的开始才能有好的结束。1.1我听说过这些词……不过它们到底是什么？很多从事界面图形设计的朋友经常会彼此发牢骚：“那个程序员刚才又在叫我‘美工’了。”当你问他们“那你们是什么？”的时候，他们一般都会很理直气壮地告诉你：“我当然是UI设计师！”我不止在一个公司发现这种情形现在的界面图形设计行业中，“交互”、“可用性”还有“人机工程学”之类词汇的使用频率越来越高。每个设计人员都会在解释自己设计成果的时候说：“这个按钮用这种颜色、放在这里，是因为我考虑了人机工程学的一些原理。这样便于用户识别和点击。”这句话说得很漂亮。而且体现出该设计人员高人一等：我不仅考虑了美观，我还考虑了更多。与此同时，这也确实涉及到人机交互学中的一些理论——比如“从用户的角度出发考基督：“你们必晓得真理，真理必使你们自由。”——《约翰福音》虑问题”还有“突出可识别性”等等。但实际上呢？可能80%的图形设计人员这么设计和放置按钮的原因只是：“我只是认为这么设计比较好，它可能会给用户带来方便。”他们都是凭借自己的设计经验得出的结论，而这些经验，并没有经过具体的考证和研究——也许它们是对的，也许不是——设计人员没有通过具体的询问用户或者测试用户来得出这些结