8個實用步驟，教你執行與落地一套設計系統

大家好，我是彩云。本篇要跟大家分享大佬總結的8個非常實用的步驟來構建一套設計系統。隨著互聯網行業的發展，產品體驗的一致性和開發的效率越來越被重視，設計系統的出現就是為了解決這樣的問題。

現如今，在國外大廠都已經慢慢建立起來非常完善的設計系統，設計師的價值已經被驗證。但在國內，設計系統這一塊還處于初級階段，設計師在這一塊也有很大的發揮空間。包括大廠里的項目，很多時候一致性也做的不夠好，或者需要花費大量的經歷做一致性調整和走查，所以如果做好了設計系統這塊的工作，是設計師體現自身價值的一個很重要的機會。

今天的這篇文章，作者詳盡的講說了她們公司是如何一步一步的構建設計系統的，非常干貨，一起來學習吧。

△ 圖片來源：Steph Jeong dribbble

設計系統現在是常用的設計手段，你可能經常能看到這個詞。我在之前做的一個web設計項目中，第一次接觸到「設計系統」。在 99.co 項目中我僅與另外一位產品設計師合作，資源實在有限。不過我們認為設計系統非常重要，因為它能消除設計不一致、改善設計師和開發未來的工作流程。為了推動這個項目，我們必須要做更多的努力。

為了更好地理解，我在這里定義一下什么是設計系統——具有清晰的使用規范、可重復使用的組件庫，并在設計師和開發者之間共享。它需要標明組件應何時使用，包括隨時可調用的代碼。

我們的設計系統仍在迭代中，但我仍希望通過這篇文章，能把我們的經驗以及一些有用的技巧和工具分享給你。

步驟1：檢查現有組件

為了全面了解我們要做的事，對產品中現有組件進行檢查非常重要。包括每個頁面上的每個元素。這是至關重要的一步，盡管很繁瑣乏味。為此，我們截了一些圖，并使用 Trello 對其進行整理。

△ Trello面板，每一列都是帶有標簽的卡片

每一列(從上到下) 代表我們網站上的一個頁面，例如主頁。每一列的頁面都被截圖，并組織成卡片。每張卡片都有標簽標記（右側的面板），這些標簽表示頁面中存在的每個組件。不同顏色的標簽代表不同組件。例如復選框、單選按鈕等是數據輸入的形式，它們用綠色標記。

△?通過顏色分類可以過濾出相同類型的組件

通過這種方式進行組織，我們可以輕松地搜索特定頁面，或者使用右側面板按組件進行過濾，并查看所有頁面上當前的用例。它還有助于發現設計不一致之處。

步驟2：學習參考優秀的設計系統

以下是一些標桿級的設計系統，我們將它們作為參考：

