原子设计方法论原子，分子，有机体，模板和页面

作者：Brad Frost 翻译：bluesbone 校对：逗砂

其它章节

我对界面设计系统方法论的探索引导着我在其他领域和行业寻找灵感。鉴于我们创造的这个令人惊讶的复杂世界，我们可以从其它解决了类似问题的领域中学习和借鉴。事实证明，许多其它领域如工业设计和建筑学已经开发出智能模块化系统用来制造非常复杂的东西，如飞机、轮船还有摩天大楼。

但我最初的探索一直在关注着自然世界，这让我想起了高中时坐在化学实验室的那些模糊的回忆。

# 在化学中发现线索

我的高中化学课老师名叫Rae，他是一名严肃的越战退役老兵，有着一副令人印象深刻的怪胡子。Rae先生班级的课程是全校最难的，这很大程度上是因为他要求学生完成大量配平化学方程式的练习。

如果你像我一样需要回忆一下化学方程式是啥样的，那可以看看下面这张图：

氢原子和氧原子结合形成水分子的化学方程式

化学反应由化学方程式来表示，化学方程式通常显示原子是如何一起结合形成分子的。在上面的例子中，我们看到氢和氧是如何结合在一起形成水分子的。

在自然界中，原子结合在一起形成了分子。这些分子还可以进一步结合形成更为复杂的有机体。 让我来深入阐述一下：

原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质，并且它们一旦被分解就会失去其意义。（真实的原子的确是由更小的一些单位元素组成的，如质子、电子和中子，但原子是最小的功能单位。）

分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质，并且相较于原子来说，更具实际意义和可操作性。

有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。

当然，我已经简化了宇宙中令人难以置信的复杂成分，但基本要点仍然是：原子结合在一起，形成分子，进一步结合形成的生物体。原子理论意味着在已知宇宙中的所有事物都可以分解为一组有限的原子元素：

化学元素周期表。

显然，Rae先生让学生配平那些令人头皮发麻的成吨化学方程式的策略奏效了，因为这么多年过去了，那些方程式竟给予了我界面设计的灵感。

# 原子设计方法论

现在，你可能会奇怪为什么我们要谈论原子理论，也许你甚至对我迫使你重温高中化学课有些生气。但是，相信我，马上你就会眼界大开。

我们之前讨论了为何宇宙中的物质都可以被分解成为原子元素。碰巧的是，我们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”完美阐述了我们所有的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。

Josh Duck的“HTML元素周期表”

因为我们从构建一个类似的小模块开始，我们可以应用这种在自然世界中发生的过程来设计和开发我们的用户界面。

现在，就让我们正式开始原子设计吧！

原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和更具层次的方式创建界面设计系统。 原子设计的五个阶段分别是：

原子
分子
有机体
模板
页面

原子设计由原子、分子、生物体、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。

原子设计不是一个线性的过程，它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。现在，让我们更深入的了解每一个阶段。

# 原子

如果原子是物质的基础组成部分，那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了。这些原子包括了基本的HTML元素，例如表单标签，输入，按钮，和其他除非损坏其功能否则不能进一步拆解的元素。

原子包括基本的HTML标签，如输入，标签和按钮。

在自然界中的每个原子有它自独特的性质。一个氢原子包含一个电子，一个氦原子包含两个电子。这些内在的化学性质对其实际应用产生深远的影响（例如，兴登堡爆炸这场灾难的原因正是由于飞船充满了极易燃的氢气和惰性气体氦）。类似的，每个界面原子有它自己独特的性质，如主要图像的尺寸或主标题的字体大小。每个原子被天生特性所影响的这种想法应该应用于更广泛的用户界面系统中去。

在模式库中，原子一目了然地展示了所有的基本样式，当你回来继续开发和维护你的设计系统时，这是一份很有用的参考。和自然界的原子一样，界面原子不在真空中，它们的生命因APP的存在而存在。

# 分子

