編輯導語：一套完整的設計系統最終能夠有效地提高用戶體驗和用戶滿意度，那么如何構建一套完整的設計系統呢？本文作者為你解答，本文作者詳細地講述了7個設計系統的步驟，一起來學習一下吧。

在提高用戶體驗和用戶滿意度的同時快速、持續地完成項目是許多用戶體驗設計師的北極星，您可以更接近此目標的一種方法是設計和構建一套設計系統。

建立設計系統您將獲得諸多好處：

• 更快的上線時間——每個項目的規劃、設計、測試和編碼階段變得更加精簡和高效。
• 提高用戶滿意度和用戶體驗——為用戶創建統一且可預測的體驗，將猜測留給新的設計模式，并釋放他們的認知負擔，專注于手頭的任務。
• 減少內部溝通成本——組件、文檔、顏色和動畫的標準化消除了設計中的歧義，讓每個人都懂設計邊界。
• 更少的迭代成本——利用設計組件，并在應用在整個設計中，從而節省多個產品修復相同問題上所花費的時間。

優秀的設計系統在設計中更具優勢，可以大大提升團隊的效率，那么如何構建設計系統和利用好呢？讓我帶您了解從頭開始構建設計系統的 7 個步驟。

一、整理已有的設計素材

開始的最好的地方之一是評估你已經擁有的東西，了解您已經使用的元素以及您想要更新或替換的元素。

尋找產品和頁面之間的不一致，目標是創建一個通用資源庫，必須包括構建頁面可能需要的所有內容。比如以下例子：

• 配色方案：品牌調色板是否已經存在？什么是底色和強調色？它們是否滿足設計要求？你需要創造更多的顏色，還是你有太多？
• 照片庫：庫存攝影和定制攝影應遵循一套規則，以鼓勵一致性并在整個使用過程中傳達您的品牌信息。
• 圖標庫：圖標應該反映公司品牌，并與您所追求的外觀和感覺相結合。
• 圖形元素（包括標志）：確保您的標志具有所有正確的顏色、大小和文件類型變體。
• UI 模式：列出當前存在的所有模式，并確保您知道哪些模式需要更新。
• 頁面模板：確保您有幾個基本的結構布局選項，并且您知道它們如何擴展到更大的屏幕和縮小到更小的屏幕。

二、獲得利益相關者的支持

一個人搬不動大山，您將需要周圍人的資源。如果您已完成第一步，現在您可以通過產品中想要解決的 UI 不一致和/或改進的列表，采用設計組件的邏輯增加您的提案的分量。

無論您發現了 5 個或 500 個錯誤，請確保您將使用設計系統的思維設計方案，它可以幫助您得到協助部門快速認可，以減少前期溝通成本并推動設計系統進入實施。

三、從顏色開始

調色板是開始設計系統的第一步，核心應該是一種主要品牌顏色、一種次要品牌顏色、一種強調色和一系列灰色調。

寫下如何使用每種顏色的指南，以及它們的使用是否有任何限制。

制定默認文本顏色，鏈接、操作按鈕、背景等顏色規范。

采用六字符十六進制標準可直接使用代碼中，確保在設計中使用它們。

四、排版——字體與間距

如果有一個設計風格指南，可以設計中減少大部分決策成本。

如果沒有，是時候發揮設計的創造力了，需要定義標題和正文等字體規范（小、中和大）。

從中等字體開始設計感受重量和線條高度，后期可以擴展以創建超大或超小變體。

規范好字體接下來就是考慮系統的間距設計，在設計系統中未定義的任何內容都將變得模棱兩可，因此請確保不要忽略任何細節。

五、圖形資產

最好的設計系統允許設計人員簡單地將組件拖放到新的原型設計中，這有助于加快項目工作流程。

為了實現這一點，需要構建圖標庫、攝影資源、插圖庫和品牌圖像。

確保公司標志正確可用，并且制定每個變體的標志使用規則。

如果他們希望創建新的圖形資產，請列出供其他設計師需要遵循的設計原則列表，定義大小限制、顏色和首選文件格式等。

資產指南將有助于保持設計系統步入正軌，并為其他人提供可遵循的界限。

六、UI 組件庫

最后就是設計系統的核心，創建一個包含所有常見設計元素（包括交互式元素）的模式庫。

在整理中您會發現 UI 組件和圖形資源之間存在一些重疊，但在大多數情況下，UI組件將比靜態視覺效果更高級。

UI組件是用于網站、應用程序或產品界面的設計元素。確保包含開發文檔，這對于開發人員在他們的代碼中重新創建UI組件非常重要，以便在切換過程中零歧義。

UI組件庫組按單個組件進行整理，比如按功能分類，如“導航”，或按類型分類，如“菜單”。

七、上傳和文件

最后，您需要將設計系統存儲在可訪問的位置?？梢圆捎肍igma 來設計和存儲 UI 組件，這樣團隊之間可以快速輕松地協作。

Figma 通過提供十六進制值、像素尺寸和 CSS 代碼來協助開發人員進行對話。

設計系統在數字設計領域正蓄勢待發，利用設計系統可以提高我們的輸出速度，并使設計解決方案成為一個有趣且簡化的過程。

我們能夠以很少的成本試驗和嘗試新想法，迭代變得輕而易舉。

八、總結

• 整理現有設計資源包括但不限于配色方案、照片庫、圖標庫、圖形元素、UI 組件、頁面模板；
• 協同溝通通過設計系統思維，獲取協同部門的支持；
• 制定系統調色板：主要顏色、次要顏色、強調色和一系列灰色調等；
• 制定系統字體規范，標題和正文字體選擇，設計系統間距，讓系統更統一；
• 構建圖標庫、攝影資源、插圖庫和品牌圖像等，確保它們正確使用；
• 創建UI組件庫包含所有常見設計元素（包括交互式元素）的模式庫；
• 上傳設計系統，建議使用Figma 進行設計系統的協作。

本文由 @唐小白 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議。