界面设计模式(第2版)

编辑推荐

尽管市面上类似题材的内容已汗牛充栋，本书的第1版中文版在推出后仍然“技压群芳”而大获好评，一路畅销。究其原因，不外乎：实践出真知。

作者Jenifer Tidwell本人既是交互设计师，又是一名软件工程师；曾在麻省理工学院学习技术，并在马萨诸塞州艺术学院学习设计，从1997年开始就研究用户界面模式，为众多著名公司如Google, Mathworks设计和建立用户界面，很早就开始倡导RIA（Rich Internet Application）技术。

扎实深厚的研究功底、多年的实践经验以及常人难以企及的工作氛围，令她得以洞悉交互设计后的复杂人性/心理，以不变应万变，游刃有余地行走在交互设计之路上。

本书正是她多年的观察、实践与智慧的升华。清晰的思路，合理的架构，流畅的文笔，让读者不由自主地爱上设计，了解设计并运用模式。

食不厌精，脍不压细

本书按照设计进程的大致顺序，细致地梳理了交互设计中的模式，每个模式都至少含有一个范例，以方便读者学习。

在每个章节的写作中，作者不仅照顾了初学者的需求，提供了上下文的背景，以帮助他们迅速理解并上手；同时也兼顾了深入学习的诉求，提供了进一步学习的主题。

在第2版中，新增了社交媒体，移动设计的内容，切实地符合了当下的技术发展潮流。

模式意味着重用，它包含以下内涵：

是具体的，而非泛泛而谈

可以有效应用到各类不同的平台和系统中

是产品，而非过程

关注界面各元素之间的关联，而非孤立地看待单个元素

可以根据不同的设计情形而定制

……

细腻的内容，真实的场景，贴心的表达……这一切让本书当之无愧地成为界面设计领域深得人心的力作。

作者简介

作者介绍：

Jenifer Tidwell是一位交互设计、信息架构和设计前期分析方面的咨询师和作家。她曾经为很多著名的公司（如Google和MathWorks）设计和建立用户界面。

译者介绍：

Windy（蒋芳），交互设计和用户体验咨询师，拥有多年专业经验，目前正努力把敏捷方法和交互设计技术结合起来，达成更敏捷的设计过程，以及发展更简洁、效率更高的用户测试方法，同时，Windy 也是《点石成金》一书译者。

方舟，用户体验设计师、IT 专业图书译者，译有《交互设计沉思录》等。涉猎广泛，曾任用户体验经理、创意总监、产品开发经理、编辑、软件工程师、UI 设计师等。目前关注用户体验设计、服务设计，以及交互式故事叙述。微博：www.weibo.com/kingofark。

任发科，亦名常新居士。喜阅读思考，虽未及文理兼通，但极客之气绰绰。混迹软件企业多年，然痴迷技术之心未怠。不尚空谈，希冀躬耕实践，以技术改变生活。

罗景文，多年来专注于软件工程及交互式设计，对人机交互技术非常感兴趣。曾任职于IBM developerWorks 中国网站、Ivar Jacobson 博士在中国开办的雅各布森软件（北京）有限公司，以及CSDN《程序员》杂志。

序  言

第2版介绍

自从本书第一版出版五年以来，这个世界发生了很多变化。

绝大部分的用户界面设计师现在都在进行网络设计，虽然他们的角色可能是用户体验设计师、交互设计师、信息架构师或者拥有其他几种类似的头衔。同时，数不清的网站、网络服务、网络软件、博客，以及各种电子商务网站都需要良好的设计，而且这些产品和服务的实现也变得越来越快了。它们中的大部分都具有高度的交互性，同时，甚至那些传统网站也开始使用动态的交互性的内容，例如视频播放器和社交网络模块，它们以前多数只拥有静态的内容。因此，有很多设计工作正在进行。.

和几年前相比，为桌面应用所做的设计工作少多了。当然，我们所有的技术用户都仍然需要安装在台式机或笔记本上的复杂桌面软件。我们的邮件客户端、浏览器、文本编辑器、各个领域的专业软件，以及操作系统仍然是我们日益网络化的生活中不可或缺的部分。但是这些软件的很多界面都已经趋于稳定。因此，从2000 年早期开始，设计书籍的读者群已经从桌面设计转向了基于互联网的设计。

还有另一个变化，那就是移动设计，它在2005 年的时候还很青涩，但随着iPhone 和其他复杂移动设备的普及，现在已经达到了百花齐放的程度，移动设备把整个互联网都放到了我们的口袋里，因此，很多设计师现在都需要面对移动设计特有的问题。移动方面的考虑将给设计（特别是移动互联网）带来什么样的变化？这个问题我们还在收集答案，不过整个设计界已经学到了一些可行的方法和技术。