在化学中，因分子键合在一起的原子的基团获得了不同的新属性。例如，水分子和过氧化氢分子具有完全不同的独特性质和表现，即使它们是由相同的原子元素（氢和氧）组成的。

在界面中，分子就像是一个由UI元素组成的相对简单的组织。例如，一个表单标签，搜索框和按钮共同打造一了个搜索表单分子。

一个搜索表单分子是由标签原子，输入原子和按钮原子组成。

在合并后，这些抽象的原子突然就有了共同的目的。标签原子现在定义了输入原子。点击按钮原子现在可以提交表单。得到的结果是一个可以应用在任何搜索功能区的简单、便携、可重复使用的组件。

将元素组装为简单的功能组是我们一直以来构建用户界面的方式。但是，原子设计方法论，这些相对简单的组件为我们提供了一些引人深思的见解。

创建简单的组件可帮助UI设计人员和开发人员坚持单一职责原则，这个古老的计算机科学指南鼓励大家“做一件事就要把它做好”的心态。加重单一模式的复杂性会使得软件变得无比难用。因此，创建简单的UI分子使测试更容易，鼓励了可重用性，并促进整个界面的一致性。

现在我们有简单、功能强大且可重复使用的组件，我们可以把它放在更广泛的环境中。进入有机体！

# 有机体

有机体是由分子或原子或其它有机体组成的相对复杂的UI组分。这些有机体组成了界面的不同部分。

让我们重温一下我们的搜索表单分子。一个搜索表单可以经常在许多Web页面的顶端标题部分找到，所以让我们看看把那个搜索表单分子导入header有机体中是什么样子的。

这个header有机体是由搜索表单分子、LOGO原子、主导航分子构成的。

header形成界面的独立部分，即使它包含几个具有自己独特的属性和功能的小界面。

有机体可以包含相同或不同的分子类型。标题有机体可能包含不同的元素，如LOGO图像，主导航列表和搜索表单。我们几乎每个访问的网站都会看到这些类型的有机体。

像网站header这样的生物体包含较小的分子，如主导航，搜索表单，实用工具导航和LOGO。

虽然一些有机体可能由不同类型的分子组成，但也有有机体可能由相同的分子不断重复组成。例如，访问几乎所有电子商务网站的分类页面，都会看到以某种网格形式显示的产品列表。

Gap电子商务网站上的产品网格有机体由相同的产品项目分子反复叠加而成的。

从建立分子到建立更精细的有机体，这为设计师和开发人员提供了重要的内容构建思路。有机体证实了这些更小的、更简单的成分可以作为不同的模式而被反复的使用。产品栅格有机体可以在任何一个需要显示一组产品的地方使用，从类别列表到搜索结果到相关产品都是可以的。

现在我们在设计系统中定义了有机体，我们可以打破化学比喻，将所有这些组件应用于类似于Web页面的东西！

# 模板

现在，朋友们，是时候跟我们的化学比喻说再见了。原子，分子和有机体的这种语言有助于我们有意识地构造设计系统的组件。但是，最终我们必须采用一个更适合描述我们最终产出的语言，这对我们的客户、老板和同事更有意义。如果将化学类比用得太过火可能会让你的老板感到困惑，导致他们觉得你脑子不正常。请相信我！

模板是页面级别的对象，它将组件放置在布局中，并显示设计的底层内容结构。在我们前面的例子中，我们可以使用标题有机体并将其应用到首页模板。

主页模板由应用于布局的有机体和分子组成。

此主页模板展示了所有必要页面组件一起工作的情景，为这些相对抽象的分子和有机体提供了使用环境。在设计一个有效的设计系统时，必须在布局的环境中展示组件的外观和功能，以证明这些部件组成了一个功能良好的整体。关于这点我们后面会再次讨论。

模板的另一个重要特征是它们专注于页面的底层内容结构，而不是页面的最终内容。设计系统必须考虑内容的动态性质，因此，把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。

