一、設(shè)計體系的三層一環(huán)結(jié)構(gòu)

下面是我提出一個VGLT-MO三層一環(huán)結(jié)構(gòu)，幫助大家理解設(shè)計體系。

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

包圍著這三層內(nèi)容的一環(huán)是管理結(jié)構(gòu)（Management Structure）與組織流程（Organization Process)，它促進整個設(shè)計體系成為一個活的生態(tài)系統(tǒng)。

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

二、設(shè)計體系的原則

系統(tǒng)規(guī)則影響系統(tǒng)行為，穩(wěn)定的設(shè)計體系結(jié)構(gòu)促進產(chǎn)生穩(wěn)定的設(shè)計體系，關(guān)于設(shè)計體系的原則我將其歸結(jié)為以下4點原則：

1）形式上，通用卻靈活

設(shè)計體系是獨立存在于現(xiàn)有業(yè)務(wù)外的，用可預(yù)測的規(guī)則進行構(gòu)建和管理，指導(dǎo)方向一致性，而非每個人獨自開腦洞。

但是規(guī)則并不是限制，當(dāng)指導(dǎo)不足以傳達更佳的用戶體驗時就通過體系機制的設(shè)計，即時迭代設(shè)計體系。

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

2）關(guān)系上，整合但互通

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

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

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

4）成果上，協(xié)同而一致

通過良好的開發(fā)體驗，用設(shè)計開發(fā)的規(guī)范化指導(dǎo)，讓大范圍的開發(fā)與設(shè)計都能良好地匹配用戶心智模型和多設(shè)備多平臺需求，帶來優(yōu)質(zhì)且統(tǒng)一的產(chǎn)品價值傳達和用戶體驗實現(xiàn)。

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

三、不同設(shè)計體系的差異

不同組織和產(chǎn)品的設(shè)計體系都會不一樣。

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

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

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

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

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

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

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

關(guān)于模塊化還是整合化，我們可以根據(jù)各自適應(yīng)的產(chǎn)品特征進行抉擇。

例如模塊化方式適用于：

• 需要擴展與進化空間；
• 需要適應(yīng)不同類型的用戶需求；
• 需要大量的可復(fù)用部件參與構(gòu)建；
• 需要多個團隊同步并行地參與構(gòu)建。

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

而整合化方式則適用于：

• 面向一個特定目標(biāo)進行設(shè)計的；
• 無需具備擴展性與適應(yīng)性；
• 需要在體系范圍之外進行風(fēng)格探索的；
• 部件復(fù)用率較低的；
• 一次性的。

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

當(dāng)然有許多不同的特質(zhì)讓每個設(shè)計體系各不相同，關(guān)鍵的是，我們?nèi)绾握业竭m合的定位；而關(guān)于管理方式上的劃分，我將在第4章-如何構(gòu)建設(shè)計體系中進行更多詳細的論述。

四、關(guān)于設(shè)計體系的認知誤區(qū)

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

關(guān)于設(shè)計體系有一些誤區(qū)，例如：

設(shè)計體系是設(shè)計規(guī)范（Design Guidelines）嗎？

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

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

模式庫的建立在設(shè)計體系內(nèi)，而模式庫是記錄和共享設(shè)計模式的工具，只是設(shè)計體系的工具化和顯現(xiàn)化的部分；像Bootstrap這樣的工具包不被認為是設(shè)計體系，因為它們?nèi)鄙僖恍┒x設(shè)計系統(tǒng)的重要元素:模式庫、風(fēng)格指南和設(shè)計語言。

設(shè)計體系是否會扼殺組織內(nèi)的創(chuàng)造力？

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

設(shè)計體系是一勞永逸的嗎？

設(shè)計體系是動態(tài)的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經(jīng)完成了設(shè)計體系的建設(shè)的人都是將靜態(tài)的設(shè)計規(guī)范曲解成了設(shè)計體系。

文章來源：人人都是產(chǎn)品經(jīng)理  作者：龍哩個龍

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