成功建立有效的設(shè)計(jì)系統(tǒng)并持續(xù)維護(hù)已經(jīng)是業(yè)內(nèi)一個(gè)組織是否在創(chuàng)新文化方面成功/及格的標(biāo)志。本文作者從自身工作經(jīng)驗(yàn)出發(fā)，結(jié)合實(shí)際案例，對(duì)設(shè)計(jì)系統(tǒng)的意義、具體設(shè)計(jì)方法和注意要點(diǎn)進(jìn)行了總結(jié)，希望對(duì)你有用。

Design System是不可能一篇講完的，實(shí)際上根本不可能講完。因?yàn)閐esign system相關(guān)技術(shù)、建設(shè)方法、對(duì)應(yīng)要求等都在一直變化，各位看官容小弟在這里淺談一下算了。

一、什么是design system（設(shè)計(jì)系統(tǒng)）?

相信今天從事互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的朋友們聽(tīng)說(shuō)過(guò)，尤其是UI設(shè)計(jì)師、前端工程師。不過(guò)如果你打算舉手并交出你的sketch控件庫(kù)?，那么可能還是需要進(jìn)修一下。成功建立有效的設(shè)計(jì)系統(tǒng)并持續(xù)維護(hù)之已經(jīng)是業(yè)內(nèi)一個(gè)組織是否在創(chuàng)新文化方面成功/及格的標(biāo)志。在不同的產(chǎn)品屬性、生命周期導(dǎo)致的不同語(yǔ)境之下，設(shè)計(jì)系統(tǒng)的定義可以非常不一樣，我以能夠?qū)Ξa(chǎn)品團(tuán)隊(duì)輸出實(shí)際價(jià)值的角度去定義設(shè)計(jì)系統(tǒng)的關(guān)鍵組成的話，它至少應(yīng)該起到以下作用：

1. 對(duì)于統(tǒng)一的、不斷補(bǔ)充、豐富甚至修正的設(shè)計(jì)語(yǔ)言有完整的描述
2. 保證高質(zhì)量產(chǎn)出的前提下，能夠?yàn)樵O(shè)計(jì)流程、代碼落地過(guò)程提速
3. 把設(shè)計(jì)樣式和代碼對(duì)應(yīng)到一起的系統(tǒng)結(jié)構(gòu)

二、制作design system的意義何在?

從2017年開(kāi)始接觸并且在一家全球五百里面瞎弄過(guò)些（對(duì)~不止一個(gè)所以是“些”）設(shè)計(jì)系統(tǒng)。因?yàn)橛型虏巯右删筒幻餮粤?，畢竟學(xué)習(xí)、試錯(cuò)過(guò)程誰(shuí)都可以有，個(gè)人也罷部門(mén)也罷公司也罷。之前在微軟也參與過(guò)Bing的new branding refresh，不過(guò)如果用現(xiàn)在的設(shè)計(jì)系統(tǒng)標(biāo)準(zhǔn)看，那僅僅是設(shè)計(jì)層面的設(shè)計(jì)語(yǔ)言總結(jié)、控件規(guī)范的那一部分，再?gòu)?qiáng)調(diào)一次，這些還不算是設(shè)計(jì)系統(tǒng)，去面試的時(shí)候別拿一套控件庫(kù)出來(lái)就瞎比比，專業(yè)領(lǐng)域里面有術(shù)語(yǔ)的變化肯定是有原因的，而且那個(gè)原因極少是“逼格更高”，認(rèn)清這一點(diǎn)才算有了持續(xù)進(jìn)步的門(mén)票。

相信很多團(tuán)隊(duì)對(duì)于設(shè)計(jì)系統(tǒng)都經(jīng)歷過(guò)因?yàn)椤叭擞形矣小钡母驹蚨l(fā)起過(guò)甚至建成了形形色色的設(shè)計(jì)系統(tǒng)，有個(gè)內(nèi)容豐富的網(wǎng)站，滿滿的小字號(hào)文案、分門(mén)別類的控件庫(kù)、頁(yè)面模板以及不管用不用反正這里有的對(duì)應(yīng)代碼。對(duì)了，還需要有個(gè)trendy的名字。

