书引

《设计体系：数字产品设计的系统化方法》作者研究过各类公司建立设计体系的经验，向我们展示了如何通过构建设计体系以支撑数字产品的设计，在符合团队文化的基础上，确保设计体系能够帮助实现产品目标。

本书面向的读者：尝试将设计体系融入组织中的中小型团队

△ [英] 阿拉 • 霍尔马托娃，2019

本书简介

「 应当先做设计再出规范，还是先出规范再做设计？」

「如果老板的意见与设计师自己的想法相左，设计师应该坚持己见吗？」

这些都是工作中常常会遇到的问题，它们很难被彻底解决，为了改善它们，一些优秀的设计团队开始以更为系统的方式展开设计工作——构建一套设计体系。谈到设计体系，最容易想到的是各种控件组成的 library，但这些仅仅是设计模式或者说是样式指导，我们需要将其纳入更大的体系之中，让这些模式之间紧密相连，形成一个整体，以确保设计体系能够有效帮助实现产品目标。

建立设计体系的优势：

• 通过清晰的设计语言，明确产品调性
• 提高设计决策、设计与开发沟通的效率
• 让团队更加稳固

如果你对设计体系的理解还不是很清晰，可以先看看下面这些成熟案例：

1. 平台级设计体系

APPLE 的 Human Interface Guidelines：
https://developer.apple.com/design/human-interface-guidelines/

Google 的 Material Design：https://material.io/

Microsoft 的 Fluent Design System：https://www.microsoft.com/design/fluent/

2. 公司级的设计体系

Atlassian 的设计体系：https://atlassian.design/

IBM 的 Carbon 设计体系：https://www.carbondesignsystem.com/

蚂蚁金服的 Ant Design：https://ant.design/

设计体系

何谓设计体系，从设计实践的角度来说，它包含三个层级：

第一层级：组件库

界面中所有被复用的组件。比如按钮、文本框、标签页等，指导设计师及前端工程师高效开展工作。

第二层级：设计语言

设计语言是将产品塑造得独特且风格统一的一套法则。组件库仅仅提供了对同一类元素的约束，缺少不同类元素之间的联系。而通过设计语言，你可以明确元素之间的结构关系。

优秀的产品都会打造属于自己的设计语言，统一自身的风格且区别于其它产品。比如很多优秀的产品，剥离开它的 Logo，你依然能看出这是它的产品。

△ 反例——前一秒多么炙手可热，后一秒就多么朴实（图例来自知乎小螳螂品牌服务机构）

△ 认出是哪款车了嘛

△ 特色白

第三层级：设计体系

组件库和设计语言定义了产品该是怎样的（what&how），却没有说明为什么是这样构建和定义的(why)？设计体系则包含以下内容：设计目的、设计原则、组件库、样式指南，以及设计与开发的工作流程的实用工具。它是构建设计语言和设计模式的底层基础。

书籍概述

全书共分为两个部分。

第一部分讨论设计体系的基础——模式与实践。

模式指的是可复用的元素，它们之间相互关联，构成了界面的设计语言。

实践则是指创建、使用和共享这些模式的方法，比如确立一个使用原则和构建一个模式库。

第二部分侧重于阐释建立和维护设计体系的实际步骤和实用技术。

规划任务，编写界面清单，建立模式库，以及创建、记录、发展和维护设计模式等。

设计体系不是一夜之间就构建出来的，而是通过日常的实践逐渐形成的。为了让这个体系在团队中运行更有成效，我们需要理解它是如何运行的，它包含什么，出现问题的原因是什么，而团队的组织架构、企业文化、设计方式等都会影响设计体系。

第一部分要点概述

第一部分的要点：设计目标、设计原则、共享设计语言、建构设计模式。

1. 目标

建立设计体系的目的是为了实现产品的目标。

无论是团队的运作方式或是设计模式，都应该针对这个产品目标进行设计与优化。

高效的设计体系中，不同的子体系会因为同样的目标而相互连接，协调一致，如果设计体系发生割裂，会导致用户体验的割裂。

2. 原则

坚实的原则是任何设计体系得以良好运转的基础。

不同公司有着不同的原则，有的侧重于品牌，有的侧重于团队文化，有的侧重于设计流程。设计原则很可能只适用于某一段时期或特定项目。

如何制定有效的设计原则：

• 从目的开始。设计原则必须遵循产品的目的，传递产品的精神。
• 寻找共识。如果是在定义阶段，让团队成员各自回答关于设计原则的问题，从中寻找共识，确立优先级。
• 设计原则的描述要真实且贴切，实用且可操作

模糊的设计原则：明确

实用的设计原则：「第一优先级只有一个，什么是你希望用户最先看到的或最先用到的」

模糊的设计原则：简单

实用的设计原则：「把界面做到牢不可破，就像儿童玩具一样，确保用户可以随意探索，不会因为错误操作而崩溃。」

模糊的设计原则：有用

实用的设计原则：「从需求开始，去做调研、去分析数据，去与用户交流，而不是做假设。」

3. 共享设计语言

设计模式需要通过设计语言连接起来，语言是协作的基础；

设计语言是整个团队为了打造有效而统一的用户体验而建立的，团队成员对于实现目标会有着相似的心智模型，才能更有效地进行设计创造。团队成员不仅要对语言形成共识，还要对语言的用法形成共识，包含如何创建模式以及使用设计模式的方法和原则。

建立设计语言的好处在于，它可以让我们较少地关注模式，而更多地关注用户，通过有效的设计语言弥合系统模型与用户模型之间的差距。

在确定设计语言的时候需要注意，要确保你的设计语言，可操作，可重现，见下图。

△ Tom Osborne的「视觉音量指南」

具体实践：

• 让团队成员清晰理解品牌愿景，将设计体系作为入职培训的一部分
• 共享（在团队内宣贯及培训）设计方法、前端架构
• 细化工作细节：比如设计与开发统一命名；打造典型的界面库；定期进行模式库的更迭与维护

4. 设计模式

设计师常遇到的问题是，如何将高层次的概念，比如设计原则、品牌价值等，物化为具体的用户界面元素。其实关键在于建立一种「优先级」的意识，比如对于 TED 来说，信息的清晰比美观更重要，因此在界面设计上，我们可以看到它们选择了更容易容纳长标题的布局方案，而没有妥协于美观度选择文字截断的方式。

△ TED网页设计

我们设计界面的目的有两个，实现某种目标以及创造某种感受，因此会产生两类模式，功能性模式和感知性模式。

功能性模式

功能性模式是界面中有形的组件，帮助用户或者激励用户完成某种行为。它的执行、内容、交互方式和显示效果可能会变，但是它所鼓励的核心行为保持相对稳定。团队需要充分理解模式的目的，才能确保它和用户的预期一致。

感知性模式

感知性模式则更像样式，它用来描述组件是什么类型的，给人的感受如何。比如两套结构相同的房子，传递出来的感受可以千差万别——一个温柔居家一个冰冷工业风。感知性模式可以让系统更为连贯，好的设计体系能够在品牌的一致性、创造性表达以及业务需求之间取得平衡，设计师无需过于拘泥于一致性。

由于数字设计已发展多年，大多数的设计模式都已打造成型并为人所熟知，设计师无需在此花费太多时间。如今，设计师和开发人员都希望建立动态的模式库，包含设计模式及其对应代码，见下图为 ant motion 的动态组件库。

△ ant motion动效组件库

具体的实践方式将在第二部分进行详述。

欢迎关注作者微信公众号：「二楼自习室」