在很多大型復雜的項目中，基于組件的設計方案(Component Based Design)往往都會被提上討論日程。而本文則是作者在很多小型項目中使用 CBD 的感悟與經驗總結，項目無論大小皆可適用基于組件的設計方案。首先，我想引用下布拉德弗羅斯特在 Atomic Design 一書中的論述，我們在做設計的時候并不僅僅是設計某個網頁或者應用交互，而是在設計一個設計系統。雖然這句話被很多人奉為圭臬，但是我發現不少的使用者在具體實踐時卻陷入混亂，特別是那些對于產品的不同抽象層級與相應的命名方法非常容易使得開發者手足無措。因此我們將自己團隊中基于組件的設計的完整抽象流程與大家共享。

何謂 Component Based Design?

簡而言之，Component Based Design 就是將整個 UI 切分為更小的、更可控的具有清晰命名的部分。而這些細小的部分又可以劃分為如下 6 個不同的分組。

Identity:特性

首先是特性，即是項目的核心標志性元素，譬如字體、排版、主色與次生色等等。在某個項目中設計人員應該保持所有的設計都遵從同一套特性規范。

Elements:元素

第二個可復用的部分是元素，譬如按鈕、鏈接、輸入框、下拉列表等等這些都是屬于元素。每個元素同時也會定義其不同狀態下的顯示，譬如懸浮狀態的按鈕、聚焦狀態的按鈕以及不可用的按鈕。我們的口號是：Define Once，Reuse Throughout The Project.

Components:組件

第三個可復用的部分是組件，這也是用戶屏幕當中展示的最多的塊。組件即是使用了一到多個元素(Elements)的任何界面部分，典型的譬如卡片、導航欄等等。需要注意的是，組件并不一定需要模塊化。

在設計組件的時候，我們同樣需要根據項目的不同響應式尺寸來設計不同尺寸下的組件呈現方式。

Compositions:復合

我們逐步提高我們的著眼點，第四個分組即是復合。復合是任何包含了多個組件的 UI 部分，它們定義了內部組件的行為范式。下圖就是簡單的例子，下面的這個復合定義了組件的展示內容、組件的間距、整個標題等信息。

Layout:布局

第五大類，布局，是對于設計原則的更高層抽象，典型的譬如網格系統，定義了行列之間的間隔。定義統一的布局有助于其他設計者復用現有的樣式規范。

Pages:頁面

***一組即是完整的呈現頁面，每個頁面包含了一系列的復合與組件的排列組合。所有超出設計預期的東西應該添加在頁面這個層級，譬如如果市場的同學說我們的聯系人頁背景應該是藍色的，那我們就該將這個特性添加到頁面這個層級，而不應該污染上述五個層級。

實例

我們下面以一個簡單的例子來闡述基于組件的設計流程。我們產品的某個重要服務就是進行門票售賣，因此我們需要展示三種不同風格的門票卡片、每個卡片的呈現方式是一致的，都會包含按鈕和一些文字。換言之，這里的門票卡片就應該被設計為組件，即所謂的 Ticket-Component.

然后，我們需要將三種卡片編為一組同時展示在組件上，此時即就是設計出了所謂的復合，Tickets-Composition，定義了每個卡片之間的間距以及整個的標題。

項目上線的幾天之后客戶來消息說票賣完了，此時我們只需要更新下 Ticket-Component 中的文字即可，而不會影響更高或者更低層次的部分。

Sketch

毫無疑問 Sketch 已經正為了 UI 設計與 UX 設計的潮流，我們也是在 Sketch 中定義了很多的文本樣式、符號等等，這樣會大大有利于整個基于組件的設計工作流，使我們更為方便地啟動新項目。

【本文是51CTO專欄作者“張梓雄 ”的原創文章，如需轉載請通過51CTO與作者聯系】

戳這里，看該作者更多好文