“设计体系”是指服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计模式与实践方法。其中，“模式”指代任何可复用的界面组成要素，包括按钮、文本框、图标、配色、字体，以及可复用的功能流程与交互行为等等；“实践”则是关于如何在设计团队当中创建、提炼、使用和共享这些模式。

下面截图当中所示的两款产品来自不同的行业。左侧是名为 Thomson Reuters Eikon 的贸易与市场分析工具，右侧是 FutureLearn，开放式教育与社交化学习平台。

每一款产品的设计模式都有其各自的协同运作方式，以实现不同的产品目标。Thomson Reuters 重在高效实用的数据处理、信息检索及多任务能力；而 FutureLearn 则更加关注于深度阅读和友好的学习体验，包括推动志趣相投的学习者进行互动等等。产品的目标决定着它需要采用哪些类型的设计模式。

Thomson Reuters 的界面主要由面板与挂件组成，利于多任务的实现。紧凑的空间，灵活的布局，精小的控件，合理的字体与字号选择，这些设计要素共同构成了高密度的整体设计风格，易于在有限的屏幕空间中呈现大量数据。

而 FutureLearn 的风格则更加简洁、松弛，每个页面通常都会聚焦于特定的任务，例如阅读文章、参与讨论、完成互动式练习等等。布局通常以单列为主，大字号标题、硕大的控件、充裕的留白，所有这些设计要素共同构成了较高的视觉对比度。（注）

注：FutureLearn 所采用的设计模式旨在构建反思式学习体验，帮助学习者聚焦于当前任务，避免干扰；页面所营造出的整体氛围要使人感到冷静与专注。

设计模式的选择会受到多方面因素的影响。对于那些由产品的核心功能及其所在领域所决定的设计模式，我们称之为“功能性模式”。以刚刚介绍过的贸易与市场分析类工具为例，任务栏、数字表格、图表及一系列数据可视化工具是最为常用的设计模式；对于在线学习平台而言，则是文章、视频、讨论组、学习进程、互动教学等等；而电商平台一定离不开商品列表、筛选排序、商品详情、购物车、支付等核心模式。

产品的气质（或品牌形象）则是另一类设计模式的决定要素，而这些模式又进一步塑造了产品带给我们的感知。在本书中，我们将这类模式称为“感知性模式”，包括话术风格、文本样式、配色、图标风格、空间与布局、特定的形状、动效、音效等等。离开了感知性设计模式，对于那些领域相同且功能相似的产品，我们将难以分辨它们所属的品牌。

HipChat 与 Slack 有着相似的产品目标及功能，但我们可以很清楚地分辨它们，这在很大程度上是由于界面当中品牌表现形式的差异所导致的。

除此之外，设计模式还取决于产品所在的平台。桌面端产品的设计模式与移动端有着明显的差异；而同属于移动端的 iOS app 与 安卓 app 又有着各自的平台特色。

产品界面设计通常会综合运用到大量的设计模式，要确保它们能够正确、有效、高效地协同运作，这并非易事。接下来就让我们对设计模式进行更加深入的了解。

设计模式

“设计模式”的概念由建筑设计师 Christopher Alexander 在其开创性著作《建筑的永恒之道》（The Timeless Way of Building）和《建筑模式语言》（A Pattern Language）当中提出。“为什么有些环境让人感到充满活力，而有些地方又会让人觉得了无生机？”，这个问题贯穿了两部书的始终。Alexander 认为，建筑处所带给我们的感受是特定的实感与建造模式共同作用的结果，而非完全取决于我们的主观情绪。他认为，即便是非专业人士也可以学会这些模式，并创造出适宜的建筑。

《建筑模式语言》一书共汇集了253种建筑设计模式，大到城市布局与道路规划，小到住宅家居与照明系统，均是用于解决特定问题的、具备复用性的设计方案。

“每种设计模式都针对某个在我们的环境当中反复发生的问题进行了描述，并提供了相应的解决方案。” Christopher Alexander，《建筑模式语言》

与此类似，我们在创建产品界面时，也要通过设计模式来解决问题：我们使用 tab 将内容划分为不同的分类，并呈现当前的选中态；我们通过下拉列表为用户提供一系列选项。（注）

