基于組件的設計方法通常在大型復雜的設計項目中才會談論到。在這篇文章中，我們將說明的是，它對于小型項目和團隊來說也是非常有益的。無論項目大小，運用這個方法，設計效果都是立竿見影的。

首先，我們要向布拉德弗羅斯特先生致敬，他寫下了關于原子設計的書籍。他在書中表明了對于設計的想法：不管是在設計網頁或者應用程序，實際上我們是在構建一個設計系統。

然而，我們發現這個關于原子設計的隱喻使不少用戶感到困惑。特別是抽象的命名方式令人望而生畏。因此，我們將自己團隊定義的基于組件的設計流程與大家分享，當然其中借鑒了不少優秀設計師的想法。

什么是基于組件的設計？

實質上，基于組件的設計是將UI分解成更小，命名清晰且更易于管理的組件。這些組件被分為以下六個部分。

一致性

這六個部分中的第一個要講的就是一致性，在這里我們定義了項目的核心品牌元素。字體，排版，主要和次要顏色都經過精心指定。之后，這些將在整個項目中使用。

元素

第二個定義了項目中可復用部分的最小層級：元素。譬如按鈕，鏈接，輸入框，下拉列表等都是常見的元素。每一個元素它們的狀態被定義為：如懸停，獲取焦點和禁用按鈕。我們的準則是：Define Once, Reuse Throughout The Project!

組件

當我們的工作到達一定規模時，就要用到第三個可復用的部分– 組件。在我們設計應用程序和網頁設計時，屏幕上的模塊都是組件。組件可以是由多個元素組成的，像主角卡片和導航菜單就是典型的例子。然而，組件也并不一定要模塊化。

在設計組件時，我們還會為每個項目的響應大小（或斷點）立即創建它們的版本。這樣我們就不用回溯到幾周前設計的屏幕上，并且設法讓它們適用于智能手機。響應目標與客戶端事先達成一致，以確保每個組件都是相應設計的。

組合

我們的工作再進一規模，就到了第四部分：組合。組合是包含多個不同組件，它們定義了它內部組件的行為方式。

下面是一個簡易的單列布局例子，它只定義了組合的組件間距，標題以及組件內容的循環使用！

布局

第五大部分布局是更抽象的設計原則集合。這里定義了間距，柵格和包裝器的元素數量。通過這樣定義，其他設計者可以輕松地進入項目并使用現有的樣式規范。

頁面

最后一個部分是項目的實際頁面。每個頁面由各種組合和組件的排列組成。

所有超出預期的東西都是在頁面這個層級中定義的。例如營銷部門的朋友認為聯系人頁面應該是藍色的背景，那么我們只在頁面級別添加，不涉及其他層級。

讓我們來看一個非常簡單的基于組件設計的例子。

我們正在出售一些門票，需要展示三種不同風格的門票卡片。每個卡片的呈現方式是一致的，都只包含按鈕和一些文字。在這種情況下，門票卡片就應該被設計為組件，即所謂的“門票組件”。

現在，我們要將三種門票編為一組同時展示在頁面上。這就需要我們來設計門票構成組合。這個組合規范了各個門票組件的間距,以及標題。

在項目推出幾天后，客戶表示門票售完需要增添。這意味著我們只需更新“門票組合”并將其發送給開發人員。非常快捷！

Sketch

總所周知，Sketch已成為設計師進行UI/UX設計的首選。利用Sketch的文字樣式，元件和畫板，我們可以極快地分析和調整我們基于組件的設計工作流程。我們開發了一個精美的Sketch模板，其中涵蓋了所有這些原則，因此我們可以快速地設計項目。

花更少的時間來定義所有的文字樣式可以節省大量的時間。

后記

簡而言之，基于組件的設計使我們能夠快速設計出許多易于維護和更新的項目。多個設計師可以同時地在一個項目上工作也能保持項目的一致性，因為一切組件都被明確定義。

原文作者：Lewis+Humphreys

翻譯：Mockplus團隊翻譯整理