Photo by George Becker from iconscout
我們身處在一個(gè)多彩的世界中,物體的不同顏色,會(huì)讓我們產(chǎn)生不同的情緒。色彩會(huì)影響人們的身心,強(qiáng)烈的紅色會(huì)使血壓升高,而藍(lán)色則使人冷靜。
設(shè)計(jì)UI界面時(shí),色彩是影響用戶最簡(jiǎn)單和最重要的一個(gè)因素。很多人認(rèn)為UI界面色彩的選擇取決于設(shè)計(jì)師的品味和審美。然而,顏色的選擇過程比它看起來要復(fù)雜的多,在設(shè)計(jì)中扮演著重要的角色。
可以用顏色來營(yíng)造一種情緒、吸引注意力或作出強(qiáng)調(diào),用色彩調(diào)動(dòng)人的情緒或使人冷靜下來。通過選擇正確的配色方案,可以營(yíng)造一種優(yōu)雅、溫暖和平靜的氛圍。
色彩的選擇是基于色彩心理學(xué)和色彩理論的,下面就詳細(xì)介紹一下這塊的內(nèi)容吧。
色彩心理學(xué)
男性和女性的色彩偏好是不同的,不同年齡群體的色彩偏好也是不同的。
根據(jù) JoeHallock的研究,不同性別的色彩選擇有天壤之別。研究旨在發(fā)現(xiàn)不同色彩的偏好程度,從最喜歡的色彩到不那么喜歡的色彩分別所占的比例。
不同性別的色彩偏好
如上圖,男女都格外喜歡藍(lán)色,而對(duì)棕色的喜愛程度最低。
以一個(gè)APP案例來說明
這款A(yù)PP的目標(biāo)是管理成本,用戶包含男性和女性。先假設(shè)一個(gè)不了解色彩的初學(xué)者,選擇棕色作為APP的主色,因?yàn)樽厣撬钕矚g的顏色。 結(jié)果如下:
成本管理APP
如圖,雖然設(shè)計(jì)還行,但由于色彩的選擇,APP可能無法正常使用。 那如何優(yōu)化呢? 本文稍后的部分中,將介紹如何僅通過色彩的改變來優(yōu)化整個(gè)APP。
配色的價(jià)值就來了,設(shè)計(jì)師需要了解色彩的含義和影響,以傳達(dá)正確的語(yǔ)氣、信息并引導(dǎo)用戶做出預(yù)期的行為。 每種色彩都會(huì)對(duì)我們的思維產(chǎn)生影響,了解可能的影響可以幫助設(shè)計(jì)師傳達(dá)正確的信息、引導(dǎo)用戶行為。
作為一個(gè)設(shè)計(jì)師,你需要了解色彩的含義,這里只是簡(jiǎn)要介紹,詳細(xì)內(nèi)容請(qǐng)參考 http://www.color-wheel-pro.com/color-meaning.html
色彩理論
1.色環(huán)
設(shè)計(jì)界面時(shí),有很多色彩可以使用。首先,要提到的是色環(huán)。
著名的色環(huán)
另一個(gè)重要的話題是配色。配色有很多方法,但暖色和冷色應(yīng)該平衡。下面是幾種配色方式:
互補(bǔ)色、鄰近色、三色組、分裂互補(bǔ)色、矩形(雙分裂互補(bǔ)色)、正方形
每個(gè)設(shè)計(jì)師都應(yīng)該知道色彩的三個(gè)屬性:色相、明度和飽和度。 Christian Vizcarra對(duì)色彩的屬性描述非常詳盡,本文借鑒了其相關(guān)內(nèi)容。
2.色相
色相是自然狀態(tài)下的色彩。比如藍(lán)色、黃色、綠色和紅色等等,沒明暗的變化。簡(jiǎn)言之,色環(huán)上沒有改變明暗的色彩。如下圖:
3.明度
明度,指色彩的明暗度。以自然界為例,一些物體在早晨和晚上的色彩不同。如樹木和山脈,早晨色調(diào)淺;傍晚因?yàn)楣饩€減少了,色調(diào)變得偏暗。
Photo by Nextvoyage from iconscout
距光源越近的物體,明度越高,反之,則明度越暗。明度在UI設(shè)計(jì)中扮演重要的角色,明度運(yùn)用得好,可以實(shí)現(xiàn)好的對(duì)比效果。
明度達(dá)到100%時(shí),色彩就會(huì)變成白色;明度是0%時(shí),就會(huì)變成黑色。如下圖:
色彩的明度
4.飽和度
飽和度是色彩的純度。增加飽和度,色彩會(huì)變得更強(qiáng)烈、鮮艷生動(dòng);降低飽和度,色彩會(huì)變得暗淡乏味。
色彩飽和度
使用飽和度前,需要知道設(shè)計(jì)的載體,印刷還是電子媒介。為印刷設(shè)計(jì)時(shí),飽和度不能過高,因?yàn)橛∷⑹褂玫腃MYK模式,有一定的局限。
UI設(shè)計(jì)中的色彩
黃金比例——6:3:1原則。
60%+30%+10%的原則,是達(dá)到色彩平衡的最佳比例。在60%的空間使用主色,30%的空間使用輔助色,最后剩下10%的空間為另外一種色彩。這樣可以使用戶眼睛從一點(diǎn)移動(dòng)到下一個(gè)點(diǎn)時(shí),非常舒服。
使用6:3:1原則的調(diào)色板
UI中的陰影
沒有完全純黑的陰影,陰影的顏色是會(huì)受到物體本身固有色的影響,如下圖所示。
Photo by Brigitte Tohm from iconscout
櫻桃的陰影是深紅色,看起來幾乎是黑色,但并不是純黑色。比如還有花兒、盤子和華夫餅的陰影,都不是純黑色的。光和環(huán)境決定了陰影的顏色。
UI設(shè)計(jì)的一個(gè)常見錯(cuò)誤是使用半透明的黑色作為陰影。
UI元素的陰影
字體色彩
如今大多數(shù)的界面都是白色的,目的在于盡可能地簡(jiǎn)化界面聚焦內(nèi)容本身,所以字體排版就成了一個(gè)非常重要的元素。
左邊的文本顏色是純黑色 (# 000000),右側(cè)的色彩看起來是黑色的,但其實(shí)是加入了藍(lán)色的黑色,變成了藍(lán)黑色 (# 181441)。字體色彩在大多數(shù)白色的界面中,非常重要,如下圖:
相同透明度下,兩種色彩的對(duì)比
相同透明度下,兩組文本字體顏色不同,效果不同。一組是灰色的,另一組是藍(lán)灰色的,不同色調(diào)的文本對(duì)界面有顯著的影響。如下圖:
使用黑色和灰色,很糟糕嗎?不是。人們常說“黑色使一切很酷”,所以這取決于個(gè)人的感受。在使用顏色時(shí),考慮到色調(diào),就可以實(shí)現(xiàn)更好的對(duì)比和協(xié)調(diào)。
成本管理APP的優(yōu)化
改為綠色后,APP看起來好多了。因?yàn)槲覀冃枰谶@款A(yù)pp中表現(xiàn)出對(duì)于金錢和增長(zhǎng)的強(qiáng)烈情感愿望,而綠色描述了金錢和金融世界,男女都同時(shí)喜歡綠色。
(譯者注:在國(guó)外綠色代表股市上漲,所以對(duì)于他們來說,關(guān)于金錢的應(yīng)用才用綠色會(huì)更加合適。顏色的使用更貼合使用人群,對(duì)體驗(yàn)來說才會(huì)更好,顏色也就變得更加有依據(jù)。)
以下是修改后的對(duì)比:
比之前看起來好多了是么? 希望是的。如您所見,只需要關(guān)注色彩的一些小細(xì)節(jié),就可以設(shè)計(jì)出高效的用戶界面。
原文鏈接:https://medium.com/iconscout/colors-in-ui-design-theory-psychology-practice-f6d6a5e6e04d
作者:Dalsukh Tapaniya
翻譯:Bravert?
全站高品質(zhì)素材免費(fèi)下載!