北京UI設(shè)計(jì)培訓(xùn)_UI設(shè)計(jì)技巧之明亮的色彩應(yīng)用

如今移動(dòng)端的發(fā)展，帶動(dòng)了UI設(shè)計(jì)的迅速發(fā)展。良好視覺的移動(dòng)應(yīng)用會(huì)更受青睞，這就對(duì)設(shè)計(jì)師合理的設(shè)計(jì)有一定的要求，而色彩正是營造美感的關(guān)鍵所在。色彩能吸引注意力，烘托氛圍，影響用戶的情緒、認(rèn)知和行為。

設(shè)計(jì)師們用亮系色彩讓用戶著眼于界面中的重要元素，并為之印象深刻。

下面是在設(shè)計(jì)中巧用亮系色彩的一些實(shí)用技巧：

單調(diào)

單調(diào)板能夠形成視覺刺激，能夠創(chuàng)造令人過目不忘的效果。

在使用亮系色彩時(shí)，單一調(diào)色板法則是目前流行的方式之一。單一調(diào)色板包括單一色調(diào)和色彩混合方式

(采用大膽的色彩來創(chuàng)建一個(gè)簡(jiǎn)單卻讓人印象深刻的外觀)

小技巧：使用黑白這樣的單一顏色，是在小屏幕上創(chuàng)造視覺驚喜的好方法。

(圖標(biāo)和簡(jiǎn)單的樣式創(chuàng)造了一個(gè)易于閱讀和互動(dòng)的組合)

雙色調(diào)

雙色調(diào)是圖像的半色調(diào)的復(fù)制，它帶來圖像的中間調(diào)和高光。

雙色調(diào)不僅能吸引人的注意力，而且它非常容易被創(chuàng)建。你可以在 Photoshop 中使用雙色梯度輕松做出這種效果。

這種曾經(jīng)應(yīng)用于印刷裝訂中的技術(shù)，在互聯(lián)網(wǎng)時(shí)代找到了新的生命。

(上圖：簡(jiǎn)約雙色調(diào)營造了一種商務(wù)范。)

雙色調(diào)效果不僅可以在大型桌面圖像中應(yīng)用，它們同樣可以在移動(dòng)設(shè)備上使用。

小技巧：使用雙色調(diào)創(chuàng)作主圖。選擇一張主題明確的高質(zhì)量圖片，而不是有著太多元素的圖片，因?yàn)楹笳邥?huì)有很多細(xì)節(jié)被忽略。

(上圖：一張極簡(jiǎn)圖像勝過千言萬語。)

當(dāng)你設(shè)計(jì)網(wǎng)站并想在你的圖像上創(chuàng)建雙色調(diào)的效果時(shí)，你可以不在現(xiàn)有圖像上做任何修改，只要在 Colofilter.css 上應(yīng)用 CSS 代碼即可。

選擇一種能反映照片情緒的色彩。你要知道，不同的顏色能喚起不一樣的情緒。

疊加

顏色疊加的設(shè)計(jì)是用色彩進(jìn)行聲明的一種方法。

通過使用與材料設(shè)計(jì)相關(guān)的一種明亮而飽和的色彩，你可以在半透明的框架上簡(jiǎn)單地應(yīng)用圖像或者視頻，從而營造現(xiàn)代感。

(上圖：顏色疊加增強(qiáng)了圖像的作用，并允許設(shè)計(jì)師校準(zhǔn)基調(diào)色彩。)

請(qǐng)考慮在卡片樣式元素中使用圖層疊加，以用于視頻內(nèi)容或者重點(diǎn)的強(qiáng)調(diào)。

(上圖：懸停動(dòng)畫卡應(yīng)用。)

小技巧：當(dāng)使用單一顏色進(jìn)行疊加時(shí)，需要考慮顏色的飽和度和透明度。較深的顏色組合(低透明高飽和)能讓人將注意力集中在色彩上；較淺的顏色組合能讓人將注意力集中在圖像上。

結(jié)語

沒什么設(shè)計(jì)技術(shù)能比與色彩打交道更有趣的了。色彩能營造戲劇感、深沉感甚至安詳感。

作為一名設(shè)計(jì)師，當(dāng)你使用色彩時(shí)，真應(yīng)該去試驗(yàn)一下不同的搭配組合。不論你鐘情于明亮、大膽的色彩，抑或黑白簡(jiǎn)約感，你都要記住

沒有不好看的色彩，只有不恰當(dāng)?shù)氖褂谩?/p>