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

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

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

        什么是基于組件的設計？

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

        一致性

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

        元素

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

        組件

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

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

        組合

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

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

        布局

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

        頁面

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

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