用戶(hù)界面設(shè)計(jì)很難。有這么多關(guān)于布局、間距、排版和顏色的選項(xiàng)可供選擇，做出設(shè)計(jì)決策可能會(huì)讓人不知所措。當(dāng)您將可用性、可訪(fǎng)問(wèn)性和心理學(xué)添加到組合中時(shí)，它會(huì)變得更加困難。

幸運(yùn)的是，UI 設(shè)計(jì)不必如此困難。在近 2 年的產(chǎn)品設(shè)計(jì)師工作中，我意識(shí)到我的大部分視覺(jué)和交互設(shè)計(jì)決策都受邏輯規(guī)則系統(tǒng)的約束。不是藝術(shù)天賦或神奇的直覺(jué)，只是簡(jiǎn)單的規(guī)則。

擁有一個(gè)邏輯規(guī)則系統(tǒng)可以幫助您有效地做出明智的設(shè)計(jì)決策。沒(méi)有邏輯系統(tǒng)，您只是根據(jù)直覺(jué)來(lái)移動(dòng)?xùn)|西，直到它看起來(lái)很漂亮。

我喜歡規(guī)則和邏輯，但設(shè)計(jì)決策很少是非黑即白的。與其必須遵守嚴(yán)格的規(guī)則，不如將以下建議視為在大多數(shù)情況下都能很好地發(fā)揮作用的有用指南。

最快的學(xué)習(xí)方法是邊做邊做，所以讓我們開(kāi)始吧。

讓我們使用邏輯規(guī)則修復(fù)這個(gè)例子

以下2個(gè)設(shè)計(jì)是針對(duì)短租房app的房源詳情頁(yè)。第一個(gè)是原始設(shè)計(jì)。第二個(gè)是應(yīng)用一些邏輯規(guī)則或準(zhǔn)則的結(jié)果。

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

讓我們使用以下邏輯規(guī)則或準(zhǔn)則一次解決原始設(shè)計(jì)中的問(wèn)題：

1. 使用空格對(duì)相關(guān)元素進(jìn)行分組
2. 始終如一
3. 確保外觀相似的元素功能相似
4. 創(chuàng)建清晰的視覺(jué)層次
5. 刪除不必要的樣式
6. 有目的地使用顏色
7. 確保界面元素具有 3:1 的對(duì)比度
8. 確保文本具有 4.5:1 的對(duì)比度
9. 不要僅僅依靠顏色作為指標(biāo)
10. 使用單一的無(wú)襯線(xiàn)字體
11. 使用帶有較高小寫(xiě)字母的字體
12. 限制大寫(xiě)字母的使用
13. 僅使用常規(guī)和粗體字重
14. 避免純黑色文本
15. 左對(duì)齊文本
16. 正文至少使用 1.5 倍的行高

1.使用空格對(duì)相關(guān)元素進(jìn)行分組

將信息分解成更小的相關(guān)元素組有助于構(gòu)建和組織界面。這使得人們更快更容易地理解和記憶。

您可以使用以下方法對(duì)相關(guān)元素進(jìn)行分組：

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

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

特別是使用空間是對(duì)相關(guān)元素進(jìn)行分組的一種非常有效和簡(jiǎn)單的方法。您還可以組合分組方法以幫助更清晰地顯示分組。

在我們的示例中，內(nèi)容之間缺乏空間使設(shè)計(jì)看起來(lái)雜亂無(wú)章且難以理解。增加間距有助于清楚地對(duì)內(nèi)容進(jìn)行分組，使其更有條理且更易于理解。

2. 保持一致

UI 設(shè)計(jì)的一致性意味著相似的元素以相似的方式看起來(lái)和工作。在您的產(chǎn)品中以及與其他成熟產(chǎn)品相比時(shí)，這應(yīng)該是正確的。這種可預(yù)測(cè)的功能提高了可用性并減少了錯(cuò)誤，因?yàn)槿藗儾恍枰^續(xù)學(xué)習(xí)事物的工作原理。

在我們的例子中，圖標(biāo)樣式是不一致的，因?yàn)橛行┦翘畛涞模行┎皇?。這可能會(huì)讓一些人感到困惑，因?yàn)樘畛鋱D標(biāo)通常表示選擇了一個(gè)元素。使用 2pt 筆劃粗細(xì)和圓角勾勒出所有圖標(biāo)的輪廓可以提高一致性并為每個(gè)圖標(biāo)提供相似的視覺(jué)重量。

