編輯導(dǎo)語(yǔ)：在上一篇文章中，作者詳細(xì)介紹了設(shè)計(jì)體系的價(jià)值與缺陷，《設(shè)計(jì)體系丨設(shè)計(jì)體系有什么用？?jī)r(jià)值與缺陷（三）》；本文作者從六個(gè)方面詳細(xì)分析了應(yīng)該怎么樣創(chuàng)建一個(gè)設(shè)計(jì)體系，我們一起來(lái)了解一下。

介于網(wǎng)上的文章大多只是教大家如何建立“組件庫(kù)“或是”設(shè)計(jì)規(guī)范“，但卻說(shuō)它這是建立”設(shè)計(jì)體系“，而本章的目的即是基于我的理解，在各種大佬的肩膀上，逐步構(gòu)建一個(gè)幫助大家構(gòu)建真正的設(shè)計(jì)體系的體系化方法思路。

為了更好的理解，本系列文章核心內(nèi)容我也是參照了4本書、4篇論文（其中3篇還是碩士論文）、網(wǎng)站文章（30+）、網(wǎng)站視頻（5+），相信已經(jīng)囊括目前關(guān)于設(shè)計(jì)體系相關(guān)知識(shí)的半壁江山。寫到最后的感受基本類似于大佬住我心，有些寫出的話難以找回原出處，但確實(shí)可能被某個(gè)實(shí)踐者說(shuō)過(guò)；所有的參考內(nèi)容和推薦內(nèi)容，我會(huì)在另一篇文章進(jìn)行分享，感興趣的朋友可以持續(xù)關(guān)注。

在創(chuàng)建設(shè)計(jì)體系之前，首先我們需要思考的問(wèn)題，就是目前我們是否需要建立設(shè)計(jì)體系?

如果公司存在大量的產(chǎn)品需要進(jìn)行遠(yuǎn)期開發(fā)和迭代，或者公司已經(jīng)存在大量的設(shè)計(jì)師和前端工程師，并進(jìn)行著重復(fù)工作時(shí)，這便是搭建和推行設(shè)計(jì)體系的好時(shí)機(jī)。

構(gòu)建設(shè)計(jì)體系有哪些階段？

不同的人有不同的理解，因?yàn)槲沂欠?wù)設(shè)計(jì)背景，因此在我的理解下，會(huì)將構(gòu)建設(shè)計(jì)體系的階段拓展到組織設(shè)計(jì)方面，并且分為以下6個(gè)階段內(nèi)容：

• 愿景建立：宣揚(yáng)愿景，建立目標(biāo)
• 團(tuán)隊(duì)配置：配置團(tuán)隊(duì)結(jié)構(gòu)與人員
• 資產(chǎn)清查：資產(chǎn)清查與體系用戶研究
• 資產(chǎn)建立：建立資產(chǎn)與體系內(nèi)容
• 流程搭建：搭建體系運(yùn)行和維護(hù)流程
• 體系評(píng)估：體系效果評(píng)估

后面的內(nèi)容也將大致圍繞這些展開。

一、愿景建立：宣揚(yáng)愿景，建立目標(biāo)

要想從設(shè)計(jì)規(guī)范演變成設(shè)計(jì)體系，僅僅依靠組織內(nèi)幾個(gè)人用愛(ài)發(fā)電是很難的，發(fā)電往往只能產(chǎn)出小的體系，難以長(zhǎng)期維護(hù)；為了實(shí)現(xiàn)更好的效果，我們需要從組織高層處獲取支持，并獲取更多資源用來(lái)建設(shè)體系。

我的第三篇文章講到的所有價(jià)值都可以作為觸動(dòng)組織提供更多資源的基礎(chǔ)，不過(guò)對(duì)不同的人需要有不同的側(cè)重點(diǎn)。

• 面對(duì)組織高層，可以側(cè)重講提高工作效率、減少維護(hù)成本和開發(fā)成本、高設(shè)計(jì)質(zhì)量帶來(lái)的市場(chǎng)競(jìng)爭(zhēng)力等角度出發(fā)。除此之外，有些企業(yè)可能會(huì)看重對(duì)行業(yè)的影響力和引領(lǐng)度而打算投資建設(shè)設(shè)計(jì)體系。
• 面對(duì)設(shè)計(jì)與開發(fā)團(tuán)隊(duì)，可以側(cè)重談?wù)摐p少設(shè)計(jì)與技術(shù)重復(fù)勞動(dòng)，提升設(shè)計(jì)開發(fā)的效率，以花更多時(shí)間思索如何是實(shí)現(xiàn)多方面的需求，并創(chuàng)建一致化的品牌和流暢的用戶體驗(yàn)，提高協(xié)作滿意度。

當(dāng)然口說(shuō)無(wú)憑，就算有第三方業(yè)務(wù)的數(shù)據(jù)還是很難說(shuō)服他們，我們需要更加顯性具體的方式衡量ROI。在我們擁有初步的設(shè)計(jì)體系后，可以通過(guò)與設(shè)計(jì)和開發(fā)團(tuán)隊(duì)進(jìn)行類似設(shè)計(jì)沖刺的活動(dòng)，來(lái)評(píng)估使用和不使用設(shè)計(jì)體系可以節(jié)省多少時(shí)間與財(cái)力，提供一個(gè)簡(jiǎn)單的指標(biāo)，來(lái)幫助獲取組織認(rèn)同，獲取更多資源。

在這個(gè)過(guò)程中，我們也需要設(shè)定合適的期望以衡量設(shè)計(jì)體系的效果；以下幾個(gè)因素可以作為合適的標(biāo)準(zhǔn)（基于Termini & Martin，2018），可以通過(guò)上述的活動(dòng)推算基本指標(biāo)數(shù)據(jù)，之后作為建設(shè)設(shè)計(jì)體系的OKR中的關(guān)鍵結(jié)果的衡量指標(biāo)。

• 易用度：用戶使用某個(gè)產(chǎn)品/服務(wù)來(lái)解決問(wèn)題的難易程度（Ant Design，2020）。
• 交付量：最明顯的是使用設(shè)計(jì)體系后同等時(shí)間效果下，設(shè)計(jì)與開發(fā)的交互量的變化。
• 錯(cuò)誤率：這個(gè)指標(biāo)用來(lái)衡量如果使用設(shè)計(jì)指標(biāo)后，可以消除的失誤產(chǎn)生幾率。
• 可用性：通過(guò)可用性指標(biāo)測(cè)試，用來(lái)測(cè)試產(chǎn)品的可用性情況，另外這個(gè)方面也可用客戶滿意度來(lái)衡量。
• 復(fù)用率：組件被使用者多次重復(fù)使用的幾率。
• 團(tuán)隊(duì)滿意度：可以針對(duì)現(xiàn)有設(shè)計(jì)與開發(fā)團(tuán)隊(duì)進(jìn)行內(nèi)部調(diào)查，了解設(shè)計(jì)與開發(fā)使用設(shè)計(jì)體系的滿意度。
• 團(tuán)隊(duì)NPS：一開始設(shè)計(jì)體系并不是強(qiáng)制使用的，除了依靠體系團(tuán)隊(duì)的推廣外，十分依靠使用者的推薦，因此評(píng)估使用者的凈推薦值將是不錯(cuò)的衡量，也能側(cè)面反應(yīng)團(tuán)隊(duì)滿意度。

