原子，分子，组织，模板，页面（Atoms, molecules, organisms, templates, and pages）

我对设计界面设计系统的方法论的研究引导我在其他领域和行业中寻找灵感。鉴于我们创造的这个极其复杂的世界，其他领域解决了我们可以学习并适用的类似问题似乎是很自然的。事实证明，其他领域（如工业设计和建筑）的负载已经开发了智能模块化系统，用于制造飞机，轮船和摩天大楼等极为复杂的物体。

但是我最初的探索让回到自然世界，这激发了我坐在高中化学实验室里摇摇欲坠的办公桌上的回忆。

从化学中寻找灵感

在自然界中，原子元素结合在一起形成分子。这些分子可以进一步结合形成相对复杂的生物。进一步说明：

• 原子（Atoms）是所有物质的基本组成部分。每个化学元素都有其独特的特性，在不失去其含义的情况下无法对其进行进一步分解。（是的，确实是原子由质子，电子和中子等更小的位组成，但是原子是最小的功能单元。）
• 分子（Molecules ）是两个或两个以上通过化学键结合在一起的原子的组。原子的这些组合具有其自身的独特特性，并且比原子更有形和可操作。
• 组织（Organisms ，译注：谷歌翻译为有机体，我的团队内部习惯称之为组织）是一起作为一个单元发挥作用的分子的集合体。这些相对复杂的结构可以从单细胞生物一直到人类等极其复杂的生物。

当然，我正在简化宇宙中难以置信的丰富组成部分，但基本原理仍然存在：原子结合在一起形成分子，然后进一步结合形成组织（Organisms ）。这种原子理论意味着，已知宇宙中的所有物质都可以分解为有限的原子元素集。

原子设计方法论

到现在为止，您可能想知道为什么我们要谈论原子理论，也许您甚至生我的气，因为强迫您重温高中化学课的回忆。但是，我保证这很有用。

前面我们讨论了如何将宇宙中的所有物质分解为一组有限的原子元素。碰巧的是，我们的界面可以分解为一组相似的有限元素。Josh Duck的HTML元素周期表很好地阐明了我们所有的网站，应用程序，内部网络，hoobadyboops以及其他所有内容都是如何由相同的HTML元素组成的。

html元素周期表

因为我们从一组有限的相似构建块开始，所以我们可以应用自然界中发生的相同过程来设计和开发我们的用户界面。

（开始）进入原子设计

原子设计是一种方法，它由五个不同的阶段组成，这些阶段共同工作，以更仔细和更分层的方式创建界面设计系统。原子设计的五个阶段是：（译注：括号内为我的团队内部对其的称呼，后文将不会特殊备注）

1. Atoms (原子)
2. Molecules （分子）
3. Organisms （组织）
4. Templates （模板）
5. Pages （页面）

原子设计是原子，分子，组织，模板和页面同时工作以创建有效的界面设计系统。

原子设计不是一个线性的过程，而是一个思维模型，在同一时间来帮助我们思考我们的用户界面既是一个整体和部分的集合。五个阶段​​中的每个阶段在我们的界面设计系统的层次结构中都扮演着关键角色。让我们深入探讨每个阶段。

原子

如果原子是物质的基本组成部分，那么我们界面的原子就可以作为构成我们所有用户界面的基础组成部分。这些原子包括基本的HTML元素，例如表单标签，输入，按钮，以及在不停止工作的情况下无法进一步分解的其他元素。

在模式库的上下文中，原子一目了然地展示了您的所有基本样式，这对于在开发和维护设计系统时不断回头是很有帮助的参考。但是，就像自然界中的原子一样，界面原子也不是在真空中存在，只有在应用中才能真正实现。

分子

在界面中，分子是相对简单的UI元素组，它们一起作为一个单元起作用。例如，表单标签，搜索输入和按钮可以结合在一起以创建搜索表单分子。

当结合在一起时，这些抽象原子突然具有目的。现在，label原子定义了input原子。现在单击button原子即可提交表单。结果是一个简单，可移植，可重用的组件，可以将其放置在需要搜索功能的任何位置。

现在，将元素组装成简单的功能组是我们构造用户界面时经常要做的事情。但是，将原子设计方法的一个阶段专用于这些相对简单的组件，可以为我们提供一些关键的见解。

创建简单的组件有助于UI设计人员和开发人员遵守单一职责原则，这是一个古老的计算机科学准则，它鼓励“做一件事情，把它做好（do one thing and do it well）”的心态。给单个模式增加过多的复杂性会使软件笨拙。因此，创建简单的UI分子可以使测试变得更容易，鼓励可重用性并促进整个界面的一致性。

