《设计体系：数字产品设计的系统化方法》阿拉.霍尔马托娃_2019

第1章 设计体系

1.1 设计模式

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

1.2 共享语言

1.3 模式库

• 动态模式库
  • 构建动态模式库需要更好的协作。如果团队之间缺乏沟通，很可能导致只有一小部分人在用它，或者产生大量彼此割裂的模式
  • 如果能保持更新，模式库便可以成为共享语言的词汇表
  • 这并不意味着不必再对其进行解释说明。那些有关如何对模式进行解释的讨论，常常是决定模式库成败的关键
• 即便是最为全面的动态模式库，也不能称作设计体系。它只是有助于设计体系变得更加有效的一种工具
• 如果没有一套连贯的、集成了模式和实践的设计体系作为基础，这样的组件库的影响将十分有限。只有将模式库作为构建坚实的设计语言的基础，它才会成为强大的设计工具和协作工具。否则，它就只是网页上模块的集合而已

1.4 构建有效的设计体系

• 产品目的：只有当设计体系围绕产品目的，综合了设计过程中的成本效益及用户体验的效率和满意度时，它才是有效的
• 共享目的：在高效的设计体系中，不同的子体系为了同样的目的而相互连接，并协调一致：设计方法在前端架构中得到反映；设计模式遵循指导原则；模式语言在设计、代码和模式库中得到一致的应用。这些子体系运转得相当和谐：它们的工作流程更高效，用它们创造出的用户体验更有意义，也更连贯
• 识别问题：割裂的设计体系导致了割裂的用户体验，以及充满矛盾的界面

1.5 案例：“十分钟食谱”网站

• 目的和价值观
• 设计原则
  • 为确保我们所做的所有事情都清晰地体现了产品目的，我们需要建立一些基本原则和价值观
  • 可以非正式地讨论，也可以写下来形成宣言
  • 重要的是参与产品创建的人都认同这些价值观，并承诺实践它们
• 行为和功能性模式
  • 我们确定了希望用户实现或让用户有能力实现的主要行为，这会帮助用户实现他们的目标
  • 设计的细节固然会随着网站的改版而变化，但上述关键行为将始终保持不变
  • 这些行为足以体现网站的核心功能模块和交互方式：食材缩略图、食谱卡片、分步序列、计时器等
• 审美和感知性模式
  • 我们需要弄清楚，我们希望人们在使用十分钟烹饪食谱网站时有什么感受
  • 我们可以将一些情绪和感觉写下来，并开始尝试一些视觉效果，直到品牌的感觉符合预期
  • 之后我们可以开始定义核心视觉品牌元素，例如排版、配色、说话的语气语调以及任何表现品牌独特性的元素。如插图、图片样式、特定形状、独特交互等，这些都能体现我们服务的本质，并能以最佳方式呈现内容
• 共享语言
  • 我们需要用一种更加结构化的方式来捕获、共享和组织我们的设计词汇表

第2章 设计原则

• 我们如何确保产品的目的在设计中得到体现呢？那就是建立一套基本的价值观和原则

2.1 有效设计原则的特性

• 设计原则指的是包含团队如何理解好设计之精髓，以及如何体现这一精髓之建议的共享指南。换句话说，就是让你的机构或你的产品，对于什么是好的设计，有一致的标准
• 让设计原则具备下述特性需要大量的时间、精力和团队合作，但这是值得的，因为设计原则是设计体系的核心所在

真实而贴切的

• 指出你的产品应该是有用的、令人愉快的，这对你做设计决策没有多大帮助，因为这些特性可以用不同的方式来解释。弄明白这些词对你的团队和你的产品究竟意味着什么，才是对做设计决策有帮助的
• 好的设计原则所定义的特性能以不同方式解读，但会将其放在特定的产品背景之下

实用的、可操作的

• 如果想让设计原则更为实用，就不要让它们成为只是听起来不错的东西，而应该提供可操作的建议

模糊的设计原则：“明确。”
实用的设计原则：“第一优先级只有一个。什么是你希望用户最先看到的或最先用到的？”
模糊的设计原则：“简单。”
实用的设计原则：“把界面做到牢不可破。就像儿童玩具一样，确保用户可以随意探索，不会因为错误操作而崩溃。”
模糊的设计原则：“有用。”
实用的设计原则：“从需求开始。如果你不知道用户需要什么，就无法做出正确的事情。去做调研，去分析数据，去与用户交流，而不是做假设。”

有观点的

• 即使需要考虑一些相互冲突的因素，好的设计原则也能帮我们确定优先级和平衡点
• 承认价值观的冲突，并给出平衡它们的建议，这是很有用的
• 好的设计原则不会试图涵盖一切。它们有态度，并积极地鼓励设计师拥有自己的观点

