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