如何在界面設(shè)計中“色”誘用戶

在設(shè)計過程中,如何最佳地搭配顏色采缚,誘導(dǎo)用戶視線针炉。

是不是在為圖標選擇什么顏色而煩惱,反反復(fù)復(fù)地嘗試扳抽,總不能達到想要的效果糊识。是不是總在羨慕“別人家的設(shè)計”,而苦于無從下手摔蓝?

在色彩的應(yīng)用中,大家對顏色都會有不同程度的理解愉耙,從而影響到設(shè)計頁面的表現(xiàn)贮尉。

熟練地將色彩搭配運用到設(shè)計中去,會讓設(shè)計更為穩(wěn)重和得體朴沿。優(yōu)秀的設(shè)計它的色彩搭配非常的舒服猜谚,令人賞心悅目。那我們怎么才能搭配出最貼合設(shè)計的色彩更好呢赌渣?

其實所有的顏色都有些小規(guī)律魏铅,今天MICU就和大家聊一聊“色”。

為何“色”坚芜?因為“生理”上有需求览芳!

既然是平面設(shè)計,視覺刺激是最直觀的鸿竖。比如當下流行的涂色書沧竟,為啥普普通通的圖案能展現(xiàn)出那樣美麗的效果,就是因為色缚忧,因為合理的顏色搭配悟泵。

再比如好的天氣是藍色,而灰色的天氣就霧霾的天了闪水。

那么馬路邊那些亮著紅燈的區(qū)域糕非,那你想到啥?我就不說了。

所以在研究感官是為了從生理上得到“我們看到什么樣的色彩時”會做出什么樣的反映朽肥。

用戶雖然沒有上過色彩的相關(guān)課程禁筏,但是他們?nèi)匀荒芎苤庇^地看出什么是符合他們審美的。

同樣顏色的選擇不僅詮釋了設(shè)計的表現(xiàn)方式也營造了用戶對產(chǎn)品的購買需求鞠呈。需要從中滿足用戶最直觀的生理需求點融师。

我們就來看看下面的幾種方法吧,怎么將用戶的欲望勾引起來蚁吝。

從感受抓到色的重點(焦點)

并非這樣旱爆,我在設(shè)計過程中總結(jié)的經(jīng)驗,畫面中色彩不要超過三種窘茁。表達出主題即可怀伦。

并非這樣,我在設(shè)計過程中總結(jié)的經(jīng)驗山林,畫面中主要色彩不要超過三種房待,表達出主題即可。

太多的顏色會使頁面雜亂無章驼抹,干擾主要信息桑孩。

這是12306的網(wǎng)站,顏色用的數(shù)量我是沒有數(shù)過來框冀,重點在哪里流椒?想要凸顯的信息太多,還總是閃閃閃明也。如果處處是焦點宣虾,那就真的沒焦點了。用戶最主要的是買票温数,掃來掃去地滿頁面地找绣硝,這不是好的用戶體驗,有些反智3糯獭鹉胖!

再看看其他互聯(lián)網(wǎng)公司做的三方刷票網(wǎng)站。為毛一下就這么簡單~

設(shè)計有主色彩配色够傍,色相構(gòu)成是統(tǒng)一的配色次员,由綠色為色相支配、統(tǒng)一了畫面的配色王带。

疑問二:疊加效果淑蔚,能嘗試出好的顏色嗎?

很多同學(xué)在設(shè)計初期不知道選用色彩定位愕撰,常常用疊加來嘗試效果刹衫,結(jié)果發(fā)現(xiàn)越來越?jīng)]有頭緒醋寝。

色彩疊加本身確實很好,一般用海報等背景上比較多带迟,不宜在交互的頁面音羞。盲目使用色彩疊加,會使畫面變得復(fù)雜沉悶仓犬。表達上含義模糊嗅绰,用戶會覺得雜亂,無法找到需要找到的信息和功能搀继【矫妫可見,疊加的效果不但沒有加分叽躯,反而減分财边。

疑問三:信息量or簡潔,如何取舍点骑?

簡潔酣难、準確是色彩核心標準,簡單明了的色彩能快速被用戶解讀黑滴。

不要奢望用戶能夠在一個頁面上停留太多時間憨募,一頁顯示N多信息時代早就過去了。

疑問四:如果通過色彩氣氛袁辈,誘導(dǎo)用戶菜谣?

好的色彩搭配和選擇能激發(fā)用戶購買而定場景感和購買欲望。

比如暖色能激發(fā)用戶的食欲吵瞻,在消費內(nèi)的軟件中經(jīng)常用到(淘寶)。藍色能給人帶來平靜甘磨,大部分的閱讀軟件則用到了藍色(知乎)

