色彩-賦予網(wǎng)頁不同的生命力
色彩本身就是一種極具生命力和塑造性的元素,一個(gè)相同架構(gòu)的網(wǎng)頁設(shè)計(jì)能在不同的顏色映襯下渲染出不同的意義和氣氛,在瀏覽一個(gè)全新網(wǎng)頁的時(shí)候,人類的第一認(rèn)知就是色彩搭配成就的視覺效果。每一種色彩對(duì)于每一個(gè)人都有著不同意義,并且寄托著不同的情感。這,也許就是色彩的魅力所在。
以下是AnyForWeb收集分享的擁有良好視覺色彩體驗(yàn)度的10個(gè)網(wǎng)頁,供大家參考借鑒。
1.綠色和紫色的搭配是不是很獨(dú)特?這樣的色彩沖擊的確很令人難以置信,但由于設(shè)計(jì)師在網(wǎng)頁內(nèi)容上只使用了最簡(jiǎn)單的線條,除了這兩種顏色以外,也只有少量的白色作為點(diǎn)綴出現(xiàn)。所以如果要使用撞色的手法,還是應(yīng)該注意盡量摒棄其他一切的不必要成分,以保持整個(gè)頁面的秩序。
2.第二個(gè)案例與第一個(gè)運(yùn)用了相同的理念,也呈現(xiàn)出了類似的效果,但在內(nèi)容的使用上卻截然不同。這個(gè)頁面用了清新的薄荷綠和保守的黑色,假設(shè)與上一個(gè)案例一樣,只用最簡(jiǎn)單的線條來作為網(wǎng)頁主要內(nèi)容,那么毋庸置疑,這個(gè)頁面一定會(huì)很無聊單調(diào)。但設(shè)計(jì)師將網(wǎng)站整體風(fēng)格打造成涂鴉風(fēng),令網(wǎng)站更加青春有活力。
3.這個(gè)網(wǎng)站采用了Metro風(fēng)格的界面設(shè)計(jì),網(wǎng)站整體底色比較單調(diào),以黑白灰色為主,這正是因?yàn)檫@樣的底色,才更加凸顯出網(wǎng)頁需要表現(xiàn)的內(nèi)容。每個(gè)矩陣右下角的小標(biāo)簽使用了一些熒光色的成分,讓網(wǎng)站充滿了現(xiàn)代感。
4.這個(gè)界面以藍(lán)色為主,中間部分的大面積天空藍(lán)成為了另外兩種藍(lán)色最合適的嫁接橋梁,讓整個(gè)頁面顯得毫不突兀。左邊的熒光藍(lán)是這三者中最亮眼的顏色,自然而然成了頁面的視覺中心;右邊水粉質(zhì)感的藍(lán)色讓頁面更有完整性。
5.傳統(tǒng)概念的紅綠色搭配總帶著幾分違和感,而在現(xiàn)代的設(shè)計(jì)中,似乎已經(jīng)不那么避忌紅綠色在同一個(gè)空間中同時(shí)出現(xiàn)了。但在紅綠色之間畢竟存在一定的跳脫性,因此在使用時(shí),色塊的大小和中間的銜接都是至關(guān)重要的。如下案例,色塊內(nèi)容呈現(xiàn)立體狀態(tài),有陰影的借力能讓整體看起來更和諧,橙色黃色的過渡也讓瀏覽者的視覺體驗(yàn)有一定的緩沖周期。
6.真實(shí)的背景大圖讓網(wǎng)站顯得比較生活化,而鮮艷的紅色區(qū)域瞬間將網(wǎng)站風(fēng)格拉回了許多時(shí)尚感,并且輕而易舉的抓住了瀏覽者的眼球。
7.看似雜亂無章,并且缺乏邏輯性的色彩搭配其實(shí)暗藏玄機(jī)。仔細(xì)一看,我們并不難發(fā)現(xiàn),案例中的左右畫面其實(shí)對(duì)稱的,但是在色彩上卻有著微妙的小差異,讓頁面在平衡中找到一種歸屬感。
8.設(shè)計(jì)師將喬布斯的畫像制作出濃墨重彩的效果,各種顏色的匯聚在一起,形成了一種特別的視覺沖擊力。
9.黃色的主色調(diào)總是會(huì)給人一種很快樂美好的感覺,畫面中出現(xiàn)了許多種不同的黃色,每一種都代表了不同的喻意和情感。這就是色彩的魅力。
10.這個(gè)頁面的背景使用了略微漸變的星空?qǐng)D,深藍(lán)色與溫和的紅白條紋相融合,形成了一種獨(dú)有的視覺美感。
不同性質(zhì)的網(wǎng)站需要不同的色彩來搭配,不用多么絢麗多彩,只要找到最適合的配色方案,就足以令人眼前一亮。
本文地址:http://m.pkvc.cn/tutorial/ui2091.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