Mark Boulton讨论了定义页面底层内容结构的重要性：

您可以在不了解内容的情况下创造良好的体验。但是你是不可能在不知道内容结构的情况下创造良好体验的。重要的是你的内容是怎么制作而成的，而非你的内容是什么。——Mark Boulton

通过定义页面的框架，我们可以创建一个能够解决各种动态内容的系统，同时为填充某些设计模式的内容类型提供必要的护栏。例如，Time Inc.的主页模板显示了几个关键组件，同时还展示了有关图像大小和字符长度的内容结构：

Time Inc.的主页模板展示了内容的底层结构。

既然我们已经建立了我们网页的骨骼系统，那就让我们放一些肉在这些骨头上！

# 页面

页面是模板的具体实例，可以显示UI具有代表性的真实内容。基于我们前面的例子，我们可以使用主页模板并将代表性的文本，图像和媒体填充到模板中，以显示实际的内容。

页面阶段将占位符内容替换为有代表性的真实内容，使设计系统有了生命。

页面阶段是原子设计中最具体的阶段，由于一些众所周知的原因这个阶段非常重要。别忘了，这可是用户在访问您的界面时会实际看到和交互的内容。这也是您的利益相关者将会签署的界面。并且在这里你可以看到所有这些组件结合在一起形成一个即美观又好用的用户界面。多么令人兴奋！

除了演示用户所看到的最终界面之外，页面对于测试底层设计系统的有效性是必不可少的。在页面阶段，我们可以看到当将真实内容应用于设计系统时，所有这些模式如何运作。所有的一切看起来都很棒吗？如果答案是否定的，那么我们可以回过头去修改我们的分子、生物体和模板，以更好地满足我们内容的需求。

当我们将有代表性的真实内容投入Time Inc 的主页模板时，我们可以看到所有这些基础设计模式如何运作。

在页面阶段，我们可以看到Time Inc 的主页填充上真实的内容后看起来怎么样。有了实际的内容，我们就能看到组成页面的UI组件是否恰当地服务于内容。

我们必须创建一个这样的系统，既有可重复使用的设计模式，又能准确地反映我们放在这些模式中内容的真实性。

页面还提供了一个表达模板变量的地方，这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子：

用户在其购物车中有一个商品，另一个用户在其购物车中有十个商品。

网页APP的仪表板通常显示最近的活动，但是该部分对于首次使用的用户是禁用的。

一篇文章标题可能是40个字符长，而另一篇文章标题可能是340个字符长。

具有管理特权的用户与没有这些特权的用户相比可能会在信息中心上看到其他按钮和选项。

在所有这些例子中，底层的模板是相同的，但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子，有机体和模板的构建方式。因此，创建解释这些变量的页面有助于我们建立更具弹性的设计系统。

这就是原子设计！这五个不同的阶段同时协同工作，以产生有效的用户界面设计系统。我们总结一下原子设计：

原子是不能进一步分解的UI元素，并且是可以用作界面的元素构建块。
分子是用于形成相对简单的UI组件的原子集合。
有机体是形成界面各个部分的相对复杂的部件。
模板将组件放置在布局中，并演示设计的底层内容结构。
页面将真实内容应用于模板，演示最终界面中的各种变量，并测试设计系统的弹性。

# 原子设计的优点

那么为什么要经历这一切呢？原子设计好在哪？这些都是合理的问题，我们建立用户界面这么长时间，却没有一个明确的五阶段的方法论。但是原子设计为我们提供了一些关键的见解，帮助我们创建更有效、更深思熟虑的UI设计系统。

# 局部与整体

原子设计提供的最大优点之一是能够在抽象和具体之间快速转换。我们可以同时看到我们的界面分解成原子元素，也可以看到这些元素如何结合在一起形成我们的最后的体验。

原子设计允许设计者在抽象和具体之间进行转换。

