sketch中的组件化设计

前言

互联网设计的不断发展，设计提效推动着设计思维的转变。我们不仅要完成业务需求的设计，在关注视觉表现的基础上，还需要加强对项目协同和体验的关注，逐步形成组件化思维做设计。我们不设计界面，我们是设计构成界面的元素。

那什么是组件呢？

组件是经过设计元素解耦，具有标准规范和可复用场景的基本模块。从字面上理解：“组”是设计元素的组合方式，“件”由不同的元件组成。当我们把页面中的不同结构做成组件化，再把不同的组件组成页面，当我们替换组件内容中的元素时，页面中的元素也被替换了。原子设计是就是组件化设计的核心思想。

那组件和设计规范又有什么样的关系？毕竟他们都有颜色、图标、文字、弹窗等相同内容。我觉得这两者应该是相辅相成、相对独立又相互包含，比如工厂里的零件包，里边有螺丝钉、螺丝帽、生产组装说明书，设计规范就类比一纸详细的产品生产组装说明书，组件库则更像是一堆零件+使用说明书，零件的组装就是依照生产组装说明书组装。那我们组件库也是依附于当前的设计规范产生，同时未来我们也将依据设计规范来产出新的符合规范的组件。

原子理论

说到UI组件库，几乎每篇文章都会说原子理论。在化学中，原子是化学变化中的最小粒子，物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。2013年前端工程师 Brad Forst 将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。

原子设计就是抽取最小的设计元素，然后对这些小元素进行拼合，形成一个个组件。比如一个页面，有导航、banner、列表、底部导航等模块组成，我们可以将导航、banner、底部导航、列表等分别设计成一个个小组件，再将四个模块的组件拼接成一个页面，提高设计效率。这是原子设计最基础的理论。根据这个我们搭建出完整且庞大的组件系统。

原子

原子是化学变化中的最小粒子，也是设计系统中最小的单位。原子包括调色板，分割线，字体、标题、段落文本等单个元素，这些元素有个特点就是最小元素不可再切割，如下图：搜索框、搜索图标、搜索文案，都是一个个原子。

分子

原子排列组合构成了分子。在界面中多以「组件」的形式存在，例如：导航栏、标签栏、搜索框、按钮、弹窗、banner等。

组织

原子、分子排列组合构成了组织，在界面中多以「模块」的形式存在，例如：商品列表、内容卡片、入口模块、瀑布流图等。

模版

原子、分子、组织排列组合构成了模板，在界面中也称为「原型图」，例如：电商展示原型、外卖点单原型、店铺详情原型、商户管理原型、商品分类等。

页面

模板填充了真实的内容（图片、文字等）后形成页面，也就是常说的「视觉稿」，例如：商品列表页、外卖点单页、教育课程页、资讯管理页等。