沒(méi)有實(shí)際意義的設(shè)計(jì)系統(tǒng)一般有特征如下：建立完成了之后，一直就歲月靜好地躺著，沒(méi)有更新；流量不大，展示時(shí)會(huì)被打開(kāi)一下，但是鮮有設(shè)計(jì)師點(diǎn)開(kāi)（可能剛到崗下載完控件庫(kù)文件就沒(méi)有然后），團(tuán)隊(duì)里面的前端工程師更甚可能連網(wǎng)址都記不住。好了吐槽完畢，以下凈說(shuō)好話。

其實(shí)設(shè)計(jì)系統(tǒng)的意義從一開(kāi)始被提出概念時(shí)就已經(jīng)非常明確。整體設(shè)計(jì)有所沉淀之后，設(shè)計(jì)樣式抽象出復(fù)用性、前端根據(jù)所用框架制作可復(fù)用（并真實(shí)被一直復(fù)用）代碼，達(dá)到省卻設(shè)計(jì)、前端重復(fù)用力，從最終落地效果去保證設(shè)計(jì)一致性。理論基礎(chǔ)是atomic design，出色例子有air BnB的馳名國(guó)內(nèi)外設(shè)計(jì)系統(tǒng)、salesfoce的Lightning Design System，當(dāng)然還有國(guó)粹Ant Design，這些你都知道了。

至于行業(yè)環(huán)境基礎(chǔ)，我自己的總結(jié)是任何一個(gè)在某垂直做大做精的產(chǎn)品，都會(huì)有許許多多類似但是又有那么丁丁點(diǎn)點(diǎn)的必要差異化需要照顧，參照一下中臺(tái)功能帶來(lái)的變革就是為了避免重復(fù)造輪糟蹋人力一樣，難道作為設(shè)計(jì)師/前端工程師的你真希望人力在無(wú)盡的歲月里頭，把精力耗在“改個(gè)字段”、“加個(gè)輸入框”之類的需求當(dāng)中？你樂(lè)意養(yǎng)老，公司還不愿意養(yǎng)會(huì)用sketch的流水線工人。

所以致親愛(ài)的領(lǐng)導(dǎo)們，如果你的百人團(tuán)隊(duì)做出來(lái)的產(chǎn)品，怎么老會(huì)出現(xiàn)類似同是一個(gè)確認(rèn)鍵但是在這和在那總是有點(diǎn)什么不一樣，然后明明人已經(jīng)那么多了還是天天要加班，設(shè)計(jì)師/前端工程師還天天黑眼圈臉?lè)狐S一副欲求不滿的鬼樣，估計(jì)是設(shè)計(jì)系統(tǒng)沒(méi)有做好也沒(méi)有用起來(lái)。

設(shè)計(jì)系統(tǒng)真做起來(lái)了之后怎么辦？多出來(lái)的人力怎么辦，難道裁掉嗎？在這一步之前，還有很多讓員工如沐春風(fēng)朝氣蓬勃并且對(duì)產(chǎn)品有大裨益的事可以做的，例如多出來(lái)的設(shè)計(jì)人力做用戶調(diào)研，前端技術(shù)日新月異隨時(shí)掌握了個(gè)降維打擊的新展現(xiàn)層技術(shù)讓你的產(chǎn)品鶴立雞群也不是沒(méi)可能。

但是設(shè)計(jì)系統(tǒng)不是一個(gè)解決了有和無(wú)就完事兒了的組織層面任務(wù)，如果不因地制宜去做肯定是無(wú)用功。我保證牢騷發(fā)到這一行字為止。

這幾年新的UI設(shè)計(jì)技術(shù)手段，我自己的總結(jié)都是在兩方面發(fā)展與用力：做出比真產(chǎn)品還要真（這是個(gè)笑話，當(dāng)然）的prototype變得越來(lái)越容易；設(shè)計(jì)協(xié)同（設(shè)計(jì)師 與 設(shè)計(jì)師、設(shè)計(jì)師 與 開(kāi)發(fā)工程師）越來(lái)越科學(xué)理性與流程化。而設(shè)計(jì)協(xié)同方面，各大工具作出的一個(gè)個(gè)努力（或者說(shuō)一些讓你覺(jué)得一定要買(mǎi)買(mǎi)買(mǎi)的feature們）最終沉淀下來(lái)都必將指向一套真正有效的design system。不管你是否有意識(shí)而為之。

