编辑导读：组件化思维是设计师必备的技术之一，如何搭建组件库和设计类型更是设计师应该把握的。本文作者从自身事情履历出发，对组件化思维的设计流程举办了阐明总结，供各人一同参考和进修。

当我们进入一个成熟的设计团队，团队文档中城市有组件库和对应的设计类型。

组件库是当设计师碰着同一类组件设计场景时，可复用，制止造新的样式。这样既淘汰设计和开拓的时间本钱，同时加强产物的统一性，制止多样式给用户带来认知障碍。

设计类型是指导团队组员组件利用的法则和项目设计的指导原则。

本篇文章内容目次如下：

无组件化的问题

组件化的长处

组件化支撑的设计理念

如何搭建组件化

如何利用组件化

01 无组件化的问题

设计团队在做项目标进程中，假如没有组件化时，那么会碰着维护本钱高、效率低、统一性差、开拓本钱高、复用性差和难以协同等6大问题。

维护本钱高：需要所有设计师一起维护更新，有时候存在同步不实时的环境，导致设计师之间对最新组件的更新差异步，从而发生更大的维护本钱。

效率低：设计师反复设计沟通范例的组件，设计一系列组件状态，这一进程中会耗损设计师大量的时间。设计师事情效率低。

统一性差：存在沟通组件被反复造新样式的环境，导致统一性差，造成用户的认知本钱。

开拓本钱高：开拓需要写反复的样式，没法全局挪用，淹灭时间，开拓本钱高，安装包的体积大，甚至是会影响产物的机能。

复用性差：组件之间无法复用，需要不断地建造新样式。

难以协同：同事之间协同坚苦，每个设计师都有本身设计习惯。

02 组件化的长处

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

统一性：

整个产物差异模块的业务凭据统一类型利用，晋升整个产物的视觉交互统一性，淘汰开拓样式，晋升开拓效率。

制止设计师缔造新的组件控件样式。

统一交互设计法则，减罕用户操纵的疑惑感，晋升产物的体验。

高效性：

一套设计类型衍生两套组件库，别离为sketch ui组件库和auxre元件库。sketch ui组件面向工具为视觉设计师，auxre元件库面向工具为交互设计师和产物司理。设计师和产物司理通过拖动组件搭建界面，节省时间，晋升事情效率。

淘汰建造组件控件的时间，不需要对组件从头下界说，晋升设计效率，可将更多时间放在流程体验和设计敦促上。

延续性：

通过设计类型，在今后更新中可以持续迭代，制止断层。

团队纵然有成员分开可能插手，通过设计类型和组件库可以快速的接办和举办正常事情

03 组件化支撑的设计理论

组件化所支撑设计理念是原子设计。

原子设计是一种要领论，由原子、分子、组织、模板和页面配合协作以缔造出更有效的用户界面系统的一种设计要领。

原子：设计系统的最小单元。原子包罗调色板，支解线，字体，单个元素（即标题，段落，按钮等）这些元素有个特点就是最小元素不行再切割，如下图。

分子：通过多个原子组合而成，作为一个单位构成UI元素的一个组件，如下图。

组织：通过多个分子组合而成，我们可以构建更巨大但可反复的组织。组织是构成模板的主要构成部门，如下图。

模板：通过多个组织组合而成。是页面的基本架构。将以上元素举办排版，将原子，分子，组织举办排版成最终的模板，如下图。

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

04 如何搭建组件化

组件化什么时候开始做?