教育產品-組件化視覺設計實踐

此文已由做者張玲瀅受權網易雲社區發佈。

歡迎訪問網易雲社區，瞭解更多網易技術產品運營經驗。

John Heskett在 [設計價值創造]的理論中闡述設計師的價值創造大體可分爲三個層級：1.設計師做爲修飾者 2.設計師做爲區分者 3. 設計師做爲計劃者。在如今節奏比較快的環境下，設計師們不只僅須要完成業務需求的設計，同時也要思考設計的價值。咱們須要在設計表現和資源投入中找到最佳的平衡點。在注重設計表現力的同時，逐漸增強咱們對項目的協同與促進工做，而有時也須要咱們用設計工程化的方式將本身從感性的設計理念中解放出來，經過設計來趨動整個產品更高效的發展。今年我主要作了雲課堂企業版（後臺爲主）和教育產品組件化（EduOS）設計工做，在過程當中積累了一些對於組件化設計的思考和心得，在此總結一下。

什麼是組件化視覺設計？

隨着教育產品部的逐漸壯大，包含了網易雲課堂、企業版、中國大學MOOC、網易100分、極客少年，有不少模塊的複用，致使重複設計重複開發，在互聯網發展如此快速的如今，這種反覆低效的工做方式促使你們開始思考組件化設計。什麼是組件化設計？就是把產品需求場景化，視覺表達模塊化，每一個組件基於複用爲目的，使其具有獨立的完整性解決方案，經過標準的設計規範組合方式來構建整個方案，從而提高效率。

如何構建一套協同的視覺組件庫？

組件小的能夠只有一個按鈕，大的能夠是一個交互極其複雜的多步篩選項。複雜組件內再嵌入簡單組件，也是很常見的事情。因此咱們一般從中先提煉基礎核心組合用法，能覆蓋多數狀況爲原則，創建模版，提煉規範與擴展，設定標準。

組件化思惟的精髓是獨立、完整、自由組合。首先我從產品出發列了如下大綱：

［獨立］，提取產品中的共同元素，區分變量和不變量。首先是整個網站的風格語言：字體和主題色，爲整套的組件化設計定下了大的基調。這部分咱們運用的是代碼的形式，方便抽離，做爲通用組件在運用到不一樣的產品中時能夠調整字體大小、顏色、按鈕圓角等。

［完整］，把每一個元件看成一個獨立產品來設計，考慮爲空狀態、極端狀況、尺寸顏色變化，按鈕除了標準的默認狀態之外還有hover、按下、禁用狀態，須要考慮提示、出錯等，儘量靈活適應各個產品。如下的元件則是相對抽離分類後經常使用組合模式的元件。

［自由組合］，在每一個元件內部完整了以後，接下來就是組合了。統一組件、組件與非組件之間的組合方式，但並非真的那麼自由，咱們要肯定一些經常使用的組合方式。好比下圖，結合了按鈕、複選框、搜索、樹選擇、標籤篩選等組件之間，頁面的顏色、樹選擇與右側內容的距離，輸入框之間的距離……這些也都要有章法。

以上這些工做，沉澱下來，就成了設計規範。對於產品的一致性和與其餘設計師交接工做是很是重要。組件化設計是一切的源頭，若是咱們設計部分的組件化工做作得不到位，本身定的規範本身不遵照，開發同窗的組件化工做是沒法進行的。目前咱們以組件化設計的方式設計了「題庫」和「組卷」這兩個大模塊，並運用到教育產品部多個產品線中仍是很成功的。

組建化設計思惟的運用

有了元件-組件，便可造成模版，因此經過對組件化設計的思考，咱們對平常專題，推廣banner制定了一系列的模版化設計。例如專題中運用到的課程卡片，能夠從組件的三維分層出發，響應狀態、行爲狀態、數據狀態。

響應狀態，包括尺寸大小，組件響應方案中突出尺寸的維度，元件的組合。

行爲狀態，就是在卡片中出現的信息層級，須要考慮背景層、組件與總體頁面的關係，用戶行爲中產生的效果。

數據狀態，好比卡片中咱們可能出現的秒殺、拼團、開始、結束等狀態。

CMS模版的組件化設計，將設計規範和設計表達到在線可視化選擇方式，像搭積木同樣，運營能夠將拼裝好的組件同步轉化爲專題搭建。

雖然前面說了這麼多好處，但組件化不是一件輕鬆的工做。在項目初期的準備工做會增長必定工做量，但隨時間推移會發揮出巨大的優點。咱們設計師要作的，就是要維護好設計組件庫。組件發生了任何設計修改，或者加入了新組件，都要及時反映在設計規範上並與開發協做，完善組件庫。教育產品部也還在不斷的完善和豐富組件化設計中......

免費體驗雲安全(易盾)內容安全、驗證碼等服務

更多網易技術、產品、運營經驗分享請點擊。

相關文章：
【推薦】 聊聊WS-Federation