三分社×TCC翻譯情報(bào)局

這個(gè)交互設(shè)計(jì)師選擇了一條困難的道路，但你并不需要如此

譯者推薦：設(shè)計(jì)系統(tǒng)是一個(gè)成熟產(chǎn)品或品牌必須擁有的視覺(jué)及體驗(yàn)指導(dǎo)。通過(guò)設(shè)計(jì)系統(tǒng)，品牌調(diào)性和商業(yè)目的將被有機(jī)整合并以一個(gè)一致的，有辨識(shí)度的，有流暢用戶體驗(yàn)的方式傳達(dá)給目標(biāo)用戶。同時(shí)在公司內(nèi)部，設(shè)計(jì)系統(tǒng)也能夠很好的幫助不同部門進(jìn)行合作，降本增效。但這并不是一件容易的事情，它是一件不斷迭代不斷發(fā)展，需要設(shè)計(jì)師與開(kāi)發(fā)，運(yùn)營(yíng)，市場(chǎng)，品牌等等部門通力合作，不停地吸收反饋，修正道路的事情。

我對(duì)于設(shè)計(jì)系統(tǒng)的介紹就像是掉進(jìn)了一個(gè)黑洞

這發(fā)生在我在一個(gè)交易軟件公司做產(chǎn)品設(shè)計(jì)期間。我們呈指數(shù)級(jí)的擴(kuò)張，所以我們的 UI 組件庫(kù)需要升級(jí)以滿足商業(yè)需求。當(dāng)我進(jìn)行了一次產(chǎn)品審查來(lái)確認(rèn)優(yōu)化點(diǎn)，我知道了 Figma 上線了一個(gè)自動(dòng)排版功能。我將這個(gè)新功能應(yīng)用到我們的組件庫(kù)里，但是事情變得更復(fù)雜了。我并不止于做了審查，我最后設(shè)計(jì)了整套設(shè)計(jì)系統(tǒng)。在這個(gè)項(xiàng)目里，我一人承擔(dān)了多種職責(zé)：創(chuàng)造內(nèi)容，調(diào)研，編寫(xiě)文檔，訓(xùn)練我的設(shè)計(jì)伙伴如何使用并更新設(shè)計(jì)系統(tǒng)。

我做的第一套設(shè)計(jì)系統(tǒng)只是為了解決開(kāi)發(fā)的頁(yè)面還原度問(wèn)題。在深度沉浸于設(shè)計(jì)系統(tǒng)的世界后，也經(jīng)歷了在其他公司的設(shè)計(jì)經(jīng)驗(yàn)后，我學(xué)到了一些我希望在一開(kāi)始就有人告訴我的事情。

Article body illustrations by Aura de Papel.

1.設(shè)計(jì)系統(tǒng)并不僅僅是組件庫(kù)。

當(dāng) Figma 上線了自動(dòng)排版功能，它改變了設(shè)計(jì)師建造模塊的方式。我試著確認(rèn)哪些元素能用這個(gè)新功能重建。我發(fā)現(xiàn)線上產(chǎn)品和設(shè)計(jì)之間有很大數(shù)量的組成差異。開(kāi)發(fā)和設(shè)計(jì)都能接觸到這些組件，但是他們沒(méi)有一個(gè)任何標(biāo)準(zhǔn)來(lái)規(guī)范自己使用組件的方式。我不認(rèn)為我能一次性完成一個(gè)通過(guò)更新一些組件來(lái)驅(qū)動(dòng)整個(gè)產(chǎn)品的項(xiàng)目，但實(shí)際上我做到了。我不僅僅賦予了一些組件自動(dòng)布局的能力，同時(shí)我編寫(xiě)了文件夾來(lái)保持產(chǎn)品的一致性。由此，UI 組件庫(kù)成為了一個(gè)設(shè)計(jì)系統(tǒng)。通過(guò)這個(gè)，我學(xué)習(xí)到，UI 組件庫(kù)是組件和風(fēng)格的集合體，而設(shè)計(jì)系統(tǒng)則是通過(guò)規(guī)則管理他們的存在。

