Industries such as Architecture or Industrial Design have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Atomic Design was proposed as a system that involves breaking down a website or web application into its basic components so that they can be reused throughout the site. Due to new devices with new screen sizes, that are getting released each year, creating pixel-perfect design gets harder if no systems are put in place.

建筑或工业设计等行业已经开发了智能模块化系统，用于制造飞机，轮船和摩天大楼等极其复杂的物体。 受此启发，Atomic Design被提议为一个系统，它涉及将网站或Web应用程序分解为基本组件，以便可以在整个站点中重复使用它们。 由于每年都会发布具有新屏幕尺寸的新设备，因此如果没有适当的系统，创建像素完美的设计将变得更加困难。

Approaching this problem, Brad Frost coined the term and methodology of atomic design. The web designer, speaker, and writer is the author of Atomic Design and he says that:

为了解决这个问题， 布拉德·弗罗斯特 ( Brad Frost)创造了原子设计的术语和方法。 网页设计师，演讲者和作家是Atomic Design的作者，他说：

‘Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.’

“原子设计不是线性过程，而是一种心理模型，可以帮助我们将用户界面既看作是一个整体，又是一部分的集合。”

In this piece, I’d like to point 4 things you should know about Atomic design and how you as a designer could benefit from it.

在这篇文章中，我想指出关于原子设计以及您如何从中受益的4件事。

1. Definition of Atomic Design原子设计的定义
2. Atomic Design and Interface Inventory原子设计和接口清单
3. Atomic Design and Design Systems原子设计与设计系统
4. Benefits of Atomic Design原子设计的好处

原子设计的定义 (Definition of Atomic Design)

Atomic Design, introduces a methodology for creating scalable systems, reusable components as well as design systems. In the early days of the web, we’ve had limited ‘pages’ that were not responsive or scalable. There are five distinct levels in atomic design:

原子设计介绍了一种用于创建可伸缩系统，可重用组件以及设计系统的方法。 在网络的早期，我们只有有限的“页面”，这些页面没有响应性或可扩展性。 原子设计有五个不同的层次：

• Atoms represent the smallest entity in UI elements and they can’t be broken down any further. Think of them as Lego blocks. They serve as the foundational building blocks of your interface. Some examples are: form labels, inputs, buttons, components, colors, fonts, animations, single images.

  原子代表UI元素中的最小实体，它们无法进一步细分。 认为它们是乐高积木。 它们充当界面的基础构建块。 一些示例是：表单标签，输入，按钮，组件，颜色，字体，动画，单个图像。

• Molecules are groups of atoms bonded together that take on distinct new properties. They form relatively simple UI elements functioning together as a unit. Some examples are: a form label, search input, and button.

  分子是键合在一起的原子团，具有独特的新特性。 它们形成了相对简单的UI元素，它们作为一个单元一起工作。 一些示例是：表单标签，搜索输入和按钮。

• Organisms are relatively complex UI components composed of groups of molecules and/or atoms. Most organisms can function on their own, without relying on other elements on the page. Some examples are: navigations, sidebars, forms, and popups.

  生物是由分子和/或原子的组组成的相对复杂的UI组件。 大多数生物可以独立运行，而无需依赖页面上的其他元素。 一些示例是：导航，侧边栏，表单和弹出窗口。

• Templates are pages without real content and articulate the design’s underlying content structure. Essentially, they combine organisms into a proper website layout.

  模板是没有实际内容的页面，并且阐明了设计的基础内容结构。 从本质上讲，它们将有机体组合成适当的网站布局。

• Pages are specific instances of templates that demonstrate the final UI looks like and with real representative content in place.

  页面是模板的特定实例，这些模板展示了最终的UI外观并具有真实的代表性内容。

原子设计和接口清单 (Atomic Design and Interface Inventory)

How do atomic design and interface inventory belong to each other? First let’s define what one of the biggest problems in product development is: the lack of design consistency. By creating a common language for the product development team, you can utilize the atomic design methodology to prevent inconsistencies. This common language is called your interface inventory. You can imagine it as a neatly organized box with all the pieces of your product.

原子设计和接口清单如何相互关联？ 首先，让我们定义产品开发中最大的问题是：缺乏设计一致性。 通过为产品开发团队创建通用语言，您可以利用原子设计方法来避免不一致。 这种通用语言称为您的界面清单。 您可以将其想象成一个包含所有产品片段的整齐有序的盒子。

Brad Frost defined an interface inventory as:

Brad Frost将接口清单定义为：

‘…a comprehensive collection of the bits and pieces that make up your interface.’

“……构成界面的点点滴滴的全面收集。”

Your interface inventory works as a tool for designers as well as developers — it allows everyone to participate in the conversation while keeping elements consistent and at high quality.

界面清单是设计人员和开发人员的工具，它使每个人都可以参与对话，同时保持元素的一致性和高质量。

