一份簡單明了的網(wǎng)頁設(shè)計用色指南-網(wǎng)站建設(shè)分享

其實今天網(wǎng)頁設(shè)計中的配色和用色方式。是一件非常有趣又值得思考的事情。盡管絕大多數(shù)的網(wǎng)站看起來非常相似。但是巧妙的用色會讓布局平庸的網(wǎng)站顯得不同凡響。

其實我并不是想說某種革命性的用色技巧或者某個全新的發(fā)現(xiàn)。但是絕大多數(shù)的網(wǎng)站配色看起來確實非常相似。那么配色的意義又何在呢？如果全世界所有的網(wǎng)站都采用五彩繽紛的配色。那么不會有任何網(wǎng)站從中脫穎而出。當(dāng)然。今天的網(wǎng)頁設(shè)計界已經(jīng)很接近這個狀況了。從這個角度上來看。柔和的色調(diào)會更容易讓用戶眼前一亮。

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

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

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

Takeit 的頁面設(shè)計同樣如此。整屏的藍(lán)色背景讓白色的網(wǎng)頁元素顯得非常明顯。白色的大標(biāo)題是視覺重心。然后用戶會注意到標(biāo)題周圍的App Store按鈕。LOGO和漢堡菜單。

這些案例都講述了如何用色彩來吸引用戶注意力。

創(chuàng)造個性

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

An interesting Day 是為一個“在奧斯陸峽灣的小島上上為期一天的奇怪小型會議”而設(shè)計的網(wǎng)站。黃色背景上用紅色文字的網(wǎng)站并不多見。配合著個性十足的圖片。整個網(wǎng)站所有的設(shè)計元素都是在為你闡明“奇怪”的特色。

用色彩發(fā)聲

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

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

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

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

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

Innovation project Canvas 的情況則稍有不同。設(shè)計師使用單純的綠色來引導(dǎo)用戶瀏覽。網(wǎng)頁并未使用更多的色彩。但是童言非常優(yōu)秀地完成了極具凝集力的色彩設(shè)計。

圖片中的色彩

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

CartoDb 是一款可以將位置數(shù)據(jù)可視化的有趣App。那么有什么能比真實的地圖來的更加直觀美麗呢？所以它出現(xiàn)在網(wǎng)站頁。用視覺化的方式來呈現(xiàn)自己的產(chǎn)品。讓色彩為產(chǎn)品代言。

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

不是所有網(wǎng)站都要顯眼的色彩

并不是所有的網(wǎng)站都需要鮮艷的色彩。依然有許多獨特的網(wǎng)站使用經(jīng)典的黑白灰來作為配色方案。而這些中性色也很好地呈現(xiàn)出了屬于它們的情緒。

Visual Soldiers 和 Tomasz Wysocki 的網(wǎng)站都是這樣。優(yōu)雅而干練的色調(diào)是它們的基因。簡練的布局和獨特的品牌定位。使得它們無需鮮艷的色彩來呈現(xiàn)CTA按鈕和邊角的菜單。安靜的白與黑就足夠了。

結(jié)語

色彩是強(qiáng)大的。它們會以各種方式融入設(shè)計。它們除了強(qiáng)大的視覺特征。還擁有不俗的功能性。引導(dǎo)用戶。提升凝聚力。展現(xiàn)風(fēng)格。傳遞信息。勾勒性格。甚至賦予設(shè)計以含義。

你需要思考色彩的多與少。了解色彩在網(wǎng)頁設(shè)計中的度。熟悉每種色彩的性格。明白如何在繁雜的噪音和廣袤的世界中找到屬于自己的位置。

分享名稱：一份簡單明了的網(wǎng)頁設(shè)計用色指南-網(wǎng)站建設(shè)分享
網(wǎng)站路徑：http://www.bm7419.com/news9/293309.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站維護(hù)、電子商務(wù)、品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)