能产生共鸣、容易让人记住的

• 可以做一个有趣的试验：问问你公司里的人，你们的设计原则有哪些。如果没有人记得那些原则，那么它们多半是值得改进的
• 持续使用的原则才容易让人记住。它们应当在日常对话中经常被提及，在演示文档和设计批评中经常出现，在一切能用到它们的地方显示出来
• 设计原则的最佳数量——如果你想让它们被用起来的话——是三到五条

案例

• Salesforce公司的Lightning设计体系的原则：清晰、高效、一致、美观
• Airbnb公司的四条设计原则：统一、通用、风格化的、对话式的
• Spotify公司：TUNE；语调、易用、必要性、情感化

2.2 定义原则

• 从目的开始（公司的价值观或产品的愿景）
• 寻找共识
  • 各自给出原则
  • 让他们为每一条设计原则找一个产品界面实例
  • 重叠
• 面向正确的受众
  • 应该首先为自己和同事而写，尤其是设计师、开发人员、内容编辑、营销专家、领域专家，也就是与产品的创建直接相关的人员
  • 你们的目标应该是就“什么样的设计对你们的产品来说是好设计”这一问题达成粗略的共识，并提供如何实现共识内容的实操指南
• 持续对原则进行测试、评估和改进
  • 随着产品不断演进，设计原则也会不断发展。设计原则会塑造设计语言，反过来设计语言也会影响设计原则
  • 只有在日常工作中使用它们，并有意识地这样做，设计原则才得以持续改进
  • 将设计原则作为设计批评的一部分，就能不断地测试它们是否对设计有帮助，如果没有帮助，就继续迭代

2.3 从原则到模式

• 模式的选择与运用以及对模式的独特组合，都受产品的目的、精神和设计原则的影响。可以将设计原则视为创建模式并以具有内在意义的方式组合它们的语法规则

第3章 功能性模式

• 功能性模式是界面中有形的构件。它们的目的是让用户能够完成某种行为，或者激励用户完成某种行为
• 在设计过程的开始阶段就阐明模式的目的，能避免在产品发展过程中做重复性的工作

3.1 模式演变，行为不变

• 模式是我们试着通过界面，让用户能够完成某种行为或激励用户完成某种行为的物理体现
• 模式的执行、内容、交互方式和显示效果可能会变，但它们所鼓励的核心行为保持相对稳定，因为这是植根于产品目的及其工作原理的
• 牢记关键模式的目的，有助于了解设计体系的运转方式，防止设计体系在发展过程中碎片化
• 如果不在团队中定义并共享模式，就会为相似的目的反复构建新的模式

3.2 定义功能性模式

创建模式映射

• 我们需要将用户行为与鼓励或支持这些行为的确切模式关联起来
• 要了解你的模式如何适应更大的图景，请试着将一些核心模块映射到用户轨迹的各个部分

打造界面清单

将模式视为操作

• 要理解一个模式的目的，需要关注它的作用是什么，而不是你认为它是什么。换句话说，要试着找到最能描述其行为的操作。用动词而非名词来描述模式，有助于扩展模式的潜在用例，并更准确地定义其用途
• 如果根据操作——从用户角度及你自身的角度——来定义模式，便可以发现它的目的：“推广课程”（对你而言）/“发现课程”（对用户而言），“从课程中受到启迪”（对用户而言）/“鼓励人们加入课程”（对你而言）

描绘模式的内容结构

• 要对模式的工作方式达到共识，请描绘其结构：让模块能够有效运行的核心内容
• 接下来，试着确定元素的层次结构，并决定如何对它们进行分组（专注于模块内容结构、元素层次结构和分组的草图）
• 一旦对模式的结构有了共识，就很容易确保模块的设计方式反映在标记中

按某个维度排列模式

• 可以试着将相似的模式按照某个维度排在一起
• 在某个维度上排列模式有助于确保对它们的使用是恰当的，不会在整个系统中争夺注意力。这样做还有助于防止不必要地重复创建模块

将内容视为假设

• 悖论：我们希望设计是内容优先的，同时又希望建立足以适应任何类型内容的模块
  • 为了解决这一问题，一种方法是，不一定从内容开始，而是从目的开始
  • 这样，我们便不会将内容视为已知的资源，而是视为一种假设（hypothesis）
  • 这样做能检测出我们是否已经定义好了模块的目的，以及我们的设计是否符合这一目的
