超多對(duì)比案例！用戶界面設(shè)計(jì)的10個(gè)小技巧

我們大多數(shù)人開(kāi)始接觸 UI 設(shè)計(jì)的時(shí)候，只是知道很少或者根本不懂任何設(shè)計(jì)理論。盡管萬(wàn)事開(kāi)頭難，我們還是需要通過(guò)許多設(shè)計(jì)類的書籍和文章來(lái)學(xué)習(xí)如何配色、排版、布局等。

設(shè)計(jì)不是簡(jiǎn)單可以用顏色，形狀和文字表示的，應(yīng)該是一個(gè)「言之有物」的過(guò)程，即每當(dāng)我們改變字號(hào)、添加陰影或改變顏色時(shí)，一定要有必須這樣做的理由。在本文中，我將分享一些我在設(shè)計(jì)用戶界面時(shí)學(xué)到的東西，以及我在學(xué)習(xí)過(guò)程中的新發(fā)現(xiàn)。

用顏色和字重來(lái)設(shè)計(jì)層級(jí)，而不只是字號(hào)的大小

當(dāng)面對(duì)需要信息層級(jí)結(jié)構(gòu)的內(nèi)容時(shí)，放大字號(hào)表示強(qiáng)調(diào)和重要性通常不能解決問(wèn)題，如下圖所示：

信息層級(jí)并不僅僅是不同尺寸字體的組合，而是由字體尺寸，字重，字體顏色形成對(duì)比的正確組合。對(duì)比差異越大，層級(jí)關(guān)系表現(xiàn)越明顯。

1. 如何創(chuàng)建更好的對(duì)比度？

不要僅用大小不同，但是字重相同的文字來(lái)創(chuàng)建對(duì)比度和層次結(jié)構(gòu)。

主要內(nèi)容使用更粗更黑的字體樣式，次要內(nèi)容使用更小更細(xì)的字體樣式。

從深到淺創(chuàng)建三種不同的文字顏色（參見(jiàn)下圖的示例）。

通常我使用我的基色作為正文的文字顏色。

在設(shè)計(jì)中敢于運(yùn)用大的字間距（比如標(biāo)題24px，正文16px，標(biāo)簽文字10px等）。

更大的間距=更好的對(duì)比度

查看https://www.modularscale.com/，這是一個(gè)用來(lái)創(chuàng)建更好的字體層次結(jié)構(gòu)的在線計(jì)算器。

對(duì)比度=尺寸+字重+顏色

最后，請(qǐng)務(wù)必檢查其對(duì)比度。

不要?jiǎng)?chuàng)建多種色調(diào)的黑色

我們都知道使用黑色文本顏色會(huì)導(dǎo)致讀者眼睛疲勞，所以我們的解決方案是創(chuàng)建更黑的變體作為替代。我們可以使用不同的不透明度的黑色作為解決方案，而不是選擇 3 個(gè)或更多的顏色值。

在下圖的例子中，我使用黑色作為主要顏色（000），并根據(jù)應(yīng)用的位置（即主要內(nèi)容、次要內(nèi)容等）降低了不透明度。

運(yùn)用數(shù)學(xué)原理理解顏色

我們大多數(shù)人都不太擅長(zhǎng)選擇正確的顏色組合，每當(dāng)我們看到具有精心配色的設(shè)計(jì)時(shí)，我們都會(huì)問(wèn)自己：「他們是怎么做到的？」

直到我了解到在色相、飽和度、亮度（HSB）上進(jìn)行簡(jiǎn)單的加法和減法就能發(fā)揮魔法，在這個(gè)公式里我們將使用 HSB 的色彩模式，而不是 RGB 模式。你可以輕松擺脫彩色背景上無(wú)聊的白色，并把它變成畢加索的作品。（如下圖）

1. 那么HSB中的加法和減法怎么算呢？