二、團(tuán)隊(duì)配置：配置團(tuán)隊(duì)結(jié)構(gòu)與人員

現(xiàn)在如果資源就緒，組織也支持我們?nèi)プ?，也?duì)我們抱有一定預(yù)期和期望，那么著重準(zhǔn)備我們的團(tuán)隊(duì)吧，配置的關(guān)鍵是根據(jù)組織和產(chǎn)品發(fā)展情況合理調(diào)配。

1. 選擇合適的人員

盡管叫”設(shè)計(jì)體系”，但設(shè)計(jì)師只是其中一環(huán)而已。不同的組織當(dāng)然會(huì)有不同的人員構(gòu)成，會(huì)有不同的適配性變化。

Nathan Curtis的文章，設(shè)計(jì)你的設(shè)計(jì)體系團(tuán)隊(duì)（Designing a Systems Team，2017)結(jié)合自身建設(shè)體系的實(shí)踐經(jīng)驗(yàn)就認(rèn)為，需要一個(gè)包含設(shè)計(jì)、技術(shù)、管理等組成的多學(xué)科設(shè)計(jì)體系團(tuán)隊(duì)來(lái)促進(jìn)體系的使用和進(jìn)步，在此文中也描述了不同規(guī)模團(tuán)隊(duì)的人員構(gòu)成推薦。

不同規(guī)模團(tuán)隊(duì)的人員組成，圖片源于Nathan Curtis（2017）

設(shè)計(jì)體系團(tuán)隊(duì)中的子團(tuán)隊(duì)，圖片源于Nathan Curtis（2017）

無(wú)論規(guī)模大小，團(tuán)隊(duì)領(lǐng)導(dǎo)者必須分別具備設(shè)計(jì)、編程和產(chǎn)品管理技能。同時(shí)在大型體系團(tuán)隊(duì)中，將包含產(chǎn)品（偏設(shè)計(jì)）主管和產(chǎn)品（偏工程）主管；同時(shí)搭配數(shù)個(gè)全職和兼職的設(shè)計(jì)與工程人員，甚至還可以加入內(nèi)容策略師、可訪問(wèn)性專家、性能專家等等角色。

除了領(lǐng)導(dǎo)者之外，我們還需要找那些人？inVision的書中也提到了一個(gè)人員列表，例如：

• 設(shè)計(jì)師定義系統(tǒng)的視覺(jué)元素；
• 前端開發(fā)人員創(chuàng)建模塊化且高效的代碼；
• 可訪問(wèn)性專家確保系統(tǒng)符合WCAG（網(wǎng)頁(yè)內(nèi)容無(wú)障礙指南，全稱Web Content Accessibility Guidelines，是一套幫助開發(fā)者開發(fā)能讓殘障人士更容易訪問(wèn)Web內(nèi)容的國(guó)際標(biāo)準(zhǔn)）等標(biāo)準(zhǔn)；
• 內(nèi)容策略師可以幫助團(tuán)隊(duì)確定表達(dá)內(nèi)容的方式和基調(diào)；
• 用戶研究人員可以幫助您了解客戶需求；
• 性能專家可以確保系統(tǒng)能快速地加載到所有設(shè)備上；
• 產(chǎn)品經(jīng)理確保符合客戶與業(yè)務(wù)需求；
• 大領(lǐng)導(dǎo)(副總裁和主管)可以在整個(gè)公司（尤其是中高層管理層）內(nèi)倡導(dǎo)和協(xié)調(diào)愿景……

2. 選擇合適的管理模式

設(shè)計(jì)體系本身就可以作為產(chǎn)品，當(dāng)然也可以作為方法論；如果把設(shè)計(jì)體系當(dāng)成產(chǎn)品，那么體系用戶將會(huì)有三種劃分。

基于Nikolas Klein（Figma）的?劃分設(shè)計(jì)體系的成熟度（The spectrum of maturity for design systems）一文，我們可以將設(shè)計(jì)體系的用戶劃分為創(chuàng)造者（Creators）、使用者（Users，原文是Consumer消費(fèi)者）、貢獻(xiàn)者（Contributors）等三種角色。

• 創(chuàng)造者是體系結(jié)構(gòu)的構(gòu)建者，不僅為現(xiàn)有問(wèn)題提供初步設(shè)計(jì)解決方案和前端解決方案，也承擔(dān)推廣、分發(fā)、同步、質(zhì)量管理、版本管理和更新等任務(wù)，是設(shè)計(jì)體系的核心團(tuán)隊(duì)。
• 使用者是公司內(nèi)外的團(tuán)隊(duì)，使用設(shè)計(jì)體系中的指南、組件、資源、工具等元素來(lái)構(gòu)建產(chǎn)品。
• 貢獻(xiàn)者是在實(shí)際使用過(guò)程中，發(fā)現(xiàn)現(xiàn)有問(wèn)題，提出新的解決方案，并通過(guò)體系流程協(xié)助設(shè)計(jì)體系團(tuán)隊(duì)協(xié)同更新體系的人。

設(shè)計(jì)體系團(tuán)隊(duì)會(huì)跟著組織大小適應(yīng)性的變化。團(tuán)隊(duì)小的時(shí)候采用少量人兼職管理；而團(tuán)隊(duì)逐漸發(fā)展，當(dāng)產(chǎn)品組合足夠龐大時(shí)，就不得不并行發(fā)展，或是引入顧問(wèn)或成立專門的設(shè)計(jì)體系開發(fā)者與管理者。其中的體系用戶角色也會(huì)跟著變化：

• 小型團(tuán)隊(duì)：所有創(chuàng)造者都是使用者，使用者多是貢獻(xiàn)者；
• 中型團(tuán)隊(duì)：部分使用者是創(chuàng)造者，貢獻(xiàn)者多來(lái)于創(chuàng)造者；
• 大型團(tuán)隊(duì)：貢獻(xiàn)者同時(shí)來(lái)于創(chuàng)造者和使用者；
• 平臺(tái)型體系：擁有大量外部使用者依賴該體系，貢獻(xiàn)者不止來(lái)源于企業(yè)內(nèi)部，也來(lái)源于外部使用者。

在實(shí)踐中，組織內(nèi)部通常有不同的設(shè)計(jì)體系管理模式。那么這里的關(guān)鍵是我們?nèi)绾芜x擇合適的設(shè)計(jì)體系關(guān)系模型？