• 内容总是不能匹配模式的原因
  • 我们没有正确地定义模式的目的。请试着重新去理解模式是用于支持哪些行为的
  • 我们设计模式的方式并不是最能反映其目的的方式。请为此模式尝试其他的设计
  • 我们试图将内容强行放入不合适它们的模式。请考虑修改内容，或尝试其他模式
• 如果我们的工作从一开始就没有考虑目的和结构，最终我们得到的模块就会与内容联系太紧密
• 目的决定了其他的一切：模式的结构、内容及呈现。了解模式的目的（也即了解需要达成或激励的行为），可以帮助我们设计和构建更加稳健的模块

第4章 感知性模式

• 数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画，以及这些要素在界面中的组合和使用的具体方式

4.1 感知性模式的作用

• 传递品牌形象
• 让系统更为连贯

4.2 探索感知性模式

• 如果说功能性模块反映的是用户需要且想要的内容，那么感知性模式关注的则是他们直观的感受或行为
• 最终的目标是得到一些最能表现你品牌的特征以及需要避免的特征
  • MailChimp：有趣，但不幼稚；好玩，但不傻；强大，但不复杂；时尚，但不异类；灵活，但不随意
• 常用工具
  • 情绪板
  • 样式叠片
  • 元素拼贴

4.3 迭代与改进

• 在品牌发展的概念阶段，重要的是拓宽视野，而不是担心细节。但当我们开始将概念落实的时候，就必须对它们进行改进，以适应它们所处的新环境。这时工作的重点便从开放式探索转向了精细化、一致化
• 当你专注于产品一致性的时候，打造产品质感的一些重要的细微之处就有可能会丢失
• 如果一个设计体系过分追求完美的一致性，那么它就会变得普通、僵化。发展感知性模式需要为设计师赋予打破常规的权力，鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡
• “标志性时刻”用于指代那些让产品有差异化的小交互，例如优雅的加载动画或吸引人的声音，如果标志性时刻是有含义的或者背后有故事的，它们就会显得尤其强大
• 小的细节可以为用户体验增加深度和意义。当我们为设计的系统化和结构化努力的时候，需要留意那些能让产品与众不同的细节。在构建设计体系的时候，一定要为创造和发展这些时刻而留足空间
• 我们如何为创造性探索留空间呢？我们如何将新的样式引入设计体系呢？先进行一些小规模的试验是一种相当有效的做法
• 平衡品牌和业务需求

4.4 标志性模式：团队练习

• 让每个人写下产品中最独特的感知性模式。鼓励他们超越配色、字体这一层次，考虑更高级别的针对品牌的原则、组合和处理方式。不仅要想到元素，还要考虑到它们背后的含义——它们描绘的图景和讲述的故事
• 对比团队各成员的想法，可以看出你对品牌的认知。这些特性起初可能有些含糊，但它们是讨论的重要基础。对最为独特的感知性模式达成共识，是未来将它们体系化的有用起点

第5章 共享设计语言

5.1 为模式命名

5.2 将团队融入设计语言

• 让设计模式变得可见（模式墙/网址）
• 将设计体系作为入职培训的一部分（线上课程/小测验）
• 定期组织设计体系会议
  • 产品的总体模式（如图标、排版）得出一致意见
  • 分享新模块并讨论其目的、用途及可能遇到的问题
• 鼓励多样化协作
• 尽可能地尝试将模式的设计和构建与其他领域结合，并建立共享的设计语言
• 维护一份术语表
• 一个更新及时、易于访问的模式库

第6章 设计体系的参数

• 设计体系的构建不是从建立模式库开始的，也不会因模式库的建成而结束。影响设计体系的因素有很多，如组织架构、团队文化、产品类型、设计方法等
• 以下三个维度去分析设计体系：规则的严格程度、部件的模块化程度、组织的分散程度

6.1 规则：严格或宽松

Airbnb

• Airbnb的设计体系是很严格的：它有精确的规则和流程，并且要求严格遵守
• 该公司的设计体系完全是由其设计语言体系（DLS）团队管理
• 标准化的规范
• 设计与工程完全同步
  • 主Sketch文件里的设计模块与代码实现完全相同，并保持同步
  • Sketch文件里的名称与代码中的名称是匹配的
  • 所有模块都是跨平台的
• 严格的引入新模式的流程
• 全面详尽的文档
  • 该指南是由主Sketch文件生成的
  • Airbnb的工具团队构建了一个自动化工具，可以用它自动生成组件的屏幕截图和元数据，并将其发布到DLS指南的网站

TED

