您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 視覺設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

如何巧用色彩打造動(dòng)人心弦的網(wǎng)頁設(shè)計(jì)

色彩心理學(xué)被廣泛地運(yùn)用到各個(gè)設(shè)計(jì)領(lǐng)域,這早已不是什么秘密。從日常的雜貨到LOGO設(shè)計(jì),色彩所起到的作用越來越大,它是給用戶傳遞信息的最重要的因素之一。

如何巧用色彩打造動(dòng)人心弦的網(wǎng)頁設(shè)計(jì)

  根據(jù)Kissmetrics 的說法,當(dāng)我們看到一個(gè)色彩的時(shí)候,信息會(huì)傳遞到大腦的下丘腦的某個(gè)區(qū)域中。接下來,信號(hào)會(huì)進(jìn)一步傳遞到腦垂體,然后到甲狀腺腺體。這也就意味著,色彩會(huì)刺激大腦和腺體分泌激素,引發(fā)出我們的情緒反應(yīng),并影響我們的行為。

  科學(xué)研究表明,色彩會(huì)影響情緒,會(huì)招致正面的情緒,也能帶來負(fù)面的影響,有的時(shí)候帶來的情緒與實(shí)際要的并不匹配。Kissmetrics 接著補(bǔ)充道,網(wǎng)站的訪客通常只需要大概90秒就能針對(duì)一個(gè)網(wǎng)站作出判斷和選擇,而在者其中,有62%~90%的因素是取決于某個(gè)產(chǎn)品的色彩。

  在UXPin的免費(fèi)電子書Web Design for the Human Eye 中我們曾說過,某個(gè)事物在給人第一印象的時(shí)候,色彩扮演著無可爭議的重要角色。

  色彩意味著什么

  每種色彩對(duì)于每個(gè)人而言都有著特定的含義,但是它的具體含義通常取決于他們所處的文化背景、個(gè)人經(jīng)歷和喜好。

  簡單說明這一點(diǎn),我們不妨看看下面的色卡。

如何巧用色彩打造動(dòng)人心弦的網(wǎng)頁設(shè)計(jì)-色卡

  事實(shí)上,色彩心理學(xué)在設(shè)計(jì)領(lǐng)域并不是一個(gè)精確的學(xué)科,個(gè)體差異非常明顯。社會(huì)因素,個(gè)人認(rèn)知,甚至性別也會(huì)對(duì)色彩感知產(chǎn)生影響。進(jìn)一步的研究發(fā)現(xiàn),產(chǎn)生影響的并不總是色彩本身,使用這些色彩的品牌與用戶之間的關(guān)系也會(huì)影響用戶對(duì)于色彩的感知。

  所以,如果你的設(shè)計(jì)是針對(duì)女性的,那么紫色會(huì)是一個(gè)相當(dāng)不錯(cuò)的選擇,因?yàn)樽仙谂允鼙娭衅毡槭軞g迎,但是對(duì)于多數(shù)男性而言,紫色并不太受歡迎。在下方的圖片中,紫色被運(yùn)用在巴黎歐萊雅的網(wǎng)頁中,效果非常不錯(cuò)。主體使用的黑白配色,黑色的頁頭頁腳看起來非常優(yōu)雅,紫色點(diǎn)綴其中,整體感非常不錯(cuò)。實(shí)際上他們的產(chǎn)品并不便宜,但是給人感覺比較高端。

  另外,使用白色的文本,讓人感覺平靜又足夠現(xiàn)代,紫色則被賦予了奢華、優(yōu)雅、女性化的含義。所有的這些都能夠在這個(gè)網(wǎng)站里查到。

  (想了解更多極簡風(fēng)的設(shè)計(jì)以及如何使用留白來營造現(xiàn)代感,可以看看這本電子書: The Elegance of Minimalism 和The Zen of White Space in Web Design )

  下圖是女性健康雜志的頁面,上面的Banner使用了粉紅色,導(dǎo)航設(shè)計(jì)更為大膽,除此以外網(wǎng)站其他的地方用色倒并不豐富。不得不說這樣的選擇非常有趣。

  首先,對(duì)于女性類的網(wǎng)站而言,粉紅色本身還是比較老套的,但是作為一個(gè)女性健康類的網(wǎng)站,這樣的配色和主體并不算是特別搭。

Women’s-Health

  當(dāng)我們繼續(xù)探索網(wǎng)站其他的部分,比如當(dāng)你打開減肥頁面的時(shí)候,導(dǎo)航欄上相應(yīng)的位置會(huì)變成粉色以示標(biāo)識(shí)。

