色迷心竅:如何用色彩喚醒用戶的情感認(rèn)同?

2 評(píng)論 11213 瀏覽 61 收藏 17 分鐘

沒(méi)人希望你能成為米開(kāi)朗基羅,但對(duì)顏色使用的基本了解是網(wǎng)頁(yè)設(shè)計(jì)的堅(jiān)實(shí)先決條件。

顏色在潛意識(shí)里影響我們的思維和理性。我們一直面臨著顏色的選擇,從決定早上穿什么顏色的衣服開(kāi)始,通常,我們會(huì)根據(jù)色彩傳遞的情緒和意愿來(lái)選擇穿什么衣服。比衣柜的選擇更重要的是你的品牌或網(wǎng)站的色彩選擇。

顏色研究和規(guī)劃是設(shè)計(jì)過(guò)程的重要部分,在開(kāi)始設(shè)計(jì)之前,必須選擇適當(dāng)?shù)念伾杂行У貓?zhí)行品牌,價(jià)值傳遞和整體色調(diào)。

那么我們?nèi)绾卧诰W(wǎng)頁(yè)設(shè)計(jì)中使用顏色創(chuàng)造正確的情感呢?

在人類歷史上,大師級(jí)畫家和其他藝術(shù)家操控色彩的能力得到了全世界的認(rèn)可。現(xiàn)如今,色彩的這種藝術(shù)形式在商業(yè)中得到了廣泛應(yīng)用,一開(kāi)始是在廣告行業(yè),現(xiàn)在是被用于網(wǎng)頁(yè)設(shè)計(jì)。色彩高深莫測(cè),顏色使用的技能也得到不斷改進(jìn)。

我們將探索色彩理論和配色方案的基本原理,然后檢查某些顏色的情感效果。

顏色理論

與顏色相關(guān)的主題浩如煙海,所以這里我們只談與 UI 設(shè)計(jì)相關(guān)的部分。我們可以將顏色理論分為 Web UI 設(shè)計(jì)的三個(gè)部分:

對(duì)比度

每一種顏色的陰影都有一個(gè)相反的 – 對(duì)比度遠(yuǎn)遠(yuǎn)大于任何其他顏色的色彩與之對(duì)應(yīng)。你可以使用下面的色輪來(lái)找到每個(gè)特定顏色的對(duì)面。只需在圓圈的另一端找到顏色。

互補(bǔ)

顏色并非總是相互矛盾,互補(bǔ)的顏色互相強(qiáng)調(diào),與對(duì)比色相反,它們交相輝映出最好的彼此。這些是在色輪上彼此相對(duì)的顏色,例如,紫色的補(bǔ)充是綠色的。

活力

每種顏色都會(huì)引起特定的心情:溫暖的顏色(紅色,橙色,黃色)傾向于激勵(lì)用戶,使他們更加警覺(jué),而較暗的色彩(綠色,藍(lán)色,紫色)往往更加輕松和寧?kù)o。 CNN 在其官網(wǎng)的頂部導(dǎo)航中使用紅色 banner 來(lái)提高警覺(jué)性,顏色決定適合該網(wǎng)站的突發(fā)新聞內(nèi)容。

網(wǎng)頁(yè)設(shè)計(jì)中的色彩理論不僅僅是一個(gè)視覺(jué)裝飾,它可以對(duì)你的業(yè)務(wù)產(chǎn)生改變游戲規(guī)則的影響。

顏色的情感含義

不能否認(rèn)情感和顏色之間的聯(lián)系:事實(shí)上,人類已經(jīng)記錄了中世紀(jì)以來(lái)顏色的心理影響。自然,任何網(wǎng)頁(yè)設(shè)計(jì)師都想利用這一點(diǎn),因?yàn)檎_的顏色能為你的網(wǎng)站創(chuàng)造正確的心情和氣氛。

紅色

傳遞:力量,重要性,青春

作為最刺激的顏色,紅色對(duì)于增加血液循環(huán)是如此有效,它代表著激情和力量,紅色是能吸引最多注意的顏色,所以通常被用于警告和重要通知。