例如Airbnb全球永遠(yuǎn)2000余名員工，約有60+個(gè)產(chǎn)品設(shè)計(jì)師，同時(shí)有全職的設(shè)計(jì)體系團(tuán)隊(duì)（設(shè)計(jì)師與工程師共同組成）（Kholmatova，2017）。

設(shè)計(jì)體系專家Nathan Curtis（2015）和Salesforce的Jina Anne（2015）提出了4種設(shè)計(jì)體系團(tuán)隊(duì)與產(chǎn)品團(tuán)隊(duì)的關(guān)系模型。

如下：

• 獨(dú)裁模式（Solitary Model, “The Overlord”）?單獨(dú)的一個(gè)設(shè)計(jì)團(tuán)隊(duì)來(lái)建立設(shè)計(jì)體系，其他團(tuán)隊(duì)根據(jù)需求進(jìn)行使用。（一般初期的設(shè)計(jì)團(tuán)隊(duì)會(huì)使用）
• 集中化模式（Centralized Model）.一個(gè)全職、單獨(dú)的中央的設(shè)計(jì)團(tuán)隊(duì)運(yùn)營(yíng)支撐其他團(tuán)隊(duì)使用的設(shè)計(jì)體系。（如Atlassian設(shè)計(jì)體系和Airbnb的DLS）
• 聯(lián)盟模式（Federated Model）?多個(gè)產(chǎn)品團(tuán)隊(duì)的設(shè)計(jì)師一起決策和管理設(shè)計(jì)體系。（如TED）
• 混合循環(huán)模式（Cyclical Model）。結(jié)合集中化模式與聯(lián)盟模式，有專門的管理團(tuán)隊(duì)和其他內(nèi)部團(tuán)隊(duì)的貢獻(xiàn)，同時(shí)不定期會(huì)將其他產(chǎn)品的人員調(diào)入設(shè)計(jì)體系團(tuán)隊(duì)進(jìn)行管理維護(hù)；同時(shí)通過(guò)開放設(shè)計(jì)體系，還加入一些生態(tài)系統(tǒng)中組織外部團(tuán)隊(duì)的貢獻(xiàn)支持。 (如Salesforce的Lightning設(shè)計(jì)體系以及目前螞蟻集團(tuán)的Ant Design設(shè)計(jì)體系）

圖源自Nathan Curtis（2015）和Jina Anne（2015）提出的4種團(tuán)隊(duì)關(guān)系模式

當(dāng)然不同的團(tuán)隊(duì)模式有不同的優(yōu)缺點(diǎn)：

• 獨(dú)裁模式可以進(jìn)行快速搭建，但因?yàn)槿狈ι鷳B(tài)貢獻(xiàn)而限制了體系的進(jìn)一步發(fā)展。
• 集中化模式的核心負(fù)責(zé)團(tuán)隊(duì)雖然方便管理，但容易丟失對(duì)用戶的理解。
• 聯(lián)盟模式集成了對(duì)用戶的理解，但缺乏合適的管理和負(fù)責(zé)制度則讓設(shè)計(jì)體系容易停滯。
• 混合循環(huán)模式目前得到更多的使用，但操作起來(lái)也十分復(fù)雜。

三、資產(chǎn)清查：資產(chǎn)清查與體系用戶研究

大型團(tuán)隊(duì)的形成往往很難一蹴而就，但只要我們召集到足夠的人手，便可以開始行動(dòng)，但不是立即開展體系建設(shè)，而是在著手開始設(shè)計(jì)體系的建設(shè)之前，需要對(duì)現(xiàn)有資產(chǎn)進(jìn)行清查。

當(dāng)然我們使用簡(jiǎn)單或者更加標(biāo)準(zhǔn)化的清查方式都可以，例如Brad Frost就舉例了使用在線PPT來(lái)放置截圖的方式進(jìn)行清查（Brad Frost，2016）；并且在這一過(guò)程中，可以讓組織中盡可能多的人參與，例如UX設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、前端開發(fā)人員、后端開發(fā)人員、文案、內(nèi)容策略師、產(chǎn)品經(jīng)理等等任何的其他利益相關(guān)者，可以讓整個(gè)團(tuán)隊(duì)了解到現(xiàn)有的問(wèn)題，并建立共享詞匯表（Brad Frost，2016）。

圖來(lái)自Atomic Deign，P97（Brad Frost，2016）

HubSpot平臺(tái)中的所有按鈕的視覺(jué)組件

更加標(biāo)準(zhǔn)的方式則需要我們的的主力團(tuán)隊(duì)來(lái)實(shí)現(xiàn)。除了視覺(jué)樣式之外，我們需要更加詳實(shí)的記錄出處、交互的狀態(tài)變化、交互模式等等變化；這里其實(shí)可以找測(cè)試專家，提供一份測(cè)試用例，能更方便的探查那些隱秘的彈窗、信息通知等方式（因?yàn)檫@些不容易被察覺(jué)到）。

1. 要清查哪些內(nèi)容？

我將在后面的文章中，放出我基于對(duì)御三家平臺(tái)級(jí)設(shè)計(jì)體系（Apple的HIG、Google的MDS、Microsoft的FDS）和國(guó)內(nèi)外企業(yè)級(jí)設(shè)計(jì)體系（Salesforce的LDS、Atlassian的ADS、螞蟻金服的AD）的資產(chǎn)清單。

資產(chǎn)清查這一過(guò)程，我們可以收集到最新的有可能繁復(fù)無(wú)比的UI組件的設(shè)計(jì)與編碼清單、內(nèi)容策略、文案策略、表達(dá)溝通策略等等，以及存在于這些基礎(chǔ)之上的不一致現(xiàn)象；這些產(chǎn)出可以不僅讓團(tuán)隊(duì)們都了解現(xiàn)在的問(wèn)題有多么嚴(yán)峻，也會(huì)讓高層領(lǐng)導(dǎo)真正意識(shí)到問(wèn)題?？梢詭椭鷪F(tuán)隊(duì)了解確定設(shè)計(jì)體系的工作范圍，也可以獲取組織的資源支持。

剩下的就需要設(shè)計(jì)體系團(tuán)隊(duì)對(duì)哪些模式應(yīng)該保留，哪些應(yīng)該走，哪些可以合并在一起等相關(guān)內(nèi)容進(jìn)行核查、討論。

2. 體系用戶研究

設(shè)計(jì)體系的關(guān)鍵是體系如何與真實(shí)的人溝通，而不是組件本身。因此在我們清查、構(gòu)建和迭代的過(guò)程會(huì)不斷穿插體系用戶的研究。這個(gè)過(guò)程將會(huì)讓大家知道，我們正在建設(shè)體系，希望他們即時(shí)測(cè)試和使用，提出意見(jiàn)。

永遠(yuǎn)不要閉門造車，直到最后扔出個(gè)不能用的廢鐵，被體系用戶棄置。