• TED的设计体系是很松散的。他们优先考虑的是品牌的感觉和页面的实用性，而不是完美的视觉一致性
• 做正确的设计，而非一致的设计。优先考虑的应当是把页面本身做到最好。为此我们不断地改进页面，以期达到最佳效果。不应该用教条式的一致性和已有的模式去驱动设计决策
• 简单的草图胜过详尽的规格说明
• 简单的文档
  • 没有全面的模式库，而是在网页和Sketch文件中有一个简单的样本集合，这里面包含了一些核心的设计模式，但绝非全部
• 让这样的设计体系保持有效的原因并不是严格的规范和流程，而是深深植根于团队文化中的共享的设计知识。该团队的成员对其产品愿景（“尽可能广泛地传播思想”）和设计方法的认识是完全同步的。模式的设计均遵循共同的原则（如“追求永恒，而不是追求潮流”），而他们对这些模式的目的及其用法也有着深刻且一致的理解。这种共享的知识才是该设计体系尽管松散却仍保持有效的基础

6.2 部件：模块化或集成化

6.3 组织：集中式或分散式

第7章 规划与实践

7.1 获得高层的支持

• 获得高层的支持与资源的投入并非易事。有的团队一上来就开始收集产品里视觉不一致的现象。一张表现按钮样式不一致的图片有可能让人信服，但并非总是能让CEO或其他上级看到你提议的价值
• 想要获得业务的支持，你需要证明，有效的设计体系将有助于更快地实现业务目标，并降低成本。也就是说，你需要准备一个商业案例
• 在为设计体系准备议案的时候，成功的关键是证明低效带来的成本并将其量化
• 常见的好处
• 在设计和构建模块时能节省时间
  • 用数据表示效率低下所带来的成本，通常是获得高管支持最为有效的方式
• 在做整站修改时能节省时间
• 让产品更快上线
• 品牌统一
• 视觉一致性
• 团队协作
  • 哪怕只是简单地将组件归集到一个地方，就能看到整个团队设计师生产力的提高

7.2 从哪里开始

就目标达成一致

• 你希望通过这项工作取得哪些主要成果？拥有明确的目标能为团队指明方向，提供动力。这对他们组织排期和平衡优先级也是有帮助的。目标应当拆解为具体的、可测量的步骤
• 拥有明确的目标和里程碑也有助于管理公司其他部门的预期。设计体系是一项长期投资——其价值随着时间的推移而逐渐增加。人们希望看到渐进的、稳定的发展，而不是大起大落的变化
• 将界面系统化
  • 定义设计指导原则
  • 定义可复用的设计模式并将其标准化
  • 建立模式库
  • 建立主设计文件，收集最新的模式
  • 重构代码和前端架构，以支持模块化的方法
• 建立共享的流程和治理
  • 通过沟通、协作、结对子、培训等方法，建立知识共享的流程
  • 在整个公司推广模式库，鼓励大家使用
  • 面向所有部门推广共享的设计语言
  • 在入职培训中引入对设计体系的介绍

将成果公开

• 那些愿意公开一些设计体系工作成果的团队，往往比那些把一切都保密的团队进步得更快
• 撰写博客。如果不仅能讲述你们的成功之处，还能把你们犯下的错误、遭遇的困难和改正的方法写出来，这项工作就会尤其有用
• 以开放、诚实的心态记录工作上的进展，是让团队不断学习和保持工作积极性的有效方式

创造知识共享的文化

–参考第5章

提升团队士气

• 设计体系的工作是一个长期的过程。在某些时期，你的团队可能看不到所做工作的回报
• 为了避免产生总也做不完的任务列表，可以先一次性完成大部分工作，再把剩余的任务当作持续性的工作。可以让团队快速完成初始阶段的工作，并对余下的工作保持动力
• 可以先让一个小组做好基础工作，再根据需要让其他人参与进来

7.3 关于设计体系实践的思考

第8章 功能性模式的系统化

8.1 目的导向的清单

• 本章所描述的过程，其主要目标不是解决视觉一致性的问题，而是定义最核心的设计模式，并在团队中形成关于如何在整个系统中使用这些模式的共识
• 我们按目的（即体现设计意图的行为）对它们进行分组

8.2 准备工作

• 最有效的时间是在基础用户体验工作（包括用户研究、内容策略、信息架构及设计方向的确定）做完之后
• 设计师和前端开发人员的参与是至关重要的，理想情况下还应该包括后端开发人员、内容管理人员和产品经理
• 理想的小组规模为4～8人
• 找出你的产品中最重要、最不可或缺的界面和用户流程。通常，10～12个界面就够了，有时甚至更少。它们可以是设计原型，也可以是现有界面的屏幕截图

8.3 确定关键行为

• 确定用户轨迹每个阶段中的关键用户需求和行为
• 将行为分解为操作