文本標(biāo)簽也被添加到圖標(biāo)上，以幫助確保人們能夠理解他們的意思，尤其是那些使用屏幕閱讀器的人（描述界面的軟件，使用語(yǔ)音或盲文，給看不見(jiàn)的人）。

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

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

在我們的示例中，圖標(biāo)容器具有與“立即預(yù)訂”按鈕相似的視覺(jué)風(fēng)格。這使它們看起來(lái)具有交互性，即使它們不是。從圖標(biāo)中移除藍(lán)色和按鈕樣式有助于避免它們被誤認(rèn)為是交互元素。

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

并非界面中的所有信息都具有相同的重要性。旨在通過(guò)使更重要的元素看起來(lái)更突出來(lái)按重要性順序呈現(xiàn)信息。

清晰的重要性順序或視覺(jué)層次結(jié)構(gòu)可幫助人們快速掃描信息并關(guān)注感興趣的領(lǐng)域。它還通過(guò)創(chuàng)造一種秩序感來(lái)提高美感。您可以使用大小、顏色、對(duì)比度、間距、位置和深度的變化來(lái)創(chuàng)建清晰的視覺(jué)層次結(jié)構(gòu)。

這是一個(gè)網(wǎng)站英雄橫幅的示例，沒(méi)有清晰的視覺(jué)層次結(jié)構(gòu)，后面是一個(gè)按重要性順序清楚顯示元素的橫幅。

測(cè)試視覺(jué)層次是否清晰的一種快速簡(jiǎn)便的方法是使用斜視測(cè)試。只需瞇起眼睛，看看你的設(shè)計(jì)?；蛘?，您可以遠(yuǎn)離屏幕或模糊您的設(shè)計(jì)。您仍然應(yīng)該能夠分辨出最重要的元素是什么，并認(rèn)識(shí)到界面的用途。

讓我們將斜視測(cè)試應(yīng)用于我們的示例。我們可以看到，有多個(gè)具有相似顯著性的元素在爭(zhēng)奪注意力。同時(shí)，左下角的主要?jiǎng)幼饕稽c(diǎn)也不突出。

主要操作通常應(yīng)該是界面上最突出的元素。給它一個(gè)高對(duì)比度的背景顏色和粗體字體有助于實(shí)現(xiàn)這一點(diǎn)。這也解決了低對(duì)比度按鈕的可訪(fǎng)問(wèn)性問(wèn)題，我們稍后會(huì)研究這個(gè)問(wèn)題。

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

視覺(jué)層次結(jié)構(gòu)現(xiàn)在更加清晰，但仍有改進(jìn)的空間。例如，相對(duì)于其重要性級(jí)別，正文塊仍然過(guò)于突出。我們將很快學(xué)習(xí)一些快速排版指南，這將有助于糾正視覺(jué)層次結(jié)構(gòu)。

5.刪除不必要的樣式

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

在我們的示例中，圖像周?chē)目瞻缀瓦吙蛟黾恿瞬槐匾囊曈X(jué)復(fù)雜性。它們不需要傳達(dá)信息或分組元素，因此我們可以安全地刪除它們以簡(jiǎn)化設(shè)計(jì)。

6.有目的地使用顏色

有目的地謹(jǐn)慎使用顏色。盡量避免使用純粹用于裝飾的顏色，因?yàn)樗赡軙?huì)造成混淆和分散注意力。從黑色和白色開(kāi)始，在傳達(dá)意義的地方引入顏色。

一種簡(jiǎn)單有效的方法是將品牌顏色應(yīng)用于文本鏈接和按鈕等交互元素。這有助于教會(huì)人們什么是互動(dòng)的，什么不是。盡量避免在非交互元素上使用品牌顏色。

您不需要為所有交互元素添加顏色，因?yàn)橛行┰匾呀?jīng)具有指示它們是交互的視覺(jué)提示。例如，下例中的卡片仍然具有交互性，無(wú)論是否帶有藍(lán)色鏈接。

在我們最初的示例中，藍(lán)色標(biāo)題可能看起來(lái)不錯(cuò)，但它使文本看起來(lái)具有交互性。為了幫助避免混淆，我們從標(biāo)題中刪除了藍(lán)色，因?yàn)樗皇墙换ナ降摹?/span>

