設計用戶界面絕非易事。布局、間距、字體和顏色的選擇數不勝數，很容易讓人不知所措。而當你考慮可用性、可訪問性和用戶心理等因素時，挑戰只會越來越大。
但好消息是，UI 設計其實沒那么復雜。從事產品設計師二十多年，我發現我的大部分視覺和交互設計決策都遵循一套清晰的邏輯準則。這些準則并非源于藝術天賦或直覺，而是直截了當的指導原則。
當然，創意天賦固然有用，但很多讓界面直觀、包容、賞心悅目的元素絕對是可以學習的。擁有結構化的方法能讓你做出明智、一致的設計選擇。如果沒有它，你基本上只能依靠反復試驗來讓事情“看起來正確”。
最好的學習方法是什么？實踐出真知。那就讓我們開始運用一些 UI 設計技巧吧。所有設計技巧都來自我的《實用 UI 設計》一書。
以下設計是一個社區博客平臺的個人資料頁面。第一個示例是原始設計。第二個示例是快速應用一些邏輯驅動的 UI 設計技巧的結果。
即使你沒有太多的 UI 設計經驗，你大概也能看出最初的設計感覺不太“對勁”。這是因為它包含許多設計缺陷，可能會對可用性產生負面影響。你可能已經發現了其中一些。
現在，讓我們逐步了解改進原始設計的過程，并使用這些 UI 設計技巧逐步解決每個問題：
界面元素之間的間距大小應取決于元素之間的關聯程度。關聯程度越高的元素通常應該靠得更近，以顯示它們的關聯性。不相關的元素之間應留出更多空間來分隔。
以這種方式使用間距是將信息拆分成更小組別的最有效方法之一。如果你將每個組想象成一個矩形，你會開始注意到界面是由許多大矩形內嵌的小矩形組成的。首先在最內層的矩形上應用較小的間距，然后向外逐漸增加矩形之間的間距。
確定界面元素之間的理想間距可能是一項令人沮喪且耗時的任務。有無數種選項可供選擇。與其一次一個像素地反復嘗試，不如創建一組簡單的預定義間距選項，以便更快地做出決策。
設置簡單 T 恤尺寸的間距選項，以 8 點為增量。這也稱為使用 8 點網格，因為所有界面元素最終都會與一系列以 8 點為間隔的垂直和水平輔助線對齊。對于更詳細的界面，您可以使用 4 點為增量，以便更好地控制。
與排版比例尺類似，間距選項應該隨著元素尺寸的增大而相應增大。這可以確保間距與較大的界面元素成比例。
在我們的示例中，無論矩形之間的關聯程度如何，它們之間都只使用了預定義的超小（8pt）和小（16pt）間距選項。這會導致設計看起來雜亂、擠壓，難以理解。根據元素之間的關聯程度增加間距有助于清晰地區分和分組內容。
以下是應用預定義間距選項之前和之后的示例。
對比度是衡量兩種顏色之間感知亮度差異的指標。它以 1:1 到 21:1 之間的比例表示。例如，黑色背景上的黑色文本對比度最低，為 1:1；而白色背景上的黑色文本對比度最高，為 21:1。有很多工具和Figma 插件可以幫助你測量色彩對比度，我最喜歡的是Web AIM 在線對比度檢查工具和Figma Contrast 插件。
為了確保視障人士能夠清晰地查看界面細節，請至少滿足Web 內容無障礙指南 (WCAG) 2.1 AA 級色彩對比度要求。這意味著用戶界面元素（例如表單字段和按鈕）的對比度至少需要達到 3:1。
在我們的示例中，圖標和按鈕的對比度太低。低對比度按鈕的風險在于，視力較差的用戶可能無法識別它們是按鈕，因為他們看不清按鈕的形狀。為按鈕添加對比度足夠的邊框，可以提高可訪問性。此外，按鈕的淺灰色背景填充也被移除，這樣人們就不會誤認為它們處于禁用狀態或非活動狀態。圖標的低對比度問題可以通過使用深灰色輕松解決。
對于大多數網站或應用項目，您需要設置三個按鈕權重來指示操作的重要性：主要、次要和第三級。根據界面的復雜程度，您可能還需要較小或較大的按鈕尺寸。
以下按鈕樣式熟悉易用，并且具有清晰的視覺層次，不依賴于單一的顏色。它們并非設計按鈕樣式的唯一方法，但卻是一種安全的選擇。了解更多按鈕設計技巧，避免常見錯誤。
主按鈕的目的是突出顯示界面上最重要的操作。這有助于人們了解下一步該做什么才能完成他們的任務。
使用主按鈕的指南：
在我們的例子中，我們假設“關注”操作是最重要的，并將其作為主要按鈕。
與大目標相比，小目標更難點擊或觸摸。對于運動控制能力受損的人，或者單手用拇指握住手機的人來說尤其如此。
嘗試并遵循以下準則，以確保按鈕（和其他交互元素）具有足夠的目標尺寸：
在我們的示例中，兩個按鈕的目標尺寸已經足夠，但仍有足夠的空間來加寬按鈕。由于還有空間，您可以加寬按鈕以增加其目標尺寸。
人們不會使用他們看不到的東西。將內容隱藏在交互式菜單后面是保持界面簡潔簡潔的便捷方法，但這存在風險，因為有些人可能會忽略這些內容。如果空間允許，請盡量確保重要的內容和操作在需要時清晰可見。
在我們的示例中，操作隱藏在交互式菜單中，以幫助簡化設計。雖然看起來簡潔明了，但有些人可能會忽略這些操作。由于需要留出空間來顯示“分享”和“收藏”這兩個操作，因此請將它們顯示出來，以確保用戶不會錯過。
讓大標題看起來更好的一個小技巧是減少字母間距（字母之間的距離）。減少字母間距的程度取決于字體和大小，但通常情況下，文本越大，字母間距的減少幅度就越大。
這是因為許多字體的設計初衷是供長篇正文在小字號下閱讀。它們被稱為“正文型”字體，字母間距較大，以便在小字號下更易辨認。對于“展示型”字體，您可能不需要減小字母間距，因為它們的設計初衷是供大字號下閱讀，并且通常字母間距較小。
在我們的例子中，人名的字母間距減小了，以提高美觀度。
不要僅僅依靠顏色來傳達含義或區分視覺元素，因為視力低下或色盲的人可能無法看到指示符。請使用其他視覺提示來區分界面元素。
在我們的示例中，有兩個地方可能會令人困惑。讓我們把它們解釋得更清楚一些。
如果您查看文章列表上方的 3 個標簽頁，可能不太容易看出“文章”是被選中的標簽頁。這是因為標簽頁的顏色略有不同，以指示被選中。在選中的標簽頁上添加下劃線有助于使其更清晰。
同樣，在底部導航中，我們采用了微妙的顏色變化來區分所選圖標和其他圖標。為了更加明顯，所選圖標被填充了顏色。
使用的對齊類型越多（左對齊、右對齊或居中），界面看起來就越復雜、越混亂。我們的眼睛在移動時會被迫更加費力地跟隨每種對齊方式。當界面中的一個小組件或部分使用多種不同的對齊方式時，這一點尤為突出。
堅持單一對齊方式（或盡可能少的對齊方式）有助于簡化界面，使其看起來更整潔。
在我們的示例中，標簽頁居中對齊，而頁面上的大多數其他元素則左對齊。這種混合對齊方式增加了不必要的復雜性，導致認知負荷（使用界面所需的腦力）略有增加。將標簽頁左對齊有助于保持界面整潔。
為了幫助確保有視力障礙的人能夠清晰地閱讀文本，它需要滿足以下 WCAG 2.1 AA 級對比度要求：
在我們的示例中，未選中選項卡上的小文本對比度不足。使用較深的灰色可以提供足夠的對比度。
將信息分解成更小的相關元素組有助于構建和組織界面，讓人們更快、更容易地理解和記憶。
您可以使用以下方法對相關元素進行分組：
使用容器是分組界面元素最有效的視覺提示，但它可能會造成不必要的混亂。尋找機會使用其他分組方法，它們通常更巧妙，有助于簡化設計。
在我們的示例中，每篇文章周圍的容器是不必要的，因為已經使用了多種其他分組方法。移除容器還可以為內容騰出更多空間。
雖然某種字體有很多種粗細，但這并不意味著你需要在 UI 設計中全部使用它們。使用過多不同的粗細會給界面帶來干擾和混亂，也會使統一使用每種粗細變得更加困難。
僅使用常規和粗體字重，保持設計系統簡潔明了。某些字體提供半粗體選項，如果粗體字重過重，可以使用半粗體代替。
快速使用提示：
在我們的示例中，文章詳情使用了三種不同的字體粗細。即使“超細”和“細”字體粗細的對比度高于所需的 4.5:1，但某些用戶仍然可能難以閱讀這些字符。將字體粗細增加到“常規”有助于提高可讀性并簡化設計。文章標題使用“半粗體”有助于使其脫穎而出。
僅使用兩種字體粗細即可得到以下設計。我們正在應用 UI 設計技巧，目前進展順利，但仍有一些問題需要解決。
UI 設計的一致性意味著相似的元素在外觀和工作方式上具有相似性。無論是在您的產品內部，還是與其他成熟產品相比，這都應該如此。這種可預測的功能可以提高可用性并減少錯誤，因為人們無需不斷學習其工作原理。
在我們的示例中，每篇文章的照片都有尖角，與按鈕和圖標的柔和圓角不匹配。將照片的角弄圓有助于創建更一致的視覺語言。你可能認為這樣的小細節不會帶來太大的變化，但它們加在一起，就能讓設計看起來“恰到好處”。
極簡并不意味著簡單。設計師傾向于極簡界面，因為它們看起來美觀簡潔。極簡界面的元素和樣式較少，但理解和使用起來并不一定簡單。
極簡界面通常會顯得模糊或令人困惑，因為它們缺乏良好可用性所需的關鍵細節。簡化不僅僅是減少。刪除或隱藏太多內容可能會損害可用性。你需要確保沒有刪除關鍵信息或細節。
在我們的示例中，底部導航圖標看起來簡潔明了，但它們的含義清晰嗎？可能并非每個人都清楚。在圖標上添加文本標簽有助于確保人們能夠理解它們的含義，尤其是那些使用屏幕閱讀器（一種使用語音或盲文向盲人描述界面的軟件）的用戶。
當將圖標與文本配對時，請嘗試確保它們具有相似的視覺突出性，以獲得更加平衡和有凝聚力的外觀。
在我們的示例中，底部導航欄中的圖標和文字略微不平衡。圖標和文字顏色相同，但圖標更粗更大，使其更加突出。將文字加深可以增強其突出度，使其與圖標保持平衡。將文字對比度提高到至少 4.5:1 也能確保視力不佳的用戶也能輕松閱讀。
僅憑一些簡單的 UI 設計技巧，我們就能夠識別并解決示例界面中的一系列問題。當然，您可以根據需要進一步調整視覺風格，使其更貼合特定的品牌個性。不過，在本例中，我們專注于確保基本原則的正確性。
我希望你開始明白，UI 設計并不需要讓人感到不知所措。雖然它有時看起來像是一門只有天賦異稟的人才能掌握的神秘藝術，但許多優秀的界面設計都植根于清晰、合乎邏輯的指導原則，就像你在這里學到的那些一樣。
依靠客觀指導而非主觀意見，可以更輕松（也更快速）地設計出直觀、易用且視覺精美的界面。你越是練習這些 UI 設計技巧，它們就越能自然而然地融入你的設計流程。以它們為基礎，勇于探索、實驗，并在此基礎上進一步激發你的創造力。
蘭亭妙微（藍藍設計）m.ocunn.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