注：http://ui-patterns.com 收集了大量的常见设计模式，并按照功能用途进行了分类。此外，关于界面设计模式，我还建议你阅读 Jenifer Tidwell 所著的《界面设计模式》一书（Designing Interfaces: Patterns for Effective Interaction Design）。

来自响应式前端设计框架 Bootstrap 的一些典型模式。

我们通过特定的设计模式来提供状态反馈，向用户呈现任务步骤，为他们提供操作选项，或是帮助他们与彼此互动；我们通过特定的设计模式来营造具有吸引力与鼓励性的氛围，使任务更易于完成，给用户带来成就感与控制感。

说服力模式的示例，“依靠识别而非记忆”，来自 UI Patterns。

多数模式是历经验证并为人所熟知的，它们符合用户的心智模型，能使界面更加符合直觉；而过于创新的模式则需要用户首先付出学习成本。真正能使产品在同类竞品中脱颖而出的并非设计模式自身的创新性，而是它们能否被合理运用并最终实现产品设计目标。（注）

注：几乎没人能预见到“轻扫”手势可以被如何使用，直到它成为触屏时代的标准设计模式。如今我们甚至能见到完全围绕该模式建立的产品，例如 Tinder。一种设计模式从无人知晓到全球普及，期间的过渡阶段十分微妙；能否在恰当的时候以合理的方式对其进行运用，甚至可能决定一款产品的存亡。

正是一系列具有内在关联性的设计模式共同定义了产品界面的设计语言。

设计语言会伴随着设计过程而逐渐成型。我们并不总是能够精准地把握一门设计语言的定义与规则；有时，设计方案仅来自于直觉，我们甚至难以准确地表达其目标与运用方式。这类方案对于设计师或许是符合直觉的，但“直觉”未必可靠，且难以被复用和扩展。在“Researching Design Systems”一文中，设计师 Dan Mall 认为，设计体系的目标之一就是“使创意方向得到扩展”。如果你希望团队始终如一地遵从着特定的设计方向，那么能够被清晰定义、描述和复用的设计模式是必需的。

从你有意识地对设计语言进行定义的时候起，它就开始成为某种可以执行与复用的标准，你也会逐渐习惯于体系化的设计思维模式。譬如，你可以梳理一套用于提升元素权重的设计模式，按照视觉吸引力程度由高到低依次列出；当你们需要界面当中的某个元素更加突出时，无需花费时间讨论争执，直接参考模式库便好。由 Tom Osborne 制作的“视觉音量规范”向我们演示了如何体系化地对视觉元素进行梳理。除了将不同样式的按钮或链接一一列出，你还需要将它们的类型、“音量”（视觉权重）、用途等等进行清晰地定义，形成完整的模式套装。

Tom Osborne 制作的“视觉音量规范”

你也无需每次都花费时间重新设计一款下拉列表；将这些时间节省下来做些前期的用研和分析工作，首先确定设计方案里是否真的需要下拉列表。设计语言的复用能力可以避免我们过多地聚焦于设计模式本身，而将更多精力用于对需求的思考。

经过明确定义的设计语言还会有助于你更加体系化地控制整个产品的设计方案。如果发现某个小小的调整能够对产品体验产生积极的影响，你可以将其迭代到相关的设计模式当中，从全局层面产生作用，而不局限于零星局部。

在本书中，我们将通过大量篇幅探讨如何对设计模式进行定义描述及协作共享。我们会聚焦于前面介绍过的两类设计模式，即“功能性模式”与“感知性模式”。前者体现为有形的界面组件，包括按钮、页头、表单控件、菜单等等；后者表现在那些能够表达产品气质的描述性视觉元素当中，包括配色、字体、图标、图形与动效等等。

如果用“语言”进行类比，那么功能性设计模式就像是“名次”或“动词”，它们是界面当中实体化的、可执行的部分；而感知性设计模式则像是“形容词”，它们是描述性的。譬如，按钮是有着明确功能性的界面组件，用户通过它执行“提交”动作；而按钮当中的字体风格，包括按钮的形状、背景色、间距、交互状态和动效则不属于“组件”，它们是“风格”，体现着按钮的种类与属性。从前端开发的角度讲，“组件”对应着那些基本的HTML元素，“风格”对应着典型的CSS属性。

