原子設計和草圖——改進工作流程的指南

Sketch 和 Atomic Design 是一組強大的工具和方法，設計師可以用來創建設計系統，實現標準化和更高效的工作流程。

設計系統：入門

設計系統是一組可重用的組件和指南，可幫助團隊在產品的創建和生命週期中圍繞共同語言團結起來。

在大多數情況下，設計系統由樣式指南和組件庫組成。 它們還可以包括聲音和語氣以及品牌價值等元素。 擁有設計系統的目的是創建一組標準，作為產品或品牌的單一事實來源。

Google 的 Material Design 是結構化 UI 設計系統的一個示例。 Material Design 早在 2014 年就被引入，作為設計和開發具有凝聚力的 Android 應用程序的一種方式。

另一個例子是 Mailchimp 的 Voice and Tone。 它描述了一個人的聲音如何始終相同，但語氣會根據上下文而變化。 意識到這一點有助於增強內容並賦予品牌個性。

雖然有許多不同的方法可用於創建設計系統，但選擇一個允許團隊圍繞通用語言和一組標準統一的框架是一個好主意。 原子設計是實現這兩個目標的框架的一個很好的例子。

原子設計：建築設計系統

原子設計是 Brad Frost 在 2013 年引入的一種方法，其理念是每個設計系統都可以定義為一系列共存的構建塊。

以下是原子設計組件的快速概述：

• 原子。 表示設計系統的基本構建塊。 一個示例是按鈕或文本樣式。
• 分子。 一組原子作為一個單元一起工作。 分子是有形的 UI 元素。 例如，可以將按鈕和文本字段分組以創建搜索表單。
• 有機體。 原子和分子在一個複雜的結構中協同工作。 與導航欄分組的搜索字段在網站上形成標題有機體。
• 模板。 將組件放置到定義內容結構的佈局中的頁面級對象。 例如，獲取標題有機體並將其放置在主頁模板上。
• 頁。 代表最終產品的模板實例。

“我們的任務是為更多的用戶在更多的環境中使用更多的瀏覽器在更多的設備上提供比以往更多的屏幕尺寸和更多功能的界面。 這確實是一項艱鉅的任務。 值得慶幸的是，設計系統可以提供幫助。”——Brad Frost 作為原子設計和設計系統的介紹。

使用原子設計來創建和維護設計系統將幫助設計師更有效地工作，並在他們的團隊中更好地溝通。 有大量的工具和方法可用於創建和維護設計系統，但通常最好的工具是我們最熟悉的工具。

如何在 Sketch 中使用原子設計

要使用 Atomic Design 開發設計系統，Sketch 是一個很棒的（並且已經很熟悉的）工具。 它為我們提供了創建原子、分子和有機體的畫布：定義設計系統核心所需的元素。

創建原子

我們首先在 Sketch 中創建三種類型的原子：符號、圖層樣式和文本樣式。

符號。 符號只不過是可重用的組件。 它們被定義一次，因為它們可以在整個產品中被實例化。 例如，可以使用邊框顏色、大小等屬性定義箭頭符號（原子）。然後我們可以重用這個符號，而不必每次都重新創建它。

圖層樣式。 圖層樣式是可重用的視覺樣式元素，在每個圖層中保持一致。 例如，先前定義的箭頭的填充顏色。

文本樣式。 文本樣式與圖層樣式類似，是可重複使用的元素，可確保相似文本對象之間的一致性。 例如，定義 h1 元素的字體大小和顏色。 它的工作方式類似於 Google Docs 或 Microsoft Word 中的文本樣式。

當我們定義符號、圖層樣式和文本樣式時，Sketch 可以在其符號和文本樣式菜單中使用“/”（正斜杠）將它們劃分為分層類別。 遵循命名約定並擁有一組明確定義的主類別將為文件提供有組織的結構，從而減少混亂和不一致。

以下是一些在 Sketch 中為符號、文本和圖層樣式創建分層類別的方法。

