16個小的UI設計規則卻能產生巨大的影響
這篇文章介紹了一些關于用戶界面設計的實用技巧，幫助設計師們更好地設計直觀、易用、美觀的界面。首先，通過利用空間將相關元素進行分組，可以更好地組織和結構化界面，提升用戶理解和記憶的效果。其次，保持一致性是關鍵，確保相似的元素在外觀和功能上一致，提高可用性和減少錯誤。另外，相似的元素應具有相似的功能，避免產生混淆。清晰的視覺層次有助于快速掃描信息和凸顯重要元素。同時，減少不必要的樣式和信息可以簡化界面，降低認知負荷。使用顏色時應有目的地使用，避免純粹為裝飾而使用，特別是需要注意色盲用戶的可訪問性。選擇單一無襯線字體，并使用具有較高小寫字母和適當行高的字體，提升可讀性。同時，避免過度使用大寫字母，因為它們難以閱讀。此外，避免使用純黑色文本，采用較暗的灰色可以提高可讀性并減少眼部疲勞。最后，將文本左對齊，并確保正文文本具有適當的行高，增強可讀性。
這些技巧的目標是通過使用邏輯和客觀的規則，而非主觀的意見，來簡化UI設計過程，使其更加高效、直觀和易用。
總的來說，這篇文章提供了一些寶貴的UI設計技巧，對于希望提升設計技能和創造出出色用戶體驗的設計師們來說，是一份有價值的參考資料。
~~ 下面是正文
用戶界面設計是一項困難的任務。面對眾多的布局、間距、排版和顏色選項，做出設計決策可能會令人感到壓力山大。當你再加上可用性、可訪問性和心理學因素，任務難度進一步增加。
幸運的是，UI設計并非總是如此艱難。在近二十年的產品設計工作中，我意識到我大部分的視覺和交互設計決策都是受一套邏輯規則的指導。這不是藝術的熱情或神奇的直覺，只是簡單的規則。
擁有一套邏輯規則可以幫助你高效地做出明智的設計決策。沒有邏輯體系，你只能憑直覺隨意調整，直到它看起來美觀。
我熱愛規則和邏輯，但設計決策很少是非黑即白的。與其將以下的建議視為必須遵守的嚴格規則，不如把它們看作是在大多數情況下都能奏效的有用指南。
學習最快的方式就是動手實踐，所以讓我們開始吧。
使用邏輯規則來修復這個例子
以下兩個設計是短期房產租賃應用的房產詳情頁面。第一個是原始設計。第二個是應用了一些邏輯規則或指南后的結果。
即使沒有太多的視覺或交互設計經驗，你可能也會注意到原始設計感覺混亂、復雜，并且難以使用。這是因為它包含了許多可能對可用性構成風險的問題設計細節。也許你已經發現了其中的一些？
我們使用以下的邏輯規則或指南，一次解決原始設計的一個問題：
- 使用空間來組合相關元素
- 保持一致性
- 確保看起來相似的元素功能相似
- 創建清晰的視覺層次
- 移除不必要的樣式
- 有目的地使用顏色
- 確保界面元素的對比度為3:1
- 確保文字的對比度為4.5:1
- 不要僅依賴顏色作為指示器
- 使用單一的無襯線字體
- 使用小寫字母較高的字體
- 限制大寫字母的使用
- 只使用常規和粗體字重
- 避免使用純黑色的文字
- 左對齊文字
- 正文行間距至少為1.5
1. 使用空間將相關元素分組
將信息分解為相關元素的小組可以幫助結構化和組織界面，這讓人們更快、更容易地理解和記憶。
你可以通過以下方法將相關元素分組：
- 將相關元素放在同一個容器中
- 將相關元素空間上靠近
- 使相關元素看起來相似
- 在一條連續線上對齊相關元素
使用容器是將界面元素分組的最強烈的視覺提示，但它可能會增加不必要的混亂。尋找使用其他分組方法的機會，它們通常更加微妙，可以幫助簡化設計。
特別是使用空間，是將相關元素分組的一種非常有效且簡單的方式。你還可以結合分組方法，以更清楚地展示分組。
在我們的例子中，內容之間缺乏空間使得設計看起來混亂且難以理解。增加間距有助于清晰地將內容分組，使其更有組織性，更容易理解。
2.保持一致性
在UI設計中，一致性意味著相似的元素看起來并且工作方式相似。無論是在你的產品內部，還是與其他已經建立良好的產品相比，都應該如此。這種可預見的功能性能提高可用性并減少錯誤，因為人們不需要不斷地學習事物的工作原理。
在我們的例子中，圖標的樣式并不一致，有些是填充的，有些則不是。這可能會使一些人感到困惑，因為填充的圖標通常表示一個元素被選中了。用2pt的筆觸寬度和圓角勾勒出所有圖標可以提高一致性，并賦予每個圖標相似的視覺重量。
圖標上也添加了文字標簽，以幫助確保人們可以理解它們的含義，特別是那些使用屏幕閱讀器的人（屏幕閱讀器是一種用語音或盲文描述界面的軟件，供視力障礙者使用）。
3.確?？雌饋硐嗨频脑毓δ芟嗨?/h2>
如果元素看起來相似，人們會期望它們以相似的方式工作。所以，請盡量確保你對具有相同功能的元素使用一致的視覺處理。反之，嘗試確保具有不同功能的元素看起來不同。
在我們的例子中，圖標容器的視覺樣式與“立即預訂”按鈕相似。這使它們看起來像是可以交互的，盡管它們并非如此。移除圖標的藍色和按鈕樣式有助于避免它們被誤認為是可以交互的元素。
4.創建清晰的視覺層次
界面中的所有信息并非都有相同的重要性。你的目標應該是按照重要性的順序展示信息，使更重要的元素顯得更突出。
清晰的重要性順序，或者說視覺層次，有助于人們快速掃描信息并關注感興趣的區域。它也通過創造一種秩序感來提升美感。你可以使用大小、顏色、對比度、間距、位置和深度的變化來創建清晰的視覺層次。
以下是一個沒有明確視覺層次的網站英雄橫幅示例，后面是一個按重要性順序明確展示元素的示例。
一個快速簡便的檢測你的視覺層次是否清晰的方法是使用"模糊測試"。只需瞇起你的眼睛看你的設計，或者你可以離屏幕遠一些，或模糊你的設計。你應該仍然能夠識別出哪些是最重要的元素，并且能夠識別出界面的用途。
讓我們把模糊測試應用到我們的例子上。我們可以看到有多個元素的突出程度相當，競相吸引注意力。與此同時，左下角的主要動作一點也不突出。
通常情況下，主要動作應該是界面上最突出的元素。給它一個高對比度的背景顏色和粗體字重可以幫助實現這一點。這也修復了一個關于低對比度按鈕的可訪問性問題，我們稍后會深入研究這個問題。
將模糊測試應用到更新的設計上，主要動作顯然是最突出的元素。
視覺層次現在更清晰了，但還有改進的空間。例如，與其重要性相比，正文文本塊的突出程度仍然過高。我們稍后將學習一些快速的排版指南，這將有助于修正視覺層次。
5. 移除不必要的樣式
不必要的信息和視覺樣式可能會分散注意力，增加認知負荷（使用界面所需的腦力）。避免不必要的線條、顏色、背景和動畫，可以創建一個更簡潔、更聚焦的界面。
在我們的例子中，圖片周圍的白色空間和邊框增加了不必要的視覺復雜性。它們并不需要傳達信息或分組元素，所以我們可以安全地移除它們，以簡化設計。
6.有目的地使用顏色
有節制且有目的地使用顏色。盡量避免純粹為了裝飾而使用顏色，因為它可能會引起混淆和分心。從黑白開始，當它能傳達意義時再引入顏色。
一個簡單有效的方法是將品牌顏色應用于文本鏈接和按鈕等交互元素。這有助于讓人們了解哪些是可交互的，哪些不是。盡量避免在非交互元素上使用品牌顏色。
你不需要給所有交互元素添加顏色，因為有些元素已經有了表示它們可交互的視覺線索。例如，下面示例中的卡片，無論有無藍色鏈接，都給人一種可以交互的感覺。
在我們的原始示例中，藍色的標題可能看起來很好，但它使文本看起來像是可以交互的。為了避免混淆，我們將非交互性標題的藍色移除。
我們還從其他非交互元素，如星級評價中移除藍色。這樣就更容易看出什么是可交互的，什么不是。
7.確保界面元素有3:1的對比度比例
對比度是兩種顏色之間的感知亮度差異的衡量。它以從1:1到21:1的比率來表示。例如，黑色背景上的黑色文本有最低的1:1對比度比例，而白色背景上的黑色文本有最高的21:1比例。有許多在線工具可以幫助你測量不同顏色之間的對比度比例。
為了確保視力受損的人能清晰地看到界面細節，應至少滿足網頁內容可訪問性指南（WCAG）2.1 AA級色彩對比度要求。這意味著用戶界面元素，如表單字段和按鈕，需要有至少3:1的對比度比例。
在我們的例子中，箭頭圖標的對比度太低。在圖標上加上陰影，并在圖像的上方第三部分上添加漸變疊加層，可以使圖標獲得足夠的3:1對比度，無論它處于什么樣的圖像上。
原始示例中的主按鈕對比度也過低。我們在之前解決視覺層次問題時已經修復了它，但在這里也值得一提。
低對比度按鈕的風險在于，低視力的人可能無法識別它是一個按鈕，因為他們看不見按鈕的形狀。將按鈕的對比度比率提高到3:1以上，使按鈕具有可訪問性，同時也有助于修正視覺層次。
將箭頭和按鈕的對比度提高到3:1以上，我們得到了以下設計。我們正在一點一點地接近目標，但還有更多問題需要解決。
8.確保文本有4.5:1的對比度比例
為了確保視力受損的人能清楚地閱讀文本，需要滿足以下WCAG 2.1 AA級對比度要求：
- 小文本（18px及以下）需要最小4.5:1的對比度。
- 大文本（以上粗體18px或以上常規體24px）需要最小3:1的對比度。
- 在我們的例子中，照片數量元素中的小文本對比度不足。我們通過增加灰色容器的不透明度并添加文本陰影，將對比度比率提高到4.5:1以上。
位置文本的對比度也太低。細的字體權重使其更難閱讀。使用更深的灰色有助于使文本更易于訪問。我們稍后將對文本進行進一步的更新，以提高其質量。
9.不要僅依賴顏色作為指示器
有許多不同類型的色盲，主要影響男性。通常，色盲的人在區分紅色和綠色方面有困難，但有些人根本無法看到任何顏色。 為了確保界面對色盲者可訪問，你不能僅依賴顏色來傳達意義或區分視覺元素。你需要使用額外的視覺線索來區分界面元素。
在我們的示例中，藍色用于“評論”文本，以表示它是一個鏈接。如果移除顏色，鏈接文本看起來和其他文本一樣，所以色盲者無法識別它是一個鏈接。在缺少顏色的情況下，給鏈接文本加上下劃線，清晰地區分出它和其他文本的差異。
11.使用單一的無襯線字體
字體是一組具有相似風格或美學的相關字體。Helvetica就是一個字體的例子。字體是字體中的變化，如權重或大小。例如，Helvetica粗體和Helvetica常規體是Helvetica字體內的兩種不同字體。 在界面設計中，使用單一的無襯線字體是最安全的，因為它們通常最具可讀性，中性，并且簡潔。
在我們的示例中，標題使用了一個詳細的有襯線字體，這有點難以閱讀，對一些人可能會分散注意力。它還具有可能與這個短租物業應用中的一些照片不匹配的個性。使用無襯線字體進行簡化可以幫助提高可用性和美學。
12.使用具有較高小寫字母的字體
尋找具有較高小寫字母和更大字母間距的字體，因為它們通常在小尺寸下更易讀。字體中小寫字母的高度被稱為 x-height。
我們的示例使用的是Gill Sans字體，這個字體 x-height 相對較低。將字體更改為 x-height, 更大的字體，如 Lato，有助于提高可讀性。
這是將我們的示例中的字體從Gill Sans更改為Lato后的效果。
12.限制大寫字母的使用
除非你在向人們大聲喊叫，否則沒有多少有效的理由使用大寫字母。因為大寫字母顯得很吵鬧，并且閱讀起來困難。
當你閱讀時，你看的是單詞的形狀，而不是每個字母。這種形狀幫助你更快地識別單詞。然而，全部大寫的單詞都有相同的矩形形狀，這迫使你逐個閱讀每個字母。
在我們的示例中，位置文本使用了大寫字母。將其改為句首大寫的句子格式，即只有第一個單詞和專有名詞（人名、地名或事物名稱）首字母大寫，有助于提高可讀性。
13.只使用常規和粗體字重
僅僅因為一個字體家族提供了多種字重，并不意味著你需要在設計中使用所有這些字重。過多地使用不同的字重會給界面增加噪音和雜亂感。這也會使得保持字重的一致性變得更加困難。
通過僅使用常規和粗體字重，使你的設計系統簡潔明了。
快速使用提示：
- 使用粗體字重來強調標題。
- 使用常規字重來呈現其他較小的文本。
- 如果你決定使用非常細或非常粗的字重，請將其保留給標題和較大的文本，因為在較小的尺寸上閱讀可能會困難。
在我們的例子中，位置文本使用了較輕的字重。即使我們將對比度提高到了超過所需的4.5:1的對比度比例，細小的字符仍然可能對一些人來說難以閱讀。將字重增加到常規字重有助于提高可讀性并簡化設計。
14.避免使用純黑色文本
在UI設計中，通常最好避免使用純黑色，因為它與白色之間具有非常高的對比度。這種高對比度可能導致閱讀文本時眼睛疲勞和不適。
黑色的顏色亮度為0%，而白色的顏色亮度為100%。顏色亮度的巨大差異使得我們的眼睛工作更加艱難。在白色背景下，避免使用純黑色是最安全的選擇，可以選擇使用深灰色。
在我們的例子中，純黑色在多個元素上使用。將其改為深灰色有助于提高可讀性。在之前的視覺層次中，我們注意到屬性描述文本過于突出。為了確保界面元素按重要性的順序呈現，我們使用較淺的灰色來降低屬性描述文本的突出性。
15.左對齊文本
英語從左到右閱讀，向下以F形的模式。因此，為了最佳可讀性，最好保持文本左對齊。對于較長的正文文本，最好避免居中對齊或兩端對齊的文本。這種對齊方式更難閱讀，尤其對于認知障礙的人來說。
居中對齊適用于標題和短文本，因為可以快速閱讀。然而，居中對齊會使較長的正文文本更難閱讀，因為每行的起始點不斷變化。你的眼睛需要更努力地找到每行的起始點。
在我們的例子中，屬性描述文本采用了居中對齊。將文本左對齊可以提高可讀性，并且與上方左對齊的文本保持一致。
16.正文文本的行高應至少為1.5倍
行高是兩行文本之間的垂直距離。行與行之間的間距有助于避免人們重讀同一行文本。它也使閱讀更加舒適和輕松。
為了可訪問性和可讀性，特別是對于較長的正文文本，請確保行高至少為1.5倍（150%）。將行高保持在1.5至2之間通常效果良好。
在我們的例子中，行高僅為1（100%）。將行高增加到1.6（160%）有助于提高可讀性。
修復上面的原始圖
通過一些簡單而強大的UI設計指南，我們快速找到并修復了我們示例設計中的許多問題。
