網(wǎng)頁設(shè)計(jì)中的配色精髓

本文格式為Word版，下載可任意編輯——網(wǎng)頁設(shè)計(jì)中的配色精髓網(wǎng)頁設(shè)計(jì)中的配色精華

你需要斟酌色調(diào)的多與少，了解色調(diào)在網(wǎng)頁設(shè)計(jì)中的度，熟諳每種色調(diào)的性格，明白如何在繁雜的噪音和廣袤的世界中找到屬于自己的位置。下面我為大家共享網(wǎng)頁設(shè)計(jì)中的配色精華，接待閱讀學(xué)習(xí)!

用色調(diào)引導(dǎo)用戶留神力

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

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

Takeit的頁面設(shè)計(jì)同樣如此，整屏的藍(lán)色背景讓白色的網(wǎng)頁元素顯得分外明顯。白色的大標(biāo)題是視覺重心，然后用戶會(huì)留神到標(biāo)題周邊的AppStore按鈕，LOGO和漢堡菜單。

這些案例都陳述了如何用色調(diào)來吸引用戶留神力。

創(chuàng)造天性

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

AninterestingDay是為一個(gè)"在奧斯陸峽灣的小島上上為期一天的古怪小型會(huì)議'而設(shè)計(jì)的網(wǎng)站。web前端開發(fā)培訓(xùn)班黃色背景上用紅色文字的網(wǎng)站并不多見，合作著天性十足的圖片，整個(gè)網(wǎng)站全體的設(shè)計(jì)元素都是在為你表明"古怪'的特色。

用色調(diào)發(fā)聲

用色調(diào)來發(fā)聲，做一個(gè)屬于自己網(wǎng)站的聲明，這比起單純的"吸引用戶'來的更加好玩。要吸引用戶留神力，色調(diào)足夠突出就行，但是更重要的是，這種色調(diào)要足夠?yàn)槟?做聲明'。你不能隨意挑揀一個(gè)嬌艷的色調(diào)，這個(gè)色調(diào)還要契合你的精神，想要傳遞的獨(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)造力十足的特色，所以，此處的亮粉色符合規(guī)律，也為設(shè)計(jì)者"發(fā)聲'了。

鞏固凝結(jié)力，引導(dǎo)用戶流程

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

諸如出名的生產(chǎn)力工具Dropbox和Marvel也是這樣來舉行配色的，Dropbox尤為典型。兩個(gè)工具都采用了藍(lán)色作為主色調(diào)，北京web前端培訓(xùn)同時(shí)還使用了綠色、橙色和紅色來搭配，整個(gè)近似色和比較色都有了，幾種色調(diào)在一起會(huì)給人一種相互搭配良好的感覺。

InnovationProjectCanvas的處境那么稍有不同，設(shè)計(jì)師使用單純的綠色來引導(dǎo)用戶欣賞，網(wǎng)頁并未使用更多的色調(diào)，但是童言分外優(yōu)秀地完成了極具凝集力的色調(diào)設(shè)計(jì)。

圖片中的`色調(diào)

借助圖片中的色調(diào)來構(gòu)建配色是分外好玩的用色技巧，UI元素切實(shí)不是網(wǎng)頁中唯一可設(shè)計(jì)的色調(diào)。大圖背景和高清產(chǎn)品圖的流行使得圖片色調(diào)成為整個(gè)設(shè)計(jì)中不成忽略的和總要組成，通過合成圖片將色調(diào)注入到設(shè)計(jì)中，也是相當(dāng)不錯(cuò)的選擇。

CartoDB是一款可以將位置數(shù)據(jù)可視化的好玩APP，那么有什么能比真實(shí)的地圖來的更加直觀美觀呢?所以它展現(xiàn)在網(wǎng)站首頁，用最視覺化的方式來呈現(xiàn)自己的產(chǎn)品，讓色調(diào)為產(chǎn)品代言。

說道讓產(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)站都要醒目的色調(diào)

并不是全體的網(wǎng)站都需要嬌艷的色調(diào)。照舊有大量獨(dú)特的網(wǎng)站使用經(jīng)典的黑白灰來作為配色方案，而這些中性色也很好地呈現(xiàn)出了屬于它們的心緒。

VisualSoldiers和TomaszWysocki的網(wǎng)站都是這樣，優(yōu)雅而干練的色調(diào)是它們的基因。簡練的布局和獨(dú)特的品牌定位，使得它們無需嬌艷的色調(diào)來呈現(xiàn)CTA按鈕和邊角的菜單，寧靜的白與