还有，设计师们也不能忽视在线社交网络的影响。当处在项目的早期设计阶段时，我需要去思考它与博客、Twitter、Facebook、各种评论、论坛及所有其他人们可能会在网上谈到和讨论它的地方的连接。如果不这么做，我的设计可能就会不称职了。用户们会花上很多时间进行在线交往，而且熟练用户会理所当然地期待社交网络支持。现在，要找到一个和某个社交服务没关系的网站已经非常罕见了，通常，它们会连接到好几个社交服务。

不过，等等，要说的还有很多！自从这本书第一次出版以来，用户体验设计领域已经发现了模式的价值，也出现了其他很多和用户体验相关的模式集合。其中很多都非常不错。有一些直接从本书里采用一些模式，然后进行加工、修改，根据新的习惯用法或它们呈现的全新信息来命名。还有一些则创造了一些本书没有提到的模式，特别是在社交网络、移动领域、搜索，还有RIA 风格的界面。（我已经在前言的参考资料一节，以及在各个模式本身的描述中，列出了一些上述方面最好的模式集合。）

那么，这些2005 年写就的模式是不是仍然适用呢？

总的来说，还是适用的。人类的思维方式没什么变化——视觉层次结构仍然适用、渐进展开仍然适用，移动的事物也还是会受到我们大脑本能的注意。那些基于基本设计原则的良好模式现在也还和5 年、10 年、20 年以前一样有效。但是其他一些模式没有那么坚实的基础，就可能已经落后了。于是，本书的第2 版让我有了一种后知后觉：我可以用这段时间来衡量这些模式的持久性，并进行总结。果然，真的，有一小部分模式从这本书里剔除了。

不过大部分模式仍然留下来了，因为它们仍然适用。我给它们增加了新鲜的例子，还为一些模式的有效性补充了新的研究资料。还有，我新写了（或者借用了）一些新的模式来反映这五年来的变化。下面就会对这些变化进行更详细的介绍。

第2版的变化

下面是一些新的内容：

社交媒体的内容

第9 章，利用社交媒体，列出了一些把社交媒体集成到网站或应用的策略和模式。这一章并没有全面覆盖社交媒体设计的各个方面，它仅仅作为该主题一些现有工作的补充，特别是相对Designing Social Interfaces 这本书来说。

移动设计的内容

第10 章，迈向移动设计，这一章包括一些专门用于移动设备的模式。而且，这些模式重点指向大部分设计师们的目标平台：能上网的触摸屏设备，例如iPhone。这些模式对移动应用和网站均有照顾。和上一章一样，这一章也没有覆盖移动设计的各个方面——只介绍了那些能帮你设计出优雅移动界面的模式和想法，哪怕你并不是一位移动UI 方面的专业人士。

这一章引发了一个有趣的观点。一个“好的”模式是不是应该能跨不同的平台生存，也包括那些移动平台。不过，移动设计引入了很多全新的限制，例如屏幕尺寸、交互式的手势、社交期望、响应时间等，因此很多原来的模式在移动设备上“水土不服”。同样，绝大部分专门用于移动环境的模式在大屏幕尺寸上表现也不太好（或者只能用在边边角角），因此第10 章容纳了这些模式。

重新组织章节和重写前言

因为在列表项呈现方面有太多模式了，新的老的都有，于是我重构了三个章节。第5 章现在专门讲述关于列表的模式。它包括第一版中原第2 章中的几个模式（Two-Panel Selector 和 One-Window Drilldown）和第7 章的两个模式（Row Striping 和Cascading Lists）。我也增加几个新的模式，例如List Inlay 和Alphabetic Scroller。还有，重写了这些章节的介绍部分，关于信息架构（第2 章）、导航（第3 章）、页面布局（第4 章），来对应近几年这些方面的设计思路，并重点讲述了基于网络或类似网络的设计。

反映最新流行交互的一些新模式

有一些技术确实是在最近五年内出现的，其中那些看起来很像模式的——可以抽象、通用，也容易找到，并且能在很大程度上提升用户体验——都已经汇集在这里了。例如Fat Menus、Sitemap Footer、Hover Tools、Password Strength Meter、Data Spotlight、Radial Table。

并不是真正的新模式，但是在第一版中没有收录的

这些模式已经有一段时间了，不过，要么我当时在2005 年没有意识到它们的重要性，要么就是当时它们还显得默默无闻。现在，它们也收录到本书第2 版中了。例如Dashboard、News Stream、Carousel、Grid of Equals、Microbreaks、Picture Manager 和Feature, Search, and Browse。

重新命名的模式，还有那些适用范围发生变化的模式