一開始就讓每個(gè)人都參與進(jìn)來(lái)，并在整個(gè)過(guò)程中與他們合作，對(duì)于您所設(shè)計(jì)的語(yǔ)言的成功至關(guān)重要?！狹arco Lopes，TravelPerk高級(jí)產(chǎn)品設(shè)計(jì)師

通常來(lái)說(shuō)設(shè)計(jì)體系的搭建不是從0到1，而是從0.1、0.2到1。因此我們除了了解現(xiàn)有的設(shè)計(jì)資產(chǎn)外，還需要知道現(xiàn)有的規(guī)則。設(shè)計(jì)體系的用戶包含高管、領(lǐng)導(dǎo)、管理層（關(guān)注效益目標(biāo)），產(chǎn)品團(tuán)隊(duì)中的設(shè)計(jì)師、前端工程師與產(chǎn)品經(jīng)理等（關(guān)注實(shí)際使用效果），以及內(nèi)外部社區(qū)用戶（關(guān)注輔助使用效果）。

這個(gè)過(guò)程，我們可以獲取到領(lǐng)導(dǎo)層期望目標(biāo)、各個(gè)協(xié)作團(tuán)隊(duì)成員的工作流、協(xié)作工具與軟件、協(xié)作規(guī)則。這里的協(xié)作工具不只是包含純粹軟件工具，還包括那些標(biāo)注筆記等任何內(nèi)容。如果對(duì)資產(chǎn)有大致了解，也基本了解體系用戶的相關(guān)情況后，我們就可以著手建立資產(chǎn)。

四、資產(chǎn)建立：建立資產(chǎn)與體系內(nèi)容

1. 確立定位

在建立詳細(xì)的資產(chǎn)內(nèi)容前，可以思考一下設(shè)計(jì)體系的定位。設(shè)計(jì)體系從規(guī)模上可以分成平臺(tái)級(jí)設(shè)計(jì)體系（如Apple的HIG、Google的MDS、Microsoft的FDS）和公司級(jí)設(shè)計(jì)體系（如Atlassian的ADS、Salesforce的LDS和螞蟻金服的AD）。

平臺(tái)級(jí)設(shè)計(jì)體系除了服務(wù)自身企業(yè)團(tuán)隊(duì)外，更加專注幫助生態(tài)伙伴建立生態(tài)應(yīng)用；而公司級(jí)設(shè)計(jì)體系目前主要服務(wù)于企業(yè)內(nèi)某些產(chǎn)品的設(shè)計(jì)與開發(fā)，通常也公開給外部人員使用。

并且每個(gè)組織根據(jù)自身業(yè)務(wù)特色所形成的設(shè)計(jì)體系的結(jié)構(gòu)都會(huì)所不同，沒(méi)有兩個(gè)完全一致的設(shè)計(jì)體系；例如Material中就有機(jī)器學(xué)習(xí)的組件，F(xiàn)luent中針對(duì)不同硬件也會(huì)有說(shuō)明，Lightning中則會(huì)出現(xiàn)更多的數(shù)據(jù)、表單等組件，一些體系專門加入全球化與本地化的模式指南，是因?yàn)橥@些公司需要應(yīng)對(duì)更多國(guó)際化的挑戰(zhàn)，而對(duì)可訪問(wèn)性要求高的體系的產(chǎn)品也多是體量大、用戶廣的產(chǎn)品。

2. 內(nèi)容建立

我在前面的文章中已經(jīng)預(yù)先提到了設(shè)計(jì)的體系的結(jié)構(gòu)，接下來(lái)的重點(diǎn)就需要我們對(duì)三個(gè)層核心體系內(nèi)容進(jìn)行適應(yīng)性的重塑和建立。

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

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

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

其中各內(nèi)容的描述如下：

愿景與原則（Vision & Principle）：

愿景是最大的標(biāo)記原則根據(jù)組織和產(chǎn)品的目的變化，主要作用是建立一種通用的評(píng)價(jià)標(biāo)準(zhǔn)，指導(dǎo)設(shè)計(jì)與開發(fā)，幫助使用人員進(jìn)行評(píng)估，以形成相關(guān)團(tuán)隊(duì)的決策共識(shí)。也有稱設(shè)計(jì)價(jià)值觀、設(shè)計(jì)語(yǔ)言的。

模式指南(Patterns Guideline)：

模式是可重用組件的集合，模式指南對(duì)功能性模式進(jìn)行規(guī)則定義，其中包含大量的組件內(nèi)容，但其中的重點(diǎn)是對(duì)如何使用組件進(jìn)行定義。另外除了組件外，還會(huì)對(duì)互動(dòng)方式、輸入方式、可用性等等內(nèi)容進(jìn)行定義。

樣式指南（Style Guideline）：

樣式指南是對(duì)大部分非功能性模塊進(jìn)行規(guī)范，對(duì)如配色、交互狀態(tài)、動(dòng)畫、排版、間距、圖標(biāo)樣式、形狀與邊框、插畫、照片、標(biāo)志、布局、數(shù)據(jù)可視化方式，甚至可能包括品牌身份，設(shè)計(jì)語(yǔ)言，聲音和語(yǔ)氣，寫作，模式和代碼風(fēng)格指南等進(jìn)行描述和定義，提供最佳用例和錯(cuò)誤用例。它們大部分無(wú)法形式單獨(dú)組件，但是可以提供代碼。

內(nèi)容指南（Content Guideline）：

內(nèi)容指南通常無(wú)法提供代碼，但能通過(guò)描述和用例來(lái)對(duì)一些難量化的內(nèi)容進(jìn)行規(guī)范指導(dǎo)。例如語(yǔ)氣和音調(diào)、音效、文案風(fēng)格等。

組件庫(kù)（Components Libraries）：

這是主要面向前端工程人員的工具，通常是開放的網(wǎng)站或者內(nèi)部的文件（是文件而非文檔）。組件背后是體系中的可重用代碼的一部分，它們是應(yīng)用程序接口的構(gòu)建塊，開發(fā)人員可以快捷地使用它們。不同的體系中組件的大小和復(fù)雜性可能有所不同，如頭像框、對(duì)話框、彈窗、按鈕、橫幅、下拉式菜單、文本框、選擇框、菜單、導(dǎo)航等等。

工具包（Toolkits）：

這主要面對(duì)設(shè)計(jì)人員，提供了可供常規(guī)設(shè)計(jì)軟件打開，由設(shè)計(jì)師直接使用的文檔。一般直接可以在體系網(wǎng)站或在設(shè)計(jì)團(tuán)隊(duì)內(nèi)部流傳。

協(xié)同工具（Collaborative Tools）：

更為前沿的設(shè)計(jì)體系搭建者，開始提供創(chuàng)建依托于生產(chǎn)力軟件的輔助工具，以進(jìn)一步提升設(shè)計(jì)與開發(fā)者之間進(jìn)行溝通的效率。如React-Sketch.app、Kitchen等。當(dāng)然另一方面搭載設(shè)計(jì)體系的網(wǎng)站或文檔也算是一種協(xié)作工具。

