## Atomic Design
2013 年前端工程师 Brad Forst 将此理论运用在界面设计中，形成一套设计系统，包含 5 个层面：原子、分子、组织、模板、页面。
**1\. 原子**
原子是最基本和最小颗粒度的单位，在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。
**2\. 分子**
原子排列组合构成了分子，在界面中多以「组件」的形式存在，例如：导航栏、标签栏、搜索框、按钮、弹窗等。
**3\. 组织**
原子、分子排列组合构成了组织，在界面中多以「模块」的形式存在，例如：商品列表、内容卡片、入口模块、瀑布流图等。
**4\. 模板**
原子、分子、组织排列组合构成了模板，在界面中也称为「原型图」，例如：电商展示原型、外卖点单原型、店铺详情原型、商户管理原型等。
**5\. 页面**
模板填充了真实的内容（图片、文字等）后形成页面，也就是常说的「视觉稿」，例如：商品列表页、外卖点单页、教育课程页、资讯管理页等。
**以原子理论为依据构建的设计体系**
1. **[UX Power Tools](https://www.uxpower.tools)**
2. **[Frames fo Sketch- Web Design System](https://framesforsketch.com)**
3. **[iOS Blueprint](https://blueprint.rojcyk.com)**
4. **[Nested Symbols](https://www.sketch.com/)**
>[AtomicDesign by Brad Frost](http://atomicdesign.bradfrost.com/)
> [Atomic Design 原子设计理论精华总结](http://wemedia.ifeng.com/86599157/wemedia.shtml)
> [Atomic Design原子设计理念：构建科学规范的设计系统](http://www.woshipm.com/pd/728887.html)