2.產(chǎn)品化你的設(shè)計(jì)系統(tǒng)，你的用戶會(huì)感謝你。

一個(gè)解決用戶的問(wèn)題并滿足特定商業(yè)需求的軟件產(chǎn)品。熟悉目標(biāo)用戶的特征，工作流程以及痛點(diǎn)是創(chuàng)造一個(gè)有影響力的產(chǎn)品的第一步。對(duì)于你的設(shè)計(jì)系統(tǒng)而言，這也是一樣的。

設(shè)計(jì)系統(tǒng)是為了兩方人而存在的。首先，它面向最終在你的公司產(chǎn)品上產(chǎn)生購(gòu)買行為的用戶。但是，它也為依賴自己而工作并創(chuàng)造有影響力的產(chǎn)品的設(shè)計(jì)師們服務(wù)。當(dāng)你將設(shè)計(jì)系統(tǒng)看作一個(gè)產(chǎn)品，它的優(yōu)點(diǎn)是會(huì)節(jié)省設(shè)計(jì)師花費(fèi)的一些重復(fù)勞動(dòng)并使得設(shè)計(jì)師將更多的精力花費(fèi)在如何設(shè)計(jì)流暢的交互體驗(yàn)上。開(kāi)發(fā)可以簡(jiǎn)單的抓取已經(jīng)寫(xiě)好代碼的組件并使用它們。設(shè)計(jì)系統(tǒng)的主要目標(biāo)是降本增效。設(shè)計(jì)系統(tǒng)是設(shè)計(jì)產(chǎn)品所需的必要產(chǎn)品。

3.設(shè)計(jì)和開(kāi)發(fā)應(yīng)該是密不可分的

和設(shè)計(jì)師相似的是，開(kāi)發(fā)可以通過(guò)設(shè)計(jì)系統(tǒng)抓取已經(jīng)準(zhǔn)備好的組件來(lái)提升它們的工作效率。真正的挑戰(zhàn)是如何保持這兩方對(duì)設(shè)計(jì)系統(tǒng)定義及使用規(guī)則的一致性的認(rèn)知。

終端用戶并不是和設(shè)計(jì)工具（例如 figma，zeplin，invision 或 sketch）做交互，但是她們的確會(huì)接觸到設(shè)計(jì)系統(tǒng)的益處。他們可以分辨什么頁(yè)面看上去和這個(gè)產(chǎn)品不符，尤其是有了設(shè)計(jì)系統(tǒng)之后。功能一致性同樣是有所關(guān)聯(lián)的。終端用戶想要預(yù)測(cè)組件是怎么工作的。如果組件不以他們的預(yù)測(cè)鎖行動(dòng)，用戶會(huì)感到沮喪或者喪失對(duì)此產(chǎn)品的信心。開(kāi)發(fā)和設(shè)計(jì)需要在所有階段都一起工作來(lái)保證產(chǎn)品的一致性，合作是成功完成設(shè)計(jì)系統(tǒng)的唯一秘訣。

4.帥氣的命名并不一定有用

當(dāng)我第一次設(shè)計(jì)我的設(shè)計(jì)系統(tǒng)，我對(duì)我出眾的色盤(pán)設(shè)計(jì)非常自豪。我設(shè)計(jì)了帥氣的風(fēng)格名稱：牛仔, 藍(lán)調(diào), 孔雀石和朱砂。我覺(jué)得這已經(jīng)足夠靈活了，但是當(dāng)我們?cè)O(shè)計(jì)黑夜模式時(shí)翻車了。我們所面對(duì)的第一個(gè)問(wèn)題是缺少標(biāo)準(zhǔn)來(lái)確認(rèn)在不同的場(chǎng)景下應(yīng)該使用什么樣的顏色來(lái)設(shè)計(jì)我們的組件。設(shè)計(jì)師和開(kāi)發(fā)不知道什么時(shí)候應(yīng)該用什么顏色。有一些框線是灰色的而有另一些是藍(lán)色的。同樣的顏色設(shè)置在黑夜模式場(chǎng)景下并不適用。