例如，Card Stack 模式已经重新命名为Module Tabs，Closable Panels 变成了Collapsible Panels。进行这些变化是为了和现有的技术以及其他模式库保持一致。还有，类似的，Accordion 是从Collapsible Panels 中分解出来的，并自成一体，是因为其他设计师，设计写作者和其他模式集合已经为该项技术使用了“手风琴”这个术语。同时，来自本书第一版（Designing Interfaces 中文版）中信息架构一章中的One-Window Drilldown 和Two-Panel Selector 这两个模式的应用范围已经收窄到只专门用在列表项目上了。

新的示例，新的研究资料，以及新的其他模式库关系

几乎每个模式都至少会有一个全新的示例，并附带图片说明。很多模式还有一个“其他模式库参考”小节，来把读者指引到其他模式集合里的同一个模式或者类似的模式。这两个部分都有可能给你带来新的思考，或者新的例子。还有，基于一些新的想法和新的研究，有一些模式也已经进行了改写。Row Striping 模式就是其中一个：大家进行了一些实验来找出这项技术的价值，该模式为读者们介绍了这些实验的结果。

有些模式已经从第2 版中移走

很多这类的模式已经归入“对每个人都显而易见”这个类别，虽然它们还是非常有用的设计工具，但作为本书的一部分，它们的价值已经没那么大了。这样的模式包括：Extras on Demand、Intriguing Branches、Global Navigation、Illustrated Choices。还有一些模式在现今的设计中已经不太使用了，例如Color-Coded Sections。

原来的“建造器和编辑器”一章已经整章移除

设计师们当然还在为这两类应用进行设计，我只是很难找到在这些模式上的进一步研究或者新的例子。我也做了一份调查，结果显示读者们认为这章的价值不大。同时我还希望把本书的篇幅控制在合理的范围之类，因此选择把这章去掉，给新的内容腾出空间。

最后，我想简短地提一下，这个新的版本中不包括的内容，下面这些就是，它们已经在别的已出版（或出版中）的模式集合中得到了充分的阐述，因此我觉得没有必要放到这个版本里来了。

Search（搜索）

General social interfaces（通用的社交界面）

Gestural interfaces（手势）

More depth in mobile design（深度移动设计）

Types of animated transitions（动画转换的类型）

Help techniques（帮助技术）

希望在接下来的几年里，我们还能在其他设计领域看到一些新的模式出现：例如网络游戏、地理系统、在线社区，等等。我觉得这些领域的研究前景和回报都会很可观，这是好事。我也鼓励其他设计师们加入进来，写出更多模式——或者挑战我，让已有的模式变得更好！

前  言

从前，界面设计师们只有一个可怜的小破工具箱。

那个时候，我们只有几种简单的控件：文本输入框、按钮、菜单、小图标和模态对话框。我们小心翼翼地把它们按Windows 或Macintosh 的界面风格指南组织到一起，然后希望用户能理解由此产生的使用界面。当然，很多时候 事与愿违。同时，我们也在为有限的屏幕、不多的颜色、低效率的CPU 还有慢吞吞的网络（如果能连接上） 设计。那个时候的界面是灰蒙蒙的。

三十年河东，三十年河西，世界不一样了。现在进行设计，我们有了比以前多得多的组件和想法，有了更多的用 户界面工具包，例如Java 工具包、HTML/CSS、JavaScript、Flash，还有数不清的开源选择。苹果和微软自己的UI 工具包也比以前更丰富更漂亮了。显示技术更先进了，Web 应用看起来常常像嵌入它们的网站一样专业，在桌面UI 习惯用法（例如拖曳）逐渐集成到Web 应用的同时，一些Web 用法也慢慢迁移到桌面应用中，例如蓝色的下画线链接、后退/ 前进按钮、大胆的字体和背景图片，还有好看的不再灰蒙蒙的配色方案。

尽管如此，现在要设计出好的用户界面仍然不容易。假设你不是一名受过训练或专门自学过的界面设计师，如果你只是按原来的方式去使用UI 工具箱，并且遵循已有的界面风格指南或模仿已有的应用，也许是能设计出普普通通还算过得去的界面的。

但是，那样的界面已经不够了。用户的期望比以前更高了——如果不是一开始就很容易上手，用户就不会觉得它很好。即使界面符合所有的标准，也可能没有很好地理解用户习惯的工作过程，或者使用了错误的词汇，又或者让用户很难猜出软件到底是做什么用的。没有耐心的用户甚至连问题都不会向你提。更糟糕的是，如果你开发了一个不可用的网站或Web 应用，失望的用户只要单击一下按钮就可以转而投向你的竞争对手。因此，就算设计一个 普通的用户界面，带来的不良影响也比以前更大了。

