亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

零基礎(chǔ)學(xué)UI設(shè)計如何掌握這6大配色技巧?

發(fā)布時間：2024-03-25 18:14:36 瀏覽量：243次

如何讓界面的配色更和諧?

作為一名UI設(shè)計師(或視覺設(shè)計師)，對顏色的敏感度、顏色運(yùn)用常識總是非常重要的。今天的文章將幫助你更加了解UI配色中的技巧、理論知識以及如何運(yùn)用它們。

我們先從色輪開始。當(dāng)談到顏色、對比、和諧時，我們的腦海中必須有這樣的畫面:

這里有3個重要元素值得我們注意，分別是色調(diào)、明度和飽和度。下面我將逐一解釋

1色調(diào)

色調(diào)是最原始狀態(tài)下的顏色。例如藍(lán)色、綠色、黃色、紅色等，它不受任何光線和陰影的變化影響。這里有一個便于理解例子：色調(diào)就是你在色輪中看到的色彩，它與任何明暗或飽和度因素?zé)o關(guān)。

2明度

明度表示了色彩的明暗程度。當(dāng)我們走在路上，可以看到一些元素早上和晚上的顏色改變。例如，一座山的顏色是棕色，早晨的色調(diào)較淺，晚上的色調(diào)較暗。

在UI中，明度扮演著重要角色，不但有助于我們獲得良好的對比度，還能幫助我們在界面中構(gòu)建出不同的層次結(jié)構(gòu)。

以谷歌的Material Design為例，上圖中就使用了不同的明度來凸顯重要元素。

明度的不同表現(xiàn)可以給我們一種層次感。當(dāng)一種顏色的亮度為100%時，就會得到白色。當(dāng)一種顏色的亮度為0%時，它會生成黑色。下面這張圖片可以幫助大家理解。

3飽和度

現(xiàn)在我們來談?wù)勶柡投龋?strong>飽和度指的是色彩的鮮艷程度。當(dāng)我們提升顏色的飽和度時，色彩就會變得更強(qiáng)烈和生動。當(dāng)我們降低色彩的飽和度時，顏色就會變得更加黯淡，而當(dāng)我們把飽和度降到最低時，色彩就變成了灰色。

需要注意的是，由于在現(xiàn)實(shí)世界中，我們對顏色飽和度的表現(xiàn)是有限制的，所以在印刷、例如書籍或海報等領(lǐng)域不宜使用過多。而在數(shù)字世界，我們顯然擁有更多的可能性。

回到最初的話題——

當(dāng)我們談?wù)擃伾珪r，另一個重要的命題就是如何組合顏色。關(guān)于這個我們總是會想起曾學(xué)過的色彩理論課，尤其是對比與和諧部分，但對比并不總是意味著和諧。

從上圖我們可以看出，相反的顏色雖然會擁有更高的對比度，但相近的顏色卻之間更加和諧。

1. 規(guī)則60 30 10

「規(guī)則60 30 10」，這不是對超模的標(biāo)準(zhǔn)測量，而是成功組合顏色的比例。我們首先要選擇一種主色調(diào)，然后運(yùn)用到60%的空間中。再選擇一種次要色調(diào)，在30%的空間中使用，最后剩下10%的空間使用最后一種顏色。這一理論曾在室內(nèi)設(shè)計中被大量使用。

如上圖所示，空間中一共使用了三種顏色：白色，粉色和綠色，綠色給人以強(qiáng)調(diào)的感覺。如果我們把這個理論帶到界面設(shè)計中，強(qiáng)調(diào)色就可以作為我們的CTA(行動號召)的顏色。


2. 受大自然啟發(fā)

你知道人類的眼睛可以看到超過1000萬種顏色嗎?

大自然的調(diào)色板總是出乎我們意料的和諧。樹木、動物，空間、每樣?xùn)|西都有自己專屬的色彩，我們只需集中注意力發(fā)掘即可。

3. 暗≠黑、亮≠白


當(dāng)我們使用顏色來表達(dá)明暗時，有一個很普遍的錯誤，那就是使用不透明度的黑色表達(dá)陰影，不透明度的白色來表達(dá)光亮。

但如果我們借鑒一下現(xiàn)實(shí)生活，會發(fā)現(xiàn)黑暗總是有一些基調(diào)的。

如上圖中，檸檬的影子是非常深的綠色，而木板的影子是非常的深棕色，它們都不是黑色的。只有在完全沒有光線的情況下，才會出現(xiàn)黑色。

但是黑暗從來都不是黑色的，黑暗只是被物體明度遮蔽的色調(diào)。

4. 飽和度測試顏色和諧度

想要讓我們作品中的配色更加和諧，可以將色調(diào)從顏色中移除，只保留光和影，光影會給人以真實(shí)感和深度。

當(dāng)只剩下灰度時，我們可以清晰的觀察到明暗之間的差異，這將有助于我們調(diào)整色彩之間的明暗程度和透明度，以搭配出更和諧的配色。


5. 靈活改變色調(diào)

如今，不光界面變得越來越干凈，連排版和文字也變得更加清晰。

圖中左邊文本的顏色是黑色#000000，右邊是深藍(lán)色#15163D。

雖然它們看起來都是黑色的，但其中的差異卻相當(dāng)重要，為什么?請看下面的圖片。

雖然兩者都具有相同的不透明度，但其結(jié)果完全不同。一個是灰色的，另一個是灰藍(lán)色的。而當(dāng)我們使用某種色調(diào)的背景時，具有相同色調(diào)的文本顯然會更加和諧。

所以，要使顏色之間和諧，其中一個技巧就是讓它們存在一定數(shù)量來自對方顏色的色彩。

在上圖中，雖然最深的兩種顏色看起來都是黑色的，但由于右邊的色彩來源于紫羅蘭色，與黃色互補(bǔ)，所以既能達(dá)到對比，又能達(dá)到和諧。

那就是說用黑色和灰色不好？不！這完全取決于你想做什么。黑色是中性色，與任何顏色搭配都很好看。但是有時候，比如在這個例子中，由于有黃色的存在，所以添加了與之互補(bǔ)的其他色調(diào)，效果顯然更好。

6. 如何對色彩更敏銳？

我們中的許多人看到的顏色不夠飽和或不夠鮮艷，這是正常的，因?yàn)槭澜绮⒉煌昝?，顏色也不完美。我們大部分人都來自于一個只使用CMYK和顏色有限制的物理世界。而處于數(shù)字世界中時，顏色的可能性是很多的，我們必須做好準(zhǔn)備。所以我強(qiáng)烈推薦大家每天都要瀏覽一些靈感作品，汲取他們的優(yōu)秀之處。（小編偷偷插一句，我們每天都有最新鮮、優(yōu)質(zhì)的靈感作品推送哦~喜歡的小伙伴們一定不要錯過了~）

7. 總結(jié)

就像生活中的每一件小事一樣，配色也需要我們反復(fù)的練習(xí)。剛開始或許會非常困難和復(fù)雜,但只要堅(jiān)持下去，后面就會容易的多。重要的是：永遠(yuǎn)不要停止學(xué)習(xí)。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定