我們通過(guò)與上下內(nèi)容沒(méi)有什么關(guān)聯(lián)性的方式，命名 color token （顏色密鑰），從而解決這個(gè)問(wèn)題，簡(jiǎn)化了主題融入 design system （設(shè)計(jì)系統(tǒng)）的過(guò)程。目前，標(biāo)記色值的方式有很多種。每個(gè)公司其實(shí)都有屬于自己的命名結(jié)構(gòu)。比如：Assna 使用【sentiment-sage-prominence-interaction】；Material Design 建議使用【design-system-type-purpose】。而我個(gè)人認(rèn)為，隨著業(yè)務(wù)場(chǎng)景不同，我們需要深入研究并應(yīng)用最為合適的語(yǔ)義或全局命名，從而滿足當(dāng)前和未來(lái)設(shè)計(jì)系統(tǒng)的需求。

5.原子設(shè)計(jì)幫助你記憶基礎(chǔ)的魔法

在我開(kāi)始設(shè)計(jì)我的第一版設(shè)計(jì)系統(tǒng)前，我調(diào)查了一些業(yè)界優(yōu)品來(lái)幫助我打基礎(chǔ)。我找到了一個(gè)叫做由 Brad Frost 提出的“原子設(shè)計(jì)”的方法幫我來(lái)劃分系統(tǒng)結(jié)構(gòu)。它的重點(diǎn)是組件如何被拆分成更小的可以替換，優(yōu)化，交換的顆粒，而不會(huì)破壞整體結(jié)構(gòu)。遵循這種方法，我們可以更快地組裝設(shè)計(jì)，并自動(dòng)更新多個(gè)設(shè)計(jì)中的組件。這改變了游戲規(guī)則！我建議將此應(yīng)用于任何設(shè)計(jì)系統(tǒng)。

6.合作可以提升質(zhì)量以達(dá)到商業(yè)目標(biāo)

一個(gè)設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)不可能獨(dú)立于他們的用戶之外。設(shè)計(jì)系統(tǒng)和產(chǎn)品團(tuán)隊(duì)之間的交互方式并不只有一種。隨著產(chǎn)品的發(fā)展，設(shè)計(jì)系統(tǒng)不斷成熟。但是如果公司成指數(shù)級(jí)成長(zhǎng)，來(lái)自其他不同團(tuán)隊(duì)的需求和報(bào)告將不可抵擋地迅速增多。

向跨部門貢獻(xiàn)者展開(kāi)設(shè)計(jì)系統(tǒng)并幫助他們自己使用系統(tǒng)滿足自身的需求是一種始終與商業(yè)需求共前進(jìn)的好戰(zhàn)略。其中一個(gè)主要的擔(dān)憂可能是擔(dān)心有突破性的改變出現(xiàn)。可以創(chuàng)造一個(gè)工作流程來(lái)保證一致性。為貢獻(xiàn)者提供明確流程和材料可以使得他們對(duì)流程更有把握。跨部門合作者提供新的思路來(lái)幫助設(shè)計(jì)系統(tǒng)成長(zhǎng)并推動(dòng)商業(yè)目的的達(dá)成。

7.一個(gè)具有持續(xù)性的設(shè)計(jì)系統(tǒng)需要產(chǎn)品和開(kāi)發(fā)保持合作

繼續(xù)上一個(gè)話題，大公司把設(shè)計(jì)系統(tǒng)看作他們的品牌核心以及產(chǎn)品視覺(jué)方向。規(guī)則并不僅僅影響軟件產(chǎn)品，還建立了統(tǒng)一的品牌體驗(yàn)。一個(gè)設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)?wèi)?yīng)該持續(xù)對(duì)利益相關(guān)者和目標(biāo)使用者的反饋保持回應(yīng)。產(chǎn)品，市場(chǎng)，品牌，用戶體驗(yàn)，管理和設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)的合作推動(dòng)著設(shè)計(jì)系統(tǒng)的變革。除此之外，當(dāng)你是其中一員或?qū)λ苁煜さ臅r(shí)候會(huì)比較容易接受一些事情。能夠提供給消費(fèi)者一致的用戶體驗(yàn)的最優(yōu)戰(zhàn)略即為列下利益相關(guān)者的名字然后明確設(shè)計(jì)系統(tǒng)將如何幫助他們優(yōu)化工作流程。

