基于組件的設(shè)計(jì)方法通常在大型復(fù)雜的設(shè)計(jì)項(xiàng)目中才會(huì)談?wù)摰?。在這篇文章中，我們將說明的是，它對(duì)于小型項(xiàng)目和團(tuán)隊(duì)來說也是非常有益的。無論項(xiàng)目大小，運(yùn)用這個(gè)方法，設(shè)計(jì)效果都是立竿見影的。

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

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

什么是基于組件的設(shè)計(jì)？

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

一致性

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

元素

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

組件

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

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

組合

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

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

布局

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

頁(yè)面

最后一個(gè)部分是項(xiàng)目的實(shí)際頁(yè)面。每個(gè)頁(yè)面由各種組合和組件的排列組成。

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

讓我們來看一個(gè)非常簡(jiǎn)單的基于組件設(shè)計(jì)的例子。

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

現(xiàn)在，我們要將三種門票編為一組同時(shí)展示在頁(yè)面上。這就需要我們來設(shè)計(jì)門票構(gòu)成組合。這個(gè)組合規(guī)范了各個(gè)門票組件的間距,以及標(biāo)題。

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

Sketch

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

花更少的時(shí)間來定義所有的文字樣式可以節(jié)省大量的時(shí)間。

后記

簡(jiǎn)而言之，基于組件的設(shè)計(jì)使我們能夠快速設(shè)計(jì)出許多易于維護(hù)和更新的項(xiàng)目。多個(gè)設(shè)計(jì)師可以同時(shí)地在一個(gè)項(xiàng)目上工作也能保持項(xiàng)目的一致性，因?yàn)橐磺薪M件都被明確定義。

原文作者：Lewis+Humphreys

翻譯：Mockplus團(tuán)隊(duì)翻譯整理