而完整的设计体系还会包含很多其他类型的模式定义，例如可复用的流程模式（表单验证）、与特定领域相关的功能模式（电商交易模式、在线学习模式）等等。本书所聚焦的功能性模式与感知性模式则是设计体系的核心与基石。

当然，重要的不仅在于设计模式本身，我们更要关注如何使用和共享这些模式，并使其保持进化。

工作语言

语言是协作的基础。如果你在团队中工作，所有与项目相关的设计师都要尽可能使用同一套“工作词汇”，否则协作将难以有效地展开，因为人们的心智模型各不相同，表达方式也因人而异。我们回到按钮的例子，即便这样一个最基础的界面元素也可能带来不同的解读：按钮究竟是什么？一个可以点击的有界区域？一个用于跳转到其他页面的交互元素？一个负责提交用户数据的表单控件？

Abby Covert 在 How to Make Sense of Any Mess 一书中建议，团队在进入实际工作流程之前，就应该对大家需要统一使用的工作语言进行讨论、评审和确认。工作语言的应用范围涉及方方面面，从高层面的需求概念描述，到日常设计决策讨论中的表达方式，无不需要规范。以此为基础，我们对于界面元素、设计模式和相关文件的命名方式才能在团队范围中保持统一。

事实上，即便能做到这一点，有时也还是不够的。人们虽然使用着同一套词汇表，但在认知层面却可能存在差异。譬如，你们在项目中常年用着“剧本”（Scenario）一词，但其实每个人对它都有各自的解读方式。这种情况下，仅定义工作语言是不够的，我们还要对其使用方式达成一致。大家除了要以相同的方式理解“按钮”这个词条，同时更要理解为什么和如何使用按钮，包括它的典型情境和设计目标等。

假设我们要在界面中使用一种叫做“序列”（Sequence）的元素，目标是向用户展示完成任务所需的步骤次序。

理想状况下，与该产品相关的每一名设计师都应该对这个元素有着清晰的了解，包括其标准名称与用途，为什么以这种样式呈现，应该在何时以怎样的方式使用。这类认知越是统一，设计元素在产品全局的运用方式便会越发合理、一致。工作语言需要在设计师与工程师之间形成共识；同时，如果内容、市场、产品管理等相关团队也能对工作语言有所了解，则更是锦上添花。

每个人都应该知道这个控件的正式名称是“序列”，而非“助手”或“气泡”一类。如果实际情况是设计师称之为“气泡”，工程师叫它“助手”，而用户将其理解为 tab ，那么基本可以确定你们的工作语言没有起到应有的作用。为什么在这里需要考虑到用户的理解？我们可以回忆一下《设计心理学》（The Design of Everyday Things）一书。 Don Norman 曾在书中谈到系统模式（界面）与用户心智模型（经由过往的使用经验而对界面行为方式产生的预期）之间的鸿沟。如果系统模式有悖于心智模型，那么用户将受困于系统行为方式与预期不一致所造成的混乱；标准化的设计语言正是填补这一鸿沟的有效手段。

随着设计模式逐渐趋于复杂，行之有效的提炼与共享协作方式就越发成为必要。在现今的互联网领域中，“设计模式库”已经成为构建设计体系的重要实践方式之一。

设计模式库及其局限性

除了设计模式以外，用于创建、提炼、共享和迭代这些模式的方法技术同样属于设计体系的定义范畴。“模式库”就是用于收集、整理并共享设计模式的典型工具，其中还会包含对于设计原则及模式使用方法的规范性说明。虽然近年来，设计模式库的概念在互联网行业中越发流行，但是通过不同的形式将设计模式整理归档并进行共享的概念却是有着悠久的历史。

建筑大师 Palladio 于1570年出版的《建筑四书》（The Four Books of Architecture）是一部具有深远影响力的建筑设计著作；它同时也是最早的设计体系文档范本。Palladio 以古罗马建筑为例，阐述了建筑设计规范与美学法则，同时通过大量精美的木刻插图向我们展示了建筑设计原则与设计模式，包括这些模式的运用方法。

