想創(chuàng)建產(chǎn)品設(shè)計(jì)體系？來(lái)文中看看Atlassian設(shè)計(jì)體系元老的6點(diǎn)經(jīng)驗(yàn)分享。

The key lessons I learned creating a popular Design System

2012年，我啟動(dòng)了一個(gè)副項(xiàng)目：對(duì) Atlassian 當(dāng)時(shí)12款軟件產(chǎn)品的設(shè)計(jì)模式進(jìn)行標(biāo)準(zhǔn)化定義工作。在那之后的三年里，這個(gè)副項(xiàng)目逐漸成長(zhǎng)壯大，并成為了我的全職工作；經(jīng)過(guò)一系列的版本迭代，這個(gè)項(xiàng)目最終成為了大家所熟知的 Atlassian Design System。

期間，我還成立了設(shè)計(jì)平臺(tái)團(tuán)隊(duì)（Design Platform Team），專(zhuān)門(mén)負(fù)責(zé)對(duì)設(shè)計(jì)體系進(jìn)行管理維護(hù)，并將其運(yùn)用于 Atlassian 產(chǎn)品套件的設(shè)計(jì)工作當(dāng)中。

近些年來(lái)，行業(yè)里出現(xiàn)了越來(lái)越多關(guān)于設(shè)計(jì)體系的討論，我也時(shí)常被問(wèn)及相關(guān)的經(jīng)驗(yàn)與洞見(jiàn)（注）。無(wú)論你在考慮為自己的產(chǎn)品創(chuàng)建設(shè)計(jì)體系，還是正在進(jìn)行當(dāng)中，或是曾經(jīng)嘗試但以失敗告終，我都希望這些經(jīng)驗(yàn)可以幫助到你。

譯者注：包括接受《設(shè)計(jì)體系》一書(shū)作者的訪談，相關(guān)內(nèi)容也體現(xiàn)在書(shū)中。

如今在 Asana，我又開(kāi)始了新的設(shè)計(jì)體系構(gòu)建之旅；回顧過(guò)往的經(jīng)驗(yàn)，我發(fā)現(xiàn)它們同樣有助于我們將團(tuán)隊(duì)與公司推向成功，從而體現(xiàn)出設(shè)計(jì)體系真正的價(jià)值所在。

1、以小為始

第一個(gè)版本的 Atlassian 設(shè)計(jì)體系只包含20個(gè)靜態(tài) HTML 文件，由我桌下的那臺(tái) Mac Pro 充當(dāng)服務(wù)器。沒(méi)有模板，沒(méi)有版本控制，我親自動(dòng)手為每一個(gè)組件編寫(xiě) HTML，并將線上產(chǎn)品的 CSS 直接導(dǎo)入過(guò)來(lái)作為樣式表。

雖然這一版本更新起來(lái)非常困難，而且不具備擴(kuò)展性，但它也足夠向當(dāng)時(shí)的團(tuán)隊(duì)展示設(shè)計(jì)體系的基本價(jià)值了；我因而得到支持，并得以將更多時(shí)間與精力投入其中，逐漸摸索到了正確的道路。

反之，如果從一開(kāi)始就考慮到各種擴(kuò)展性問(wèn)題，那么我們很可能需要花費(fèi)數(shù)倍的時(shí)間來(lái)完成起步階段的跨越。如果你剛剛開(kāi)始構(gòu)建設(shè)計(jì)體系，建議你不要沉迷于無(wú)縫、完美的流程和機(jī)制，取而代之的是簡(jiǎn)單快速地起步，驗(yàn)證價(jià)值與方法，并保持迭代。

2、重在質(zhì)效提升，而非控制設(shè)計(jì)

如果你認(rèn)為構(gòu)建設(shè)計(jì)體系的目的在于防止其他人“犯錯(cuò)”，防止他們破壞掉只有你“有權(quán)”定義的規(guī)則，那么你們的體系構(gòu)建工作很可能是在不正確的觀念之下進(jìn)行的。

