设计体系

第一章 设计体系

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

知识架构

* 设计体系的定义与组成要素

* 设计模式

* 设计模式的意义

* 设计模式的类型

* 协作语言

* 设计模式库及其局限性

* 模式库的历史发展

* 模式库不是万金油

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

* 统一目标

* 识别问题

* 体系化思维方式的范例：十分钟食谱网站

* 分析产品的目标与价值

* 制定设计原则

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

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

* 统一协作语言

[第一章：设计体系](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619413&idx=1&sn=1efbc4b8c0e3cf300c6ee385e353680d&chksm=be49a586893e2c90cea436d1d7ce5c539435c34dee95dd4f21629d407f37ee7b80a4278573d9&scene=21#wechat_redirect)

读后记

设计体系是由基础元素组件和风格定义相互组成的，单纯的组件元素并不能很好的指引设计体系的建立。

第二章 设计原则

在本书中，”设计原则”特指可以帮助团队定义优秀设计的本质及实现方式的指导原则，也就是关于如何在你的团队与产品当中实现最优设计的标准化共识。

设计原则可以是宏观的，也可以是微观的，可以基于特定的产品项目，也可以具备长久的战略性，其具体形式取决于不同公司与团队的情况；最重要的是能否通过设计原则来有效地帮助团队塑造设计思维模式，把控设计方向。

知识架构

* 有效的设计原则具备哪些特质

* 详实可考

* 切实可行

* 观点明确

* 易懂易记

* 如何定义设计原则

* 以目标为始

* 寻求多方意见

* 聚焦于目标受众

* 测试与迭代

* 从设计原则到设计模式

* 原则决定着模式的选择与运用

* 模式是“单词”，“原则”是语法

* 模式的迭代会反向影响原则的进化

[第二章：设计原则](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619421&idx=1&sn=b0b0201c439d8ca15613f17423eee14c&chksm=be49a58e893e2c98f662e3dbe511b56371673fe3b1ae492ed1a012e40d34b29e9693b630cefb&scene=21#wechat_redirect)

第三章 功能性设计模式

功能性设计模式是产品界面的实体化组成要素，其存在目的通常是帮助用户完成特定的操作行为。目标决定着设计模式的功能作用，进而决定着其信息架构与实际呈现方式。充分理解设计目标，理解我们希望通过模式来鼓励怎样的关键行为，这将有助于我们定义更具健壮性与灵活性的设计模式；我们在基于现有模式扩展其承载内容的范围时，也可以更好的把握尺度，避免逾越其原本的设计目标。

知识架构

* 功能性设计模式的特质

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

* 如何定义功能性设计模式

* 创建设计模式地图

* 开展界面清查

* 从“行为”的角度理解设计模式

* 梳理信息架构

* 衡量模式的权重

* 将内容作为变量

[第三章：功能性设计模式](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619438&idx=1&sn=7c3be30614f7a7e7692218762398c652&chksm=be49a5bd893e2cab851a51f0098ebf3682d133f9388138ec0028dfb5aa4b38411c9264c125a9&scene=21#wechat_redirect)

第四章 感知性设计模式

产品界面设计中的感知性设计模式大致包括配色、字体、图片与图形风格、空间与布局、特定的形状、交互感知、动效、音效，以及所有对这些要素进行组合运用的特定方法。很多时候，我们会将所有这些要素视为产品最外层的表现风格或主题皮肤。但实际上，感知性设计模式根植于品牌核心层面，并且同样需要随着产品的发展而保持进化。清晰有效的感知性设计模式是构筑品牌差异化的重要手段。

知识架构

* 感知性设计模式有助于品牌特质的体现

* 感知性设计模式将局部连接为整体

* 探索感知性设计模式

* 情绪板

* 风格磁贴

* 元素拼贴

* 迭代与精进

* 在品牌风格与一致性之间寻求平衡

* 关于“标志性时刻”

* 小规模测试

* 在品牌风格与业务需求之间寻求平衡

* 团队练习：识别标志性设计模式

[第四章：感知性设计模式](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619472&idx=1&sn=b66057ec47cced9483cf57ad207138f7&chksm=be49a5c3893e2cd5b768e62f757e6a0792fa5bacf26aea3fd087090e199d151b60b8d79dc584&scene=21#wechat_redirect)

第五章 协作语言

如果一个界面元素没有经过恰当地命名，进而无法在团队内部形成统一认知，那么它就无法成为设计体系当中的一个具有实用价值的组成要素。通过命名，你便为某个元素赋予了用途。好的命名方式意味着高度聚焦，易于记忆，并能体现设计模式的目标用途，必须令设计师明白其所指，进而意图明确地进行使用。

知识架构

* 设计模式的命名方式

* 探索最适合团队的命名方式

* 好名字是基于隐喻的

* 好名字是有个性的

* 好名字可以体现目标用途

* 团队协作

* 建设贡献渠道

* 通过用户测试命名方式

* 在团队内部推广协作语言

* 命名规范的可视化

* 日常用语的标准化

* 纳入新人培训流程

* 定期同步

* 鼓励跨职能合作

* 编写词汇表

[第五章：协作语言](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619493&idx=1&sn=269a5b4a4151b68a0481539e0f743520&chksm=be49a5f6893e2ce0580ccb2668aa023bca7024fdccb1e21d372a33302c1ba02e3d567c49b2d9&scene=21#wechat_redirect)

第六章 设计体系的特质参量

设计体系并非以模式库的构建为始、为终，其背后有着一系列的影响要素，包括团队组织架构、团队文化、产品类型、设计流程等等。没有任何一套即有模式可以完美适用于你的团队。有时我们会觉得其他公司的设计体系实现得非常正确，进而尝试模仿。实际上，任何设计体系都有着各自的实现方式，而每种实现方式都有其利弊。最适于你的团队的实现方式，应该是你能充分了解并掌控其利弊的那一种。

知识架构

* 实践规则：严格或松散

* Airbnb

* 标准化规范

* 设计与开发的精准同步

* 严格的新模式入库流程

* 详实全面的设计文档

* TED

* 草图示意

* 简化的文档

* 了解利弊，选择方向

* 构造方式：模块化或整合化

* 模块化的优点

* 敏捷度高

* 成本效益高

* 易于维护

* 适应性强

* 效率高

* 整合化的优点

* 适用于特定类型

* 整体性与连贯性强

* 快速构建，无需考虑扩展与复用

* 流程聚焦，易协调

* 模块化与用户体验

* 建筑行业案例

* 模块化程度与项目特质

* 了解利弊，选择方向

* 管理机制：集中式或分布式

* 集中式

* 分布式

* 了解利弊，选择方向

* 小结

* Airbnb

* TED

* FutureLearn

* 哪类设计体系更适于你的团队

[第六章：设计体系的特质参量](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619520&idx=1&sn=ff18ca99008e62ce8da83949a2ddaba1&chksm=be49a513893e2c05d6abf53fdf2669e3de4245af3b4a50edd99aaed8a60939b46e183624ef94&scene=21#wechat_redirect)

第七章 前期规划与起步

获取高层的认同和支持并不容易。有些团队会从现有产品当中收集一批典型的不一致性问题，呈交给高层并提出变革意向；不过很多时候，这种方式还不足以令管理者们意识到改进的真实价值。

为了获取支持，你需要让高层意识到，一套行之有效的设计体系能够帮助公司以更高的效率、更低的成本实现业务目标。换句话说，你们需要将其作为商业案例进行演示。

知识架构

* 如何获取高层的支持

* 利益演示，量化对比

* 节省设计与开发成本

* 节省全局迭代成本

* 加快上线速度

* 统一品牌认知

* 建立品牌信任

* 提升协作效率

* 通过首轮产出争取资源

* 如何起步

* 确保目标清晰一致

* 界面的体系化定义工作

* 工作流程与管理机制的标准化工作

* 提升工作透明度

* 内部同步

* 博客

* 打造协作文化

* Slack

* 模式墙

* 新人培训

* 同步会议

* 跨职能合作

* 工作坊

* 游击宣传

* 保持团队动力

* 先主体，后精进

* 渐进与并行

* 如何培养体系化的思维模式

[第七章：前期规划与实践起步](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619600&idx=1&sn=6911ce62a8856649024c268c41e738c1&chksm=be49a543893e2c55bd84e1330d8063e21bd62b1cd4bb80a826f92e4dff0896e6a5e0a489b7c0&scene=21#wechat_redirect)

第八章 功能性设计模式的体系化

从用户历程的每个阶段当中识别出最为关键的用户需求与对应的行为，将它们解构为具体的任务，以此为分类标准将界面元素进行归类，并进行设计模式定义。你在第一次实践当中或许会被实际产品当中大量的界面元素及设计模式吓到。没关系，你无须一轮搞定全部；从关键行为所对应的核心设计模式入手，一次构建一个类别。最重要的是保持经常性的实践。

知识架构

* 目标导向的界面清查

* 界面清查的准备工作

* 时机

* 团队

* 打印页面

* 第一步：识别关键行为

* 如何识别

* 以界面为单位

* 以用户历程的不同阶段为单位

* 选择恰当的用词

* 解构关键行为

* 第二步：按照目标将元素归类

* 第三步：定义设计模式

* 考量特定化程度

* 梳理信息架构

* 第四步：为设计模式命名

* 从行为角度命名

* 体现复用度

* 重复上述步骤，逐步降低颗粒度

* 行为一致性

* 视觉层级

[第八章：功能性设计模式的体系化](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619638&idx=1&sn=9682497835940347c28761fdfe615b39&chksm=be49a565893e2c7353423cf5366096e40e1e79eb593f99dbef584e20f1f0c73bb983e0c1f0fe&scene=21#wechat_redirect)

第九章 感知性设计模式的体系化

每一类感知性设计模式都相当于一个独立的小体系，例如”字体体系”、”栅格体系”、”配色体系”等等；它们之间又是互相关联的，并共同作用于更大的目标：塑造产品的感知与体验。因此，在定义感知性设计模式的时候，我们同样需要从较高的层面入手，首先捕捉产品的外观特质，并识别有哪些要素可以体现特定的产品特质，然后通过一系列步骤完成每一类风格要素的定义，包括分析目标、元素清查、定义设计模式和规范使用方式。

知识架构

* 仅定义属性是不够的

* 识别外观特质与标志性设计模式

* 定义感知性设计模式

* 配色

* 交互状态

* 动效

* 字体

* 栅格边距

* 图标风格

* 形状与边框样式

* 插图

* 图片

* 语气基调

* 音效

* 范例：定义配色

* 分析目标

* 配色清查

* 定义设计模式

* 凝练

* 规范使用方式

* 范例：定义动效

* 分析目标

* 动效清查

* 定义设计模式

* 凝练

* 规范使用方式

* 范例：定义语气基调

* 语气基调清查

* 定义设计模式

* 规范使用方式

[第九章：感知性设计模式的体系化](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619689&idx=1&sn=88c7b36e3d0154b78f49e5c884595240&chksm=be49a4ba893e2dac9868cca24e2cd5a62eae50b7e15457959dcc687a12cfc067daaa28c773bf&scene=21#wechat_redirect)

第十章 设计模式库

作为辅助工具，设计模式库必须融入团队的自然工作流程。只有这样，人们才能发挥更大的主观能动性，更多地参与到设计体系的贡献当中。随着工具的越发强大，模式库与体系化的设计流程将能更加深刻而持久地影响到设计师与工程师的工作方式。很多团队已经开始看到变化，一些过去需要几天时间的项目在如今仅需几分钟就可以完成设计输出，再无需一遍遍地重新发明解决方案或是进行繁琐的标注。设计师的时间可以得到极大地解放，从而能够将更多精力用在更重要、更有意义的问题当中。

知识架构

* 原始内容

* 设计模式的组织方式

* “组件”与”风格”

* 功能性设计模式的组织方式

* 按字母排列

* 按颗粒度层级排列

* 按目标排列

* 设计模式文档

* 功能性设计模式的文档化

* 名称

* 目标

* 范例

* 变体

* 版本信息

* 相关人员

* 相关模式

* 感知性设计模式的文档化

* 描述使用方式

* 跨类定义

* 描述风格元素之间的关联

* 工作流程

* 新模式入库流程

* 新模式入库条件

* 团队与权责

* 齐头并进

* 工具

* 保持模式库的同步更新

* 保持设计主文件的同步更新

* 将模式库作为”真理之源”

* 设计模式库的未来

* 结语

[第十章：设计模式库](https://mp.weixin.qq.com/s?__biz=MjM5MDc0MDIyMA==&mid=2650619702&idx=1&sn=6ca974d90fbc091fa210dad974ec3d75&chksm=be49a4a5893e2db315d0faa6b3a2e02fe71a09a230a7ba638d8f35b2d8939c2e512165407702&scene=21#wechat_redirect)