像做产品一样做设计Design System架构,规避逻辑陷阱

 

一，组件库与设计规范

相对侠义的、以组件库与设计规范为主要组成部分的Design System 而言,你可以将其想象成宜家家具 - 组件库是零件形态呈现的家具产品，而设计规范便是指导你完成组装的说明手册。

 两者的功用及关联性就是这样一目了然；两者的架构设计在设计上很大程度上具有共同性.大体上，组件库与设计规范的架构体系在颗粒度较小的层面通常可以做到一致；但设计规范也会有其特定的目标及作用范围，当涉及到“设计模式”等层面，颗粒度往往会超过组件库所能承担的范围，此时也无需追求全面一致

二、“原子化设计”不错

有过相关经验的朋友或许都知道，组件库初期的架构设计工作是最消耗时间与心力的过程，特别是对于大中型“成熟”产品而言，太多的功能流程及相应的组成页面，太多的不一致问题 - 以怎样的规则去梳理可复用的组件，以怎样的颗粒度去划分组件层次，怎样确保划分方式具有足够的灵活性与实用性 - 推进过程往往是慎之又慎，举步维艰的，每一个步骤都严格以上一个步骤为基础。

对于组件的颗粒度划分，目前最经典的理论是“原子化设计”，我们之前在一些文章当中也有介绍；可大致理解为:

   

• 原子：最基础的、不可分割的设计要素，宜家家具的零件单元，一块乐高积木，等等。通常包括颜色、文字、栅格体系等样式风格要素，以及图标、按钮、文本输入框、切换等功能性的界面基础要素。

• 分子：由原子组成的、具备独立功能性的最小可复用单元，例如一个包含了文本输入框、占位符文字及按钮等元素的搜索栏，或是一个包含了用户头像、用户名、用户评论内容及点赞按钮的列表单元（Table View Cell）等等。

• 有机体：由单一/多种类型的分子组成的信息/功能性模块。

  

  至于“模板”和“页面”，个人看来对于组件库架构设计的意义不大；或可从“视图”的角度理解“模板”，这个再议。

但会出现很多问题

然而在很多时候，当你准备以原子化设计的思路规划整个组件库的架构，往往会发现实际状况并非如此鲜艳，鲜明

原子级别的要素大体还好，一旦进行到分子和有机体的层面，时常感到难以判断和区分。