在界面色彩要學(xué)會做加減法

原則一:色的大小位置

大塊的色彩烘托氣氛和主題比較穩(wěn)定橡羞,小塊的色彩用于點綴,豐富畫面济舆。

統(tǒng)一顏色讓用戶認準店面

首先需要在不同的界面框架中統(tǒng)一招牌色卿泽,保證產(chǎn)品給用戶能一目了然的找到這個店。

那么我和大家介紹一下一款不為人知的軟件“BIG”滋觉。首先名稱非常的霸氣签夭,易于用戶記憶和傳播。整體采用了朱紅色貫徹了整個產(chǎn)品的設(shè)計椎侠。不管是LOGO還是菜單欄非常的統(tǒng)一第租。讓用戶在使用完后對這個產(chǎn)品有了非常統(tǒng)一的印象。

其實它是淘寶APP發(fā)現(xiàn)頁面中內(nèi)置的一款軟件我纪,所以說招牌色多么的重要慎宾,在這么豐富的軟件中怎么讓用戶一目了然丐吓,用一次就記憶深刻!

原則二:嚴謹而有節(jié)奏

在界面中的可以運用相似性與來進行色彩呼應(yīng)趟据,這樣的畫面更有節(jié)奏感和舒適性券犁。

運用顏色漸變穿插,讓界面平衡在一個頻率上汹碱。

在頁面色彩關(guān)系的處理中粘衬,我們需要注意重色的運用,它對畫面的平衡有非常大的作用咳促。

下面是淺色菜單欄和深色菜單欄的區(qū)別稚新。我們可以發(fā)現(xiàn),有重色后的頁面等缀,顯得更為穩(wěn)定舒服枷莉。

原則三:在相似中,找呼應(yīng)

我們來看一組練習(xí)尺迂,找找色彩的呼應(yīng)性笤妙。

1.定義了色彩的基調(diào),找到了形象店面色噪裕。

在設(shè)計中我們只采用了單一的顏色進行了設(shè)計蹲盘,使用大小關(guān)系區(qū)分了功能的主次關(guān)系。視覺上比較平衡但是頁面顯得單調(diào)膳音。

2.為了讓用戶聚焦在主要的功能上召衔,在主要功能上使用了補色對比。這種方式比造型上的區(qū)分更為強烈祭陷。

3.但在采用過多的色彩會使界面沒有秩序性苍凛。這種色彩的搭配會給用戶一種混亂感。

4.用色上不僅需要聚焦兵志,還有講究顏色的呼應(yīng)性醇蝴。同類色彩會彼此呼應(yīng),聚焦點只要在主要的點上想罕。

所以說注意彩色的關(guān)系與功能的區(qū)別及其重要悠栓。這樣才能把握好色彩的節(jié)奏感。

如何用“色”按价?

用“色”惭适,達到平衡。

人們渴望生活的穩(wěn)定和安定楼镐,平衡感能滿足用戶的視覺需求癞志。如果在界面設(shè)計中運用一對或多對的平衡色彩能讓用戶從心里需求上得到滿足,這樣的設(shè)計能更容易讓用戶具有親近感框产,給用戶留下愉悅而舒服的美感今阳。

在平衡色彩中的定義并不是面積相等就叫平衡师溅。要講究主題性中找到色彩的平衡關(guān)系,以及版式等元素中的協(xié)調(diào)性盾舌。

一般在色彩運用中的“平衡色”有五種類型:

一:互補色之間的平衡

二:冷色和暖色的平衡

三:深色和淺色的平衡

四:有色彩和無色彩的平衡

五:花色與純色的平衡

互補色平衡法

在界面設(shè)計中墓臭,使用互補色彩的對比是最為強烈的,最易傳播的妖谴。

這種色彩能使用戶的視覺產(chǎn)生強烈的刺激窿锉,情感濃烈,給人留下鮮明的印象膝舅。這種方式是嗡载。適合在夸張的、張揚的場景下使用仍稀。

但這種顏色用的太過于平凡容易造成用戶的視覺疲勞洼滚。給人一種不安定的感覺。那么在使用這樣的搭配方式時需要控制使用的位置和信息的面積了技潘,核心的地方可以這樣去使用遥巴。

主要的三對互補色:紅綠、藍橙享幽、黃紫铲掐。

我們可以看到很多APP的icon為了吸引用戶的注意就用到了強烈對比的互補色。

番茄快點值桩、QQ空間摆霉、相機360

運用這種大膽的平衡色能使整個風(fēng)格主題格外的鮮明。

這種平衡色彩最為強烈的情況就是使兩個色相的飽和度都調(diào)整到最高奔坟,面積比例也在1:1携栋。此時的氣氛最為濃烈,沖擊感最強咳秉!

