UI設計如何配色

1、顏色是一種高度刺激的視覺語言。該元素主要用于使用戶在屏幕上進行操作或突出顯示他們必須知道的信息。即使是同一朵花，藍花和紅花所傳達的感覺也是不一樣的。它不僅傳達一種情緒或細微差別，而且還用于傳達信息。和紅綠燈一樣，綠色表示積極，黃色表示警告，紅色表示禁止。顏色像火一樣。正確使用會給你想要的結果，但過度使用會毀了設計。在數字產品設計中，您需要幫助用戶根據優(yōu)先級快速采取行動，您需要非常小心地使用顏色。讓我們找出它有什么屬性可以很好地處理顏色之“火”。顏色屬性要知道顏色是如何工作的，我們需要知道它們有什么屬性。顏色具有三個屬性。有區(qū)分獨特顏色種類的色相（hue）、區(qū)分原色深淺的飽和度（saturati

2、on）、區(qū)分明暗的明度（Brightness）。這三個屬性用于創(chuàng)建各種視覺效果。首先，形狀主要以亮度構成，顏色根據元素的功能進行分類。一般來說，我傾向于使用黑白和一種強調色。有時不止一種顏色用于不同的功能和重要的信息。顏色模型在使用Sketch或 figma 時，您經常會看到這些名詞。什么是 RGB，什么是 HEX？如何在數字環(huán)境中表達顏色？設計中使用的顏色，電腦處理的顏色，顯示器顯示的顏色，都因規(guī)格而異。色彩空間是指用于管理在此數字環(huán)境中表達的色彩的標準。在數碼產品中，顏色主要是RGB、HSL、HSB等，工作時主要使用HEX和RGB。RGBA（紅、綠、藍、透明度）：這是一種通過將光紅、綠、藍

3、三基色與表示透明度相結合來表現各種顏色的基本方法。HSV/HSB（色相、飽和度、值或亮度）：這是一種直觀且易于處理的顏色屬性）。HEX：從RGB轉換為十六進制的代碼，與其他元素相比具有可以一次復制粘貼的優(yōu)點，是一種通用的顏色值，在各種環(huán)境中都易于輸入。所有程序都使用 HSB 來選擇顏色并使用 Hex 顯示它們。當您想使顏色變暗時，在設計時要方便得多，因為當您看到 HSB 的情況時，HSB 可以更直觀地處理顏色屬性，您可以減少 B 而不是通過混合紅色、綠色和藍色來變暗的 RGBA。但是在開發(fā)的時候，每個屬性打個逗號打個逗號比較麻煩，所以我傾向于使用HEX，打碼最少，容易區(qū)分。主色和輔色我傾向于嚴

4、格和限制性地使用顏色，因為在數字產品 UI 中濫用顏色會干擾內容導航。我們定義了顏色層次結構來管理標準。服務中使用的顏色服務基本使用原色、二次色和黑白（Black, White）。根據服務的性質，我們可能會決定更多不同的顏色組合。服務中使用的原色在很大程度上遵循品牌的圖形慣例。主色：需要顏色的最常用的顏色；輔色：使用主色時使用的顏色，需要與其他元素區(qū)分開來；黑白：主要用于背景和文字，最亮和最暗的顏色。顏色層級既然已經決定了產品中要使用的顏色類型，在頁面上使用顏色時，請遵循信息的重要性?；竟羌苡珊谏桶咨M成，使用主和輔色強調功能或必須知道的信息等重要元素。在這種情況下，當認知或行為是特殊情況

5、下的重要因素時，與其他信息不同，使用適合含義的顏色。它突出了重要的最終行為要素和必須驗證的信息。色彩占比在決定使用哪些顏色之后，您需要決定使用什么比例。由于顏色是一種強烈的刺激物，因此您應該通過對所有元素使用顏色來避免眼睛疲勞。最舒適和可接受的比例可以利用室內使用的 60-30-10 規(guī)則。背景顏色使用 60% 和 30% 分配，10% 分配給要強調的元素或面向文本的服務?？紤]總量分配背景色后，在10%以內一點一點地添加點色來調整顏色比例。正如室內空間設計因目的而變化一樣，色彩匹配也適用于空間。對比如果顏色模糊，眼睛需要集中注意力才能看到細微差別，因此最好使對比度盡可能強。如果你處于必須模糊區(qū)

6、分顏色的情況下，你需要考慮元素是否真的足以通過顏色來區(qū)分它們。如果您決定以不同的方式表達一種顏色，則需要提供足夠的對比度以使該顏色與其他顏色明顯區(qū)分開來?？紤]背景顏色和與其他元素的相對關系調整顏色。顏色對比度遵循WCAG劃分的等級，主要以AA級為標準。A（最少）3:1AA - 4.5:1AAA 7:1這是對比度檢查的有用工具，用于測量背景顏色和文本之間的對比度水平。https:/colourcontrast.cc/顏色搭配即使您已經決定要經常使用哪種顏色，有時您也需要不同的顏色。在這種情況下，您需要根據色輪選擇與主色相匹配的顏色。所有元素主要用單一顏色表示，雖然是與主色相似的概念，但在需要區(qū)分

7、時使用類似顏色，補色用于用戶需要比任何其他元素更清楚地識別的信息。單色：重要信息使用主色，灰色區(qū)域使用與主色相同的色調；鄰近色：類似的概念，但在需要區(qū)分時使用類比；補色：當需要比其他元素更強烈地強調時使用。明暗對比如果難以用一種原色區(qū)分信息，則使用淺色和深色。此時，定義了比主色淺的顏色和比主色深的顏色，按照自然界的顏色變化規(guī)律，按照亮度-飽和度-色調的順序變換顏色。加深顏色：基于 RGB 的色調，增加飽和度并降低亮度；淡化顏色：基于 CMY 色調，降低飽和度并增加亮度。原因一：自然界顏色的變化在現實中，當光線強時，物體的色彩飽和度會變弱（想象一下，當你將手電筒放在蘋果的正前方時）。顏色出現是因為光被材料反射。反射太少會使它看起來很暗。當物體的顏色變亮時，飽和度降低，亮度增加，當物體的顏色變暗時，飽和度增加，亮度降低。原因二、色相本身的明暗度雖然黃色很亮，很難在白底上書寫，藍色很暗，很難在黑底上書寫，但很難想象不同顏色之間的亮度差異。你怎么知道在屏幕上看到的色調本身的亮度？我用illustrator調整了HSB的Hue并分配了12種顏色。我照原樣復制它，然后將其轉換為黑白。黃色和藍色是生成的，但其余顏色看起來不是很規(guī)則。為什么 180 度和 300 度的顏色更亮？比較每個數字的圖表，當它變?yōu)榧t色 綠色 藍色時，它會變暗，而當它變?yōu)榍嗌蠹t色黃色時，它會變得更亮。由于RGB和C