像电视、电话、汽车仪表盘这样的设备，以前曾经是工业设计师们的专有领地。但现在，这些设备变得越来越智能，它们由功能越来越强大的计算机驱动。为了响应市场的呼声，基于软件的功能和应用也越来越多。不管好不好用，它们已经进入了这个领域。在这种情况下，良好的界面设计和交互设计可能是十年之内设计师集体智慧唯一的希望。

小片的界面，松散地结合

作为一名想要弄清楚最近这些年所有技术变化的界面设计师，我看到了界面设计工艺上两个大的影响趋势。一是界面习惯用法的增长：界面习惯用法是一些可以识别的界面类型或风格，关于它们的目标、动作和外观，每个习惯用法都有它自己的词汇。

第二个影响是把这些界面组织到一起的规则开始日益放宽。例如，在一个界面上看到几个习惯用法混合在一起不再让人觉得诧异，又或者，这些控件的一部分和其他控件的一些部分同时共存于一个页面上。在线帮助页面，以前一直是超链接文本的格式，现在也有了一些交互性的脚本，例如动画或者到公告板的链接。界面上可能有自己的帮助文本，分布在表单或编辑器的中间，这在以前非常罕见。组合框的下拉菜单里不再只有标准的文本行，取而代之的可能是让人意想不到的元素，例如颜色网格和滑块（sliders）。有的Web 应用看起来可能像以文档为中心的画图程序，但是没有菜单条，并且只把完成的工作保存到某个数据库里。

Web 页面的自由度似乎已经教会用户通过图片和交互性来扩展他们的期望。只要用户能弄清楚界面在做什么，要打破旧式Windows 风格指南的规定已经没什么问题了。

不过，那也是最难的部分。一些应用、设备、Web 应用容易使用，但也还有很多不是这样的。遵循界面风格指南从来不能保证可用性，但现在设计师们有了比以往更多的选择（反过来，它们也会让设计难度更高）。那么，什么样的界面容易使用？

一些人会说：“容易使用的界面应该很直观。”噢，是的。不过“直观”似乎只是“容易使用”的同义词。

还有，“直观”这个词带有一点欺骗性。Jef Raskin 曾经指出，当我们说到软件“直观”时，我们实际上是在说“熟悉”。鼠标对于没有见过它的人来说一点都不直观（尽管可能一只灰熊会这么觉得），人脑中没有什么先天的或本能的因素能知道它是什么，但一旦你花上10 秒学习如何使用鼠标后，它就变得有熟悉感了，而且你再也不会忘记。蓝色的带下画线文本是这样、播放/ 暂停的按钮也是这样，等等，诸如此类皆是。

改述一下：“容易使用的界面，要设计得让人有熟悉感。”

现在我们有点感觉了。熟悉并不一定意味着某个给定的应用要跟已经定义好的产品流派相同（例如 Word、Photoshop、Mac OS 或随身听）。人类非常聪明，只要应用的各个部分容易识别，而且部分与部分之间的关系清楚，人们就能将已有的知识应用到一个前所未有的界面上，并且能弄明白它是怎么用的。

这就是模式的来源。本书列出了很多这类熟悉的界面组成部分，并且以一种你可以重用到各种不同上下文中的方式组织到一起。模式捕捉了一种常用的结构——通常是非常“本地化”的结构，就像新奇的组合框下拉元素一样——不会在细节上太过具体，这样能让你有发挥创意的空间。

如果知道用户对你的应用有何种期望，而且能从界面工具箱中仔细选择习惯用法（大规模的）、控件（小规模的）和模式（在整个范围内），你就能设计出某个既让人觉得有熟悉感同时又不失新颖独特的界面。

这样，你就两全其美了。

模式综述

基本上，模式是某个对象在结构和行为上的特点，这些特点可以改进它的“可居住性（habitability，适应人的能力）”——这个对象可能是一个用户界面、一个网站、一个面向对象的程序，甚至一栋建筑物。模式让目标对象更漂亮或更容易被人们理解，也会让工具更有用、更可用。

因此，模式可以描述成某个已有设计领域的最佳实践。它们为设计张力（通常在模式文献中叫做“约束”，Forces）提供普遍适用的解决方案。根据这样的定义来看，它们并不是新颖独到的。它们不是即取即用的组件，同一个模式的每种实现各不相同。它们不是简单的规则，也不是启发式的道理，也不会为你提供所有的设计决策依据——如果你在寻找一套完整的界面设计方法，那么你找错地方了，因为本书是一份界面设计的模式目录！

模式是什么样的呢？

它——是具体的，而不是泛泛而谈的。

所有的设计师都需要良好的设计原则，例如“防止错误发生”、“建立高度可视化的层级结构”，以及“不要让用户思考”。不过，要从这些基本原则开始设计一个实际可用的界面相当不容易。而模式非常具体，可以帮助设计师从基本设计原则开始，并深入到具体的用户界面设计元素应用（小部件、文本、图形元素、对齐的表格，等等）。

