1.1 设计模式

设计模式（design pattern）的概念最早是建筑师克里斯托弗·亚历山大（Christopher Alexander）在他的开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。这两本书里贯穿始终的一个论题便是，为什么有些地方会让人感到精神百倍、生机勃勃，而另一些地方则让人感到沉闷无比、毫无生气。根据作者的观点，环境与建筑向我们传递感受的方式并不局限于主观情绪，还可以是基于某些有形的特定模式产生的结果。即使是普通人也可以学会并使用模式来建造人性化的建筑。

《建筑模式语言》一书包含了253个建筑设计模式，大的如城市和道路系统的布局，小的如家庭住宅中的照明和家具。

模式是一种用于解决特定设计问题的可复现、可复用的方案。

“每种模式都描述了一个在我们的环境中反复出现的问题，以及该问题的解决方案的核心思想。”

——克里斯托弗·亚历山大，《建筑模式语言》

类似地，我们在创建界面时，也在使用设计模式来解决常见的问题：使用标签页将内容分成几个部分，并表明哪一个选项对应于当前的页面；使用下拉菜单展示可供用户选择的选项列表（见图1-3）。

我们用模式来为用户提供反馈，显示流程中剩余的步数，让用户相互交流，查看和选择项目……设计模式可以激发和鼓励用户，能简化任务，还能创造成就感或控制错觉（见图1-4）。

大多数设计模式都已打造成型并为人所熟知。这些模式利用了人的心智模型，让设计可以被直观地理解。全新的模式则需要用户先对其进行学习和接纳——这样的案例并不多见。产品与众不同的原因并不在于它所使用的模式的新颖性，而在于这些模式的运用方式，以及它们如何相互配合以实现特定的设计目的。

一套相互关联的模式构成了产品界面的设计语言。

我们开始设计产品的时候，设计语言就出现了。我们有时并不知道这个语言是什么样的。有时候，有效且有趣的设计是基于直觉的，我们很难准确地阐述为什么要这样设计。设计师和开发人员可能会本能地了解个中缘由，但直觉并非总是可靠和可扩展的。设计师Dan Mall在他的文章Researching Design Systems中指出，设计体系的一个主要目标就是“扩展创意方向”。如果你需要让一群人持续可靠地遵循创意方向，就需要将模式明确地阐述出来，并分享出来。

当你阐述你的设计语言时，需要确保它可操作、可重现，也就是以一种系统性的方式开始这项工作。例如，与其讨论如何调整某个项目以使其突出，不如建立一套“提升模式”，其中每个模式旨在实现不同程度的视觉突出。Tom Osborne的“视觉音量指南”（Visual Loudness Guide，见图1-5）便是一个系统性地组织按钮和链接的示例。在这里，按钮和链接并非单独列出，而是成套出现，每一套都具有与其视觉突出效果相对应的“音量”。

将设计语言阐述出来可以更好地控制设计体系。你能用更深刻的方式影响它，而不是局限于做小改动。如果你发现一个小的设计改进能对用户体验产生积极的影响，便可以将其应用于整个设计体系的模式，而非只用在一个地方。与其花费数小时设计下拉菜单，不如将这些时间花在与用户和领域专家讨论这里是否需要一个下拉菜单上面。建立了设计语言之后，你便可以不再关注模式本身，而是更多地关注用户。

在这本书里，我们将不停地讨论如何清楚地阐述、记录和共享数字产品的模式语言。并且，我们将重点关注两类设计模式：功能性模式和感知性模式。功能性模式表现为界面上的具体模块，如按钮、标题、表单元素、菜单等。感知性模式则是描述性的样式，以可视化方式表达和呈现产品的个性，如配色、排版、图标、形状、动画等。

不妨做个类比，功能性模式有点像名词和动词，它们是界面中那些具体的、可操作的部分；而感知性模式则类似于形容词，它们是描述性的。例如，按钮是具有明确功能的模块，它让用户能够提交某项操作。但按钮上的文字的样式，以及按钮本身的形状、背景色、填充、交互状态和过渡动画不是模块，而是样式，这些样式描述了按钮是什么样的。从前端开发的角度来看，模块建立在HTML的基础上，而感知性模式则是典型的CSS属性。

设计体系还包含很多其他类型的模式：用户流程（例如包含错误提示和成功消息的表单的设计）、面向领域的设计模式（如教育科技系统的学习模式、电子商务模式等）、说服式用户体验模式，等等。本书的重点是作为设计体系核心构件的功能性模式和感知性模式。

当然，重要的不仅仅是模式本身，还包括它们是如何演进、共享、连接和使用的。