推荐阅读：组件化思维—— 适应并推动业务及产品变革的设计案例
为什么要做组件化
重复开发同样的 UI 结构，在不同场景重新编写协作混乱设计稿设计元素过多，设计花费很大精力，同时研发在繁杂的设计中很难找到关键点质量不可控设计还原度只能人眼审核，没有保障管理难产品扩展性差，业务开发交互需求样式、交互影响难以评估，功能之间缺乏关联性
组件化的目的：
可复用复用组件、复用样式规范化设计语言设计稿可以通过设计元素拼凑出来组件测试覆盖单元测试、有针对性做兼容测试积累设计资产色板、排版、设计稿组件化
现在有什么问题
- 需求开发的时候伴随着大量样式 bug（甚至超过 50%，还原设计稿就像是做找不同游戏 😓）
- 研发使用不清晰（这个组件可以用，但是交互不太对？部分样式还需要调细节？）
愿景：
尽量避免设计、研发花费大量时间调试设计细节（bug 高发区），组件化快速产出设计稿。研发协助设计完善设计语言，逐步积累设计资产，提升设计价值，形成自己的设计、研发组件库，设计元素培养用户习惯，形成设计影响力。
概念
Style Guide （规范样式）/ Design Token
间距（spacing）、字体（font）、圆角（border-raduis）、阴影（shadow）、描边（border）、颜色（colors）、动画（animation）、图标（icons）
设计原子组件
文章 atomicdesign.bradfrost.com/chapter-2/
摘文： Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time .
完整阅读 atomicdesign.bradfrost.com
原子 => 分子 => 有机体 => 模板 => 页面
化学元素 => 无机物 => 有机物 => 人 => 具体特征：
- 原子：基本构成：输入框（Input）、下拉选择（Select）、按钮（Button）、标题（H1）等
- 分子：单一功能组件：弹出框（Modal）、按钮组（ButtonGroup）等
- 有机体：多功能组件：工具栏（Toolbar）、日期选择器（DatePicker）、图表（Charts）
- 模板：页面模板（设计底层结构），类似产品原型，在此基础上考虑动态特性（数量、首次引导交互、权限控制），弹性设计（resilient design）
- 页面：实践测试
优点
- 从抽象到具体，从具体审视抽象
- 每个阶段可以独立运作，穿插进行
- 最后两个阶段监督我们重新审计抽象设计模式和接口
研发、设计要求
- 设计需要拓展性思维，尽可能提出新的设计思想，研发作为协作者参与，有义务帮助设计整理设计资产、调研第三方组件库、确定设计是否符合 w3 规范（可访问的富 Internet 应用程序的指南）
- 实际操作是有很多坑的，例如如何从 Style Guide 中选择合适样式、如果 Style Guide 中的样式不能满足设计需求怎么办
Antd 组件库 Figma 截图
组件属性一目了然
颜色直接从现有的设计系统中选择，不用手动调试
高级玩家
落地
- 设计交互 Figma 组件库 Design Guide
- 设计、研发参与指导
- 研发交付开源组件库
- 组件样式统一：统一使用入口
- 小改动：尽量使用原有组件库、antd、antd-mobile 等迁移组件库中
- 迭代视觉测试
