教育產品-元件化視覺設計實踐
此文已由作者張玲瀅授權網易雲社群釋出。
歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。
John Heskett在 [設計價值創造]的理論中闡述設計師的價值創造大致可分為三個層級：1.設計師作為修飾者 2.設計師作為區分者 3. 設計師作為計劃者。在現在節奏比較快的環境下，設計師們不僅僅需要完成業務需求的設計，同時也要思考設計的價值。我們需要在設計表現和資源投入中找到最佳的平衡點。在注重設計表現力的同時，逐漸加強我們對專案的協同與促進工作，而有時也需要我們用設計工程化的方式將自己從感性的設計理念中解放出來，通過設計來趨動整個產品更高效的發展。今年我主要做了雲課堂企業版（後臺為主）和教育產品元件化（EduOS）設計工作，在過程中積累了一些對於元件化設計的思考和心得，在此總結一下。
什麼是元件化視覺設計？
隨著教育產品部的逐漸壯大，包含了網易雲課堂、企業版、中國大學MOOC、網易100分、極客少年，有很多模組的複用，導致重複設計重複開發，在網際網路發展如此快速的現在，這種反覆低效的工作方式促使大家開始思考元件化設計。什麼是元件化設計？就是把產品需求場景化，視覺表達模組化，每個元件基於複用為目的，使其具備獨立的完整性解決方案，通過標準的設計規範組合方式來構建整個方案，從而提升效率。
如何構建一套協同的視覺元件庫？
元件小的可以只有一個按鈕，大的可以是一個互動極其複雜的多步篩選項。複雜元件內再嵌入簡單元件，也是很常見的事情。所以我們通常從中先提煉基礎核心組合用法，能覆蓋多數情況為原則，建立模版，提煉規範與擴充套件，設定標準。
元件化思維的精髓是獨立、完整、自由組合。首先我從產品出發列了以下大綱：
［獨立］，提取產品中的共同元素，區分變數和不變數。首先是整個網站的風格語言：字型和主題色，為整套的元件化設計定下了大的基調。這部分我們運用的是程式碼的形式，方便抽離，作為通用元件在運用到不同的產品中時可以調整字型大小、顏色、按鈕圓角等。
［完整］，把每個元件當作一個獨立產品來設計，考慮為空狀態、極端情況、尺寸顏色變化，按鈕除了標準的預設狀態以外還有hover、按下、禁用狀態，需要考慮提示、出錯等，儘可能靈活適應各個產品。以下的元件則是相對抽離分類後常用組合模式的元件。
［自由組合］，在每個元件內部完整了之後，接下來就是組合了。統一元件、元件與非元件之間的組合方式，但並不是真的那麼自由，我們要確定一些常用的組合方式。比如下圖，結合了按鈕、複選框、搜尋、樹選擇、標籤篩選等元件之間，頁面的顏色、樹選擇與右側內容的距離，輸入框之間的距離……這些也都要有章法。
以上這些工作，沉澱下來，就成了設計規範。對於產品的一致性和與其他設計師交接工作是非常重要。元件化設計是一切的源頭，如果我們設計部分的元件化工作做得不到位，自己定的規範自己不遵守，開發同學的元件化工作是無法進行的。目前我們以元件化設計的方式設計了「題庫」和「組卷」這兩個大模組，並運用到教育產品部多個產品線中還是很成功的。
組建化設計思維的運用
有了元件-元件，即可形成模版，所以通過對元件化設計的思考，我們對日常專題，推廣banner制定了一系列的模版化設計。例如專題中運用到的課程卡片，可以從元件的三維分層出發，響應狀態、行為狀態、資料狀態。
響應狀態，包括尺寸大小，元件響應方案中突出尺寸的維度，元件的組合。
行為狀態，就是在卡片中出現的資訊層級，需要考慮背景層、元件與整體頁面的關係，使用者行為中產生的效果。
資料狀態，比如卡片中我們可能出現的秒殺、拼團、開始、結束等狀態。
CMS模版的元件化設計，將設計規範和設計表達到線上視覺化選擇方式，像搭積木一樣，運營可以將拼裝好的元件同步轉化為專題搭建。
雖然前面說了這麼多好處，但元件化不是一件輕鬆的工作。在專案初期的準備工作會增加一定工作量，但隨時間推移會發揮出巨大的優勢。我們設計師要做的，就是要維護好設計元件庫。元件發生了任何設計修改，或者加入了新元件，都要及時反映在設計規範上並與開發協作，完善元件庫。教育產品部也還在不斷的完善和豐富元件化設計中......
更多網易技術、產品、運營經驗分享請點選。
相關文章：
【推薦】 微服務監控探索
【推薦】 如何利用OpenSSL生成證書