内容简介

产品经理和设计师需要懂技术吗？开发人员需要懂设计吗？

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

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

针对这类问题，先进的互联网团队已经逐渐形成了一套新的方法论——设计体系（design system）。设计体系是指产品团队内部形成的用于指导其设计工作的一系列共享的最佳实践。本书告诉你如何在团队里建立一套通用、共享的语言，从而让团队成员得以有效地开展合作。

“《设计体系》是给所有设计师和设计团队的宝贵参考。本书旨在帮助你打造卓越的数字产品体验，内容丰富且引人入胜。从阐释‘设计体系’这一概念的角度来看，还没有一本书能如此立体而生动。”——Jon Bell，Netflix高级产品经理

“在团队或组织中建立一门通用语言，能大大减少内部成员间的沟通成本。如果你正有此意，那么本书中关于设计语言的讨论值得一读。”——Bethany Sonefeld，Cloudflare高级产品设计师

“构建设计体系不仅涉及技术解决方案，还涉及建立人与人之间的联系。它包含了难题的解决之道，并为团队齐心协力实现共同的愿景开辟了道路。这就是本书内容的高明之处。”——Amy Thibodeau，Shopify UX设计总监

作品目录

第一部分　基础
第1章　设计体系 2
1.1 设计模式 4
1.2 共享语言 9
1.3 模式库及其局限性 11
1.4 构建有效的设计体系 15
1.4.1 共享目的 16
1.4.2 识别问题 17
1.5 案例：“十分钟食谱”网站 17
1.5.1 目的和价值观 18
1.5.2 设计原则 18
1.5.3 行为和功能性模式 19
1.5.4 审美和感知性模式 20
1.5.5 共享语言 21
第2章　设计原则 22
2.1 有效设计原则的特性 24
2.1.1 设计原则是真实而贴切的 24
2.1.2 设计原则是实用的、可操作的 25
2.1.3 设计原则是有观点的 27
2.1.4 设计原则是能产生共鸣、容易让人记住的 28
2.2 定义原则 29
2.2.1 从目的开始 29
2.2.2 寻找共识 30
2.2.3 面向正确的受众 30
2.2.4 对原则进行测试和修订 31
2.3 从原则到模式 31
第3章　功能性模式 34
3.1 模式演变，行为不变 35
3.2 定义功能性模式 38
3.2.1 创建模式映射 38
3.2.2 打造界面清单 39
3.2.3 将模式视为操作 41
3.2.4 描绘模式的内容结构 42
3.2.5 按某个维度排列模式 44
3.2.6 将内容视为假设 45
第4章　感知性模式 48
4.1 感知性模式的作用 49
4.1.1 感知性模式有助于传递品牌形象 49
4.1.2 感知性模式让系统更为连贯 51
4.2 探索感知性模式 53
4.2.1 情绪板 54
4.2.2 样式叠片 55
4.2.3 元素拼贴 56
4.3 迭代与改进 57
4.3.1 平衡品牌性与一致性 59
4.3.2 标志性时刻 60
4.3.3 小规模试验 61
4.3.4 平衡品牌和业务需求 63
4.4 标志性模式：团队练习 64
第5章　共享设计语言 66
5.1 为模式命名 67
5.1.1 学习为你的团队创造一个好名称 68
5.1.2 好名称是基于隐喻的 69
5.1.3 好名称有个性 71
5.1.4 好名称能传达目的 72
5.1.5 协同命名 74
5.1.6 建立专用频道 74
5.1.7 跟用户一起测试设计语言 75
5.2 将团队融入设计语言 76
5.2.1 让设计模式变得可见 76
5.2.2 引用事物的名称 79
5.2.3 将设计体系作为入职培训的一部分 80
5.2.4 定期组织设计体系会议 80
5.2.5 鼓励多样化协作 81
5.2.6 维护一份术语表 81
第一部分　总结 84
第二部分　过程
第6章　设计体系的参数 88
6.1 规则：严格或宽松 89
6.1.1 Airbnb 89
6.1.2 TED 93
6.1.3 权衡利弊，做出选择 96
6.2 部件：模块化或集成化 97
6.2.1 模块化与用户体验 98
6.2.2 模块化与项目需求的范围 101
6.2.3 权衡利弊，做出选择 103
6.3 组织：集中式或分散式 104
6.3.1 集中式模型 105
6.3.2 分散式模型 105
6.3.3 组织挑战 106
6.3.4 权衡利弊，做出选择 107
6.3.5 小结 108
6.3.6 适合你的设计体系 110
第7章　规划与实践 112
7.1 获得高层的支持 112
7.1.1 在设计和构建模块时能节省时间 113
7.1.2 在做整站修改时能节省时间 114
7.1.3 能让产品更快上线 115
7.1.4 其他好处 115
7.2 从哪里开始 117
7.2.1 就目标达成一致 117
7.2.2 将成果公开 118
7.2.3 创造知识共享的文化 119
7.2.4 提升团队士气 120
7.3 关于设计体系实践的思考 122
第8章　功能性模式的系统化 124
8.1 目的导向的清单 125
8.2 准备工作 126
8.2.1 安排时间 126
8.2.2 选择人员 126
8.2.3 打印界面 126
8.3 确定关键行为 127
8.3.1 措辞是一项基础工作 129
8.3.2 将行为分解为操作 129
8.4 按目的对现有元素进行分组 130
8.5 定义模式 131
8.5.1 具体性尺度 131
8.5.2 内容结构 133
8.5.3 命名 136
8.6 在更小的维度上重复目的导向的清单过程 137
8.6.1 操作的一致性 138
8.6.2 视觉层次 141
8.6.3 特例 142
8.7 小结 143
第9章　感知性模式的系统化 144
9.1 超越样式属性 145
9.2 美学特征与标志性模式 147
9.3 识别感知性模式 148
9.4 配色 150
9.4.1 从目的开始 150
9.4.2 收集现有颜色并分组 150
9.4.3 定义模式 153
9.4.4 指定模块 154
9.4.5 就指导原则达成一致 157
9.5 动画 158
9.5.1 目的和感受 158
9.5.2 评审现有动画 159
9.5.3 定义模式 160
9.5.4 指定模块 161
9.5.5 就指导原则达成一致 161
9.6 语气和语调 162
9.6.1 评审语气和语调的模式 162
9.6.2 定义模式 163
9.6.3 就指导原则达成一致 164
9.7 小结 165
第10章　模式库 166
10.1 内容 167
10.2 模式的组织 168
10.2.1 提炼感知性模式 169
10.2.2 组织功能性模式 169
10.3 模式文档 175
10.3.1 为功能性模式编写文档 175
10.3.2 为感知性模式编写文档 182
10.4 工作流程 187
10.4.1 添加新模式的过程 187
10.4.2 引入新模式的标准 188
10.4.3 人员与责任 190
10.4.4 统一设计体系的各个方面 191
10.5 工具 192
10.5.1 保持模式库的更新 192
10.5.2 保持主设计文件的更新 193
10.5.3 将模式库作为求真来源 194
10.6 模式库的未来 195
结语 196
扩展阅读资料 198
· · · · · ·

作者简介

作者简介：

阿拉·霍尔马托娃（Alla Kholmatova）

Tilio联合创始人，十年设计经验的UX设计师，具有丰富的Web交互设计经验。对设计体系、设计语言和团队协作有浓厚兴趣，近几年一直进行相关调研，并在调研基础上著成本书。

译者简介：

望以文

有多年的Web开发、产品设计与黑客增长经验，致力于“设计体系”的培训、咨询与推广工作（微信公众号designsystem）。译有《HTML5与CSS3基础教程（第8版）》等书。微博@weakow。

精彩摘录

Whatdoesinnovativeentail?Whenisadesignconsidereduseful?Howdoyouknowifit’sreallydelightful?Gooddesignprinciplesdefinequalitiesthatcanbeinterpretedindifferentways,andgroundtheminthecontextofaspecificproduct.

——引自第49页

Aprincipleshouldofferpracticalguidanceonhowtosolveadesignproblemwithinthecontextofaspecificproduct.ComparethesetwoversionsofoneofFutureLearn’sprinciples:“Makeitsimple.Makeitsosimpleit’salmostinvisible!Weshouldalwaysworktoremovefrictionontheplatform,creatinganexperiencethatallowsusersrealfreedomtothecontent.Ifourplatformiseasytounderstand,peoplecanandwilluseitmore.”Thisstatementmakesperfectsense—noonecanarguewiththeneedtohaveasimpleandusableinterface.However,it’snotclearfromthisadviceexactlywhatsimplicitymeansandhowtoachieveit.Compareitwiththisversion:“Noneedlessparts.Everydesignelement,fromthelargesttothesmallest,musthaveapurpose,andcontributetothepurposeo...

——引自第48页