编辑指南:原子设计是一种方法论，其中原子、分子、组织、模板和页面一起工作来创建更有效的用户界面系统。本文作者重点介绍原子设计的五个维度，希望对你有所帮助。

自从我决定通过写作分享我的设计经验，我发表了一些关于设计效率的知识。可惜大多局限于“气”、“术”的范围，很少提到“道”、“法”等纬度更高的方法。直到接触到原子设计，在实际理解并应用之后，惊喜地发现它对一次性设计的解决方案几乎是完美的。

什么是一次性设计？

一次性设计就是我今天投入成本完成一个界面或者营销需求，但是我只完成了这个需求。以后还是会遭受类似的需求，还要再投入一轮成本。这种设计就像一次性筷子，用完后可以马上扔掉。效率非常非常低。不仅不能重复使用，而且非系统化、非模块化的处理方式破坏了设计师的精力。这是导致很多朋友成为画图机的罪魁祸首之一。

原子设计这个课题涉及面很广，我不想用一篇没有营养的文章草草了事，对自己和大家的实际帮助都不大。目前的计划是把它分成几类。今天主要把理论拿出来，用实际案例分享后续实践！

01从原子到万物

当有两个氢原子和一个氧原子时，它们通过共价键形成水分子H2O。如果这个水分子的数目达到1.67×10 ^ 21，就会形成一滴水。

世间万物都是如此沉稳。原子组成分子，分子组成有机物，有机物组成生命。

网页设计师布拉德·弗罗斯特(Brad Frost)就是从这里获得灵感的。既然化学元素周期表中的一切都是由原子组成的，那我们设计的网页呢？

2013年，布拉德在化学领域的原子理论基础上，结合设计领域的知识，创造了一个非常非常经典的理论。叫做原子设计。

1.原子设计

布拉德列举了五个层次作为这一理论的核心支持:

Atoms原子Molecules分子Organisms有机体（组织）Templates模板Pages页面

1)原子

原子是构成设计所有元素的最小单位。比如颜色、字符、输入框、图标等。，在界面设计的维度上无法细分，没有独特的功能。我们可以在界面上随意改变输入框的颜色或者大小，但总体上不会有什么影响。

2)分子

按钮或者颜色本身没有任何作用，但是原子按照一定的既定规则组合起来，就可以成为一个组件，被赋予了独特的功能。比如搜索框、表单、日期选择器、反馈组件等等。这些分子由字符、图标、输入框等原子组成。

3)生物体(组织)

生物体被翻译成生物体，但这里我们参考其他前辈的翻译，翻译成组织可以帮助我们更好地理解它们。

组织映射到界面设计，实际上是一个由多个分子和原子组成的模块。例如，载有各种信息的卡片和清单。

4)模板

模板级别基本与产品挂钩。以上三个层次只属于分离的个体，不足以支撑一个页面。但基于产品和用户的需求，我们把几个有机体组合成一个“模板”后，产品才开始成型。而这个模板就是交互设计师画的原型。

从用户体验的五要素来看，属于框架层。模板的意义是帮助设计师专注于功能和内容的布局，构建一个抽象的产品模型，为最后一步做铺垫。

5)接口

界面是我们需要制作的最终高保真视觉稿，是对模板进行可视化的结果，对应的是体验五行的表达层。

设计师一方面用真实的图片和文案代替模板中的占位符，另一方面通过各种合理的视觉表达方式，高效地向用户传达信息或调性。这一步基本上是没有视觉还原的产品最终形态。

下面我要讲的原子设计系统就是基于这种方法论，贯穿于我们所有的设计过程和后续的产品迭代。

02软件危机

在讲解原子设计系统之前，我先给大家讲一个互联网历史上的真实事件——软件危机。

20世纪60年代，计算机发展的速度远远超过了软件研发的速度。但当时的汇编语言是面向机器的，开发者只能为特定的计算机编写，使得代码无法重用，维护极其困难。

就好像我希望你为我的军队批量生产罐头食品，但你只能雕刻一个米其林星级的法国鹅肝。这完全违背了当时大规模生产的市场需求。

这一系列问题在1968年的北约软件工程会议上首次被定义为软件危机。在会议上，道格拉斯·麦克洛伊提出了基于组件开发的概念及其解决方案，旨在解决代码低效、不能扩展和重用的缺点。这种超前思维可以说是未雨绸缪。当时促成了大量优秀语言的诞生(我们的C语言就是在这个背景下横向空诞生的)，帮助开发人员将代码复用到各种场景中，大大提高了开发效率！

半个世纪后的今天，同样的问题出现在我们的设计领域——

1.设计不统一

很多页面使用了相似的颜色和组件，而不是固定的，但是现在分散在各种项目的设计草稿中，很难管理和维护。

2.设计效率低下

因为没有预先搭建好的系统，所以每次提出新的需求，都很难重用以前的东西。此外，在进行不同尺寸的响应适应时，需要花费大量的能量来改变组件。有时候为了减少工作量，直接根据原型图布局开发，最后进行检查。

3.多设计者问题

当公司有很多设计师的时候，通常每个设计师单独负责一部分业务，但是因为没有一套既定的规则来约束，所以每个设计师的输出似乎并不是来自一个产品。

