本文翻譯自 16 little UI design rules that make a big impact，主要講一些設計的基本原則，對前端的開發(fā)實現也有一定的指導意義。

用戶界面設計是一項挑戰(zhàn)性的工作。在布局、間距、字體和顏色等方面有如此多的選擇，做設計決策可能會讓人感到不知所措。當您還需要考慮可用性、可訪問性和心理學等因素時，情況就更加復雜了。

幸運的是，用戶界面設計并不需要那么難。在我作為產品設計師工作的近20年里，我意識到，大多數視覺和交互設計決策都遵循一套邏輯規(guī)則。并不是藝術的靈感或者神奇的直覺，而是簡單的規(guī)則。

擁有一套邏輯規(guī)則可以幫助您高效地做出明智的設計決策。如果沒有邏輯系統(tǒng)，您只能憑直覺調整設計，直到看起來漂亮為止。

我喜歡規(guī)則和邏輯，但設計決策很少是非黑即白的。與其遵循嚴格的規(guī)則，不如將以下建議看作在大多數情況下都有效的有益指導。

實踐是學習的最快路徑，所以讓我們開始吧。

我們來運用設計規(guī)則來修改下面例子

下面這兩個設計是用于短期租賃房產應用的房產詳情頁面的。第一個是原始設計，第二個是使用一些設計規(guī)則作出的設計。

即使您沒有太多的視覺或交互設計經驗，也能發(fā)現原始設計凌亂、復雜且難以使用。這是因為它存在許多設計細節(jié)問題，會對可用性造成風險?；蛟S您已經發(fā)現了其中的一些問題。

讓我們使用以下設計規(guī)則來逐個解決原始設計中的問題：

1. 使用間距來將相關元素分組
2. 保持一致性
3. 確保外觀相似的元素具有相似的功能
4. 創(chuàng)建清晰的視覺層次結構
5. 刪除不必要的樣式
6. 有目的地使用顏色
7. 確保界面元素具有3:1的對比度比
8. 確保文本具有4.5:1的對比度比
9. 不要僅依靠顏色作為指示器
10. 使用單一無襯線字體
11. 使用具有更高小寫字母的字體
12. 限制使用大寫字母
13. 僅使用常規(guī)和粗體字重
14. 避免使用純黑色文本
15. 左對齊文本
16. 為正文文本使用至少1.5行高度

1. 使用間距將相關元素分組

將信息分組，每個組包含相關元素，可以幫助我們構建和組織界面?？梢宰屓藗兏臁⒏p松地理解和記住信息。以下是將元素分組的方法：

1. 將相關元素放在同一個容器中
2. 將相關元素緊密排列在一起
3. 使相關元素看起來相似
4. 將相關元素對齊成一條連續(xù)線

使用容器是對界面元素進行分組的常用方式，但它可能會額外帶來一些混亂。使用不同分組方法，并將它們巧妙地進行應用，可以幫助我們簡化設計。

特別是使用間距將相關元素分組是一種非常有效且簡單的方法。您還可以結合使用不同的分組方法，以幫助更清晰地顯示分組信息。

在我們的例子中，內容之間缺乏間距使設計看起來雜亂且難以理解。增加間距有助于明確地對內容分組，使其更有組織且更易于理解。

2. 保持一致性

UI 設計中的一致性意味著，看起來相似的元素，它們的使用方式也相似。這一點應該在您的產品內部和與其他成熟產品進行比較時都成立。這種可預測的功能可以提高可用性并減少錯誤，因為用戶并不需要不斷學習如何使用它們。

在我們的例子中，圖標的樣式不一致，有些是填充的，有些不是。這可能會讓一些人感到困惑，因為填充的圖標通常表示元素已選擇。使用 2pt 筆畫寬度和圓角勾勒所有圖標可以提高一致性，使每個圖標具有類似的視覺效果。

除此之外，還添加了文本標簽以幫助確保人們可以理解它們的含義，特別是那些使用屏幕閱讀器（一種描述界面的軟件，使用語音或盲文，向無法看到界面的人描述它）。

3. 確保外觀相似的元素具有相似的功能

如果元素看起來相似，人們會期望它們以相似的方式工作。因此，請盡量確保具有相同功能的元素使用一致的視覺處理。相反，盡量確保具有不同功能的元素看起來不同。

在我們的例子中，圖標容器具有類似于“立即預訂”按鈕的視覺樣式。這使它們看起來是可交互的，盡管它們實際上并不是。從圖標中移除藍色的顏色和按鈕樣式有助于避免它們被誤認為是可交互的元素。

4. 創(chuàng)建清晰的視覺層次結構

在界面中，不是所有信息的重要性都一樣。要根據重要程度來呈現信息，讓更重要的元素看起來更突出。

清晰的視覺層次，有助于人們快速掃描信息并聚焦感興趣的區(qū)域。它還通過創(chuàng)建一種秩序感來提高美感。您可以使用大小、顏色、對比度、間距、位置和深度的變化來創(chuàng)建清晰的視覺層次。

這是一個沒有明確視覺層次的網站橫幅的示例，然后是一個清晰呈現元素重要性順序的示例。

