阿里巴巴在中臺(tái)戰(zhàn)略的背景下，設(shè)計(jì)提效又再次推動(dòng)著設(shè)計(jì)思維的變革。設(shè)計(jì)師們不僅僅需要出色地完成業(yè)務(wù)需求的設(shè)計(jì)，同時(shí)還需要思考設(shè)計(jì)的價(jià)值，也就是經(jīng)常提到的最佳方案性價(jià)比。我們需要在設(shè)計(jì)的個(gè)性化表達(dá)和資源投入之間找到最佳的平衡點(diǎn)，在關(guān)注出色視覺表現(xiàn)的基礎(chǔ)上，逐漸加強(qiáng)對(duì)項(xiàng)目協(xié)同及體驗(yàn)價(jià)值的關(guān)注，逐步形成新的設(shè)計(jì)思維模式。

結(jié)合近半年來的項(xiàng)目和實(shí)踐經(jīng)驗(yàn)，和大家一起探討下組件化設(shè)計(jì)思維及一些思考。

在開始之前，先對(duì)焦下，什么是組件？組件是經(jīng)過設(shè)計(jì)元素解耦，具有標(biāo)準(zhǔn)規(guī)范和可復(fù)用場景的基本模塊。從字面上理解：“組”：設(shè)計(jì)元素的組合方式，“件”由不同的元件組成。

**一 什么是組件化設(shè)計(jì)思維？ ** 說到組件化設(shè)計(jì)思維，我們先看看一個(gè)頁面如何從設(shè)計(jì)出來：傳統(tǒng)的頁面生產(chǎn)流程是瀑布式的，從運(yùn)營到需求，需求到設(shè)計(jì)、設(shè)計(jì)到前端，它是一串式的工作流程。在視覺稿設(shè)計(jì)產(chǎn)出前，似乎誰也不知道頁面會(huì)設(shè)計(jì)成什么樣子。

這樣的工作模式的現(xiàn)狀就是重復(fù)性業(yè)務(wù)頁面設(shè)計(jì)制作、反復(fù)低效率的溝通、糾結(jié)的還原度修復(fù)等。那么是不是有些頁面需求可以從這樣的模式中，解綁一下呢？比如大量的頻道二級(jí)頁面，后臺(tái)型頁面等，能夠用組件化的方式將頁面整合設(shè)計(jì)。

組件化設(shè)計(jì)思維就是把產(chǎn)品需求場景化、視覺表達(dá)模塊化，每個(gè)組件基于復(fù)用為目的，使其具備獨(dú)立的完整解決方案，通過標(biāo)準(zhǔn)的規(guī)范組合方式來構(gòu)建整個(gè)設(shè)計(jì)方案，從而提升設(shè)計(jì)效能。

組件化設(shè)計(jì)思維3個(gè)關(guān)鍵點(diǎn)：

01 完整組件方案：將組件視為一個(gè)獨(dú)立的產(chǎn)品，從多維度，多場景輸出組件的方案和組合標(biāo)準(zhǔn)。

02 組件化思維：從需求出發(fā)，拆解頁面表達(dá)結(jié)構(gòu)和所需組件。

03 通用頁面規(guī)則：通用的頁面與組件的柵格體系及替換規(guī)則。

二 如何構(gòu)建一套協(xié)同的組件庫？ 設(shè)計(jì)組件庫-DPL ，已不是一個(gè)新的概念，早在yahoo時(shí)代就已產(chǎn)出一套完整的Yahoo UI Library (YUI) ，現(xiàn)在我們也仍然在沿用組件設(shè)計(jì)和規(guī)范定義，每個(gè)設(shè)計(jì)師都有過參與規(guī)范制定的經(jīng)歷，從通用的字體，顏色開始到很嚴(yán)格細(xì)致的版本，一份DPL文檔經(jīng)常耗費(fèi)不少資源和時(shí)間，當(dāng)下我們?cè)谒伎既绾螐慕M件庫上得到真正的提效。

1688整個(gè)網(wǎng)站有十幾個(gè)具有垂直特色的貨源市場。在網(wǎng)站截取了一部分頁面上推品組件，各式各樣的表現(xiàn)方式，其中大小，風(fēng)格，功能等各異，似乎一樣，但又有些許的不同，比如價(jià)格，有些小數(shù)點(diǎn)前后大小一致，有些省去小數(shù)點(diǎn)后兩位，有些小數(shù)點(diǎn)后面字號(hào)略小。

如何設(shè)計(jì)一套組件庫運(yùn)行于大體量的團(tuán)隊(duì)中，并協(xié)同好多個(gè)業(yè)務(wù)項(xiàng)目呢？下面以推品組件為例是如何一步步抽象和協(xié)同的。

2.1 從組件的三維分層出發(fā)，看看一個(gè)完整的組件需要具備哪些信息：

X 組件響應(yīng)狀態(tài)：包括尺寸大小，組件響應(yīng)方案，尺寸的維度，元件的組合，多態(tài)的交互。

Y：組件行為狀態(tài):

組件的行為在以下3個(gè)維度的交互和信息都需要考慮到：

01 背景層 組件與整體頁面產(chǎn)生關(guān)系層。

