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

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

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

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

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

1. 身份

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

2. 元素

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

3. 組件

展開全文

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

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

4. 組合

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

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

5.布局

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

6. 頁面

最后的分組就是項目實際的頁面（也可能是屏幕）。每個頁面都是一些列組合和組件的排列。

樣例

下面我們來看一個非常簡單的基于組件設(shè)計的樣例。

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

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

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

Sketch

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

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

總結(jié)

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

感謝閱讀，希望對你們有幫助。

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