8.4 按目的对现有元素进行分组

8.5 定义模式

• 具体性尺度
• 内容结构
• 命名

8.6 在更小的维度上重复目的导向的清单过程

• 操作的一致性
• 视觉层次

第9章 感知性模式的系统化

9.1 超越样式属性

• 仅仅把一组颜色值共享出来是不够的，还需要共享不同的环境下的颜色的用法
• 仅仅把不同的字号列出来也无法提升排版的质量，我们需要针对排版提供清晰明确的使用指南
• 对于功能性模式，我们先关注用户行为。对于感知性模式，我们将从美学特征入手

9.2 美学特征与标志性模式

• 如果想让整个团队（不仅是设计师）都聚焦到一个页面，不妨从标志性模式[插图]的创建开始做起
• 让团队里的每个人写下影响产品感观的最令人难忘、最独特的元素
• 团队成员一起寻找标志性模式，能为整个感知性模式的创建过程提供指导和灵感

9.3 识别感知性模式

• 样式种类
  • ❑ 配色❑ 交互状态❑ 动画❑ 排版❑ 间距❑ 图标样式❑ 形状和边框❑ 插图❑ 照片❑ 语气和语调❑ 音效
• 将其系统化
  • 从目的开始
  • 收集现有元素并对它们进行分组
  • 定义模式和模块
  • 形成统一的指导原则
• 很难一次性处理完所有的样式，每个类别都需要有各自的界面清单。如果后续出现界面上的改动，可能还需要花一些时间将这些变化集成进来

9.4 配色

从目的开始

• 需要表述得更明确一些。例如，颜色可以用于：
  • 显示不同类型或不同层级的文本（正文、标题、块级引用等）
  • 突出显示链接和操作（主要CTA、辅助性CTA、链接等）
  • 提请注意消息，并区分不同类型的消息（确认、警告等）
  • 将内容隔开，突出显示重点内容（通过背景、边框等）
  • 区分不同类型的数据（图表、图形等）

收集现有颜色并分组

• 类型，实例，值，感觉

定义模式

• 根据颜色的目的（甚至感觉）来定义其用法的模式
• 不必急着确定十六进制的颜色值，重要的是对界面上颜色的用法达成一致
• 理解标志性模式可以帮你找到改变的平衡点，确保现有的美学特征不会被弱化
• 如果你的目标是对当前设计进行改版，那么改版工作就需要在对模式进行系统化之前完成

指定模块

• 这一步的目标，是增加配色的集中度、准确性和可访问性。通常来说，这意味着要减少每种颜色的变体的数量
• 仅从需要的开始
• 确保颜色对比度的可访问性：有必要测试文本颜色和背景颜色的对比程度。根据需要调整或删除颜色值，限制颜色的数量

就指导原则达成一致

第10章 模式库

• 根据我采访过的团队的经验，跨领域的模式库具有更强的韧性和持久性。这样的模式库能推动整个组织共享语言，并为每个人带来价值。相反，只为满足一个领域的需求而构建的模式库则更为脆弱

10.1 内容

• 可以使用协作文档工具进行简单的记录

10.2 模式的组织

–如何分类

10.3 模式文档

为功能性模式编写文档

• 名称
• 目的
• 示例（含视觉示例和代码示例）
• 变体
• 其他
  • 组件的版本控制
  • 团队成员
  • 相关模式

为感知性模式编写文档

• 指定用法，而不仅是构件本身
• 交叉引用样式
• 显示元素之间的关系

10.4 工作流程

• 添加新模式的过程
  • 提交，讨论，编写说明
  • 新模式加入后自动推送到团队所有人前面
  • 定期评审
• 引入新模式的标准
  • 只有当元素被复用时，才会被添加到模式库里
  • 每个新元素都会自动地添加到模式库里
  • 也可以根据复用的可能性来做决定
• 人员与责任
  • 审校者
  • 制作者
• 统一设计体系的各个方面
  • 代码、设计和模式库是设计体系的不同方面。兼具这些方面的设计体系会更加稳健，因为这样的设计体系涵盖了多种角度的内容
  • 但这并不意味着模式在这些方面必须完全同步。重要的是团队在各个方面都采用相同的方法——命名、结构、对目的的理解

10.5 工具

• 保持模式库的更新
• 保持主设计文件的更新
• 将模式库作为求真来源
• 模式库与主设计文件的自动同步工具

10.6 模式库的未来

• 工具应该能适应整个团队的自然工作流程。只有这样，团队里的每个人才会具有主动性，大家对模式库的贡献才会更加均匀
• 未来的模式库可以适应跨领域的工作流程