編輯導語:一套完整的設計系統最終能夠有效地提高用戶體驗和用戶滿意度,那麼如何構建一套完整的設計系統呢?本文作者為你解答,本文作者詳細地講述了7個設計系統的步驟,一起來學習一下吧。
在提高用戶體驗和用戶滿意度的同時快速、持續地完成項目是許多用戶體驗設計師的北極星,您可以更接近此目标的一種方法是設計和構建一套設計系統。
建立設計系統您将獲得諸多好處:
優秀的設計系統在設計中更具優勢,可以大大提升團隊的效率,那麼如何構建設計系統和利用好呢?讓我帶您了解從頭開始構建設計系統的 7 個步驟。
一、整理已有的設計素材開始的最好的地方之一是評估你已經擁有的東西,了解您已經使用的元素以及您想要更新或替換的元素。
尋找産品和頁面之間的不一緻,目标是創建一個通用資源庫,必須包括構建頁面可能需要的所有内容。比如以下例子:
二、獲得利益相關者的支持
一個人搬不動大山,您将需要周圍人的資源。如果您已完成第一步,現在您可以通過産品中想要解決的 UI 不一緻和/或改進的列表,采用設計組件的邏輯增加您的提案的分量。
無論您發現了 5 個或 500 個錯誤,請确保您将使用設計系統的思維設計方案,它可以幫助您得到協助部門快速認可,以減少前期溝通成本并推動設計系統進入實施。
三、從顔色開始調色闆是開始設計系統的第一步,核心應該是一種主要品牌顔色、一種次要品牌顔色、一種強調色和一系列灰色調。
寫下如何使用每種顔色的指南,以及它們的使用是否有任何限制。
制定默認文本顔色,鍊接、操作按鈕、背景等顔色規範。
采用六字符十六進制标準可直接使用代碼中,确保在設計中使用它們。
四、排版——字體與間距
如果有一個設計風格指南,可以設計中減少大部分決策成本。
如果沒有,是時候發揮設計的創造力了,需要定義标題和正文等字體規範(小、中和大)。
從中等字體開始設計感受重量和線條高度,後期可以擴展以創建超大或超小變體。
規範好字體接下來就是考慮系統的間距設計,在設計系統中未定義的任何内容都将變得模棱兩可,因此請确保不要忽略任何細節。
五、圖形資産
最好的設計系統允許設計人員簡單地将組件拖放到新的原型設計中,這有助于加快項目工作流程。
為了實現這一點,需要構建圖标庫、攝影資源、插圖庫和品牌圖像。
确保公司标志正确可用,并且制定每個變體的标志使用規則。
如果他們希望創建新的圖形資産,請列出供其他設計師需要遵循的設計原則列表,定義大小限制、顔色和首選文件格式等。
資産指南将有助于保持設計系統步入正軌,并為其他人提供可遵循的界限。
六、UI 組件庫最後就是設計系統的核心,創建一個包含所有常見設計元素(包括交互式元素)的模式庫。
在整理中您會發現 UI 組件和圖形資源之間存在一些重疊,但在大多數情況下,UI組件将比靜态視覺效果更高級。
UI組件是用于網站、應用程序或産品界面的設計元素。确保包含開發文檔,這對于開發人員在他們的代碼中重新創建UI組件非常重要,以便在切換過程中零歧義。
UI組件庫組按單個組件進行整理,比如按功能分類,如“導航”,或按類型分類,如“菜單”。
七、上傳和文件
最後,您需要将設計系統存儲在可訪問的位置。可以采用Figma 來設計和存儲 UI 組件,這樣團隊之間可以快速輕松地協作。
Figma 通過提供十六進制值、像素尺寸和 CSS 代碼來協助開發人員進行對話。
設計系統在數字設計領域正蓄勢待發,利用設計系統可以提高我們的輸出速度,并使設計解決方案成為一個有趣且簡化的過程。
我們能夠以很少的成本試驗和嘗試新想法,叠代變得輕而易舉。
八、總結本文由 @唐小白 原創發布于人人都是産品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!