这篇文章一直碎片化存在自己的学习笔记之中，恰逢最近有换工作的需要，时间又比较充裕，简书里相关的文章又不是特别的干，正所谓好记性不如烂笔头，所以整理写出来和简友们一起分享学习。
此文将浅谈网页设计中，如何理解运用原子设计理论。
其实我了解到原子设计这套方法论，也是在近两三年的事，虽然它在2013年就被人提出，但我自己在2016年总结了类似的理论：当时在做华为的类CRM项目，为了给一众BA（类似产品经理）讲解如何去使用我给他们建立的设计规范，提出了「点、线、面」的概念，其实这与原子设计理论不谋而合，或许这是因为我和Brad Forst都是工程师出身吧，只不过他灵感是来自化学（理科），我的灵感来自绘画（艺术）。
殊途同归
大家姑且先忘了我的「点线面」，我将用最近的工作实际案例说明，如何去理解和将原子理论运用用到网页设计中。
此文内容概括：
1.原子设计理论（Atomic Design）简介
1.1 背景
1.2 定义
2.项目实例：系统建设设计规范
2.1 准备工作
2.2 结合原子
2.3 组件化
3.总结
3.1 为什么要以原子理论作为指导？
3.2 结语
1.原子设计理论（Atomic Design）简介
1.1 背景
原子设计理论最初是由Brad Forst在2013提出，据说灵感来自于化学实验室---我们所观察到的物体由分子组成，分子由原子组成，原子由电子和质子中子组成。
请默写化学元素周期表。（此题满分10分）
1.2 定义
原子设计是创建设计系统的一种方法论，按Brad Frost的分类，共分5个层级：
1.Atoms 原子：
构成网页的基本元素，可以是标签、输入框、按钮这类实体，也可以是字体、色彩这类抽象的概念。
2.Molecules 分子：
由元素构成的最小功能性单位，如标签、输入框、按钮构成表单。
3.Origanisms 组织：
由原子分子构成，比分子更为复杂（功能），这里开始可以看到界面雏形。
4.Templates 模版：
由以上构成、经过排版之后的结构基础。
5.Pages 页面：
将内容（图片、文字内容等等）填充进模版就构成了页面，即最终的设计稿。
2 项目实例：系统构建设计规范
2.1 准备工作
以我最近做的这个项目为例：接手这个商业后台项目时，已经过一轮UI改版，目前需要进行第二轮改版，并要求为这个项目未来SAAS化做准备。
产品是现成的，所以，我首先要收集产品的全部组件。
为什么这样做？1.为第二轮UI改版需要，2.熟悉整个项目的所有页面，了解业务流，3.从自上而下的角度整理这些组件，判断那些是可以归为组件，哪些样式需更新（新旧交替）。
收集方法因人而异，你觉得怎么方便怎么来，按什么类别收集也是一样的，需要根据你自身项目情况来定。这里我通过「导航，数据录入，操作反馈，数据展示」类别粗略整理了全部组件。
只要整理出来即可，什么方法都可以
这里再补充一点，如果是项目伊始，从零设计网站规范，也是一样的，同样要根据你的项目情况，规划整理出你将要做的组件库。
2.2 结合原子设计
食材都备齐了，就要开始起火做饭了。我们按照原子设计的分层方式，逐级拆解我们收集整理的组件库。
2.2.1 原子
首先找到最小设计单位：
1.色彩&阴影&线：色彩有多讲究，几篇文章也讲不完。这里我们定义出主色，以及其他常用色，中性色彩，根据需要还可以加入图表（数据可视化）色。
2.文字：根据产品的使用场景，确定自己的字体家族（font-family）。还需设定主字体、字阶、行高、字重、字体颜色。
3.还有按钮、状态、图标、输入框这里就不一一举例喇。
别忘了“Normal, Hover, Active, Disabled”，开发小哥会追你到天涯海角
2.2.2 分子
除了文本框、搜索框、选择器等常见的表单基本单位，还有Tab栏、面包屑、分页、提示、上传、锚点等等，这些都属于分子层。
可以完成单一任务的组件都可以归纳为分子层
这里分解一下时间选择器，来说明原子构成分子：
由原子（文字，输入框，图标）构成了分子：时间选择器
2.2.3 组织
由分子和原子组成，组织层可以完成更复杂的任务，多以「模块」的形式存在。
2.2.4 模版和页面
之所以把模版和页面两层放在一起讲，是因为除去抽象的概念描述，模版对于我来说，就是「原型图」，而页面就是最终交付的「设计稿」。
这样对比就一目了然
2.3 组件化
当我们用原子的设计思路，将整个设计方案中的元件按层级分布好，这只是做到了在心理模型上去认知它，在现实工作中，我们还需要按分好的层级，逐个逐层组件化，不是画好了让大家复制粘贴，而是将它们复用联动起来，「知行」合一才是真正运用原子设计。
常用的设计组件化工具，俯拾皆是，如Sketch 的 Symbol 等，更进一步，可以用Abstract等设计协作工具进一步发挥原子设计的价值，关于组件化和团队协作这块有时间我会专门写篇文章阐述。
这里还要注意的是，组件化时设计师不能自己闭门造车，除了完成后让工程师加入评审外，在设计的过程中，有任何落地实现上的疑问都要和工程师及时沟通。
3.总结
3.1 为什么要以原子理论作为指导？
3.1.1 优点
1.一致性：由于将整个网页设计的要素「化整为零」，定义出最小设计单位，那无论如何有机组合，在任何页面上的UI元素（如颜色，字体等）和交互都是一样的。对于用户来说，不需要反复学习，且视觉效果更为和谐一致。
2.效率：对于设计师/工程师来说，原子意味着可以建立更科学合理的设计组件库/前端组件库，在运用原子组件库的项目里，无论团队规模有多大，通过简单培训，便可高效组织团队成员产出，且完成率高。即使需要修改某一元素，也可以马上应用到整个项目，不影响其他成员并行生产。
3.跨角色：项目贯彻应用原子设计，会让设计师多一点工程师的结构思维，会让工程师多一点设计元素化的认知，不再局限于自己的一亩三分地里，减少之间不必要的沟通，同时也利于自己的职业发展。
3.1.2 缺点？
到目前为止，我能想到的缺点有二：
1.虽然论述起来感觉门槛不高，但要依此做一个完善、通用、易塑性强、具备扩容能力且获得团队其他角色认可的设计规范，这对构建者（或构建小组）的要求较高，除了基本的设计素养外，还需要他涉猎不同领域（如前端）的知识，且有足够经验为设计规范的发展变化（未来几个版本的变化）做准备。即前期质量越高，带给团队的增益是几何式的，反之，修修补补朝令夕改脱离实施，会让其成为一个普通的设计组件库。
2.所有方法论都有其局限性，后续参与者可能会受限于前者所设定的框架，被先入为主。虽然高效的让设计成员如螺丝钉般工作，但也会在一定程度扼住他们的创意设计，会让一些没有进取心的设计师成为一个没有感情的工作机器。故我觉得这个方法论更适合ToB的网页设计，在这个业务领域它能发挥最大的价值。
3.2 结语
通过此次原子设计规范构建，我们完整建立了商业后台项目的设计规范，解决了历史改版带来的样式不一的问题，为将来SAAS化工作奠基。在这过程中，一定程度优化了产品开发流程，也让参与的设计师和工程师拓宽了自己的角色认知边界。
设计网站和建立设计规范，有许多种方式和设计理论，原子设计只是其中一种，大家还是要根据自身项目实际情况来运用。即使运用了原子设计，也不一定生搬硬套，照着5个层级硬分，要灵活运用------就像我开篇提到的，自己曾总结的「点、线、面」设计思路，重要的是其中的设计思考，融会贯通地去解决每一个设计问题，建立自己的体系。
参考资料：
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://atomicdesign.bradfrost.com/chapter-2/
The Unicorn Workflow: Design to Code with Atomic Design Principles and Sketchhttps
网友评论