UI設(shè)計(jì)如何配色

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

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

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

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

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

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

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