我可能會(huì)假設(shè)我們中的大多數(shù)人都是從一開始就對(duì)UI設(shè)計(jì)一無所知，但是，盡管開始的時(shí)候我們遇到了困難，我們還是通過大量的設(shè)計(jì)書籍和文章來理解顏色、排版、布局等是如何工作的。這是一個(gè)背后有一個(gè)“為什么”的過程，每當(dāng)我們創(chuàng)建一個(gè)更大的文本，添加一個(gè)陰影，或者改變顏色，都必須有一個(gè)原因來解釋為什么事情必須是這樣的。

因此，在本文中，我將分享我從不同的公司、設(shè)計(jì)師、設(shè)計(jì)用戶界面時(shí)學(xué)到的東西以及我在這一過程中發(fā)現(xiàn)的新發(fā)現(xiàn)！

免責(zé)聲明：以下提供的樣本并不一定意味著它們是錯(cuò)誤的。這只是我們?nèi)绾螐囊粋€(gè)好的設(shè)計(jì)方案改進(jìn)為更好的方案的基礎(chǔ)。

一、這個(gè)文字很重要，讓它更大？

當(dāng)面對(duì)需要字體層次結(jié)構(gòu)的內(nèi)容時(shí)，使文本更大以給予重點(diǎn)和重要性通常不能解決問題，就像下面的問題一樣：

字體層次結(jié)構(gòu)不是小到大的字體大小，它是關(guān)于字體正確的大小，粗細(xì)和顏色的混合，創(chuàng)造對(duì)比，對(duì)比度越大越好。

那么，如何創(chuàng)建更好的對(duì)比度呢？

1.不要使用一種不同字體大小的權(quán)重來創(chuàng)建對(duì)比度和層次結(jié)構(gòu)。

2.相反，主要內(nèi)容使用粗體和深色樣式，次要內(nèi)容使用較小和較淺樣式。

3.創(chuàng)建三種不同顏色的文本（見下面的示例）。

4.不要害怕在項(xiàng)目上應(yīng)用大的字體間隙（即24px標(biāo)題、16px正文文本、10px meta等）。間隙越大=對(duì)比度越好。

5.記住，對(duì)比度=字體大小+字體粗細(xì)+顏色

6.最后，一定要檢查它的對(duì)比度。

二、不要使用純黑色

我們都知道使用黑色文字顏色（＃000）會(huì)給讀者帶來眼睛疲勞，因此我們的解決方案是創(chuàng)建深色變體作為替代方案。但是，我們可以使用具有不同不透明度的黑色作為解決方案，而不是選擇3個(gè)或更多十六進(jìn)制顏色值：

在上面的示例中，我使用黑色作為我的主顏色，并根據(jù)應(yīng)用層次（即主內(nèi)容、輔助內(nèi)容等）降低其不透明度。

三、用公式學(xué)顏色

我們中的大多數(shù)人都不擅長(zhǎng)選擇正確的顏色組合，每當(dāng)我們看到一個(gè)精心編排的調(diào)色板設(shè)計(jì)時(shí)，我們都會(huì)問自己“他們是如何做到的？”“（就像下面的那個(gè)一樣）：

直到我了解到，了解色彩并不僅僅是為了那些從一開始就有設(shè)計(jì)天賦的人，在Hue，飽和度，亮度（HSB）上進(jìn)行簡(jiǎn)單的加法和減法就能發(fā)揮作用（我們將對(duì)這個(gè)公式使用HSB而不是RGB）。如下所示：

那么，HSB中的加減法在哪里出現(xiàn)呢？

實(shí)際上，我們可以采用兩種方法，正如我們所見，這兩種方法的基色都相同，但在文件夾和條帶顏色方面有所不同。當(dāng)我們開始時(shí)，總是記住第一個(gè)數(shù)字對(duì)應(yīng)于色調(diào)，然后是飽和度，最后是亮度。

選項(xiàng)A

