进阶思维-原子设计理论进阶使用

一提到原子设计理论的内容，大部分人根本没有真正理解“

”，我所说的理解是指将这个理论内化成自己的方法论，而非粗浅的模仿或搬运。

 

“原子设计理论”除了是工业化的设计方法，还是一种大多数游戏UI没有的设计逻辑，

 

之前在负责《明日之后》的活动管线，那段时间沉浸在大量的活动制作和维护中，还没有领悟原子设计理论这一套，因此将大量的时间花在了制作和管理工作上。直到最近的某一天，回顾活动管线的时候，突然灵光一闪，将这块的工作和原子设计理论融合了，才有了这样的理解。

这篇文章，我会细化分析“原子设计理论”，阅读完后你会更加具象化地明白它的重要性。

 

在陈述性知识飞跃至程序性知识过程中的第一步，自然是先明白原子设计理论的创作背景、定义以及基本内容。

 

（Atomic Design）理论最早是由国外网页设计师Brad Frost提出的，他从化学元素周期表中得到启发，发现原子结合在一起，可以形成分子，进一步形成组织。

进而推导出原子设计方法：由 5 个不同的阶段组成，用更加科学和层次分明的方式进行设计。

（Atoms）：构成页面的基本元素。

（Molecules）：由多个原子构成的简单UI组合.

（Organisms）：由原子及多个分子组成的相对复杂的UI聚合物。

（Templates）：将以上元素进行排版，排列出来的新的完整的草稿。

（Pages）：将实际内容放在特定模板产生出的最终结果。

 

以上比较难理解的部分是

（Templates）和

（Pages）的区别，举个例子说明：人体的构成都是头+身体+四肢的组合，这个组合我们称之为模板；虽然人都是同一个模板，但最终每个人的长相、形态各不一样，因此我们看到的最终样貌即为

（Pages）。

 

如果把一款游戏比作为

（Pages），你在玩一款游戏的时候，游玩的整体感受应该是一致的，这是一种抽象的描述，我需要你去思考它为什么是一致的。

一款游戏整体感受一致，那它应该被解构为：

三者一致。（老朋友游戏体验模型的概念）

美术风格解构为：角色形象、场景美术、UI、特效、镜头、动态节奏的一致。

其中UI的一致可以解构为：交互、视觉表现一致。

拆分到不能再继续时，我们得到的那个产物即是我们的

（Atoms）。

我们确定了原子，进而可以推导分子的组合，到UI风格的一致，最后是游戏保持体验上的一致；

再一个，游戏是团队合作的产物，原子设计理论能够大幅度提高团队效率，这个后面我会做说明。

接下来我会以示例说明原子设计的意义，主要是原子设计在游戏UI的实际应用。

 

从一个最简单的示例入手，如下图，为什么四张海报看起来感受是一样的？

我问的当然不是抽象的描述，我需要的是具象化的答案。

我们通过原子设计理论先将其中一张海报进行拆分：

海报的组成模板：

。

继续拆分，并将这些可变的原子和不可变的原子标注，形成了简单的规范，如图

将不变的原子组合，这就是我们需要的模板。当我们替换掉可改变的原子后，画面仍旧保持一致。

 

这个方法需要我们先制作出一张足够优秀的海报图，再将其拆分成原子，定义变量和不变。通过这样具象的方式形成的模板，就是原子设计思维的体现，而不再是像外行人看的是感觉一致的抽象描述。

而这样的形式，只需要做一张图，将原子定义好，分发到不同人、不同公司手中，能够减少非常多的沟通时间；

 

相同类型的设计，基于原子设计理论的变化还有很多；同样的方法，将类型图进行分解至原子，再重新组合变成新的且类似的设计图。

这种比较基础的原子设计理论主要意义是在解决工业化的问题，在视觉上的运用维度相对小一些。合理的使用原子组合，除了保持页面的调性外，更能控制个人的成本（沟通和管理成本）

 

以上是一些关于视觉设计的原子设计理论的使用方法，接下来先讲一下系统UI的运用。

我们要做一个系统界面，第一步是先设计整个页面，解决功能和排版、优先级的问题（即快速风格稿，不清楚的去看游戏UI核心设计思路）。这里还有一点需要说明：

我们通过快速风格稿得到的上图，因为还不是最终效果图，因此我定义它为

（Templates），而现在要做的是将它拆分到原子的部分，具体流程如图所示。

以上，我们定义了组织结构、分子和原子。

原子不仅仅是上图这几个个简单的图形，你只看到了简单的部分。

真实的原子是：

都是隐形且需要确定的的属性。如图

把设定的原子规范的越精准，分子的差异性就会越小，往后也就会依次减小。

，因为下一步就是去验证原子的结构的合理性。

 

刚刚我们是将一个完整的内容拆分成了若干原子，第二步我们在现有原子的基础上，（在功能范围内）创造出不同的分子组合，有了这些分子，我们就能够组成更多的组织，将组织组合成新的模板，具体流程如图所示

这个阶段，我们能够

，那证明原子的设计是合理的，下一步就是在此基础上细化、调优原子、分子的设定。

假设因为多个模板的结构出现了问题，证明我们设定的原子、分子结构不合理，那就需要去修改原子和分子的设定，然后再通过更加完善的原子、分子结构，通过上述的方法再次去验证合理性。

 

现在来回忆一下，我们刚刚做了什么。

我们是不是在干这样一件事？

这时在你的脑子里，

现在对你而言，改动的影响并非是抽象性的。

当然，这个过程是非常辛苦的，需要反复经历痛苦的过程，但是结果是多维度的提升，思考的方式会从设计师变成了“工程师”。

保持页面的一致性，就像你看了一部迪士尼的动画，要则么把那么多的人物设计要如何保持一致。

一款游戏的体验性一致，也是有最基础的原子一致性构成的，视觉的一致性，交互的一致性，节奏的一致性等等。

 

其实很多人听到原子设计的工业化时，都将他们理解为标准化和限制创造性；

但事实是，当你真正找到了如何使用原子设计的方法时，

：哪些工作是可以依赖于原子设计保持继续设计的内容，哪些内容是基于或跳脱原子设计更创新的内容，给与不同的时间和成本倾斜，有助于把时间花在刀刃上！

再一个，创造性的前提是基础性，产品最重要的不是创造性达到100分，而是所有基础方面都能先达到60分，这个时候才有精力去完成创作。

 

 

单独设计一个按钮和其他元素，然后乞求一切堆积起来能够形成一个一致性的整体，这是愚蠢的想法；反过来也是如此，希望通过设计一个页面，然后希望这个页面就能代替其他页面，这更是天方夜谭。

就像是其他的人还在看人生的5-10年的时间段，而你看到的是从1-100年的全过程，假设要改变40岁的命运，对别人来说是迷茫的，但是在你这里只是一个功能的解决罢了，这样想来是不是有一种掌控全局的感受。

 

以上就是我理解的原子设计理论，也希望大家能够多总结，我也是从总结当中发现了别人没有看到的亮点。

 最后，推荐日本的一个设计启蒙视频《啊！设计》，虽然是给小孩子看的，但是能够让你理解事物的本质。