這篇文章介紹了一些關(guān)于用戶界面設(shè)計(jì)的實(shí)用技巧，幫助設(shè)計(jì)師們更好地設(shè)計(jì)直觀、易用、美觀的界面。首先，通過(guò)利用空間將相關(guān)元素進(jìn)行分組，可以更好地組織和結(jié)構(gòu)化界面，提升用戶理解和記憶的效果。其次，保持一致性是關(guān)鍵，確保相似的元素在外觀和功能上一致，提高可用性和減少錯(cuò)誤。另外，相似的元素應(yīng)具有相似的功能，避免產(chǎn)生混淆。清晰的視覺(jué)層次有助于快速掃描信息和凸顯重要元素。同時(shí)，減少不必要的樣式和信息可以簡(jiǎn)化界面，降低認(rèn)知負(fù)荷。使用顏色時(shí)應(yīng)有目的地使用，避免純粹為裝飾而使用，特別是需要注意色盲用戶的可訪問(wèn)性。選擇單一無(wú)襯線字體，并使用具有較高小寫(xiě)字母和適當(dāng)行高的字體，提升可讀性。同時(shí)，避免過(guò)度使用大寫(xiě)字母，因?yàn)樗鼈冸y以閱讀。此外，避免使用純黑色文本，采用較暗的灰色可以提高可讀性并減少眼部疲勞。最后，將文本左對(duì)齊，并確保正文文本具有適當(dāng)?shù)男懈撸鰪?qiáng)可讀性。

這些技巧的目標(biāo)是通過(guò)使用邏輯和客觀的規(guī)則，而非主觀的意見(jiàn)，來(lái)簡(jiǎn)化UI設(shè)計(jì)過(guò)程，使其更加高效、直觀和易用。

(資料圖)

總的來(lái)說(shuō)，這篇文章提供了一些寶貴的UI設(shè)計(jì)技巧，對(duì)于希望提升設(shè)計(jì)技能和創(chuàng)造出出色用戶體驗(yàn)的設(shè)計(jì)師們來(lái)說(shuō)，是一份有價(jià)值的參考資料。

~~ 下面是正文

用戶界面設(shè)計(jì)是一項(xiàng)困難的任務(wù)。面對(duì)眾多的布局、間距、排版和顏色選項(xiàng)，做出設(shè)計(jì)決策可能會(huì)令人感到壓力山大。當(dāng)你再加上可用性、可訪問(wèn)性和心理學(xué)因素，任務(wù)難度進(jìn)一步增加。

幸運(yùn)的是，UI設(shè)計(jì)并非總是如此艱難。在近二十年的產(chǎn)品設(shè)計(jì)工作中，我意識(shí)到我大部分的視覺(jué)和交互設(shè)計(jì)決策都是受一套邏輯規(guī)則的指導(dǎo)。這不是藝術(shù)的熱情或神奇的直覺(jué)，只是簡(jiǎn)單的規(guī)則。

擁有一套邏輯規(guī)則可以幫助你高效地做出明智的設(shè)計(jì)決策。沒(méi)有邏輯體系，你只能憑直覺(jué)隨意調(diào)整，直到它看起來(lái)美觀。

我熱愛(ài)規(guī)則和邏輯，但設(shè)計(jì)決策很少是非黑即白的。與其將以下的建議視為必須遵守的嚴(yán)格規(guī)則，不如把它們看作是在大多數(shù)情況下都能奏效的有用指南。

學(xué)習(xí)最快的方式就是動(dòng)手實(shí)踐，所以讓我們開(kāi)始吧。

使用邏輯規(guī)則來(lái)修復(fù)這個(gè)例子

以下兩個(gè)設(shè)計(jì)是短期房產(chǎn)租賃應(yīng)用的房產(chǎn)詳情頁(yè)面。第一個(gè)是原始設(shè)計(jì)。第二個(gè)是應(yīng)用了一些邏輯規(guī)則或指南后的結(jié)果。

即使沒(méi)有太多的視覺(jué)或交互設(shè)計(jì)經(jīng)驗(yàn)，你可能也會(huì)注意到原始設(shè)計(jì)感覺(jué)混亂、復(fù)雜，并且難以使用。這是因?yàn)樗嗽S多可能對(duì)可用性構(gòu)成風(fēng)險(xiǎn)的問(wèn)題設(shè)計(jì)細(xì)節(jié)。也許你已經(jīng)發(fā)現(xiàn)了其中的一些？