• [Atlassian](https://atlassian.design/)
• [Ant Design](https://ant.design/)
• [IBM](https://www.carbondesignsystem.com/)
• [Zendesk](https://garden.zendesk.com/)
• [Workday](https://design.workday.com/)
• [HubSpot](https://canvas.hubspot.co)
• [Salesforce](https://www.lightningdesignsystem.com/)
• [Shopify](https://polaris.shopify.com/)
• [Bootstrap](https://getbootstrap.com/)
• [QuickBooks](https://designsystem.quickbooks.com/)

我們想汲取這些出色的設計系統中的精華，看看它們是如何做的。下面介紹幾個我最喜歡的——Atlassian 和 Ant Design

△ Atlassian 設計系統

Altassian將其設計系統分為「品牌」，「營銷」和「產品」。由于不同方面的設計需要不同的準則，所以要滿足各方面的需求以確保公司的設計語言一致。例如，與「產品」相比，「營銷」在設計漂亮的搭配時需要更多的顏色，而「產品」 我們一般只需要一組固定的顏色來展示不同的組件狀態。Altassian還為每個組件標注了非常清楚的使用指引，包括不同的樣式和變化，還有使用案例。

△?Ant 設計系統

Ant Design 將其組件分為不同的部分，例如數據顯示，數據輸入，導航等等。這確實有助于組織和查找組件。它們在右上角展示這些錨點（譯者注：類似于組件的標簽），這樣用戶無需滾動到底就可以知道每個頁面的組件內容。每個組件的樣式和變化都預先展示，并且每個組件都是可交互的。代碼的提供也使開發人員可以快速獲得代碼，這是非常棒的用戶體驗！

步驟3：列出組件表

在學習了其他的設計系統后，我根據我們在Trello上的研究和篩選標簽，圈出了需要的模式和組件。這樣一來，我們就可以對需要走查的內容有一個大致了解，以便我們能夠時刻跟進并安排時間。

△?Google Docs上的跟進概述

我根據功能將組件分為以下幾個部分：按鈕、數據輸入、數據顯示、反饋和導航。我們會不斷修訂這個表，討論完一個就勾掉一個。

步驟4：安排時間

接下來，我們根據每個人的任務分工制定了每周時間表。這有助于使參與設計系統的每個人都了解最新的進度，并有助于資源分配。我們從Trello用例中最常用的組件開始。版式，顏色和布局是首要的，因為它們為后面要做的事奠定了基礎。

△?Google Sheet 上的時間表

日常工作之外的時間有限，我們爭取每周有兩到三次對設計系統的討論，每次大約兩小時。當然這是理想的情況。很多時候，產品設計師都被工作淹沒了，無法抽出時間。在少數情況下，我們能夠投入更多的時間來討論，并盡量彌補失去的時間。

除了每周討論之外，我們還在sketch上把組件作成控件，制作了設計系統的頁面，并讓前端人員來構建這些頁面。我們將根據我們的進展每周不斷更新時間表。

步驟5：完善組件

研究和討論的最終目的是完善組件，設計它們的屬性和狀態，并建立準則。每個組件我們都在Trello上回顧了它的使用案例，并研究最佳用法。

起初，我們在開會時研究組件。但是后來我們意識到研究并不需要兩個設計師都在場。事先各自用自己的時間研究，保證開會時的討論時間，這樣會更好。

△?Google Drive 里關于討論的文件

我們用Google Docs做了會議記錄，以便跟進決策，也能回顧我們是如何做出這些決策的。有了這些筆記，我們就會想起過去的思考過程和決策，以便更好地進行后續的決策。

步驟6：創建控件

隨著討論的深入，我們開始構建樣式規范。我創建了文本和圖層樣式庫，并在滿足其狀態和變化時對Sketch上的每個組件進行控件化。

△?Sketch上的文本和圖層樣式庫

△?Sketch上的組件庫

我們再一次梳理了內容，并參考其他的UI Kits，以比較命名方式。我意識到，實際上不存在完美的命名方式，我們應當找到適合我們的。隨著工具的不斷更新，我們還可能要相應地調整工作流程。

舉個例子，最近的sketch60更新，更新了組件面板和彈窗。我們之前的樣式庫命名方式是根據大小、字重、顏色、對齊方式和線條高度劃分多個層。在新版本的彈窗中，我們必須點擊很多次才能找到特定的樣式。

△?更新過的命名方式

為了適應這次更新，我拉平了命名結構，現在可以通過[size] [weight] 來搜索那些帶有或不帶默認行高的字體顏色，或通過[colour]來查看按大小和字重排序的此顏色的字體。我們的中性色色板的命名也從[Dark], [Mid] 和 [Light] 縮短為 [D]，[M]和 [L]，因為彈出框的空間有限。在未來，我預計將會有更多的變化，但總體來說，這些更新肯定會提高我們的效率。

下面是一些有用的插件：

步驟7：「設計」設計系統

如上所述，我們希望將其他設計系統的精華納入我們的設計系統。在每個頁面的組件控件化之后，我為每個頁面設計了模型，然后給前端人員來實現這些頁面。

△ Sketch上的設計系統模型

我們很快就發現這并不理想。我們花了大力氣去做這些頁面，但資源實在有限。因此得有個工具來減少我們的工作量。以便可以將資源更好地分配給必要的事——那就是制作組件并在產品中實現它們。

找到一個可以集成到現有工作流程中的工具至關重要，版本控制、品牌定制等功能也很好。我們在 uxtools.co 看到了設計工具功能比較的表格。經過考量，我們決定使用Zeroheight.

△ Zeroheight設計系統

我在每個頁面中為不同的組件和其變化都設立了使用指南，并且通過插件將sketch控件直接導入zeroheight。可以使用交互式HTML代碼段和storybook組件向觀看者顯示實時組件示例，開發人員還能調用API輕松與設計保持同步。

步驟8：設計系統落地

與工程師、產品經理和其他利益相關者的溝通在整個流程中都非常重要，尤其是設計的執行。為了實現設計系統，我們構建新的組件，將他們鏈到zeroheight，并替換現有的舊組件。

△?Google Sheets上的計劃表

我向數據分析師核對了最常訪問頁面的情況。由于這些頁面的流量最高，因此我們決定在不同階段更新這些頁面的組件。最初的計劃是每兩周進行一次更新。

然而作為一個初創公司，必須優先考慮做功能上的工作，我們無法按計劃堅持下去，而是做了妥協。我們正在做哪個頁面，就將新的組件替換到這個頁面上。

△?Zeplin上的整體風格指南

△?Zeplin上的連接組件

我們用于提高設計師和開發人員之間協作的另一個工具是Zeplin，它有整體風格指南和連接組件 。正如上圖所示 ，我們將所有新的組件直接上傳到風格指南中，開發人員就能夠將他們的代碼庫和文檔來源（storybook或 github）鏈接到這些組件。這么做后，每當開發人員在Zeplin上檢查設計時，他們都可以查看這些組件的概述，并可以重復使用它們。

以上就是我們從0開始設計系統的方式。我們仍有許多工作要做，但是進展緩慢總比沒有要好。這是一個持續的挑戰，我們將不斷總結，以更好地完成需求的需求。萬事開頭難，一步一步來！

歡迎關注譯者的微信公眾號：「彩云譯設計」