在UX設計中利用色彩創造情緒

發表於2016-03-25

在現在設計中,顏色的選擇在任何情況下都非常重要。在設計中,我們想通過無聲無語的方式表達設計,顏色就是其中最重要的關鍵。

在通常情況下,不同顏色喚起不同的感情。為了讓你認識到其中的奧祕,我們已經編寫了一個快速參考指南,涵蓋了每種顏色的獨特的作用,以及如何將它運用到UX設計中。

紅色

危險性,重要性,激情

在所有顏色中,其中一個表現力最強的顏色,表達戰爭和愛情的同時。俗話說,“看到紅色”突出了憤怒的顏色。

紅色元素更明顯,加上一個重要的意義,無論是好的還是壞的。淡紅色的圖片是主題是青春和愛情的好,而暗紅色強調力量和永續性,如可靠的朋友。

 
Netflix和YouTube使用紅色作為主要顏色。

紅色可以作為警戒色,如在交通燈和標誌,參考已從自然,紅色是作為威懾。但是,你應該小心的使用它,作為一個小走一段很長的路。這是一個偉大的顏色需要注意使用,但過量則會過於緊張。

 
消極的按鈕右邊的“刪除”有更高的對比度,左邊的中性取消。

最後但並不是最不重要的,紅色與熱的關聯。

 

 
紅色與熱的關聯

橙色

自信,樂觀

橙紅色在股票裡面意味著刺激增長但是增長程度較輕。橙色可以與健康有關,如維生素C。

 

橙色是一種活潑,樂觀的顏色,非常適合休閒場所,但是他不適合最要出現在企業網站中,一些研究表明,橙色給人感覺便宜或者更壞的東西。但是物業這個行業使用橙色效果是很好的方式.

 
Hipmunk

黃色

注意,幸福

奇怪的是,黃色代表幸福與焦慮。他通常是充滿活力與樂觀的。但是明亮的色調會有一種強調效果,這個方式經常使用在警告標誌上採用。

 

 
Discover the Model.

加上黑色可以獲得更多關注。一個最好的例子就是設計一個計程車,通過和黃色結合,可以獲得更多關注.

 

如果你使用黃色請注意下里面簡單的規則:淡黃色可以讓使用者感覺到陽光快樂,暗色調給人感覺很嚴肅以及古老.

綠色

增長,自然,成功

綠色讓人第一感覺關聯到植物上,因為大多數植物都是綠色的,它與生長和健康有關.

 

 
食品大量採用綠色的網站設計。

在色彩飽和度上要注意。

 

 
綠顏色的飽和度。

飽和的綠色給人感覺令人興奮和充滿活力,綠色的按鈕可以獲得更多關注,所以一般的執行按鈕都是使用綠色.

 

 
firefox

藍色

信任,舒適,放鬆

藍色是UI設計中的最重要的顏色之一,也是最常見的。根據對色彩和色調的改變,它可以代表不同的感情,思想和情緒。暗藍色能給悲傷的感覺。

淺藍色是天空和水的顏色,它可以提神,自由和平靜。這種放鬆的友好也會轉化為內在的信任,這就是為什麼它是經常使用的原因.

 

 
平靜的APP使用淺藍色作為主色調。

並非巧合的是,兩個最大的社會媒體,Facebook和twitter藍色為核心的色彩都使用。

 

 
傳聞:祖克伯曾經提到,他用藍色,因為他是色盲,所以他不能真正地看到任何其他顏色時,他設計的原創網站。

紫色

豪華、浪漫、創造力

高貴與皇室被紫色所代替。紫色暗示產品或網站比較華麗高階.

 

 
奢侈品牌的品牌使用紫色著色。

因為紫色週期回到紅色的光譜,它有紅色的激情的特點,尤其是淡如薰衣草。

 

 
谷歌更新的主題是紫色的。

粉紅色

溫柔,純真,青春

粉紅色通常是含糖的糖果色,所以顏色會有嬉鬧的氣氛,有點幼稚。這就是為什麼你可以新增一點粉紅色讓使用者高興的原因。

 
來源:Dribbble

粉紅色並不總是意味著女性。事實上,過度使用粉紅色的“女性特質”很容易激怒使用者。

 

 
你覺得呢?

棕色

保守主義、地球、穩定

倫敦的紳士不穿棕色。同樣的棕色不適合大多數網站,但對於那些比較完美的作品。棕色可以用於一個鄉村,老式的感覺,完美的戶外場所,甚至有機產品。木材的內涵也建議穩定性和可靠性.

 

 
德芙巧克力的網站有一個幾乎完全的棕色的網站設計,以不同深淺的用來抵消站點的不同部分。

在一般情況下,使用飽和色的棕色來作為選單、皮膚和背景。

黑色

正式,權力,成熟

黑色是最強的所有顏色,它吸引的注意力比其他顏色的更快,即使是紅色。這就是為什麼它是最常用在文字中。當作為一個配色方案的主要組成部分,如背景、黑色比任何顏色都適合創造自己的感情。

 

 
對比

結合銀色或灰色,它可以代表成熟,如上面的例子:

 

 
肖像

白色

新鮮、健康

黑色正好是它的相反色,白色顏色普其他顏色在它的周圍,使它為輔助色的首選。

 

 
iPhone6s

當白色是主色,其黑色具有壓倒性。如果你的白網站似乎太單一,試著白 的分支- 用象牙和奶油色組合。嘗試使用色調讓白色元素看起來不錯。

 

 
白色是一種卡牌色

灰色

形式,中立性、複雜性

灰色代表中立。如果你的網站或應用程式使用冷色,一個灰色的混合和一點冷色會補充它。如果您的網站使用暖色,一個灰色的混合和一點溫暖的顏色將補充它。新增到您的灰色色調,增加色彩飽和度。

 

 
互補

通過改變它的陰影,灰度可以在黑色或白色的特點。當作為一個主要的顏色,灰色給人居於形式的印象,但是這並不總是意味著壞事。Dropbox使用灰色突出按鈕免費註冊使用者能夠找到正確的按鈕,真的很快。

 

 
Dropbox是灰顏色的使用一個很好的例子。

您可以使用內容和相應的影象,以避免“憂鬱”的感覺,通過一個元素可以給人感覺強烈關注。

 

 
淺灰色的顏色最適合按鈕禁用(無效)狀態

 

 
按鈕顏色為灰色

結論

正確的設計決策才是使用者認為是正確的.

 

 
A/B測試轉換

顏色的使用是很重要的,有時候很多情況下沒有設定好通用的顏色。在一個網站或應用程式的東西,不一定適合另一個,從你的目標市場在設計過程的早期很重要。

相關文章