管理結(jié)構(gòu)（Management Structure）：

管理結(jié)構(gòu)描述的是設(shè)計(jì)體系維護(hù)團(tuán)隊(duì)的職能和構(gòu)成結(jié)構(gòu)，以及他們與組織的產(chǎn)品的關(guān)系。

組織流程（Organization Process）：

組織流程描述設(shè)計(jì)體系如何得到形成、應(yīng)用、更新和推廣，是使設(shè)計(jì)體系成為鮮活生命體的血液。

著手建立之前，我們需要了解進(jìn)行資產(chǎn)構(gòu)建的82原則：心急吃不了熱豆腐，永遠(yuǎn)不要試圖一個(gè)一個(gè)建完，我們可以先完成80%的成分建設(shè)，再用后面的維護(hù)升級(jí)完成剩下的部分；否則預(yù)先看起來(lái)不錯(cuò)的內(nèi)容會(huì)在后續(xù)測(cè)試升級(jí)中將會(huì)被證明是無(wú)用的工作。

不管是愿景還是原則或是指南等內(nèi)容，我們都可以在持續(xù)更新中進(jìn)行調(diào)整。

3. 構(gòu)建體系愿景與原則

我們首先可以在體系定位的基準(zhǔn)下，構(gòu)建愿景（Vision），這里的愿景指設(shè)計(jì)體系的愿景，愿景通常是簡(jiǎn)潔的一句話，描述設(shè)計(jì)體系要實(shí)現(xiàn)的效果，指導(dǎo)大方向；清晰的愿景讓人明白該往何方前進(jìn)，更容易建立動(dòng)力，為實(shí)現(xiàn)體驗(yàn)?zāi)繕?biāo)和業(yè)務(wù)目標(biāo)建立決策的基礎(chǔ)。

愿景通常比較隱藏，有些體系只說(shuō)明了自己是什么，例如Alibaba Fusion只說(shuō)自己是企業(yè)級(jí)的中后臺(tái)設(shè)計(jì)系統(tǒng)解決方案，而未詳細(xì)指出自己要達(dá)成的效果。

下面的設(shè)計(jì)體系的愿景可以作為參考：

• Material Design System——更快地構(gòu)建精美的產(chǎn)品
• Lightning Design System——?jiǎng)?chuàng)造世界上最好的企業(yè)應(yīng)用程序體驗(yàn)
• Polaris Design System——共同為Shopify的所有商家打造出色的體驗(yàn)
• Ant Design——?jiǎng)?chuàng)造高效愉悅的工作體驗(yàn)

根據(jù)愿景，我們可以形成3-5條的原則，通常由簡(jiǎn)短的單詞或短句構(gòu)成，搭配詳細(xì)說(shuō)明。原則描述了根據(jù)組織特色和產(chǎn)品特色下，該設(shè)計(jì)體系的發(fā)展方向。

我們看看Ant Design的原則：

自然：數(shù)字世界的光速迭代使得產(chǎn)品日益復(fù)雜，而人類意識(shí)和注意力資源有限。面對(duì)這種設(shè)計(jì)矛盾，追求「自然」交互將是 Ant Design 持之以恒的方向。

確定性：界面是用戶與系統(tǒng)交互的媒介，是手段而非目的。在追求「自然」交互基礎(chǔ)上，通過(guò) Ant Design 創(chuàng)造的產(chǎn)品界面應(yīng)是高確定性、低合作熵的狀態(tài)。

意義感：一個(gè)產(chǎn)品或功能被設(shè)計(jì)者創(chuàng)造出來(lái)不只是用戶的需要，而更多是承載用戶的某個(gè)工作使命。產(chǎn)品設(shè)計(jì)應(yīng)充分站在工作視角，促成用戶使命的達(dá)成；同時(shí)，在「自然」、「確定」之上，兼顧用戶的人性需求，為工作過(guò)程創(chuàng)造富有意義感的人機(jī)交互。

生長(zhǎng)性：企業(yè)級(jí)產(chǎn)品功能的增長(zhǎng)與用戶系統(tǒng)角色的演變相生相伴；設(shè)計(jì)者應(yīng)為自己創(chuàng)造的產(chǎn)品負(fù)責(zé)，提升功能、價(jià)值的可發(fā)現(xiàn)性。用發(fā)展的眼光做設(shè)計(jì)，充分考慮人、機(jī)兩端的共同生長(zhǎng)。

如何建立原則？

在我參與的設(shè)計(jì)體系實(shí)踐中，其中我主要策劃了關(guān)于設(shè)計(jì)體系建立的企業(yè)共創(chuàng)工作坊。

這個(gè)工作坊由企業(yè)方品牌設(shè)計(jì)師、體驗(yàn)設(shè)計(jì)師（偏工業(yè)設(shè)計(jì)）、用戶研究員等參與；在工作坊上，我們不僅對(duì)品牌現(xiàn)有典型用戶進(jìn)行回顧（這些用戶均在項(xiàng)目中有入戶訪談過(guò)），建立對(duì)用戶對(duì)于交互體驗(yàn)的需求，另外由于有品牌部成員的參與，也能結(jié)合品牌發(fā)展理念，輔助呈現(xiàn)在設(shè)計(jì)愿景和原則上。

基于ABB的設(shè)計(jì)體系建設(shè)過(guò)程的案例和我的經(jīng)歷，可以提出一種方法是：我們可以嘗試聚集產(chǎn)品和工程師團(tuán)隊(duì)，然后劃分為不同的小組。其中一半從業(yè)務(wù)需求和用戶需求角度進(jìn)行探討，另一半從產(chǎn)品設(shè)計(jì)、體驗(yàn)設(shè)計(jì)、前端工程師等體系用戶角度進(jìn)行原則構(gòu)建。

總之，我們需要在體系原則的建立中融合業(yè)務(wù)需求、用戶需求以及體系用戶的需求，通過(guò)關(guān)鍵決策，建立關(guān)鍵規(guī)則。這些規(guī)則能夠形成設(shè)計(jì)決策的評(píng)價(jià)指標(biāo)，

當(dāng)然詳細(xì)說(shuō)明的原則讓設(shè)計(jì)與開發(fā)團(tuán)隊(duì)向愿景前進(jìn)，能作為評(píng)估決策的標(biāo)準(zhǔn)，并且會(huì)可以隨著體系和組織的發(fā)展不斷迭代改善，所以一開始我們不必想著完全定義清楚。

推薦大家閱讀加西莫多的《要想建立設(shè)計(jì)體系，必須先定義設(shè)計(jì)原則》。這篇文章論述在設(shè)計(jì)原則定義上的理解，可以去看看。

4. 指南與組件建立

根據(jù)清查的資產(chǎn)清單內(nèi)容，我們可以進(jìn)一步建立指南內(nèi)容：

