基于組件的設(shè)計(jì)往往在大型復(fù)雜的設(shè)計(jì)項(xiàng)目中會(huì)被提到，但在這篇文章里，作者提供了許多實(shí)用的建議，讓基于組件的設(shè)計(jì)在小型項(xiàng)目和團(tuán)隊(duì)中也可以發(fā)揮作用。

首先我們要向關(guān)于原子設(shè)計(jì)理念的作者，Brad Frost 先生致敬。是他向我們引入了這樣的設(shè)計(jì)理念：當(dāng)我們以為我們是在設(shè)計(jì)網(wǎng)頁(yè)或是應(yīng)用界面時(shí)，我們其實(shí)是在是設(shè)計(jì)設(shè)計(jì)系統(tǒng)。

但我們發(fā)現(xiàn)原子設(shè)計(jì)的某些理念會(huì)引起用戶(hù)的迷惑，所以在借鑒學(xué)多其他優(yōu)秀設(shè)計(jì)的基礎(chǔ)上，我們總結(jié)出了一套基于組件設(shè)計(jì)的方法。

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

基于元素設(shè)計(jì)的核心就是把 UI 分割成更小，更易操作的小部分，每個(gè)部分都有明確的名字。這些小部分可以分為以下六類(lèi)。

1. 身份

六個(gè)分類(lèi)的第一個(gè)部分就是身份。身份是指整個(gè)項(xiàng)目的元素要保持高度一致性，從而形成一個(gè)項(xiàng)目的整體身份認(rèn)同。我們需要在這里定義整個(gè)項(xiàng)目的核心元素。界面、字體、一級(jí)和二級(jí)色彩都需要在這時(shí)候仔細(xì)地被定義。之后這些元素會(huì)貫穿在整個(gè)項(xiàng)目之中。

2. 元素

第二個(gè)部分包含了項(xiàng)目中可重復(fù)利用的最小部分，元素。一些眾所周知的元素包括按鈕，鏈接，輸入框，下拉菜單等。所有這些都需要和它們所有的狀態(tài)一起被定義好。這些狀態(tài)包括懸停，聚焦和未激活。我們的口號(hào)是：一次性定義好，然后貫穿整個(gè)項(xiàng)目始終。

3. 組件

展開(kāi)全文

接下里的一個(gè)部分就是組件。在做應(yīng)用設(shè)計(jì)或是網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，出現(xiàn)頻率最高的就是組件了。組件是至少運(yùn)用了一組元素的任何形式的設(shè)計(jì)?？ㄆ?，導(dǎo)航欄等都是經(jīng)典的組件設(shè)計(jì)樣式。不過(guò)他們也不一定需要從形式上看起來(lái)像一個(gè)模塊。

對(duì)于每個(gè)設(shè)計(jì)組件，我們會(huì)對(duì)它提前做好響應(yīng)式尺寸，從而適應(yīng)不同屏幕尺寸大小。這樣我們?cè)谠O(shè)計(jì)的時(shí)候就不用返回去為了適配不同尺寸大小而重新修改設(shè)計(jì)。我們會(huì)提前跟客戶(hù)溝通好目標(biāo)響應(yīng)式組件，然后再依據(jù)情況設(shè)計(jì)各個(gè)組件。

4. 組合

現(xiàn)在我們來(lái)到了規(guī)模更大一點(diǎn)的分組，也就是組合。組合是一個(gè)包含了多個(gè)組件的部分。它們定義了包含的組件應(yīng)該如何呈現(xiàn)。

下圖是一個(gè)簡(jiǎn)單的分欄布局。也是一個(gè)非常簡(jiǎn)單的組合。它只是定義了一些邊緣的留白，上方的一個(gè)小標(biāo)題和每個(gè)組件如何擺放形成邏輯。

5.布局

第五個(gè)分組，布局則是設(shè)計(jì)原則里面更加抽象的組合。這時(shí)候留白的數(shù)量，柵格和換行都做好了定義。當(dāng)你像這樣定義好了一個(gè)設(shè)計(jì)的時(shí)候，其他設(shè)計(jì)師就很容易用現(xiàn)有的設(shè)計(jì)風(fēng)格和指導(dǎo)來(lái)進(jìn)入一個(gè)項(xiàng)目。

6. 頁(yè)面

最后的分組就是項(xiàng)目實(shí)際的頁(yè)面（也可能是屏幕）。每個(gè)頁(yè)面都是一些列組合和組件的排列。

樣例

下面我們來(lái)看一個(gè)非常簡(jiǎn)單的基于組件設(shè)計(jì)的樣例。

假設(shè)我們?cè)谀硞€(gè)活動(dòng)的門(mén)票設(shè)計(jì)。有三種門(mén)票，每種門(mén)票都以同樣的方式設(shè)計(jì)，只包含有限的元素——在這個(gè)例子里，只用按鈕和一些文字。這也就意味著這個(gè)門(mén)票應(yīng)該被看作一個(gè)組件（只包含元素）。

假設(shè)現(xiàn)在我們想在我們的主頁(yè)上用一個(gè)三欄布局來(lái)拜訪這些門(mén)票這時(shí)候我們就需要定義組合了。也就是「門(mén)票組合 」。這個(gè)組合明確了每個(gè)組件之間所留出的空間，以及上方的一個(gè)標(biāo)題。

項(xiàng)目發(fā)出兩天后，客戶(hù)表示需要在門(mén)票上面加一些文字，表示已售罄。這也就意味著我們只需要更新「門(mén)票組合 」然后發(fā)給開(kāi)發(fā)者就行了?？旖荻嗔耍?/p>

Sketch

大家都知道 Sketch 已經(jīng)迅速成為 UX 和 UI 設(shè)計(jì)的新寵。巧妙運(yùn)用 Sketch 里面的文字樣式，符號(hào)以及 Artboard，可以極大地幫助我們潤(rùn)色基于組件的設(shè)計(jì)。我們?cè)O(shè)計(jì)了一個(gè)很棒的 Sketch 模板，內(nèi)置了以上所有的設(shè)計(jì)原則。這樣我們就可以隨時(shí)快速開(kāi)始一個(gè)項(xiàng)目了。

花一點(diǎn)時(shí)間在定義你所有的文字樣式上，可以在長(zhǎng)遠(yuǎn)為你省下大量的時(shí)間。

總結(jié)

總之，基于組件的設(shè)計(jì)讓我們能快速設(shè)計(jì)出能夠方便更新和維護(hù)的許多頁(yè)面。由于所有的部分都已經(jīng)清晰定義好，多個(gè)設(shè)計(jì)師可以方便地在一個(gè)項(xiàng)目里協(xié)作。

感謝閱讀，希望對(duì)你們有幫助。

以上內(nèi)容來(lái)自知乎專(zhuān)欄盒子以外，僅供學(xué)習(xí)交流