2022-4-14 博博
顏色是感知的問(wèn)題。每種顏色代表不同的定義波長(zhǎng),但是我們每個(gè)人對(duì)顏色的感知都取決于我們的感知能力。此外,我們都有與顏色相關(guān)的不同文化或背景關(guān)聯(lián)。
有很多很棒的文章和視頻,介紹了色彩理論和色輪,還有許多用于生成調(diào)色板的工具。但是有時(shí)您會(huì)在實(shí)踐中發(fā)現(xiàn)這些文章不太好用,顏色組合不完全匹配或所生成的調(diào)色板在您的項(xiàng)目環(huán)境中效果不佳。
所以你會(huì)怎么做?您如何開(kāi)始思考和查看顏色,使它們更易于選擇以及調(diào)整您的需求?
諸如互補(bǔ)和單色,飽和度和亮度之類的色彩理論術(shù)語(yǔ)并沒(méi)有吸引他們。
因此,我開(kāi)始以不同的方式分解色彩,方法是從繪畫(huà)和室內(nèi)設(shè)計(jì)等傳統(tǒng)視覺(jué)和圖形藝術(shù)中汲取靈感,并以對(duì)我們作為UI設(shè)計(jì)師所做的方式有意義的方式對(duì)其進(jìn)行取景。
匹配調(diào)色板并平衡配色方案
也許您已經(jīng)按照所有的色彩協(xié)調(diào)和顏色理論教程進(jìn)行了準(zhǔn)備,并生成了一個(gè)免費(fèi)的調(diào)色板,但是您注意到這些顏色似乎不太匹配,也許它們看起來(lái)比較粗糙或不專業(yè)。
創(chuàng)建良好的配色方案就是與色調(diào),陰影和溫度匹配的平衡。要在設(shè)計(jì)應(yīng)用程序中成功做到這一點(diǎn),您需知道要拉動(dòng)哪些杠桿。
色彩理論提供了一些公式,可用于啟動(dòng)調(diào)色板,這是理解調(diào)色板的重要基礎(chǔ)。但是創(chuàng)建漂亮的調(diào)色板不僅與這些公式有關(guān),還與平衡色調(diào),陰影和溫度有關(guān)。
這些是我們可以推拉的“杠桿”,可以為我們的UI設(shè)計(jì)實(shí)現(xiàn)更加平衡和獨(dú)特的顏色組合。
因此,首先,回顧一下這些杠桿的作用。
色相是用于描述所見(jiàn)到的每種色調(diào)的通用術(shù)語(yǔ)。
飽和度指的是我們正在查看的特定顏色的主要顏色系列。白色,黑色和灰色通常被稱為無(wú)彩色。
明度也指顏色的明暗程度。色調(diào)相同的顏色,明暗可能不同。例如,絳紅色和粉紅色都含有紅色,但前者顯暗,后者顯亮。
色溫-色溫更多地是關(guān)于我們?nèi)绾胃兄吹降纳?。并且我們傾向于將它們分為暖色和冷色。
暖色-通常是通過(guò)增加色調(diào)中的紅色或黃色來(lái)獲得的顏色。這些往往會(huì)喚起激情,舒適,活力和運(yùn)動(dòng)的感覺(jué)。他們使我們想起陽(yáng)光和熱量。
冷色-是增加藍(lán)色和綠色的顏色。這些趨向于喚起,清新,冬天,靜止,平靜。他們使我們想起冰,雪和水。
色彩模型和色彩空間
要獲得一些技術(shù)知識(shí),您可能聽(tīng)說(shuō)過(guò)3種不同的顏色模型,這將有助于我們更好地理解光和顏色的協(xié)同作用。
CMYK使用減法混色。它指的是光線反射物理白頁(yè)的方式。顏色的重疊導(dǎo)致黑色。由于頁(yè)面無(wú)法投射光線并向您發(fā)光,因此頁(yè)面必須具有反射光。將這些顏色混合在一起就可以掩蓋頁(yè)面的白色,從而減少了可以反射的光量。
RGB稱為光的加法混合。它指的是數(shù)字屏幕向我們投射光的方式。您在全亮度下的顏色會(huì)導(dǎo)致我們看到白色的重疊。有點(diǎn)像被明亮的泛光燈所蒙蔽。
HSB-代表色相,飽和度和明度
HSB顏色模型為我們提供了放射狀的顏色,其中我們具有一定范圍的色相,飽和度和明度值。
這就是我們的眼睛和大腦如何解釋顏色HSB就是我們的眼睛所看到的一切,而與它是從屏幕還是在紙上投射的光線無(wú)關(guān)。
因此,出于為UI設(shè)計(jì)選擇顏色的目的,我們將使用HSB顏色模型。
顏色屬性
您經(jīng)常會(huì)聽(tīng)到兩種較大的顏色分組。暖色和冷色。
暖色通常被認(rèn)為是主動(dòng)色,這意味著它們會(huì)引起更多關(guān)注。
冷色通常被認(rèn)為更被動(dòng)且后退一些。
根據(jù)色彩的豐富程度和它們?nèi)绾纹胶?,您可以使柔和的暖色充?dāng)被動(dòng)元素,而更鮮艷的冷色則扮演主動(dòng)角色。
現(xiàn)在,您了解了顏色如何在屏幕上顯示以及如何設(shè)置我們的設(shè)計(jì)應(yīng)用程序。讓我們談?wù)勅绾卧谖覀兊脑O(shè)計(jì)軟件中使用和推動(dòng)這些杠桿,并平衡我們的配色方案和調(diào)色板。
為了得出這些不同的顏色類別,我們將集中于推和拉色調(diào),飽和度和亮度(HSB)的控制桿。
在數(shù)字屏幕上,我發(fā)現(xiàn)有一個(gè)公式和安全范圍的飽和度和亮度,可以每次為每個(gè)類別創(chuàng)建一個(gè)完美的調(diào)色板。
為簡(jiǎn)化起見(jiàn),我將主要顏色分為6種通??梢宰R(shí)別的主要顏色類別。這些反映了我們?cè)谌粘I钪姓務(wù)擃伾珪r(shí)通常傾向于指代顏色的方式:
1.寶石色調(diào)
S:83-73,B:76-56
這些顏色是飽和度很高的色調(diào),以寶石命名,包括寶石藍(lán),寶石紅,紫水晶紫色,檸檬黃和翠綠色。想一想紅色寶石項(xiàng)鏈或皇家紫色的魅力。這些顏色富麗堂皇,深沉,并賦予豪華感。
2.粉彩
S:14-21,B:89-96
柔和的顏色屬于淺色系。粉色,淡紫色和淡藍(lán)色是常用的柔和色。這個(gè)家庭的顏色通常被描述為“舒緩”。我們通過(guò)降低飽和度和調(diào)整色彩來(lái)創(chuàng)建這些顏色。
3.大地色調(diào)
S:36-41,B:77-36
這些是自然界中常見(jiàn)的顏色??梢酝ㄟ^(guò)將純色與白色,黑色或灰色相結(jié)合來(lái)創(chuàng)建它們。從廣義上講,這些是中性色。它們受到樹(shù)木,森林,海洋和天空的色調(diào)的影響,被用以模仿自然色彩。我們通過(guò)增加飽和度和調(diào)整色調(diào)來(lái)創(chuàng)建大地色調(diào)。
4.中立
S:1-10,B:99-70
純中性色包括黑色,白色,米色和所有灰色,而接近中性色則包括棕色,棕褐色和深色。這些是通過(guò)使色彩去飽和來(lái)創(chuàng)建的。它們可以與以上任何類別配對(duì)以創(chuàng)造平衡。我們通過(guò)降低飽和度并調(diào)整色調(diào),色調(diào)和陰影來(lái)創(chuàng)建中性色。
5.熒光燈/霓虹燈
S:100-63,B:100-82
在物理世界中,這是由霓虹燈管或紫外線反應(yīng)涂料的顏色創(chuàng)造的,但在數(shù)字世界中,我們可以通過(guò)將非常明亮和高度飽和的顏色應(yīng)用于我們的設(shè)計(jì)來(lái)獲得相同的效果。我們通過(guò)增加亮度和色調(diào)來(lái)創(chuàng)建它們。
6.陰影
S:0-0,B:0-100
兩種主要的陰影是黑色和白色,其他陰影也包括不同程度的灰色。
UI顏色組合
最佳的用戶界面設(shè)計(jì)結(jié)合使用一種顏色類別以及中性和陰影。
您實(shí)際上只需要這些類別中的1或2種顏色即可設(shè)計(jì)參與整個(gè)用戶界面。
我們?yōu)槭裁床贿@樣談?wù)擃伾?/strong>
作為數(shù)字設(shè)計(jì)師,我們傾向于避免給這些配色方案分類,因?yàn)樾g(shù)語(yǔ)似乎是為混合自然色彩的畫(huà)家,印刷設(shè)計(jì)師和室內(nèi)設(shè)計(jì)師保留的。但是從實(shí)際的角度來(lái)看,當(dāng)我們?nèi)栽趯W(xué)習(xí)色彩理論并使我們的眼睛習(xí)慣于選擇可以一起使用的色彩時(shí),我發(fā)現(xiàn)以這種方式引用色彩在UI和數(shù)字屏幕設(shè)計(jì)中可以非常有用。
這不是一門(mén)精確的科學(xué),但是您會(huì)看到如何以這種方式思考顏色并掌握一些杠桿和數(shù)字,以指導(dǎo)您幫助用戶創(chuàng)建更令人愉悅和精致的調(diào)色板。
理解色彩理論的基礎(chǔ)和原理很重要,特別是當(dāng)涉及到實(shí)際應(yīng)用時(shí),它就顯得尤為重要。引用不同的學(xué)科并找到對(duì)我們有用的類比可以帶來(lái)很大的不同。
作為UI / UX設(shè)計(jì)師,最重要的是,無(wú)論您如何去實(shí)現(xiàn),您都能夠有效地使用顏色來(lái)傳達(dá)信息并為用戶創(chuàng)造最佳體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com