Frank Chimero在他的书《设计的形状》中，精辟地阐述了这种转换所提供的力量：

画家在离画架远的地方，可以对作品进行整体评价和分析。他仔细观察，选择下一步怎么做，然后靠近画布去绘制。然后，他又一次退回去，看看他在整体上做了什么。不同环境之间的切换宛如舞蹈一般，工作室中噼里啪啦的节奏在制作和预估之间产生了一个紧密的反馈循环。——Frank Chimero

原子设计让我们在像画家Frank这样雄心勃勃地描述的情境之中舞蹈。构成我们界面的原子，分子和有机体并不是生存在真空中。我们的界面的模板和页面确实由较小的部分组成。我们的设计是一种“局部影响整体，整体影响局部”的关系，两者相互交织，原子设计包含了这一事实。

当设计师和开发人员正在制作特定的组件时，我们就像画布前描绘细节的画家。当我们在有代表性的真实内容的布局的环境下查看这些组件时，我们就像那个站在画布几英尺外的画家——思考着我们的细节如何影响整个构图。因此有必要在一个特定的组件上进行重新设计，以确保其功能，可用和美观。但是，在最终界面的呈现中也需要确保该组件具有功能，可用性和美观性。

原子设计为我们提供了一个界面局部和整体之间的导航结构，因此我需要再重申一次原子设计不是一个线性过程。孤立地设计按钮或者其他元素，却希望所有的东西在一起形成一个连贯的整体是十分愚蠢的。所以不要将原子设计的五个阶段解释为“步骤1：原子;步骤2：分子;步骤3：有机体;步骤4：模板;第5步：页面。“相反，应当将原子设计的“阶段”视为一种心理模型，允许我们同时创建最终的界面及其底层设计系统。

# 理清结构和内容之间的区别

讨论设计和内容有点像讨论鸡和蛋。Mark Boulton解释道：

内容需要结构化，而结构化会改变你的内容，同样设计也会改变内容。这不是“内容然后设计”，也不是“内容或设计”。这是“内容和设计”。——Mark Boulton

精心设计的设计系统满足了居住在其中的内容，精心制作的内容知道它是如何在界面的环境中呈现的。我们建立的界面模式必须准确地反映出文本，图像和其它在其中的内容。同样，我们的内容应该意识到它将以什么方式呈现。内容与设计之间的密切关系需要我们在构建界面时考虑清楚。

原子设计为我们提供了一种讨论我们的UI模式的结构以及这些模式内容的语言。虽然内容结构框架（模板）和最终内容（页面）之间看起来差别很大，但原子设计让我们认识到它们之间的联系是非常大的。如下图所示：

在左边，我们看到界面的内容框架，它由同一个“头像模块分子”多次重复构成。在右边，我们可以很明显地看到当我们用具有代表性的内容填充每个“头像模块分子”时会发生什么。通过可视化内容框架和具有代表性的最终内容，我们可以创建一个能够准确反映内容的模式。如果一个人的名字在模板中超过了五行，我们将需要在原子的级别上来解决这种破坏的行为。

我们在页面阶段输入我们的UI的内容将影响底层设计模式的特征和参数。

# 一个名字里有什么？

本书中提到的模块化设计与开发并不是什么新鲜事。那么，为什么我们非要坚持使用原子，分子和有机体这样的术语，而不是直接用像模块，组件，元素，部件和区域等？

只要我一谈起原子设计，就会有人向我提供各种各样的替代名称。有人会建议，“为什么不把它们命名为元素，模块和组件？”而另一个会建议：“为什么不把它们命名为基础，组件和模块？”像组件和模块这样的术语的问题是，不能从名称中推导出层次感。而像原子，分子和有机体意味着任何具有化学基础知识的人都会感觉到这种层次感。

话虽如此，但给事物命名是困难而且很难完美的。我所选择的原子设计阶段的名称对于我和我的团队来说都是非常好用的。但也许他们并不适合你和你的团队。但是已经很好了。以下是GE设计团队的一个观点：