8.最有挑戰(zhàn)性的部分就是采用環(huán)節(jié)

在是否采用時(shí)通常會(huì)產(chǎn)生各種擔(dān)憂。找到一個(gè)找到堅(jiān)實(shí)的基礎(chǔ)，為相關(guān)團(tuán)隊(duì)創(chuàng)建培訓(xùn)材料是一個(gè)很好的策略?？梢允且曨l，玩樂(lè)學(xué)習(xí)，研討會(huì)或課程，或者是任何你們可以想到的方式。培訓(xùn)的方式取決于公司和它的能力。最終目標(biāo)是讓人們意識(shí)到采用設(shè)計(jì)系統(tǒng)的好處。如果你的利益相關(guān)者不能理解如何將設(shè)計(jì)系統(tǒng)應(yīng)用于他們的工作流程，他們是不會(huì)使用的，這就會(huì)導(dǎo)致消費(fèi)者的不一致體驗(yàn)。如果你的利益相關(guān)者接受了設(shè)計(jì)系統(tǒng)但是不懂得怎么樣持續(xù)保持更新，他們會(huì)自己找到一套方法使得設(shè)計(jì)系統(tǒng)可以為他們工作，即使這意味著他們會(huì)脫離規(guī)則獨(dú)立使用設(shè)計(jì)系統(tǒng)里的內(nèi)容。

9.可訪問(wèn)性是非常必須的

交流技術(shù)和平等的機(jī)會(huì)是人類的權(quán)利，設(shè)計(jì)系統(tǒng)的可訪問(wèn)性是每一個(gè)團(tuán)隊(duì)都需要的基礎(chǔ)功能。這為流程增加了更多步驟，但提高了產(chǎn)品的商業(yè)價(jià)值，滿足了更多客戶的需求。在指南中，公司改進(jìn)了所有用戶的可訪問(wèn)性，提高了一致性，并優(yōu)化了用戶體驗(yàn)。我發(fā)現(xiàn)你不需要成為這個(gè)領(lǐng)域的專家，但包容心會(huì)讓你成為一個(gè)更有職業(yè)道德且更有同情心的人。

10.設(shè)計(jì)系統(tǒng)是無(wú)限的

就像是其他一些產(chǎn)品，一個(gè)設(shè)計(jì)系統(tǒng)在它上線之后會(huì)經(jīng)歷一個(gè)高強(qiáng)度迭代的過(guò)程。產(chǎn)品設(shè)計(jì)師會(huì)發(fā)現(xiàn) bug 和新需求并需要設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)持續(xù)的支持。隨著公司的發(fā)展，產(chǎn)品團(tuán)隊(duì)的優(yōu)先事項(xiàng)也會(huì)隨之改變，因此他們將依靠設(shè)計(jì)系統(tǒng)及時(shí)滿足新的需求。在準(zhǔn)備培訓(xùn)材料的同時(shí)，跟蹤工作和改進(jìn)，以便您可以跟蹤誰(shuí)做了什么以及何時(shí)做了什么。為了避免風(fēng)險(xiǎn)，我建議獨(dú)立發(fā)布修復(fù) bug 并增加新的功能來(lái)保證設(shè)計(jì)系統(tǒng)主體擁有回歸可能。別忘了，賦能于你們的同事是保持設(shè)計(jì)系統(tǒng)持續(xù)發(fā)展的關(guān)鍵。

在我創(chuàng)建設(shè)計(jì)系統(tǒng)的經(jīng)驗(yàn)中，有很多內(nèi)容不停的推翻并重復(fù)。為了避免浪費(fèi)時(shí)間，在開(kāi)始之前思考如何創(chuàng)建模版，衡量體系和靈活的方案來(lái)促進(jìn)未來(lái)的發(fā)展。設(shè)計(jì)系統(tǒng)可能聽(tīng)上去像是一套你可以直接跟隨的過(guò)程，但是實(shí)際上，它是一個(gè)不停輪轉(zhuǎn)的包括無(wú)限迭代的，周期性維持的，并且跨功能的項(xiàng)目。