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