当我们向我们的同事展示了我们最初的设计系统概念，并将原子设计分享给我们的同事时，我们遇到了一些困惑的表情。[...] 很明显，我们必须使用更加通俗易懂的分类名称才能使团队合作更加成功。——Jeff Crossman, GE设计

这个团队采用的分类是“原则”，“基础”，“组件”，“模板”，“特征”和“应用程序”。这些标签对你有意义吗？用什么词都不要紧！通过建立对其组织有意义的分类法，每个人都能够通过原子设计原则进行合作，共同开展有效的工作。

“原子设计”作为一个流行语，涵盖了模块化设计和开发的概念，这成为说服股东和与同事交谈最有用的简要说明。但原子设计不是一成不变的教条。最终，无论您选择使用哪种分类法，都可以帮助您和您的组织更有效地沟通，以制作出令人惊叹的UI设计系统。

# 将原子设计用于用户界面

原子设计是源自于网页Web的一个概念。毕竟，这个低调作者是网页设计师，这就是本书的主要关注点是基于Web的界面的原因。但重点是大家要清楚原子设计适用于所有用户界面，而不仅仅是基于Web的。

您可以将原子设计方法应用于任何软件的用户界面：Microsoft Word，Keynote，Photoshop，您银行的ATM……为了演示，我们将原子设计应用于本地移动应用程序Instagram。

原子设计应用于本地移动应用程序Instagram。

我们来看看这个“已分解成原子”的Instagram界面：

原子：Instagram的用户界面包括几个图标，一些文本元素和两种类型的图像：主图像和用户头像图像。
分子：几个图标形成简单的有效组件，如底部导航栏和用户可以对照片进行评论或点赞的照片操作栏。此外，文本和/或图像的简单组合形成相对简单的组件。
有机体：在这里，我们可以看到照片有机体的形状，包括用户的信息，时间戳，照片本身，照片周围的操作，以及有关照片的信息，包括计数和标题。这个有机体成为整个Instagram体验的基石，因为它在不间断的用户生成的照片流中反复堆叠。
模板：我们看到我们的组件在布局的环境中汇合在一起。另外，在这里，我们看到Instagram的内容框架，突出显示的动态内容——如用户的操作，头像，照片，计数和标题。
页面：最后，我们通过真正的内容注入看到了产品最终的样子，这有助于确保底层的设计系统组合在一起，形成一个美观实用的用户界面。

我特意展示了这个非网页的例子，主要是因为原子设计往往被误解为只服务于像CSS和JavaScript这样的网络技术。我必须澄清这一点：原子设计与特定web项目（如CSS或JavaScript架构）无关。在第一章中，我们讨论了设计和开发各个方面的模块化趋势，其中包括了CSS和Javascript。这些都是CSS和JavaScript中的大热趋势，但原子设计是处理和制作用户界面设计体统的方法，无需关心在技术方面如何实现它们。

# 原子设计——理论和实践

本章介绍了原子设计方法，并展示了一种通过原子，分子，有机体，模板和页面共同合作来制作精致界面的界面设计系统。原子设计使我们可以将我们的界面UI细分为原子元素，并允许我们同时逐步了解这些元素如何组合在一起形成最终的界面。我们了解到内容与设计之间的紧密联系，以及原子设计如何使我们能够制作适合其内部内容的设计系统。最后，我们学到了原子设计语言如何帮助我们与同事方便地讨论模块化，并在设计系统中提供了我们非常需要的层次感。

原子设计是一种有用的设计和开发方法，但基本上它只是构建界面的一种心理模型。现在你可能会想知道如何使用原子设计。亲爱的读者不用害怕，因为本书的其余部分将会着重于工具和过程，使你的原子设计梦想成真。

原文链接：http://atomicdesign.bradfrost.com/chapter-1/

如有翻译错误欢迎留言指出。