我們使用以下的邏輯規(guī)則或指南，一次解決原始設(shè)計(jì)的一個(gè)問(wèn)題：

使用空間來(lái)組合相關(guān)元素保持一致性確保看起來(lái)相似的元素功能相似創(chuàng)建清晰的視覺(jué)層次移除不必要的樣式有目的地使用顏色確保界面元素的對(duì)比度為3:1確保文字的對(duì)比度為4.5:1不要僅依賴顏色作為指示器使用單一的無(wú)襯線字體使用小寫(xiě)字母較高的字體限制大寫(xiě)字母的使用只使用常規(guī)和粗體字重避免使用純黑色的文字左對(duì)齊文字正文行間距至少為1.51. 使用空間將相關(guān)元素分組

將信息分解為相關(guān)元素的小組可以幫助結(jié)構(gòu)化和組織界面，這讓人們更快、更容易地理解和記憶。

你可以通過(guò)以下方法將相關(guān)元素分組：

將相關(guān)元素放在同一個(gè)容器中將相關(guān)元素空間上靠近使相關(guān)元素看起來(lái)相似在一條連續(xù)線上對(duì)齊相關(guān)元素

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

特別是使用空間，是將相關(guān)元素分組的一種非常有效且簡(jiǎn)單的方式。你還可以結(jié)合分組方法，以更清楚地展示分組。

在我們的例子中，內(nèi)容之間缺乏空間使得設(shè)計(jì)看起來(lái)混亂且難以理解。增加間距有助于清晰地將內(nèi)容分組，使其更有組織性，更容易理解。

2.保持一致性

在UI設(shè)計(jì)中，一致性意味著相似的元素看起來(lái)并且工作方式相似。無(wú)論是在你的產(chǎn)品內(nèi)部，還是與其他已經(jīng)建立良好的產(chǎn)品相比，都應(yīng)該如此。這種可預(yù)見(jiàn)的功能性能提高可用性并減少錯(cuò)誤，因?yàn)槿藗儾恍枰粩嗟貙W(xué)習(xí)事物的工作原理。

在我們的例子中，圖標(biāo)的樣式并不一致，有些是填充的，有些則不是。這可能會(huì)使一些人感到困惑，因?yàn)樘畛涞膱D標(biāo)通常表示一個(gè)元素被選中了。用2pt的筆觸寬度和圓角勾勒出所有圖標(biāo)可以提高一致性，并賦予每個(gè)圖標(biāo)相似的視覺(jué)重量。

圖標(biāo)上也添加了文字標(biāo)簽，以幫助確保人們可以理解它們的含義，特別是那些使用屏幕閱讀器的人（屏幕閱讀器是一種用語(yǔ)音或盲文描述界面的軟件，供視力障礙者使用）。

3.確保看起來(lái)相似的元素功能相似

如果元素看起來(lái)相似，人們會(huì)期望它們以相似的方式工作。所以，請(qǐng)盡量確保你對(duì)具有相同功能的元素使用一致的視覺(jué)處理。反之，嘗試確保具有不同功能的元素看起來(lái)不同。

在我們的例子中，圖標(biāo)容器的視覺(jué)樣式與“立即預(yù)訂”按鈕相似。這使它們看起來(lái)像是可以交互的，盡管它們并非如此。移除圖標(biāo)的藍(lán)色和按鈕樣式有助于避免它們被誤認(rèn)為是可以交互的元素。

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

界面中的所有信息并非都有相同的重要性。你的目標(biāo)應(yīng)該是按照重要性的順序展示信息，使更重要的元素顯得更突出。

清晰的重要性順序，或者說(shuō)視覺(jué)層次，有助于人們快速掃描信息并關(guān)注感興趣的區(qū)域。它也通過(guò)創(chuàng)造一種秩序感來(lái)提升美感。你可以使用大小、顏色、對(duì)比度、間距、位置和深度的變化來(lái)創(chuàng)建清晰的視覺(jué)層次。

以下是一個(gè)沒(méi)有明確視覺(jué)層次的網(wǎng)站英雄橫幅示例，后面是一個(gè)按重要性順序明確展示元素的示例。

