如何培養(yǎng)組件化設(shè)計(jì)思維？來看阿里設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)！

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

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

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

一.?什么是組件化設(shè)計(jì)思維？

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

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

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

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

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

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

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

二. 如何構(gòu)建一套協(xié)同的組件庫？

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

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

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

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

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

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

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

• 背景層 組件與整體頁面產(chǎn)生關(guān)系層。
• 結(jié)構(gòu)層 組件在信息結(jié)構(gòu)與層次關(guān)系的載體層。
• 互動層 組件與用戶行為的互動層，比如用戶的點(diǎn)擊，hover等。

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

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

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

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

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

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

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

• 理念層

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

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

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

• 工具層

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

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

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

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

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

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

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

歡迎關(guān)注阿里巴巴UED 的微信公眾號：

「組件化設(shè)計(jì)好文推薦」

• 《這篇8000字長文，能幫你學(xué)會組件化設(shè)計(jì)與開發(fā)的思維方式》
• 《進(jìn)階必讀！可能是最全面的組件化開發(fā)與設(shè)計(jì)指南》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com