• 樣式指南（包含色彩、字體、網(wǎng)格、標(biāo)志、材質(zhì)、插畫、圖標(biāo)、陰影、形狀、版式等內(nèi)容）
• 內(nèi)容指南（聲效、視頻、圖片、文案風(fēng)格、語(yǔ)音語(yǔ)調(diào)等內(nèi)容）
• 模式指南（可訪問(wèn)性、環(huán)境、手勢(shì)、輸入方式、交互、動(dòng)效、可用性、可訪問(wèn)性、可視化定義等內(nèi)容），在模式指南中會(huì)包含大量的組件（包含通用組件、導(dǎo)航、基礎(chǔ)輸入、菜單與工具條、文本、選擇器、數(shù)據(jù)展示、反饋、狀態(tài)與訊息等內(nèi)容）。

指南提供最佳實(shí)踐，能夠?qū)⒋a實(shí)時(shí)渲染和呈現(xiàn)，并且提供明確的規(guī)則，便于使用者使用。

我認(rèn)為，每個(gè)指南中的內(nèi)容的建立我們可以遵循以下流程和方式：

• 清查：資產(chǎn)清查是指南重構(gòu)的基礎(chǔ)，在上面的步驟中，我們已做了資產(chǎn)清查工作。
• 重構(gòu)：基于資產(chǎn)清查結(jié)果和已確立的體系愿景、原則，創(chuàng)建可視化的內(nèi)容（例如文案型的就寫出來(lái)，視覺(jué)組件就做出來(lái)，交互型組件就做出交互，聲音型的就形成聲音，重點(diǎn)是讓大家都能看的到、聽的到），并召集大家進(jìn)行評(píng)判，確立保留的內(nèi)容或重建新內(nèi)容；
• 定義：根據(jù)確定的內(nèi)容，進(jìn)行代碼編輯或較詳盡的內(nèi)容，形成可以組件或一些全局樣式等的代碼；
• 指導(dǎo)：對(duì)內(nèi)容進(jìn)一步確定統(tǒng)一的命名，記錄其使用規(guī)則，并且提供最佳實(shí)踐和錯(cuò)誤實(shí)踐，并建立設(shè)計(jì)令牌（Design Token）。

我們創(chuàng)建的每個(gè)內(nèi)容都需要根據(jù)業(yè)務(wù)需求在通用和靈活中抉擇。組件往往是獨(dú)立的，沒(méi)有依賴性。

通用組件可以處理多個(gè)用例，而靈活的組件可以調(diào)整和擴(kuò)展以在各種環(huán)境中工作?？山M合的組件可以組合起來(lái)創(chuàng)建新的模式；為了可重用和可擴(kuò)展，我們建立的每個(gè)模式都需要模塊化、可組合，并且需要兼有通用性和靈活性。

通常這些指南通常圍繞數(shù)字產(chǎn)品建立，一定會(huì)有小伙伴說(shuō)，啊，我們家這個(gè)不是數(shù)字產(chǎn)品，你這個(gè)方法用不上。但其實(shí)無(wú)論具體產(chǎn)品如何，思維都是適用的。

如果說(shuō)數(shù)字產(chǎn)品的組件庫(kù)是設(shè)計(jì)+代碼，那么在工業(yè)設(shè)計(jì)中，有可能就是設(shè)計(jì)+材料和工藝；在視覺(jué)傳達(dá)設(shè)計(jì)中，如企業(yè)形象識(shí)別系統(tǒng)的樣式指南部分則是非常重要的部分，可以是設(shè)計(jì)+工藝，每個(gè)企業(yè)的袋子用的材質(zhì)和工廠都能通過(guò)這種方式進(jìn)行鏈接；一些人機(jī)交互設(shè)計(jì)中的非接觸式互動(dòng)，如語(yǔ)言、手勢(shì)等，模式指南則就提升了重要程度；營(yíng)銷的設(shè)計(jì)中，內(nèi)容的指南就變得重要。

談?wù)勗O(shè)計(jì)令牌：

協(xié)作中，共享的語(yǔ)言是關(guān)鍵。設(shè)計(jì)令牌（Design Token）是為需要設(shè)計(jì)一致性的多個(gè)在線和本地產(chǎn)品而構(gòu)建。較大的企業(yè)可能有多個(gè)子品牌，而這些子品牌若想要享受設(shè)計(jì)體系帶來(lái)的支撐，但每個(gè)子品牌又都需要不同的、品牌一致的外觀和感覺(jué)；于是Salesforce UX團(tuán)隊(duì)針對(duì)這兩種情況推出了一種解決方案即設(shè)計(jì)令牌（Design Tokens）。

對(duì)設(shè)計(jì)和開發(fā)者而言，通過(guò)設(shè)計(jì)令牌標(biāo)記的通用可視化語(yǔ)言，將改善設(shè)計(jì)者與開發(fā)人員間的交流，并且能支持個(gè)性化的定制，但又不失去整體觀。

設(shè)計(jì)令牌讓多品牌共享設(shè)計(jì)體系成為可能，總的來(lái)說(shuō)，使用設(shè)計(jì)令牌有以下特性：

• 增強(qiáng)靈活性和易維護(hù)性；
• 可以建立單獨(dú)的庫(kù)可以支持測(cè)試，和代碼跨版本進(jìn)行發(fā)布；
• 允許在多個(gè)團(tuán)隊(duì)、產(chǎn)品和代碼庫(kù)之間共享代碼；
• 迫使獨(dú)立開發(fā)組件，這樣它們就不會(huì)局限于僅一個(gè)用例；
• 為強(qiáng)大的前端測(cè)試架構(gòu)提供了基礎(chǔ)框架；
• 為樣式指南奠定了基礎(chǔ)。

5. 內(nèi)容裝載

所有內(nèi)容制作完畢后，我們可以尋找合適的載體裝載這些內(nèi)容。目前來(lái)說(shuō)開發(fā)者的代碼往往可以通過(guò)在線獲取；而對(duì)于設(shè)計(jì)師，仍然需要建立設(shè)計(jì)主文檔，以盡可能囊括所有組件，并且適配現(xiàn)有設(shè)計(jì)軟件工具。這種方法很費(fèi)效率，未來(lái)的設(shè)計(jì)體系發(fā)展中，也在嘗試打破這些現(xiàn)象。

目前，設(shè)計(jì)體系往往都是打破純文檔，以在線化的方式存在，但由于不同團(tuán)隊(duì)預(yù)算有限，不一定每個(gè)團(tuán)隊(duì)都能建立起自己的體系網(wǎng)站?？傊菀撰@取是關(guān)鍵。

另外不管是文檔還是網(wǎng)站，都需要確立是否公開的問(wèn)題，例如Airbnb的DLS建立在內(nèi)部網(wǎng)站，不對(duì)外公開，也有些設(shè)計(jì)體系不公開源代碼，但公開設(shè)計(jì)資源。

