114培訓(xùn)網(wǎng)歡迎您來到誠筑說超級(jí)CG培訓(xùn)機(jī)構(gòu)!

400-850-8622

全國統(tǒng)一學(xué)習(xí)專線 8:30-21:00

 網(wǎng)頁設(shè)計(jì)中的配色和用色方式,確實(shí)需要好好研究。如果全世界所有的網(wǎng)站都采用五彩繽紛的配色,那么不會(huì)有任何網(wǎng)站從中脫穎而出。今天誠筑說小編給大家分享一個(gè)關(guān)于網(wǎng)頁設(shè)計(jì)色彩運(yùn)用的文章。

  用色彩引導(dǎo)用戶注意力

  絕大多數(shù)網(wǎng)站在布局設(shè)計(jì)之初,通常就采用簡單的黑白灰,白色背景+黑色文字。而色彩在這種情況下會(huì)起到強(qiáng)調(diào)和高亮的作用,可以引導(dǎo)用戶注意按鈕、標(biāo)題和鏈接。

  以Vibrant 的網(wǎng)頁設(shè)計(jì)為例,他們的首頁中背景和圖像都采用的是黑白色調(diào),但是LOGO,按鈕和漢堡圖標(biāo)都采用的是閃亮的黃色,它們可以很快抓住用戶的注意力。

  創(chuàng)造個(gè)性

  色彩的美好之初字啊與,它可以為網(wǎng)站或者品牌定下基調(diào)或者營造情感、傳達(dá)情緒。Beagle 為用戶提供制作項(xiàng)目簡介的服務(wù),而他們的網(wǎng)站配色采用的是自然系色彩。當(dāng)你向下滾動(dòng)的時(shí)候,背景色會(huì)從綠色變?yōu)樽厣?、深灰甚至粉紅色。自然色能給人優(yōu)雅而專業(yè)的感受,從而讓這個(gè)服務(wù)給人留下深刻的印象。

  用色彩發(fā)聲

  用色彩來發(fā)聲,做一個(gè)屬于自己網(wǎng)站的聲明,這比起單純的“吸引用戶”來的更加有趣。要吸引用戶注意力,色彩足夠突出就行,但是更重要的是,這種色彩要足夠?yàn)槟?ldquo;做聲明”。你不能隨便挑選一個(gè)鮮艷的色彩,這個(gè)色彩還要契合你的精神,想要傳遞的獨(dú)特情緒。

  就以Gaga 交響樂的著陸頁為例,當(dāng)你打開網(wǎng)站的時(shí)候,鮮亮的粉色會(huì)讓你眼前一亮。在“交響樂”的主題之下,用戶對(duì)網(wǎng)站風(fēng)格的預(yù)期是沉穩(wěn)的色調(diào),但是亮粉色則完全不再低調(diào)優(yōu)雅之列,但是它符合網(wǎng)站中交響樂活力四射、樂趣無窮和創(chuàng)造力十足的特色,所以,此處的亮粉色符合邏輯,也為設(shè)計(jì)者“發(fā)聲”了。

  增強(qiáng)凝聚力,引導(dǎo)用戶流程

  色彩同樣可以用來引導(dǎo)用戶來進(jìn)行用戶流程。就像上方Takeit的案例,色彩會(huì)引導(dǎo)用戶的眼睛,但是不會(huì)采用太過激烈的搭配方式。微妙而富有凝聚力的配色方案會(huì)讓用戶更加舒適,引導(dǎo)效果也更好。色彩彼此襯托營造獨(dú)特的品牌視覺,也構(gòu)成用戶的視覺路徑,吸引他們看下去。

  諸如著名的生產(chǎn)力工具Dropbox和Marvel也是這樣來進(jìn)行配色的,Dropbox尤為典型。兩個(gè)工具都采用了藍(lán)色作為主色調(diào),同時(shí)還使用了綠色、橙色和紅色來搭配,整個(gè)近似色和對(duì)比色都有了,幾種色彩在一起會(huì)給人一種相互搭配良好的感覺。

  圖片中的色彩

  借助圖片中的色彩來構(gòu)建配色是非常有趣的用色技巧,UI元素確實(shí)不是網(wǎng)頁中*可設(shè)計(jì)的色彩。大圖背景和高清產(chǎn)品圖的流行使得圖片色彩成為整個(gè)設(shè)計(jì)中不可忽視的和總要組成,通過合成圖片將色彩注入到設(shè)計(jì)中,也是相當(dāng)不錯(cuò)的選擇。

  說道讓產(chǎn)品,ETQ也同樣讓產(chǎn)品優(yōu)先級(jí)壓過UI,極簡的網(wǎng)站設(shè)計(jì)風(fēng)格之下,配色方案顯然是延續(xù)自產(chǎn)品配色。設(shè)計(jì)師讓產(chǎn)品本身成為視覺重心,盡管不是所有的鞋子都是五顏六色,但依然盡量讓配色兼容盡量多的產(chǎn)品,這也是真正意義上的以產(chǎn)品為中心。

  然而在網(wǎng)頁前端設(shè)計(jì)中色彩是強(qiáng)大的,它們會(huì)以各種方式融入設(shè)計(jì)。它們除了強(qiáng)大的視覺特征,還擁有不俗的功能性,引導(dǎo)用戶,提升凝聚力,展現(xiàn)風(fēng)格,傳遞信息,勾勒性格,甚至賦予設(shè)計(jì)以含義。如果你想學(xué)習(xí)更多的前端視覺方向的知識(shí)可以關(guān)注誠筑說。

溫馨提示:為不影響您的學(xué)業(yè),來校區(qū)前請(qǐng)先電話咨詢,方便我校安排相關(guān)的專業(yè)老師為您解答
相關(guān)資料
姓名不能為空
手機(jī)號(hào)格式錯(cuò)誤