原文： 《14 logic-driven UI design tips to improve any interface》

作者：Adham Dannaway

這篇文章將傳授一些 UI 設(shè)計技巧，教你如何用邏輯而不是直覺來優(yōu)化你的界面設(shè)計，告別“感覺”設(shè)計師！

設(shè)計用戶界面可不是什么輕松活兒。布局、間距、排版、顏色……無數(shù)的選擇能瞬間讓你頭大。要是再把可用性、無障礙性和人類心理學(xué)這些因素加進來，那挑戰(zhàn)簡直是指數(shù)級增長，讓人想當(dāng)場去世。

不過，好消息來了！UI 設(shè)計其實沒必要搞得那么復(fù)雜。作為一個在產(chǎn)品設(shè)計領(lǐng)域摸爬滾打了 20 多年的老司機，我發(fā)現(xiàn)我的大部分視覺和交互設(shè)計決策，都不是靠什么藝術(shù)天賦或者玄學(xué)般的直覺，而是遵循著一套清晰、符合邏輯的準(zhǔn)則。沒錯，就是靠譜的準(zhǔn)則！

當(dāng)然了，有點創(chuàng)意天賦肯定加分，但說實話，那些讓界面變得直觀、包容、賞心悅目的核心要素，絕對是可以通過學(xué)習(xí)掌握的。有了一套結(jié)構(gòu)化的方法，你就能做出既聰明又一致的設(shè)計決策。否則，你就只能靠反復(fù)試錯，憑感覺去“湊”一個看起來還不錯的方案，效率低得感人。

那最好的學(xué)習(xí)方法是啥？當(dāng)然是干中學(xué)！廢話不多說，咱們直接來看一些實用的 UI 設(shè)計技巧吧。

UI 設(shè)計實戰(zhàn)：咱們來“修理”一個界面案例

下面這個設(shè)計是一個社區(qū)博客平臺的個人主頁。第一個是原始設(shè)計，第二個是快速應(yīng)用了一些邏輯驅(qū)動的 UI 設(shè)計技巧后的效果。前后對比，效果炸裂！

就算你沒啥 UI 設(shè)計經(jīng)驗，估計也能一眼看出那個原始設(shè)計感覺“不太對勁”。這是因為它里面藏著一堆能嚴(yán)重影響可用性的設(shè)計缺陷。沒準(zhǔn)你已經(jīng)發(fā)現(xiàn)其中幾個了。

現(xiàn)在，咱們就一步步來，用下面這些 UI 設(shè)計技巧把這個原始設(shè)計給它“整容”一遍：

1. 根據(jù)元素的關(guān)聯(lián)程度來設(shè)置間距
2. 確保界面元素的對比度至少為 3:1
3. 為最重要的操作使用單個主按鈕
4. 確保按鈕有足夠大的點擊區(qū)域
5. 確保重要內(nèi)容可見
6. 減小大號文本的字間距
7. 不要僅靠顏色作為指示器
8. 盡量避免使用多種對齊方式
9. 確保文本的對比度至少為 4.5:1
10. 考慮移除容器以簡化界面
11. 只使用常規(guī)和粗體兩種字重
12. 保持一致性
13. 不要將極簡主義與簡單性混為一談
14. 平衡圖標(biāo)和文本對

1. 親疏有別：根據(jù)元素的關(guān)聯(lián)程度來設(shè)置間距

界面元素之間的間距大小，應(yīng)該取決于它們之間的關(guān)系有多“鐵”。關(guān)系越鐵的元素，就應(yīng)該靠得越近，讓人一眼就看出它們是一伙的。而那些八竿子打不著的元素，就應(yīng)該用更大的間距把它們隔開，保持安全距離。

用好間距，是把信息拆分成小組的最強手段之一。如果你把每個組都想象成一個矩形，你就會發(fā)現(xiàn)，界面其實就是由無數(shù)個大矩形套小矩形構(gòu)成的。訣竅就是：從最里面的小矩形開始，用小間距；然后越往外走，矩形之間的間距就越大。

決定元素之間的理想間距，絕對是個能把人逼瘋的耗時任務(wù)，因為選擇簡直無窮無盡。與其一個像素一個像素地反復(fù)試錯，不如直接創(chuàng)建一套預(yù)定義的間距選項，決策起來快得飛起。

你可以像選 T 恤一樣，設(shè)置一套 S/M/L 尺寸的間距選項，這些選項都基于 8 的倍數(shù)。這就是傳說中的“8 點網(wǎng)格系統(tǒng)”，用了它，你所有的界面元素最終都會跟一系列由 8 點分隔的垂直和水平參考線對齊，整整齊齊。對于那些細(xì)節(jié)爆炸的界面，你也可以用 4 的倍數(shù)，控制力更強。