组织

组织是由分子或者原子或者其他组织组成的相对复杂的ui组件。

这个头部组织由logo原子和导航tab分子以及搜索栏分子组成

虽然某些组织可能由不同类型的分子组成，但其他组织可能由一次又一次重复的同一分子组成。例如，访问几乎所有电子商务网站的类别页面，您都会看到以某种网格形式显示的产品列表。（译注：可以脑补京东和淘宝app里面浏览商品列表的界面，都是一个方框，里面主要由图片（或视频），标题，价格组成）

从分子积累到更精细的组织，为设计师和开发人员提供了重要的背景知识。组织表现出那些较小，较简单的动作成分，并作为可以反复使用的独特模式。产品网格组织可用于需要显示一组产品的任何地方，从类别列表到搜索结果再到相关产品。

模板

模板是页面级对象，可将组件放置在布局中并阐明设计的基础内容结构。在前面的示例的基础上，我们可以获取header组织并将其应用于首页模板。

template.png

该主页模板显示了一起运行的所有必要页面组件，从而为这些相对抽象的分子和组织提供了上下文。在设计有效的设计系统时，至关重要的是要在布局的背景下演示组件的外观和功能，以证明零件加起来能正常工作。我们将对此进行更多讨论。

模板的另一个重要特征是，它们专注于页面的基础内容结构，而不是页面的最终内容。设计系统必须考虑内容的动态性质，因此阐明组件的重要属性（例如标题和文本段落的图像大小和字符长度）非常有帮助。

页面

页面是模板的特定实例，这些模板显示了带有实际代表性内容的UI的外观。在前面的示例的基础上，我们可以将主页模板作为模板，然后将代表性的文本，图像和媒体倒入模板中，以显示实际的内容。

除了向用户展示最终界面时，页面对于测试基础设计系统的有效性至关重要。在页面阶段，我们可以了解将真实内容应用于设计系统时所有这些模式如何保持。一切看起来都不错，并且功能正常吗？如果答案是否定的，那么我们可以环回并修改分子，组织和模板，以更好地满足内容的需求。

我们必须创建能够建立可重用设计模式的系统，并且还必须准确反映我们要在这些模式内部放置的内容的真实性。

页面还提供了表达模板变化的地方，这对于建立健壮和相关的设计系统至关重要。以下是模板变体的一些示例：

• 一个用户的购物车中有一个商品，另一个用户的购物车中有十个商品。
• Web应用程序的仪表板通常会显示最近的活动，但是对于首次使用的用户，该部分将被隐藏。
• 一个文章标题的长度可能为40个字符，而另一个文章标题的长度可能为340个字符。
• 与非管理员用户相比，具有管理权限的用户可能会在其仪表板上看到其他按钮和选项。

在所有这些示例中，底层模板都是相同的，但是用户界面发生了变化，以反映内容的动态性质。这些变化直接影响基础分子，生物和模板的构建方式。因此，创建解决这些变化的页面有助于我们创建更具弹性的设计系统。

这就是原子设计！这五个不同的阶段同时工作，以产生有效的用户界面设计系统。概括地说原子设计：

• 原子是无法进一步细分的UI元素，它们是界面的基本构建块。
• 分子是形成相对简单的UI组件的原子的集合。
• 组织是形成界面离散部分的相对复杂的组件。
• 模板将组件放置在布局中，并演示设计的基础内容结构。
• 页面将真实的内容应用于模板，并阐明变化形式以演示最终的UI并测试设计系统的弹性。

原子设计的优点

那么，为什么要经历所有这些冗长的废话（rigamarole）？原子设计有什么用？考虑到我们已经建立用户界面很长时间了，而没有明确的五阶段方法，所以这些是有效的问题。但是原子设计为我们提供了一些关键的见解，可以帮助我们创建更有效，经过深思熟虑的UI设计系统。

• 部分和整体

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

构成我们界面的原子，分子和组织并非生活在真空中。而且我们界面的模板和页面确实由较小的部分组成。我们设计的各个部分影响整体，而整体则影响各个部分。两者交织在一起，原子设计也包含了这一事实。

当设计师和开发人员制作特定的组件时，我们就像画布上的画家创建详细的笔触。当我们在具有实际代表性内容的布局环境中查看这些组件时，我们就像画家在画布后面几英尺处评估其详细笔触如何影响整个构图。有必要将一个特定的组件置零，以确保其功能性，可用性和美观性。但是，也有必要确保组件在最终UI的上下文中功能正常，可用且美观。

