当前的Web已经进入崭新的时代！本书涵盖了在基于独一无二的Web环境下、在创建丰富体 验的过程中设计Web界面的最佳实践、模式和原理。UI专家Bill Scott和Theresa Neil在他们多年实 践经验和不懈探索的基础上，总结提炼出了Web界面设计的六大原理——直截了当、简化交互、 足不出户、提供邀请、巧用变换和即时反应，并以这六大原理为依托，以当今Web上各类开风气 之先的流行网站为示例，向读者展示了超过75种基于富交互构建Web界面的模式，并以简单明了的语言，阐明了数以百计行之有效的最佳实践。同时，书中还给出诸多反模式，即在Web界面设计过程中应该避免的做法。本书是迄今为止一部专注于富Web界面设计的经典之作。 本书既是一本Web界面设计指南，又是一本Web界面实例参考，适合Web界面设计、开发、 研究人员、爱好者，以及Web项目管理人员阅读。

O’Reilly Media, Inc.介绍 O’Reilly Media 通过图书、杂志、在线服务、调查研究和会议等方式传播创新知识。自 1978 年开始， O’Reilly 一直都是前沿发展的见证者和推动者。超级极客们正在开创着未来，而我们关注真正重要的技术趋势——通过放大那些“细微的信号”来刺激社会对新 科技的应用。作为技术社区中活跃的参与者， O’Reilly 的发展充满了对创新的倡导、创 造和发扬光大。 O’Reilly 为软件开发人员带来革命性的“动物书”；创建第一个商业网站（GNN）；组织了影响深远的开放源代码峰会，以至于开源软件运动以此命名；创立了 Make 杂志，从而成为 DIY 革命的主要先锋；公司一如既往地通过多种形式缔结信息与人的纽带。 O’Reilly 的会议和峰会集聚了众多超级极客和高瞻远瞩的商业领袖，共同描绘出开创新产业的革命性思想。作为技术人士获取信息的选择， O’Reilly 现在还将先锋专家的知识传递给普通的计算机用户。无论是通过书籍出版、在线服务或者面授课程，每一项 O’Reilly 的产品都反映了公司不可动摇的理念——信息是激发创新的力量。 业界评论 “O’Reilly Radar 博客有口皆碑。” ——Wired “O’Reilly 凭借一系列（真希望当初我也想到了）非凡想法建立了数百万美元的业务。” ——Business 2.0 “O’Reilly Conference 是聚集关键思想领袖的绝对典范。” ——CRN “一本 O’Reilly 的书就代表一个有用、有前途、需要学习的主题。” ——Irish Times “Tim 是位特立独行的商人， 他不光放眼于最长远、 最广阔的视野并且切实地按照 Yogi Berra 的建议去做了： ‘如果你在路上遇到岔路口，走小路（岔路）。 ’回顾过去 Tim 似乎每一次都选择了小路，而且有几次都是一闪即逝的机会，尽管大路也不错。” ——Linux Journal 译者序 2005 年，一组前端技术的组合由于被命名为Ajax 而广为人知。此后，随着Ajax 应用的迅速普及，新Web 时代的帷幕也徐徐拉开。仅几年间，各种“桌面般的”Web 应用程序和新Web应用平台层出不穷。从Google Maps、Flickr、Netflix到Google Docs、Yahoo! Mail、Gmail，再到Twitter、Facebook、Digg……如今，现代Web发展的成果已经蔚为大观。 界面，不仅是现代Web应用程序与传统Web应用程序的分水岭，也是曾经横亘于传统Web应用程序与桌面应用程序之间的一道难以逾越的“鸿沟”。然而，Ajax及其框架技术突飞猛进的发展，不仅让一个或少数几个HTML页面中容纳整个Web应用程序（或复杂功能组件）成为可能，而且也让现代Web应用程序的界面展示了堪与桌面应用程序媲美的耀眼风姿。 读者手中拿的这本书，是两位出色的UI设计专家Bill Scott和Theresa Neil在他们多年潜心研究、深入实践的基础上，结合现代认知心理学的最新发展成果和流行Web 应用程序的界面设计实例，以六大设计原理为依托，以最佳设计实践为着眼点，奉献给我们的一本精彩绝伦的现代Web界面设计权威指南。 从译者的角度来看，本书既是一本Web界面设计手册，又是一本Web界面实例参考，它基本上涵盖了现代Web 界面设计的普遍规则和最佳实践。Web 界面设计人员通过阅读本书，可以迅速在当前或将来的项目中发现最合适的应用场景；开发人员通过阅读本书，能够轻松地将丰富的示例映射为自己头脑中的编码要点；Web 项目的管理人员通过阅读本书，就有了在与客户商讨界面设计方案时的“共同语言”。哪怕你购买本书只是出于对其中漂亮Web界面的好奇，甚或只是想通过本书了解目前最流行的Web站点，相信在阅读本书之后，你会发现本书为你揭开了现代Web应用程序为什么如此令人着迷的奥秘。 感谢金照林、柳安意对本书中耕时付出的努力，感谢徐定翔为译者翻译本书提供支持，感谢本书编辑陈元玉指出或纠正本书译稿中存在的问题。翻译本书的过程中，译者尽最大努力确保术语统一、准确，也尽最大努力以简洁、地道的中文为读者重现原书的意境和风貌。但是，囿于个人的水平，书中的问题和疏漏之处在所难免，敬请读者朋友给予批评指正。译者邮箱是lsf.email@gmail.com，个人网站是http://www.cn-cuckoo.com。 李松峰 序 Foreword 构想（parti）是建筑学中的一个基础性概念。它指的是要建造一组与跨学科协作趋势契合的学院派建筑，还是要建造一座足以适应各类观众审美取向的大剧院？为了把特定的构想变为现实，建筑师不仅要规划好建筑的基本功能，还必须懂得如何协调最终会影响建筑进程的种种复杂因素。 设计原理是建筑师提出构想的指导方针，它定义了建筑物的关键特征，能够在建筑相关各方（包括委托人、承建方、城市规划部门和工程师）之间起到沟通的作用。设计原理清晰地表达了基本目标，是做任何决定的依据，也有助于保证工程的各个组成部分最终合成为一个整体。但是，要完成一幢建筑物，只有设计原理还是不够的。 无论是修筑小小的阁楼，还是建造禅宗花园，建筑的主题思想或构想随时都可能面临修改，或者遇到无法逾越的障碍。可能的因素包括标准尺寸（standard dimension）、空间容量、审美观、物料限制，等等。希望把头脑中的构想变为现实的建筑师，必须全面、深入地掌握设计过程中的诸多因素，唯有如此，才能根据现实的条件做出最佳选择。 在这个组合中，上方是设计原理，下方是设计注意事项，而中间则是建筑师构思的各种用途的、能够满足人们或组织交流、通信及工作需要的具体结构。 对于读者来说，你们想把自己的构想变成活力四射的富Web应用程序（rich web applications）。同样，由设计原理和种种注意事项组合成的框架，也将是迷雾中为你引航的灯塔。本书作者Bill Scott和Theresa Neil是这座灯塔的建造者。长达30年的软件设计开发经历，成就了Bill和Theresa这样跨越多个领域的顶尖专家。不管是对术语的命名，还是对例子的阐述，乃至对细节的剖析，无一不映射出他们对成功及失败的富交互设计的深切体悟。 两位作者经历过的不计其数的案例为他们提供了独一无二的视角，让他们能够洞悉当今最成功的富Web交互站点背后的设计原理。本书第1至第6部分给出的原理，是用来衡量富交互能否为你的Web应用程序带来价值的圭臬。Bill和Theresa为每个原理提炼的注意事项和最佳实践，是做出可靠决策的重要依据。工程师、项目经理、市场营销人员，当然还有设计人员，应该反复领会并时常参照这些原理和注意事项，以确保每个人都能基于同一套标准来评估设计决策的影响。 在富Web交互的组合中，上方是设计原理，下方是设计注意事项，而中间则是Web设计师构思的各种用途的、能够满足人们或组织交流、通信及工作需要的应用程序。正如殊途同归的建筑设计。 想把活力四射的富Web应用程序的大胆构想变为现实吗？那么从现在开始，先通过本书迅速掌握Web界面设计必备的知识和技巧吧！ ——Yahoo!公司产品构思及设计部门高级总监Luke Wroblewski著有畅销书《Web Form Design: Filling in the Blanks》（Rosenfeld Media）和《Site-Seeing: A Visual Approach to Web Usability》（Wiley） 前言 Preface 历史回眸 What Happened 我（Bill）的第一台个人计算机是Radio Shack Color Computer（1981年前后），配有芝克莱特译注1式键盘。最初几个月，我面对的主用户界面是命令行，即每天都要在COLORBASIC操作系统中输入代码。 后来，升级的Apple IIe让我用上了更好的键盘，而且机器里还预装了很多游戏。但是，界面基本上没有任何变化，仍然是命令行和基于文本的菜单一统天下。即使是IBM PC登上历史舞台，类同的地方照样居多。Lotus 123是当时顶尖水平的电子制表软件，它通过一组简短的键盘命令来控制。不过，即使是这种级别的应用程序也谈不上什么用户体验。 不久，界面革命开始了。1984年Macintosh问世，这种新机型刚推出时间不长，我就买了一台回家。Macintosh配备的鼠标打开了崭新的交互世界的大门。用户摆脱了只有学习古文一般的命令才能在基于文本的菜单中导航的命运，取而代之的是另一种自然而然的、更符合人类直觉的方式。 嗯，读者可能会想，这有什么值得大惊小怪的？别忘了那是1984年，不是现在。那么，这跟一本设计Web界面的书有什么关系吗？关系无处不在。 在Web有史以来的大部分时间内，Web站点和Web应用程序都以界面作为分水岭——与早期的桌面电脑时代很相似。多数Web站点都基于以下两个事件： 单击超链接 提交表单 试一试，就通过这两个事件能创造出什么吸引人的用户体验？而且，问题不止如此——每次单击或提交都会伴随一次页面刷新，创造流畅的用户体验几乎只是一句空话。 说来很有意思，解决这些问题的技术其实很多年前就已经存在了。只不过必须等到常用的浏览器普遍支持这些技术之后，开发人员才敢在日常开发中放心大胆地使用。2004年，Google发布了Gmail和Google Maps，这两个应用程序使用了之后被Jesse JamesGarrett称为Ajax的一组技术。 差别的确非常之大。基于Ajax的Google Maps支持实时平移、缩放，无须任何页面刷新，其交互性丝毫不亚于桌面应用程序。而当时的Mapquest则亦如其他Web应用程序，必须在每次移动或缩放地图后刷新页面。Ajax的应用，使过去的Web和现在的Web有了非常明显的差别。 写作本书的动机 Why We Wrote This Book 我虽然有幸亲身经历了桌面电脑时代的第一次界面革命（甚至还赶在第一批编写了一款Macintosh游戏），但我的合著者Theresa Neil则亲身经历了Web的第二次革命。 几年前，我们俩在Sabre（Travelocity的母公司）成为同事。在那里，我们共同创立用户体验设计团队、改进大量产品、完成启发式评估，共同参与了重新设计Web应用程序的整个过程。在这些工作的基础上，我们提炼出很多种用户界面设计模式和反模式（需要避免的常见错误）。 此后，我加入了Yahoo!并在见证Ajax为Web界面带来革命的过程中开始活跃起来。我在Yahoo!期间做出的贡献之一就是公开发布了Yahoo! Design Pattern Library（Yahoo!设计模式库）。作为Yahoo!的Ajax技术推广专家，我结识了很多Yahoo!的顶尖人物，并与他们就如何看待这些新的交互形式，以及如何在独特的Web环境中应用它们展开了头脑风暴。结果就是在过去的几年中，我就Web界面设计这一主题演讲了无数场次，跟世界各地的Web开发和设计人员分享了最佳实践。 与此同时，作为Web设计师的Theresa也在其咨询事业上取得了辉煌的成绩。她在自己的工作中不断改进和修正最初的设计模式及原理，并先后领导了三十多个鲜活的富Internet应用项目——有企业级应用程序，也有面向公众的网站。这些设计模式已经成为Theresa与客户沟通时最常用的词汇，也是设计新应用程序和重新设计已有系统的一套标准。 本书是我们两个人经验积累的结果，或者说，是Theresa和我三十多年相同工作经验的升华。在出版方多次盛情邀请之下，我们也认同与更多人分享这些知识的最佳方式就是出一本书。 本书读者对象 What This Book Is About 本书的主题并非信息架构，但字里行间可能会渗透出信息架构的基本原理。本书的主题也并非视觉设计，但全书各章都将以良好的视觉设计为基调讨论问题。 本书的主题是交互设计，具体而言是基于Web的交互设计，更确切地讲，是基于Web的富交互设计。本书内容涵盖了基于独一无二的Web环境，在创建丰富体验过程中提炼出来的最佳实践、模式和原理。 所谓独一无二，即Web具有独特的自身环境，它不同于桌面环境。尽管时过境迁，桌面与Web的界限已经变得越来越模糊，但基于Web创造富交互依旧有着强烈的针对性。直接在页面上编辑内容（例如，第1章讨论的页内编辑）很大程度上源自桌面应用——而一旦落实于网页，则又体现出其自身所独有的风格。本书将以几个重要的设计原理为依托，通过一组设计模式来探讨这些独一无二的富交互形式。 设计模式 Design Patterns 到底什么是设计模式呢？ Christopher Alexander在他的开创性著作《A Pattern Language: Towns, Buildings,Construction》（Oxford University Press）中，首次使用了术语“模式”来划分针对人类活动的常见建筑设计方案。他对模式的定义是： ……当遇到某个反复出现的问题时，就相应解决方案的核心内容给出的描述…… 随后，在大名鼎鼎的“四人帮”（Erich Gamma、Richard Helm、Ralph Johnson和JohnM. Vlissides）合著的《Design Patterns: Elements of Reusable Object-Oriented Software》（Addison-Wesley）一书中，把模式这个术语引入了软件领域。又过了几年，设计模式出现在了用户界面设计领域。 本书探讨的模式属于后一种——交互设计模式。粗略算来下，全书介绍了超过75种适用于富Web交互设计的模式。在解释每种模式时，将会以各种各样的网站作为示例。由于模式描述的是交互设计，为清晰地阐明相关概念，书中会使用大量的插图作为辅助。而且，在展示给定方案之间细微差别的同时，也将指出应该避免的模式（反模式）。每一节最后的最佳实践部分则包含了对读者的一些重要建议。 本书将要介绍的模式依托于6个设计原理，后者构成了本书的框架： 原理一：直截了当 恰如Alan Cooper所言：“需要在哪里输出，就要允许在哪里输入”。这就是直接操作的原理。例如，不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。第1至第3章遵循这个原理分别按照“页内编辑”、“利用拖放”和“直接选择”归类介绍了相应的模式。 原理二：简化交互 设计师Ericson deJesus在重新设计Yahoo! 360时，曾用“少费事”这3个字来描述减少与站点交互操作的需求。而实现少费事的主要途径就是利用上下文工具。第4章“上下文工具”基于这个原理探索了几种不同的模式。 原理三：足不出户 用户心流会因刷新页面而被打断。为避免每个操作都刷新一次页面的情况，可以返璞归真，采用根据用户自然操作流程建模的方式。可以根据需要决定什么情况下让用户留在当前页面。第5章“覆盖层”和第6章“嵌入层”，分别讨论了在覆盖层和页面流中显示信息的模式。第7章“虚拟页面”讲解了如何动态展示内容。本部分最后一章，第8章“流程处理”，展示了抛开页面切换，转而在页内创建流程的模式。 原理四：提供邀请 Web中的富交互设计面临的一个主要挑战就是易发现性。再好的功能，如果用户发现不了，结果仍然等于零。提供邀请是改善易发现性的重要途径。邀请可以提示用户下一步交互操作是什么。由第9和第10章构成的这一部分，将分别从“静态邀请”和“动态邀请”的角度，探讨那些始终在页面上显示邀请和响应用户操作显示邀请的模式。 原理五：巧用变换 动画、电影转场效果，以及各种形式的视觉变换，都是极为有用的技术。第11章在介绍最常用的“变换模式”时，探讨了吸引用户与增进沟通的模式；第12章则深入分析了“变换的目的”，同时，还向读者介绍了一些反模式。 原理六：即时反应 智能界面的特点是具有良好的反应能力。这个原理探讨了怎样通过响应操作为用户提供丰富的体验。第13章介绍了一组“查找模式”，包括实时搜索、实时建议、微调搜索和自动完成。第14章介绍了一组“反馈模式”，包括实时预览、渐进展现、进度指示和定时刷新。 本书读者对象 Who Should Read This Book 本书适合定义、设计及构建Web界面的任何人。 Web设计人员在为设计精妙的富交互而勾勒草图、奠定基调时，会发现本书介绍的原理特别有指导作用。同时，书中的大量模式能够丰富你们的设计工具箱，数百个示例也提供了直观的参考。当然，书中列出的最佳实践应该是一个备忘录，针对各种交互应用场景给出了提示。 产品（项目）经理在思考新的业务问题时，可以将书中的模式和示例作为拓展思路的良好起点。虽然本书没有给出编程实现方案，但Web开发人员仍然会受益于其中总结的设计模式，因为这些模式可以直接映射到具体的编码方案。对于相关的每个项目成员而言，这些模式会成为贯穿产品（项目）管理、设计和实施过程的词汇表，从而为团队间明确、清晰地沟通和协作铺平道路。 另外，无论你是刚刚入行的Web设计/开发新兵，还是拥有丰富经验的老手，本书依托设计原理和模式给出的丰富而真实的示例，都将为你的日常工作带来一股清新的空气。 本书配套站点 What Comes with This Book 本书有一个专事拾遗补缺的配套站点（http://designingwebinterfaces.com），其中包含最新示例，对原理、模式及最佳实践进一步思考的结果，以及Web界面设计方面有价值的文章和资源的链接。 在遵守创意共享许可（Creative Commons license）的条件下，读者可下载本书所有图表及插图并在自己的演示中使用。下载站点位于Flickr（http://www.flickr.com/photos/designingwebinterfaces/）。 本书排版约定 Conventions Used in This Book 本书使用下列排版约定： 斜体（Italic ）或汉仪中黑简体 表示URL、目录、文件名、选项和模式名称，偶尔也用于强调。 提示 表示提示、建议或一般备注。 使用示例 Using Examples 本书所有的插图示例都可以在配套的Flickr站点（http://flickr.com/photos/designingwebinterfaces）中找到。在遵守创意共享许可和确保注明出处的条件下，读者可以把这些插图用在演示文档或其他相应场合。在注明出处时，通常应该包含书名、作者、出版社和ISBN。例如,“Designing Web Interfaces, by Bill Scott and Theresa Neil, Copyright 2009 Bill Scott and Theresa Neil, 978-0-596-51625-3”。 如果读者认为自己对本书示例的使用超出了合理的或上述默认许可的范围，随时可以通过 permissions@oreilly.com与我们联系。 联系我们 We＇d Like to Hear from You 请将对本书的评价和存在的问题通过如下地址告知出版者： 美国： O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 中国： 北京市西城区西直门南大街2 号成铭大厦C 座807 室（100035） 奥莱利技术咨询（北京）有限公司 O’Reilly 的每一本书都有专属网站，你可以在那里找到关于本书的相关信息，包括勘误列表、示例代码以及其他信息。本书的网站地址是： http://www.oreilly.com/catalog/9780596516253 对于本书的评论和技术性的问题，请发送电子邮件到： bookquestions@oreilly.com 关于我们的书籍、课程、会议和新闻的更多信息，请参阅我们的网站http://www.oreilly.com。 在Facebook 上找到我们：http://facebook.com/oreilly 在Twitter 上关注我们：http://twitter.com/oreillymedia 在YouTube 上观看我们：http://www.youtube.com/oreillymedia 致谢 Acknowledgments Bill的致谢 Bill＇s Acknowledgments 本书不仅仅是Theresa Neil和我两个人努力的结果。直接参与的人还有很多，间接给了我们启示的人则更多。 首先最重要的是感谢Ruth。她是我30年相濡以沫的好妻子、好朋友，更是一位好母亲。没有她的耐心和支持，本书是不可能面世的。 我对O’Relly的编辑们表示深深的谢忱。对Mary Treseler致以双倍的敬意，她耐心地引导Theresa和我最终写完本书。而且，她在本书编写前期提出的建议也非常有价值。还要感谢让本书成为现实的其他团队成员：Rachel Monaghan、Marlowe Shaeffer、Ron Bilodeau、Colleen Gorman、Adam Witwer和Robert Romano，恕不一一列举。 写过书的人都知道，技术审稿是确保图书质量的重要一环。感谢Christian Crumlish、Dan Saffer、Luke Wroblewski、Juhan Sonin、Kevin Arthur及Alan Baumgarten积极的肯定和建设性批评。虽然不能解决所有问题，但我认真接受每一条意见，而这些意见对最终成书有莫大的影响。 在Yahoo!工作的那段时间对我非常重要。感谢Erin Malone发给我那封电子邮件，完全出乎我的意料，后来我就到Yahoo!上班了。在Yahoo!跟才华横溢的人们一起共事，为我的成功铺平了道路。感谢Erin、Matt Leacock和Chanel Wheeler创立Yahoo! Design PatternLibrary，感谢Larry Tesler 和Erin让我领导和推广公共Yahoo! Design Pattern Library的发布。正是这个模式负责人的经历，让我进一步明确思考了本书所要讨论的内容。在此，特别感谢那些不断给我提供反馈的天才设计师和开发者，他们高超的技术水平也促使我不断提高自己。感谢YUI团队，尤其是Nate Koechley 和Eric Miraglia详细阐述“趣味瞬间”网格，讲解如何通过代码实现模式。感谢与我一道负责技术推广的各位专家：Douglas Crockford、Iain Lamb、Julien Lecomte和Adam Platti。感谢我的好朋友Darren James，他时时刻刻都在鼓励我。感谢有幸与之共事的天才设计师们，他们的思想和观点反映在了本书的字里行间：Karon Weber、Samantha Tripodi、Ericson deJesus、Micah Laaker、Luke Wroblewski、Tom Chi、Lucas Pettinati、Kevin Cheng、Kathleen Watkins、Kiersten Lammerding、Annette Leong、Lance Nishihira，以及其他很多人。 在Yahoo!之外，认识或向以下大师学习，也激励我不断思考进步，他们是Dan Saffer（Adaptive Path）、Ryan Freitas（Adaptive Path）、Aza Raskin（Humanized）、Scott Robbins（Humanized）、Peter Moerholz（Adaptive Path）和David Verba（Adaptive Path）。特别感谢模式社区中的那些朋友们，Jenifer Tidwell指明了模式的发展方向，Martijn van Welie创建了优秀的模式库。感谢James Refell 和Luke Wroblewski，以及他们在eBay对模式的研究工作。感谢目前在Yahoo!负责管理模式的Christian Crumlish，他的思路总是那么清晰。感谢Jesse James Garrett，他不仅发明了Ajax这个名字，还邀请我参加第一次Ajax Summit，而且带着我与他共同做巡回演讲。在Designing for Ajax Workshops授课的经历，也让我对写作本书充满了信心，因为书中的内容提前得到了一些读者的验证。 还要感谢那些邀请我去演讲的公司和会议组织者。将本书内容与数千位听众共享的价值是无法衡量的，借此让我知道了大多数设计人员和开发人员普遍关心的问题。以下是邀请我去演讲的人（括号中是他们所在的公司，排名不分先后）：Jared Spool（UIE）、Ben Galbraith和Dion Almer（Ajaxian/Ajax Experience）、Kathryn McKinnon（Adobe）、Jeremy Geelan（SysCon）、Rashmi Sinha（BayCHI/Slideshare）、Aaron Newton（CNET）、Brian Kromrey（Yahoo! UED courses）、Luke Kowalski（Oracle）、Sean Kane（Netflix）、Reshma Kumar（Silicon Valley Web Guild）、Emmanuel Levi-Valensi（People in Action）、Bruno Figueiredo（SHiFT）、Matthew Moroz（Avenue A Razorfish）、 Peter Boersma（SIGCHI.NL）、Kit Seeborg（WebVisions）、Will Tschumy（Microsoft）、Bob Baxley（Yahoo!）、Jay Zimmerman（Rich Web Experience）、Dave Verba（UX Week）。另外，还必须感谢如下会议和公司：Web Builder 2.0、eBig、PayPal、eBay、CSU Hayward、City College San Francisco、Apple，等等。 我要对Sabre Airline Solutions深表谢意，特别是Brad Jensen，他完全信任并给了我一次难得的机会，让我在他的公司实践UX设计的思想。感谢David Endicott和Damon Hougland鼓励我把这些思想公之于众。感谢我团队的全体成员帮Theresa和我提前验证了这些思想。本书介绍的很多模式都源自他们亲手设计的产品。 最后，感谢Netflix，我目前正在这个世界上最适合工作的地方不知疲倦地忙碌着。感谢Netflix所有人对我写作本书的支持和教会我怎样去设计并构建最好的用户体验。 Theresa的致谢 Theresa＇s Acknowledgments 我想对以下这些人致以深深的谢意。 Aaron Arlof，感谢他为本书绘制的插图。这些精美的插图恰到好处地表现了全书的六个原理。 Brad Jensen，他是Sabre Airline Solutions的副总裁，也是他首先介绍我认识了Bill。如果没有Bill的悉心指导和培养，我不可能涉足这个领域。 Damon Hougland，他帮助Bill和我在Sabre创建了User Experience（用户体验）团队。 Jo Balderas，他引起了我对编程的兴趣。 Darren James，他教会了我如何编程。 参与我们各类白板会议的客户，特别是热心学习和探讨UI设计模式及原理的人：Steven Smith、Dave Wilby、Suri Bala、Jeff Como和Seth Alsbury，他们允许我（在RIA革命之初）设计他们的企业级应用程序。特别感谢我目前的同事Wishingline 的Scott Boms、Paulo Viera、Jessica Douglas、Alan Baumgarten和Rob Jones。 最重要的是，要感谢我丈夫坚定不移的支持，感谢我父母的鼓励，还有我儿子，Aaron，谢谢他能让我在电脑前面坐那么多钟头。