一個(gè)快速簡(jiǎn)便的檢測(cè)你的視覺(jué)層次是否清晰的方法是使用"模糊測(cè)試"。只需瞇起你的眼睛看你的設(shè)計(jì)，或者你可以離屏幕遠(yuǎn)一些，或模糊你的設(shè)計(jì)。你應(yīng)該仍然能夠識(shí)別出哪些是最重要的元素，并且能夠識(shí)別出界面的用途。

讓我們把模糊測(cè)試應(yīng)用到我們的例子上。我們可以看到有多個(gè)元素的突出程度相當(dāng)，競(jìng)相吸引注意力。與此同時(shí)，左下角的主要?jiǎng)幼饕稽c(diǎn)也不突出。

通常情況下，主要?jiǎng)幼鲬?yīng)該是界面上最突出的元素。給它一個(gè)高對(duì)比度的背景顏色和粗體字重可以幫助實(shí)現(xiàn)這一點(diǎn)。這也修復(fù)了一個(gè)關(guān)于低對(duì)比度按鈕的可訪問(wèn)性問(wèn)題，我們稍后會(huì)深入研究這個(gè)問(wèn)題。

將模糊測(cè)試應(yīng)用到更新的設(shè)計(jì)上，主要?jiǎng)幼黠@然是最突出的元素。

視覺(jué)層次現(xiàn)在更清晰了，但還有改進(jìn)的空間。例如，與其重要性相比，正文文本塊的突出程度仍然過(guò)高。我們稍后將學(xué)習(xí)一些快速的排版指南，這將有助于修正視覺(jué)層次。

5. 移除不必要的樣式

不必要的信息和視覺(jué)樣式可能會(huì)分散注意力，增加認(rèn)知負(fù)荷（使用界面所需的腦力）。避免不必要的線條、顏色、背景和動(dòng)畫(huà)，可以創(chuàng)建一個(gè)更簡(jiǎn)潔、更聚焦的界面。

在我們的例子中，圖片周?chē)陌咨臻g和邊框增加了不必要的視覺(jué)復(fù)雜性。它們并不需要傳達(dá)信息或分組元素，所以我們可以安全地移除它們，以簡(jiǎn)化設(shè)計(jì)。

6.有目的地使用顏色

有節(jié)制且有目的地使用顏色。盡量避免純粹為了裝飾而使用顏色，因?yàn)樗赡軙?huì)引起混淆和分心。從黑白開(kāi)始，當(dāng)它能傳達(dá)意義時(shí)再引入顏色。

一個(gè)簡(jiǎn)單有效的方法是將品牌顏色應(yīng)用于文本鏈接和按鈕等交互元素。這有助于讓人們了解哪些是可交互的，哪些不是。盡量避免在非交互元素上使用品牌顏色。

你不需要給所有交互元素添加顏色，因?yàn)橛行┰匾呀?jīng)有了表示它們可交互的視覺(jué)線索。例如，下面示例中的卡片，無(wú)論有無(wú)藍(lán)色鏈接，都給人一種可以交互的感覺(jué)。

在我們的原始示例中，藍(lán)色的標(biāo)題可能看起來(lái)很好，但它使文本看起來(lái)像是可以交互的。為了避免混淆，我們將非交互性標(biāo)題的藍(lán)色移除。

我們還從其他非交互元素，如星級(jí)評(píng)價(jià)中移除藍(lán)色。這樣就更容易看出什么是可交互的，什么不是。

7.確保界面元素有3:1的對(duì)比度比例

對(duì)比度是兩種顏色之間的感知亮度差異的衡量。它以從1:1到21:1的比率來(lái)表示。例如，黑色背景上的黑色文本有最低的1:1對(duì)比度比例，而白色背景上的黑色文本有最高的21:1比例。有許多在線工具可以幫助你測(cè)量不同顏色之間的對(duì)比度比例。

為了確保視力受損的人能清晰地看到界面細(xì)節(jié)，應(yīng)至少滿足網(wǎng)頁(yè)內(nèi)容可訪問(wèn)性指南（WCAG）2.1 AA級(jí)色彩對(duì)比度要求。這意味著用戶界面元素，如表單字段和按鈕，需要有至少3:1的對(duì)比度比例。

在我們的例子中，箭頭圖標(biāo)的對(duì)比度太低。在圖標(biāo)上加上陰影，并在圖像的上方第三部分上添加漸變疊加層，可以使圖標(biāo)獲得足夠的3:1對(duì)比度，無(wú)論它處于什么樣的圖像上。

