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

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

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

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

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

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

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

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

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

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

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

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

制定默認文本顔色，鍊接、操作按鈕、背景等顔色規範。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後，您需要将設計系統存儲在可訪問的位置。可以采用Figma 來設計和存儲 UI 組件，這樣團隊之間可以快速輕松地協作。

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

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

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

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

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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!