UI設(shè)計中如何用好明亮的顏色?

對平面設(shè)計師、UI設(shè)計師等從事視覺設(shè)計類工作的人來說,合理應(yīng)用色彩是個不可或缺的關(guān)鍵技能。特別是隨著扁平化設(shè)計和Material Design設(shè)計規(guī)范的日益普及,色彩理論知識也扮演著越來越重要的角色。

從娛樂設(shè)施到商務(wù)App和網(wǎng)站,明亮的色彩和漸變被運用在各種電子產(chǎn)品的界面上。然而對于明亮顏色對用戶體驗的影響依然存在一些爭議。這篇文章就從優(yōu)勢和劣勢兩個方向出發(fā),論述了明亮色彩在UI設(shè)計中的利與弊。

一、明亮色彩的優(yōu)勢

01增強可讀性和易讀性

在進行配色時,提升內(nèi)容的可讀性和易讀性是設(shè)計的核心出發(fā)點。可讀性是指用戶獲取內(nèi)容的難易程度,易讀性指用戶識別特定字體的速度。

明亮色彩形成的鮮明對比,可以讓其中的元素變得更突出,增強了可讀性與易讀性。然而,高強度的色彩對比也不總是好的,如果內(nèi)容與背景的顏色對別過于強烈,會增強視覺壓力,讓文字變得難以閱讀和瀏覽。這就是為什么我們建議設(shè)計師把內(nèi)容和背景的對比設(shè)計在一個適中的位置,只有在需要強調(diào)的內(nèi)容處使用高強度的對比。

Big City Guide

02明確導(dǎo)航和增強直覺交互

對任何一個數(shù)字產(chǎn)品來說,視覺層級是構(gòu)建清晰導(dǎo)航和直覺交互系統(tǒng)的關(guān)鍵要素。多種UI元素被有機結(jié)合在一起,通過顏色等物理屬性,構(gòu)建出讓大腦可以清晰辨識的內(nèi)容。

色彩通過在用戶心目中留下的不同印象,構(gòu)建出了自己獨特的色彩層級。紅色和橘色屬于濃重的顏色,而白色和乳白色則顯得輕薄。明亮的色彩更容易被人感知,因此設(shè)計師通常把它們用于強調(diào)或形成對比。此外,把相同的顏色運用在不同的元素上,你會發(fā)現(xiàn)這些元素之間仿佛有了某種聯(lián)系。例如你可以把購買按鈕設(shè)計成紅色,這樣用戶在需要下單的時候會更下意識的找到它(因為紅色總是跟支出聯(lián)系在一起)。

 

03增強辨識度

明亮的色彩能引起人類大腦強烈的反應(yīng),這也是為什么明亮的色彩組合會更容易被識別和記憶。相比于清淡的色彩搭配,顏色豐富的UI設(shè)計更容易被凸顯出來。當然,這種設(shè)計方式要綜合考慮到目標用戶的喜好和市場調(diào)研的結(jié)果。

如果一個公司的logo或者品牌形象中有運用到鮮明的色彩搭配,那么把這個色彩搭配運用到公司的App或者網(wǎng)站設(shè)計上是個不錯的方法。既可以為公司所有的展示渠道提供統(tǒng)一的視覺解決方案,又能提升品牌辨識度。

Book Swap App

 

04營造情緒和氛圍

顏色可以影響人們的心情和行為,營造特定的氣氛,傳遞特定的信息并促使用戶做出期望的行動。人們會不知不覺對顏色做出反應(yīng)。

一項名為色彩心理學的研究指出一旦我們的眼睛接收到一種顏色信號,大腦就會發(fā)出指令,讓內(nèi)分泌系統(tǒng)釋放出一種可以調(diào)節(jié)情緒的荷爾蒙。精心配制的顏色可以營造出向用戶傳遞特定信息的特定氛圍,讓用戶不由自主地產(chǎn)生行為。例如,如果一個UI設(shè)計師需要設(shè)計一款與自然和園藝相關(guān)的產(chǎn)品,那么他很有可能會選擇綠色或藍色作為主色。這樣用戶一眼看過去,就能立即聯(lián)想到這個產(chǎn)品是屬于特定類別的。

Booking Service

 

05打造時尚的外觀和風格

明亮的色彩和漸變引領(lǐng)著UI設(shè)計的主流趨勢?,F(xiàn)在你可以在各種各樣的數(shù)字產(chǎn)品中發(fā)現(xiàn)它們的蹤跡,即便是嚴格的商務(wù)風格也無法拒絕它們的魅力。