02 結(jié)構(gòu)層 組件在信息結(jié)構(gòu)與層次關(guān)系的載體層。

03 互動(dòng)層 組件與用戶行為的互動(dòng)層，比如用戶的點(diǎn)擊，hover等。

Z: 組件數(shù)據(jù)狀態(tài)：用電商推品組件舉例，包括比如預(yù)售、開搶、售罄、結(jié)束、常態(tài)等。

2.2 建立模板，提煉規(guī)范與擴(kuò)展，設(shè)定標(biāo)準(zhǔn)

從場景中提煉出基礎(chǔ)核心組合用法，能覆蓋多數(shù)場景為原則

以交易信息模塊為例，我們將B類批發(fā)，采購時(shí)用戶最關(guān)注的幾大要素，根據(jù)不同場景需求搭配“積木”模塊，并在統(tǒng)一的標(biāo)準(zhǔn)結(jié)構(gòu)上進(jìn)行搭配。

不同的積木組合，在單圖上下結(jié)構(gòu)的模式下得到多種不同場景下使用的推品組件。

2.3 通過工具的方式，將規(guī)范工程化

由標(biāo)準(zhǔn)和可復(fù)用元件組成的組件，在樣式和數(shù)據(jù)的拓展必須加上工程化的組合能力，才能使一套完整的DPL有效地執(zhí)行下去的關(guān)鍵。

01 理念層

在整體網(wǎng)站層面對(duì)定義整個(gè)網(wǎng)站的設(shè)計(jì)語言，包括品牌色，圖形，特色，動(dòng)效等，為整個(gè)組件庫風(fēng)格和體驗(yàn)定下了大的基調(diào)。這是組件庫在使用過程中減少挑戰(zhàn)的設(shè)計(jì)基礎(chǔ)，并能保證多業(yè)務(wù)和多項(xiàng)目并行使用時(shí)統(tǒng)一性。

02 數(shù)據(jù)層

對(duì)組件中所有的元件進(jìn)行展示的分類和抽象，并形成常用組合模式。其次是從元件，組件到模版的定義和劃分，以及他們的抽象的分類和狀態(tài)。

03 工具層

一個(gè)導(dǎo)購前臺(tái)頁面對(duì)于樣式和玩法更靈活、玩法更創(chuàng)新的話，越需要用平臺(tái)化的工具來提供支持和服務(wù)。將設(shè)計(jì)規(guī)范和設(shè)計(jì)表達(dá)封裝為在線可視化選擇方式，替代了原先的毫無約束的在sketch的任意“設(shè)計(jì)”；并將拼裝好的組件同步轉(zhuǎn)化為頁面搭建平臺(tái)可直接使用的組件。這個(gè)也是避免組件庫淪為“無人看管的設(shè)計(jì)規(guī)范”最為關(guān)鍵的一點(diǎn)。

UDPL 在線化搭建組件器，讓元件具有統(tǒng)一的柵格尺寸和表達(dá)約束，這個(gè)是拼裝和替換的基礎(chǔ)；多個(gè)“積木”模塊可以方便、靈活地組合、配置，以構(gòu)造不同狀態(tài)、不同功能的組件，不同模塊的替換可以改變局部功能而不影響整體的其他部分。通過布局轉(zhuǎn)換和智能分析，生成可讀性的界面代碼，實(shí)現(xiàn)設(shè)計(jì)到代碼的自動(dòng)轉(zhuǎn)化，再無視覺還原之憂，開發(fā)GG們?cè)僖膊挥冒疽辜影鄶]代碼了。

運(yùn)營同學(xué)也能通過這個(gè)工具，搭建簡單組件，清晰明了地表達(dá)自己的需求。

最終希望形成一個(gè)從組件，到使用場景，再到工具的閉環(huán)，讓組件與用戶的交互數(shù)據(jù)能夠在3者中循環(huán)，組件系統(tǒng)能有一套數(shù)據(jù)維度幫助業(yè)務(wù)組件有效地迭代。

以上僅個(gè)人階段性思考，可能還不完善和完整，歡迎和我一起討論組件化設(shè)計(jì)思維，解放生產(chǎn)力，放飛自我：）

John Heskett 在設(shè)計(jì)價(jià)值創(chuàng)造中定義了設(shè)計(jì)師價(jià)值創(chuàng)造3個(gè)層級(jí)。大部分設(shè)計(jì)師經(jīng)歷了或正在經(jīng)歷三個(gè)階段的前2個(gè)階段，我們需要用設(shè)計(jì)工程化的方式把自己從價(jià)值感較弱的設(shè)計(jì)協(xié)同性工作中解放出來，把自己帶到更高的視野，定位自己的向上發(fā)展核心競爭力。

當(dāng)下和未來是設(shè)計(jì)師最美好的時(shí)代，讓我們一起加油。

——————————————————————————

后續(xù)我們會(huì)寫一篇如何使用Coolsite360進(jìn)行模塊化設(shè)計(jì)文章，敬請(qǐng)期待。

關(guān)注公眾號(hào)，獲取更多H5設(shè)計(jì)、響應(yīng)式網(wǎng)頁設(shè)計(jì)資訊