6. 庫(kù)與工具建立

庫(kù)與工具（包含設(shè)計(jì)用資源、開發(fā)用資源、協(xié)同工具、學(xué)習(xí)教程等內(nèi)容）。

上一步我們已經(jīng)將內(nèi)容進(jìn)行了裝載，有些組件已經(jīng)入庫(kù)了?，F(xiàn)在進(jìn)一步，我們可以將一些內(nèi)容根據(jù)面向平臺(tái)的差別，而整合成面向設(shè)計(jì)者的資源文檔，以及在開源社區(qū)中建立模式庫(kù)，并放置在我們的載體中。

資源充足的團(tuán)隊(duì)也可進(jìn)一步建立定制化的協(xié)作工具或平臺(tái)等等，幫助設(shè)計(jì)體系進(jìn)行推廣、分發(fā)、同步、質(zhì)量管理、版本管理和更新等工作，而接下來(lái)就需要一個(gè)合適的流程來(lái)進(jìn)行管控。

五、流程搭建：建立流程搭建與維護(hù)

設(shè)計(jì)體系存在一些通用的挑戰(zhàn)，如：

• 如何讓文檔與系統(tǒng)代碼保持同步？
• 如何處理重大變更？
• 如何避免性能下降？
• 如何建立更新的流程？
• 前端代碼如何進(jìn)一步系統(tǒng)化？
• 設(shè)計(jì)者與開發(fā)者如何更好地協(xié)作？
• ······

因此我們需要組織流程的介入以幫助我們解決這些問(wèn)題。

一個(gè)優(yōu)秀的設(shè)計(jì)體系重要的是各個(gè)模塊間如何溝通交流而不是模塊內(nèi)部的屬性的行為，而且是與組織進(jìn)行一定程度的綁定關(guān)系的，反映組織的文化。讓設(shè)計(jì)體系真正活起來(lái)的就算體系流程。

遵循敏捷開發(fā)原則的工程師，和遵循以用戶為中心的設(shè)計(jì)師理念上的不同也容易造成在協(xié)作速度上的差異；協(xié)作工具的建立外，也需要一個(gè)合適的流程，進(jìn)行統(tǒng)一。

統(tǒng)一的設(shè)計(jì)語(yǔ)言不應(yīng)該只是一組靜態(tài)規(guī)則和單個(gè)原子。它應(yīng)該是一個(gè)不斷發(fā)展的生態(tài)系統(tǒng)?！狵arri Saarinen，Airbnb首席設(shè)計(jì)師

樣式指南是設(shè)計(jì)過(guò)程的產(chǎn)物。設(shè)計(jì)系統(tǒng)是一個(gè)活的、有資金支持的產(chǎn)品，有路線圖和待辦事項(xiàng)，服務(wù)于一個(gè)生態(tài)系統(tǒng)?！?Nathan Curtis，設(shè)計(jì)體系專家

通過(guò)定義清晰的流程，可以為解決問(wèn)題減少協(xié)作中的摩擦和不確定性，讓每個(gè)階段都有不同的目標(biāo)和交付物。

——流程的價(jià)值

• 流程為每一步提供了明確的期望，讓體系用戶可以專注于目前手頭的任務(wù)，而不用擔(dān)心下一步該做什么。
• 標(biāo)準(zhǔn)化的流程可以每一步中建立數(shù)據(jù)，這些數(shù)據(jù)可以被引用并用于通知未來(lái)的迭代或修正和快速的測(cè)試使用。
• 流程建立了在產(chǎn)品創(chuàng)建過(guò)程中，每個(gè)相關(guān)團(tuán)隊(duì)成員的角色和職責(zé)的理解——即是在正確的時(shí)間引入正確的人，使每個(gè)人的參與都有利于產(chǎn)出的質(zhì)量。
• 一個(gè)可預(yù)測(cè)的過(guò)程將確保進(jìn)展順利、高效和可預(yù)測(cè)，同時(shí)也提高質(zhì)量和一致性。

——什么樣的體系流程是好的流程？

總的來(lái)說(shuō)，我們需要考慮對(duì)使用、定制、驗(yàn)證、同步等各種情境，并形成清晰合理的流程，才能保證動(dòng)態(tài)化的設(shè)計(jì)體系。

我們需要考慮以下的情境（Brad Frost,2019）：

• 常規(guī)使用；
• 使用中發(fā)現(xiàn)組件不存在或不符合要求；
• 對(duì)新組件進(jìn)行原型化和審查；
• 進(jìn)一步設(shè)計(jì)/開發(fā)和測(cè)試；
• 文檔化和發(fā)布；
• 支持實(shí)際使用組件中發(fā)生新問(wèn)題；

大圖看這個(gè)

在建立過(guò)程中，一張?jiān)敱M的路徑圖不管是內(nèi)部保留還是公開，也是向自己的團(tuán)隊(duì)和體系用戶表明狀態(tài)、展示價(jià)值的良好工具。這種版本控制方法，可以構(gòu)建持續(xù)開發(fā)的文化。

當(dāng)我們的設(shè)計(jì)體系1.0搭建完成后，設(shè)計(jì)體系團(tuán)隊(duì)也有更多事情要完成；例如進(jìn)一步建立知識(shí)共享的流程、公開推廣、更新、管理，甚至是輔助入職培訓(xùn)。

當(dāng)設(shè)計(jì)體系逐漸成熟，也會(huì)形成不同的層次，以支持不同子產(chǎn)品的獨(dú)立開發(fā)。分層也算是相比于設(shè)計(jì)令牌的另一種解決辦法，但也能同時(shí)去使用。

圖源自Nathan Curtis，Design System Tiers（2019-2）

接下來(lái)，我們?cè)倏匆恍┲O(shè)計(jì)體系的組織流程例子：

1. inVision

inVision的流程分為6塊內(nèi)容，4個(gè)驗(yàn)證循環(huán)過(guò)程。

• 理解(Understand)：利用顧客研究獲取見(jiàn)解，以深入了解問(wèn)題，并確定它如何與業(yè)務(wù)目標(biāo)保持一致。PM領(lǐng)導(dǎo)這一階段，并與研究團(tuán)隊(duì)合作進(jìn)行訪談、收集數(shù)據(jù)，并進(jìn)行競(jìng)品研究。
• 探索(Explore)：設(shè)計(jì)團(tuán)隊(duì)構(gòu)思并探索數(shù)個(gè)可能的解決方案，并與產(chǎn)品和研究團(tuán)隊(duì)合作生產(chǎn)線框圖、核心流程和用戶旅程。
• 定義(Define)：一旦確定了潛在的解決方案，產(chǎn)品團(tuán)隊(duì)就努力讓每個(gè)人都知道成功是什么樣的。這項(xiàng)工作的輸出對(duì)問(wèn)題描述和成功地衡量規(guī)則。
• 設(shè)計(jì)(Design)：提煉解決方案是設(shè)計(jì)團(tuán)隊(duì)的責(zé)任。他們與研究、產(chǎn)品和工程團(tuán)隊(duì)合作，開發(fā)核心流程、原型，并確定技術(shù)需求。
• 構(gòu)建(Build)：工程將設(shè)計(jì)和原型轉(zhuǎn)化為現(xiàn)實(shí)。產(chǎn)品團(tuán)隊(duì)協(xié)調(diào)質(zhì)量保證、支持文檔以及銷售和營(yíng)銷團(tuán)隊(duì)。
• 學(xué)習(xí)(Learn)：觀察推出的解決方案的有效性。產(chǎn)品團(tuán)隊(duì)與研究、設(shè)計(jì)和工程團(tuán)隊(duì)合作，根據(jù)成功衡量標(biāo)準(zhǔn)收集見(jiàn)解，以此來(lái)指導(dǎo)下一步或再循環(huán)。