目录 目录 Contents 序 v 前言 vii 原理一：直截了当 第1章：页内编辑 3 1.1 单字段行内编辑 4 1.2 多字段行内编辑 8 1.3 覆盖层编辑 11 1.4 表格编辑 15 1.5 群组编辑 18 1.6 模块配置 21 1.7 选择编辑模式的原则 23 第2章：利用拖放 25 2.1 趣味瞬间 26 2.2 拖放的用途 29 2.3 拖放模块 30 2.4 拖放列表 40 2.5 拖放对象 46 2.6 拖放操作 52 2.7 拖放集合 57 2.8 实现拖放的挑战 59 第3章：直接选择 61 3.1 切换选择 62 3.2 集合选择 67 3.3 对象选择 70 3.4 混合选择 72 原理二：简化交互 第4章：上下文工具 79 4.1 上下文交互 79 4.2 费茨定律 80 4.3 上下文工具 81 4.4 实时可见工具 81 4.5 悬停即现工具 85 4.6 开关显示工具 91 4.7 级联递进工具 93 4.8 二级菜单 98 原理三：足不出户 第5章：覆盖层 105 5.1 对话框覆盖层 107 5.2 详情覆盖层 112 5.3 输入覆盖层 119 第6章：嵌入层 123 6.1 对话框嵌入层 123 6.2 列表嵌入层 127 6.3 详情嵌入层 132 6.4 标签页 134 6.5 嵌入层与覆盖层 136 第7章：虚拟页面 137 7.1 虚拟滚动 137 7.2 内置分页 142 7.3 滚动分页：传送带 147 7.4 虚拟摇摄 149 7.5 伸缩式用户界面 151 7.6 分页与滚动 155 第8章：流程处理 157 8.1 Google Blogger 157 8.2 魔法原理 158 8.3 交互式单页 160 8.4 嵌入式部件 164 8.5 对话框覆盖层 168 8.6 配置程序 171 8.7 静态单页 174 原理四：提供邀请 第9章：静态邀请 181 9.1 引导操作邀请 181 9.2 漫游探索邀请 185 第10章：动态邀请 191 10.1 悬停邀请 191 10.2 预期功能邀请 196 10.3 拖放邀请 200 10.4 推论邀请 209 10.5 更多内容邀请 210 10.6 邀请的优点 213 原理五：巧用变换 第11章：变换模式 217 11.1 加亮和减暗 217 11.2 扩展与折叠 222 11.3 自恢复式淡出 227 11.4 动画效果 228 11.5 聚光灯效果 231 第12章：变换的目的 233 12.1 增添魅力 233 12.2 增进沟通 234 原理六：即时反应 第13章：查询模式 253 13.1 自动完成 253 13.2 实时建议 257 13.3 实时搜索 262 13.4 微调搜索 268 第14章：反馈模式 275 14.1 实时预览 275 14.2 渐进展现 284 14.3 进度指示 286 14.4 定时刷新 292 尾声：富交互的原理和模式 295 索引 297