設(shè)計(jì)體系的目標(biāo)是提升團(tuán)隊(duì)的設(shè)計(jì)質(zhì)效，幫助每一名設(shè)計(jì)師更加合理地進(jìn)行設(shè)計(jì)決策。

你的工作并非將規(guī)則強(qiáng)加給他人并監(jiān)督他們執(zhí)行。反之，要將設(shè)計(jì)體系視為在公司內(nèi)部實(shí)現(xiàn)“設(shè)計(jì)民主化”的工具。只有這樣，人們才會(huì)有意愿參與其中并進(jìn)行貢獻(xiàn)。

務(wù)必記得，設(shè)計(jì)體系是一種強(qiáng)化工具，而非用于控制設(shè)計(jì)的監(jiān)管手段。

3、避免同步進(jìn)行重設(shè)計(jì)工作

不要將設(shè)計(jì)體系的構(gòu)建工作看作是產(chǎn)品重設(shè)計(jì)的契機(jī)。一邊進(jìn)行著體系化定義，一邊對(duì)產(chǎn)品進(jìn)行重設(shè)計(jì)，這會(huì)極大地拖慢工作進(jìn)度。更合理的做法，是首先對(duì)產(chǎn)品當(dāng)前的狀況進(jìn)行記錄與清查，包括合理與不合理的模式在內(nèi)；完成標(biāo)準(zhǔn)化定義之后，再回過(guò)頭來(lái)進(jìn)行優(yōu)化工作。

在 Atlassian，我們?cè)?jīng)多次試圖在設(shè)計(jì)模式文檔的基礎(chǔ)工作完成之前對(duì)產(chǎn)品進(jìn)行重設(shè)計(jì)。誠(chéng)然，設(shè)計(jì)模式的定義與文檔化工作需要花費(fèi)大量的時(shí)間，但以此為基礎(chǔ)進(jìn)行新一輪的設(shè)計(jì)迭代，整體進(jìn)程會(huì)更加輕松和高效。

4、跨職能尋求支持

設(shè)計(jì)體系的創(chuàng)建工作并非學(xué)校里的課業(yè)練習(xí)，如果最終無(wú)人使用，或是無(wú)法有效提升設(shè)計(jì)質(zhì)效，那么我們的工作就是浪費(fèi)時(shí)間。

只有讓其他人了解你的工作并參與貢獻(xiàn)，你才能得到越來(lái)越多的認(rèn)同與支持。這一點(diǎn)對(duì)于設(shè)計(jì)體系工作非常重要。

2013年時(shí)，我們團(tuán)隊(duì)當(dāng)中的設(shè)計(jì)師與工程師占比大約在1:15到1:20之間。直至如今，回想起這個(gè)數(shù)字，我仍然會(huì)感到驚悚。不過(guò)當(dāng)時(shí)，我確實(shí)有試過(guò)將這種失衡的局面轉(zhuǎn)化為工作中的優(yōu)勢(shì)，使工程師們更加認(rèn)同設(shè)計(jì)體系相關(guān)工作。

我會(huì)在新人入職當(dāng)周做一些宣講，每周有15人左右的樣子；為了讓他們從第一天起就能對(duì)設(shè)計(jì)體系的目標(biāo)與價(jià)值有所了解，我會(huì)給他們講一些往事，譬如：我們的產(chǎn)品當(dāng)中曾一度存在著44種下拉菜單，而如今已經(jīng)標(biāo)準(zhǔn)化為一種，它的具體使用方式應(yīng)該如何如何。

經(jīng)過(guò)那一年的宣講，加上 Atlassian 的規(guī)模幾乎每年都會(huì)翻番，我總共幫助了將近500名新人了解了設(shè)計(jì)體系的重要性及使用方式。同時(shí)，這項(xiàng)工作還在潛移默化當(dāng)中擴(kuò)大了設(shè)計(jì)職能在整個(gè)企業(yè)文化當(dāng)中的影響力。

