用基於組件的設計提升你的設計效率

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

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

但我們發現原子設計的某些理念會引起用戶的迷惑，所以在借鑒學多其他優秀設計的基礎上，我們總結出了一套基於組件設計的方法。

基於組件設計是什麼？

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

1. 身份

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

2. 元素

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

3. 組件

接下里的一個部分就是組件。在做應用設計或是網頁設計的時候，出現頻率最高的就是組件了。組件是至少運用了一組元素的任何形式的設計。卡片，導航欄等都是經典的組件設計樣式。不過他們也不一定需要從形式上看起來像一個模塊。

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

4. 組合

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

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

5.布局

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

6. 頁面

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

樣例

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

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

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

項目發出兩天後，客戶表示需要在門票上面加一些文字，表示已售罄。這也就意味著我們只需要更新「門票組合 」然後發給開發者就行了。快捷多了！

Sketch

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

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

總結

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

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

原文：How we』re using Component Based Design

下班時間運動一下，動動小手指關注我的專欄：盒子以外。

推薦閱讀：