阿里巴巴在中臺戰(zhàn)略的背景下，設(shè)計提效又再次推動著設(shè)計思維的變革。設(shè)計師們不僅僅需要出色地完成業(yè)務(wù)需求的設(shè)計，同時還需要思考設(shè)計的價值，也就是經(jīng)常提到的最佳方案性價比。我們需要在設(shè)計的個性化表達和資源投入之間找到最佳的平衡點，在關(guān)注出色視覺表現(xiàn)的基礎(chǔ)上，逐漸加強對項目協(xié)同及體驗價值的關(guān)注，逐步形成新的設(shè)計思維模式。
結(jié)合近半年來的項目和實踐經(jīng)驗，和大家一起探討下組件化設(shè)計思維及一些思考。
在開始之前，先對焦下，什么是組件？組件是經(jīng)過設(shè)計元素解耦，具有標準規(guī)范和可復(fù)用場景的基本模塊。從字面上理解：“組”：設(shè)計元素的組合方式，“件”由不同的元件組成。
**一 什么是組件化設(shè)計思維？ ** 說到組件化設(shè)計思維，我們先看看一個頁面如何從設(shè)計出來：傳統(tǒng)的頁面生產(chǎn)流程是瀑布式的，從運營到需求，需求到設(shè)計、設(shè)計到前端，它是一串式的工作流程。在視覺稿設(shè)計產(chǎn)出前，似乎誰也不知道頁面會設(shè)計成什么樣子。
這樣的工作模式的現(xiàn)狀就是重復(fù)性業(yè)務(wù)頁面設(shè)計制作、反復(fù)低效率的溝通、糾結(jié)的還原度修復(fù)等。那么是不是有些頁面需求可以從這樣的模式中，解綁一下呢？比如大量的頻道二級頁面，后臺型頁面等，能夠用組件化的方式將頁面整合設(shè)計。
組件化設(shè)計思維就是把產(chǎn)品需求場景化、視覺表達模塊化，每個組件基于復(fù)用為目的，使其具備獨立的完整解決方案，通過標準的規(guī)范組合方式來構(gòu)建整個設(shè)計方案，從而提升設(shè)計效能。
組件化設(shè)計思維3個關(guān)鍵點：
01 完整組件方案：將組件視為一個獨立的產(chǎn)品，從多維度，多場景輸出組件的方案和組合標準。
02 組件化思維：從需求出發(fā)，拆解頁面表達結(jié)構(gòu)和所需組件。
03 通用頁面規(guī)則：通用的頁面與組件的柵格體系及替換規(guī)則。
二 如何構(gòu)建一套協(xié)同的組件庫？ 設(shè)計組件庫-DPL ，已不是一個新的概念，早在yahoo時代就已產(chǎn)出一套完整的Yahoo UI Library (YUI) ，現(xiàn)在我們也仍然在沿用組件設(shè)計和規(guī)范定義，每個設(shè)計師都有過參與規(guī)范制定的經(jīng)歷，從通用的字體，顏色開始到很嚴格細致的版本，一份DPL文檔經(jīng)常耗費不少資源和時間，當下我們在思考如何從組件庫上得到真正的提效。
1688整個網(wǎng)站有十幾個具有垂直特色的貨源市場。在網(wǎng)站截取了一部分頁面上推品組件，各式各樣的表現(xiàn)方式，其中大小，風格，功能等各異，似乎一樣，但又有些許的不同，比如價格，有些小數(shù)點前后大小一致，有些省去小數(shù)點后兩位，有些小數(shù)點后面字號略小。
如何設(shè)計一套組件庫運行于大體量的團隊中，并協(xié)同好多個業(yè)務(wù)項目呢？下面以推品組件為例是如何一步步抽象和協(xié)同的。
2.1 從組件的三維分層出發(fā)，看看一個完整的組件需要具備哪些信息：
X 組件響應(yīng)狀態(tài)：包括尺寸大小，組件響應(yīng)方案，尺寸的維度，元件的組合，多態(tài)的交互。
Y：組件行為狀態(tài):
組件的行為在以下3個維度的交互和信息都需要考慮到：
01 背景層 組件與整體頁面產(chǎn)生關(guān)系層。
02 結(jié)構(gòu)層 組件在信息結(jié)構(gòu)與層次關(guān)系的載體層。
03 互動層 組件與用戶行為的互動層，比如用戶的點擊，hover等。
Z: 組件數(shù)據(jù)狀態(tài)：用電商推品組件舉例，包括比如預(yù)售、開搶、售罄、結(jié)束、常態(tài)等。
2.2 建立模板，提煉規(guī)范與擴展，設(shè)定標準
從場景中提煉出基礎(chǔ)核心組合用法，能覆蓋多數(shù)場景為原則
以交易信息模塊為例，我們將B類批發(fā)，采購時用戶最關(guān)注的幾大要素，根據(jù)不同場景需求搭配“積木”模塊，并在統(tǒng)一的標準結(jié)構(gòu)上進行搭配。
不同的積木組合，在單圖上下結(jié)構(gòu)的模式下得到多種不同場景下使用的推品組件。
2.3 通過工具的方式，將規(guī)范工程化
由標準和可復(fù)用元件組成的組件，在樣式和數(shù)據(jù)的拓展必須加上工程化的組合能力，才能使一套完整的DPL有效地執(zhí)行下去的關(guān)鍵。
01 理念層
在整體網(wǎng)站層面對定義整個網(wǎng)站的設(shè)計語言，包括品牌色，圖形，特色，動效等，為整個組件庫風格和體驗定下了大的基調(diào)。這是組件庫在使用過程中減少挑戰(zhàn)的設(shè)計基礎(chǔ)，并能保證多業(yè)務(wù)和多項目并行使用時統(tǒng)一性。
02 數(shù)據(jù)層
對組件中所有的元件進行展示的分類和抽象，并形成常用組合模式。其次是從元件，組件到模版的定義和劃分，以及他們的抽象的分類和狀態(tài)。
03 工具層
一個導(dǎo)購前臺頁面對于樣式和玩法更靈活、玩法更創(chuàng)新的話，越需要用平臺化的工具來提供支持和服務(wù)。將設(shè)計規(guī)范和設(shè)計表達封裝為在線可視化選擇方式，替代了原先的毫無約束的在sketch的任意“設(shè)計”；并將拼裝好的組件同步轉(zhuǎn)化為頁面搭建平臺可直接使用的組件。這個也是避免組件庫淪為“無人看管的設(shè)計規(guī)范”最為關(guān)鍵的一點。
UDPL 在線化搭建組件器，讓元件具有統(tǒng)一的柵格尺寸和表達約束，這個是拼裝和替換的基礎(chǔ)；多個“積木”模塊可以方便、靈活地組合、配置，以構(gòu)造不同狀態(tài)、不同功能的組件，不同模塊的替換可以改變局部功能而不影響整體的其他部分。通過布局轉(zhuǎn)換和智能分析，生成可讀性的界面代碼，實現(xiàn)設(shè)計到代碼的自動轉(zhuǎn)化，再無視覺還原之憂，開發(fā)GG們再也不用熬夜加班擼代碼了。
運營同學(xué)也能通過這個工具，搭建簡單組件，清晰明了地表達自己的需求。
最終希望形成一個從組件，到使用場景，再到工具的閉環(huán)，讓組件與用戶的交互數(shù)據(jù)能夠在3者中循環(huán)，組件系統(tǒng)能有一套數(shù)據(jù)維度幫助業(yè)務(wù)組件有效地迭代。
以上僅個人階段性思考，可能還不完善和完整，歡迎和我一起討論組件化設(shè)計思維，解放生產(chǎn)力，放飛自我：）
John Heskett 在設(shè)計價值創(chuàng)造中定義了設(shè)計師價值創(chuàng)造3個層級。大部分設(shè)計師經(jīng)歷了或正在經(jīng)歷三個階段的前2個階段，我們需要用設(shè)計工程化的方式把自己從價值感較弱的設(shè)計協(xié)同性工作中解放出來，把自己帶到更高的視野，定位自己的向上發(fā)展核心競爭力。
當下和未來是設(shè)計師最美好的時代，讓我們一起加油。
——————————————————————————
后續(xù)我們會寫一篇如何使用Coolsite360進行模塊化設(shè)計文章，敬請期待。
關(guān)注公眾號，獲取更多H5設(shè)計、響應(yīng)式網(wǎng)頁設(shè)計資訊