我們還從其他非交互元素（如星級(jí)）中刪除了藍(lán)色。這樣可以更輕松地查看哪些是交互式的，哪些不是。

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

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

為了幫助確保有視力障礙的人可以清楚地看到界面細(xì)節(jié)，旨在至少滿(mǎn)足Web 內(nèi)容可訪(fǎng)問(wèn)性指南 (WCAG) 2.1 級(jí) AA 顏色對(duì)比度要求。這意味著用戶(hù)界面元素，如表單字段和按鈕，需要至少有 3:1 的對(duì)比度。

在我們的示例中，箭頭圖標(biāo)對(duì)比度太低。向圖標(biāo)添加陰影并在圖像的頂部三分之一處添加漸變疊加層可使圖標(biāo)具有足夠的 3:1 對(duì)比度，無(wú)論它位于哪個(gè)圖像上。

原始示例中的主按鈕對(duì)比度也太低。我們之前在解決視覺(jué)層次結(jié)構(gòu)時(shí)修復(fù)了它，但這里也值得一提。

低對(duì)比度按鈕的風(fēng)險(xiǎn)在于視力不佳的人可能無(wú)法將其識(shí)別為按鈕，因?yàn)樗麄兛床坏桨粹o的形狀。將按鈕對(duì)比度提高到 3:1 以上可以使按鈕易于訪(fǎng)問(wèn)，也有助于糾正視覺(jué)層次結(jié)構(gòu)。

將箭頭和按鈕的對(duì)比度增加到 3:1 以上的比例可以得到以下設(shè)計(jì)。我們正在一點(diǎn)一點(diǎn)地到達(dá)那里，但我們還有更多問(wèn)題需要解決。

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

為了幫助確保有視力障礙的人可以清楚地閱讀文本，它需要滿(mǎn)足以下 WCAG 2.1 級(jí) AA 對(duì)比度要求：

• 小文本（18 像素及以下）需要至少 4.5:1 的對(duì)比度。
• 大文本（大于 18 像素且粗體或大于 24 像素且具有常規(guī)粗細(xì)）需要至少 3:1 的對(duì)比度。

在我們的示例中，照片計(jì)數(shù)元素中的小文本對(duì)比度不足。我們通過(guò)增加灰色容器的不透明度并添加文本陰影將對(duì)比度提高到 4.5:1 以上。

位置文本的對(duì)比度也太低。細(xì)字體使它更難閱讀。使用較深的灰色陰影有助于使文本更易于訪(fǎng)問(wèn)。我們將進(jìn)一步更新文本以盡快改進(jìn)它。

9.不要僅僅依靠顏色作為指標(biāo)

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

為確保色盲用戶(hù)可以訪(fǎng)問(wèn)界面，您不能僅依靠顏色來(lái)傳達(dá)含義或區(qū)分視覺(jué)元素。您需要使用額外的視覺(jué)提示來(lái)區(qū)分界面元素。

在我們的示例中，藍(lán)色用于“評(píng)論”文本以指示它是一個(gè)鏈接。如果顏色被移除，鏈接文本看起來(lái)與其他文本一樣，所以色盲無(wú)法分辨這是一個(gè)鏈接。在沒(méi)有顏色的情況下，給鏈接文本加下劃線(xiàn)可以清楚地將其與其他文本區(qū)分開(kāi)來(lái)。

10.使用單一的無(wú)襯線(xiàn)字體

字體是一組具有相似風(fēng)格或美感的相關(guān)字體。Helvetica 是字體的一個(gè)例子。字體是字體內(nèi)的變體，例如粗細(xì)或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字體中的兩種不同字體。

在界面設(shè)計(jì)中使用單一的無(wú)襯線(xiàn)字體是最安全的，因?yàn)樗鼈兺ǔＷ钋逦?、中性和?jiǎn)單。

在我們的示例中，標(biāo)題使用了詳細(xì)的襯線(xiàn)字體，這有點(diǎn)難以閱讀并且可能會(huì)分散某些人的注意力。它還具有可能與此物業(yè)租賃應(yīng)用程序中的某些照片不匹配的個(gè)性。使用無(wú)襯線(xiàn)字體簡(jiǎn)化它有助于提高可用性和美感。

11. 使用小寫(xiě)字母更高的字體

尋找具有更高小寫(xiě)字母和更大字母間距的字體，因?yàn)樗鼈兺ǔＴ谛〕叽鐣r(shí)更易讀。字體中小寫(xiě)字母的高度稱(chēng)為 x 高度。

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

