網(wǎng)頁設(shè)計中冷暖色調(diào)運用分享

2014-10-24    藍藍設(shè)計的小編

網(wǎng)頁設(shè)計中的色彩如何搭配是一件令設(shè)計師有些困擾的事情。用保守的色彩搭配,擔心客戶不買賬,因為溝通的時候他們總喜歡籠統(tǒng)的說‘總之我要我的網(wǎng)站高大上,看起來和別人不一樣’;用別出心裁的搭配手法,又擔心客戶欣賞不了,最后各種挑刺。也許,只要你的設(shè)計在第一眼能給予客戶一種舒適感,之后的合作就能一路綠燈。

以下是為你搜羅的關(guān)于網(wǎng)頁設(shè)計中冷暖色調(diào)運用的相關(guān)案例,希望能為你帶來靈感,第一時間抓住客戶的心。

1.Nelly Rodi的網(wǎng)站用真實照片作為背景大圖,整個頁面呈現(xiàn)明顯的冷色調(diào),少量的文字也用了百搭的黑色或白色。這樣的做法比較保守,雖然不會用錯,但也沒有什么出彩的地方。而設(shè)計師很巧妙地在頁面右側(cè)加了一個幾何形狀的暖色系色塊,不僅能讓瀏覽者一眼找到視覺重點,也讓原本中庸的網(wǎng)頁變得更特別。底部的幽靈按鈕設(shè)計同時表現(xiàn)了極簡網(wǎng)頁的國際趨勢。

網(wǎng)頁設(shè)計;UI設(shè)計

2.橙色總能給人一種溫暖陽光的視覺感受,但如果使用過度就會產(chǎn)生一種復雜拖沓的感覺。這個案例中雖然使用了很大面積的橙色,但設(shè)計師加強了色彩本身的透明度,并且結(jié)合了小部分的紋理設(shè)計,讓畫面更加時尚別致。

網(wǎng)頁設(shè)計;UI設(shè)計

3.當同時出現(xiàn)五彩繽紛的多種色彩時,頁面就會變得很熱鬧,正如案例所示,無所謂冷色調(diào)還是暖色調(diào),又或是中性色,一旦將這些顏色結(jié)合在一起,網(wǎng)頁就會可愛起來,為用戶帶來好心情。

網(wǎng)頁設(shè)計;UI設(shè)計

4.這個案例選用了較冷的淺藍色漸變作為主色調(diào),中間的紅色波浪線順理成章的成為視覺重點。這是一個典型的冷暖色調(diào)的搭配使用手法,用大部分的冷色調(diào)來強調(diào)突出小部分的暖色調(diào)元素。

網(wǎng)頁設(shè)計;UI設(shè)計

5.這個網(wǎng)站分成了左右兩個部分。背景選用了Metro風格的設(shè)計,上面鋪了一層透明度很高的白色和黑色色塊。黑白都屬于中性色彩,黑色和紅色又是一種色彩學中的經(jīng)典配搭,因此,用戶的視角完全會被吸引到紅色的部分上。

網(wǎng)頁設(shè)計;UI設(shè)計

6.這個網(wǎng)站的風格比較夢幻迷離,主色系偏暗,設(shè)計師借助“鐵塔”本身的燈光,用濾鏡效果營造出了更加唯美的畫面感,很容易讓瀏覽者融入氣氛,幽靈按鈕與頁面整體的匹配度也很高。

網(wǎng)頁設(shè)計;UI設(shè)計

7.灰色系屬于偏冷的中性色,而案例中的灰色屬于暖灰。在大面積暖灰中,紅色顯得格外搶眼,起到了引導用戶視線的作用。

8. Metro風格有時會讓人覺得過于規(guī)整,因此,設(shè)計師用漸變暖色讓頁面變得更活潑生動。畫面中從上到下的色彩由淺到深,讓我們的視線轉(zhuǎn)移有了指向性。

9.這個案例融合了Metro和幾何元素的設(shè)計,冷暖色彩相間,形成了一個色彩豐富的場景,減緩了用戶產(chǎn)生視覺疲勞的速度,更利于吸引用戶點擊和查看。

10.Airnauts的網(wǎng)站首屏用一條最簡單的分割線將頁面切割成兩個幾何形狀,這兩個形狀的色彩之間完全沒有過渡,直接銜接在一起,但卻不覺得很生硬,反而有一種獨特的設(shè)計感在其中。

網(wǎng)頁中的冷暖色調(diào)只要使用得當,就能很自然的為瀏覽者營造出一種舒適的視覺享受,并且深深的融入網(wǎng)站的情境中!

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