雙色配色方案并不是簡單的兩種色彩搭配到一起,這兩種色彩通常是兩種對比明顯的色彩。而我們所常見的雙色配色的圖片則主要突出中間色調(diào)和高光,藍(lán)色、棕色、紅色和黃色是這種配色中最常見的色調(diào)。然而,對于網(wǎng)頁設(shè)計師而言,雙色配色則很少受到這樣的限制,色調(diào)的選取更加自由,搭配方式也更加多樣而個性,你會發(fā)現(xiàn)原來雙色配色也同樣可以打開新世界的大門。
如果你需要可以立刻上手的工具,那么下面的這些應(yīng)該能幫到你:
·jQuery Duotone;
·Duotone Colorschemes;
·Colofilter.
接下來,我們一起看看那些將雙色配色玩兒得出神入化的優(yōu)秀網(wǎng)頁設(shè)計,看看這個令人著迷的設(shè)計趨勢,到底有著怎樣的魅力。
作為一個運(yùn)動品牌,設(shè)計師通過一系列時尚而現(xiàn)代的高素質(zhì)圖片來體現(xiàn)它的特質(zhì),而統(tǒng)一的深藍(lán)/明黃配色則讓整個網(wǎng)站的氣質(zhì)和氛圍保持了高度的一致,個性也得以凸顯。
Mirage Festival 的紅藍(lán)搭配看起來略顯怪異,但是兩種略顯疏離的色彩反而營造出獨(dú)特的美感,尤其是同主流的白底黑字進(jìn)行對比的時候。
Fjord Trend 的首頁中,不同圖片的背景圖被設(shè)計成了雙色配色。設(shè)計師所選取的色彩秉承了傳統(tǒng)意義上雙色調(diào)圖片的配色風(fēng)格,色彩沉穩(wěn)現(xiàn)代,柔和而不具侵略性,但是作為主要的色調(diào),兩者又有著明顯的對比。
經(jīng)典的紅黑色被Triple 9的首頁用作雙色配色的主色調(diào),兩種情緒濃烈的色彩讓這里的視頻和圖片都帶有微妙的情緒。與此同時,色調(diào)的選取還讓網(wǎng)站隱隱散發(fā)出暴力和野蠻的感覺,個性十足。
網(wǎng)站的首頁被設(shè)計成為四個全屏的輪播圖,每個都有著漂亮的雙色調(diào)背景,我們所看到的藍(lán)色背景的圖片是海軍招募主題的頁面。背景的色彩選取同時也讓前景的內(nèi)容和元素凸顯出來,讓用戶更容易獲取。
Heroes and History 同樣也是一個雙色配色網(wǎng)站,主要的色調(diào)是紅色,作為網(wǎng)頁主要視覺要素的插畫也同樣是如此。和其他的頁面不同,雙色搭配中的另外一種是白色,除了網(wǎng)站的文本之外,插畫的外輪廓和少數(shù)幾個元素使用的是白色,讓插畫的風(fēng)格和特色更加明顯。
雖然同樣是使用的雙色配色,但是Holm Marcher & Co 的頁面從配色到結(jié)構(gòu)都給人一種嚴(yán)肅務(wù)實的感覺,沉穩(wěn)的色調(diào)給網(wǎng)站奠定了專業(yè)和強(qiáng)力的基調(diào)。
MailChimp 的回顧頁面的配色也可以稱得上絢爛,火熱的紅和冰冷的藍(lán)合二為一。為了保證統(tǒng)一性和體驗的一致性,設(shè)計師將背景圖片也轉(zhuǎn)化為和兩種主色調(diào)一致的色彩。
Atomic.io 的設(shè)計師則將網(wǎng)站的視頻和圖片都轉(zhuǎn)化為典型的雙色配色,強(qiáng)力的視覺沖擊力和典型的模塊化布局讓它簡單而一致。
大量專業(yè)領(lǐng)域和機(jī)構(gòu)的華麗照片填滿了網(wǎng)站,有些照片還保留著原樣,但是有的則進(jìn)行了有趣的調(diào)整。在典型的雙色配色之下,這些圖片呈現(xiàn)出不同凡響的美感和獨(dú)特設(shè)計感。
黃色和綠色的雙色配色并不常見,這種獨(dú)特的配色也讓這個頁面顯得風(fēng)格獨(dú)樹一幟,不同于傳統(tǒng)的雙色調(diào)圖片的那種沉穩(wěn),這個網(wǎng)頁的色調(diào)看起來更加活潑。
Tumblr 的年度總結(jié)在色調(diào)上更加復(fù)古懷舊,抽象的動畫和海報式的界面元素更是強(qiáng)化了這種感覺。略顯臟亂的用色讓整個頁面充滿了80年代的風(fēng)情,但是卡片式設(shè)計的加入,又沒有讓這種配色毀了整個設(shè)計,反而成功地讓它顯得更加條理化了。
Lois Jeans 的這個頁面設(shè)計,能量和情緒幾乎都要濃烈得溢出來一樣。雖然只是簡單的文字+圖片的排版,但是粉色+藍(lán)色的搭配讓頁面呈現(xiàn)出一種層次感,協(xié)調(diào)而驚艷。
雖然這樣的配色很少見,但是你并不會覺得New Deal Design的頁面難看,你更多會感覺它很有個性。粉紅色和黃色的搭配讓整個網(wǎng)站顯得明亮非凡,充滿戲劇性。這種明亮而友好的配色會給人傳達(dá)出一種正向的情緒。
Spotify 的這個頁面是一定要推薦的。作為年度音樂總結(jié)頁面,Spotify選取去年最有影響力、蜚聲國際的真正音樂潮人作為主題。設(shè)計師使用著兩年流行的雙色調(diào)設(shè)計來調(diào)整精選的藝人照片,營造出獨(dú)特的氛圍。動態(tài)設(shè)計和層次豐富的美感讓頁面的風(fēng)格更加先鋒,也更有特色。
首頁的設(shè)計透露出一種興奮的情緒,幾乎所有的元素被紫紅色染透了,屏幕上每個元素浸透在一種俏皮有趣的氛圍當(dāng)中。
網(wǎng)頁設(shè)計師對于現(xiàn)代風(fēng)格的駕馭力很強(qiáng),頁面干凈而平衡,和前面其他的案例不同,整個網(wǎng)站呈現(xiàn)出一種嚴(yán)肅的氣息,但是同時又不失魅力和藝術(shù)感染力。藍(lán)黑色調(diào)之間的過渡自然,白色的文本和按鈕有與之構(gòu)成對比,恰到好處。
這是Lois Jeans 的另外一個設(shè)計作品,網(wǎng)頁主題是春夏裝,整個頁面的設(shè)計相對更加謹(jǐn)慎,藍(lán)黑的色調(diào)更加冷峻,整個頁面呈現(xiàn)出一種冷的情緒,白色的點綴可以說是點睛之筆。頁面的過度效果精心設(shè)計過,令人側(cè)目。
網(wǎng)頁中的雙色調(diào)圖片很好的創(chuàng)造出一種年代感,優(yōu)雅而漂亮。淡雅的色調(diào)于深沉的褐色結(jié)合起來共同創(chuàng)造出懷舊的氛圍,圖片主題也同樣會喚醒大家對于80年代的回憶。
Standby 的頁面設(shè)計走的是極簡的路線,整體結(jié)構(gòu)也相對更加優(yōu)雅。深淺兩種藍(lán)色相互搭配,有趣的字體和巧妙的插畫恰如其分地豐富了整個設(shè)計的細(xì)節(jié)。
0
喜歡他,就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計網(wǎng)(CNDESIGN)會員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計網(wǎng)