編輯導(dǎo)語(yǔ)：一套完整的設(shè)計(jì)系統(tǒng)最終能夠有效地提高用戶體驗(yàn)和用戶滿意度，那么如何構(gòu)建一套完整的設(shè)計(jì)系統(tǒng)呢？本文作者為你解答，本文作者詳細(xì)地講述了7個(gè)設(shè)計(jì)系統(tǒng)的步驟，一起來學(xué)習(xí)一下吧。

在提高用戶體驗(yàn)和用戶滿意度的同時(shí)快速、持續(xù)地完成項(xiàng)目是許多用戶體驗(yàn)設(shè)計(jì)師的北極星，您可以更接近此目標(biāo)的一種方法是設(shè)計(jì)和構(gòu)建一套設(shè)計(jì)系統(tǒng)。

建立設(shè)計(jì)系統(tǒng)您將獲得諸多好處：

• 更快的上線時(shí)間——每個(gè)項(xiàng)目的規(guī)劃、設(shè)計(jì)、測(cè)試和編碼階段變得更加精簡(jiǎn)和高效。
• 提高用戶滿意度和用戶體驗(yàn)——為用戶創(chuàng)建統(tǒng)一且可預(yù)測(cè)的體驗(yàn)，將猜測(cè)留給新的設(shè)計(jì)模式，并釋放他們的認(rèn)知負(fù)擔(dān)，專注于手頭的任務(wù)。
• 減少內(nèi)部溝通成本——組件、文檔、顏色和動(dòng)畫的標(biāo)準(zhǔn)化消除了設(shè)計(jì)中的歧義，讓每個(gè)人都懂設(shè)計(jì)邊界。
• 更少的迭代成本——利用設(shè)計(jì)組件，并在應(yīng)用在整個(gè)設(shè)計(jì)中，從而節(jié)省多個(gè)產(chǎn)品修復(fù)相同問題上所花費(fèi)的時(shí)間。

優(yōu)秀的設(shè)計(jì)系統(tǒng)在設(shè)計(jì)中更具優(yōu)勢(shì)，可以大大提升團(tuán)隊(duì)的效率，那么如何構(gòu)建設(shè)計(jì)系統(tǒng)和利用好呢？讓我?guī)私鈴念^開始構(gòu)建設(shè)計(jì)系統(tǒng)的 7 個(gè)步驟。

一、整理已有的設(shè)計(jì)素材

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

尋找產(chǎn)品和頁(yè)面之間的不一致，目標(biāo)是創(chuàng)建一個(gè)通用資源庫(kù)，必須包括構(gòu)建頁(yè)面可能需要的所有內(nèi)容。比如以下例子：

• 配色方案：品牌調(diào)色板是否已經(jīng)存在？什么是底色和強(qiáng)調(diào)色？它們是否滿足設(shè)計(jì)要求？你需要?jiǎng)?chuàng)造更多的顏色，還是你有太多？
• 照片庫(kù)：庫(kù)存攝影和定制攝影應(yīng)遵循一套規(guī)則，以鼓勵(lì)一致性并在整個(gè)使用過程中傳達(dá)您的品牌信息。
• 圖標(biāo)庫(kù)：圖標(biāo)應(yīng)該反映公司品牌，并與您所追求的外觀和感覺相結(jié)合。
• 圖形元素（包括標(biāo)志）：確保您的標(biāo)志具有所有正確的顏色、大小和文件類型變體。
• UI 模式：列出當(dāng)前存在的所有模式，并確保您知道哪些模式需要更新。
• 頁(yè)面模板：確保您有幾個(gè)基本的結(jié)構(gòu)布局選項(xiàng)，并且您知道它們?nèi)绾螖U(kuò)展到更大的屏幕和縮小到更小的屏幕。

二、獲得利益相關(guān)者的支持

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

無(wú)論您發(fā)現(xiàn)了 5 個(gè)或 500 個(gè)錯(cuò)誤，請(qǐng)確保您將使用設(shè)計(jì)系統(tǒng)的思維設(shè)計(jì)方案，它可以幫助您得到協(xié)助部門快速認(rèn)可，以減少前期溝通成本并推動(dòng)設(shè)計(jì)系統(tǒng)進(jìn)入實(shí)施。