紅色非常適合 No Way NSA 網(wǎng)站,其目的是喚醒對(duì)于來(lái)自 NSA 威脅的感知。在單頁(yè)網(wǎng)站的第一部分使用紅色是特別聰明,因?yàn)樗ㄟ^(guò)向下滾動(dòng)來(lái)提醒人們注意主要信息,同時(shí)生理誘導(dǎo)人們“走出危險(xiǎn)區(qū)域”。 當(dāng)然,這只會(huì)讓用戶參與更多的內(nèi)容。

然而,這可能對(duì)你不利,因?yàn)榧t色可以煽動(dòng)憤怒,或至少過(guò)度刺激。 如果你想要一個(gè)更輕松的氣氛,請(qǐng)謹(jǐn)用(或至少在較淺的陰影)或不用。

橙色

傳遞:友好,能量,獨(dú)一無(wú)二

作為最暖的暖色調(diào),橙色是獨(dú)一無(wú)二的。 作為原色,它可以吸引和激勵(lì),作為次要的顏色,它也以不顯眼的方式保留這些屬性。橙色也有助于創(chuàng)造運(yùn)動(dòng)和能量的感覺(jué)。

除了作為品牌風(fēng)格的一部分,橙色與芬達(dá)所要表達(dá)的光明和卡通畫面網(wǎng)站很相襯。 顏色顯示創(chuàng)造力,同時(shí)保持熟悉度。

黃色

傳遞:幸福,熱情,復(fù)古(深色調(diào))

黃色是更通用的顏色之一,取決于色調(diào)。

明亮的黃色是最有活力的顏色,沒(méi)有紅色的嚴(yán)重性。 黃色的中間色調(diào)給人的舒適感,同時(shí)仍然感覺(jué)振奮。 深色調(diào)(包括金色)可以給人復(fù)古的印象,并提供永恒,智慧和好奇心的氛圍。

上圖是網(wǎng)頁(yè)設(shè)計(jì)公司 Flash Media 的例子,黃色的深色散出了能量,好奇心和權(quán)威。 這對(duì)于一個(gè)公司來(lái)說(shuō)很有意義,他們的咨詢和技能很有價(jià)值。

綠色

傳遞:增長(zhǎng),穩(wěn)定,金融主題,環(huán)保主題

綠色緩和了暖色調(diào)和冷色調(diào)之間的差距,雖然往往是更酷的顏色。這意味著綠色有與藍(lán)色相同的放松效果,但仍然保留一些黃色的激勵(lì)品質(zhì)。因此,它創(chuàng)造了一個(gè)非常平衡和穩(wěn)定的氣氛。 黑暗的陰影發(fā)出更多的錢/富裕的感覺(jué),你可以在 Ameritrade 上看到綠色。

藍(lán)色

傳遞:平靜,安全,開(kāi)放(更淺的色調(diào)),可靠性(更深色調(diào))

像黃色,藍(lán)色的意義根據(jù)色調(diào)大不相同。所有的藍(lán)色是普遍放松和安全,但較淺的陰影似乎更加友好,而較暗的似乎更沉悶。 社交媒體網(wǎng)站,如 Twitter 和 Facebook ,采用更輕或中等的色調(diào),而企業(yè)網(wǎng)站喜歡更重更可靠的色調(diào)。

活動(dòng)設(shè)計(jì)機(jī)構(gòu) Van Vliet&Trap 巧妙運(yùn)用深藍(lán)色,通過(guò)在背景中的花中使用藍(lán)色,他們?cè)谝曈X(jué)上提示他們?cè)诨ㄋ囋O(shè)計(jì)的專業(yè)知識(shí),同時(shí)也散發(fā)信任和可靠性。這是很有意義的,因?yàn)樗麄冇?jì)劃高可見(jiàn)度(和有點(diǎn)神經(jīng)緊張)事件,如婚禮。

紫色

傳遞:奢華,浪漫(淺色調(diào)),神秘(深色調(diào))