Women’s-Health1

  色彩會(huì)影響用戶的心情和感受,盡管這個(gè)頁面的第一張圖片是隨機(jī)滾動(dòng)播放的,但是想想看,整個(gè)減肥相關(guān)的頁面幾乎被粉色淹沒了,適得其反。

  配色方案

  通常當(dāng)你準(zhǔn)備設(shè)計(jì)一個(gè)網(wǎng)站的時(shí)候,不會(huì)只使用一種色彩吧?你需要考慮整個(gè)網(wǎng)站的整體配色方案,單個(gè)色彩的選取,以及不同色彩之間的搭配。接下來,你還需要考慮不同色彩對(duì)于用戶的影響,搭配色與主色調(diào)之間的協(xié)調(diào),等等等等。

  這樣一來,就需要設(shè)計(jì)師對(duì)于色彩的混合搭配使用有更深入的考量了。下面三個(gè)基本的配色技巧,可以幫你搞定這一問題。

  #1: 三色搭配

  這是最基本的方法,也是最平衡的配色思路,使用互補(bǔ)的鮮艷色彩。在色輪上選取相互間隔120度角的三種色彩,分別來作為背景、內(nèi)容和導(dǎo)航的色彩。

  #2: 組合配色(拆分互補(bǔ))

  這種配色方案相對(duì)而言比較有難度,你需要通過一定的測試和探索才能獲取。如果搭配好了,效果非常驚艷。如圖所示,這種配色方案是選取色輪上相鄰的兩對(duì)對(duì)比色。

  #3: 近似配色

  這種配色的核心是選取連續(xù)的相鄰互補(bǔ)色,如果你想借此來取悅用戶的話,在選取的時(shí)候一定要謹(jǐn)慎小心。這種配色方式能夠突出色彩的活力,但是因?yàn)橄噍o相成,色彩和效果對(duì)比不會(huì)那么強(qiáng)烈,但是會(huì)更加夸張。

  所以,當(dāng)你開始考慮色彩的心理學(xué)屬性的時(shí)候,盡量將整個(gè)配色方案作為整體來進(jìn)行衡量,而不是單獨(dú)為某個(gè)部分選取一個(gè)色彩,以期它能與其他部分協(xié)調(diào)工作。

  看看下面的頁面,想想看,它會(huì)向用戶傳達(dá)怎樣的信息呢?

  1、背景色——深色的背景讓整個(gè)頁面看起來經(jīng)典、精益求精、沉穩(wěn)、正式且足夠“企業(yè)化”。當(dāng)你設(shè)計(jì)一個(gè)網(wǎng)站的是,“精益求精”的感覺總能給人良好的觀感。正式和企業(yè)化的屬性,則通常能讓訪客不會(huì)以玩樂的心態(tài)來看待這個(gè)網(wǎng)站,且能夠帶來一定的信任感。

  2、按鈕色—— 設(shè)計(jì)師在這個(gè)CTA按鈕(行為召喚按鈕)上使用了強(qiáng)對(duì)比的紅色,醒目且非常吸引用戶去點(diǎn)擊。相對(duì)而言,白色邊緣的幽靈按鈕在優(yōu)先級(jí)上明顯低于紅色的CTA按鈕。按鈕用色按鈕用色在整體配色中符合邏輯,位置清晰。

  3、文本色——白色的文本與黑色的底色形成明顯的對(duì)比,從整體配色方案上來看也非常搭調(diào)。另外和文字搭配的線條圖標(biāo)也采用了同樣的白色,在色彩上采用了高度一致的方案,露頭的文本暗示用戶需要向下滾動(dòng)。

  總體上來說,整套設(shè)計(jì)方案還不錯(cuò),中規(guī)中矩的黑白配,加上紅色之后,就顯得活潑起來了。由于紅色的使用相當(dāng)之可知,稍加點(diǎn)綴,不會(huì)顯得過猶不及,這一切讓整個(gè)配色脫穎而出。讓整個(gè)配色脫穎而出。

