近段時間講了不少 AI 方面的知識，不過我實際用 AI 繪畫做 UI 時，目前還只能用來做參考，很多細節(jié)還是得手動調整。今天跟大家分享的這個案例，就是通過 16 次改版優(yōu)化把它一點點變好的。通過對 UI 中這些細節(jié)的不斷打磨，終于讓它在視覺上變得更好了。

這 16 次優(yōu)化，實際上也是在做 UI 時所需要遵循的設計原則，記得收藏并用到自己的項目里，用上才算真正學到。

設計一個好的 UI 界面并不容易，因為有太多細節(jié)需要考慮，比如布局、間距、字體和顏色等，做出決策會讓人感到無從下手。當你還需要考慮到可用性、可訪問性和心理學等因素時，設計就變得更加困難了。

幸運的是，UI 設計并不會太難。作為一個產品設計師，我工作了將近 20 年，發(fā)現(xiàn)自己大部分的視覺和交互設計決策都是基于一套簡單的邏輯規(guī)則。跟別的設計師不一樣的是，我依賴的是規(guī)則而不是藝術感或者神秘的靈感。

有一個系統(tǒng)性的邏輯規(guī)則可以幫助你更高效地做出設計決策。如果沒有這個邏輯系統(tǒng)，只是憑感覺胡亂挪動元素，能不能把 UI 做好貌似就只能靠運氣。

我喜歡規(guī)則和邏輯，但做設計也絕不是非黑即白。不要把下面的建議看成必須遵守的嚴格規(guī)則，而是把它們當作實用的指導方向，在大多數(shù)情況下都能很好地發(fā)揮作用。

下面就用一個案例來說明這些設計規(guī)則如何改進 UI 設計。

下面這 2 張圖是一款租房應用詳情頁面，左邊是優(yōu)化前的，右邊是通過一系列邏輯規(guī)則優(yōu)化后的效果。（彩云注：有指導原則對于做設計決策會好很多，避免自己的感覺不準，讓設計質量更加穩(wěn)定。）

即使你沒有太多交互或視覺設計經驗，你可能也會覺得左邊的設計是雜論無章，復雜難用的。這是因為界面中有很多設計細節(jié)問題沒有處理好，讓界面的可用性大打折扣，你能看出來多少？

讓我們一起根據(jù)下面 16 條黃金原則優(yōu)化好這個界面吧：

1. 使用留白和分組來劃分元素
2. 保持一致性
3. 確?？雌饋硐嗨频脑卦诠δ苌弦彩穷愃频?/li>
4. 設計清晰的視覺層次結構
5. 刪減不必要的樣式
6. 使用有目的的顏色
7. 確保界面中的元素能保持 3:1 的對比度
8. 確保文本能有 4.5:1 的對比度
9. 不要只用顏色來表達信息
10. 使用一種無襯線字體
11. 使用具有較高小寫字母的字體
12. 盡量不要過多地使用大寫字母
13. 只使用正常和粗體這兩種字重
14. 避免使用純黑色的文本
15. 多使用左對齊
16. 使用至少 1.5 倍的行高來設置正文文本

1. 使用留白和分組來劃分元素

把信息分成幾組相關元素可以幫助構建一個有條理的界面，更易于組織和閱讀信息。這樣做可以讓人更快更容易地理解和記住界面的內容。

你可以使用這些方法來對信息分組：

1. 把相關元素放在一個容器里
2. 把相關元素彼此靠近
3. 讓相關元素在設計上相似
4. 將相關元素對齊在同一條直線上

使用容器是將界面元素分組的最強視覺表現(xiàn)方式，但它可能會增加不必要的雜亂感。尋找使用其他分組方法的機會，它們通常更微妙，可以幫助簡化設計。

使用留白是一個非常有效的元素分組方式，你可以同時使用這些方法用以更好的將信息組織起來。

比如在下面的例子中，留白空間不夠，讓信息顯得擠在一起難以閱讀，通過增加留白，能幫助更好的對信息進行分組，讓整個排版顯得更舒服，更利于閱讀。

2. 保持一致性

在 UI 設計中，一致性的意思是相似的元素，在外觀和行為上保持相似。這種一致性不僅在你自己設計的產品中保持，也應該與其他已有的產品相類似，以保證用戶的心智統(tǒng)一。這樣可以提高可用性并減少錯誤，用戶不再需要重新學習如何使用。