使用 The Squint Test（瞇眼測試）來快速而簡便地測試你的視覺層次是否清晰。只需瞇起眼睛看著你的設計?；蛘?，你可以離屏幕遠一些或模糊你的設計。你應該仍然能夠看出最重要的元素并識別界面的作用。

讓我們把 Squint Test 應用到我們的例子中。我們可以看到有多個同樣突出的元素競爭著吸引注意力。與此同時，左下角的主要操作卻毫不突出。

主要操作通常應該是界面上最突出的元素。給它一個高對比度的背景顏色和加粗的字體重量有助于實現這一點。這也修復了低對比度按鈕的輔助功能問題，我們稍后會詳細探討。

應用“瞇眼測試”到更新后的設計中，主要操作是最突出的元素。

可視層次結構現在更清晰了，但仍有改進的空間。例如，正文文本塊相對于其重要性仍然太突出。我們將學習一些快速的排版指南，這將有助于修正視覺層次結構。

5. 移除不必要的樣式

不必要的信息和視覺樣式會分散注意力并增加認知負荷（使用界面所需的大腦功率）。避免使用不必要的線條、顏色、背景和動畫來創(chuàng)建更簡潔、更集中的界面。

在我們的例子中，圖像周圍的白色空間和邊框增加了不必要的視覺復雜度。它們不需要傳達信息或分組元素，因此我們可以安全地將它們刪除以簡化設計。

6. 有目的地使用顏色

節(jié)約使用顏色并且有目的地使用它。盡量避免僅用顏色作為裝飾，因為它可能會讓人感到困惑和分心。從黑白色開始，僅在顏色能夠傳達信息的地方使用它。
一個簡單而有效的方法是將品牌顏色應用于文本鏈接和按鈕等交互元素。這有助于讓人們了解哪些是交互式的，哪些不是。盡量避免在非交互元素上使用品牌顏色。

不需要在所有交互式元素上添加顏色，因為有些已經具有表明它們是交互式的視覺提示。例如，下面示例中的卡片即使沒有藍色鏈接也仍然感覺具有交互性。

在我們的原始例子中，藍色的標題看起來可能很漂亮，但它使文本看起來像是交互式的。為了避免混淆，我們從標題中移除了藍色，因為它不是交互式的。

我們還從其他非交互式元素（如星級評分）中移除了藍色。這樣就更容易看出什么是交互式的，什么不是。

7. 確保界面元素具有3:1的對比度

對比度是兩種顏色之間視覺亮度差異的度量，以1:1到21:1的比率表示。例如，黑色文本在黑色背景上具有最低的1:1對比度比率，而黑色文本在白色背景上具有最高的21:1比率。有許多在線工具可以幫助您測量不同顏色之間的對比度比率。
為了幫助確保視力受損的人清晰地看到界面細節(jié)，請努力滿足Web內容無障礙性指南(WCAG) 2.1級AA色彩對比度要求。這意味著用戶界面元素，如表單字段和按鈕，需要具有至少3:1的對比度比率。

在我們的示例中，箭頭圖標的對比度太低。將陰影添加到圖標并在圖像的頂部三分之一處添加漸變覆蓋層可以使圖標具有足夠的3:1對比度，無論它放在什么樣的圖像上都可以清晰可見。

在原始示例中，主按鈕對比度也太低了。我們之前在解決視覺層次結構時已經修復了它，但在這里也值得提一下。

增加箭頭和按鈕的對比度到3：1以上使按鈕可訪問，同時也有助于修正視覺層次結構。

將箭頭和按鈕的對比度提高到3：1以上，得到以下設計。雖然逐漸逼近理想狀態(tài)，但仍需解決更多問題。

8. 確保文本具有4.5:1的對比度

為了確保視力受損的人能夠清晰地閱讀文本，需要滿足以下 WCAG 2.1 AA級對比度要求：

小文本（18px及以下）需要至少4.5:1的對比度。
大文本（大于18px且加粗或大于24px且正常重量）需要至少3:1的對比度。
在我們的示例中，照片計數元素中的小文本對比度不足。我們通過增加灰色容器的不透明度并添加文本陰影來增加對比度比率，使其超過4.5:1。

位置文本的對比度也太低了。細字重量使其更難閱讀。使用較深的灰色調有助于使文本更易于訪問。我們將很快對文本進行進一步更新，以改善它的可讀性。

9. 不要僅依靠顏色作為指示器

有許多不同類型的色盲，主要影響男性。通常，色盲者很難區(qū)分紅色和綠色，但有些人根本無法看到任何顏色。

為確保界面對色盲者具有可訪問性，不能僅依靠顏色來傳達含義或區(qū)分視覺元素。您需要使用其他視覺提示來區(qū)分界面元素。

在我們的示例中，“評論”文本上使用藍色表示它是鏈接。如果去掉顏色，鏈接文本看起來與其他文本相同，因此色盲者無法確定它是鏈接。在沒有顏色的情況下，下劃線鏈接文本可以清晰地將其與其他文本區(qū)分開來。

10. 使用單一的無襯線字體

