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

作者：Adham Dannaway

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

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

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

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

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

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

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

就算你沒啥 UI 設(shè)計(jì)經(jīng)驗(yàn)，估計(jì)也能一眼看出那個(gè)原始設(shè)計(jì)感覺“不太對(duì)勁”。這是因?yàn)樗锩娌刂欢涯車?yán)重影響可用性的設(shè)計(jì)缺陷。沒準(zhǔn)你已經(jīng)發(fā)現(xiàn)其中幾個(gè)了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 獨(dú)孤求敗：為最重要的操作使用單個(gè)主按鈕

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

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

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

主按鈕使用指南：

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

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

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

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

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

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

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

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

用戶看不見的東西，就等于不存在。把功能藏在交互菜單后面，確實(shí)能讓界面看起來干凈又極簡(jiǎn)，但這招很危險(xiǎn)，因?yàn)榭傆腥藭?huì)錯(cuò)過這些被藏起來的寶貝。如果空間允許，就盡量把重要的內(nèi)容和操作在需要的時(shí)候直接展示出來。

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

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

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

這是因?yàn)楹芏嘧煮w在設(shè)計(jì)之初，就是為了在小字號(hào)的正文中閱讀的。它們被稱為“正文體”，天生字間距就比較寬，為了在小尺寸下更容易辨認(rèn)。但對(duì)于那些“展示體”字體，你可能就沒必要減小字間距了，因?yàn)樗鼈兙褪菫榇笞痔?hào)而生的，通常字間距本來就比較緊湊。

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

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

千萬別只用顏色來傳達(dá)信息或區(qū)分視覺元素，因?yàn)槟切┮暳Σ患鸦蛏さ挠脩艨赡芨究床怀瞿愕摹傲伎嘤眯摹薄Ｓ浀靡妙~外的視覺線索來區(qū)分界面元素。

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

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

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

8. 對(duì)齊強(qiáng)迫癥：盡量避免使用多種對(duì)齊方式

你用的對(duì)齊方式（左對(duì)齊、右對(duì)齊、居中對(duì)齊）種類越多，界面看起來就越復(fù)雜、越亂。我們的眼睛被迫更辛苦地工作，因?yàn)樗鴣硖サ厝ジS每一種對(duì)齊方式。當(dāng)在一個(gè)小組件或界面的一小塊區(qū)域內(nèi)使用多種不同的對(duì)齊方式時(shí)，這個(gè)問題就更突出了。

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

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

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

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

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

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

10. 斷舍離：考慮移除容器以簡(jiǎn)化界面

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

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

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

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

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

11. 字重從簡(jiǎn)：只用常規(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ì)”這兩種字重的對(duì)比度都超過了 4.5:1 的要求，但對(duì)某些人來說，這些字可能還是看得費(fèi)勁。把字重增加到“常規(guī)”，既能提高可讀性，又能簡(jiǎn)化設(shè)計(jì)。文章標(biāo)題用個(gè)“半粗體”，就能讓它在眾多信息中脫穎而出，成為最靚的仔。

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

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

UI 設(shè)計(jì)中的一致性，意思就是相似的元素，長(zhǎng)相和脾氣都得差不多。這不僅在你自己的產(chǎn)品內(nèi)部要做到，跟那些已經(jīng)混出頭的成熟產(chǎn)品比，也得有這個(gè)覺悟。這種可預(yù)測(cè)的功能，能大大提高可用性，減少用戶犯錯(cuò)，因?yàn)榇蠹也恍枰槐橛忠槐榈厝W(xué)習(xí)新東西怎么用，省心！

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

13. 極簡(jiǎn)≠簡(jiǎn)單：別被“少即是多”給忽悠了

極簡(jiǎn)不等于簡(jiǎn)單！設(shè)計(jì)師們總有一種偏愛極簡(jiǎn)界面的傾向，因?yàn)樗鼈兛雌饋泶_實(shí)漂亮又干凈。但一個(gè)極簡(jiǎn)界面，只是元素和樣式少，不代表它就一定容易理解和使用。

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

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

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

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

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

大功告成！

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

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

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