在歷史上與皇族相關(guān)聯(lián),紫色保留了豪華的語(yǔ)調(diào),甚至到頹廢的點(diǎn)。

紫色表示一般的奢侈和財(cái)富,使它成為時(shí)尚和奢侈品(甚至巧克力,像上面的Cadbury例子)的流行選擇。 較淡的色調(diào)如薰衣草(帶粉紅色的色調(diào))被認(rèn)為是浪漫的,而較深的色調(diào)似乎更加豪華和神秘。

黑色

傳遞:力量,柔順,復(fù)雜

作為 最強(qiáng)的中性色,黑色存在于幾乎每個(gè)網(wǎng)站。

它可以取決于其支持顏色而具有不同的特性,或者如果過(guò)量使用則占據(jù)所有這些特性。 它在中性的力量使它成為長(zhǎng)塊的文本的選擇的顏色,但作為一個(gè)基本的顏色可以給人的印象,柔滑,復(fù)雜,甚至邪惡。

對(duì)于大多數(shù)網(wǎng)站,黑色能創(chuàng)造瞬間的復(fù)雜性和永恒的感覺(jué)。當(dāng)與白色字體配合使用時(shí),優(yōu)雅的感覺(jué)特別強(qiáng)烈,并且設(shè)置了一個(gè)極簡(jiǎn)主義的布局,你可以在 Bose 的“Dream and Reach”微網(wǎng)站中看到。

白色

傳遞:清潔,美德,簡(jiǎn)單

白色與西方文化中的美德相關(guān)聯(lián),是與純潔和無(wú)辜最相關(guān)的顏色。

極簡(jiǎn)主義和簡(jiǎn)單的網(wǎng)站最常使用它作為背景。跟其他顏色相比,白色是最不吸引注意力的,所以它最能強(qiáng)調(diào)頁(yè)面上的其他顏色。

這對(duì)于藝術(shù)家 Kaloian Toshev 的 awwwards 獲勝網(wǎng)站尤其有效。白色背景吸引了對(duì)他充滿活力的藝術(shù)品的注意,同時(shí)創(chuàng)造了一個(gè)藝術(shù)畫廊優(yōu)雅的光環(huán)。

灰色

傳遞:中立,形式,憂郁

雖然在某些情況下,它可能看起來(lái)沉思或悲傷,但灰色在傳統(tǒng)或?qū)I(yè)領(lǐng)域是很流行的選擇。然而,灰色的最大優(yōu)點(diǎn)之一在于它的色調(diào)變化 – 熟練運(yùn)用,在白黑之間跳躍,陰影的改變,能體現(xiàn)出定制的美感。

當(dāng)與更明亮的顏色配合并呈現(xiàn)在一個(gè)平面的用戶界面,灰色背景的 awwwards 與它沉悶的風(fēng)格相比,感覺(jué)更有現(xiàn)代感。

米色

傳遞:周圍顏色的特點(diǎn)

米色是顏色的通配符,因?yàn)樗闹饕猛臼峭怀銎渌伾?/p>

米色很鈍,雖然可以用來(lái)象征謙卑。 然而,它通常承擔(dān)襯托它周圍的顏色的特點(diǎn),使其成為一個(gè)有趣的設(shè)計(jì)工具。由于這些原因,米色幾乎總是次要或背景顏色。

深色的米色(如 Dishoom 網(wǎng)站上)將創(chuàng)造一種土質(zhì)和幾乎紙狀的紋理,而較淺的色調(diào)感覺(jué)更新鮮。在這種情況下,圍繞品牌名稱的較淺的陰影,向外變暗,幫助給餐廳創(chuàng)造一種取自大地精華的新鮮食材的感覺(jué)。

象牙色

傳遞:舒適,優(yōu)雅,簡(jiǎn)約

在情感反應(yīng)方面,象牙色(和奶油)是白色的輕微變化。

