基於組件的設計工做流與界面抽象

基於組件的設計工做流與界面抽象翻譯自How we’re using Component Based Design，從屬於筆者的Web 前端入門與工程實踐。筆者以爲本文對於 UI 的六層抽象很適合於前端的代碼分割與概念劃分，能夠參考筆者在2016-個人前端之路:工具化與工程化一文中的解構設計稿這一章節。

在不少大型複雜的項目中，基於組件的設計方案（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 中定義了不少的文本樣式、符號等等，這樣會大大有利於整個基於組件的設計工做流，使咱們更爲方便地啓動新項目。