字體是一組具有相似風格或美學的相關字體。Helvetica是一個字體的例子。字體是字體內的變化，例如粗細或大小。例如，Helvetica粗體和Helvetica常規(guī)體是Helvetica字體內的2種不同字體。

對于界面設計，最好使用單一的無襯線字體，因為它們通常是最易讀、中立和簡單的。

在我們的示例中，標題使用了一種詳細的襯線字體，可能有點難以閱讀，會分散注意力。它還具有一些個性，可能與此物業(yè)出租應用程序中的某些照片不匹配。使用無襯線字體簡化它可以幫助提高可用性和美學。

11. 使用具有較高小寫字母的字體

尋找具有較高小寫字母和更大字母間距的字體，因為它們通常在小尺寸下更易讀。字體中小寫字母的高度稱為x高度。

我們的示例使用了Gill Sans字體，它的x高度相對較低。更改為具有更大x高度的字體，例如Lato，有助于提高可讀性。

以下是我們的示例在將字體從Gill Sans更改為Lato后的外觀。

12. 限制使用大寫字母

除非你在向人們大聲喊叫，否則使用大寫字母沒有太多合理的理由。它們很吵，也很難讀。
閱讀時，你看的是一個單詞的形狀，而不是看每個字母。形狀可以幫助你更快地識別單詞。大寫單詞都有相同的矩形形狀。這迫使你一個字母一個字母地閱讀。

在我們的示例中，位置文本使用了大寫字母。將它改為句子大小寫，只有第一個單詞和專有名詞（人名、地名或物品名）使用大寫字母，有助于提高可讀性。

13. 僅使用常規(guī)和粗體字重

僅僅因為字體中有許多字重可用，并不意味著您需要在設計中使用所有字重。使用許多不同的字重會給您的界面添加噪音和雜亂。它還使得使用每個字重時更加困難。
通過僅使用常規(guī)和粗體字重，使您的設計系統(tǒng)簡單而簡潔。

快速使用提示：

• 使用粗體字重強調標題。
• 對于其他較小的文本，請使用常規(guī)字重。
• 如果您決定使用非常細或非常粗的字重，請將它們保留用于標題和較大的文本，因為它們在較小的字號下可能難以閱讀。

在我們的例子中，位置文本使用了較輕的字重。即使我們已經將對比度提高到了所需的4.5:1對比度比例以上，細小的字符仍可能對一些人難以閱讀。將字重增加到常規(guī)可以改善可讀性并簡化設計。

14. 避免使用純黑色文本

對于 UI 設計而言，通常最安全的方式是避免使用純黑色，因為它與白色形成極高的對比度。這種高對比度可能導致閱讀文本時出現眼睛疲勞和疲勞感。

黑色具有 0% 的色彩亮度，而白色具有 100% 的色彩亮度。這種較大的色彩亮度差異會導致我們的眼睛更加努力地工作。因此，最好避免在白色背景上使用純黑色，而選擇使用深灰色。

在我們的例子中，多個元素都使用了純黑色。將其更改為深灰色有助于提高可讀性。此前，在查看視覺層次結構時，我們注意到屬性描述文本太顯眼了。為確保接口元素按照重要性的順序呈現，我們?yōu)閷傩悦枋鑫谋臼褂幂^淺的灰色以減弱其突出程度。

15. 左對齊文本

英語是從左到右閱讀的，呈 F 字形向下閱讀。因此，為了達到最佳的可讀性，最好保持文本左對齊。對于長文本內容，最安全的做法是避免使用居中對齊或兩端對齊的文本。這對于那些認知障礙患者來說閱讀更加困難。

居中對齊適用于標題和短文本，因為可以快速閱讀。然而，居中對齊會使長文本內容更難讀，因為每行的起始點不斷變化。你的眼睛需要更努力地找到每行的起始點。

在我們的例子中，屬性描述文本采用了居中對齊。將其左對齊可以提高可讀性，同時與上面的左對齊文本保持一致。

16. 正文文本應至少使用 1.5 行高

行高是指兩行文本之間的垂直距離。行與行之間的空間有助于防止人們重復閱讀同一行的文本。同時，合適的行高看起來更加舒適，也更容易閱讀。

為了提高可讀性和可訪問性，特別是對于長文本內容，請確保行高至少為 1.5（150%）。將行高保持在 1.5 到 2 之間通常效果良好。

在我們的例子中，行高只有 1（100%）。將其增加到 1.6（160%）有助于提高可讀性。

我們修好了！

通過一些簡單但強大的用戶界面設計準則，我們很快就發(fā)現并修復了我們的示例設計中的許多問題。

我希望您開始意識到用戶界面設計并不需要那么困難。它可能看起來像一門神奇的藝術形式，但其中很大一部分是由我們剛剛學到的邏輯規(guī)則或指導方針構成的。使用客觀邏輯而不是主觀意見，可以更快速、更輕松地設計直觀、易于訪問和美觀的界面。

作者:ikoofe

來源:微信公眾號:KooFE前端團隊

出處
:https://mp.weixin.qq.com/s/3S7CHeiXRgF66HUz7EOGWQ