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

規(guī)則1. 關(guān)于易讀性和可讀性

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

• 字體大小

根據(jù)全球咨詢網(wǎng)聯(lián)盟發(fā)布的WCAG 2.0(網(wǎng)絡(luò)無障礙性指導(dǎo)原則)， Web內(nèi)容可訪問性指南定義最小可接受字體大小為 18pt(或 14pt 粗體)。要注意視覺層次以及此基本大小如何將自己與摘要文本(例如標(biāo)題)區(qū)分開來(< h1>，< h2>，< h3>等)。

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

• 行高

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

• 段落間距

段落間距(或文本間距)與行高類似，magic multiplier 是 2x(意思是字體大小的兩倍)。 例如，如果字體大小是 18px，那么在進(jìn)入下一個(gè)文本塊之前應(yīng)該有 36px 的空間。

• 共享樣式風(fēng)格

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

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

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

• 選擇你的顏色

推薦使用的格式：

廣告語顏色(也是主要品牌顏色)

中性淺色(適合文字較多的內(nèi)容)

中性深色(更適合 UI 元素，也適合深色模式)

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

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

• 檢查對(duì)比度水平

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

規(guī)則3. CTA按鈕需要層次結(jié)構(gòu)

大多數(shù)關(guān)于CTA按鈕的用處是引導(dǎo)用戶采取行動(dòng)——可點(diǎn)擊并傳達(dá)視覺層次結(jié)構(gòu)。

• 尺寸

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

正常：高度 44 像素(圓角：5 像素)

大：高 54 像素(圓角：10 像素)

超大：高度 64 像素(圓角：15 像素)

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

• 陰影

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

• 交互性

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

規(guī)則4. 設(shè)計(jì)元素必須一致

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

規(guī)則5. 統(tǒng)一設(shè)計(jì)系統(tǒng)

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

各種類型的UI設(shè)計(jì)師都知道這些設(shè)計(jì)原則，但這些規(guī)則對(duì)于我們的應(yīng)用程序或網(wǎng)站，甚至我們的整個(gè)品牌，都十分重要。

特別提醒：本網(wǎng)信息來自于互聯(lián)網(wǎng)，目的在于傳遞更多信息，并不代表本網(wǎng)贊同其觀點(diǎn)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對(duì)本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾，并請(qǐng)自行核實(shí)相關(guān)內(nèi)容。本站不承擔(dān)此類作品侵權(quán)行為的直接責(zé)任及連帶責(zé)任。如若本網(wǎng)有任何內(nèi)容侵犯您的權(quán)益，請(qǐng)及時(shí)聯(lián)系我們，本站將會(huì)在24小時(shí)內(nèi)處理完畢。