我們可以看到代購現(xiàn)場這款A(yù)PP的LOGO設(shè)計采用了1:1的色彩關(guān)系比以上的APP icon更為突出婉支。所以在應(yīng)用市場中更為容易讓用戶找到,達到了品牌的傳播性滴某。

冷暖色平衡法

冷暖色是人類在大自然生活總結(jié)出來的顏色規(guī)律磅摹。我們看到紅色滋迈、黃色讓人聯(lián)想起燃燒的火焰霎奢,太陽等,是一種溫暖的感覺饼灿。這樣的顏色就定義為“暖色”而藍色就然我想起了水幕侠、冰雪,是冷的感覺碍彭。所以就是“冷色”晤硕。

冷暖對別色是自然平衡的規(guī)律悼潭,可以在設(shè)計中大量使用,這樣的配色會使作品非常的出彩舞箍,不顯單調(diào)舰褪。

在設(shè)計中,冷色與暖色的平衡是界面設(shè)計中最為廣泛的使用方法疏橄,效果也非常的出眾占拍。

色彩好比就是陰陽太極,冷與暖的兩級平衡還原了生活中的和諧捎迫。冷暖色彩搭配的方法基本沒有啥缺點晃酒,使用在設(shè)計中,技巧性比較多窄绒,對設(shè)計的細膩感受要求比較高贝次。

深色和淺色的平衡

在色彩中顏色采用淺色,柔和而輕盈彰导,也會顯得不夠穩(wěn)定蛔翅。采用深色,會顯得厚重高級螺戳,但容易沉悶搁宾。在界面設(shè)計時,在主色彩是淺色的情況下倔幼,適當補充些深色盖腿,能更好的平衡畫面。

在錘子手機界面中為了讓頁面平衡损同,首圖展示了黑白兩個機型翩腐,讓頁面更為穩(wěn)定平衡。

花色(圖案)與純色的對比

在運用色彩時候怎么能讓設(shè)計更為絢麗出彩呢膏燃?但有不要過花亂呢茂卦?

這時候就要注意了,花色與純色需要有對比组哩,色彩比較鮮明而花的一般運用在核心展示上等龙,而背景需要整體。

QQ開屏就很好的突出了產(chǎn)品的品牌特色伶贰,讓用戶過目不忘蛛砰。這種設(shè)計方式也適合運用在banner等設(shè)計中。

好的設(shè)計不應(yīng)該永遠是“人家的設(shè)計”黍衙,看得不夠多泥畅,琢磨不夠透,練手太少琅翻。多臨摹10遍位仁,狠狠心吧柑贞。

【本文由Micu設(shè)計原創(chuàng)發(fā)布,轉(zhuǎn)載請注明來源(微信公眾號:MICU設(shè)計 作者:王鐸)】

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末聂抢,一起剝皮案震驚了整個濱河市钧嘶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌琳疏,老刑警劉巖康辑,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異轿亮,居然都是意外死亡疮薇,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門我注,熙熙樓的掌柜王于貴愁眉苦臉地迎上來按咒,“玉大人,你說我怎么就攤上這事但骨±撸” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵奔缠,是天一觀的道長掠抬。 經(jīng)常有香客問我,道長校哎,這世上最難降的妖魔是什么两波? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮闷哆,結(jié)果婚禮上腰奋,老公的妹妹穿的比我還像新娘。我一直安慰自己抱怔,他們只是感情好劣坊,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著屈留,像睡著了一般局冰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上灌危,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天康二,我揣著相機與錄音,去河邊找鬼乍狐。 笑死赠摇,一個胖子當著我的面吹牛固逗,可吹牛的內(nèi)容都是我干的浅蚪。 我是一名探鬼主播藕帜,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼惜傲!你這毒婦竟也來了洽故?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤盗誊,失蹤者是張志新(化名)和其女友劉穎时甚,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哈踱,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡荒适,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了开镣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刀诬。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖邪财,靈堂內(nèi)的尸體忽然破棺而出陕壹,到底是詐尸還是另有隱情,我是刑警寧澤树埠,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布糠馆,位于F島的核電站,受9級特大地震影響怎憋,放射性物質(zhì)發(fā)生泄漏又碌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一绊袋、第九天 我趴在偏房一處隱蔽的房頂上張望赠橙。 院中可真熱鬧,春花似錦愤炸、人聲如沸期揪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽凤薛。三九已至,卻和暖如春诞仓,著一層夾襖步出監(jiān)牢的瞬間缤苫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工墅拭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留活玲,地道東北人。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像舒憾,于是被迫代替她去往敵國和親镀钓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

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