設計系統(tǒng)是現(xiàn)代產品設計的核心，它不僅僅是組件庫的集合，而是一個涵蓋規(guī)則和管理的全面體系。本文將深入探討設計系統(tǒng)的十個關鍵方面，從組件庫到產品化，再到跨部門合作，揭示如何通過設計系統(tǒng)提升品牌一致性和用戶體驗。

我對于設計系統(tǒng)的介紹就像是掉進了一個黑洞

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

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

Article body illustrations by Aura de Papel.

一、設計系統(tǒng)并不僅僅是組件庫。

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

二、產品化你的設計系統(tǒng)，你的用戶會感謝你。

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

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

三、設計和開發(fā)應該是密不可分的

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

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

四、帥氣的命名并不一定有用

當我第一次設計我的設計系統(tǒng)，我對我出眾的色盤設計非常自豪。我設計了帥氣的風格名稱：牛仔, 藍調, 孔雀石和朱砂。我覺得這已經足夠靈活了，但是當我們設計黑夜模式時翻車了。我們所面對的第一個問題是缺少標準來確認在不同的場景下應該使用什么樣的顏色來設計我們的組件。設計師和開發(fā)不知道什么時候應該用什么顏色。有一些框線是灰色的而有另一些是藍色的。同樣的顏色設置在黑夜模式場景下并不適用。

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

五、原子設計幫助你記憶基礎的魔法

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

六、合作可以提升質量以達到商業(yè)目標

一個設計系統(tǒng)團隊不可能獨立于他們的用戶之外。設計系統(tǒng)和產品團隊之間的交互方式并不只有一種。隨著產品的發(fā)展，設計系統(tǒng)不斷成熟。但是如果公司成指數級成長，來自其他不同團隊的需求和報告將不可抵擋地迅速增多。

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

七、一個具有持續(xù)性的設計系統(tǒng)需要產品和開發(fā)保持合作

繼續(xù)上一個話題，大公司把設計系統(tǒng)看作他們的品牌核心以及產品視覺方向。規(guī)則并不僅僅影響軟件產品，還建立了統(tǒng)一的品牌體驗。一個設計系統(tǒng)團隊應該持續(xù)對利益相關者和目標使用者的反饋保持回應。產品，市場，品牌，用戶體驗，管理和設計系統(tǒng)團隊的合作推動著設計系統(tǒng)的變革。除此之外，當你是其中一員或對它很熟悉的時候會比較容易接受一些事情。能夠提供給消費者一致的用戶體驗的最優(yōu)戰(zhàn)略即為列下利益相關者的名字然后明確設計系統(tǒng)將如何幫助他們優(yōu)化工作流程。

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

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

九、可訪問性是非常必須的

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

十、設計系統(tǒng)是無限的

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

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