5、超越“設(shè)計(jì)規(guī)范”

設(shè)計(jì)體系不同于設(shè)計(jì)規(guī)范，創(chuàng)建一份包含了所有組件的 Sketch 文件或許相對(duì)容易一些，譬如：所有的主操作按鈕都有著相同的配色，或是統(tǒng)一使用8像素柵格等等。但應(yīng)該在何時(shí)使用主操作按鈕而非次級(jí)按鈕？按鈕中的文本應(yīng)該采用哪種類(lèi)型？主、次按鈕同時(shí)出現(xiàn)時(shí)應(yīng)該怎樣布局？

設(shè)計(jì)體系必須針對(duì)這類(lèi)規(guī)則性的問(wèn)題提供解決方案，而不僅是記錄規(guī)格規(guī)范。很多團(tuán)隊(duì)都忽視了這一點(diǎn)，致使設(shè)計(jì)體系的價(jià)值有所缺失。

正如前面提到過(guò)的，在2013年初，Atlassian 設(shè)計(jì)團(tuán)隊(duì)的規(guī)模（約13人）相比于開(kāi)發(fā)團(tuán)隊(duì)（約300人）來(lái)說(shuō)還相對(duì)較小。明確提供設(shè)計(jì)模式使用規(guī)范的好處在于，工程師可以在設(shè)計(jì)師人力不足時(shí)獨(dú)立完成大量的頁(yè)面構(gòu)建工作。

這意味著在很多時(shí)候，設(shè)計(jì)師無(wú)需打開(kāi) Sketch 制作高保真設(shè)計(jì)方案，大家可以通過(guò)白板和腦暴直接確定功能流程，或是將更多時(shí)間用于上游高層面問(wèn)題的處理。

6、少數(shù)人負(fù)責(zé)管理，多數(shù)人參與貢獻(xiàn)

我們?cè)?Atlassian 采用了集中式的設(shè)計(jì)體系管理機(jī)制，一方面允許每一名設(shè)計(jì)師參與貢獻(xiàn)，一方面通過(guò)每三個(gè)月的輪崗制度從不同的產(chǎn)品團(tuán)隊(duì)當(dāng)中抽調(diào)設(shè)計(jì)師與工程師加入我們的平臺(tái)設(shè)計(jì)團(tuán)隊(duì)。

在三個(gè)月的時(shí)間里，他們會(huì)對(duì)設(shè)計(jì)體系的維護(hù)工作進(jìn)行大量的貢獻(xiàn)。三個(gè)月后，他們回到各自的團(tuán)隊(duì)當(dāng)中，成為設(shè)計(jì)體系的簇?fù)碚吲c布道者。

有專(zhuān)人負(fù)責(zé)設(shè)計(jì)體系相關(guān)工作是非常重要的。這個(gè)人（通常指我）更像是設(shè)計(jì)師當(dāng)中的產(chǎn)品經(jīng)理，他需要維護(hù)整套體系，同時(shí)又要避免營(yíng)造出讓人抵觸的工作氛圍。始終不要忘記，我們的目標(biāo)是提升設(shè)計(jì)質(zhì)效，讓每個(gè)人都成為更出色的設(shè)計(jì)師，并最終實(shí)現(xiàn)團(tuán)隊(duì)效能與產(chǎn)品質(zhì)量的提升。

原文作者：Matt Bond

原文鏈接：https://medium.com/asana-design/the-key-lessons-i-learned-creating-a-popular-design-system-d078c817b4dd?ref=webdesignernews.com%3Fref%3Duxdesignweekly

譯者：C7210，公眾號(hào)：Beforweb（ID：beforweb）

來(lái)源：公眾號(hào)：Beforweb（ID：beforweb）

本文由 @Beforweb 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖作者提供