在產(chǎn)品設(shè)計(jì)、界面改版等日常業(yè)務(wù)中，設(shè)計(jì)師大多時(shí)候還是需要進(jìn)行一遍遍調(diào)整和細(xì)化，而這個(gè)過程也需要遵循一定的原則，不能任性更改。那么有哪些UI上的設(shè)計(jì)原則是我們可以參考和借鑒的？本文作者便結(jié)合實(shí)際案例，對(duì)一些設(shè)計(jì)原則的應(yīng)用進(jìn)行了解讀，一起來看。

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

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

設(shè)計(jì)一個(gè)好的UI界面并不容易，因?yàn)橛刑嗉?xì)節(jié)需要考慮，比如布局、間距、字體和顏色等，做出決策會(huì)讓人感到無(wú)從下手。當(dāng)你還需要考慮到可用性、可訪問性和心理學(xué)等因素時(shí)，設(shè)計(jì)就變得更加困難了。

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

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

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

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

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

即使你沒有太多交互或視覺設(shè)計(jì)經(jīng)驗(yàn)，你可能也會(huì)覺得左邊的設(shè)計(jì)是雜論無(wú)章，復(fù)雜難用的。這些因?yàn)榻缑嬷杏泻芏嘣O(shè)計(jì)細(xì)節(jié)問題沒有處理好，讓界面的可用性大打折扣，你能看出來多少？

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

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

一、使用留白和分組來劃分元素

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

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

• 把相關(guān)元素放在一個(gè)容器里；
• 把相關(guān)元素彼此靠近；
• 讓相關(guān)元素在設(shè)計(jì)上相似；
• 將相關(guān)元素對(duì)齊在同一條直線上。

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

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

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

二、保持一致性

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

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

文本是用來提升圖標(biāo)的易讀性，以幫助用戶更好的理解它的意思。特別是當(dāng)一些用戶使用讀屏?xí)r（屏幕閱讀器是一種軟件，用于描述界面，并通過語(yǔ)音或盲文向看不到它的人進(jìn)行描述）。

三、確?？雌饋硐嗨频脑毓δ芤蚕嗨?/h2>

如果元素看起來是類似的，用戶會(huì)覺得它們?cè)诠δ苌弦彩穷愃频摹?/strong>因此，嘗試確保對(duì)于具有相同功能的元素使用一致的視覺設(shè)計(jì)。相反，嘗試確保具有不同功能的元素看起來也是不同的。

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

四、創(chuàng)建一個(gè)清晰的層次結(jié)構(gòu)

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

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

下面的例子是一個(gè)視覺層次不清晰的網(wǎng)站banner示例，在它下面是一個(gè)明確的層次結(jié)構(gòu)的案例。

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

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

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

再次用上“瞇眼測(cè)試”，主要按鈕這次成了頁(yè)面中最突出的元素了。

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

五、刪除不必要的樣式

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

在我們的例子中，圖片周圍的留白和描邊是沒必要的，會(huì)增加視覺復(fù)雜度。這些樣式不需要來傳達(dá)信息或?qū)υ剡M(jìn)行分組，因此我們可以安全地將它們刪減以簡(jiǎn)化設(shè)計(jì)。

六、有目的的使用顏色

有目的地、節(jié)制地使用顏色。盡量避免僅僅因?yàn)檠b飾而使用顏色，因?yàn)檫@樣會(huì)讓人感到混亂和分散注意力。從黑白開始，只在需要傳達(dá)意義時(shí)才引入顏色。

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

你也不需要把品牌顏色應(yīng)用到所有可交互的元素上，一些元素其實(shí)本身就已經(jīng)給出了可交互的線索。例如，卡片設(shè)計(jì)本身給人的隱喻就是全部可點(diǎn)擊的，所以不需要在文字上單獨(dú)再加一個(gè)藍(lán)色的鏈接。

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

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

七、確保界面上的元素能保持3:1的對(duì)比度

對(duì)比是衡量?jī)煞N顏色之間感知亮度差異的指標(biāo)。對(duì)比度的表達(dá)方式是一個(gè)比例，范圍從1:1到21:1不等。例如，在黑色背景上的黑色文本具有最低的1:1對(duì)比度比率，而在白色背景上的黑色文本具有最高的21:1比率。