2. Fluent Design System

Fluent Design是一個(gè)集體的、開放的設(shè)計(jì)系統(tǒng)，可確保人員、團(tuán)隊(duì)及其產(chǎn)品具有構(gòu)建的基本組件和流程以建立跨平臺(tái)的連貫體驗(yàn)。（Joseph McLaughlin，2019b）Fluent Design System的組織支撐流程中包含F(xiàn)luent Process（流暢流程）的一種工作流程。

根據(jù)微軟全球開發(fā)者大會(huì)，我總結(jié)的流程圖片

流暢流程以共創(chuàng)（Co-creation）、連貫（Coherance）、創(chuàng)新（Innovation）作為核心原則；在原則指導(dǎo)下，這種工作方法首先是和共創(chuàng)者參與的孵化，到和開發(fā)者與設(shè)計(jì)者的系統(tǒng)性開發(fā)，再到終端用戶參與下的大眾測(cè)試與評(píng)判，最后再到整個(gè)生態(tài)系統(tǒng)蔓延，這即為一次流暢設(shè)計(jì)浪潮（Fluent Design Wave）循環(huán)；這種浪潮一般每半年在全球的開發(fā)者大會(huì)上發(fā)布一次，以迭代流暢設(shè)計(jì)體系，加快體系的快速發(fā)展。(微軟開發(fā)者大會(huì), 2019)

流暢設(shè)計(jì)體系（FDS）帶來(lái)的不僅是一個(gè)跨平臺(tái)的設(shè)計(jì)、編程和交互行為的共享的用戶體驗(yàn)框架集合，也是產(chǎn)品團(tuán)隊(duì)跨學(xué)科工作的新方法；這種方法可以減少設(shè)計(jì)與開發(fā)間的鴻溝，簡(jiǎn)化開發(fā)人員生態(tài)系統(tǒng)，讓各種合作伙伴都能從這種框架下受益，并且可以為客戶提供全天全流程的無(wú)縫體驗(yàn)。

就像產(chǎn)品設(shè)計(jì)一樣，我們將設(shè)計(jì)體系視為可以為我們的用戶解決問(wèn)題的設(shè)計(jì)挑戰(zhàn)，以用戶為中心，不過(guò)這次的用戶是我們的設(shè)計(jì)師、設(shè)計(jì)團(tuán)隊(duì)、工程師團(tuán)隊(duì)和產(chǎn)品負(fù)責(zé)人等等。——微軟設(shè)計(jì)總監(jiān)合伙人Joseph McLaughlin（2019b）

3. Ant Design

來(lái)自”Ant Design 資產(chǎn)工程化探索和實(shí)踐“（2021-1）視頻的截圖

Ant Design中也存在一個(gè)基本的流程，從研發(fā)到部署到驗(yàn)收到發(fā)布；如果某個(gè)使用者因?yàn)闃I(yè)務(wù)需要，定制了自己的方案，會(huì)有一系列流程讓設(shè)計(jì)體系團(tuán)隊(duì)知道發(fā)生了什么，這些清晰的流程讓每個(gè)人到明確自己在使用設(shè)計(jì)體系中的角色。

六、體系評(píng)估：體系效果評(píng)估

本文開頭已經(jīng)提供一些設(shè)計(jì)體系的評(píng)估指標(biāo)：如易用度、交付量、錯(cuò)誤率、可用性、復(fù)用率、團(tuán)隊(duì)滿意度、團(tuán)隊(duì)NPS等指標(biāo)可以進(jìn)行評(píng)估。

但進(jìn)一步來(lái)說(shuō)，哪個(gè)是核心考慮的因素？是重用率。因?yàn)檫@個(gè)指標(biāo)其實(shí)也復(fù)合了一定的團(tuán)隊(duì)的接受能力、使用效率、使用效果等因素，如果做簡(jiǎn)要的評(píng)估，這就是一個(gè)重要的評(píng)估指標(biāo)。

Thomas Derleth(2018)的研究表明，通過(guò)重用以提高生產(chǎn)率的潛力取決于集成用戶界面組件的成本、以可重用方式開發(fā)用戶界面組件的成本以及單個(gè)用戶界面組件的重用次數(shù)；他也發(fā)現(xiàn)組件庫(kù)的成功取決于產(chǎn)品團(tuán)隊(duì)對(duì)它的接受程度以及他們對(duì)用戶界面組件和CSS服務(wù)的重用行為。

只有一致地重用用戶界面組件和服務(wù)，才能最大限度地減少變更耦合，提高用戶界面的一致性，從而積極地提高每個(gè)產(chǎn)品團(tuán)隊(duì)的生產(chǎn)力。

通過(guò)這樣的6個(gè)流程期望能建立富有生命力優(yōu)秀設(shè)計(jì)體系。

• 愿景建立：宣揚(yáng)愿景，建立目標(biāo)
• 團(tuán)隊(duì)配置：配置團(tuán)隊(duì)結(jié)構(gòu)與人員
• 資產(chǎn)清查：資產(chǎn)清查與體系用戶研究
• 資產(chǎn)建立：建立資產(chǎn)與體系內(nèi)容
• 流程搭建：搭建體系運(yùn)行和維護(hù)流程
• 體系評(píng)估：體系效果評(píng)估

下一篇，我將分享設(shè)計(jì)體系的未來(lái)可能發(fā)展。謝謝閱讀??！

如果有任何不準(zhǔn)確的地方，歡迎交流~

相關(guān)閱讀：

設(shè)計(jì)體系丨設(shè)計(jì)體系的涌現(xiàn)：適應(yīng)組織的需要（一）

設(shè)計(jì)體系丨什么才是設(shè)計(jì)體系？結(jié)構(gòu)、原則與認(rèn)知誤區(qū)（二）

設(shè)計(jì)體系丨設(shè)計(jì)體系有什么用？?jī)r(jià)值與缺陷（三）

作者：龍哩個(gè)龍 。公眾號(hào)：LONG說(shuō)設(shè)計(jì)

本文由 @龍哩個(gè)龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議