可以有效应用到各类不同的平台和系统中。

模式比设计原则或启发式原则要更具体，但它们也确实定义了一定的抽象层次——最好的模式不是局限在单一平台或单一风格上的，有一些模式甚至可以同时应用在平面媒体和交互式系统中。在理想情况下，每个模式都会对应人们和某一小片设计产物之间最完美的交互，而它们在背后的技术和媒介发生变化时也仍然有效。

是产品，而不是过程。

不像启发式原则或以用户为中心的设计技术，模式不是建议如何为一个工程问题或设计问题找到解决方案，它们就是可能的解决方案。

是建议，而不是要求。

当然，你应该经常遵循良好的设计原则和启发式原则。同时，各个公司也需要设计师遵守设计风格指南，让他们设计出来的产品保持一致性。但模式只是建议；你可以遵照它们，也可以拒绝使用，取决于你的设计情形以及用户的需要。

关注各个界面元素之间的关系，而不是单个元素。

一个文本输入框不是模式。不过，一个文本输入框加上它旁边一小片帮助文字的空间关系可能是一个模式。与此类似的是，一组界面元素随时间流逝所产生的变化——随着用户和软件之间的交互——可能会组成一个模式，当然也有一些模式只表述一些静态的关系。

可以根据不同的设计情形进行定制。

当设计中应用了一个模式时，设计师应该对模式进行调整以适应具体设计的需要。你可以完全照搬一些例子，但只要你理解了模式的工作原理，为什么不做得有创意一点？记得对模式进行改造，去适应具体的用户和需求。

有一些非常完整的模式集合组成了“模式语言”。这些模式与可视化语言类似，因为它们涵盖了整个设计中用到元素的词汇（虽然模式语言更抽象，也更注重行为，而可视化语言讲的是形状、图标、颜色、字体等）。本书中的模式集合还不够完整，也包含了一些还没有达到传统模式要求的技术，但至少它非常简洁，可以管理，并且非常有用。

其他模式系列

最早的时候，“模式”一词起源于建筑领域，而不是软件行业。克里斯多夫 亚力山大的《建筑模式语言》（A Pattern Language ）和它的姊妹书籍《建筑的永恒之道》（The Timeless Way of Building ，两本书都是牛津大学出版社出版的）确立了模式的概念，并介绍了一门包括250 个模式的多层模式语言。因为它的完备性、模式之间丰富的关联，以及它源自人类对建筑世界的回应这个事实，所以它被看作关于模式语言的金科玉律。

在2 0 世纪9 0 年代中期，《设计模式》（Design Patterns ，Addison-Wesley 出版，作者是Erich Gamma、Richard Helm、Ralph Johnson 和John Vlissides）一书的出版，完全改变了商业软件架构实践。该书包括一组描述面向对象微架构的模式，如果你学习过软件工程，这可能就是那本把你引入 模式世界的书。后来，许多其他作者也开始写书叙述软件方面的模式，这些模式确实让软件更能适应人了——只不过针对的是那些写软件的人，而不是使用软件的人！

第一组关于用户界面的模式是本书这些模式的祖先：“Common Ground”。后来又出现了很多其他模式和语言，最有名的是Martijn van Welie 的“交互设计模式”（Interaction Design Patterns ），van Duyne、Landay 和Hong 的“网站设计”（The Design of Sites ），Little Springs 的移动模式（现在叫做Design4Mobile），还有Yahoo! 的设计模式库（它后来变成了Designing Web Interfaces ），以及剩下的O＇Reilly 设计模式库，包括（设计社会化界面、设计手势界面）和本书的第一版（Designing Interfaces 中文版）。

关于本书中的模式

由上所述，其实本书中没有什么太新鲜的内容。如果你曾经进行过任何Web 或UI 设计，或者哪怕只是对这两方面关注较多，你可能也会对绝大部分的模式说：“噢，是的，我知道，就是那样的。”但是其中也有一些模式对你来说可能是新概念，还有一些虽然见过，但可能不在你的常规设计备用工具箱里。

这些模式适用于桌面应用，也同样适应于基于Web 的应用，很多模式还可以用在如掌上电脑、手机、数字录像机等数字设备上。

尽管本书不会事无巨细地描述之前说到的那些界面元素，但它们有助于帮助我们整理思路。有一些章节会重点介绍常见的界面元素：表单、信息图表、移动界面，以及一些社交网络上的交互。其他章节的讲述将跨越多个主题，例如组织方式、导航、动作（actions），以及可视化风格等。（篇幅所限，本书暂不涉及在线游戏或社区等主题。）