原始示例中的主按鈕對(duì)比度也過(guò)低。我們?cè)谥敖鉀Q視覺(jué)層次問(wèn)題時(shí)已經(jīng)修復(fù)了它，但在這里也值得一提。

低對(duì)比度按鈕的風(fēng)險(xiǎn)在于，低視力的人可能無(wú)法識(shí)別它是一個(gè)按鈕，因?yàn)樗麄兛床灰?jiàn)按鈕的形狀。將按鈕的對(duì)比度比率提高到3:1以上，使按鈕具有可訪問(wèn)性，同時(shí)也有助于修正視覺(jué)層次。

將箭頭和按鈕的對(duì)比度提高到3:1以上，我們得到了以下設(shè)計(jì)。我們正在一點(diǎn)一點(diǎn)地接近目標(biāo)，但還有更多問(wèn)題需要解決。

8.確保文本有4.5:1的對(duì)比度比例

為了確保視力受損的人能清楚地閱讀文本，需要滿足以下WCAG 2.1 AA級(jí)對(duì)比度要求：

小文本（18px及以下）需要最小4.5:1的對(duì)比度。大文本（以上粗體18px或以上常規(guī)體24px）需要最小3:1的對(duì)比度。在我們的例子中，照片數(shù)量元素中的小文本對(duì)比度不足。我們通過(guò)增加灰色容器的不透明度并添加文本陰影，將對(duì)比度比率提高到4.5:1以上。

位置文本的對(duì)比度也太低。細(xì)的字體權(quán)重使其更難閱讀。使用更深的灰色有助于使文本更易于訪問(wèn)。我們稍后將對(duì)文本進(jìn)行進(jìn)一步的更新，以提高其質(zhì)量。

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

有許多不同類(lèi)型的色盲，主要影響男性。通常，色盲的人在區(qū)分紅色和綠色方面有困難，但有些人根本無(wú)法看到任何顏色。 為了確保界面對(duì)色盲者可訪問(wèn)，你不能僅依賴顏色來(lái)傳達(dá)意義或區(qū)分視覺(jué)元素。你需要使用額外的視覺(jué)線索來(lái)區(qū)分界面元素。

在我們的示例中，藍(lán)色用于“評(píng)論”文本，以表示它是一個(gè)鏈接。如果移除顏色，鏈接文本看起來(lái)和其他文本一樣，所以色盲者無(wú)法識(shí)別它是一個(gè)鏈接。在缺少顏色的情況下，給鏈接文本加上下劃線，清晰地區(qū)分出它和其他文本的差異。

11.使用單一的無(wú)襯線字體

字體是一組具有相似風(fēng)格或美學(xué)的相關(guān)字體。Helvetica就是一個(gè)字體的例子。字體是字體中的變化，如權(quán)重或大小。例如，Helvetica粗體和Helvetica常規(guī)體是Helvetica字體內(nèi)的兩種不同字體。 在界面設(shè)計(jì)中，使用單一的無(wú)襯線字體是最安全的，因?yàn)樗鼈兺ǔＷ罹呖勺x性，中性，并且簡(jiǎn)潔。

在我們的示例中，標(biāo)題使用了一個(gè)詳細(xì)的有襯線字體，這有點(diǎn)難以閱讀，對(duì)一些人可能會(huì)分散注意力。它還具有可能與這個(gè)短租物業(yè)應(yīng)用中的一些照片不匹配的個(gè)性。使用無(wú)襯線字體進(jìn)行簡(jiǎn)化可以幫助提高可用性和美學(xué)。

12.使用具有較高小寫(xiě)字母的字體

尋找具有較高小寫(xiě)字母和更大字母間距的字體，因?yàn)樗鼈兺ǔＴ谛〕叽缦赂鬃x。字體中小寫(xiě)字母的高度被稱(chēng)為x-height。

我們的示例使用的是Gill Sans字體，這個(gè)字體x-height相對(duì)較低。將字體更改為x-height, 更大的字體，如 Lato，有助于提高可讀性。

這是將我們的示例中的字體從Gill Sans更改為L(zhǎng)ato后的效果。

12.限制大寫(xiě)字母的使用

除非你在向人們大聲喊叫，否則沒(méi)有多少有效的理由使用大寫(xiě)字母。因?yàn)榇髮?xiě)字母顯得很吵鬧，并且閱讀起來(lái)困難。

