一、設計體系的三層一環結構

下面是我提出一個VGLT-MO三層一環結構，幫助大家理解設計體系。

• 愿景與原則（Vision & Principle），它們作為設計決策的參考，指導前行。
• 指南（Guidelines），包含樣式指南（Style Guideline）、模式指南（Patterns Guideline)、內容指南（Content Guideline）等更多通過文字和圖像進行傳達的內容。
• 庫與工具（Libraries & Tools），包含組件庫（Components Libraries）、工具包（Toolkits）、協同工具（Collaborative Tools）等可以直接進行使用的內容。

包圍著這三層內容的一環是管理結構（Management Structure）與組織流程（Organization Process)，它促進整個設計體系成為一個活的生態系統。

我曾參與過國內某知名企業的設計體系建設過程，遇到了很多困難，但也收獲了更多的認知，了解到不能怎么做和應該如何做，進一步促成了本篇文章；因此我試著搭建出設計體系的通用結構，并且文章后面闡述其中的價值和如何去構建設計體系。

二、設計體系的原則

系統規則影響系統行為，穩定的設計體系結構促進產生穩定的設計體系，關于設計體系的原則我將其歸結為以下4點原則：

1）形式上，通用卻靈活

設計體系是獨立存在于現有業務外的，用可預測的規則進行構建和管理，指導方向一致性，而非每個人獨自開腦洞。

但是規則并不是限制，當指導不足以傳達更佳的用戶體驗時就通過體系機制的設計，即時迭代設計體系。

設計師可以更快地完成原型和迭代工作，因而更加靈活地去思考滿足需求的解決方案。

2）關系上，整合但互通

整合設計與開發，鏈接設計與實現的代碼，有效地將體驗的設計與落地的開發相結合；但又通過獨立化的模塊設計以及模塊間關系的設計，搭配良好的機制和協同工具幫助使用者更流暢地使用。

3）組織上，開放共享且跨域同步

通過組織流程的設計讓基于模塊化設計思維的組件、設計模式、內容策略等等能被盡可能多的人重復利用，提高知識復用率；并讓關于用戶的知識在組織中的設計師、工程師、產品經理、市場營銷人員等人中保持同步和流通。

4）成果上，協同而一致

通過良好的開發體驗，用設計開發的規范化指導，讓大范圍的開發與設計都能良好地匹配用戶心智模型和多設備多平臺需求，帶來優質且統一的產品價值傳達和用戶體驗實現。

除了創建更高的可用性（Usability）之外，也能建立更高的可訪問性（Accessibility），讓體驗在如障礙群體、各類配置低下的設備、有法律與文化的國際差異等在產品多次迭代中也能更易達成一致（這些往往是較少被考慮到的內容）。

三、不同設計體系的差異

不同組織和產品的設計體系都會不一樣。

設計體系有不同規模（Kholmatova，2017），簡單來說可以分為平臺級設計體系（如Apple的人機交互指南HIG, Microsoft的流暢設計體系FDS）和公司級設計體系（如Atlassian的Atlassian設計體系ADS；Salesforce的閃電設計體系LDS，Adobe的Spectrum），如螞蟻金服的Ant Design等）。

設計體系的開放程度不一，而且有些設計體系并不對外開放（如Airbnb的設計語言系統DLS），而微軟的流暢設計體系則是全程開放。

我們可以從實踐規則（嚴格/松散）、構造方式（模塊化/整合化）和管理機制（集中式/分布式）（Kholmatova，2017）。

任何組織都能在其中找到合適的定位，有些設計體系極為嚴格，而有些反而得益于其松散性與靈活性；如Airbnb的設計體系整體上更為嚴格，擁有詳實的設計規范文檔、設計與開發有精準的同步流程、擁有嚴格的新模式入庫流程，詳實全面的設計文檔等；通過內網進行使用，并開發一系列的插件工具促進設計與開發流程。

而TED只有兩名 UX 設計師和四名前端工程師專職負責設計體系相關工作，因此就更稍顯松散；不同的程度都是和自身組織的團隊文化和產品特征有關的，他們更加關注有效地實現產品設計目標。

“我們鼓勵以正確的方式進行設計，而非一味強調一致性原則；頁面的性能表現對于我們來說更為重要，如果它無法有效地承載內容，我們會將其修改到能夠承載為止；一致性與模式化的信條對于我們來說無法成為驅動設計決策的關鍵要素。”——Michael McWatters，TED UX 架構師

是標準化還是松散化，更多依靠組織文化下的選擇。它們各有利弊。一個緊湊嚴格，利于精準，但有時較為死板，會限制設計師進行創造發揮；一個靈活適應，利于拓展和快速變更，但難以控制，它們都需要找到解決自身缺陷的方法。

關于模塊化還是整合化，我們可以根據各自適應的產品特征進行抉擇。

例如模塊化方式適用于：

• 需要擴展與進化空間；
• 需要適應不同類型的用戶需求；
• 需要大量的可復用部件參與構建；
• 需要多個團隊同步并行地參與構建。

典型的例子包括電商產品、新聞類產品、在線教育平臺、金融平臺、政府信息平臺等等。

而整合化方式則適用于：

• 面向一個特定目標進行設計的；
• 無需具備擴展性與適應性；
• 需要在體系范圍之外進行風格探索的；
• 部件復用率較低的；
• 一次性的。

典型的例子包括創意展示類頁面、一次性的運營活動頁面、作品集等等。

當然有許多不同的特質讓每個設計體系各不相同，關鍵的是，我們如何找到適合的定位；而關于管理方式上的劃分，我將在第4章-如何構建設計體系中進行更多詳細的論述。

四、關于設計體系的認知誤區

知道設計體系是什么，更需要了解設計體系不是什么。

關于設計體系有一些誤區，例如：

設計體系是設計規范（Design Guidelines）嗎？

許多人都會將設計規范與設計體系相提并論。但實際上，他們并不是一個層級的東西，或者更準確的說是設計體系包含了設計規范。

設計體系是模式庫（Pattern Library）或組件庫（Component Library）嗎？

模式庫的建立在設計體系內，而模式庫是記錄和共享設計模式的工具，只是設計體系的工具化和顯現化的部分；像Bootstrap這樣的工具包不被認為是設計體系，因為它們缺少一些定義設計系統的重要元素:模式庫、風格指南和設計語言。

設計體系是否會扼殺組織內的創造力？

不好的設計體系當然會，但好的設計體系往往會通過機制和流程，促進實際的創造力，因為來自終端的良好的解決方案可以更快被整個組織所采用，而不必擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。

設計體系是一勞永逸的嗎？

設計體系是動態的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經完成了設計體系的建設的人都是將靜態的設計規范曲解成了設計體系。

文章來源：人人都是產品經理  作者：龍哩個龍

藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務