就像排版字階一樣，你的間距選項也應(yīng)該隨著尺寸的增大而增大增量。這樣才能確保大尺寸的界面元素也能獲得成比例的間距，看著和諧。

在咱們的案例里，不管元素關(guān)系親不親，矩形之間只用了超小號（8pt）和小號（16pt）這兩種間距。結(jié)果就是，整個設(shè)計看起來亂糟糟、擠成一團，讓人看得腦殼疼。根據(jù)元素的關(guān)聯(lián)程度來增加間距，就能清清楚楚地把內(nèi)容分開和分組。

看看應(yīng)用了預(yù)定義間距選項前后，我們案例的對比圖，簡直是天壤之別。

2. 亮瞎眼原則：確保界面元素的對比度至少為 3:1

對比度，說白了就是兩種顏色在視覺亮度上的差異，用一個從 1:1 到 21:1 的比率來表示。舉個栗子，黑底黑字，對比度最低，就是 1:1；而白底黑字，對比度最高，能達(dá)到 21:1。市面上有很多工具和 Figma 插件能幫你測量顏色對比度，我最愛用的是 Web AIM 在線對比度檢查工具 和 Contrast Figma 插件。

為了確保視力有障礙的用戶也能看清界面細(xì)節(jié)，你的設(shè)計至少要滿足 Web 內(nèi)容無障礙指南 (WCAG) 2.1 的 AA 級顏色對比度要求。這意味著，像表單字段和按鈕這樣的用戶界面元素，對比度至少要達(dá)到 3:1。

在我們的案例中，圖標(biāo)和按鈕的對比度都太低了，簡直是“隱身”狀態(tài)。低對比度按鈕的風(fēng)險在于，視力不好的用戶可能根本認(rèn)不出它們是按鈕，因為他們看不清按鈕的輪廓。給按鈕加上一個對比度足夠的邊框，就能讓它們變得無障礙。同時，我們還把按鈕的淺灰色背景填充給去掉了，這樣用戶就不會誤以為它們是禁用或非激活狀態(tài)。至于圖標(biāo)對比度低的問題，用個深點的灰色就輕松搞定了。

3. 獨孤求?。簽樽钪匾牟僮魇褂脝蝹€主按鈕

對于大多數(shù)網(wǎng)站或 App 項目，你通常需要三種不同“分量”的按鈕來表示操作的重要性：主按鈕、次按鈕和三次按鈕。根據(jù)界面的復(fù)雜程度，你可能還需要更小或更大的按鈕尺寸。

下面這些按鈕樣式，用戶熟悉、無障礙，而且視覺層級清晰，不單單依賴顏色來區(qū)分。當(dāng)然，這不是設(shè)計按鈕的唯一方法，但絕對是個不會翻車的安全選項。想了解更多，可以去看看按鈕設(shè)計技巧，避免踩坑。

主按鈕的目的，就是在界面上突出那個最重要的操作，像個聚光燈一樣。這能幫助用戶秒懂下一步該干啥，順利完成任務(wù)。

主按鈕使用指南：

• 如果界面上沒有一個“最”重要的操作，那就用次按鈕或三次按鈕。
• 千萬別在一個屏幕上放多個主按鈕。它們會互相“打架”，爭奪用戶的注意力，讓用戶一臉懵逼，不知道該點哪個。

在我們的案例中，咱們就假設(shè)“關(guān)注”是最重要的操作，然后把它變成一個閃亮的主按鈕。

4. 大就完事了：確保按鈕有足夠大的點擊區(qū)域

小目標(biāo)比大目標(biāo)更難點中，這是常識。對于那些運動控制能力受損的用戶，或者哪怕只是一個單手拿著手機用大拇指操作的普通人來說，這個問題就更嚴(yán)重了。

盡量遵守下面的準(zhǔn)則，確保你的按鈕（以及其他交互元素）有足夠大的點擊區(qū)域：

• 按鈕尺寸至少做到 48pt x 48pt。這個尺寸既符合 8 點網(wǎng)格，也比 WCAG 推薦的 44pt x 44pt 稍大一點，更保險。
• 那些經(jīng)常被“寵幸”的按鈕，可以做得更大一些，提高效率，也防止用戶眼瞎看不見。
• 按鈕之間至少留出 8pt 的空隙，防止用戶“手滑”點錯。

在我們的案例中，這兩個按鈕的點擊區(qū)域已經(jīng)夠大了，但空間還很富裕，完全可以把它們做得更寬。既然有地方，那就加寬按鈕，進一步增大它們的點擊區(qū)域，讓用戶點得更爽。

5. 別藏了，快出來：確保重要內(nèi)容可見