三、一個(gè)設(shè)計(jì)系統(tǒng)包含了什么

網(wǎng)上找來(lái)的絕世武功的目錄。所謂該有不該有都有了。每一個(gè)具體的話題你都可以無(wú)止境地深挖，而且每一個(gè)類別認(rèn)真做的話都有無(wú)窮盡可以做的事。但是我們實(shí)際要做的結(jié)合自己產(chǎn)品、組織之中的實(shí)際需要，再參考別人的總表去規(guī)劃自己的設(shè)計(jì)系統(tǒng)邊界是什么。

規(guī)劃設(shè)計(jì)系統(tǒng)范圍的重點(diǎn)是：保持關(guān)鍵無(wú)贅肉。我始終認(rèn)為判定一個(gè)設(shè)計(jì)系統(tǒng)成功與否的關(guān)鍵是，它是不是真的最終能夠成為設(shè)計(jì)師、前端的工作工具，是不是真的簡(jiǎn)化了他們的工作流程，他們是不是真的喜歡用這個(gè)工具。

很多時(shí)候出于組織原因要去匯報(bào)，對(duì)標(biāo)行業(yè)標(biāo)桿設(shè)計(jì)系統(tǒng)的完整目錄去依葫蘆畫(huà)瓢無(wú)可厚非。但是除非真的像ant design那樣具有對(duì)外輸出企業(yè)價(jià)值的產(chǎn)品使命的話，真沒(méi)必要。

四、Design System可能牽涉到的工具

那我就獻(xiàn)丑也說(shuō)說(shuō)最近也許和建立設(shè)計(jì)系統(tǒng)有關(guān)的工具的理解。真的很不喜歡提及工具，因?yàn)樘嘣O(shè)計(jì)師都是盲目的工具控了，喜歡不停去“知道”新工具而非真正把工具當(dāng)成成就自己的手段，還會(huì)時(shí)不時(shí)在別人提起xxx新工具的時(shí)候跳出來(lái)說(shuō)那個(gè)yyy也可以云云。

Any way。Abstract，用于管理設(shè)計(jì)文件的版本、并讓設(shè)計(jì)文件上云而馳名，但我最喜歡的還是shared libraries，至少設(shè)計(jì)層面內(nèi)部真正統(tǒng)一了設(shè)計(jì)語(yǔ)言。嗯我知道藍(lán)湖也有這個(gè)功能，當(dāng)時(shí)看到藍(lán)湖發(fā)布此功能也是佩服反應(yīng)之快。如果會(huì)從零開(kāi)始新項(xiàng)目的話我會(huì)嘗試用figma，雖然是browser based但是性能出色，還真正做到了高度協(xié)同（那個(gè)高度是至少十層樓高）而且前端工程師可以無(wú)縫接棒，真正映射了互聯(lián)網(wǎng)公司的設(shè)計(jì)流程而生的設(shè)計(jì)工具（某類）。

當(dāng)然真正有用的設(shè)計(jì)系統(tǒng)還少不了像Stencil這種建立web element控件庫(kù)的工具，才算完整。還有一直關(guān)注謎一樣的終極殺器阿里出品Fusion Design。工具不重要，搞清楚需要什么工具才重要。不知道自己手頭的活兒意義何在就會(huì)落得連工具都可以牽著你鼻子走了。

五、規(guī)劃設(shè)計(jì)系統(tǒng)時(shí)需要考慮哪些點(diǎn)

1. 你的設(shè)計(jì)系統(tǒng)打算支持那些設(shè)計(jì)軟件?

Sketch、Figma、XD，估計(jì)再偏門(mén)一點(diǎn)的就難以在討論范圍內(nèi)了。是的，除了sketch還有人在用別的工具的。理論上團(tuán)隊(duì)已經(jīng)在用的工具有哪幾個(gè)就要做那幾套的控件庫(kù)。但是不得不考慮成本與成效的問(wèn)題，因?yàn)檫@里所說(shuō)的成本并不是一次性成本，設(shè)計(jì)系統(tǒng)是需要維護(hù)的，每一次維護(hù)成本的倍數(shù)都是你今天選擇支持的軟件個(gè)數(shù)。