本书的目标读者是那些懂得一定界面设计概念和术语的人士，最好能知道对话框、选择、组合框、 导航条和空白等。书中并不会提到很多广为人知的技术（例如粘贴），因为大家都已经知道了。 但是，冒着唠叨的风险，书里也讲述了一些常见的技术来鼓励大家把它们用在别的上下文里，或者把它们和其他候选方案一起对比讨论。

本书并没有提供一份完整的界面设计过程，在进行设计时，合理的设计过程非常重要，尤其是以下几个特定的部分：

进行实地研究，来找出目标用户和他们的实际行为。

进行目标和任务分析，描述并阐明用户将会怎样对待你的产品。

进行模型的设计，例如人物角色模型（Personas，一种用户模型）、情景（Scenarios，关于任 务和交互情形的模型）及界面原型（Prototype，界面本身的模型）。

在不同的开发阶段进行经验测试，例如可用性测试和对真实用户使用产品的in situ（拉丁语，意为“现场”）观察。

拥有足够的时间完成几个设计迭代，因为你通常要多试几次才能得到一份好的设计。

这些内容超出了本书讨论范围，不过有其他许多书籍和课程详细地讲到了这些内容，请参考学习。

不过，还有一个更深刻的理由来解释为什么本书不会给你设计界面的灵丹妙药。好的设计远远不止一些诀窍，它是创造性的过程，也会随着你的工作而发生变化——例如，在任何给定的项目下，你都有可能直到走进死胡同才会意识到其中的一些问题。我自己就碰到了很多次。

而且，设计并不是线性的活动。本书的大部分章节是按照规模（其次是它们在设计进程中的大致顺序）来排列的：首先对重大内容和范围进行决策，然后是导航、页面设计，最后是关于交互的细节，例如表单、画布。但你经常会发现需要在这个进程中来回往复，可能你在一个项目早期就已经制定某个屏幕应该是什么样子，然后它将成为一个“固定点”，你需要在它之前和之后做一些工作来确定正确的导航结构（不，我们理想的状态并不是这样的，但是现实生活中常常会碰到这样的情形）。

也就是说，你可以采用以下这些方式来使用本书中的模式。

学习

如果你还没有丰富的设计经验，这些模式可以成为你良好的学习工具。你可能希望通读一遍来获得一些想法，或者在需要的时候回过头来参考某些特定的模式。正如扩大你的词汇面有助于帮助你在某种语言上的表达能力一样，扩大你的界面设计“词汇面”也可以帮助你更好地进行设计。

范例

本书中的每个模式至少有一个范例，有些模式有很多范例；它们也许可以成为有用的原始资料。你还可能在这些精彩范例中找到文字叙述中没有表达的闪光点。如果你是一名熟知模式和设计师，那么书中的范例会极大地帮助你。

术语

如果你向用户、工程师或经理们谈到界面设计，又或者你在写说明文档，那么可以用一些模式的名字来沟通和表达你的想法。这也是模式语言另一个著名的优点（例如，术语singleton 和 factory 原来是模式的名字，现在已经在软件工程师中广为流传了）。

对备选设计进行比较

如果你一开始打算在页面上使用模态Tab（Module Tabs）组织内容，然后发现它的效果没有你希望的那么好，那么也许可以试试其他的备选方案，例如带标题的区域（Titled Sections）或手风琴模式（Accordion）。本书还提供了一些互为备用的模式，通常也都给出了在这些模式之间进行选择的理由。有经验的设计师们知道，为客户展示一些备选方案，结果常常会达成更好的设计选择。

激发灵感

每个模式的描述都力图阐述为什么这个模式可以让某个界面更加容易使用或更有意思，如果明白了其中的理由，然后又想在本书的示例之外再发挥一下，那么你可以在有根有据的情况下得出一些创造性的想法，不必凭空猜测。

还有一点提醒：模式目录不是检查清单，你不能指望用其中使用的模式来衡量一份设计的质量。 每个项目都有它独特的上下文，在这种情况下，哪怕你是在解决一个常见的设计问题（例如，怎样将非常多的内容塞到一个页面上），某个给定的模式对于该上下文来说可能并不是好的选择。没有任何参考资料能取代明智的设计判断，它们也不能取代良好的设计过程，因为好的设计过程将帮助你找到并修复设计中的错误。

你最终应该能将这样的参考资料置之脑后。在成为一名熟练的设计师以后，你将在实际情况中自然 地使用这些设计想法，甚至不曾注意它们。模式将成为你知识体系的一部分。当然在那个时候， 它们也会成为你设计工具箱的自然组成部分。

目标读者

不管你的用户界面设计能力如何，本书都可以为你提供帮助，特别是在以下领域进行设计的人士：

桌面应用

网站

