原子設計

重點 (Top highlight)

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.

建筑或工業(yè)設計等行業(yè)已經開發(fā)了智能模塊化系統，用于制造飛機，輪船和摩天大樓等極其復雜的物體。 受此啟發(fā)，Atomic Design被提議為一個系統，它涉及將網站或Web應用程序分解為基本組件，以便可以在整個站點中重復使用它們。 由于每年都會發(fā)布具有新屏幕尺寸的新設備，因此如果沒有適當的系統，創(chuàng)建像素完美的設計將變得更加困難。

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)創(chuàng)造了原子設計的術語和方法。 網頁設計師，演講者和作家是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件事。

Definition of Atomic Design

原子設計的定義

Atomic Design and Interface Inventory

原子設計和接口清單

Atomic Design and Design Systems

原子設計與設計系統

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:

原子設計介紹了一種用于創(chuàng)建可伸縮系統，可重用組件以及設計系統的方法。 在網絡的早期，我們只有有限的“頁面”，這些頁面沒有響應性或可擴展性。 原子設計有五個不同的層次：

graphic by Brad Frost圖片來自Brad Frost

• 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元素中的最小實體，它們無法進一步細分。 認為它們是樂高積木。 它們充當界面的基礎構建塊。 一些示例是：表單標簽，輸入，按鈕，組件，顏色，字體，動畫，單個圖像。

graphic by Brad Frost圖片來自Brad Frost

• 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元素，它們作為一個單元一起工作。 一些示例是：表單標簽，搜索輸入和按鈕。

graphic by Brad Frost圖片來自Brad Frost

• 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組件。 大多數生物可以獨立運行，而無需依賴頁面上的其他元素。 一些示例是：導航，側邊欄，表單和彈出窗口。

graphic by Brad Frost圖片來自Brad Frost

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

  模板是沒有實際內容的頁面，并且闡明了設計的基礎內容結構。 從本質上講，它們將有機體組合成適當的網站布局。

graphic by Brad Frost圖片來自Brad Frost

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

  頁面是模板的特定實例，這些模板展示了最終的UI外觀并具有真實的代表性內容。

graphic by Brad Frost圖片來自Brad Frost

原子設計和接口清單 (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.

原子設計和接口清單如何相互關聯？ 首先，讓我們定義產品開發(fā)中最大的問題是：缺乏設計一致性。 通過為產品開發(fā)團隊創(chuàng)建通用語言，您可以利用原子設計方法來避免不一致。 這種通用語言稱為您的界面清單。 您可以將其想象成一個包含所有產品片段的整齊有序的盒子。

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.

界面清單是設計人員和開發(fā)人員的工具，它使每個人都可以參與對話，同時保持元素的一致性和高質量。

原子設計與設計系統 (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.’

“設計系統是真理的唯一來源，它將所有要素歸為一類，使團隊可以設計，實現和開發(fā)產品。”

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.’

'…設計系統不是交付物，而是一組交付物。 它會隨著產品，工具和新技術的發(fā)展而不斷發(fā)展。”

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.

那么它與接口清單有何不同？ 界面清單顯示了產品壽命的現狀和不同階段。 相比之下，設計系統不斷發(fā)展，并成為每個產品團隊成員返回的唯一事實來源。 它的根本目的是促進從設計團隊到開發(fā)團隊等所有團隊的工作。

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

但是，定義明確且有據可查的接口清單可能是創(chuàng)建設計系統的良好起點。

原子設計的好處 (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.

  樣式指南的創(chuàng)建變得很簡單 -從一開始就應用原子設計原則，這意味著在構建站點之前創(chuàng)建了所有原子和分子，您可以將所有原子和分子合并到樣式指南中。 這樣可以使您的設計在各個平臺之間保持一致。

• 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.

  易于閱讀的代碼更加一致—與以傳統方式創(chuàng)建的網站相比，“以原子方式”設計的網站的代碼通常更易于閱讀。 當您使用預定義的原子來創(chuàng)建站點布局時，將給出一致性。 通過它可以輕松查看站點的不同部分正在使用哪些組件。 這減少了站點上重復代碼的趨勢。

• 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.

  更快的原型制作和更新 -通過在創(chuàng)建過程開始之前擁有定義好的原子列表，最終意味著您可以快速輕松地模擬頁面。 您只需選擇并組合該站點所需的元素。 如果需要更新，則一次只更改一個原子，分子或生物。 這簡化了對所有其他實例執(zhí)行的組件更新。

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:

原子設計將網站的用戶界面細分為原子，分子，生物，模板和頁面。 通過將頁面分解為這些不同的元素，我們創(chuàng)建了有助于構建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.

原子設計可能很耗時，但是整個團隊都可以從其優(yōu)勢中受益。

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

謝謝閱讀！ 如果您想合作，談論UX設計，或者只是聊天，請通過 LinkedIn 打我 。

翻譯自: https://uxdesign.cc/4-things-you-need-to-know-about-atomic-design-e0d3e8269420

原子設計

總結

以上是生活随笔為你收集整理的原子设计_您需要了解的有关原子设计的4件事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。