個(gè)人意見(jiàn)是：其實(shí)三者實(shí)際操作概念大同小異，轉(zhuǎn)換工具對(duì)于設(shè)計(jì)師個(gè)體成本不見(jiàn)得就十分大。而且買(mǎi)軟件公司也是要錢(qián)的啊，為什么不統(tǒng)一就用一個(gè)工具，然后為此而開(kāi)發(fā)組件庫(kù)呢？Figma原生就是一個(gè)比較合適建立設(shè)計(jì)系統(tǒng)、團(tuán)隊(duì)協(xié)同，習(xí)慣了的話基本就是一個(gè)跨團(tuán)隊(duì)型的全流程工具。XD也是很強(qiáng)也許因?yàn)橘F族基因吧，基本上每個(gè)月都有讓人驚喜的更新。Sketch就不用說(shuō)了，但是在2020的今天，不靠插件強(qiáng)大不起來(lái)的它是不是顯得有點(diǎn)落后？

不是。請(qǐng)見(jiàn)what Sketch has planned for 2020。teams功能、字體優(yōu)化、智能layout等等這些（雖然好像在XD早就見(jiàn)過(guò)了）明顯是不耐煩想出王炸了。雖然工具只是工具，但是我始終認(rèn)為對(duì)于一個(gè)團(tuán)隊(duì)甚至企業(yè)而言，工具映射了也引導(dǎo)著團(tuán)隊(duì)工作方式進(jìn)而影響著文化（TMD又出金句了），所以建議好好比較差異，選一個(gè)最合適你團(tuán)隊(duì)的工具。這和統(tǒng)一度量衡是差不多偉大的事兒~

2. 應(yīng)該支持什么代碼技術(shù)？

對(duì)于前端技術(shù)，我連略懂都算不上，不過(guò)這幾年因?yàn)樾枰苿?dòng)事情落地也稍稍有了些認(rèn)知。網(wǎng)頁(yè)端主流框架React、Angular、Vue，移動(dòng)端主流框架Swift、Java和React Native，實(shí)際使用起來(lái)對(duì)于設(shè)計(jì)的妥協(xié)程度要求都差不多。最理想當(dāng)然是建立能夠支持所有框架的控件代碼庫(kù)，但是同樣由于開(kāi)發(fā)成本與持續(xù)維護(hù)成本，明顯這是不實(shí)在的。

最詭異的是在一些大團(tuán)隊(duì)里面，可能前端框架都不只只有一款，導(dǎo)致設(shè)計(jì)系統(tǒng)沒(méi)有辦法統(tǒng)一，或者說(shuō)導(dǎo)致到同時(shí)“存在”了不止一套設(shè)計(jì)系統(tǒng)。據(jù)我了解這其實(shí)也算是不少團(tuán)隊(duì)的情況與歷史原因，即便是不少國(guó)內(nèi)外大廠也是有過(guò)這樣的狀態(tài)，要不就一直這么茍且下去，要么還是咬咬牙同一個(gè)了框架與控件庫(kù)代碼。

由于面對(duì)過(guò)不少這一類的問(wèn)題，之前也花過(guò)些時(shí)間研究過(guò)網(wǎng)頁(yè)端解決方案：運(yùn)用像Stencil這樣的工具就可以建立支持絕大多數(shù)市面上的主流瀏覽器的Web components，兼容不同的現(xiàn)存框架，節(jié)省重復(fù)開(kāi)發(fā)工作。

3. 利用好開(kāi)源資源

從零開(kāi)始建立一切是瑪麗蘇電視劇劇情，尤其是你如果同時(shí)還對(duì)設(shè)計(jì)系統(tǒng)里面每個(gè)元素的可用性有比較高的要求。加上無(wú)論組織大小，公司希望能夠盡快落地產(chǎn)品，團(tuán)隊(duì)、部門(mén)希望在使用了有效資源的前提下盡快作出有效輸出。作為設(shè)計(jì)師的成長(zhǎng)，一般都會(huì)有過(guò)糾結(jié)“我不想抄作業(yè)”的心情。但是理性應(yīng)用現(xiàn)成資源、著力于差異點(diǎn)，平衡成本與產(chǎn)出，這些才是走向?qū)I(yè)的標(biāo)志。