這是我們的示例在字體從 Gill Sans 更新為 Lato 后的樣子。

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

除非你對(duì)人大喊大叫，否則沒(méi)有太多正當(dāng)理由使用大寫(xiě)字母。聲音很大且難以閱讀。

當(dāng)你閱讀時(shí)，你會(huì)看單詞的形狀，而不是看每個(gè)字母。該形狀可幫助您更快地識(shí)別單詞。大寫(xiě)單詞都具有相同的矩形形狀。這迫使你一個(gè)一個(gè)地閱讀每個(gè)字母。

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

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

僅僅因?yàn)樽煮w中有很多可用的字體粗細(xì)，并不意味著您需要在設(shè)計(jì)中使用所有這些粗細(xì)。使用大量不同的字體粗細(xì)會(huì)給你的界面增加噪音和混亂。這也使得一致地使用每種字體粗細(xì)變得更加困難。

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

快速使用提示：

• 對(duì)標(biāo)題使用粗體字重來(lái)強(qiáng)調(diào)它們。
• 對(duì)其他較小的文本使用常規(guī)字體粗細(xì)。
• 如果您決定使用非常細(xì)或粗的字體粗細(xì)，請(qǐng)將它們保留用于標(biāo)題和較大的文本，因?yàn)樗鼈冊(cè)谳^小的尺寸下可能難以閱讀。

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

14.避免純黑色文字

對(duì)于 UI 設(shè)計(jì)，避免純黑色通常是最安全的，因?yàn)樗c白色的對(duì)比度非常高。這種高對(duì)比度會(huì)導(dǎo)致閱讀文本時(shí)眼睛疲勞和疲勞。

黑色的顏色亮度為 0%，白色的顏色亮度為 100%。顏色亮度的巨大差異使我們的眼睛更加努力地工作。最安全的做法是避免使用純黑色來(lái)代替白色，而選擇深灰色。

在我們的示例中，純黑色用于多個(gè)元素。將其更改為深灰色有助于提高可讀性。之前在查看視覺(jué)層次結(jié)構(gòu)時(shí)，我們注意到屬性描述文本過(guò)于突出。為了確保界面元素按重要性順序呈現(xiàn)，我們對(duì)屬性描述文本使用淺灰色以降低其突出度。

15. 文本左對(duì)齊

英語(yǔ)從左到右，以 F 形模式向下閱讀。因此，最好讓文本左對(duì)齊以獲得最佳可讀性。對(duì)于長(zhǎng)正文，最安全的做法是避免居中對(duì)齊或兩端對(duì)齊的文本。它更難閱讀，尤其是對(duì)于那些有認(rèn)知障礙的人。

居中對(duì)齊適用于標(biāo)題和短文本，因?yàn)樗梢钥焖匍喿x。但是，居中對(duì)齊會(huì)使較長(zhǎng)的正文文本更難閱讀，因?yàn)槊啃械钠瘘c(diǎn)不斷變化。你的眼睛需要更加努力地工作才能找到每條線(xiàn)的起點(diǎn)。

在我們的示例中，屬性描述文本居中對(duì)齊。左對(duì)齊文本提高了可讀性，也與上面的左對(duì)齊文本保持一致。

16. 正文至少使用 1.5 倍的行高

行高是兩行文本之間的垂直距離。行與行之間的空格有助于防止人們重新閱讀同一行文本。閱讀起來(lái)也更舒適。

為了可訪(fǎng)問(wèn)性和可讀性，尤其是長(zhǎng)正文，請(qǐng)確保行高至少為 1.5 (150%)。將行高保持在 1.5 到 2 之間通常效果很好。

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

最終效果

通過(guò)一些簡(jiǎn)單但功能強(qiáng)大的 UI 設(shè)計(jì)指南，我們很快發(fā)現(xiàn)并修復(fù)了示例設(shè)計(jì)中的一大堆問(wèn)題。

希望您開(kāi)始意識(shí)到 UI 設(shè)計(jì)不必如此困難。它可能看起來(lái)是一種神奇的藝術(shù)形式，但其中很多是由我們剛剛學(xué)到的邏輯規(guī)則或指南組成的。使用客觀邏輯而不是主觀意見(jiàn)，可以更快、更輕松地設(shè)計(jì)直觀、易于訪(fǎng)問(wèn)且美觀的界面。

原文：
https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules