??設計語言是一個很龐大的設計體系，包括字體、網(wǎng)格系統(tǒng)、顏色、圖形等等，很多初學者在做移動端的時候，往往對各種設備的界面尺寸和系統(tǒng)設計規(guī)范不是十分清楚，僅憑個人感覺和經(jīng)驗去繪制界面，心里并沒有一個清晰的概念。本文中，我們將揭示有效UI設計規(guī)范的黃金法則，從排版開始，指導你的UI設計過程的基本規(guī)則。

??規(guī)則1.不超過三種主顏色

??顏色會對設計產(chǎn)生巨大影響——這是毫無疑問的。但這不一定是關于它們有多漂亮。談到UI設計，顏色通常是我們最喜歡涉足的事情之一，在創(chuàng)建設計系統(tǒng)時，它扮演著許多不同的角色。

??·選擇你的顏色

??推薦使用的格式：

??廣告語顏色（也是主要品牌顏色）
 
??中性淺色（適合文字較多的內(nèi)容）

??中性深色（更適合UI元素，也適合深色模式）

??·創(chuàng)建調(diào)色板

??通常，將稍淺和稍暗分別視為10%的額外白色和10%的額外黑色。完成后，在每個畫板上顯示印刷樣式的副本。

??·檢查對比度水平

??接下來，我們需要檢查我們的顏色以獲得最佳顏色對比度。Pixso是一款在線協(xié)作設計工具，可以將所有設計稿放在一個文件中進行檢查。

??規(guī)則2.關于易讀性和可讀性

??出色的排版歸結為易讀性和可讀性，在設計系統(tǒng)中，字體大小、行高、段落間距和字母間距的設計方式應提高可讀性和易讀性。

??·字體大小

??根據(jù)全球咨詢網(wǎng)聯(lián)盟發(fā)布的WCAG 2.0，Web內(nèi)容可訪問性指南定義最小可接受字體大小為18pt。要注意視覺層次以及此基本大小如何將自己與摘要文本。

??接下來，選擇字體?，F(xiàn)在，你可能會注意到一些字體是18px<p>和22px<h3>看起來并沒有什么不同。我們在這里有兩個選擇：調(diào)整字體大小，或者考慮為標題使用不同的字體。

??·行高

??最佳行高可確保文本行之間有足夠的間距，以實現(xiàn)良好的可讀性。行高應該是字體大小的1.5倍。因此，在你的UI設計工具中的“Line”（或類似）下，只需將字體大小乘以-至少-1.5。例如，如果正文是18px，那么行高需要為27px(18*1.5)。

??·段落間距

??段落間距（或文本間距）與行高類似，magic multiplier是2x（意思是字體大小的兩倍）。例如，如果字體大小是18px，那么在進入下一個文本塊之前應該有36px的空間。

??·共享樣式風格

??如果你的UI設計工具支持（Pixso支持創(chuàng)建樣式），將這些版式的樣式轉(zhuǎn)換為“本地組件”，以使其快速可重用，同時確保視覺一致性。

??規(guī)則3.CTA按鈕需要層次結構

??大多數(shù)關于CTA按鈕的用處是引導用戶采取行動——可點擊并傳達視覺層次結構。

??·尺寸

??創(chuàng)建多尺寸的按鈕時保持文本大小比例相步變化，建議常規(guī)按鈕文本為18px（與正文文本相同），但大小有3種變化：

??正常：高度44像素（圓角：5像素）大：高54像素（圓角：10像素）超大：高度64像素（圓角：15像素）

??這使我們可以在不依賴顏色的情況下，強調(diào)某些按鈕，并且還可以嵌套按鈕（例如，在外觀最小的表單字段中使用按鈕）。

??·陰影

??陰影應該用來增加深度，因此建議交互性。所有按鈕和表單域變體的單一陰影樣式都很好——不需要任何花哨的東西。

??·交互性

??每個按鈕類型都需要一個變體來指示其懸停狀態(tài)。這向用戶闡明了這是可點擊交互狀態(tài)，促使用戶進一步深度使用。這實際上是創(chuàng)建設計系統(tǒng)的更復雜的地方之一，因為創(chuàng)建狀態(tài)時最常用的就是更改按鈕顏色的樣式。

??規(guī)則4.統(tǒng)一設計系統(tǒng)

??設計系統(tǒng)決定了各種樣式的應用規(guī)范。例如，什么樣的文本樣式可以用于強調(diào)作用，什么時候需要左對齊，什么時候需要居中對齊。設計系統(tǒng)不是一次性可以完成的任務，應當在實踐中不斷更新優(yōu)化它

??規(guī)則5.設計元素必須一致

??將設計元素轉(zhuǎn)換為組件，有利于重復使用它們，從而幫助我們加快工作流程并保持整個設計的一致性。組件可以節(jié)省大量時間，在Pixso可以隨意切換一個組件的多種狀態(tài)，設計師能更加高效地去創(chuàng)建和復用組件。