2018-7-30 ui設(shè)計(jì)分享達(dá)人
顏色心理學(xué)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
在設(shè)計(jì)的各個(gè)方面都被廣泛使用,這已不是什么秘密。從日常中使用的顏色,到品牌標(biāo)識(shí)和網(wǎng)站設(shè)計(jì),顏色是可以向用戶傳達(dá)特定消息的重要元素。
當(dāng)我們觀察一種顏色時(shí),我們的眼睛會(huì)向大腦中稱為下丘腦的區(qū)域發(fā)送信息。反過來,這會(huì)向腦下垂體發(fā)送更多信號(hào),然后再向甲狀腺發(fā)出信號(hào)。然后,這表明激素的釋放會(huì)導(dǎo)致我們的情緒,以及我們的行為發(fā)生波動(dòng)。
科學(xué)告訴我們,顏色會(huì)喚起情緒,導(dǎo)致消極,積極或不匹配的情緒。Kissmetrics接著說,網(wǎng)站訪問者只需90秒即可形成判斷或意見。除此之外,“62-90%的相互作用僅取決于產(chǎn)品的顏色?!?
正如免費(fèi)電子書Web Eye for Human Eye所描述的那樣,色彩在為用戶創(chuàng)造強(qiáng)烈的第一印象方面起著不可否認(rèn)的作用。
每種顏色對(duì)每個(gè)人都意味著什么,盡管這意味著我們的個(gè)人喜好和文化背景。
如需快速參考,請(qǐng)查看下面的顏色表。
通過動(dòng)畫網(wǎng)站和網(wǎng)絡(luò)演示給您的觀眾留下深刻印象。使用幻燈片,我們不會(huì)讓您從空白的板巖開始。您所要做的就是選擇您最喜歡的元素并將它們組合起來。每張幻燈片都經(jīng)過精心設(shè)計(jì),以滿足三個(gè)關(guān)鍵標(biāo)準(zhǔn):美學(xué),功能和可用性。通過這種方式,您可以無縫地協(xié)同工作,同時(shí)增強(qiáng)內(nèi)容的影響力。
創(chuàng)建一個(gè)網(wǎng)站
設(shè)計(jì)中的色彩心理學(xué)不是一門的科學(xué),研究表明它受個(gè)人感知的影響。性別等社會(huì)因素也會(huì)對(duì)顏色的感知產(chǎn)生影響。進(jìn)一步的研究發(fā)現(xiàn),產(chǎn)生影響的顏色本身并不總是如此,用戶對(duì)所使用的顏色的使用感覺是多么合適。
因此,如果你是為女性設(shè)計(jì),那么紫色是一個(gè)相當(dāng)不錯(cuò)的選擇,因?yàn)樗艿脚缘钠毡橄矏?,但是男性卻不喜歡(當(dāng)然,一般來說)。在下圖中,這對(duì)L'Oreal Paris來說效果很好。正如您所看到的,頁眉和頁腳是黑色的,這表示類和優(yōu)雅,因此您可以獲得產(chǎn)品不便宜但高端的整體感覺。
此外,白色用于文本,表示現(xiàn)代性和平靜感,而紫色被選擇表示奢華,優(yōu)雅和女性氣質(zhì) - 所有這些都明顯適合這樣的網(wǎng)站。
在下面的圖片中,對(duì)于女性健康雜志,頂部的橫幅是粉紅色的,但是該網(wǎng)站相對(duì)缺乏顏色,而是依賴于圖像和粗體導(dǎo)航。這是一個(gè)有趣的選擇,可以對(duì)網(wǎng)站起作用。
首先,粉紅色是一種非??贪宓念伾?dāng)一個(gè)網(wǎng)站針對(duì)女性時(shí)使用它,并且它吸引甜食,所以該網(wǎng)站的信息,因?yàn)檫@是關(guān)于女性的健康,可能會(huì)因此而丟失。
一旦我們進(jìn)一步鉆研網(wǎng)站,標(biāo)題顏色當(dāng)然會(huì)在每個(gè)頁面上使用,但快速訪問減肥部分將返回以下內(nèi)容。
正如您所看到的,此頁面更加粉紅色,這可能會(huì)對(duì)觀眾起反作用。但是,我們碰巧看到的第一個(gè)圖像位于滑塊上,當(dāng)您保留在頁面上時(shí),這確實(shí)會(huì)發(fā)生變化。
你不太可能創(chuàng)建一個(gè)只有一種顏色的網(wǎng)站(除非你純粹是單色),所以你應(yīng)該考慮整體配色方案和每種顏色,以及它們?nèi)绾螀f(xié)同工作。還要考慮對(duì)用戶的影響以及次要顏色如何與您正在使用的主要顏色相匹配。
考慮到這一點(diǎn),在將顏色混合在一起時(shí)應(yīng)注意并為此提供幫助,您可以通過三種基本的混色方法來指導(dǎo)。
這是最基本和平衡的方法,它使用色彩活力和互補(bǔ)。使用12步色輪,您可以選擇任意三種顏色,這些顏色彼此相隔120度,用于背景,內(nèi)容和導(dǎo)航。
第二種方法有點(diǎn)困難,你可能需要進(jìn)行試驗(yàn)以使其正確,但如果做得好就可以非常有效。這個(gè)概念使用四種顏色 - 兩對(duì)對(duì)比(靠近色輪)和兩對(duì)互補(bǔ)對(duì)(在色輪上)。
此方法僅關(guān)注補(bǔ)色,在決定您希望方案對(duì)用戶說什么時(shí)應(yīng)該注意。因?yàn)樗怀隽怂x顏色的活力,所以它可能太多,因?yàn)轭伾旧鲜强鋸埖摹?
因此,在考慮顏色的心理時(shí),重要的是要將所有顏色作為一個(gè)整體考慮,以及它們?nèi)绾螀f(xié)同工作,而不是僅選擇一個(gè)顏色,并希望它能與其他顏色一起工作,如背景,文本和按鈕。請(qǐng)查看下面的頁面,并考慮它對(duì)用戶說的內(nèi)容。
背景顏色 黑色背景表示階級(jí),卓越,形式和“企業(yè)”。顯然,在考慮提供指導(dǎo)的網(wǎng)站時(shí),您希望傳達(dá)卓越性。形式化表明它與學(xué)習(xí)有關(guān),而“公司”則表明用戶可能不會(huì)學(xué)習(xí)編碼作為業(yè)余愛好,而是作為他們?cè)诼殬I(yè)生涯中可以采取的東西。
按鈕顏色 該網(wǎng)站使用紅色按鈕顯示CTA按鈕,這些按鈕在黑色背景下清晰突出,以鼓勵(lì)注冊(cè)。黑色與白色邊框一起用于不太重要的按鈕,與整體方案保持一致。
文字顏色 對(duì)于文本,白色提供了所有重要的對(duì)比度,同時(shí)仍然匹配顏色方案。白色(和白色幽靈按鈕)中的圖標(biāo)放置在折疊處,以鼓勵(lì)用戶向下滾動(dòng)以獲取更多信息(如有必要)。
總的來說,設(shè)計(jì)非常有效 - 我們都知道黑白相處得很好,在這種情況下,網(wǎng)站感覺優(yōu)雅和相對(duì)正式。紅色,如果過度使用,可能會(huì)從整體消息中獲取意義,因此為了脫穎而出并明確表示所需操作是注冊(cè)服務(wù)而非常謹(jǐn)慎地使用它。
布朗一般在設(shè)計(jì)中喚起自然的感覺,是男人最不喜歡的顏色,但它在某些情況下確實(shí)有效,因?yàn)樗硎究煽啃浴?
因此棕色適用于UPS,因?yàn)樗且患蚁M麄鬟_(dá)可依賴的強(qiáng)烈信息的公司。
然而,作為一個(gè)運(yùn)動(dòng)套件,由于圖像中顯示的條帶屬于懷俄明州學(xué)院團(tuán)隊(duì),它被描述為大學(xué)橄欖球史上最糟糕的。有趣的是,棕色也被認(rèn)為可以促進(jìn)“堅(jiān)固性”,所以你會(huì)認(rèn)為它與這種激進(jìn)的運(yùn)動(dòng)搭配起來會(huì)起作用,但在這種情況下它并不是因?yàn)槟腥送ǔ2幌矚g棕色。
對(duì)于女性來說,橙色似乎是最不喜歡的顏色,所以如果你是為一個(gè)主要的女性用戶群設(shè)計(jì),請(qǐng)記住這一點(diǎn)。
當(dāng)然,請(qǐng)記住這些只是指導(dǎo)方針(它們總是取決于背景),所有顏色相互補(bǔ)充并創(chuàng)造和諧更為重要。
您當(dāng)然可以使用現(xiàn)成的調(diào)色板來幫助您做出選擇。在Web UI設(shè)計(jì)方面,您無需重新發(fā)明色輪。
Adobe Color CC
所有Adobe用戶的可信賴提供商。
Paletton
適合初學(xué)者的簡單顏色選擇器。
平面UI顏色選擇器
用于創(chuàng)建彩色平面設(shè)計(jì)
Mudcube Color Sphere
提供各種主題并提供十六進(jìn)制數(shù)字。
檢查我的顏色 - 用于檢查前景色和背景色組合,并且它具有正確的對(duì)比度,供有色盲的人使用。
顏色 - 允許您通過在屏幕上移動(dòng)鼠標(biāo)來選擇顏色,設(shè)置飽和度然后獲取HEX代碼。
有成千上萬的網(wǎng)站使用顏色效果很好,而很多網(wǎng)站都沒有。然而,下面的圖片贏得了每日網(wǎng)站的顏色區(qū)分,很容易理解為什么。
背景是均勻的淺灰色,與自行車的灰色很好地匹配。簡單的設(shè)計(jì),大字體非常有效,并立即傳達(dá)出它是一個(gè)你喜歡騎的快速小自行車的感覺。
使用灰色可以使其他顏色脫穎而出,因?yàn)樗且环N中性色,隨著它變亮,它會(huì)照亮頁面并使其活躍。格雷也給人一種穩(wěn)定感(非常適合自行車廣告),同時(shí)營造出一種平靜和鎮(zhèn)定的感覺。
“Go”一詞中使用的顏色明亮活潑,為設(shè)計(jì)增添了活力感和現(xiàn)代感。它主要是藍(lán)色的,因?yàn)檫@是男性和女性都喜歡的顏色,它確保頁面不是針對(duì)性別的。綠色增加了很少,這表明了一種環(huán)境責(zé)任感。這本身就非常聰明,因?yàn)檫@種尺寸的自行車當(dāng)然不會(huì)消耗汽油,對(duì)于環(huán)境而言比汽車更好 - 這當(dāng)然是我們已經(jīng)知道的事情,但是加強(qiáng)信息是件好事。
總的來說,該頁面讓您了解滑板車如何成為現(xiàn)代城市生活的完美之選。
顏色是設(shè)計(jì)的重要組成部分,但它也是整個(gè)品牌的重要方面。所使用的顏色傳達(dá)的感覺必須與品牌個(gè)性相匹配,并增加整體品牌故事和意義。
通常,設(shè)計(jì)師可能必須使用現(xiàn)有的藝術(shù)品,例如徽標(biāo),并且必須基于此選擇顏色。雖然這可以看作非常緊湊,但是可以使用調(diào)色板來使這個(gè)過程變得更加容易。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com