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