規(guī)則1. 關(guān)于易讀性和可讀性
出色的排版歸結(jié)為易讀性和可讀性，在設(shè)計系統(tǒng)中，字體大小、行高、段落間距和字母間距的設(shè)計方式應(yīng)提高可讀性和易讀性。
• 字體大小
根據(jù)全球咨詢網(wǎng)聯(lián)盟發(fā)布的WCAG 2.0（網(wǎng)絡(luò)無障礙性指導(dǎo)原則）， Web內(nèi)容可訪問性指南定義最小可接受字體大小為 18pt（或 14pt 粗體）。要注意視覺層次以及此基本大小如何將自己與摘要文本（例如標題）區(qū)分開來（
，< h2>，
等）。
接下來，選擇字體。現(xiàn)在，你可能會注意到一些字體是 18px
和 22px
看起來并沒有什么不同。我們在這里有兩個選擇：調(diào)整字體大小，或者考慮為標題使用不同的字體。
• 行高
最佳行高可確保文本行之間有足夠的間距，以實現(xiàn)良好的可讀性。行高應(yīng)該是字體大小的 1.5 倍。因此，在你的 UI 設(shè)計工具中的“Line”（或類似）下，只需將字體大小乘以 - 至少 - 1.5。例如，如果正文是 18px，那么行高需要為 27px (18*1.5)。
• 段落間距
段落間距（或文本間距）與行高類似，magic multiplier 是 2x（意思是字體大小的兩倍）。 例如，如果字體大小是 18px，那么在進入下一個文本塊之前應(yīng)該有 36px 的空間。
• 共享樣式風(fēng)格
如果你的 UI 設(shè)計工具支持（Pixso支持創(chuàng)建樣式），將這些版式的樣式轉(zhuǎn)換為“本地組件”，以使其快速可重用，同時確保視覺一致性。
規(guī)則2. 不超過三種主顏色
顏色會對設(shè)計產(chǎn)生巨大影響——這是毫無疑問的。但這不一定是關(guān)于它們有多漂亮。談到 UI 設(shè)計，顏色通常是我們最喜歡涉足的事情之一，在創(chuàng)建設(shè)計系統(tǒng)時，它扮演著許多不同的角色。
• 選擇你的顏色
推薦使用的格式：
廣告語顏色（也是主要品牌顏色）
中性淺色（適合文字較多的內(nèi)容）
中性深色（更適合 UI 元素，也適合深色模式）
• 創(chuàng)建調(diào)色板
通常，將稍淺和稍暗分別視為 10% 的額外白色和 10% 的額外黑色。完成后，在每個畫板上顯示印刷樣式的副本。
• 檢查對比度水平
接下來，我們需要檢查我們的顏色以獲得最佳顏色對比度。 Pixso是一款在線協(xié)作設(shè)計工具，可以將所有設(shè)計稿放在一個文件中進行檢查。
規(guī)則 3. CTA按鈕需要層次結(jié)構(gòu)
大多數(shù)關(guān)于CTA按鈕的用處是引導(dǎo)用戶采取行動——可點擊并傳達視覺層次結(jié)構(gòu)。
• 尺寸
創(chuàng)建多尺寸的按鈕時保持文本大小比例相步變化，建議常規(guī)按鈕文本為 18px（與正文文本相同），但大小有 3 種變化：
正常：高度 44 像素（圓角：5 像素）
大：高 54 像素（圓角：10 像素）
超大：高度 64 像素（圓角：15 像素）
這使我們可以在不依賴顏色的情況下，強調(diào)某些按鈕，并且還可以嵌套按鈕（例如，在外觀最小的表單字段中使用按鈕）。
• 陰影
陰影應(yīng)該用來增加深度，因此建議交互性。所有按鈕和表單域變體的單一陰影樣式都很好——不需要任何花哨的東西。
• 交互性
每個按鈕類型都需要一個變體來指示其懸停狀態(tài)。這向用戶闡明了這是可點擊交互狀態(tài)，促使用戶進一步深度使用。這實際上是創(chuàng)建設(shè)計系統(tǒng)的更復(fù)雜的地方之一，因為創(chuàng)建狀態(tài)時最常用的就是更改按鈕顏色的樣式。
規(guī)則4. 設(shè)計元素必須一致
將設(shè)計元素轉(zhuǎn)換為組件，有利于重復(fù)使用它們，從而幫助我們加快工作流程并保持整個設(shè)計的一致性。組件可以節(jié)省大量時間，在Pixso可以隨意切換一個組件的多種狀態(tài)，設(shè)計師能更加高效地去創(chuàng)建和復(fù)用組件。
規(guī)則5. 統(tǒng)一設(shè)計系統(tǒng)
設(shè)計系統(tǒng)決定了各種樣式的應(yīng)用規(guī)范。例如，什么樣的文本樣式可以用于強調(diào)作用，什么時候需要左對齊，什么時候需要居中對齊。設(shè)計系統(tǒng)不是一次性可以完成的任務(wù)，應(yīng)當在實踐中不斷更新優(yōu)化它。
各種類型的UI設(shè)計師都知道這些設(shè)計原則，但這些規(guī)則對于我們的應(yīng)用程序或網(wǎng)站，甚至我們的整個品牌，都十分重要。
免責(zé)聲明：市場有風(fēng)險，選擇需謹慎！此文僅供參考，不作買賣依據(jù)。