在下面的例子中，圖標的風格是不統(tǒng)一的，一些圖標是填充的一些是描邊的。這會讓用戶感到困惑，填充圖標通常會讓用戶覺得是已經選擇了。當所有圖標都用描邊的形式，統(tǒng)一描邊 2pt 的粗細和統(tǒng)一的圓角，并設計相似的視覺重量，那么就可以很好的提高一致性。

文本用來提升圖標的易讀性，以幫助用戶更好的理解它的意思。特別是當一些用戶使用讀屏時（屏幕閱讀器是一種軟件，用于描述界面，并通過語音或盲文向看不到它的人進行描述）。

3. 確?？雌饋硐嗨频脑毓δ芤蚕嗨?/h4>

如果元素看起來是類似的，用戶會覺得它們在功能上也是類似的。因此，嘗試確保對于具有相同功能的元素使用一致的視覺設計。相反，嘗試確保具有不同功能的元素看起來也是不同的。

在我們的例子中，圖標區(qū)域的樣式與"Book now"按鈕的樣式非常類似。這使得它們看起來是可以點擊的，但實際上是不可以的。把底部的藍色背景區(qū)域去掉，避免用戶的誤解。

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

不是所有在界面上的信息都同等重要，為了讓信息更容易理解，要讓更重要的信息被設計的更突出一些。

一個清晰的層次關系，能幫助用戶更快的閱讀內容，并能把焦點放到他感興趣的地方。同時，它還可以通過創(chuàng)造秩序來提高美學效果。你可以通過大小、顏色、對比、間距、位置和深度進行優(yōu)化，打造一個清晰的視覺層級。

下面的例子是一個視覺層次不清晰的網站 banner 示例，在它下面是一個明確的層次結構的案例。

一個非?？烨胰菀椎臋z查你的視覺設計層次是否清晰的方法是采用"瞇眼測試（ Squint Test）"。只需瞇起眼睛觀察你的設計，或者遠離屏幕或使設計模糊。你仍應該能夠看出哪些元素最重要，知道界面的用途。

用"瞇眼測試"看下面的例子，我們可以發(fā)現(xiàn)多個具有類似視覺強度的元素在爭搶用戶的注意力。同時，左下角的主要操作反而沒有凸顯出來。

主要按鈕在界面中通常是最突出的元素。通過給它一個與背景強對比的顏色，并把字體加粗可以實現(xiàn)這一點。這樣做也解決了可讀性的問題，后面會詳細研究。

再次用上"瞇眼測試"，主要按鈕這次成了頁面中最突出的元素了。

視覺層次現(xiàn)在終于清晰了，但依然還有提升的空間。例如，正文相對于它的層級來說，還是有點太突出了。

5. 刪除不必要的樣式

不必要的信息和視覺樣式可能會分散注意力，增加認知負荷。避免使用不必要的線條、顏色、背景和動畫，目的是創(chuàng)建一個更簡單、更專注的界面。

在我們的例子中，圖片周圍的留白和描邊是沒必要的，會增加視覺復雜度。這些樣式不需要來傳達信息或對元素進行分組，因此我們可以安全地將它們刪減以簡化設計。

6. 有目的的使用顏色

有目的地、節(jié)制地使用顏色。盡量避免僅僅因為裝飾而使用顏色，因為這樣會讓人感到混亂和分散注意力。從黑白開始，只在需要傳達意義時才引入顏色。

一個簡單有效的方式是把品牌顏色應用到文字鏈接和按鈕等可交互的元素上。它能幫助用戶理解哪些是可點擊的而哪些不可以。嘗試避免使用品牌顏色在不可交互的元素上。

你也不需要把品牌顏色應用到所有可交互的元素上，一些元素其實本身就已經給出了可交互的線索。例如，卡片設計本身給人的隱喻就是全部可點擊的，所以不需要在文字上單獨再加一個藍色的鏈接。

在我們的例子中，優(yōu)化前的藍色標題可起來還挺好看的，但它讓文字看起來是可交互的。為了幫助避免這種困惑，我們需要把這種藍色樣式給移除掉。

我們同樣需要把其他不可交互的元素中的藍色樣式刪除掉，比如藍色的星星。這樣優(yōu)化后，界面上可點不可點的信息就能一目了然了。