Web 应用，或者富网络应用（RIAs，Rich Internet Applications）

为移动设备或其他消费电子产品设计软件

现成系统（Turnkey System），例如信息亭（Kiosk）

操作系统

当然，上述设计平台彼此之间也有很大的差异，不过，我相信它们有更多的共同点。你将在这些模式中看到各种平台的范例，而且我是有意这么做的——它们经常使用同样的模式来达到同样的目的。

根据本书第一版的读者反馈，和那些有丰富经验的设计师相比，这本书对经验较少的设计师更有帮助。因为做了一段时间的网站或界面设计之后，很多内容你已经熟悉了。不过，就算刚刚开始设计，你也应该知道UI 设计的基础知识，例如了解现有的工具箱和控件集合，希望你有拖曳和关于注意力焦点的概念，并懂得可用性测试和用户反馈的重要性。如果缺乏这些知识，参考资料中有一些很不错的书，能帮助你更好地开始。

本书特别面向以下读者：

需要设计用户界面的软件开发人员。

需要设计更具交互性的Web 应用或网站的网页设计师。

用户界面设计和可用性领域的新手。

想要了解某些特定问题如何解决的有经验的设计人士，书中的示例可以作为很好的灵感来源。

交叉领域的专家，例如技术文档编写人员、产品设计人员、信息架构师等。

想要进一步了解良好界面设计要素的管理人士。

开源开发人员和爱好者，这里说的不是“开源设计”，而是为大家介绍界面设计最佳实践作为参考。

本书组织方式

书中的模式组成了几个主题章节，每个章节都有一个简短的介绍，包括了这些模式的概念。我想简单强调一下，其中一些概念可能需要一整本书来阐述它们，但是介绍部分将会给你一些关于模式的上下文知识。如果你已经知道了这些概念，那么可以在这里温习一下；如果不是，那么它们将给你提供一些可以进一步学习的主题。第一部分的章节可以应用到几乎所有的界面，不管是桌面应用、Web 应用、网站、硬件设备或任何你能想到的东西：

第1 章，用户做些什么，讲述的是好的界面应该支持的常规用户行为和使用模式。

第2 章，组织内容，讨论应用到高度交互界面的信息架构问题。这一章讲述了不同的组织模型、常见的界面类型，还有模式汇集（一些小规模模式组成的集合，用来支持某种特定类型的界面）。

第3 章，到处走走，讨论导航问题。这一章描述了在界面中移动的模式——如何在页面之间、窗口之间以及在大的虚拟环境下移动。

第4 章，组织页面，描述页面元素布局和布置模式，它讲述的是如何简单地通过把设计元素放在正确的地方来进行与用户的交流。

第5 章，列表，收集了一组显示列表元素的模式，以及如何在它们之间进行选择。

第6 章，完成任务，描述的是如何表现动作和命令，可以使用这一章里的模式来处理界面上的“动词”。接下来的一组章节处理具体的界面习惯用法，可以一次把它们读完，但在实际的项目中可能不会全部用到，第6 章和第7 章中的模式是用得最广的（绝大部分的现代界面都流行使用树、表格和表单）。

第7 章，显示复杂数据，包括常见的树、表格、图表、信息图表等模式。本章讨论了数据表现方式的认知知识，以及如何使用它们来展现知识和内在的含义。

第8 章，获取用户输入，处理表单和控件。除了模式之外，本章还提供了一个表格，用来把各种数据类型映射到可以表现它们的不同控件上。

第9 章，利用社交媒体，讨论的是那些新兴的社交媒体集成方式。尽管设计者可能不需要经常为网站做出类似决策，但他们有时候会有这种需求，而且现在的社交媒体会无孔不入地对你的设计产生影响。

第10 章，迈向移动设计，讲述的是设计者应该知道的技术和概念，来帮助他们更好地把设计移植到移动设备上。本书的其他模式可能也包括来自移动设备的例子，不过这一章所有的模式都是专门用于移动应用的。

最后，第11 章讲述设计过程的最后一步，当然它也可以应用到你设计的任何东西上。

第11 章，修饰外观，讲述美观和最后的工序，完成设计。它使用图形设计原则和模式来讲述在界面的行为已经稳定的基础上，怎样及为什么需要打磨它的外观和感觉（Look and Feel）。

在为本书选择例子的时候，我考虑了很多因素。当然，其中最重要的因素是该例子是不是很好地展现了这个模式或概念，不过其他的因素包括总体的设计适合度、是否可以打印、平台可变性（是 否可以适用于桌面应用、网站、设备等），以及这些应用有多知名、读者是否能访问到。因此，考虑到这些方面，很多例子来自微软和苹果公司的软件、一些特定的网站及容易找到的消费类软件和设 备。这并不是说它们通常代表了良好的设计。不是那样的，我也不是要故意略过很多设计师的优秀设计，或者不那么知名的应用。如果你知道有一些例子符合上面这些准则，请把它们推荐给我。

