一個(gè)界面改了16版，過程中有哪些原則要注意？class="size-fullwp-image-5786513aligncenter"src="/wp-files/2023/03/rmrIQEHtzqewtlJ7pbTf.jpg"alt=""width="900"height="420"/>

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

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

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

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

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

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

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

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

即使你沒有太多交互或視覺設(shè)計(jì)閱歷，你可能也會(huì)覺得左邊的設(shè)計(jì)是雜論無章，簡單難用的。這些由于界面中有許多設(shè)計(jì)細(xì)節(jié)問題沒有處理好，讓界面的可用性大打折扣，你能看出來多少？

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

使用留白和分組來劃分元素保持全都性確?？雌饋硐嘞竦脑卦诠δ苌弦彩穷愃频脑O(shè)計(jì)清楚的視覺層次結(jié)構(gòu)刪減不必要的樣式使用有目的的顏色確保界面中的元素能保持3:1的對比度確保文本能有4.5:1的對比度不要只用顏色來表達(dá)信息使用一種無襯線字體使用具有較高小寫字母的字體盡量不要過多地使用大寫字母只使用正常和粗體這兩種字重避開使用純黑色的文本多使用左對齊使用至少1.5倍的行高來設(shè)置正文文本一、使用留白和分組來劃分元素

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

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

把相關(guān)元素放在一個(gè)容器里；把相關(guān)元素彼此靠近；讓相關(guān)元素在設(shè)計(jì)上相像；將相關(guān)元素對齊在同一條直線上。使用容器是將界面元素分組的最強(qiáng)視覺表現(xiàn)方式，但它可能會(huì)增加不必要的雜亂感。查找使用其他分組方法的機(jī)會(huì)，它們通常更微妙，可以關(guān)心簡化設(shè)計(jì)。

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

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

二、保持全都性

在UI設(shè)計(jì)中，全都性的意思是相像的元素，在外觀和行為上保持相像。這種全都性不僅在你自己設(shè)計(jì)的產(chǎn)品中保持，也應(yīng)當(dā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)的易讀性，以關(guān)心用戶更好的理解它的意思。特殊是當(dāng)一些用戶使用讀屏?xí)r（屏幕閱讀器是一種軟件，用于描述界面，并通過語音或盲文向看不到它的人進(jìn)行描述）。

三、確保看起來相像的元素功能也相像

假如元素看起來是類似的，用戶會(huì)覺得它們在功能上也是類似的。因此，嘗試確保對于具有相同功能的元素使用全都的視覺設(shè)計(jì)。相反，嘗試確保具有不同功能的元素看起來也是不同的。

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

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

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

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

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

一個(gè)特別快且簡單的檢查你的視覺設(shè)計(jì)層次是否清楚的方法是采納“瞇眼測試（SquintTest）”。只需瞇起眼睛觀看你的設(shè)計(jì)，或者遠(yuǎn)離屏幕或使設(shè)計(jì)模糊。你仍應(yīng)當(dāng)能夠看出哪些元素最重要，知道界面的用途。

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

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

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

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

五、刪除不必要的樣式

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

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

六、有目的的使用顏色

有目的地、節(jié)制地使用顏色。盡量避開僅僅由于裝飾而使用顏色，由于這樣會(huì)讓人感到混亂和分散留意力。從黑白開頭，只在需要傳達(dá)意義時(shí)才引入顏色。

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

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

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

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

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

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

有很多在線工具(/)可以關(guān)心你測量不同顏色之間的對比度比率。通過使用這些工具，你可以輕松地檢查是否符合無障礙標(biāo)準(zhǔn)，并確保全部用戶都可以輕松地使用你的產(chǎn)品。

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

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

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

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

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

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

將箭頭和按鈕的對比度提高到大于3：1的比率會(huì)得到以下設(shè)計(jì)。我們離抱負(fù)效果又近了一步，但我們?nèi)耘f有更多問題需要解決。

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

為了確保視力受損的人能夠清楚地閱讀文本，文本需要滿意以下WCAG2.1級(jí)AA對比度要求。

小字（18px以下）需要最少達(dá)到4.5:1的比率；大字（包括18px粗體或最小24px的正常體）需要最少達(dá)到3:1的比率。在我們的例子中，小字在照片中的對比度是不夠的。我們把對比度提高到了4.5:1，增加不透亮?????度成深色并增加文字的投影。

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

九、不要只靠顏色

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

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

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

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

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

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

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

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

在選擇字體時(shí)，要找那些小寫字母比較高，字母間距比較大的，由于這些字體在小字號(hào)時(shí)更簡單閱讀。字體中小寫字母的高度叫做x高度。

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

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

十六、限制使用大寫

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

由于當(dāng)你閱讀時(shí)，你并不是以單個(gè)字母去看的，而是會(huì)以單詞的字形來看的。

一般來說，我們在閱讀時(shí)更簡單依據(jù)單詞的外形來識(shí)別它，而不是一個(gè)字母一個(gè)字母地看。大寫字母的單詞外形相同，閱讀起來比較費(fèi)勁，不利于快速識(shí)別整個(gè)單詞。

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

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

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

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

一些快速使用的技巧：

使用粗體字體以強(qiáng)調(diào)標(biāo)題；使用常規(guī)字重來呈現(xiàn)其他比較小的文本；假如你打算使用特別細(xì)或特別粗的字重，最好將它們保留給標(biāo)題和更大的文本，由于它們在較小的尺寸下可能難以閱讀。在我們的例子中，位置文本用了一個(gè)特別細(xì)的字重。即使我們把對比度優(yōu)化到4.5:1，但由于它太細(xì)，其實(shí)還是比較難閱讀。增加它的字重，改成常規(guī)字體，可以關(guān)心提升可讀性，讓界面整體上也更簡潔。

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

在UI設(shè)計(jì)中，比較平安的做法就是別使用純黑色，由于它在一個(gè)白色背景上對比度過高了。這種高對比度會(huì)導(dǎo)致閱讀文本時(shí)眼睛疲憊和不適。

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

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

十五、左對齊文本

英語的閱讀方式是從左到右，由上至下呈F形閱讀的，所以最好將文本左對齊以實(shí)現(xiàn)最佳閱讀效果。對于長篇正文，最好避開居中對齊或兩端對齊的方式。這種