组件化设计思维

组件是经过设计元素解耦，具有标准规范和可复用场景的基本模块。“组”是设计元素的组合方式，“件”由不同的元件组成。

一、组件化设计思维

（1）传统的页面生产流程
传统的页面生产流程是瀑布式的，从运营到需求，需求到设计、设计到前端，是一连串的工作流程，在视觉稿设计产出前，似乎谁也不知道页面会设计成什么样子。

这种模式重复性业务页面设计制作、反复低效率的沟通、纠结的还原度修复。
（2）组件化设计
将大量的频道二级页面、后台型页面等，用组件化方式将页面整合设计。将产品需求场景化、视觉表达模块化，每个组件基于服用为目的，通过标准的规范组合方式来构建整个设计方案，从而提升设计效能。

1. 完整组件方案：将组件视为一个独立的产品，从多维度、多场景输出组件的方案和组合标准
   
2. 组件化思维：从需求出发，拆解页面表达结构和所需组件
3. 通用页面规则：通用的页面与组件的栅格体系及替换规则

二、构建组件库（DPL）

（1）组件具有三维分层，一个完整的组件需要具备下列信息

X组件响应状态：包括尺寸大小、组件响应方案，尺寸的维度，元件的组合，多态的交互

Y：组件行为状态

组件的行为在以下三个维度的交互和信息都需要考虑到：

1. 背景层：组件与整体页面产生关系层
2. 结构层：组件在信息结构与层次关系的载体层
3. 互动层：组件与用户行为的互动层，比如用户的点击、hover等。

Z：组件数据状态：用电商推品组件举例，包括比如预售、开抢、售罄、结束、常态等

（2）简历模板，提炼规范与扩展，设定标准

从场景中提炼出基础核心组合用法，能覆盖多数场景为原则

（3）通过工具的方式，将规范工程化

由标准和可复用元件组成的组件，在样式和数据的拓展上必须加上工程化的组合能力，才能使一套完整的DPL有效地执行下去。

• 理念层
  在整体网站层面对定义整个网站的设计语言，包括品牌色、图形、特色、动效等，为整个组件库风格和体验定下大的基调。这是组件库在使用过程中减少挑战的设计基础，并能保证多业务和多项目并行使用时统一性。
• 数据层
  对组建中所有元件进行展示的分类和抽象，并形成常用组合模式。其次是从元件、组件到模板的定义和划分，以及他们的抽象的分类和状态。
• 工具层
  需要平台化的工具来提供支持和服务。将设计规范和设计表达封装为在线可视化选择方式，替代了原先毫无约束的在sketch的任意“设计”；并将拼装好的组件同步转化为页面搭建平台可直接使用的组件，这个也是避免组件库沦为“无人看管的设计规范”最为关键的一点。
  

转自：组件化设计思维 – 从规范到工具的构建与探索