有許多在線工具(https://usecontrast.com/)可以幫助你測(cè)量不同顏色之間的對(duì)比度比率。通過使用這些工具，你可以輕松地檢查是否符合無(wú)障礙標(biāo)準(zhǔn)，并確保所有用戶都可以輕松地使用你的產(chǎn)品。

為了確保視力受損的人能夠清晰地看到界面細(xì)節(jié)，應(yīng)該至少符合[Web內(nèi)容可訪問性指南（WCAG）]https://www.w3.org/TR/WCAG21/ 2.1 AA級(jí)別的顏色對(duì)比要求。

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

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

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

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

低對(duì)比度按鈕的風(fēng)險(xiǎn)在于視力較差的人可能無(wú)法看到這個(gè)按鈕。將按鈕的對(duì)比度比率提高到3：1以上可以使按鈕易于訪問，同時(shí)也有助于糾正視覺層次結(jié)構(gòu)。

將箭頭和按鈕的對(duì)比度提高到大于3：1的比率會(huì)得到以下設(shè)計(jì)。我們離理想效果又近了一步，但我們?nèi)匀挥懈鄦栴}需要解決。

八、確保文本具有4.5：1的對(duì)比度比率

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

• 小字（18px以下）需要最少達(dá)到4.5:1的比率；
• 大字（包括18px粗體或最小24px的正常體）需要最少達(dá)到3:1的比率。

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

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

九、不要只靠顏色

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

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

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

十、使用統(tǒng)一的無(wú)襯線字體

字體是一組相關(guān)的具有相似風(fēng)格或美學(xué)特征的字形設(shè)計(jì)。Helvetica是一個(gè)字體的例子。而字形則是字體中的變體，如字重或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字體中的兩種不同字形。

比較穩(wěn)妥的方式是在一個(gè)界面中僅使用一種無(wú)襯線字體，因?yàn)樗鼈兺ǔＪ亲钜鬃x、最中性、最簡(jiǎn)單的。

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

十一、使用小寫字母更高的字體

在選擇字體時(shí)，要找那些小寫字母比較高，字母間距比較大的，因?yàn)檫@些字體在小字號(hào)時(shí)更容易閱讀。字體中小寫字母的高度叫做x高度。

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

在將字體從Gill Sans更改為L(zhǎng)ato后，我們的例子像下面這樣。

十六、限制使用大寫

一般來說，如果不是在向別人大喊大叫，就沒有太多使用大寫字母的正當(dāng)理由。因?yàn)榇髮懽帜缚雌饋硖?，也不易于閱讀。

因?yàn)楫?dāng)你閱讀時(shí)，你并不是以單個(gè)字母去看的，而是會(huì)以單詞的字形來看的。

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

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

十三、僅使用常規(guī)和粗體

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

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

一些快速使用的技巧：

• 使用粗體字體以強(qiáng)調(diào)標(biāo)題；
• 使用常規(guī)字重來呈現(xiàn)其他比較小的文本；
• 如果你決定使用非常細(xì)或非常粗的字重，最好將它們保留給標(biāo)題和更大的文本，因?yàn)樗鼈冊(cè)谳^小的尺寸下可能難以閱讀。

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

十四、避免使用純黑色文字

在UI設(shè)計(jì)中，比較安全的做法就是別使用純黑色，因?yàn)樗谝粋€(gè)白色背景上對(duì)比度過高了。這種高對(duì)比度會(huì)導(dǎo)致閱讀文本時(shí)眼睛疲勞和不適。

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

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

十五、左對(duì)齊文本

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

在標(biāo)題和短文本上使用居中對(duì)齊會(huì)比較好，那樣會(huì)比較方便閱讀。但是，對(duì)于長(zhǎng)文本來說，居中對(duì)齊就是災(zāi)難，因?yàn)槊啃械钠瘘c(diǎn)都不一樣。你的眼睛需要找每一行的起點(diǎn)，這會(huì)讓閱讀變得很困難。

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

十六、對(duì)于內(nèi)容文本至少要有1.5倍行高

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

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

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

最終效果

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

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

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

原文作者：Adham Dannaway（本文翻譯已獲得作者的正式授權(quán)）

原文：https://uxplanet.org/16-ui-design-tips-ba2e7524d203

譯者：彩云Sky，公眾號(hào)：彩云譯設(shè)計(jì)；人人都是產(chǎn)品經(jīng)理專欄作家，騰訊高級(jí)視覺設(shè)計(jì)師。

本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。