企業級產品的設計系統
全文共計4.4k字，預計閱讀時間8分鐘。本篇文章對企業級產品的設計系統做了一個概述。
（截圖自螞蟻金服SEE Conf 2019，說明中後臺的需求正在變得越來越多。）
近幾年來，人們對中後臺產品的要求越來越高。從最開始的能用就行，到後來逐漸開始重視設計和體驗，到現在謀求體驗一致性和更高的效率。企業級產品的設計系統就是幫助企業體系化加速中後臺產品產出的一套整體解決方案。設計師和工程師能直接參與製作的專案十分有限，但是通過設計系統重塑工作流，可以間接完成“無限多”的專案。我在參與構建設計系統的工作中時常在想，如果設計系統做到極致會怎麼樣？可能就像現在全自動生產的流水線一樣，設計系統自動提取元件拼搭頁面，轉化為程式碼上線，然後設計師和工程師就有新的職能了。
一個企業發展到一定階段，必然需要許多中後臺產品來支撐前臺產品安全穩定的執行。例如IM即時通訊、ERP流程管理系統等保障公司內部運轉和方便公司管理的平臺，例如進銷存系統等保障公司業務運營的平臺，可以說數量和體量都很龐大。
龐大就容易產生混亂和臃腫。如何統一整個公司的產品體驗，避免重複工作優化工作流程就成為當務之急。設計系統的意義在於減少了許多設計師和工程師從0-1的工作量。設計師設計了一份元件樣式，開發工程師用程式碼實現了一遍，之後只要不斷複用優化即可。專案的數量越多，節約的工作量就越多。一套良好的設計系統可以使產品用元件快速搭建原型，快速響應使用者需求；使設計師不再重複繪製頁面，而是有更多的精力放在使用者調研，提升體驗，情感化設計上；工程師不再重複敲程式碼，而是有更多時間去優化效能，梳理業務邏輯。
規範指南只有隨著專案更新優化才有價值。但是規範指南這種靜態文件的形式，很容易被版本的迭代，人員的流動，技術革新導致使用者體驗方式的改變等因素阻礙更新。甚至一些設計師在設計介面的時候並沒有更新優化設計規範的意識，而是把重心放在完成當前的任務。隨著時間的推移，規範指南和專案的差距越大，重整規範指南的工作量和阻力也越大，規範指南就越來越沒用了。
設計系統的風格指南一般會更嚴謹，定義的更全面，包含的元件更豐富。同時，設計系統有一套組織架構和工作流程來保證，設計系統隨著專案的進展在不斷的進化。 “設計系統指導我們進行產品設計，我們的產品設計也反過來告訴我們如何完善設計系統。 ”
（截圖自bootstrap的元件庫，前端框架和設計系統的區別在於，前端框架讓使用者直接使用，而設計系統還會教育使用者，告訴使用者為什麼這麼幹。）
早期的中後臺產品都不需要設計師，而是由前端工程師直接實現。
在我剛畢業的時候，做過一段時間的前端。當時我是用bootstrap搭建頁面。用bootstrap的框架已經預設適配大部分瀏覽器，並且他的響應式佈局還可以自適應多端。但是在使用的過程中，發現他的元件庫不全，樣式也比較醜。而我就要不斷的修改驗證他的元件，不僅麻煩還容易報錯。多年後我在參與元件設計中時時感覺，我們其實在和工程師做一個更好的UI框架。
是的，相對於其他產品，企業級產品更需要設計師和工程師通力合作。而不是設計師畫好頁面，丟給工程師讓他們無損還原。因為中後臺產品的體量一般都比較大，一個元件多一行程式碼，那整個產品就會多出無數行程式碼。程式碼冗餘必然會影響效能。所以縱觀各家中後臺產品，在設計感的體現上都非常剋制，可以用程式碼直接寫的都儘量用程式碼寫。設計師和工程師要從美觀、體驗、效能上平衡出一套最優的方案。
（在這裡提一下《原子設計》這本書。“ 作者Brad Frost把由原子、分子、有機體、模板和頁面共同協作以創造出更有效的使用者介面系統的一種設計方法。 ”大部分後來產品的設計系統的構建，都有用到這種模組化的設計思路。）
上圖是我根據自己的理解對設計系統做一個簡單的示例。其實根據公司的規模和目標不同，每個設計系統包含的內容可能都不一樣。但是隻要設計系統能夠解決實際問題，提升一致性和效能，就是有意義的。
1.設計語言
（截圖自lightning design system的設計原則，這個系統是服務於Salesforce的 SaaS平臺類產品，他們的目標就是為客戶提供高效率，高質量的服務，所以他們把清晰的，高效的，一致的作為他們的核心設計原則。 ）
在前期的準備工作中我們要明確設計系統服務的專案的特點和目標。然後收斂出最能體現專案特質的關鍵詞和原則，像道家中說的：一生二，二生三，三生萬物一樣，指導後續設計開發等一系列工作。也就是說確定設計語言等於確定接下來工作的決策依據，也決定了設計指南最後呈現的形態。
其實設計系統從大的分類上可以分成兩種，一種是像Material Design，他是面向所有行業，所有領域的。比如Material Design的設計原則之一：Material is the metaphor。（材料是隱喻）。看起來又高深又抽象。只有立意高遠才可以包容各行各業。Material Design從物理中抽象出了投影、加速度、質感搭建了他們獨特的材料世界。而使用者利用這個材料世界做出來的產品也是各式各樣的。還有一種就像我們企業級產品的設計系統一樣，面對具體的業務，例如金融行業，教育行業，有非常明確的行業特性。那我們在制定設計語言的時候就簡單很多，從優先順序最高的專案目標，使用者痛點中就可以提煉出設計原則了。
2.設計風格
（截圖自Ant Design Pro ，一鍵換主題色，生動形象的展示了配色對產品整體氣質的影響。 ）
設計風格就是設計產出給人帶來直觀的視覺感受，是從其他競品脫穎而出的明確氣質。在中後臺產品中，配色、佈局、字型字號等就奠定了整個介面的風格基調。那我們就可以根據專案的業務屬性，通過改變配色、佈局、字型字號等來給專案定製獨特的視覺效果。通過Design Token（設計變數）進行快速全域性視覺迭代。
3.元件庫
（截圖自Ant Design 的sketch元件庫，對元件進行合理有序的排列方便使用者查詢服複用也是很有必要的。 ）
web發展了這麼多年，人們對基礎元件的樣式和功能已經非常熟悉了。基礎元件，例如按鈕，開關，單選框，複選框，標籤等等，是組成頁面最基礎的元素。
業務元件是把基礎元件根據具體的業務需求進行組合，在頁面中呈區塊級展示。比如內容編輯器，卡片組展示。
而功能模版則是從實際專案中抽象出來的常見功能，例如dashbord，詳情頁，表單頁。
業務場景是從實際專案中抽象出來的典型流程，例如登陸註冊流程，購買流程等。
元件（包括基礎元件和業務元件）要儘量全面可以覆蓋所有專案。元件設計不要侷限於具體頁面，而要從整個專案全域性來設計。而模式（包括功能模版和業務流程）一方面啟發使用者如何用元件搭建模版，給老闆展示用元件搭建的效果。另一方面提供了一類問題的解決方案。這非常考驗設計師的抽象能力，對多場景相容性的優化能力。比如詳情頁，一個公司可能有十種不同佈局的詳情頁，設計師要考慮如何梳理詳情頁的資訊架構，讓詳情頁模板儘可能相容不同場景。
如果元件庫中的每部分都是經過深思熟慮斟酌過的，那即使是沒有設計基礎的工程師用元件庫來搭建頁面，質量都不會差。
4.工作流
設計指南是一堆sketch 原始檔，PDF，開發文件。而工作流則保證在這些物料優質產出後，能提供一個環境，讓設計指南能夠保持實時更新狀態。a）設計系統的週期非常長，而且無法像具體專案一樣短期可以看到回報。根據公司的體量合理配置人員。雖然說設計系統需要專職人員去構建和維護，但是專職設計師也需要深入專案，一方面是保證設計指南是來自實際專案，一方面又可以在實際專案中快速驗證新的產出。b）設計系統的產出是依靠工具得以沉澱。一個是設計師和工程師各自在工作時所用的提高效率的工具，一個是設計師和工程師跨部門合作所用的共享平臺。例如阿里就投入時間精力來研發設計輔助工具和前端開發工具。c）在前期就要制定好產出和稽核的流程來保證質量。
對想要參與企業級產品的設計師，我總結了幾個關鍵詞。
1.沉澱
中後臺產品的設計應該是規整嚴謹的。這種規整來自深思熟慮每個畫素。往往視覺衝擊力強的作品會掩蓋細節，而製作一個規整精良的按鈕也是足見功力。
基礎知識沉澱，例如有哪些元件，這些元件的使用場景，出現異常情況應該如何表現，有沒有極限情況。使用者體驗沉澱，有較強的使用者體驗意識，可以準確判斷產出是否合理。
累計了一定的經驗，沉澱了一定的深度思考，就可以作出正確的決策，在體驗層面上達到一定的水平。並且設計指南的各個環節是層層推進的，一個環節的失誤都會導致很大的返工工作量。
2.下定義
為了跨部門識別和運用，設計師需要給每個元件模板場景命名。還要一一描述他們的使用場景，給他們寫說明書。這需要有精準概括的能力。用盡量少的篇幅，讓使用者立刻理解他們面對的是什麼，要如何使用。
3.抽象歸納
中後臺實際專案的量級非常大，要從浩瀚的頁面中收集同類的元件和模板，再從中抽象出可以相容各個場景的新的佈局和功能。需要對整體資訊結構的邏輯，以及每個元素存在的意義有清晰理解。如果抽象出的元件和模板使用率很低就比較尷尬，如果需要專案方進行較大的改動也很尷尬。
4.協作
中後臺系統是一個多人合作不斷迭代的產品。設計師的設計原始檔經常要給其他同事繼續使用。那麼原始檔的圖層及命名應該清晰有條理。跨部門溝通也是常有的事。設計師要邏輯清晰的表達自己的設計觀點，鍛鍊自己說服他人的能力，讓其他同事理解，贊同，配合工作。
5.工具
中後臺系統需要一個對團隊協作友好，避免重複性工作的工具。目前sketch是設計軟體中最適合的。sketch有sketch cloud可以和團隊成員共享最新檔案。在Sketch 中可以把元件建立為Symbol，在迭代的時候直接修改symbol就可以實時全域性更新。Sketch還有很多功能強大的外掛來提高團隊效率。甚至阿里的中後臺Fusion都把元件庫搭載在Sketch 的外掛中。設計指南本身有大量的重複性工作，如果能通過工具來降低建立和迭代的阻力，就可以使整個系統更好的保持活力。
6.英語
在國外的設計系統發展的相對比較成熟，很多大廠都構建了非常優質的設計系統，像IBM（Carbon Design），Google（Material Design），SAP（Fiori Design）。還有很多相關英文書籍也都乾貨滿滿，但是目前好像連《Design System》都還沒有中譯本。如果能把這些都學透了，一定會有巨大的收穫。以及設計系統發展到後期，可能會升級到國際版。掌握英語也會是一個優勢。
就我個人的體驗來說，我覺得參與設計系統的構建是很有意義的。一方面是放大了設計師的價值，一個優質的設計系統可能被成千上萬個專案使用，未來還有可能改變生產關係；一方面是設計師如果養成體系化思考問題的思維能力，看世界都更深刻了呢。在這個浮躁的社會中生存，希望我們都能耐得住寂寞，潛心耕耘。加油鴨～