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