在選項(xiàng)A中，我們可以看到色調(diào)值123一直保持在形狀（圓形、文件夾、條帶）之外，而飽和度和亮度是發(fā)生變化的地方。

現(xiàn)在，當(dāng)我們關(guān)注的是24的基底飽和度和96的亮度時(shí)，當(dāng)我們?yōu)槲募A創(chuàng)建深綠色時(shí)，這兩個(gè)值都發(fā)生了變化。從24的飽和度變成40（增加+16），從96的亮度變成82（減少-14），這表明無論增加還是減少，飽和度的變化都需要與亮度成反比調(diào)整，以產(chǎn)生良好的對(duì)比度（反之亦然）。同樣的事情也發(fā)生在紙條上，以文件夾的飽和度和亮度為基值，我們從40移到44（增加+04），亮度從82減少到75（減少-07），由此得出公式：

較暗值=飽和度增加是亮度的降低

較亮值=飽和度降低是亮度的增加

每當(dāng)我想知道在我的設(shè)計(jì)中應(yīng)該使用什么顏色時(shí)，這個(gè)公式就幫助了我。我了解到最好的開始點(diǎn)是有一個(gè)基色，從那里開始調(diào)整飽和度和亮度，同時(shí)保持色調(diào)值不變。

選項(xiàng)B

在選項(xiàng)B中，同樣的原理仍然適用（我們上面的公式），但是色調(diào)值會(huì)改變。

RGB代表紅色、綠色和藍(lán)色，而CMY代表青色、洋紅和黃色。這些術(shù)語在我剛開始的時(shí)候并沒有對(duì)我有任何重要性，直到我發(fā)現(xiàn)使用RGB和CMY進(jìn)行顏色組合時(shí)。

現(xiàn)在在選項(xiàng)B中，如果我們想要基色的顏色有一個(gè)更暗的變化，我們需要做的就是將顏色選擇器移動(dòng)到調(diào)色板中最近的RGB所在的方向，或者將其移動(dòng)到CMY的方向以獲得更亮的變化。例如：

由于我們想要?jiǎng)?chuàng)建一個(gè)更暗的基礎(chǔ)顏色b9f4bc（圓形背景），這將應(yīng)用于我們的文件夾圖標(biāo)，我們需要移動(dòng)我們的顏色選擇器到最近的RGB所在的方向（在本例中是藍(lán)色）。但是如果我們想要一個(gè)更輕版本的文件夾，我們將把選擇器移到左邊，靠近CMY（在本例中是黃色）。

*更常見的是，RGB會(huì)導(dǎo)致較暗的變化，而CMY會(huì)導(dǎo)致較淺的變化。

將顏色選取器移動(dòng)到所需的變體后，現(xiàn)在我們將在選項(xiàng)A中應(yīng)用公式，這將導(dǎo)致我們具有此顏色組合：

青色、洋紅、黃色（CMY）+選項(xiàng)A公式=較淺的變化

四、使用間距分隔組

除了在兩個(gè)組之間添加一條線以顯示分隔之外，在兩組之間使用一個(gè)較大的空間是一個(gè)更好更容易的解決方案。

彼此接近或接近的物體往往被組合在一起

從上面的例子中，我的目標(biāo)是通過在標(biāo)題和它的作者之間使用一個(gè)24像素的大空間間隙來創(chuàng)建一個(gè)分離。

五、使用顏色分隔行

除了使用線條外，在行中添加顏色背景對(duì)用戶閱讀非常有幫助，而且對(duì)我們的設(shè)計(jì)師來說也會(huì)更享受。

六、使用品牌顏色作為強(qiáng)調(diào)

盡量保持我們界面的整潔

七、注意對(duì)齊

最后，如果您要?jiǎng)?chuàng)建一個(gè)像上面這樣的列表設(shè)計(jì)，請(qǐng)將項(xiàng)目符號(hào)、標(biāo)志符號(hào)或數(shù)字放在空白處以突出顯示列表。這將使用戶的可讀性流不間斷，更清晰。