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

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

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

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

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

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

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

1）形式上，通用卻靈活

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例如模塊化方式適用于：

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

典型的例子包括電商產(chǎn)品、新聞?lì)惍a(chǎn)品、在線教育平臺(tái)、金融平臺(tái)、政府信息平臺(tái)等等。

而整合化方式則適用于：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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