象牙色比白色更溫暖,在體現(xiàn)同樣的簡(jiǎn)約和互補(bǔ)的同時(shí),能給人一種舒服的感覺(jué)。象牙色應(yīng)該被用來(lái)代替白色,以軟化它和更暗的顏色之間的對(duì)比度。對(duì)于 art in my coffee 網(wǎng)站,橙色/棕色被添加到奶油背景(看起來(lái)有點(diǎn)微灰色),以創(chuàng)造一種溫暖的感覺(jué)。

配色方案

每個(gè)網(wǎng)站都有一個(gè)配色方案,在它的主要區(qū)域使用主要顏色。正如我們一直在討論的,這些顏色的重復(fù)使用將影響用戶的心態(tài)和心情,通常是潛意識(shí),所以選擇它們會(huì)很好。

雖然有很多不同的方式來(lái)把顏色混合在一起,我們將關(guān)注3個(gè)最成功,最常見(jiàn)的:

三元組

三元組是三個(gè)結(jié)構(gòu)中最基本和平衡的。使用活力和互補(bǔ),但偏離了棘手的對(duì)比,三元結(jié)構(gòu)是最安全和最可靠的方案。在12步色輪上,選擇彼此相隔120度的任意三種顏色:一種顏色用于背景,兩種顏色用于內(nèi)容和導(dǎo)航。

復(fù)合(分裂互補(bǔ))

這個(gè)配色方案略微復(fù)雜,但如果用得好,可以收到不錯(cuò)的效果。該概念使用四種顏色:兩個(gè)對(duì)比對(duì)和兩個(gè)互補(bǔ)對(duì)。

下圖中 Florida Flourish 的配色就是很好的例子。紅色和綠色的對(duì)比與文本標(biāo)簽和植物,加上沙漠上面的藍(lán)色和橙色的天空。同時(shí),紅色/橙色和藍(lán)色/綠色的補(bǔ)充讓整個(gè)視圖很協(xié)調(diào)。

類似

最后有類似的方案,專注于互補(bǔ)色。真正突出了所選擇的顏色的活力,例如,一個(gè)紅橙黃色的類似方案將看起來(lái)非?;顫姾突顫?。 雖然這個(gè)方案相對(duì)容易拉開(kāi),訣竅是決定使用哪種顏色的活力,因?yàn)樗鼤?huì)被夸大。

通過(guò)使用藍(lán)色,綠松石和綠色的類似網(wǎng)站, Blinksale 創(chuàng)建一個(gè)柔和,甚至具有安全氣氛的網(wǎng)站。注意他們?nèi)绾问褂脤?duì)比的黃色來(lái)吸引注意他們的號(hào)召力。

我們剛剛討論的只是顏色理論如何增強(qiáng)你的 UI 設(shè)計(jì)的基礎(chǔ),但是沒(méi)有限制如何更深入的去探索對(duì)你網(wǎng)站色彩的應(yīng)用。

常用的配色協(xié)助工具

有很多工具能幫助你把顏色理論付諸實(shí)踐。通過(guò)查看預(yù)制的調(diào)色板,不需要從頭開(kāi)始。

  • Adobe Color CC?– 以前叫 Kuler ,這是最受信任的配色工具之一。
  • Paletton – 如果你需要一個(gè)快速上手,簡(jiǎn)單易用的工具,Paletton很適合上手。
  • Flat UI Color Picker – 對(duì)于平面UI設(shè)計(jì),這是一個(gè)非常有用和方便的顏色選擇工具。

沒(méi)人希望你能成為米開(kāi)朗基羅,但對(duì)顏色使用的基本了解是網(wǎng)頁(yè)設(shè)計(jì)的堅(jiān)實(shí)先決條件。正如我們剛才解釋的,顏色帶來(lái)了很多額外的效果,但有時(shí)卻很容易被忽視。無(wú)論你選擇什么顏色,他們對(duì)設(shè)計(jì)作為一個(gè)整體有一個(gè)明確的影響 – 從交流對(duì)比或相似性,到喚起精確的情緒。

 

本文由 @Zoran @ 吆喝科技 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很好的一篇科普

    來(lái)自北京 回復(fù)
  2. 很棒啊

    來(lái)自上海 回復(fù)