4.发展是低效的

开发的低效来自于设计的随意性。每出现一个新的样式或者组件，都要重写，无法直接重用已有的东西，导致大量无意义的重复工作。

我们的设计方法局限于解决单一问题的场景，忽略了未来会出现的更多服务。因此，我们的设计不系统、不模块化、不规模化。这些设计产品都是我开头说的“一次性设计”。

此外，有时设计师花费大量时间制作设计草稿，开发人员可能已经使用第三方组件来构建模板。

我们一直在说，设计师和开发人员之间好像有一堵无形的墙，是半语言半组件思维。

组件思维在我们设计领域的应用是原子设计系统，它基于原子设计的方法论，将原子、分子和生物组装成可重用的组件，以帮助设计师快速构建产品，大大提高生产效率。

03原子设计系统的优势

1.一致

首先，原子设计系统相当于设计师的一套标准化规则。所有的设计工作都是基于这个规则，基本避免了多需求、多设计师协作带来的不一致性。最终产品也能带来更一致的体验。

2.效率

与一次性设计不同，原子设计系统中的样式和组件可以无限重用。当设计师收到新的需求和项目时，只需要直接调用快速搭建模板，然后可视化填充，节省了大量重复的设计工作。而且这个好习惯也可以防止过多的可复用设计影响下游开发的效率，避免重复做轮子。它还减少了不必要的通信成本。

3.易于扩展和维护

在后期的产品优化迭代中，我们只需要改变系统中原子、分子或生物体的属性，就可以实现全局同步更新，非常容易扩展和维护。

04大工厂的原子设计系统

长期以来，在界面设计上混乱无序是Android的代名词。当时，由工程师主导的安卓是一片无人管理的荒野，任何人都可以在上面建造他们想要的东西。直到2014年，谷歌I/O大会发布了《材料设计》，这成为谷歌真正意义上的第一次设计革命。

如果有谁是原子设计体系最伟大最经典的先驱，那么《材料设计》当之无愧。它不仅为开发人员和设计人员提供了一套完整的构件库，还制定了《材料设计》独特的设计原则和设计语言，形成了一个相当庞大而有序的设计体系。

蚂蚁金服团队2016年发布的《蚂蚁设计》，是国内第一个使用原子设计搭建的设计系统。它最大的亮点应该是它提供了一个现成的组件框架，涵盖了大多数应用场景。当时对于中后台设计很烂的产品来说，是一片绿洲。

当然，其他很多优秀的公司也用原子设计来构建自己的设计体系，比如优步，Primer等等。

有哪些设计系统？

设计系统通常由设计原则、设计语言和组件库组成。

1.设计原则

设计原则是这套设计体系遵循的规则。无论是颜色、圆角、按钮还是图标，它们的制定都需要围绕这个设计原则来进行。

它存在的意义是为后面所有的设计提供方向，同时传达平台的品牌和仪式感。

比如我们熟知的《材料设计》就以材料隐喻、大胆、生动、有意义的动画作为其设计原则。

苹果的设计原则是创意美学的重要性、隐喻的价值、易用性原则和及时反馈。以审美为第一要义的原则也象征着苹果对美的追求。

蚂蚁的蚂蚁设计以自然、确定、意义和成长为设计价值。

2.设计语言

我们常说的设计语言是在坚持设计原则和商业调性的基础上预先制定的一系列设计策略。商业调性要求我们根据商业背景推导出一系列关键词来刻画商业。比如金融产品涉及资金的流通，那么安全性可以作为关键词之一。面向青年大学生的校园社交产品可以用青年作为关键词之一。

之后，我们基于这些关键词进行更形象化的映射，然后构建一个情感化的版本来分析和演绎最终的形态、色彩、文字、结构、质量等视觉风格。这些视觉风格可以总结为一套设计语言。这部分不在本次讨论范围内，我就简单说一下，不赘述。

3.组件库

构件库，你可以理解为一个装满各种构件的仓库。例如输入框、表单、单选框、多选框等。输入类组件，如警告提示、对话框、进度条等。反馈类组件。AntDesign提供了一套完整的构件库解决方案，涵盖了大部分的业务场景，在构建我们自己的构件库时可以作为很好的参考！

如果说设计语言解决了风格复用的问题，那么构件库解决了构件复用的问题。

想想看，如果没有一个统一完善的构件库，很容易出现在一个产品中呈现各种表单、搜索框等构件的灾难。在内部，它还会降低设计和开发构建页面的效率。

构件库通常是利用草图中的符号功能，结合智能布局和柔性布局功能来实现构件的动态响应。素描的具体施工过程比较复杂，不在这里讨论范围，在后面的文章中会有分享。

终于

简要回顾和总结。

原子设计包括五个层次:原子、分子、组织、模板和界面。

原子是构成设计所有元素的最小单位。

分子是由多个原子按照既定的规则组成，并被赋予独特的功能。组织是由分子和原子组成的模块。

模板是原型图，界面是高保真的视觉草稿。

原子设计系统包括设计原理、设计语言和构件库。在这种情况下，我们可以看看材料设计和蚂蚁设计，这是两个非常经典的设计系统。

原子设计基础理论到此结束。希望今天的文章能帮到你。