2014-10-24 藍(lán)藍(lán)設(shè)計(jì)的小編
網(wǎng)頁設(shè)計(jì)中的色彩如何搭配是一件令設(shè)計(jì)師有些困擾的事情。用保守的色彩搭配,擔(dān)心客戶不買賬,因?yàn)闇贤ǖ臅r(shí)候他們總喜歡籠統(tǒng)的說‘總之我要我的網(wǎng)站高大上,看起來和別人不一樣’;用別出心裁的搭配手法,又擔(dān)心客戶欣賞不了,最后各種挑刺。也許,只要你的設(shè)計(jì)在第一眼能給予客戶一種舒適感,之后的合作就能一路綠燈。
以下是為你搜羅的關(guān)于網(wǎng)頁設(shè)計(jì)中冷暖色調(diào)運(yùn)用的相關(guān)案例,希望能為你帶來靈感,第一時(shí)間抓住客戶的心。
1.Nelly Rodi的網(wǎng)站用真實(shí)照片作為背景大圖,整個(gè)頁面呈現(xiàn)明顯的冷色調(diào),少量的文字也用了百搭的黑色或白色。這樣的做法比較保守,雖然不會(huì)用錯(cuò),但也沒有什么出彩的地方。而設(shè)計(jì)師很巧妙地在頁面右側(cè)加了一個(gè)幾何形狀的暖色系色塊,不僅能讓瀏覽者一眼找到視覺重點(diǎn),也讓原本中庸的網(wǎng)頁變得更特別。底部的幽靈按鈕設(shè)計(jì)同時(shí)表現(xiàn)了極簡(jiǎn)網(wǎng)頁的國(guó)際趨勢(shì)。
2.橙色總能給人一種溫暖陽光的視覺感受,但如果使用過度就會(huì)產(chǎn)生一種復(fù)雜拖沓的感覺。這個(gè)案例中雖然使用了很大面積的橙色,但設(shè)計(jì)師加強(qiáng)了色彩本身的透明度,并且結(jié)合了小部分的紋理設(shè)計(jì),讓畫面更加時(shí)尚別致。
3.當(dāng)同時(shí)出現(xiàn)五彩繽紛的多種色彩時(shí),頁面就會(huì)變得很熱鬧,正如案例所示,無所謂冷色調(diào)還是暖色調(diào),又或是中性色,一旦將這些顏色結(jié)合在一起,網(wǎng)頁就會(huì)可愛起來,為用戶帶來好心情。
4.這個(gè)案例選用了較冷的淺藍(lán)色漸變作為主色調(diào),中間的紅色波浪線順理成章的成為視覺重點(diǎn)。這是一個(gè)典型的冷暖色調(diào)的搭配使用手法,用大部分的冷色調(diào)來強(qiáng)調(diào)突出小部分的暖色調(diào)元素。
5.這個(gè)網(wǎng)站分成了左右兩個(gè)部分。背景選用了Metro風(fēng)格的設(shè)計(jì),上面鋪了一層透明度很高的白色和黑色色塊。黑白都屬于中性色彩,黑色和紅色又是一種色彩學(xué)中的經(jīng)典配搭,因此,用戶的視角完全會(huì)被吸引到紅色的部分上。
6.這個(gè)網(wǎng)站的風(fēng)格比較夢(mèng)幻迷離,主色系偏暗,設(shè)計(jì)師借助“鐵塔”本身的燈光,用濾鏡效果營(yíng)造出了更加唯美的畫面感,很容易讓瀏覽者融入氣氛,幽靈按鈕與頁面整體的匹配度也很高。
7.灰色系屬于偏冷的中性色,而案例中的灰色屬于暖灰。在大面積暖灰中,紅色顯得格外搶眼,起到了引導(dǎo)用戶視線的作用。
8. Metro風(fēng)格有時(shí)會(huì)讓人覺得過于規(guī)整,因此,設(shè)計(jì)師用漸變暖色讓頁面變得更活潑生動(dòng)。畫面中從上到下的色彩由淺到深,讓我們的視線轉(zhuǎn)移有了指向性。
9.這個(gè)案例融合了Metro和幾何元素的設(shè)計(jì),冷暖色彩相間,形成了一個(gè)色彩豐富的場(chǎng)景,減緩了用戶產(chǎn)生視覺疲勞的速度,更利于吸引用戶點(diǎn)擊和查看。
10.Airnauts的網(wǎng)站首屏用一條最簡(jiǎn)單的分割線將頁面切割成兩個(gè)幾何形狀,這兩個(gè)形狀的色彩之間完全沒有過渡,直接銜接在一起,但卻不覺得很生硬,反而有一種獨(dú)特的設(shè)計(jì)感在其中。
網(wǎng)頁中的冷暖色調(diào)只要使用得當(dāng),就能很自然的為瀏覽者營(yíng)造出一種舒適的視覺享受,并且深深的融入網(wǎng)站的情境中!
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com