建站
咨詢
售后
建站咨詢
新聞中心
在很多大型復雜的項目中，基于組件的設計方案(Component Based Design)往往都會被提上討論日程。而本文則是作者在很多小型項目中使用 CBD 的感悟與經(jīng)驗總結(jié)，項目無論大小皆可適用基于組件的設計方案。首先，我想引用下布拉德弗羅斯特在 Atomic Design 一書中的論述，我們在做設計的時候并不僅僅是設計某個網(wǎng)頁或者應用交互，而是在設計一個設計系統(tǒng)。雖然這句話被很多人奉為圭臬，但是我發(fā)現(xiàn)不少的使用者在具體實踐時卻陷入混亂，特別是那些對于產(chǎn)品的不同抽象層級與相應的命名方法非常容易使得開發(fā)者手足無措。因此我們將自己團隊中基于組件的設計的完整抽象流程與大家共享。
何謂 Component Based Design?
簡而言之，Component Based Design 就是將整個 UI 切分為更小的、更可控的具有清晰命名的部分。而這些細小的部分又可以劃分為如下 6 個不同的分組。
Identity:特性
首先是特性，即是項目的核心標志性元素，譬如字體、排版、主色與次生色等等。在某個項目中設計人員應該保持所有的設計都遵從同一套特性規(guī)范。
Elements:元素
第二個可復用的部分是元素，譬如按鈕、鏈接、輸入框、下拉列表等等這些都是屬于元素。每個元素同時也會定義其不同狀態(tài)下的顯示，譬如懸浮狀態(tài)的按鈕、聚焦狀態(tài)的按鈕以及不可用的按鈕。我們的口號是：Define Once，Reuse Throughout The Project.
Components:組件
第三個可復用的部分是組件，這也是用戶屏幕當中展示的最多的塊。組件即是使用了一到多個元素(Elements)的任何界面部分，典型的譬如卡片、導航欄等等。需要注意的是，組件并不一定需要模塊化。
在設計組件的時候，我們同樣需要根據(jù)項目的不同響應式尺寸來設計不同尺寸下的組件呈現(xiàn)方式。
Compositions:復合
我們逐步提高我們的著眼點，第四個分組即是復合。復合是任何包含了多個組件的 UI 部分，它們定義了內(nèi)部組件的行為范式。下圖就是簡單的例子，下面的這個復合定義了組件的展示內(nèi)容、組件的間距、整個標題等信息。
Layout:布局
第五大類，布局，是對于設計原則的更高層抽象，典型的譬如網(wǎng)格系統(tǒng)，定義了行列之間的間隔。定義統(tǒng)一的布局有助于其他設計者復用現(xiàn)有的樣式規(guī)范。
Pages:頁面
***一組即是完整的呈現(xiàn)頁面，每個頁面包含了一系列的復合與組件的排列組合。所有超出設計預期的東西應該添加在頁面這個層級，譬如如果市場的同學說我們的聯(lián)系人頁背景應該是藍色的，那我們就該將這個特性添加到頁面這個層級，而不應該污染上述五個層級。
實例
我們下面以一個簡單的例子來闡述基于組件的設計流程。我們產(chǎn)品的某個重要服務就是進行門票售賣，因此我們需要展示三種不同風格的門票卡片、每個卡片的呈現(xiàn)方式是一致的，都會包含按鈕和一些文字。換言之，這里的門票卡片就應該被設計為組件，即所謂的 Ticket-Component.
然后，我們需要將三種卡片編為一組同時展示在組件上，此時即就是設計出了所謂的復合，Tickets-Composition，定義了每個卡片之間的間距以及整個的標題。
項目上線的幾天之后客戶來消息說票賣完了，此時我們只需要更新下 Ticket-Component 中的文字即可，而不會影響更高或者更低層次的部分。
Sketch
毫無疑問 Sketch 已經(jīng)正為了 UI 設計與 UX 設計的潮流，我們也是在 Sketch 中定義了很多的文本樣式、符號等等，這樣會大大有利于整個基于組件的設計工作流，使我們更為方便地啟動新項目。
【本文是專欄作者“張梓雄 ”的原創(chuàng)文章，如需轉(zhuǎn)載請通過與作者聯(lián)系】
戳這里，看該作者更多好文
當前題目：基于組件的設計工作流與界面抽象
轉(zhuǎn)載注明：http://www.fisionsoft.com.cn/article/cdpheho.html
