【UI進階手冊】學會這7招UI配色方案,讓你快速進階成為UI大神筹淫!

有很多對設計感興趣的朋友們站辉,以及剛?cè)胄蠻I的朋友對設計的配色很頭疼。

經(jīng)常有朋友向u叔咨詢?nèi)绾巫龀龈叽笊系腢I設計作品贸街,u叔經(jīng)過幾天艱苦奮斗庵寞,終于整理出來了這7招配色方案與技巧,相信這篇文章能解決朋友們所頭疼的問題薛匪。

圖片發(fā)自簡書App

1 .掌握6:3:1配色原則

圖片發(fā)自簡書App

U叔先為大家介紹一下捐川,6:3:1 原則最早是源自于室內(nèi)設計領(lǐng)域,室內(nèi)設計師借助這一原則逸尖,創(chuàng)造出協(xié)調(diào)的室內(nèi)設計配色古沥。

u叔認為這一原則就是為了達到平衡的配色,將幾種色彩遵循60%—30%—10%這樣的色彩配比娇跟。

其中占據(jù)60% 的是主色岩齿,30%則是輔助色,而占據(jù)10%的色彩應當為強調(diào)色苞俘。

朋友們只要掌握這個原則盹沈,u叔相信你的作品顏色搭配就不會跑偏。

2.色彩的對比

u叔認為色彩的對比幾乎是任何視覺構(gòu)圖的關(guān)鍵部分吃谣。

圖片發(fā)自簡書App

對比度創(chuàng)造了UI元素的差異乞封,也賦予它們以性格做裙。值得朋友們注意的是,UI當中來自同一色系的色彩往往不會呈現(xiàn)出明顯的對比度肃晚,而可識別度較低的文本更是界面信息傳達和交互的障礙锚贱。

我們需要根據(jù)設計目標,來合理地控制整個作品色彩的對比度高低关串。

u叔來為大家舉個例子拧廊,如果你需要讓用戶注意到特定的元素,那么最好使用高對比度的色彩來達到引人矚目的視覺體驗晋修,比如使用高對比度的紅色和藍色吧碾。

CTA按鈕常常就是使用這樣的色彩。

圖片發(fā)自簡書App

但是u叔認為飞蚓,如果將UI視作為整體的話滤港,高對比度的色彩可能并總能奏效。

文本內(nèi)容和背景的對比需要控制在一個合理的度上面趴拧,否則就會因為對比過大產(chǎn)生「暈影」的視覺效果,這會影響用戶長時間閱讀的閱讀體驗山叮。

圖片發(fā)自簡書App

所以u叔建議朋友們采用溫和的對比度控制著榴,并且只在特定的元素上使用高對比度。

通過在不同的設備上測試屁倔,可以讓我們的作品保持配色的可用性和泛用性脑又。

3.色彩心理學

我們所熟知的設計工作流程都是基于心理學原理開展的。

色彩心理學是和設計息息相關(guān)的一個心理學分支锐借,它主要研究色彩對于人類情緒和行為上的影響问麸。

我們大腦對于色彩的反應其實是相當敏感和多樣的,但是在日常生活中我們很難直觀地钞翔、迅速地感受到严卖。

當人的眼睛感知到一種色彩的時候,會向大腦內(nèi)的分泌系統(tǒng)發(fā)出信號布轿,并且釋放刺激產(chǎn)生對應情緒的激素哮笆。

圖片發(fā)自簡書App

u叔認為每種色彩對于我們的感知和思維都有獨特的影響力,了解這些可能的反應最終可以幫助我們正確地傳遞信息汰扭,并且引導用戶按照我們的預期來執(zhí)行稠肘。

下面u叔為大家介紹一些顏色的基本的特征和含義

· 紅色:象征愛情,自信萝毛,激情和憤怒项阴,它是充滿活力和溫暖的色彩,給人帶來興奮的感覺笆包。

圖片發(fā)自簡書App

· 黃色:能傳遞出幸福环揽,陽光略荡,喜悅和溫暖的情緒。

圖片發(fā)自簡書App

· 綠色:則常常能給人自然薯演、清新撞芍、富有生命力的感覺。

圖片發(fā)自簡書App

· 藍色:是目前最受歡迎的顏色之一跨扮,企業(yè)常常會使用藍色來傳遞自信和讓人信賴的感覺序无。

圖片發(fā)自簡書App

· 紫色:和皇室、財富關(guān)聯(lián)密切衡创,這也是代表神秘和茉莉的色彩帝嗡。

圖片發(fā)自簡書App

· 黑色:雖然和死亡、悲劇有關(guān)璃氢,但是也能營造沉穩(wěn)大氣的高級感哟玷。

圖片發(fā)自簡書App

· 白色:代表純潔無暇,傳達出高雅一也,純粹和清晰的感覺巢寡。

圖片發(fā)自簡書App

除此之外,我們還需要明白一個事情椰苟,就是人和人的視覺感受通常是不同的抑月,對于色彩的認知還受到文化背景的影響,性別的因素對于色彩偏好的影響也不小舆蝴。

因此谦絮,u叔認為了解我們用戶的特征是很有必要的。

4.色彩心理學

朋友們都知道文化背景對于色彩有著深刻的影響洁仗。

不同的文化有著不同的傳統(tǒng)文化和信仰特征层皱,甚至同一種顏色在不同的國家有著截然不同的解讀方式。

圖片發(fā)自簡書App
圖片發(fā)自簡書App

白色在歐美國家常常象征著純潔和高貴赠潦,但是在亞洲地區(qū)叫胖,喪事也常常被稱為“白事”,代表著死亡和悲傷祭椰。