用戶看不見的東西，就等于不存在。把功能藏在交互菜單后面，確實能讓界面看起來干凈又極簡，但這招很危險，因為總有人會錯過這些被藏起來的寶貝。如果空間允許，就盡量把重要的內(nèi)容和操作在需要的時候直接展示出來。

在我們的案例中，為了讓設(shè)計看起來不那么亂，一些操作被藏在了一個交互菜單里。雖然看起來是挺干凈簡潔的，但風(fēng)險就是，有些用戶可能根本發(fā)現(xiàn)不了這些操作。既然有足夠的空間來展示“分享”和“收藏”這兩個操作，那就把它們亮出來，確保它們不會被錯過。

6. 字間距微調(diào)：給大號文本“瘦瘦身”

想讓大標(biāo)題看起來更順眼？有個小訣竅：減小它的字間距（字母之間的空隙）。具體減多少，取決于字體和字號，但總的來說，字號越大，字間距就應(yīng)該減得越多。

這是因為很多字體在設(shè)計之初，就是為了在小字號的正文中閱讀的。它們被稱為“正文體”，天生字間距就比較寬，為了在小尺寸下更容易辨認(rèn)。但對于那些“展示體”字體，你可能就沒必要減小字間距了，因為它們就是為大字號而生的，通常字間距本來就比較緊湊。

在我們的案例中，我們減小了人名字體的字間距，純粹是為了讓它更好看。

7. 色盲警告：不要僅靠顏色作為指示器

千萬別只用顏色來傳達(dá)信息或區(qū)分視覺元素，因為那些視力不佳或色盲的用戶可能根本看不出你的“良苦用心”。記得要用額外的視覺線索來區(qū)分界面元素。

在我們的案例中，有兩處地方可能會讓人迷惑。咱們來把它們弄得更清楚點。

如果你看文章列表上面的那三個標(biāo)簽頁，可能不太容易看出“文章”是當(dāng)前選中的。這是因為只用了一種非常微妙的顏色差異來表示選中狀態(tài)。給選中的標(biāo)簽頁加個下劃線，一下子就清晰明了了。

同樣地，在底部導(dǎo)航欄，也是用微弱的顏色變化來區(qū)分選中和未選中的圖標(biāo)。為了讓它更明顯，我們把選中的圖標(biāo)變成了實心填充樣式。

8. 對齊強迫癥：盡量避免使用多種對齊方式

你用的對齊方式（左對齊、右對齊、居中對齊）種類越多，界面看起來就越復(fù)雜、越亂。我們的眼睛被迫更辛苦地工作，因為它要跳來跳去地去跟隨每一種對齊方式。當(dāng)在一個小組件或界面的一小塊區(qū)域內(nèi)使用多種不同的對齊方式時，這個問題就更突出了。

堅持使用單一的對齊方式（或者盡可能少）有助于簡化界面，讓它看起來更整潔、更利落。

在我們的案例中，標(biāo)簽頁是居中對齊的，而頁面上其他大部分元素都是左對齊的。這種混合對齊增加了不必要的復(fù)雜性，導(dǎo)致認(rèn)知負(fù)荷（使用界面所需腦力）輕微增加。把標(biāo)簽頁也改成左對齊，能讓整個界面清爽不少。

9. 文本也要亮：確保文本對比度至少為 4.5:1

為了確保視力有障礙的用戶也能清楚地閱讀文本，它需要滿足以下 WCAG 2.1 AA 級的對比度要求：

• 小號文本（18px 及以下）需要至少 4.5:1 的對比度。
• 大號文本（粗體超過 18px 或常規(guī)體超過 24px）需要至少 3:1 的對比度。

在我們的案例中，未選中標(biāo)簽頁上的小號文本對比度不足。換個深點的灰色，對比度就達(dá)標(biāo)了。

10. 斷舍離：考慮移除容器以簡化界面

把信息拆分成一個個相關(guān)的元素小組，有助于構(gòu)建和組織界面。這能讓用戶更快、更容易地理解和記住內(nèi)容。

你可以用下面這些方法來給相關(guān)元素分組：

1. 把相關(guān)元素放在同一個容器里
2. 讓相關(guān)元素靠得近一些
3. 讓相關(guān)元素看起來相似
4. 讓相關(guān)元素在一條線上對齊

使用容器是分組最強的視覺提示，但它也可能增加不必要的混亂。多找找機會用其他分組方法，它們通常更微妙，能幫助簡化設(shè)計。

在我們的案例中，每篇文章周圍的容器都是多余的，因為已經(jīng)用了好幾種其他的分組方法了。去掉這些容器，還能給內(nèi)容騰出更多空間。

11. 字重從簡：只用常規(guī)和粗體兩種字重

Just because there are lots of font weights available in a typeface, doesn’t mean you need to use all of them in your UI designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.

Keep your design system simple and concise by using regular and bold font weights only. Some typefaces have a semi-bold font option that you can use instead of bold if bold is too heavy.