我們可以在Atoms/下使用以下建議的命名約定來表示符號：

• 資產
• 鈕扣
• 輸入控件
• 圖片
• 導航
• 信息

我們不會將圖層樣式轉換為符號，因此通過它們的語義組來識別它們就足夠了。 同樣，使用原子/：

• 填充
• 邊框
• 陰影
• 漸變

與圖層樣式類似，下面是我們如何在Atoms / 下創建文本樣式：

• 標題
• 身體
• 標題
• 標籤
• 鏈接

統一的設計語言不應該只是一組靜態規則和單個原子； 它應該是一個不斷發展的生態系統。——Airbnb on Building a Visual Language。

創建分子

原子定義了產品設計指南的基本部分，但它們本身並不完全有用。 為了獲得一些功能，我們將原子連接在一起並創建分子。

將標籤（原子）與輸入按鈕（原子）連接以創建搜索功能是常用分子元素的一個很好的例子。

請注意，這裡可能存在一些灰色區域。 代碼級別的按鈕被視為原子，但設計級別的按鈕被視為分子，因為我們將圖層樣式和文本樣式原子分組。 為避免任何混淆，最好只考慮代碼級元素。

屬於Molecules/的主要類別是：

• 信息
• 導航
• 輸入控件

由於分子將以交互方式開始塑造我們的產品，因此進一步定義上述類別是一個好主意。 在這種情況下，我們將定義一組代表模式庫的子類別：

• 下拉列表
• 切換
• 滑塊
• 標籤
• 分頁
• 進度指標
• 日期字段
• 文本字段
• 複選框
• 單選按鈕
• 模塊

創造有機體

有機體是原子和分子的組。 它們也可以是其他生物的一部分。

與原子和分子不同，有機體在我們設計的產品中沒有抽象的包含物。 它們是具體的、可重複使用的組件，可以通過特定操作輕鬆識別。 它們的結構比原子或分子更複雜。

如果先前定義的搜索字段與其他組件（如導航欄（分子）和徽標（原子））組合在一起，則會創建一個有機體。 一個示例是導航欄或日曆。

有機體，如分子，可以歸入相同的類別和子類別：

以下是我們將為 Organisms/ 創建的主要類別：

• 信息
• 導航
• 輸入控件

與分子一樣，我們還將為生物體創建子類別：

• 下拉列表
• 切換
• 滑塊
• 標籤
• 分頁
• 進度指標
• 日期字段

到目前為止，大部分 UI 都已經設計好了，所以現在它就像在設計需要時調用我們的組件實例一樣簡單。

通過它們的語義組很容易找到這些組件中的每一個，或者通過使用 Sketch 工具欄中的插入面板直接搜索它們，我們將在其中找到一組組織良好的 3 個主要類別，或者使用類似的插件Sketch 的賽跑者。

Runner for Sketch通過提供一組他們可以使用的鍵盤命令來優化設計師的工作流程，而不是在無盡的菜單中查找內容。 例如，他們可以鍵入單詞insert ，按Tab鍵並查找他們需要的組件。

通過輸入atom ，下拉列表將向我們顯示屬於該類別的所有元素。 如果原子和分子具有共享類別，則只會看到原子而忽略所有分子。

把它包起來

Sketch 和 Atomic Design 是一組功能強大的工具，可以一起使用來改進設計工作流程並促進有效的設計系統框架。

使用原子、分子和有機體的概念作為組件基礎，Atomic Design 幫助設計師在產品的創建和生命週期中圍繞共同語言統一。

設計人員可以使用 Sketch 等工具來實施原子設計，從而提供更高效的工作流程和一組標準，設計團隊中的每個人都接受這些標準，包括項目最後階段的開發人員。

進一步閱讀 Toptal 設計博客：

• 如何構建有效的設計框架
• 了解設計系統和模式
• 如何創建草圖樣式指南、庫和 UI 工具包
• 為什麼初創公司需要風格指南
• Zeplin Sketch 插件——設計和工程之間的工作流程橋樑