用一篇全面干货，帮你完整掌握组件化设计流程

我们进入个成熟设计团队，团队文档都会有组件库和对应的设计规范。

组件库是当设计师遇到同一类组件设计场时，提供复用、避免创造新的样式的库。样既减少设计和开的时间成，同时增强产品的统一，避免样式给用户带来认障碍。

设计规范是指导团队组员组件使用规则和项目设计指导原则。

组件化思维是设计师必备的技之一。如何搭建组件库和设计规范更是设计师应该掌握的。

无组件化的问题

设计团队在做项目的过程中，如果没有组件时，那么会遇到维护成本、效率低、统一性差、开发成本、复性差和难协同等 6 大问题。

维护成本：需要有设计师一起维护更，有时候存在同步及时的情况，导致设计师之间对最组件的更同步，从而产生更大的维护成本。

效率低：计重复计相同类型的组件，计一系列组件状，这一过程中会消耗计大量的间。计工作效率低。

统一性差：存相同组件被重复造新样式的况，导致统一性差，造用户的认知本。

开成高：开需要写重复的样式，没法局用，耗费时间，开成高，安装包的积大，甚至是影响产品的能。

复用性：组件法复用，需要不地制作新样。

难协同：同事之间协同困难，每个设计师都有自己设计习惯。

组件化的好处

当团队在做项目时，组件的好处有：统一性、效性和延续性。

统一性：

• 个品不模块业务按照统规范使用，提升个品视觉交互统一，减少开样式，提升开效率。
• 避免设计师创造新组件控件样。
• 统一交互设计规则，减户操作的迷惑感，升产的体验。

高效性：

• 一套设计规范衍生两套组件库，分别为 sketch ui 组件库和 auxre 元件库。sketch ui 组件面向对象为视设计师，auxre 元件库面向对象为互设计师和产品经理。设计师和产品经理通拖动组件搭建界面，节约时间，提升工效率。
• 减少制作组件控件时，不需要组件新下定义，提升设计效率，可将更多时放在流程体验和设计动上。

延续：

• 通过设规范，以后新中可以连续迭，避免断层。
• 团即使有成离开或者加，通设计规范和组件库以快速地接手和进行正常工。

组件化支撑的设计理论

组件化所支撑计理念是计。

原子设一种方法论，由原子、分子、组织、模板页面共同协作以创造出效的用户界面系统的一种设方法。

原子：设计系统的最小单位。原子包括板，分割，字，单个元素（即标题，段落，按钮等）元素有个特点就是最小元素不切割，下图。

分子：通个原子组合而成，为一个单元组成 UI 元素的一个组件，下图。

组织：通个分子组合而成，我们以构建更复但重复的组织。组织是组成模板的主要组成部分，下图。

模板：通个组织组合而成。是页面的基础架构。将以上元素进行排版，将原子，分子，组织进行排版成最终的模板，下图。

页面：将际内容（图、文章等）套件在特定模板，每个页面由将际内容（图、文章等）模板修改而成，下图。

如何搭建组件化

组件化什么时候始?

一种情况是产品立项前就开始组件化，在产品 0 到 1 之前，拥有一套组件和设计规范。设计师以从以前项目的组件库和设计规范直接套用并修改，样项目前期设计做来更加方便且省时省力少挖坑。

另情况是品经历过 0 到 1 后，品趋于成熟，这个时候开始做组件化。组件化搭最多会有六个步骤，分为：理目录、制定规范模板、填充目录内容、生成组件库、sketch 插件库和开发服务平台。

理目录：将线上品组件进梳理并做分组，形成个组件目录。
制规范模板：以一典型的组件例，制组件内规范模板。里面包含组件的义、组件的几种类型、组件的标注、组件的交互规范组件的极限况。

填充目录内容：按照定的规范模板，将每个组件的内容进行填充完成，形成一套完整的设计规范。

生成组件库：将设计规范里组件样单独抽离出来，生成完组件库。

sketch 插件库：如果有前端支持，可将 sketch 组件库开发成对应的插件，这样设计师可更方地使和实时更。

开放服：有前端开发资源支持的话，可以将组件进行代码封装。移动端或 PC 端都可以做组件开发。

如何使用组件化

当队搭建完成组件化之后，下来就是成员间的使用，这一过程由业需求产生组件模板、组件模版形成页面、页面形成页面流程和页面流程形成用户体验。

• 业务需求生组件模板：基于业务需求，生符合业务属性组件，有新需求时，根据业务场景选择合适组件组合成应模板。
• 组件模版形成页面：组件模根据实际产需求，形成对应的产页面。
• 页面形成页面流程：计根据组件模板所搭建的页面，形成一个个页面操作流程。
• 页面流程形用户体验：根据终完的页面流程，则形终的用户体验。

欢迎关注作者的公众号：「Echo的计笔记」