如果你和以前的我一樣對(duì)吃現(xiàn)有點(diǎn)排斥的內(nèi)心戲，我建議好好平常心仔細(xì)學(xué)習(xí)一下吃現(xiàn)者最愛(ài)的Ant Design，尤其在新版（現(xiàn)在是4.x）的補(bǔ)充下很多里面的設(shè)計(jì)思路，雖然滿滿的通用性導(dǎo)向設(shè)計(jì)，但是邏輯、實(shí)施層面的周密與整全，儼然就是企業(yè)系統(tǒng)交互設(shè)計(jì)的教科書(shū)了。

另外同樣具有教育屬性的還有Material Design最近的升級(jí)。嗯嗯嗯我知道這些你知道，但是細(xì)讀過(guò)了嗎？暗暗告訴你，很多面試中的“必答題”，有正確答案的那些，都是就那幾個(gè)題庫(kù)里面來(lái)的。

在建立設(shè)計(jì)系統(tǒng)時(shí)，平衡好吃現(xiàn)的吃相與妥協(xié)的程度，最終保證產(chǎn)出有你的產(chǎn)品特色不是一件容易的事。我建議盡量使用開(kāi)源資源讓你能夠保證帶給公司與團(tuán)隊(duì)的價(jià)值最大化。差異化產(chǎn)品特色，來(lái)自于你通過(guò)調(diào)研與產(chǎn)品規(guī)劃，不是你的設(shè)計(jì)（又有金句了）；可行性落地性？來(lái)自于你和前端工程師的溝通與合作程度。

六、建立好維護(hù)與修改機(jī)制

維護(hù)、修改機(jī)制比起設(shè)計(jì)庫(kù)與代碼庫(kù)本身更加重要，甚至在建立好設(shè)計(jì)系統(tǒng)之后，維護(hù)、擴(kuò)展，讓設(shè)計(jì)系統(tǒng)活起來(lái)應(yīng)該由專門(mén)的人員（設(shè)計(jì)+前端）共同負(fù)責(zé)，作為整個(gè)設(shè)計(jì)團(tuán)隊(duì)的核心工作，保證這套系統(tǒng)在產(chǎn)品開(kāi)發(fā)過(guò)程中順暢的使用而非給產(chǎn)品落地帶來(lái)阻力。

這樣的話就牽涉到這套系統(tǒng)需要有管理機(jī)制與負(fù)責(zé)人（組織）。設(shè)計(jì)系統(tǒng)的維護(hù)說(shuō)來(lái)容易做來(lái)難，參考多少公司希望借鑒阿里巴巴建立強(qiáng)大的中臺(tái)系統(tǒng)最后都落得只有假把式。殊不知阿里的中臺(tái)系統(tǒng)背后是組織的上下變革的結(jié)果，能夠讓設(shè)計(jì)系統(tǒng)活起來(lái)其實(shí)也是要求能夠在系統(tǒng)建立之后，一套落實(shí)到開(kāi)發(fā)管理流程里面去的強(qiáng)管控機(jī)制。在為設(shè)計(jì)系統(tǒng)設(shè)定落地機(jī)制與流程之前，可以從搞清楚以下幾個(gè)問(wèn)題為起點(diǎn)：

1. 這是一套中心化管理的設(shè)計(jì)系統(tǒng)還是分布到各部組獨(dú)自管理比較合適？
2. 里面的設(shè)計(jì)規(guī)范哪些是需要嚴(yán)守的、哪些是有寬容度的？
3. 設(shè)計(jì)系統(tǒng)不同部分的維護(hù)責(zé)任落在誰(shuí)身上？
4. 設(shè)計(jì)師/前端工程師找不到需要的組件時(shí)，是否有快速先解決版本落地的機(jī)制？
5. 當(dāng)需要增加組件甚至修改規(guī)范，審核機(jī)制如何？個(gè)人建議如果希望設(shè)計(jì)系統(tǒng)越有主導(dǎo)權(quán)，修改機(jī)制越應(yīng)該嚴(yán)密。
6. 最后也是最重要，驗(yàn)收機(jī)制是如何落實(shí)的？