三、從顏色開始

調(diào)色板是開始設(shè)計(jì)系統(tǒng)的第一步，核心應(yīng)該是一種主要品牌顏色、一種次要品牌顏色、一種強(qiáng)調(diào)色和一系列灰色調(diào)。

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

制定默認(rèn)文本顏色，鏈接、操作按鈕、背景等顏色規(guī)范。

采用六字符十六進(jìn)制標(biāo)準(zhǔn)可直接使用代碼中，確保在設(shè)計(jì)中使用它們。

四、排版——字體與間距

如果有一個(gè)設(shè)計(jì)風(fēng)格指南，可以設(shè)計(jì)中減少大部分決策成本。

如果沒有，是時(shí)候發(fā)揮設(shè)計(jì)的創(chuàng)造力了，需要定義標(biāo)題和正文等字體規(guī)范（小、中和大）。

從中等字體開始設(shè)計(jì)感受重量和線條高度，后期可以擴(kuò)展以創(chuàng)建超大或超小變體。

規(guī)范好字體接下來就是考慮系統(tǒng)的間距設(shè)計(jì)，在設(shè)計(jì)系統(tǒng)中未定義的任何內(nèi)容都將變得模棱兩可，因此請(qǐng)確保不要忽略任何細(xì)節(jié)。

五、圖形資產(chǎn)

最好的設(shè)計(jì)系統(tǒng)允許設(shè)計(jì)人員簡(jiǎn)單地將組件拖放到新的原型設(shè)計(jì)中，這有助于加快項(xiàng)目工作流程。

為了實(shí)現(xiàn)這一點(diǎn)，需要構(gòu)建圖標(biāo)庫(kù)、攝影資源、插圖庫(kù)和品牌圖像。

確保公司標(biāo)志正確可用，并且制定每個(gè)變體的標(biāo)志使用規(guī)則。

如果他們希望創(chuàng)建新的圖形資產(chǎn)，請(qǐng)列出供其他設(shè)計(jì)師需要遵循的設(shè)計(jì)原則列表，定義大小限制、顏色和首選文件格式等。

資產(chǎn)指南將有助于保持設(shè)計(jì)系統(tǒng)步入正軌，并為其他人提供可遵循的界限。

六、UI 組件庫(kù)

最后就是設(shè)計(jì)系統(tǒng)的核心，創(chuàng)建一個(gè)包含所有常見設(shè)計(jì)元素（包括交互式元素）的模式庫(kù)。

在整理中您會(huì)發(fā)現(xiàn) UI 組件和圖形資源之間存在一些重疊，但在大多數(shù)情況下，UI組件將比靜態(tài)視覺效果更高級(jí)。

UI組件是用于網(wǎng)站、應(yīng)用程序或產(chǎn)品界面的設(shè)計(jì)元素。確保包含開發(fā)文檔，這對(duì)于開發(fā)人員在他們的代碼中重新創(chuàng)建UI組件非常重要，以便在切換過程中零歧義。

UI組件庫(kù)組按單個(gè)組件進(jìn)行整理，比如按功能分類，如“導(dǎo)航”，或按類型分類，如“菜單”。

七、上傳和文件

最后，您需要將設(shè)計(jì)系統(tǒng)存儲(chǔ)在可訪問的位置?？梢圆捎肍igma 來設(shè)計(jì)和存儲(chǔ) UI 組件，這樣團(tuán)隊(duì)之間可以快速輕松地協(xié)作。

Figma 通過提供十六進(jìn)制值、像素尺寸和 CSS 代碼來協(xié)助開發(fā)人員進(jìn)行對(duì)話。

設(shè)計(jì)系統(tǒng)在數(shù)字設(shè)計(jì)領(lǐng)域正蓄勢(shì)待發(fā)，利用設(shè)計(jì)系統(tǒng)可以提高我們的輸出速度，并使設(shè)計(jì)解決方案成為一個(gè)有趣且簡(jiǎn)化的過程。

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

八、總結(jié)

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

本文由 @唐小白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議。