我可能會假設我們中的大多數(shù)人都是從一開始就對UI設計一無所知，但是，盡管開始的時候我們遇到了困難，我們還是通過大量的設計書籍和文章來理解顏色、排版、布局等是如何工作的。這是一個背后有一個“為什么”的過程，每當我們創(chuàng)建一個更大的文本，添加一個陰影，或者改變顏色，都必須有一個原因來解釋為什么事情必須是這樣的。
因此，在本文中，我將分享我從不同的公司、設計師、設計用戶界面時學到的東西以及我在這一過程中發(fā)現(xiàn)的新發(fā)現(xiàn)！
免責聲明：以下提供的樣本并不一定意味著它們是錯誤的。這只是我們如何從一個好的設計方案改進為更好的方案的基礎。
當面對需要字體層次結構的內容時，使文本更大以給予重點和重要性通常不能解決問題，就像下面的問題一樣：
字體層次結構不是小到大的字體大小，它是關于字體正確的大小，粗細和顏色的混合，創(chuàng)造對比，對比度越大越好。
那么，如何創(chuàng)建更好的對比度呢？
1.不要使用一種不同字體大小的權重來創(chuàng)建對比度和層次結構。
2.相反，主要內容使用粗體和深色樣式，次要內容使用較小和較淺樣式。
3.創(chuàng)建三種不同顏色的文本（見下面的示例）。
4.不要害怕在項目上應用大的字體間隙（即24px標題、16px正文文本、10px meta等）。間隙越大=對比度越好。
5.記住，對比度=字體大小+字體粗細+顏色
6.最后，一定要檢查它的對比度。
我們都知道使用黑色文字顏色（＃000）會給讀者帶來眼睛疲勞，因此我們的解決方案是創(chuàng)建深色變體作為替代方案。但是，我們可以使用具有不同不透明度的黑色作為解決方案，而不是選擇3個或更多十六進制顏色值：
在上面的示例中，我使用黑色作為我的主顏色，并根據(jù)應用層次（即主內容、輔助內容等）降低其不透明度。
我們中的大多數(shù)人都不擅長選擇正確的顏色組合，每當我們看到一個精心編排的調色板設計時，我們都會問自己“他們是如何做到的？”“（就像下面的那個一樣）：
直到我了解到，了解色彩并不僅僅是為了那些從一開始就有設計天賦的人，在Hue，飽和度，亮度（HSB）上進行簡單的加法和減法就能發(fā)揮作用（我們將對這個公式使用HSB而不是RGB）。如下所示：
那么，HSB中的加減法在哪里出現(xiàn)呢？
實際上，我們可以采用兩種方法，正如我們所見，這兩種方法的基色都相同，但在文件夾和條帶顏色方面有所不同。當我們開始時，總是記住第一個數(shù)字對應于色調，然后是飽和度，最后是亮度。
選項A
在選項A中，我們可以看到色調值123一直保持在形狀（圓形、文件夾、條帶）之外，而飽和度和亮度是發(fā)生變化的地方。
現(xiàn)在，當我們關注的是24的基底飽和度和96的亮度時，當我們?yōu)槲募A創(chuàng)建深綠色時，這兩個值都發(fā)生了變化。從24的飽和度變成40（增加+16），從96的亮度變成82（減少-14），這表明無論增加還是減少，飽和度的變化都需要與亮度成反比調整，以產生良好的對比度（反之亦然）。同樣的事情也發(fā)生在紙條上，以文件夾的飽和度和亮度為基值，我們從40移到44（增加+04），亮度從82減少到75（減少-07），由此得出公式：
較暗值=飽和度增加是亮度的降低
較亮值=飽和度降低是亮度的增加
每當我想知道在我的設計中應該使用什么顏色時，這個公式就幫助了我。我了解到最好的開始點是有一個基色，從那里開始調整飽和度和亮度，同時保持色調值不變。
選項B
在選項B中，同樣的原理仍然適用（我們上面的公式），但是色調值會改變。
RGB代表紅色、綠色和藍色，而CMY代表青色、洋紅和黃色。這些術語在我剛開始的時候并沒有對我有任何重要性，直到我發(fā)現(xiàn)使用RGB和CMY進行顏色組合時。
現(xiàn)在在選項B中，如果我們想要基色的顏色有一個更暗的變化，我們需要做的就是將顏色選擇器移動到調色板中最近的RGB所在的方向，或者將其移動到CMY的方向以獲得更亮的變化。例如：
由于我們想要創(chuàng)建一個更暗的基礎顏色b9f4bc（圓形背景），這將應用于我們的文件夾圖標，我們需要移動我們的顏色選擇器到最近的RGB所在的方向（在本例中是藍色）。但是如果我們想要一個更輕版本的文件夾，我們將把選擇器移到左邊，靠近CMY（在本例中是黃色）。
*更常見的是，RGB會導致較暗的變化，而CMY會導致較淺的變化。
將顏色選取器移動到所需的變體后，現(xiàn)在我們將在選項A中應用公式，這將導致我們具有此顏色組合：
青色、洋紅、黃色（CMY）+選項A公式=較淺的變化
除了在兩個組之間添加一條線以顯示分隔之外，在兩組之間使用一個較大的空間是一個更好更容易的解決方案。
彼此接近或接近的物體往往被組合在一起
從上面的例子中，我的目標是通過在標題和它的作者之間使用一個24像素的大空間間隙來創(chuàng)建一個分離。
除了使用線條外，在行中添加顏色背景對用戶閱讀非常有幫助，而且對我們的設計師來說也會更享受。
盡量保持我們界面的整潔
最后，如果您要創(chuàng)建一個像上面這樣的列表設計，請將項目符號、標志符號或數(shù)字放在空白處以突出顯示列表。這將使用戶的可讀性流不間斷，更清晰。
