Web界面设计（全彩）前言

时间：2023-02-17 18:24:01 | 来源：营销百科

时间：2023-02-17 18:24:01 来源：营销百科

Web界面设计（全彩）前言：历史回眸

What Happened

我（Bill）的第一台个人计算机是Radio Shack Color Computer（1981年前后），配有芝克莱特译注1式键盘。最初几个月，我面对的主用户界面是命令行，即每天都要在COLOR BASIC操作系统中输入代码。

后来，升级的Apple IIe让我用上了更好的键盘，而且机器里还预装了很多游戏。但是，界面基本上没有任何变化，仍然是命令行和基于文本的菜单一统天下。即使是IBM PC登上历史舞台，类同的地方照样居多。Lotus 123是当时顶尖水平的电子制表软件，它通过一组简短的键盘命令来控制。不过，即使是这种级别的应用程序也谈不上什么用户体验。

不久，界面革命开始了。1984年Macintosh问世，这种新机型刚推出时间不长，我就买了一台回家。Macintosh配备的鼠标打开了崭新的交互世界的大门。用户摆脱了只有学习古文一般的命令才能在基于文本的菜单中导航的命运，取而代之的是另一种自然而然的、更符合人类直觉的方式。

嗯，读者可能会想，这有什么值得大惊小怪的？别忘了那是1984年，不是当前。那么，这跟一本设计Web界面的书有什么关系吗？

关系无处不在。

在Web有史以来的大部分时间内，Web站点和Web应用程序都以界面作为分水岭——与早期的桌面电脑时代很相似。多数Web站点都基于以下两个事件：

· 单击超链接

· 提交表单

试一试，就通过这两个事件能创造出什么吸引人的用户体验？而且，问题不止如此——每次单击或提交都会伴随一次页面刷新，创造流畅的用户体验几乎只是一句空话。

说来很有意思，解决这些问题的技术其实很多年前就已经存在了。只不过必须等到常用的浏览器普遍支持这些技术之后，开发人员才敢在日常开发中放心大胆地使用。

2004年，Google发布了Gmail和Google Maps，这两个应用程序使用了之后被Jesse James Garrett称为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

本书的主题并非信息架构译注2，但字里行间可能会渗透出信息架构的基本原理。本书的主题也并非视觉设计，但全书各章都将以良好的视觉设计为基调讨论问题。

本书的主题是交互设计，具体而言是基于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和John M. 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

本书有一个专事拾遗补缺的配套站点，其中包含最新示例，对原理、模式及最佳实践进一步思考的结果，以及Web界面设计方面有价值的文章和资源的链接。

在遵守创意共享许可（Creative Commons license）的条件下，读者可下载本书所有图表及插图并在自己的演示中使用。下载站点位于Flickr。

本书排版约定

Conventions Used in This Book

本书使用下列排版约定：

斜体（Italic ）或汉仪中黑简体

表示URL、目录、文件名、选项和模式名称，偶尔也用于强调。

提示

表示提示、建议或一般备注。

使用示例

Using Examples

本书所有的插图示例都可以在配套的Flickr站点中找到。在遵守创意共享许可和确保注明出处的条件下，读者可以把这些插图用在演示文档或其他相应场合。在注明出处时，通常应该包含书名、作者、出版社和ISBN。例如,'Designing Web Interfaces, by Bill Scott and Theresa Neil, Copyright 2009 Bill Scott and Theresa Neil, 978-0-596-51625-3'。

如果读者认为自己对本书示例的使用超出了合理的或上述默认许可的范围，随时可以通过 邮箱与我们联系。

联系我们

We'd Like to Hear from You

请将对本书的评价和存在的问题通过如下地址告知出版者：

美国：

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

中国：

北京市西城区西直门南大街2 号成铭大厦C 座807 室（100035）

奥莱利技术咨询（北京）有限公司

O’Reilly 的每一本书都有专属网站，你可以在那里找到关于本书的相关信息，包括勘

误列表、示例代码以及其他信息。

对于本书的评论和技术性的问题，请发送电子邮件。

致谢

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 Pattern Library，感谢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，谢谢他能让我在电脑前面坐那么多钟头。^[1]