色彩的意義!用戶體驗設計師必知的色彩基礎知識

      作者:
      分類: 觀點/經驗
      2016-07-12
      1940

      編者按:色彩的含義和對于用戶體驗的影響算的上是基礎的色彩知識了,在開始做配色方案滿腦子漿糊的階段,這些色彩知識可能會非常有用~

      咱們探討色彩對于用戶體驗設計的影響。色彩和形象是用戶視覺感知中最快也是最直接的元素,無需語言和文字,色彩會在第一時間通過眼球反饋到大腦,觸發感受,影響情緒。不同的色彩能夠給予用戶不同的刺激,喚醒用戶不同的感受,所以,今天的文章簡單總結一下不同色彩能帶來的效果,在情緒上的作用,通過案例展示它們是如何影響用戶體驗設計的。

      紅色

      危險,重要,激情

      紅色是最強有力的色彩之一,它能展現愛的炙熱,也能反映戰爭的慘烈。英文當中的“to see red”,中文中的“見紅”都能夠很好的反映出這種色彩中蘊含的情感色彩。

      通常而言,紅色的元素更容易被人注意到,它的強調作用讓使用這一色彩的部分顯得更為重要,當然這一部分本身是提示還是警告,是好是壞就是另外一個問題了。

      1.jpgNetflix 和 YouTube 都將紅色作為主色調。

      紅色可以用作警告色,自然界中生物的充滿警示性的紅色皮毛,表示停止和警告的交通燈都是紅色。但是紅色的含義會根據場合、用量和設計而表示不同的含義。少量的紅色常常能夠很好的起到高亮的作用,而過量使用可能讓氛圍顯得不是那么輕松。

      2.jpg

      相比于“取消”的按鈕,紅色的“刪除”按鈕顯得警示意味明顯。

      另外一方面,紅色同“熱量”一直緊密關聯。

      3.jpg

      智能家居設備Nest使用紅色表示加熱模式。

      橙色

      信心,能量,樂觀

      和紅色同為暖色系的橙色同樣有著“激勵”的一面,不過程度相對會輕一些。橙色不像紅色那么富有侵略性,但是同樣充滿活力,橙色經常出現在與健康相關的場合下,比如維他命C(當然這和飽含維生素的橙子分不開)。

      4.jpg

      電信運營商Orange 的海報

      橙色是俏皮而樂觀的,非常適合于出現在休閑場所。不過對于企業而言,橙色并不是首選的色彩,有研究顯示,橙色會給人一種廉價的感覺。不過,Hipmunk 基于自身的配色方案很好的運用了橙色。不論廉價與否,一個提示性效果明顯的CTA按鈕,在藍色白色為主的頁面中總是相當顯眼的吧?

      5.jpg

      黃色

      注意,提醒,快樂

      黃色其實是一種矛盾而有趣的色彩,它同時包含了快樂和焦慮兩重情緒。黃色不僅僅能夠表現經歷充沛、樂觀的情緒,但是同時它還是用作警示、禁止和提示的色彩。

      6.jpgBreitling 使用黃色的CTA按鈕來提醒用戶“發現”

      當黃色同黑色搭配到一起的時候,整體效果會醒目不少。這也是為什么世界上許多城市的出租車都選擇了黃黑搭配的配色,這樣的搭配讓行人很好的同其他的車輛區分開來,注意到。

      7.jpg

      當然,黃色的選取和情緒傳達也是有規律的。淺黃色通常會顯得更加陽光,而色調更暗的黃色(比如金色)則通常顯得更加嚴肅,給人的感受也更加厚重和復古。

      綠色

      生長,自然,成功

      植物和自然同綠色在視覺上有著天然的聯系,所以作為含義的自然延伸,綠色也具有生長、健康的含義。

      8.jpg

      Organic Food 的網站中大量使用了綠色。

      9.jpg

      色彩的飽和度其實是非常值得注意的。

      高飽和度的綠色會給人非常振奮、富有動態的感受,非常的搶眼,這也是為什么CTA按鈕大多會選擇高飽和度的綠色。

      10.jpg

      藍色

      信任,舒適,放松

      藍色是UI設計中最重要也是使用的最頻繁的色彩。不同的色調和色度的藍色能夠營造出不同的氛圍,傳遞出不同的情緒。深沉的藍色能夠給人憂傷的感受,英文俗語中的“Feeling Blue”說的就是這個。

      淺藍色能夠讓人聯想到天空和水面,給人以清新、自由和沉靜的感受。這種放松、友好同樣可以轉化為內在的信任,所以,銀行也常常會使用這樣的藍色。

      11.jpg

      Calm APP 就將淺藍作為主色調。

      最著名的兩大社交媒體Facebook和Twitter 不約而同的將藍色作為主色調并非巧合。

      也有傳言說,扎克伯格使用藍色是因為他是色盲,使用其他的色彩他并不能完全分辨。

      12.jpg

      紫色

      奢華,浪漫,創意

      紫色之所以有奢華的內涵,很大程度上是因為它在歷史上很長一段時間中都是王室和貴族專用的色彩,這一點成就了它高端和奢侈的文化特質。

      13.jpg

      所以,當今許多奢侈品牌選擇紫色作為主色調。

      由于紫色當中還含有紅色的光譜,所以它本身還帶有一些“激情”的特質,類似薰衣草紫這樣的色彩尤其明顯。

      14.jpg

      Google Forms 將其主色調更新為紫色了。

      粉色

      女性化,天真無邪,青春

      粉色應該是最甜蜜的色彩之一,所以這種色彩同樣會給人一種嬉鬧玩樂的感受,頗為孩子氣。這就是為什么在很多時候選擇粉色能夠讓用戶感到愉悅。

      14OvtquMgmgJC8leCg.gif

      實際上,粉色并不是任何時候都代表著女性化。過度使用粉紅色會讓部分相對更加傳統的用戶感到惱火。

      15.jpg

      棕色

      保守,地球,穩定

      棕色其實并不適合絕大多數的網站,而英國倫敦甚至有“審紳士不穿棕色”的俗語。不過對于有些場合,棕色能夠很好的勝任。棕色能夠營造出鄉土、老派的感受,非常適合農業、戶外相關的頁面。棕色還可以同木材聯系到一起,給人穩定和可靠的感覺。

      16.jpg

      德芙巧克力的網站設計幾乎整個都是用的棕色,通過不同色度色調的棕色相互搭配。

      一般說來,低飽和度的棕色適用于菜單、控制面板和背景。

      黑色

      正式,權力,老練

      黑色是所有色彩中最強有力的,它甚至比紅色更快吸引用戶的注意力,這也是為什么文本和強調默認是使用的黑色。當黑色在配色方案中起主導作用的時候,比如用作黑色背景,它可以和其他色彩一樣營造特定的情緒。

      17.jpg

      當黑色同銀色、灰色結合起來使用的時候,它可以呈現出老練和成熟的感受。

      18.jpg

      白色

      新鮮,清潔,健康

      就像和它正好相反的黑色一樣,白色可以和它周圍的色彩搭配起來,作為次要配色而存在。

      19.jpg

      當白色作為主色調而存在的時候,它的干凈和純凈的特質就具有壓倒性的優勢了。如果你的網站上使用的白色過多導致整體看起來過于單調,可以用白色的分支諸如象牙白和奶白色來讓整個設計更加立體。

      20.jpg

      灰色

      正式,重力,成熟

      棕色代表中性。不論你的網站是使用的冷色調還是暖色調,加入灰色能夠創造出該色系下不同色調的色彩。

      21.jpg

      當灰色用作主色調的時候,它會給人一種拘謹的印象,但是這并非是壞事。Dropbox 就是使用灰色的CTA按鈕設計,用戶能夠非常快速的找到合適的按鈕。

      22.jpg

      同樣的,你還可以使用相應的內容和圖像來規避色彩本身“陰郁”的感覺,讓用戶關注更吸引人的元素。

      淺灰色的按鈕是最適合用來表示按鈕的無效狀態的。

      24.jpg

      1
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 一区二区三区观看| 精品亚洲AV无码一区二区| 亚洲爆乳精品无码一区二区| 日韩伦理一区二区| 亚洲一区二区三区在线观看蜜桃| 视频一区二区三区在线观看| 亚洲欧洲专线一区| 亚洲国产视频一区| 人妻无码视频一区二区三区| 亚洲国产一区二区三区| 精品中文字幕一区在线| 免费萌白酱国产一区二区| 中文字幕乱码亚洲精品一区| 精品亚洲A∨无码一区二区三区 | 日韩国产免费一区二区三区| 成人无码AV一区二区| 中文字幕人妻无码一区二区三区| 国产成人高清视频一区二区| AV怡红院一区二区三区| 色一情一乱一伦一区二区三区日本| 精品国产一区二区三区久| 欲色aV无码一区二区人妻| 秋霞日韩一区二区三区在线观看| 亚洲国产精品无码久久一区二区| 亚洲综合无码AV一区二区| 日韩免费视频一区二区| 一区二区三区四区视频| 亚洲一区二区久久| 国产色综合一区二区三区| 丰满人妻一区二区三区免费视频| 亚洲午夜日韩高清一区| 国产vr一区二区在线观看| 久久久精品一区二区三区 | 国产Av一区二区精品久久| 精品国产日韩亚洲一区在线| 国产无人区一区二区三区| 国产福利电影一区二区三区久久久久成人精品综合 | 中文字幕AV一区二区三区| 激情无码亚洲一区二区三区| 成人久久精品一区二区三区| 色一乱一伦一区一直爽|