7. 確保界面上的元素能保持 3:1 的對比度

對比是衡量兩種顏色之間感知亮度差異的指標。對比度的表達方式是一個比例，范圍從 1:1 到 21:1 不等。例如，在黑色背景上的黑色文本具有最低的 1:1 對比度比率，而在白色背景上的黑色文本具有最高的 21:1 比率。

有許多在線工具（https://usecontrast.com/）可以幫助你測量不同顏色之間的對比度比率。通過使用這些工具，你可以輕松地檢查是否符合無障礙標準，并確保所有用戶都可以輕松地使用你的產品。

為了確保視力受損的人能夠清晰地看到界面細節(jié)，應該至少符合 Web 內容可訪問性指南（WCAG）2.1 AA 級別的顏色對比要求。

這意味著用戶界面元素，如表單字段和按鈕，需要至少具有 3:1 的對比度比率。這是為了確保用戶可以清楚地看到所有的界面元素，從而更容易地使用產品。WCAG 還包括許多其他指南和要求，包括對語音識別和屏幕閱讀器的支持等，以確保你的產品具有最佳的無障礙性能。

在我們的例子中，箭頭圖標與背景的對比度比率太低。給圖標上加投影和在圖片頂部三分之一處加漸變疊加效果，無論圖標所在的圖片如何變化，都可以使圖標具有足夠的 3:1 對比度。

這樣可以確保視力受損的人也能夠清晰地看到圖標，并能夠更好地使用你的產品。同時，這也是一種設計技巧，可以使圖標在不同背景下都能夠顯得更加醒目和有吸引力。

主要按鈕的對比度在優(yōu)化前的頁面上同樣是對比度太低。在解決視覺層次那里已經優(yōu)化了它，但這里也值得再提一下。

低對比度按鈕的風險在于視力較差的人可能無法看到這個按鈕。將按鈕的對比度比率提高到 3：1 以上可以使按鈕易于訪問，同時也有助于糾正視覺層次結構。

將箭頭和按鈕的對比度提高到大于 3：1 的比率會得到以下設計。我們離理想效果又近了一步，但我們仍然有更多問題需要解決。

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

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

1. 小字（18px 以下）需要最少達到 4.5:1 的比率
2. 大字（包括 18px 粗體或最小 24px 的正常體）需要最少達到 3:1 的比率

在我們的例子中，小字在照片中的對比度是不夠的。我們把對比度提高到了 4.5:1，增加不透明度成深色并增加文字的投影。

位置信息的對比度也是太低了。細的文字使得它很難閱讀。使用較深的灰色可以幫助文本更易于閱讀。我們很快會對文本進行進一步優(yōu)化。

9. 不要只靠顏色

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

為了確保色盲用戶在使用產品時的可用性，你不能僅依賴顏色作為交互引導，或區(qū)分不同視覺元素。你需要增加更多為 UI 元素視覺線索。

在我們的例子中，"reviews"文本使用了藍色表示一個鏈接。如果把顏色去除，鏈接文本就和其他普通文本沒任何區(qū)別了，所以給可點擊的鏈接文字增加一個下劃線是一個正確的做法，這樣就可以很好的做了區(qū)分。

10. 使用統(tǒng)一的無襯線字體

字體是一組相關的具有相似風格或美學特征的字形設計。Helvetica 是一個字體的例子。而字形則是字體中的變體，如字重或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字體中的兩種不同字形。

比較穩(wěn)妥的方式是在一個界面中僅使用一種無襯線字體，因為它們通常是最易讀、最中性、最簡單的。

在我們的例子中，標題字使用了細節(jié)豐富的襯線字體，這種字體可能有些難閱讀，并且可能會對某些人產生干擾。此外，它的風格可能與應用中的某些照片不匹配。使用簡單的無襯線字體可以提高可用性和美觀度。

11. 使用小寫字母更高的字體

在選擇字體時，要找那些小寫字母比較高，字母間距比較大的，因為這些字體在小字號時更容易閱讀。字體中小寫字母的高度叫做 x 高度。

在我們的例子中，Gill Sans 字體的字母高度相對較矮，把它優(yōu)化為高度更大的字體，像 Lato，可以有效地提升可讀性。

