《Design System》章节知识概念梳理（1-3）

阅读译文版本：mp.weixin.qq.com/s/zF_V7iHam… 十分感谢 C270 大大翻译前端

原书购买地址：www.smashingmagazine.com/printed-boo…设计模式

由于本身在实习时参与的项目以及毕业设计都是组件库的驱动、设计与实现，须要设计、Android和iOS共同配合完成，但本身对于设计的不少相关概念并不了解，所以在今年四月的时候找到这本《Design System》来阅读，想由此了解国外的设计界大厂对于设计体系的探索认知，从而更好地处理工做中遇到的问题。markdown

阅读后收获良多，作一个知识概念的学习记录，这一篇是第一章到第三章，以后会更新后续的学习记录。架构

为了更便于理解，也更适用于我所应用的场景，书中名词一致修改：框架

设计模式 -> 设计元素
- 功能性模式 -> 功能性元素
- 感知性模式 -> 感知性元素
设计模式库 -> UI 组件库（一个广义的“UI组件库”不只仅包括「组件」这种功能性设计元素，也包括「风格」这种感知性设计元素）
模块化 -> 组件化
工程师 -> 开发者

1、设计体系

1. 设计体系

「设计体系」：服务于数字化产品设计的一系列具备内在关联性的、组织有序的设计元素与实践方法。模块化

「设计元素」：任何可复用的界面组成要素，包括按钮、文本框、图标、配色、字体，以及可复用的功能流程与交互行为等等
「实践」：在团队当中建立、提炼、使用和共享这些元素的过程。设计体系的目标：经过一系列具备内在关联性的设计元素与实践方法来提高设计流程的成本效益，最终推进产品目标的实现。

2. 设计元素（设计体系的核心与基石）

设计元素的类型工具

「功能性元素」：由产品的核心功能及其所在领域所决定的设计元素「实体化的、可执行的部分」
「感知性元素」：由产品的气质（或品牌形象）决定，同时又进一步塑造了产品带给人们的感知的设计元素「描述性的」

（包括风格、文本样式、配色、图标风格、空间与布局、特定的形状、动效、音效等等。）oop

离开了感知性设计元素，对于那些领域相同且功能类似的产品，人们将难以分辨它们所属的品牌。组件化

「设计语言」：一系列具备内在关联性的设计元素共同定义了产品界面的设计语言。布局

为了使设计和开发的工做更加有前瞻性，使设计和开发的沟通更高效，须要「可以被清晰定义、描述和复用的设计元素」。它是：

一种能够执行与复用的标准
一种体系化的设计思惟模式
具备复用能力
- 避免设计师过多地聚焦于设计元素自己，而将更多精力用于对设计需求的思考
- 避免开发者过多地耗费精力于界面元素样式的调整，而将更多精力用于对业务功能的实现

3. 协做语言

语言是协做的基础。团队在进入实际工做流程以前，就应该对你们须要统一使用的工做语言进行讨论、评审和确认。

「工做语言」的应用

从高层面的需求概念描述
平常设计决策讨论中的表达方式

以此为基础，对于设计元素和相关文件的的命名方式才能在团队范围中保持统一。不只应该定义命名，还要对设计元素的使用和认知进行详尽的描述与统一。所以，须要行之有效的提炼与共享协做方式：UI 组件库。

4. UI 组件库

「UI 组件库」：收集、整理并共享设计模式的典型工具，包含对于设计原则及元素使用方法的规范性说明

UI 组件库的历史发展

品牌识别文档的扩展内容 -> 界面设计模式 -> UI 组件库静态 PDF -> 动态“代码库”

UI 组件库的局限性

组件库 ≠ 设计体系，组件库仅是构造高效设计体系的工具，没法为设计产出的质量担保，但能够帮助修正问题，但设计质量的提高不能彻底依赖工具。

组件库没法修复“坏”设计：组件自身的设计问题、组件的错误使用问题..

协做是组件库的基石，须要在团队当中进行诠释和沟通，以确保全部人都有着一致的认知，正是这些诠释和沟通决定着组件库可否具备长久的实用性。

组件库并不会束缚创意，它只会反射出设计体系自己的特征。若是设计体系对于创意试验更具包容性，那么组件库一样能够表现出这一点，使创意型工做变得更轻松。

须要将组件库和实践方法进行统一整合的系统化机制，以坚实的设计语言为基础，组件库才能真正成为高效能的设计协做工具；不然，它将只是一套零零散散的组件展现而已。

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

经过观察其各个组成部分可否有效协同促进产品目标的实现来进行判断

统一目标

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

6. 体系化设计思惟方式

分析产品：目标用户、产品的核心目标、产品气质
制定设计原则：以原则为中心，决定每个设计决策
关键行为 -> 功能性设计元素
视觉样式 -> 感知性设计元素
统一协做语言

2、设计原则

1. 有效的设计原则具有哪些特质

好的设计原则具备独特性，会促进设计师寻找角度进行思考。

详实可考：基于特定的产品情境作细化
切实可行：把形容词动词化，把感性认知指标化，并搭配实例进行诠释 “简约” -> “移除没必要要的内容”
观点明确：诠释面对冲突要素时的优先级与平衡性
易懂易记
- 反复运用与强调
- 控制设计原则的内容数量（3-5 个）

Eg. Airbnb 的四项设计原则：”统一”、”通用”、”图形化”、”交流性”;

Eg. Spotify 的 ”TUNE” 原则：Tone、Usable、Necessary、Emotive（”悦目”、”易用”、”必要”、”情感”）

2. 如何定义设计原则

以目标为始：设计原则必须符合产品目标并有助于产品特质的表达

Eg. TED 产品目标”将理念传达得致远、致广。” -> 设计原则”追求持久适用，而非盲从前沿”

寻求多方意见：团队共同定义，整合新老员工的认知反馈
聚焦于目标受众：确认设计原则的目标对象与受众
测试与迭代

设计原则塑造着设计决策，后者也会反向推进前者的改变，须要不断测试、验证与修正。将设计原则适用性评估融入到设计评审当中，持续考量设计原则可否与当前产品发展阶段保持契合；若是不能，则对设计原则进行迭代。

3. 从设计原则到设计元素

原则决定着设计元素的选择与运用
设计元素是“单词”，设计原则是“语法”
元素的迭代也会反向影响原则的进化

3、功能性设计元素

功能性设计元素能够是简单而独立的，也能够被组合成为更加复杂的元素。

1.关键行为与功能性设计元素

设计元素是界面行为逻辑的具像化体现，所以要保证它们所承载的产品目标及关键行为是相对稳定的，其外观及交互层面的特征能够稍作变化。

2.如何定义功能性设计元素

关键：理解功能性元素与设计目标、关键行为之间的重要关联

建立设计元素地图：以用户体验不一样阶段罗列
开展界面清查：汇总统一组件的不一样场景（每几个月就须要一次）
从“行为”的角度理解设计元素：“它是什么” -> “它用来作什么”

若是耦合表现形式与内容类型，会致使使用情境受限

Eg.“课程 banner” -> “推广内容”

梳理信息架构：单个组件含有的要素，判断层级关系和是不是可选展现要素 -> 开发者搭建框架更清晰
衡量同类元素的权重排序，描述各自的使用规则
将内容做为变量：从目标层面入手，聚焦于设计目标的定义与实现，而非对特定的内容进行设计

To Be Continue~

欢迎催更（并无人你醒醒