組件化設計思維

組件是經過設計元素解耦，具有標準規範和可複用場景的基本模塊。“組”是設計元素的組合方式，“件”由不同的元件組成。

一、組件化設計思維

（1）傳統的頁面生產流程
傳統的頁面生產流程是瀑布式的，從運營到需求，需求到設計、設計到前端，是一連串的工作流程，在視覺稿設計產出前，似乎誰也不知道頁面會設計成什麼樣子。

這種模式重複性業務頁面設計製作、反覆低效率的溝通、糾結的還原度修復。
（2）組件化設計
將大量的頻道二級頁面、後臺型頁面等，用組件化方式將頁面整合設計。將產品需求場景化、視覺表達模塊化，每個組件基於服用爲目的，通過標準的規範組合方式來構建整個設計方案，從而提升設計效能。

1. 完整組件方案：將組件視爲一個獨立的產品，從多維度、多場景輸出組件的方案和組合標準
   
2. 組件化思維：從需求出發，拆解頁面表達結構和所需組件
3. 通用頁面規則：通用的頁面與組件的柵格體系及替換規則

二、構建組件庫（DPL）

（1）組件具有三維分層，一個完整的組件需要具備下列信息

X組件響應狀態：包括尺寸大小、組件響應方案，尺寸的維度，元件的組合，多態的交互

Y：組件行爲狀態

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

1. 背景層：組件與整體頁面產生關係層
2. 結構層：組件在信息結構與層次關係的載體層
3. 互動層：組件與用戶行爲的互動層，比如用戶的點擊、hover等。

Z：組件數據狀態：用電商推品組件舉例，包括比如預售、開搶、售罄、結束、常態等

（2）簡歷模板，提煉規範與擴展，設定標準

從場景中提煉出基礎核心組合用法，能覆蓋多數場景爲原則

（3）通過工具的方式，將規範工程化

由標準和可複用元件組成的組件，在樣式和數據的拓展上必須加上工程化的組合能力，才能使一套完整的DPL有效地執行下去。

• 理念層
  在整體網站層面對定義整個網站的設計語言，包括品牌色、圖形、特色、動效等，爲整個組件庫風格和體驗定下大的基調。這是組件庫在使用過程中減少挑戰的設計基礎，並能保證多業務和多項目並行使用時統一性。
• 數據層
  對組建中所有元件進行展示的分類和抽象，並形成常用組合模式。其次是從元件、組件到模板的定義和劃分，以及他們的抽象的分類和狀態。
• 工具層
  需要平臺化的工具來提供支持和服務。將設計規範和設計表達封裝爲在線可視化選擇方式，替代了原先毫無約束的在sketch的任意“設計”；並將拼裝好的組件同步轉化爲頁面搭建平臺可直接使用的組件，這個也是避免組件庫淪爲“無人看管的設計規範”最爲關鍵的一點。
  

轉自：組件化設計思維 – 從規範到工具的構建與探索