實(shí)際上有兩種方法，如下圖，兩種方法都具有相同的基色#B9F4BC（圓形背景色），但圖標(biāo)中文件夾和裝飾條的顏色則不同。在我們開(kāi)始時(shí)，記住第一個(gè)字母相當(dāng)于色相，其次是飽和度，然后是亮度。

方法A

在方法A中，我們可以看到在整個(gè)圖形（圓形背景，文件夾，裝飾條）中，色相H值保持 123 不變，而飽和度S和亮度B是變化的。

現(xiàn)在，當(dāng)我們關(guān)注基色的飽和度S值是 24，亮度B值是 96 時(shí)，當(dāng)我們?yōu)槲募A創(chuàng)建更深的綠色時(shí)，這兩個(gè)值都會(huì)改變。飽和度從 24 變?yōu)?40（增加+16），亮度從 96 變?yōu)?82（減少-14），這表明為了形成良好的對(duì)比度，飽和度的變化需要與亮度成反比例調(diào)整。裝飾條也是一樣的，使用文件夾的飽和度S值和亮度B值作為基礎(chǔ)值，飽和度從 40 移動(dòng)到 44（增加+4），亮度從 82 變?yōu)?75（減少-7）。因此，我們得到了這個(gè)公式：

• 較暗的顏色值=飽和度增加，亮度減少
• 更亮的顏色值=飽和度減少，亮度增加

每當(dāng)我想知道我的設(shè)計(jì)應(yīng)該使用什么樣的正確顏色時(shí)，這個(gè)公式幫助了我。我了解到最好的起點(diǎn)是有一個(gè)基色，然后以基色為基礎(chǔ)，保持色相值相同，調(diào)整飽和度和亮度的值。

方法B

在方法B中，同樣的原理（上面的公式）依然適用，但是色相H值發(fā)生了變化。我們之前在各種設(shè)計(jì)材料中使用的顏色模式 RGB 和 CMY 現(xiàn)在對(duì)我們來(lái)說(shuō)很有用。

RGB 分別代表紅色、綠色和藍(lán)色，而 CMY 代表青色、洋紅色和黃色。我剛開(kāi)始設(shè)計(jì)時(shí)并不了解這兩種顏色模式的重要性，直到我無(wú)意中發(fā)現(xiàn)可以將 RGB 和 CMY 進(jìn)行顏色組合。

現(xiàn)在在方法B中，如果想要在基色的基礎(chǔ)上有一個(gè)較暗的變化，我們需要在調(diào)色板中將顏色選擇器往靠近 RGB 的方向移動(dòng)，反之將顏色選擇器往靠近 CMY 的方向移動(dòng)選擇較淺的顏色。如下圖：

由于我們想要在文件夾圖標(biāo)中使用比基色#B9F4BC（圓形背景）更深的顏色，我們需要將顏色選擇器移動(dòng)到最靠近的 RGB（本例為藍(lán)色）的位置。如果想要一個(gè)顏色較淺的文件夾，把選擇器移動(dòng)到左邊靠近 CMY（本例為黃色）的位置。

RGB 導(dǎo)致顏色變深，CMY 導(dǎo)致顏色變淺的情況比較多。

通過(guò)移動(dòng)顏色選擇器得到我們想要的顏色后，基于方法A中的公式，我們得到以下的顏色公式：

• 紅色，綠色，藍(lán)色（RGB）+方法A公式=顏色變深
• 青色，洋紅色，黃色（CMY）+方法A公式=顏色變淺

使用留白間距分隔組

除了在兩個(gè)組之間添加一條線來(lái)表示區(qū)分之外，在組與組之間使用一個(gè)寬敞的留白的解決方案會(huì)更好、更容易的。正如鄰近定律所說(shuō)：相互靠近或接近的物體，往往被歸在一起。

在我下方的例子中，我的目的是通過(guò)在標(biāo)題和作者之間使用 24px 的大留白來(lái)創(chuàng)建一個(gè)分隔。

利用顏色分隔行