當(dāng)你閱讀時(shí)，你看的是單詞的形狀，而不是每個(gè)字母。這種形狀幫助你更快地識(shí)別單詞。然而，全部大寫(xiě)的單詞都有相同的矩形形狀，這迫使你逐個(gè)閱讀每個(gè)字母。

在我們的示例中，位置文本使用了大寫(xiě)字母。將其改為句首大寫(xiě)的句子格式，即只有第一個(gè)單詞和專(zhuān)有名詞（人名、地名或事物名稱(chēng)）首字母大寫(xiě)，有助于提高可讀性。

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

僅僅因?yàn)橐粋€(gè)字體家族提供了多種字重，并不意味著你需要在設(shè)計(jì)中使用所有這些字重。過(guò)多地使用不同的字重會(huì)給界面增加噪音和雜亂感。這也會(huì)使得保持字重的一致性變得更加困難。

通過(guò)僅使用常規(guī)和粗體字重，使你的設(shè)計(jì)系統(tǒng)簡(jiǎn)潔明了。

快速使用提示：

使用粗體字重來(lái)強(qiáng)調(diào)標(biāo)題。使用常規(guī)字重來(lái)呈現(xiàn)其他較小的文本。如果你決定使用非常細(xì)或非常粗的字重，請(qǐng)將其保留給標(biāo)題和較大的文本，因?yàn)樵谳^小的尺寸上閱讀可能會(huì)困難。

在我們的例子中，位置文本使用了較輕的字重。即使我們將對(duì)比度提高到了超過(guò)所需的4.5:1的對(duì)比度比例，細(xì)小的字符仍然可能對(duì)一些人來(lái)說(shuō)難以閱讀。將字重增加到常規(guī)字重有助于提高可讀性并簡(jiǎn)化設(shè)計(jì)。

14.避免使用純黑色文本

在UI設(shè)計(jì)中，通常最好避免使用純黑色，因?yàn)樗c白色之間具有非常高的對(duì)比度。這種高對(duì)比度可能導(dǎo)致閱讀文本時(shí)眼睛疲勞和不適。

黑色的顏色亮度為0%，而白色的顏色亮度為100%。顏色亮度的巨大差異使得我們的眼睛工作更加艱難。在白色背景下，避免使用純黑色是最安全的選擇，可以選擇使用深灰色。

在我們的例子中，純黑色在多個(gè)元素上使用。將其改為深灰色有助于提高可讀性。在之前的視覺(jué)層次中，我們注意到屬性描述文本過(guò)于突出。為了確保界面元素按重要性的順序呈現(xiàn)，我們使用較淺的灰色來(lái)降低屬性描述文本的突出性。

15.左對(duì)齊文本

英語(yǔ)從左到右閱讀，向下以F形的模式。因此，為了最佳可讀性，最好保持文本左對(duì)齊。對(duì)于較長(zhǎng)的正文文本，最好避免居中對(duì)齊或兩端對(duì)齊的文本。這種對(duì)齊方式更難閱讀，尤其對(duì)于認(rèn)知障礙的人來(lái)說(shuō)。

居中對(duì)齊適用于標(biāo)題和短文本，因?yàn)榭梢钥焖匍喿x。然而，居中對(duì)齊會(huì)使較長(zhǎng)的正文文本更難閱讀，因?yàn)槊啃械钠鹗键c(diǎn)不斷變化。你的眼睛需要更努力地找到每行的起始點(diǎn)。

在我們的例子中，屬性描述文本采用了居中對(duì)齊。將文本左對(duì)齊可以提高可讀性，并且與上方左對(duì)齊的文本保持一致。

16.正文文本的行高應(yīng)至少為1.5倍

行高是兩行文本之間的垂直距離。行與行之間的間距有助于避免人們重讀同一行文本。它也使閱讀更加舒適和輕松。

為了可訪問(wèn)性和可讀性，特別是對(duì)于較長(zhǎng)的正文文本，請(qǐng)確保行高至少為1.5倍（150%）。將行高保持在1.5至2之間通常效果良好。

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

修復(fù)上面的原始圖

通過(guò)一些簡(jiǎn)單而強(qiáng)大的UI設(shè)計(jì)指南，我們快速找到并修復(fù)了我們示例設(shè)計(jì)中的許多問(wèn)題。

關(guān)鍵詞：