2022-11-08 分類: 網(wǎng)站建設(shè)
其實(shí)今天網(wǎng)頁(yè)設(shè)計(jì)中的配色和用色方式,是一件非常有趣又值得思考的事情。盡管絕大多數(shù)的網(wǎng)站看起來(lái)非常相似,但是巧妙的用色會(huì)讓布局平庸的網(wǎng)站顯得不同凡響。
其實(shí)我并不是想說(shuō)某種革命性的用色技巧或者某個(gè)全新的發(fā)現(xiàn),但是絕大多數(shù)的網(wǎng)站配色看起來(lái)確實(shí)非常相似。那么配色的意義又何在呢?如果全世界所有的網(wǎng)站都采用五彩繽紛的配色,那么不會(huì)有任何網(wǎng)站從中脫穎而出。當(dāng)然,今天的網(wǎng)頁(yè)設(shè)計(jì)界已經(jīng)很接近這個(gè)狀況了。從這個(gè)角度上來(lái)看,柔和的色調(diào)會(huì)更容易讓用戶眼前一亮。
用色彩引導(dǎo)用戶注意力絕大多數(shù)網(wǎng)站在布局設(shè)計(jì)之初,通常就采用簡(jiǎn)單的黑白灰,白色背景+黑色文字。而色彩在這種情況下會(huì)起到強(qiáng)調(diào)和高亮的作用,可以引導(dǎo)用戶注意按鈕、標(biāo)題和鏈接。
以Vibrant 的網(wǎng)頁(yè)設(shè)計(jì)為例,他們的頁(yè)中背景和圖像都采用的是黑白色調(diào),但是LOGO,按鈕和漢堡圖標(biāo)都采用的是閃亮的黃色,它們可以很快抓住用戶的注意力。
Takeit 的頁(yè)面設(shè)計(jì)同樣如此,整屏的藍(lán)色背景讓白色的網(wǎng)頁(yè)元素顯得非常明顯。白色的大標(biāo)題是視覺(jué)重心,然后用戶會(huì)注意到標(biāo)題周圍的App Store按鈕,LOGO和漢堡菜單。
這些案例都講述了如何用色彩來(lái)吸引用戶注意力。
創(chuàng)造個(gè)性色彩的美好之初字啊與,它可以為網(wǎng)站或者品牌定下基調(diào)或者營(yíng)造情感、傳達(dá)情緒。Beagleis 為用戶提供制作項(xiàng)目簡(jiǎn)介的服務(wù),而他們的網(wǎng)站配色采用的是自然系色彩。當(dāng)你向下滾動(dòng)的時(shí)候,背景色會(huì)從綠色變?yōu)樽厣⑸罨疑踔练奂t色。自然色能給人優(yōu)雅而的感受,從而讓這個(gè)服務(wù)給人留下深刻的印象。
An interesting Day 是為一個(gè)“在奧斯陸峽灣的小島上上為期一天的奇怪小型會(huì)議”而設(shè)計(jì)的網(wǎng)站。黃色背景上用紅色文字的網(wǎng)站并不多見(jiàn),配合著個(gè)性十足的圖片,整個(gè)網(wǎng)站所有的設(shè)計(jì)元素都是在為你闡明“奇怪”的特色。
用色彩發(fā)聲用色彩來(lái)發(fā)聲,做一個(gè)屬于自己網(wǎng)站的聲明,這比起單純的“吸引用戶”來(lái)的更加有趣。要吸引用戶注意力,色彩足夠突出就行,但是更重要的是,這種色彩要足夠?yàn)槟?ldquo;做聲明”。你不能隨便挑選一個(gè)鮮艷的色彩,這個(gè)色彩還要契合你的精神,想要傳遞的獨(dú)特情緒。
就以Gaga 交響樂(lè)的著陸頁(yè)為例,當(dāng)你打開(kāi)網(wǎng)站的時(shí)候,鮮亮的粉色會(huì)讓你眼前一亮。在“交響樂(lè)”的主題之下,用戶對(duì)網(wǎng)站風(fēng)格的預(yù)期是沉穩(wěn)的色調(diào),但是亮粉色則完全不再低調(diào)優(yōu)雅之列,但是它符合網(wǎng)站中交響樂(lè)活力四射、樂(lè)趣無(wú)窮和創(chuàng)造力十足的特色,所以,此處的亮粉色符合邏輯,也為設(shè)計(jì)者“發(fā)聲”了。
增強(qiáng)凝聚力,引導(dǎo)用戶流程色彩同樣可以用來(lái)引導(dǎo)用戶來(lái)進(jìn)行用戶流程。就像上方Takeit的案例,色彩會(huì)引導(dǎo)用戶的眼睛,但是不會(huì)采用太過(guò)激烈的搭配方式。微妙而富有凝聚力的配色方案會(huì)讓用戶更加舒適,引導(dǎo)效果也更好。色彩彼此襯托營(yíng)造獨(dú)特的品牌視覺(jué),也構(gòu)成用戶的視覺(jué)路徑,吸引他們看下去。
諸如著名的生產(chǎn)力工具Dropbox和Marvel也是這樣來(lái)進(jìn)行配色的,Dropbox尤為典型。兩個(gè)工具都采用了藍(lán)色作為主色調(diào),同時(shí)還使用了綠色、橙色和紅色來(lái)搭配,整個(gè)近似色和對(duì)比色都有了,幾種色彩在一起會(huì)給人一種相互搭配良好的感覺(jué)。
Innovation Project Canvas 的情況則稍有不同,設(shè)計(jì)師使用單純的綠色來(lái)引導(dǎo)用戶瀏覽,網(wǎng)頁(yè)并未使用更多的色彩,但是童言非常優(yōu)秀地完成了極具凝集力的色彩設(shè)計(jì)。
圖片中的色彩借助圖片中的色彩來(lái)構(gòu)建配色是非常有趣的用色技巧,UI元素確實(shí)不是網(wǎng)頁(yè)中可設(shè)計(jì)的色彩。大圖背景和高清產(chǎn)品圖的流行使得圖片色彩成為整個(gè)設(shè)計(jì)中不可忽視的和總要組成,通過(guò)合成圖片將色彩注入到設(shè)計(jì)中,也是相當(dāng)不錯(cuò)的選擇。
CartoDB 是一款可以將位置數(shù)據(jù)可視化的有趣APP,那么有什么能比真實(shí)的地圖來(lái)的更加直觀美麗呢?所以它出現(xiàn)在網(wǎng)站頁(yè),用視覺(jué)化的方式來(lái)呈現(xiàn)自己的產(chǎn)品,讓色彩為產(chǎn)品代言。
說(shuō)道讓產(chǎn)品,ETQ也同樣讓產(chǎn)品優(yōu)先級(jí)壓過(guò)UI,極簡(jiǎn)的網(wǎng)站設(shè)計(jì)風(fēng)格之下,配色方案顯然是延續(xù)自產(chǎn)品配色。設(shè)計(jì)師讓產(chǎn)品本身成為視覺(jué)重心,盡管不是所有的鞋子都是五顏六色,但依然盡量讓配色兼容盡量多的產(chǎn)品,這也是真正意義上的以產(chǎn)品為中心。
不是所有網(wǎng)站都要顯眼的色彩
并不是所有的網(wǎng)站都需要鮮艷的色彩。依然有許多獨(dú)特的網(wǎng)站使用經(jīng)典的黑白灰來(lái)作為配色方案,而這些中性色也很好地呈現(xiàn)出了屬于它們的情緒。
Visual Soldiers 和 Tomasz Wysocki 的網(wǎng)站都是這樣,優(yōu)雅而干練的色調(diào)是它們的基因。簡(jiǎn)練的布局和獨(dú)特的品牌定位,使得它們無(wú)需鮮艷的色彩來(lái)呈現(xiàn)CTA按鈕和邊角的菜單,安靜的白與黑就足夠了。
結(jié)語(yǔ)色彩是強(qiáng)大的,它們會(huì)以各種方式融入設(shè)計(jì)。它們除了強(qiáng)大的視覺(jué)特征,還擁有不俗的功能性,引導(dǎo)用戶,提升凝聚力,展現(xiàn)風(fēng)格,傳遞信息,勾勒性格,甚至賦予設(shè)計(jì)以含義。
你需要思考色彩的多與少,了解色彩在網(wǎng)頁(yè)設(shè)計(jì)中的度,熟悉每種色彩的性格,明白如何在繁雜的噪音和廣袤的世界中找到屬于自己的位置。
當(dāng)前文章:網(wǎng)頁(yè)設(shè)計(jì)用色指南
網(wǎng)站URL:http://m.newbst.com/news38/211488.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開(kāi)發(fā)、ChatGPT、域名注冊(cè)、App開(kāi)發(fā)、搜索引擎優(yōu)化、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容