旋转楼梯的类型：螺旋式、椭圆式、转角式。Palladio 描述了在何时、以怎样的方式使用这些类型，譬如螺旋式适用于“非常局促的空间，因为它所占用的空间最小，但蹬爬时较为费力。”

在现代平面设计领域当中，从早期的文字排印与栅格体系，到包豪斯设计原则，设计体系文档化的发展越发成熟。近几十年来，各类公司机构更是将其视觉识别体系以说明手册的形式印刷出来，例如 NASA 于1975年发布的《平面设计标准说明书》。

NASA的《平面设计标准说明书》对于布局设计的规范。

而在互联网领域，最初的设计模式库只是品牌识别文档的一部分扩展内容，用于描述 logo 的使用方式、协作价值、包括字体与配色在内的品牌风格定义等等（注）；接下来，界面组件及其使用规范也被纳入了进来，并逐渐形成了正规的、文档化的界面设计模式，其中最具代表性的就是 Yahoo 的设计模式库。

注：或许这也正是“风格指南”与“设计模式库”的区别所在。前者仅聚焦于“风格”，例如配色和字体等方面；而后者除了包含风格定义以外，更会提供功能性设计模式与设计原则等方面的内容。

Yahoo 的设计模式库

相比于 Yahoo ，多数团队拥有的资源更加有限，因此设计模式库通常会以 静态 PDF 或 Wiki 文档的形式呈现，较难维护更新。对于如今的设计师和工程师来说，同时包含设计模式与真实代码的、具有动态性的“活化”的模式库才是真正所需。这类模式库已然超越“参考文档”的范畴，成为真正意义上的产品工作模式。

MailChimp 的动态模式库是早期最具影响力的范例之一。

模式库的局限性

人们时而会将“设计模式库”与“设计体系”这两个概念混为一谈。实际上，即便最为复杂的模式库也并不等同于设计体系；它仅是用于构造高效设计体系的工具之一。

设计模式库本身无法为设计产出的质量做绝对担保。作为一种设计工具，模式库可以帮助修正一系列问题，或是提升代码库的健壮性，但设计质量的提升不能仅依靠单一工具来实现。

模式库无法修复“坏”设计；模式本身的设计或许就存在问题；模式也有可能被误用，或是以不恰当的方式进行组合运用。正如 TED 的 UX 架构师 Michael McWatters 在一篇访谈中所说：“即便是 Squarespace 提供的模板框架，也有可能被糟糕的设计思维所毁掉。” 反之，体验精良的产品背后也可能仅存在一套不那么全面和复杂的小型设计模式库（我们将在第六章以 TED 的设计体系为例来介绍这种状况）。

协作是动态模式库的基石，即便协作的过程中可能出现一些不理想的状况，譬如只有一小部分设计师会真的用到模式库，或是由于团队之间的协作方式问题而导致库中存在很多缺乏一致性及内在关联性的模式，等等。即便是与生产版本保持一致的动态模式库，也仍然需要在团队当中进行诠释和沟通，以确保所有人都有着一致的认知；有时，正是这些诠释和沟通决定着设计模式库能否具有长久的实用性。

另一方面，模式库有时还会背负上“束缚创意，导致千篇一律”的罪名。而实际上，模式库所反射出的是其背后整个设计体系的风格。如果设计体系是严苛约束的走向，那么模式库就会体现并放大这一风格；同样，如果设计体系对于创意试验更具包容性，那么模式库同样可以表现出这一点，使创意型工作变得更轻松。

如今，市面上有着形形色色的设计规范自动化生成工具，构建组件库的工作会比以往更加轻松。然而，如果缺乏将模式库、组件库和实践方法进行统一整合的系统化机制，那么这些工具的作用就会变得非常有限。只有以坚实的设计语言为基础，模式库才能真正成为高效能的设计协作工具；否则，它将只是一套零零散散的模块展示而已。

如何定义设计体系的有效性

要衡量设计体系的效能表现，我们可以通过观察其各个组成部分能否有效协同促进产品目标的实现来进行判断。譬如，FutureLearn 的宗旨是“帮助每一个人实现终身学习”。我们会问自己，界面设计语言的定义能否有效地帮我们实现这一目标，团队对于模式库和设计规范的执行力又如何。如果最终的界面会给人们造成困惑，无法帮助他们实现学习目标，那么我们的设计语言就不是足够有效的；如果每次设计新页面时都需要从零开始制作各种组件，那么组件库及其实践方法就必须被重新定义。

