網(wǎng)站設計

Website development

網(wǎng)站設計用戶體驗必知的色彩基礎知識

發(fā)布時間：2016-07-10 10:35:03

編者按：色彩的含義和對于網(wǎng)站設計用戶體驗的影響算的上是基礎的色彩知識了，在開始做配色方案滿腦子漿糊的階段，這些色彩知識可能會非常有用~

緊跟上次的文章《從這里入手！讓你的設計擁有高轉化率的配色知識簡明指南》，咱們繼續(xù)探討色彩對于網(wǎng)站設計的影響。色彩和形象是用戶視覺感知中快也是直接的元素，無需語言和文字，色彩會在第一時間通過眼球反饋到大腦，觸發(fā)感受，影響情緒。不同的色彩能夠給予用戶不同的刺激，喚醒用戶不同的感受，所以，今天的文章簡單總結一下不同色彩能帶來的效果，在情緒上的作用，通過案例展示它們是如何影響用戶體驗設計的。

紅色

危險，重要，激情

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

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

0-Kbmq9a1HvQCWYZsH

Netflix 和 YouTube 都將紅色作為主色調(diào)。

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

0--kEpII4A9hFc_tIH

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

另外一方面，紅色同“熱量”一直緊密關聯(lián)。

0-YHOcibuOWyIMSf95

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

橙色

信心，能量，樂觀

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

0-vx7qwdzo1XcKBmUe

電信運營商Orange 的海報

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

1-wDN4CdRVt3t_ivBuKCBuLg

黃色

注意，提醒，快樂

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

1-6WXAvozqJHOAHQbpPGCYLg

Breitling 使用黃色的CTA按鈕來提醒用戶“發(fā)現(xiàn)”

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

0-hOuOkeALZH6J8auF

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

綠色

生長，自然，成功

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

1-7-9N2IfvfL5loPpU7OsW-w

Organic Food 的網(wǎng)站中大量使用了綠色。

1-bHPuzfSPJAfpNw5hhbiy7w

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

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

1-9podIfElOGoxiuiaIdmV-g

藍色

信任，舒適，放松

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

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

1-9kL3TpoHfJK3LrP1z5ta0A

Calm APP 就將淺藍作為主色調(diào)。

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

0-_K-BARE0hMVGtz_L

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

紫色

奢華，浪漫，創(chuàng)意

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

0-xRM24fuSxtyCFDys

所以，當今許多奢侈品牌選擇紫色作為主色調(diào)。

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

1-zyo4Nj47BGH4uj9LngO7Vg

Google Forms 將其主色調(diào)更新為紫色了。

粉色

女性化，天真無邪，青春

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

0-OvtquMgmgJC8leCg

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

0-7IYh7HmbDyJTz16S

棕色

保守，地球，穩(wěn)定

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

1-je2pzlhvZiHIlSuCdS8y_Q

德芙巧克力的網(wǎng)站設計幾乎整個都是用的棕色，通過不同色度色調(diào)的棕色相互搭配。

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

黑色

正式，權力，老練

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

0-fISP1okLvfXV_p7z

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

0-RcgeyVfFDVniwOmF

白色

新鮮，清潔，健康

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

1-RA0XibXRF__j0aRA7-SOfw

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

1-EeJwakyNtwF_iR2nIi3yWQ

灰色

正式，重力，成熟

棕色代表中性。不論你的網(wǎng)站是使用的冷色調(diào)還是暖色調(diào)，加入灰色能夠創(chuàng)造出該色系下不同色調(diào)的色彩。

1-5geaBRMlkgFR9N1yynqqqw

當灰色用作主色調(diào)的時候，它會給人一種拘謹?shù)挠∠?，但是這并非是壞事。Dropbox 就是使用灰色的CTA按鈕設計，用戶能夠非?？焖俚恼业胶线m的按鈕。

1-cD6OVPJT9SfM7dDEXDCVVA

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

1-LE9hm32zdK6R0tD1Sg2Ahg

淺灰色的按鈕是適合用來表示按鈕的無效狀態(tài)的。

1-b0sbt_hrRqihQarw6sR11w

原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設譯文：@陳子木

原創(chuàng)不易，未經(jīng)授權，嚴禁轉載

原文地址：http://mpian.cn/i,72,6603,0.html

上一篇：線下傳統(tǒng)企業(yè)互聯(lián)網(wǎng)轉型該怎么做？

下一篇：網(wǎng)站建設中要注意404代碼的運用

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風
格設計
程序設
計研發(fā)
資料錄
入優(yōu)化
確認交
付使用
后續(xù)跟
蹤服務
+86 10 64758810
18510861135

熱門標簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務態(tài)度好。值得你的信賴！

譚嬌
技術好，設計精良，操作便利，很專業(yè)！配套的服務和后續(xù)的服務都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理