致  谢

首先，我要向本书的编辑Mary Treseler 致以衷心的感谢，你在最合适的时候启动了这个项目，你知道它的版本需要更新了，而且带着圣人般的耐心，确保我完成了这项工作。还要感谢O’Reilly 的出版制作小组成员：Rachel Monaghan、Audrey Doyle、Robert Romano、Ron Bilodeau，以及其他任何我不小心遗漏的人，你们太棒了。

这一版本的技术审校人员也给我提供了出色的反馈，Barbara Ballard、Erin Malone、Dan Saffer，非常感谢！

这个版本中的很多想法其实已经酝酿了很久，和其他UI 设计师和模式作者之间直接或间接的交流也在很大程度上帮我整理了自己的想法，谢谢你们：Bill Scott、Luke Wroblewski、Martijn van Welie、Erin Malone、Christian Crumlish、Dan Saffer、James Reffell、Scott Jenson，还有我在Google 的用户体验同事们。我从你们身上学到了很多。我也非常感谢最近几年那些在各种各样的会议讲座和小型会议中给我提供反馈的朋友。

感谢第一版的读者们，如果没有你们，就不会有这次的第二个版本了。

最后，我要特别感谢Rich，你在这个版本的写作过程中也同样给了我全心全意的支持，还有Matthew，你现在还太小，还不明白你那些贴心的拥抱对于我来说，有多重要。我爱你们！

精彩文摘

模式意味着重用

身处软件的世界里，一切和现实世界有些相同，又有些不同。例如，用tab 页来组织内容，对内容进行快速索引和对空间进行扩展，这与现实中tab 标签的使用几乎是完全相

同的。而在有些方面，如软件屏幕的布局与纸质页面的布局，就不尽相同，适合使用在屏幕上和平面媒体上的字体，也是不一样的。

若你拿到一叠纸，可能会一张张地翻过去，翻到最后，把它放下。然而在软件世界里，如果用户到了某个界面之后无法返回，就会被困在那里（在早些年的游戏《风云》中，接近末尾时就有这么一个地方，害得很多玩家被困）。这个问题的解决方法是什么呢？当然是留一个出口了，让用户可以回到安全的地方。

在每个限制了导航选择的页面上，放一个按钮或链接，让用户能明白无误地离开这个页面，回到一个熟悉的地方，这就是逃生舱（Escape Hatch）模式。

模式意味着重用。对于一个导航很复杂的网站，访问者容易迷失在各种各样的链接里，此时我们就可以应用逃生舱模式：在网页上设置统一出口（通常是把首页的链接加在站点图标上），无论什么时候，点击这个出口（站点图标），就可以回到首页，重新开始。现在，这一点已经成为网站设计的惯例了。

本书中，作者为读者收集了很多常用的界面设计模式，如何组织内容、如何设计导航，等等，读者可能对其中的一些已经很熟悉了，也有一些可能以前并未细想过，在阅读本书的时候，正好可以一一梳理。总的来说，这些都是在实现级别的各种常用解决方案，读者可以灵活运用到自己的界面设计中。

不过，在得到任何解决方案之前，你需要关注几个问题，主要是与人有关的方面，比如人的行为模式、人的心理特点，等等。幸运的是，作者在本书的一开始，就专门总结了一章“和人有关”的模式。因此，在阅读和学习各种界面设计模式的时候，请不要忘了：“好的界面设计并不始于图片，而是始于对人的理解，比如人们喜欢什么、为什么人们会使用某种特定的软件、他们可能会怎样与之交互。对使用的人了解得越多，你就越能对他们移情，也越能进行有效的设计。毕竟，软件对于使用他们的人来说，只是达到目的的一种手段，你能帮助他们达到目的，他们就高兴。”

在这个第2版中，勤奋的作者为我们更新了几乎所有的模式示例和说明，并向读者介绍了全新的移动应用和社交媒体设计模式，这两个领域的设计师可以从中找到很多灵感。

非常感谢我的朋友方舟、任发科和罗景文，他们在繁忙的工作之余帮我承担了部分章节的翻译工作，并且我们一起仔细检查、修正了不少上一版中遗漏的小问题，让这一版阅读起来更流畅。

感谢电子工业出版社，也感谢本书的编辑刘皎、贾莉、许艳等各位老师，她们为这本书做了很多工作，翻译和出版一本书并不是一件容易的事，不过，前面这些烦琐的工作我们已经完成了，剩下的，就是你，一位好奇的读者，坐下来，慢慢阅读的时间了。

译者：Windy | De Dream

2013 年8 月