和世界上任何系統(tǒng)一樣，實(shí)施機(jī)制比內(nèi)容本身重要得多了。如果管理不恰當(dāng)、同步做得不夠好、統(tǒng)一調(diào)用不嚴(yán)格的話，哪天需要進(jìn)行設(shè)計(jì)改版，那天就是你的設(shè)計(jì)系統(tǒng)的停用紀(jì)念日。

1. 設(shè)計(jì)系統(tǒng)的網(wǎng)站

是拿來(lái)干什么的？把設(shè)計(jì)系統(tǒng)當(dāng)成是一個(gè)產(chǎn)品，那么它的用戶就是設(shè)計(jì)師、前端工程師、系統(tǒng)維護(hù)組、新員工。當(dāng)然如果這個(gè)產(chǎn)品還有更高一層的文化輸出的產(chǎn)品任務(wù)，那這個(gè)討論范圍就更廣了。

仔細(xì)分析這些關(guān)鍵用戶的value proposition，你就發(fā)現(xiàn)其實(shí)這些“用戶”與設(shè)計(jì)系統(tǒng)的interface大多不一定是設(shè)計(jì)系統(tǒng)的網(wǎng)站，設(shè)計(jì)師也許是平臺(tái)上的shared libraries，工程師也許是github倉(cāng)庫(kù)。但是一個(gè)網(wǎng)站對(duì)于設(shè)計(jì)系統(tǒng)依然十分必要，是因?yàn)椋阂?，那些“你懂的”的組織原因；二，任何人尤其是新人來(lái)了之后快速上手的中樞環(huán)節(jié)；三，設(shè)計(jì)系統(tǒng)的路標(biāo)、建設(shè)環(huán)節(jié)的宣布渠道，包含使用說(shuō)明、規(guī)則發(fā)布。

2. 高度自動(dòng)化……目前好像還沒(méi)有辦法

聰明如你，肯定會(huì)發(fā)現(xiàn)，設(shè)計(jì)系統(tǒng)包含了那么多具體設(shè)計(jì)層面、代碼層面的細(xì)節(jié)，而且應(yīng)用角色有那么多，自動(dòng)化與高度同步是很重要的。

坦率講……本人目前沒(méi)有任何明確方向完美解決這一個(gè)問(wèn)題。但是有個(gè)提示是可以密切留意阿里出品的Fusion Design套裝。當(dāng)然，如果你用Figma的話，你會(huì)發(fā)現(xiàn)Figma‘s Embed至少是解決了同步控件至各端包括設(shè)計(jì)系統(tǒng)的宣講網(wǎng)站。所以說(shuō)Figma是為設(shè)計(jì)系統(tǒng)、協(xié)同而生真不是蓋的。

所以……沒(méi)了

本來(lái)想總結(jié)一下這幾年建立或參與設(shè)計(jì)系統(tǒng)的一些些經(jīng)驗(yàn)寫(xiě)這篇文章，寫(xiě)的時(shí)候也有借鑒一些最新的方法與技術(shù)手段，希望如果對(duì)需要接著做這件事的你能夠多多少少起些幫助。

總的來(lái)講，這依然是個(gè)在不停變化的行業(yè)，所以沒(méi)有哪一套方法是能夠算是被固化下來(lái)的：競(jìng)爭(zhēng)環(huán)境的變化導(dǎo)致內(nèi)部需求的變化，做事的方式就會(huì)由規(guī)整變得凌亂起來(lái)，然后時(shí)間又會(huì)慢慢沉淀出新規(guī)律。設(shè)計(jì)也罷設(shè)計(jì)管理也罷，本來(lái)就是需要永遠(yuǎn)解決新問(wèn)題，而且會(huì)一直把認(rèn)為自己已經(jīng)懂了一切的人淘汰掉出圈。

設(shè)計(jì)的outcome也許會(huì)變得越來(lái)越無(wú)趣。但是讓它繼續(xù)有意思的應(yīng)該是需要被解決的問(wèn)題竟然具有越挖越復(fù)雜的被動(dòng)屬性。

作者：HaoH，公眾號(hào)：haohuanggongzhonghao；個(gè)人網(wǎng)站：http://haosgoing.cn/

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

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