若能增加设计流程当中的成本效益，同时有助于产品使用效率、满意度及整体体验的提升，那么我们可以认为设计体系是有效且成功的。

统一目标

在《系统之美》（Thinking in Systems）一书中，作者 Donella Meadows 认为，对于一个“系统”而言，最为重要的特质就是它的关联性与组织方式：若干子系统组成较大的系统，这些较大的系统又进一步成为更大的系统的组成部分；正如细胞组成了我们的器官，而诸多器官进一步组成了我们的身体。没有任何系统可以独立存在。我们的设计体系同样由若干子系统所组成，例如各类页面的布局模式说明，或是 logo 的规格标准及使用方式；同时，设计体系又从属于更大的系统，包括产品、团队、公司文化等等。

惠特尼美国艺术博物馆的“动态W” logo。这是一个简约却经典的、自成一格的可适性系统范例。其中的字母“W”会随着周围的图形或文字而动态变化，使布局更具灵活性。

在高效能的系统当中，各个子系统之间都是高度关联且目标一致的：设计的逻辑会体现在前端实现的架构当中，设计模式遵从于规范标准，设计语言特质在设计方案、代码及模式库中都会有着清晰的体现。这类系统的运作方式当中处处体现着和谐，包括高效的功能流程和一致的用户体验。

识别问题

问题往往是显而易见的。松散混乱的设计体系势必导致支离破碎的产品体验。我们希望用户订阅新闻邮件，希望用户了解新产品，希望他们完成所有的任务流程，希望他们为每一道菜打分；“序列”形式的组件在一个页面用来展示流程步骤，到另一个页面突然变成了 tab 导航；同一种按钮有着不同样式的多个版本，元素的阴影样式花样繁多。团队生产力也会受到影响：极小的迭代也会因为样式与代码的不统一而变得繁琐耗时；设计师们不得不忙碌于为相同的问题一次次地重新发明解决方案，无法将宝贵的时间用于理解目标与需求。

如何弥补漏洞、解决问题，使我们的设计体系更具效能？答案就是充分理解设计体系是什么，它的正确运作方式又是怎样的。接下来，让我们通过一个假想的“十分钟食谱”网站了解一下设计模式是如何随着新产品的诞生过程而逐渐成型的。

范例：十分钟食谱网站

设想我们正在创建一个食谱分享网站，目标用户是那些热爱健康食品但不想花费太多时间进行烹饪的人们。我们是否能够保持体系化的思维方式，在设计之初就对产品目标及有可能涉及到的设计模式有所洞见？应该如何起步？

在开始之前，可以假设我们对餐饮领域有所了解，并已经做过必要的用研工作以辅助设计决策。我们在这个范例当中主要关注的并非产品需要给目标用户带来怎样的体验，而是如何针对这个产品树立体系化的设计意识。

产品的目标与价值

我们首先需要了解目标用户是哪些人，他们的诉求和动机是什么。为了简化问题，我们假设已经明确了目标用户群体主要由忙碌的职场人士构成，他们的目标是无需在烹饪上花费太长时间便可以享用到美味健康的食品。有很多种方法可以实现类似的诉求，例如为他们联系厨师、将食品递送到家门口、帮他们打造一款会话式 app 等等。我们在这里选择创建一个十分钟食谱网站。

我们试着通过一句话来描述产品目标：激发和帮助人们用不到十分钟的时间制作一顿健康美食。这是产品的核心目标，需要团队内部充分消化并达成一致；任何设计与开发决策都必须符合核心目标的方向。

另一个关键要素是产品气质，也就是我们希望产品传达出的独特价值与理念。对于其他餐饮网站来说，这或许意味着“学习时尚高端的料理技术”；对我们而言，则是“快捷而健康的饮食”和“基于普通食材的试验探索”。

设计原则

为了确保产品目标能够清晰地贯彻在每一个设计决策当中，我们需要首先确立一些基本的设计原则。具体方式不拘一格，非正式的讨论或撰写声明文档都可以，最重要的是让项目相关人员产生一致的认知并确保执行。