做列表界面往往很無(wú)聊，因?yàn)橹恍枰粩嗟貜?fù)制組件就可以了。但是對(duì)于用戶，如果行與行之間沒(méi)有很明顯的區(qū)別，閱讀起來(lái)會(huì)很困難。因此，除了使用線條之外，在列表中添加彩色背景對(duì)于閱讀中的用戶來(lái)說(shuō)很有效，并且對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)也會(huì)更有樂(lè)趣。

用正片疊底代替文本陰影

設(shè)計(jì)標(biāo)題組件或在圖像上添加文本是非常具有挑戰(zhàn)性的，特別是如果圖像背景是動(dòng)態(tài)的（或時(shí)不時(shí)變化）。對(duì)于動(dòng)態(tài)圖像背景的文本，通常的解決方案是給文本添加陰影，但這并不能提高用戶的可讀性。而且它會(huì)增加文字周圍的視覺(jué)混亂，因?yàn)樗鼈兲钛a(bǔ)了文字之間的留白。

對(duì)于一些人來(lái)說(shuō)，黑白顏色疊加是一種對(duì)設(shè)計(jì)很有幫助的解決方案。但是最近，我發(fā)現(xiàn)使用正片疊底是可以作為漸變填充的混合工具使用。

這樣做要比在圖像上創(chuàng)建一個(gè)黑色背景并減少其不透明度容易得多。此外，正片疊底效果的灰度比例還能使圖像的其他部分保持其自然的顏色，并使文本所在的部分圖像更暗一點(diǎn)，來(lái)提高文本的可讀性。

行的長(zhǎng)度

大多數(shù)設(shè)計(jì)師經(jīng)常使內(nèi)容的長(zhǎng)度更長(zhǎng)，以便符合頁(yè)面。但這樣會(huì)使用戶造成視覺(jué)疲勞。每行 45-65 個(gè)字符是理想的。你是否曾遇到過(guò)像這樣兩難的情況：減少行的長(zhǎng)度以達(dá)到理想狀態(tài)，但這樣做會(huì)在右邊留下一個(gè)像下圖這樣的大空白。

不要猶豫，使整個(gè)文本與頁(yè)面垂直居中，如下圖，這樣就可以減小空白區(qū)域了。

組件化提升效率

不是基于組件的設(shè)計(jì)會(huì)使設(shè)計(jì)不一致。當(dāng)你意識(shí)到你已經(jīng)制作了 5 種卡片界面，10 個(gè)按鈕，5 種標(biāo)題樣式等等。

在開(kāi)始為特定內(nèi)容創(chuàng)建界面之前，請(qǐng)?jiān)囍榭粗皠?chuàng)建的設(shè)計(jì)，您可能看到可以回收利用的樣式模板。

我們可以使用「Aa的興趣打卡11Day」的樣式，并將其替換為「Aa 的潛水日記」的內(nèi)容，而不是重新「發(fā)明輪子」并為「Aa 的潛水日記」創(chuàng)建另一張界面卡片。這將為設(shè)計(jì)人員節(jié)省時(shí)間，同時(shí)還能保持界面一致。

使用品牌色做為強(qiáng)調(diào)色

我們通常認(rèn)為品牌顏色必須占據(jù)界面設(shè)計(jì)顏色的很大一部分。但事實(shí)上，在干凈簡(jiǎn)潔的布局中，我們很難決定在哪里展示客戶的品牌顏色。好的方案是把它們用作強(qiáng)調(diào)色。

突出項(xiàng)目標(biāo)記

最后，如果你正在創(chuàng)建一個(gè)類似下圖的列表設(shè)計(jì)，請(qǐng)將項(xiàng)目標(biāo)記、符號(hào)或數(shù)字放在空白處以突出顯示列表。這將使用戶的可讀性流動(dòng)不被打擾并且更清晰。

參考資料：https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9

歡迎關(guān)注作者的微信公眾號(hào)：「Aa設(shè)計(jì)專題」