編者按:純色和漸變?cè)诟呤盅劾锊粌H是顏色的組合,它們可以引導(dǎo)視覺(jué)焦點(diǎn)、渲染氛圍、傳遞情緒等等,是網(wǎng)頁(yè)設(shè)計(jì)新的一個(gè)流行趨勢(shì)。想運(yùn)用好它們,最要緊是在色彩搭配與透明度上下功夫,今天由一群設(shè)計(jì)師高手用真實(shí)案例給同學(xué)們上課,教你正確地利用它們。
在當(dāng)今這個(gè)充斥著先進(jìn)的特效和精妙風(fēng)格的世界中,誰(shuí)曾料到,像純色和漸變這樣簡(jiǎn)單的手法,竟能夠催化出創(chuàng)造力,并極大提升網(wǎng)站的美學(xué)水準(zhǔn)?現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)師們,證明了優(yōu)雅的插畫(huà)、精致的圖形和壯麗的照片,都能在彩色濾鏡效果下很自然地得到強(qiáng)調(diào)。氣氛煥然一新,網(wǎng)站開(kāi)始變得光彩奪目。的確,它有助于解決某些問(wèn)題。 首先,彩色濾鏡能給網(wǎng)站耳目一新的外觀,卻不會(huì)增加負(fù)擔(dān) 。其次,它通過(guò)搭配傳遞各種情緒的色彩,很好地豐富了設(shè)計(jì)。第三,作為一層低透明度的遮罩,它不會(huì)掩蓋主背景的魅力,對(duì)于想要輕微淡化輪播圖或視頻區(qū)域,卻仍希望其吸引力不減的人 ,這點(diǎn)尤其有用。最后,它為前面的內(nèi)容提供了堅(jiān)實(shí)的基礎(chǔ),兼顧了可讀性。 這種方案能非常協(xié)調(diào)地與各種元素協(xié)作:提供強(qiáng)烈反差的白色、極受歡迎的扁平風(fēng)格元素,還有為項(xiàng)目增添精致微妙感的輪廓式圖形。 這里有些杰出的網(wǎng)頁(yè)設(shè)計(jì),示范了如何正確地運(yùn)用這項(xiàng)技巧。 Zimya 著陸頁(yè)帶有一層美妙的半透明漸變,立刻喚起積極溫暖的感覺(jué)。從紫紅色到橙黃色,遮罩層華麗的顏色令人著迷。 Red Collar
平滑的半透明漸變極大地豐富了背景圖——這家機(jī)構(gòu)的視覺(jué)象征。它增添了幾分獨(dú)特,不僅與整個(gè)場(chǎng)景形成互補(bǔ),也形成了熱情洋溢的氛圍。 Ingram Cole and Land 這個(gè)網(wǎng)站基于一些非常棒的賞心悅目的效果,這不僅指它的動(dòng)畫(huà),還有成功貫穿整個(gè)網(wǎng)站設(shè)計(jì)的照片處理手法。從紫色到粉色,溫暖而微妙的漸變,使歡迎頁(yè)面看起來(lái)相當(dāng)美妙奢華。 Adopt Wales 設(shè)計(jì)師在視頻背景上覆蓋了一層迷人的粉色漸變,營(yíng)造了親切友好的氛圍。顏色與透明度的選擇很好地突出了上面的元素。 Snippet App
對(duì)于更喜歡創(chuàng)造冷靜與便捷的整體感觀的人而言,藍(lán)與白的結(jié)合是非常有用的。設(shè)計(jì)師實(shí)際上用了三種色調(diào),不過(guò)這兩者占據(jù)主要地位。 Joyce Van Herck
Joyce Van Herck是名高端藝術(shù)家,她的在線作品集網(wǎng)站嵌入了優(yōu)美的幾何圖形。甜美的半透明漸變使斜線擁有活力,加強(qiáng)了這種愉悅的氛圍。 Electric Mainline 和前面提到的Snippet App很像,設(shè)計(jì)師運(yùn)用了藍(lán)白混合。不論如何,低透明度的遮罩層,使用戶欣賞其背后那張扮演主角的背景圖。 Invelab
同樣,設(shè)計(jì)師試圖在背景與前景之間營(yíng)造完美的對(duì)比,同時(shí)也將注意力引向工作室的圖片。明亮的紫色有效地與白色形成互補(bǔ)。 M2B
歡快的半透明漸變強(qiáng)化了網(wǎng)站的視覺(jué)表現(xiàn)。正由于采用了這種方式,全新的色彩使得背后的圖片陡然增色。而白色被用作一種補(bǔ)充色,使內(nèi)容看起來(lái)醒目。 驚嘆這些網(wǎng)站的美妙之余,不要忘記作者高超的配色能力呦,如果你配色不對(duì),很容易就成了大紅大紫的低檔作品。不過(guò)這里有個(gè)超實(shí)用的小絕招:《秒變配色高手!怎么都不會(huì)錯(cuò)的6條網(wǎng)頁(yè)設(shè)計(jì)配色原則》
Numero Neuf 首頁(yè)的特色是大量基于圖片的導(dǎo)航,每一項(xiàng)都覆蓋了一層黑色半透明濾鏡。這種方式很常用:如果你想為文字營(yíng)造完美的對(duì)比,并淡化菜單項(xiàng),很自然就應(yīng)該將注意力引向某個(gè)選中的項(xiàng)。 Evoluzione Telematica 綠色使人聯(lián)想到正能量,此處就是這么用的。明亮的色調(diào)與白色共同建立了一種積極的形象。 The Place
這位設(shè)計(jì)師借極簡(jiǎn)主義的方式重現(xiàn)了優(yōu)雅。所選的顏色反映了網(wǎng)站的個(gè)性,統(tǒng)一了視頻樣式。 Obbaki Foundation
顏色可以提升感觀的協(xié)調(diào)程度。它豐富了網(wǎng)站的主題,同時(shí)輕而易舉加入了一些戲劇性效果,對(duì)整體氛圍有一定貢獻(xiàn)。 Studio Up
這個(gè)機(jī)構(gòu)通過(guò)迷人的效果展現(xiàn)了一個(gè)視覺(jué)差滾動(dòng)的介紹頁(yè)面,向普通用戶證明了他們熟稔網(wǎng)頁(yè)流行趨勢(shì)。每一頁(yè)都有其獨(dú)特的顏色,覆蓋在動(dòng)態(tài)的背景上,用以突顯其內(nèi)容。 Hype Agency 設(shè)計(jì)師在焦點(diǎn)區(qū)域揮灑了一整片的橙色,為網(wǎng)站營(yíng)造了恰當(dāng)?shù)姆e極的氛圍。另一種顏色則是白色,非常明亮并融入其中。 Papertelevision
薄薄一層明亮多彩的顏色賞心悅目,伴隨著每個(gè)主要部分。首頁(yè)的深紫色幾乎不容易注意到,但它仍然能使頁(yè)面活潑有趣。 結(jié)論 彩色濾鏡——這種從前在平面設(shè)計(jì)中的基本技巧,在網(wǎng)頁(yè)設(shè)計(jì)中重獲新生。雖然色彩輕微地稀釋了設(shè)計(jì),它也帶來(lái)了一絲精致和特別的魅力,同時(shí)兼具功能性。設(shè)計(jì)師們趕快學(xué)起來(lái)吧!