原子设计与设计系统 (Atomic Design and Design Systems)

Some of you might think, what actually is a Design system and how is it different to an Interface Inventory? In my eyes, the best definition was provided by Audrey Hacq:

你们中有些人可能会认为，设计系统实际上是什么，它与接口清单有什么不同？ 在我看来，最好的定义是奥黛丽·哈克 ( Audrey Hacq )提供的：

‘A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.’

“设计系统是真理的唯一来源，它将所有要素归为一类，使团队可以设计，实现和开发产品。”

She explains further that

她进一步解释说

‘…a Design System is not a deliverable, but a set of deliverables. It will evolve constantly with the product, the tools and the new technologies.’

'…设计系统不是交付物，而是一组交付物。 它会随着产品，工具和新技术的发展而不断发展。”

So how is it different from an interface inventory? An interface inventory is showcasing the status quo and the different phases in a product’s life. In comparison, a design system keeps on evolving and acts as the single source of truth to return to for each product team member. Its fundamental purpose is to facilitate the work from all teams involved which reaches from the design team to the development team, etc.

那么它与接口清单有何不同？ 界面清单显示了产品寿命的现状和不同阶段。 相比之下，设计系统不断发展，并成为每个产品团队成员返回的唯一事实来源。 它的根本目的是促进从设计团队到开发团队等所有团队的工作。

A well defined and documented interface inventory, however, can be a good starting point to create a design system.

但是，定义明确且有据可查的接口清单可能是创建设计系统的良好起点。

原子设计的好处 (Benefits of Atomic Design)

Atomic design can require considerably more thought and planning, but it’s often worth the extra effort. So what are the main benefits of it?

原子设计可能需要大量的思考和计划，但是通常值得付出额外的努力。 那么它的主要好处是什么？

• Building a component-based system — When we are breaking down our components into basic atoms, it becomes easier to see what atoms can be combined or mixed and matched to form other molecules or organisms. It helps us to navigate between atomic parts and the whole of our UIs.

  建立基于组件的系统 -当我们将组件分解为基本原子时，将更容易看到可以组合或混合和匹配哪些原子以形成其他分子或生物。 它帮助我们在原子部分和整个UI之间导航。

• Style guide creation becomes simple — Applying the atomic design principles from the get-go, which means that all the atoms and molecules are created before the site is built, you can incorporate all your atoms and molecules into your style guide. This keeps your design consistent across platforms.

  样式指南的创建变得很简单 -从一开始就应用原子设计原则，这意味着在构建站点之前创建了所有原子和分子，您可以将所有原子和分子合并到样式指南中。 这样可以使您的设计在各个平台之间保持一致。

• Easy-to-read code that is more consistent — The code of ‘atomically’ designed websites is typically much easier to read than one created a more traditional way. Consistency is given when you use predefined atoms in order to create the site layout. It makes it easy to see which components are being used for different parts of the site. This reduces the tendency of duplicate code on the site.

  易于阅读的代码更加一致—与以传统方式创建的网站相比，“以原子方式”设计的网站的代码通常更易于阅读。 当您使用预定义的原子来创建站点布局时，将给出一致性。 通过它可以轻松查看站点的不同部分正在使用哪些组件。 这减少了站点上重复代码的趋势。

• Faster Prototyping and updating — By having a defined list of atoms before the creation process begins eventually means that you can mock-up pages quickly and easily. You simply pick and combine the required elements for the site. If an update is necessary, only one atom, molecule or organism is changed at a time. This simplifies any updates to a component that is carried out across to all other instances.

  更快的原型制作和更新 -通过在创建过程开始之前拥有定义好的原子列表，最终意味着您可以快速轻松地模拟页面。 您只需选择并组合该站点所需的元素。 如果需要更新，则一次只更改一个原子，分子或生物。 这简化了对所有其他实例执行的组件更新。

Atomic design breaks the UI of a site down into Atoms, Molecules, Organisms, Templates, and Pages. By breaking a page down into these different elements, we create a mental model that helps with constructing a UI. As Stephen Hay says:

原子设计将网站的用户界面细分为原子，分子，生物，模板和页面。 通过将页面分解为这些不同的元素，我们创建了有助于构建UI的思维模型。 正如史蒂芬·海伊(Stephen Hay)所说：

‘We’re not designing pages. We’re designing systems of components.’

'我们不是在设计页面。 我们正在设计组件系统。

Atomic Design might be time-consuming, but the whole team can benefit from its advantages.

原子设计可能很耗时，但是整个团队都可以从其优势中受益。

Thanks for reading! If you want to collaborate, talk about UX design, or just chat, hit me up via LinkedIn.

谢谢阅读！ 如果您想合作，谈论UX设计，或者只是聊天，请通过 LinkedIn 打我 。