用戶界面上明亮的漸變色可以體現(xiàn)出先進的科技感和新奇的創(chuàng)造力。根據(jù)潮流趨勢而設(shè)計的移動App或網(wǎng)站通常看上去非常亮眼醒目,即使是在眾多產(chǎn)品的激烈競爭中也可以輕松吸引用戶的注意力。

Business Card App

二、明亮色彩的劣勢

01難以進行搭配

如果你以為色彩的搭配主要取決于直覺和審美,那么你就大錯特錯了。如果你想設(shè)計出和諧的視覺體驗,對于色彩本身以及色彩協(xié)同原理的基礎(chǔ)知識是必不可少的。

在UI設(shè)計中,越是明亮明亮的顏色就越是難以搭配。為了給用戶提供愉悅和舒適的使用體驗,設(shè)計師需要盡可能讓界面保持和諧。色彩調(diào)和是指設(shè)計中的色彩搭配可以最有力、最高效地迎合人們的感知。和諧的色彩搭配組合有助于用戶對產(chǎn)品形成良好的第一印象。色彩理論中定義了幾種基礎(chǔ)的色彩搭配方案,這些方案被證明可以有效提升設(shè)計師的工作效率,包括:

1. 單色:在單一色值基礎(chǔ)上調(diào)整明度和飽和度

2. 臨近色:使用在色相環(huán)上位置相鄰的兩種顏色進行搭配

3. 互補色:使用在色相環(huán)上位置相反的兩種顏色進行搭配,營造強烈的對比

4. 分離互補色:為主色選擇2種互補色,互補色為相鄰色;例如藍色為主色,互補色是黃色,同時使用紅色作為第2種互補色

5. 三色互補:三種顏色在色相環(huán)上間距相等,專家建議只選其中1種顏色作為主色,其他顏色作為輔助色。

6. 四色互補:選擇色相環(huán)上的四種顏色,其中兩兩互補。四種顏色所處的位置連接起來可以構(gòu)成一個矩形。

基礎(chǔ)色相環(huán)

02難以把控風格

在UI設(shè)計中,濃重的色彩既能快速塑造出特定的產(chǎn)品色彩風格,也能輕易破壞之。一個作品里如果出現(xiàn)太多艷麗的顏色,主要的元素可能會被淹沒在紛繁的色彩海洋中,無法凸顯。這也是為什么我們都建議設(shè)計師在進行色彩搭配時選擇6-3-1這樣的比例。

畫面主要部分的顏色至少要占到整體的60%,輔助色占30%,而最終奠定色彩風格的顏色不要超過10%。這樣的比例可以讓所有的視覺元素都得到合適的展示,為用戶提供最預(yù)約的視覺體驗。

03不一定適合所有用戶群體

用戶研究是產(chǎn)品設(shè)計的關(guān)鍵步驟之一。通過對目標用戶的研究和分析,設(shè)計師可以了解到用戶對產(chǎn)品的期望。不同的年齡、性別和文化背景可能形成不同的用戶偏好。例如:在兒童時期,人們可能尤為喜歡黃色,而當長大成人后,對黃色的偏好就逐漸降低了。成年男性和女性普遍喜歡藍色、綠色等冷色系,而與女性不同的是,男性通常更為偏好黑、白、灰這類無色相的顏色。

明亮的色彩也是如此。即使你在為一個娛樂型App做設(shè)計,你也要考慮到某些特定的目標用戶。例如中年人通常喜歡清亮的用戶界面,他們不太能接受屏幕上出現(xiàn)太明亮的顏色,這些顏色會分散他們的注意力。

 

04在移動端屏幕上反差過于強烈

就像我們前面提到的,明亮的顏色可以制造鮮明的對比,并以此來提升頁面的可讀性和易讀性,同時還可以突出特定的界面元素。然而在移動端,頁面空間有限,并且使用場景多種多樣,過于強烈的對比可能會產(chǎn)生反作用。

當一個擁有強烈色彩對比的頁面,搭配以狹小的屏幕,復(fù)雜的環(huán)境光和明亮的字體闖入用戶的視覺時,會引起用戶的不適。因此當設(shè)計師在頁面中使用明亮色彩時,需要注意控制顏色之間的對比強度,讓用戶擁有一個良好的閱讀體驗。

Night in Berlin App

總結(jié)

顏色是設(shè)計師最有力的武器之一,同時,和其他設(shè)計元素一樣,它有它自身的優(yōu)勢和局限。在使用顏色進行設(shè)計時,你需要進行綜合和全面的考量,才能設(shè)計出實現(xiàn)設(shè)計目標的最佳方案。

 

 

原文地址:https://tubikstudio.com/bright-colors-in-ui-design-strong-weak-sides/

每天更新,
全站高品質(zhì)素材免費下載!