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

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

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

基于組件設計是什么？

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

1. 身份

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

2. 元素

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

3. 組件

展開全文

接下里的一個部分就是組件。在做應用設計或是網頁設計的時候，出現(xiàn)頻率最高的就是組件了。組件是至少運用了一組元素的任何形式的設計?？ㄆ瑢Ш綑诘榷际墙浀涞慕M件設計樣式。不過他們也不一定需要從形式上看起來像一個模塊。

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

4. 組合

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

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

5.布局

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

6. 頁面

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

樣例

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

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

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

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

Sketch

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

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

總結

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

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

以上內容來自知乎專欄盒子以外，僅供學習交流