在中國臭家,色彩飽和度高的正色是傳承了幾千年的視覺文化元素,但是在日本方淤,卻以間色和低飽和度的色彩為美钉赁。

u叔建議大家在設計之前,應該深入了解受眾當?shù)氐?b>文化特征携茂,這樣才能讓我們更好的降低被誤解的風險你踩,創(chuàng)造出優(yōu)秀的設計。

5.色彩協(xié)調(diào)

u叔認為協(xié)調(diào)的UI設計是設計師的目標之一,而這意味著配色一定要和諧并令人感到舒適带膜。

我們可以通過色彩來營造富有吸引力的協(xié)調(diào)設計吩谦,能夠讓用戶清晰明了地感知到UI中的內(nèi)容,同時留下良好的第一印象膝藕。

隨著u叔多年的摸索式廷,在配色方案上總結(jié)了一些基本的配色方法:

· 單色配色。單色配色并不是說只有一種顏色芭挽,而是基于同一色系來進行配色滑废,不同明暗、飽和度的色彩組合到一起袜爪,構(gòu)成配色方案蠕趁。

圖片發(fā)自簡書App

· 類似色。在色輪上彼此靠近的顏色構(gòu)成的配色方案辛馆。

圖片發(fā)自簡書App

· 對比色俺陋。色輪上彼此處于相對位置的色彩能夠構(gòu)成鮮明的對比,這些對比色能夠構(gòu)成高對比度的配色方案昙篙。

圖片發(fā)自簡書App

· 拆分互補色腊状。拆分互補色的配色原理和互補色相似,但是不同的地方在于苔可,這樣的配色當中會采用更多的顏色寿酌,當你選擇藍色之后,與之搭配的不是對位上的橙色硕蛹,而是橙色兩側(cè)的黃色和紅色。

圖片發(fā)自簡書App

· 三元色硕并。它是在色輪上挑選互為120度角的三個顏色類進行配色法焰。使用其中的一種色彩為主導,另外兩種色彩用來提亮倔毙。

圖片發(fā)自簡書App

· 雙互補色埃仪。采用兩對互補色來作為主要的配色方案。

6.自然獲取配色

u叔認為:大自然是世界上最好的藝術(shù)家和設計師陕赃。

我們在自然環(huán)境中看到的色彩組合大多都非常的協(xié)調(diào)卵蛉,甚至可以說接近完美。

人們所喜歡的日落和黎明么库,喜歡秋日的落葉和冬天的山野傻丝,因為這些色彩組合有著獨特的美感。

圖片發(fā)自簡書App
圖片發(fā)自簡書App

所以u叔建議大家嘗試從自然風景中獲取配色诉儒。

后期u叔會為朋友們詳細介紹如何從自然風景中獲取想要的配色葡缰。

7.配色網(wǎng)站

U叔在這里為朋友們分享了一些優(yōu)秀的配色網(wǎng)站,希望能夠幫助大家。

圖片發(fā)自簡書App

漂亮的漸變顏色

https://uigradients.com/#CoolSky

colourlovers:

//www.colourlovers.com/

colorfavs:

http://www.colorfavs.com/

日本傳統(tǒng)色詞典:

http://nipponcolors.com/

kuler:

https://color.adobe.com/zh/

U叔送個朋友們一段話:

在我們追夢的過程泛释,必須有堅強的信念滤愕。

無論你的起點是什么樣的,前方都有一條適合你的道路等著你怜校。

遇到最困難的事情時间影,你只有兩個選擇,敢或不敢茄茁!

如果你有設計夢想就不要放棄魂贬,不要糾結(jié),不要猶豫胰丁,有夢想我們一起實現(xiàn)随橘。

雖然追夢的道路很艱辛,但是在這條路上我們會遇見別樣的風景讓我們一起為夢想前行吧锦庸。

U叔會陪伴朋友們在設計這條道路上一直走下去的机蔗。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市甘萧,隨后出現(xiàn)的幾起案子萝嘁,更是在濱河造成了極大的恐慌,老刑警劉巖扬卷,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牙言,死亡現(xiàn)場離奇詭異,居然都是意外死亡怪得,警方通過查閱死者的電腦和手機咱枉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來徒恋,“玉大人蚕断,你說我怎么就攤上這事∪胝酰” “怎么了亿乳?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長径筏。 經(jīng)常有香客問我葛假,道長,這世上最難降的妖魔是什么滋恬? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任聊训,我火速辦了婚禮,結(jié)果婚禮上夷恍,老公的妹妹穿的比我還像新娘魔眨。我一直安慰自己媳维,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布遏暴。 她就那樣靜靜地躺著侄刽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪朋凉。 梳的紋絲不亂的頭發(fā)上州丹,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音杂彭,去河邊找鬼墓毒。 笑死,一個胖子當著我的面吹牛亲怠,可吹牛的內(nèi)容都是我干的所计。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼团秽,長吁一口氣:“原來是場噩夢啊……” “哼主胧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起习勤,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤踪栋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后图毕,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體夷都,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年予颤,在試婚紗的時候發(fā)現(xiàn)自己被綠了囤官。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡蛤虐,死狀恐怖治拿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情笆焰,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布见坑,位于F島的核電站嚷掠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏荞驴。R本人自食惡果不足惜不皆,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望熊楼。 院中可真熱鬧霹娄,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至枕磁,卻和暖如春渡蜻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背计济。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工茸苇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沦寂。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓学密,卻偏偏與公主長得像,于是被迫代替她去往敵國和親传藏。 傳聞我的和親對象是個殘疾皇子腻暮,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容