Quick usage tips:

• Use bold font weight for headings to emphasise them.
• Use regular font weight for other smaller text.
• If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes.

在我們的案例中，文章詳情部分用了 3 種不同的字重。雖然“極細(xì)”和“纖細(xì)”這兩種字重的對比度都超過了 4.5:1 的要求，但對某些人來說，這些字可能還是看得費勁。把字重增加到“常規(guī)”，既能提高可讀性，又能簡化設(shè)計。文章標(biāo)題用個“半粗體”，就能讓它在眾多信息中脫穎而出，成為最靚的仔。

只用兩種字重，就得到了下面這個設(shè)計。咱們應(yīng)用這些 UI 設(shè)計技巧的進展不錯，但別急，還有幾個小毛病要修理一下。

12. 一致性是親媽：所有元素都得是一個媽生的

UI 設(shè)計中的一致性，意思就是相似的元素，長相和脾氣都得差不多。這不僅在你自己的產(chǎn)品內(nèi)部要做到，跟那些已經(jīng)混出頭的成熟產(chǎn)品比，也得有這個覺悟。這種可預(yù)測的功能，能大大提高可用性，減少用戶犯錯，因為大家不需要一遍又一遍地去學(xué)習(xí)新東西怎么用，省心！

在我們的案例里，每篇文章的圖片都是直角，這跟按鈕和圖標(biāo)的圓角風(fēng)格簡直是“異父異母的親兄弟”，看著別扭。把圖片的角也弄成圓角，就能創(chuàng)造出更統(tǒng)一的視覺語言。你可能覺得這種小細(xì)節(jié)無所謂，但正是這些細(xì)節(jié)的累加，才讓一個設(shè)計最終感覺“對味兒”。

13. 極簡≠簡單：別被“少即是多”給忽悠了

極簡不等于簡單！設(shè)計師們總有一種偏愛極簡界面的傾向，因為它們看起來確實漂亮又干凈。但一個極簡界面，只是元素和樣式少，不代表它就一定容易理解和使用。

極簡界面常常因為缺少提升可用性的關(guān)鍵細(xì)節(jié)而顯得模糊不清，讓人迷惑。簡化，可不僅僅是做減法。刪減或隱藏太多東西，會嚴(yán)重?fù)p害可用性。你必須確保，自己沒有把那些至關(guān)重要的信息或細(xì)節(jié)給“咔嚓”掉。

在我們的案例中，底部導(dǎo)航的圖標(biāo)看起來干凈又極簡，但它們的意思真的清楚嗎？對所有人來說，可能并非如此。給圖標(biāo)加上文字標(biāo)簽，就能確保大家都能明白它們是干啥的，特別是對于那些使用屏幕閱讀器（一種通過語音或盲文向視障用戶描述界面的軟件）的用戶來說，這至關(guān)重要。

14. 圖文并茂的藝術(shù)：平衡好圖標(biāo)和文字這對 CP

當(dāng)把圖標(biāo)和文字配對使用時，要盡量確保它們的視覺“分量”差不多，這樣看起來才更平衡、更有整體感，像一對和諧的 CP。

在我們的案例中，底部導(dǎo)航里的圖標(biāo)和文字組合就有點失衡。雖然圖標(biāo)和文字顏色一樣，但圖標(biāo)更粗更大，顯得更“搶鏡”。把文字顏色加深，就能增加它的視覺分量，跟圖標(biāo)達(dá)到平衡。順便把文字對比度提高到至少 4.5:1，也保證了低視力用戶的無障礙訪問。

大功告成！

就靠著這么幾個簡單直接的 UI 設(shè)計技巧，咱們就把案例界面里的一堆問題給找出來并解決了。當(dāng)然，如果你有需要，還可以更進一步，調(diào)整視覺風(fēng)格來匹配特定的品牌個性。不過在這個例子里，咱們的重點是把基礎(chǔ)打扎實。

我希望你現(xiàn)在開始意識到，UI 設(shè)計沒必要讓人覺得壓力山大。雖然它有時候看起來像一門只有天才才能掌握的神秘藝術(shù)，但實際上，大部分優(yōu)秀的界面設(shè)計，都植根于像你在這里學(xué)到的這些清晰、合乎邏輯的準(zhǔn)則。

依靠客觀的準(zhǔn)則，而不是主觀的“我覺得”，能讓你更容易（也更快）地設(shè)計出直觀、無障礙且視覺上精致的界面。你練習(xí)使用這些 UI 設(shè)計技巧越多，它們就會越自然地融入你的設(shè)計流程。把它們當(dāng)作你的基本功，然后大膽地去探索、去實驗，在此基礎(chǔ)上盡情發(fā)揮你的創(chuàng)造力吧！