需要規(guī)避的用色

  棕色通常能給人以自然的感覺,但是這種色彩通常都不為男性所喜。但是在有的場合,棕色能讓人產(chǎn)生可靠和安全的感覺,這個(gè)時(shí)候使用還是挺不錯(cuò)的。

  作為一家著名的物流公司,UPS使用棕色能給用戶一種強(qiáng)烈的可被依賴的感覺。

  但是作為懷俄明州大學(xué)橄欖球隊(duì)的隊(duì)服的用色,這套配色方案被評(píng)為史上最差的設(shè)計(jì)方案。最有趣的地方在于,這套棕色的隊(duì)服大家一致認(rèn)為它非常的耐用,但是與此同時(shí)也 非常的難看。男性對(duì)于色彩的認(rèn)知在這一設(shè)計(jì)上體現(xiàn)得淋漓盡致。

  在女性用戶這邊,橙色也是相對(duì)不那么受歡迎的色彩,所以,如果你的客戶是女性的話,盡量避免這一點(diǎn)。

  當(dāng)然,這些規(guī)則大都是一些指引性的條目,它們通常都有上下文和使用場景,色彩只有和諧搭配起來才會(huì)看起來漂亮而合用。

配色和取色工具

  用現(xiàn)成的配色方案和調(diào)色板其實(shí)理所當(dāng)然的事情,你并不需要為網(wǎng)頁設(shè)計(jì)或者UI設(shè)計(jì)方案單獨(dú)創(chuàng)造色輪。

  Adobe Color CC – Adobe出品的配色工具,之前被稱為Kuler。

  Paletton – 這是一套為初學(xué)者準(zhǔn)備的取色工具。

  Flat UI Color Picker – 這是一套扁平化配色工具

  Mudcube Color Sphere – 內(nèi)置了一系列色彩主題,相應(yīng)的配色都包含了相應(yīng)的HEX代碼。

  Check My Colours – 這個(gè)工具是用來堅(jiān)持前景和背景的色彩組合的,它能提供正確的對(duì)比度檢測,確保色盲用戶也能正常分辨色彩。

  Color – 這個(gè)工具允許你用鼠標(biāo)在屏幕上取色,設(shè)置飽和度,并且提供相應(yīng)的HEX代碼。

案例分析

  網(wǎng)絡(luò)上有成千上網(wǎng)的網(wǎng)站,其中有許多不錯(cuò)的站點(diǎn),但是絕大部分和優(yōu)秀無關(guān)。不過下方的網(wǎng)站,正式優(yōu)秀的那波中的一員,它曾榮獲Awwwards 的每日最佳網(wǎng)站的頭銜。

  網(wǎng)站的背景色使用的是淺灰,同其中電動(dòng)車的配色同系。整個(gè)頁面設(shè)計(jì)簡單,超大的字體和小巧的車體形成對(duì)比,傳達(dá)出電動(dòng)車小巧靈活的特性。作為中性色的灰色,讓頁面中其他的色彩更加鮮艷也更加顯眼,對(duì)比明顯,也賦予了頁面以活力。同時(shí),灰色的主色調(diào),也強(qiáng)調(diào)了產(chǎn)品和品牌沉穩(wěn)大氣的一面。

  巨大的Go,配色開朗活潑,漸變和鮮亮充分展現(xiàn)了設(shè)計(jì)的現(xiàn)代性。很重要的一點(diǎn)是,藍(lán)色是男性和女性都非常喜歡的色彩,這一點(diǎn)使得網(wǎng)站是不針對(duì)性別進(jìn)行區(qū)別的。灰色還帶有克制和環(huán)保的特性,結(jié)合電動(dòng)車小巧的設(shè)計(jì),整個(gè)設(shè)計(jì)還在暗示產(chǎn)品的環(huán)保和安全的特性。

  總體而言,這個(gè)頁面的生活感和現(xiàn)代感和當(dāng)代都市人的狀態(tài)契合度非常高。

最后的注意事項(xiàng)

  色彩產(chǎn)品設(shè)計(jì)的重要部分,同時(shí)也是品牌設(shè)計(jì)中至關(guān)重要的一環(huán)。所以,在設(shè)計(jì)網(wǎng)站或者UI的時(shí)候,色彩傳達(dá)的意義必須同品牌契合,將品牌故事和意義 融入到設(shè)計(jì)到中來。通常情況下,設(shè)計(jì)師會(huì)直接從品牌的LOGO或者品牌設(shè)計(jì)指南來取色,盡管這樣會(huì)有局限,但是這確實(shí)可以讓事情變得更簡單。


[教程作者:@陳子木]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui2796.html
IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)
電商網(wǎng)頁設(shè)計(jì)—陰影與倒影的應(yīng)用
圖趣網(wǎng)微信
建議反饋
×