例如，团队中的每一个人都应该充分理解“时间”的价值。“十分钟”是产品核心目标的重要组成部分，因此，设计师们必须努力追求简短、高效、顺畅的互动体验。这一原则不仅要体现在设计模式当中，同时也与网站性能、文案基调甚至是运营模式等诸多方面息息相关。

诸如此类的设计原则，重在全员认同，即每一个人的认知、效能及事项优先级都应该以这些原则为中心而保持同步。设计原则决定着每一个设计决策：从功能范围的界定、设计方法的选用，到架构与流程的规划、细节样式的处理，无所不包。

关键行为与功能性设计模式

我们需要识别出一系列最为关键的行为，以鼓励和帮助用户了解产品、实现目标。

我们希望人们更乐于选择快捷健康的家庭烹饪，而非快餐或微波炉速食。这意味着我们的食品看上去必须是美味和健康的，而且要比微波炉速食更加诱人。图片需要表现出难以抗拒的诱惑力，而食物本身要看上去够简单。
我们希望帮助人们在十分钟内完成制作过程。这意味着烹饪方法必须能以简单的几个步骤进行展示。整个流程要简短、清晰、易于聚焦。或许我们可以在每个步骤当中增加一个计时器，以表现对于“十分钟”的认真承诺。
我们希望鼓励人们的自发性，希望能让他们感知到在任何时候都可以轻松快捷地为自己准备一份健康的美味；用户可以充分利用自己手头的基础食材，而无需额外购买。在界面表现上，需要有信息明确、清晰易懂、易于选择的食材选项呈现给用户。
最后，我们希望用户更具创造力，能在烹饪当中享受乐趣。我们可以告诉用户哪些食材是可选项，哪些可以被替代，有哪些非常规的组合方式可以尝试。

当然，细节层面的功能与设计方案通常会随着项目推进而演变或深化，但这些关键行为在本质上不会发生变化，并且会始终决定着产品的功能性设计模式与交互方式，包括我们前面提到的菜品图片、食材选项、步骤序列、计时器等等。

视觉样式与感知性设计模式

另一方面，我们还需要考虑如何塑造产品带给用户的感知。简单务实，还是优雅迷人？严肃认真，还是轻松活泼？大胆率性，还是谨慎克制？追求实用，还是崇尚情怀？我们可以在界面中通过哪些风格元素来表现产品的个性与特质？我们需要站在品牌认知层面来进行考虑。

我们希望可以通过产品界面来体现出我们对于健康食品的热爱；或许可以试着营造一种“有机的”、“温暖的”、“健康的”感觉。我们同样相信烹饪并非一定要花费大量时间去规划和准备，而是可以变得自然而有趣，在十分钟的时间里充满创意性和试验性。

在这个阶段，我们可以通过情绪板（Mood Board）来尝试各种视觉表现形式，直到感觉到位（注）。接下来，我们可以开始定义最为核心的品牌识别元素，包括字体、配色、基调，以及任何具有显著品牌特性的、可以体现产品与服务本质的元素，例如插画、图片风格、特定的形状、独特的交互模式等等。

注：我们会在第四章详细讨论感知性设计模式的完整定义流程。

设想我们通过上述工作提取了一套温暖而朴素的色盘，定义了手绘风格的图标，以及清晰易读的字体、高质量的健康食品图片等一系列基础界面元素。这些都会成为我们的感知性设计模式。

工作语言

在上述过程当中，我们同时会对指代特定概念的工作语言进行规范。“食谱”的准确定义是怎样的？哪些状况下需要用到“步骤”的概念？“快捷愉悦”的交互方式涉及到哪些要素？我们用到的语言词汇会作用到团队的思维方式当中，进而对设计方案形成间接的影响。

初期，工作语言的定义可能是非正式的；但随着产品的发展与团队的扩大，语言标准也要逐渐变得规范起来。最终，我们将需要通过结构化的方式在设计团队内部对工作语言进行提炼、组织和共享。

经过以上几个方面的工作，设计模式库的整体框架已见雏形，我们的体系化设计思维模式也逐渐培养了起来。在接下来的若干章节中，我们将以现实当中的一些实际产品与团队为参考，对设计体系的构建与进化进行更加深入的了解。