原子设计为我们提供了一个在各部分和整个UI之间导航的结构，这就是为什么重申原子设计不是线性过程至关重要的原因。孤立地设计按钮和其他元素，然后跨过我们的手指，希望一切都聚在一起形成一个有凝聚力的整体，这是愚蠢的。因此，请勿将原子设计的五个阶段解释为“步骤1：原子；步骤2：分子；第三步：组织；步骤4：模板；步骤5：页面。” 取而代之的是，将原子设计的各个阶段视为一种思维模型，使我们能够同时创建最终的UI及其底层设计系统。

• 结构与内容之间的清晰分隔

讨论设计和内容有点像讨论鸡和鸡蛋。马克·布尔顿（Mark Boulton）解释：
内容需要结构化，结构化会改变您的内容，设计会改变内容。它不是“先有内容又有设计”或“内容或设计”。这是“内容与设计”。

原子设计为我们提供了一种用于讨论UI模式结构以及这些模式内部内容的语言。尽管内容结构的骨架（模板）和最终的内容（页面）之间有清晰的分隔，但原子设计认为这两者之间有很大的影响。

• 名字叫什么

在整本书中，我都提到模块化设计和开发并不是什么新鲜事物。那么，为什么我们只能坚持使用诸如模块，组件，元素，部分和区域之类的既定术语，而又引入诸如原子，分子和组织之类的术语呢？

在我一直在谈论原子设计的时候，我一直在为人们提供方法学阶段的替代名称。第一个人会建议：“为什么不仅仅给它们命名元素，模块和组件？” 而第二个人会建议：“为什么不仅仅给它们命名基础，组件和模块？” 诸如组件和模块之类的术语的问题在于，不能仅从名称中推断出层次感。原子，分子和组织暗示着一个层次结构，任何具有化学基础知识的人都可以希望绕开它的头。

话虽这么说，给事物命名是困难和不完善的。我为原子设计阶段选择的名称对我以及与我一起创建UI设计系统的团队非常有效。但是也许它们对您和您的组织都不起作用。这也不算什么。

团队使用的分类法是“原理”，“基础”，“组件”，“模板”，“功能”和“应用程序”。这些标签对您有意义吗？没关系 通过建立对他们的团队有意义的分类法，每个人都可以加入原子设计原则并共同开展有效的工作。

“原子设计”作为流行语封装了模块化设计和开发的概念，这对于说服利益相关者和与同事交谈是一个有用的捷径。但是，原子设计并不是严格的教条。最终，无论您选择使用哪种分类法，都应能帮助您和您的组织更有效地进行沟通，以构建出色的UI设计系统。

• 理论与实践中的原子设计

本章介绍了原子设计方法，并演示了原子，分子，组织，模板和页面如何协同工作以精心设计周到的，精心设计的界面设计系统。原子设计使我们能够看到将UI分解为原子元素，并且还使我们能够同时逐步完成这些元素如何结合在一起以形成最终UI的过程。我们了解了内容与设计之间的紧密联系，以及原子设计如何使我们能够设计适合生活在其中的内容的设计系统。最后，我们了解了原子设计的语言如何为我们提供了与同事讨论模块化的有用捷径，并为我们的设计系统提供了非常需要的层次感。

原子设计是一种有用的设计和开发方法，但从本质上讲，它只是用于构造UI的思维模型。现在，您可能想知道如何进行原子设计。好吧，亲爱的读者，不要担心，因为本书的其余部分集中在使您的原子设计梦想成真的工具和流程上。

小结：这一章正式提出了原子设计理论，正如同文末所说，不同的团队，甚至不同的开发者对界面的理解都不同，但是这个划分页面结构的理论是很好的，我个人通过vue项目实践之后觉得分子组件和组织组件其实是可以合并的，因为组件分太细的话团队的每个成员理解都不太相同，组织和分子容易混淆，而原子组件一般可以直接使用ui库中的组件而非自己创建，对于模板层组件的使用则需要小心，多人开发宁可不用模板级组件，或者页面只有一小部分简单的可高度复用的内容使用模板组件，因为一个模板级组件过于庞大就会使页面代码很难维护，vue组件中传入的变量可能都有上百行，不同的人开发可能熟悉代码就得花一段时间。我总结出来的比较好的页面表现方法是，多个组织、分子组件和简单的模板组件来组成页面，或者多个简单模板组件来组成页面，正如文中强调的，原子设计并不是线性的，我们并不是要把分子组件，组织组件都组合成模板再形成页面。

下一章 【译】原子设计3——工具集(节选)
译文目录在这里： https://www.jianshu.com/nb/47456777