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