在將字體從 Gill Sans 更改為 Lato 后，我們的例子像下面這樣。

12. 限制使用大寫

一般來說，如果不是在向別人大喊大叫，就沒有太多使用大寫字母的正當理由。因為大寫字母看起來太吵，也不易于閱讀。

因為當你閱讀時，你并不是以單個字母去看的，而是會以單詞的字形來看的。

一般來說，我們在閱讀時更容易根據(jù)單詞的形狀來識別它，而不是一個字母一個字母地看。大寫字母的單詞形狀相同，閱讀起來比較費力，不利于快速識別整個單詞。

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

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

雖然一個字體中可能有很多字重可供選擇，但并不意味著你需要在設計中全部使用。過多地使用不同的字重會讓界面顯得嘈雜不清。同時，使用太多不同的字重會讓設計難以保持一致性。因此，在設計中只使用常規(guī)和粗體的字重是更好的選擇。

保持界面中只使用常規(guī)和加粗字體，可以讓界面簡單明了。

一些快速使用的技巧:

1. 使用粗體字體以強調標題
2. 使用常規(guī)字重來呈現(xiàn)其他比較小的文本
3. 如果你決定使用非常細或非常粗的字重，最好將它們保留給標題和更大的文本，因為它們在較小的尺寸下可能難以閱讀

在我們的例子中，位置文本用了一個非常細的字重。即使我們把對比度優(yōu)化到 4.5:1，但由于它太細，其實還是比較難閱讀。增加它的字重，改成常規(guī)字體，可以幫助提升可讀性，讓界面整體上也更簡單。

14. 避免使用純黑色文字

在 UI 設計中，比較安全的做法就是別使用純黑色，因為它在一個白色背景上對比度過高了。這種高對比度會導致閱讀文本時眼睛疲勞和不適。

黑色是 0%的亮度，白色是 100%的亮度，這 2 者巨大的亮度差異會導致顏色很不舒服。所以，最好避免在白色背景上使用純黑色，改用深灰色會比較好。

在我們的例子中，很多元素都使用了純黑色。將其改為深灰色可以提高可讀性。之前在檢查視覺層次時，會發(fā)現(xiàn)物業(yè)描述文本過于突出。為了確保界面元素按重要性呈現(xiàn)，改為較淺的灰色來減少物業(yè)描述文本的突出程度。

15. 左對齊文本

英語的閱讀方式是從左到右，由上至下呈 F 形閱讀的，所以最好將文本左對齊以實現(xiàn)最佳閱讀效果。對于長篇正文，最好避免居中對齊或兩端對齊的方式。這種對齊方式難以閱讀，尤其是對于那些認知能力較弱的人來說更加困難。

在標題和短文本上使用居中對齊會比較好，那樣會比較方便閱讀。但是，對于長文本來說，居中對齊就是災難，因為每行的起點都不一樣。你的眼睛需要找每一行的起點，這會讓閱讀變得很困難。

在我們的例子中，描述文本是居中對齊的，改為左對齊后會發(fā)現(xiàn)可讀性好很多。

16. 對于內容文本至少要有 1.5 倍行高

行高是指在垂直高度上的文字間距。每行文字之間的間距有助于防止人們重復閱讀同一行文字。這樣做也會讓閱讀更加舒適自然。

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

在我們的例子中，行高僅有 1（100%），增加行高到 1.6（160%）后，可讀性好了很多。

最終效果

我們遵循了幾個簡單但有效的 UI 設計準則，很快就發(fā)現(xiàn)并優(yōu)化了例子設計中的許多問題。

（彩云注：最終優(yōu)化后的效果會比優(yōu)化前的好很多，那么請你再回頭想想，如果再讓你優(yōu)化一遍這個界面，關掉教程，你還能再優(yōu)化一遍嗎？然后再進一步，把這些方法如何用到自己的實際項目中，作品集中，相信會更有幫助。）

希望你已經開始意識到，UI 設計并不是那么困難。雖然它看起來像一門神奇的藝術形式，但其中很大一部分都是由像我們剛學到的這些邏輯規(guī)則或指導原則所構成的。使用客觀的邏輯，而不是主觀的意見，可以更快速、更輕松地設計出直觀、易用和美觀的界面。

如果你有學到，記得分享到你的朋友圈哦~

作者：彩云譯設計