国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

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

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

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

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

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

三、從顏色開始

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

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

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

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

四、排版——字體與間距

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

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

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

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

五、圖形資產(chǎn)

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

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

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

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

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

六、UI 組件庫

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

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

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

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

七、上傳和文件

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

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

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

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

八、總結(jié)

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

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

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