網(wǎng)站設(shè)計(jì)

Website development

網(wǎng)站設(shè)計(jì)用漸變色的好處

發(fā)布時(shí)間：2016-10-28 09:15:53

色彩帶給了我們不同的感受和情緒，漸變色則帶給了我們更多的想象空間。那么網(wǎng)站設(shè)計(jì)時(shí)如何更好的把握住漸變色呢。

漸變色是指某個(gè)物體的顏色從明到暗，或由深轉(zhuǎn)淺，或是從一個(gè)色彩緩慢過(guò)渡到另一個(gè)色彩，充滿變幻無(wú)窮的神秘浪漫氣息的顏色。

色彩帶給了我們不同的感受和情緒，漸變色則帶給了我們更多的想象空間。

合理的使用漸變色可以吸引用戶視覺(jué)焦點(diǎn)、渲染氛圍、提升美感、傳遞情緒等，而想運(yùn)用好漸變色，需要有更好的色感，在色彩搭配和透明度上多下功夫。

純粹的漸變色使得色彩更生動(dòng)緩和，不單調(diào)，可以豐富整體設(shè)計(jì)感，卻又不會(huì)增加視覺(jué)負(fù)擔(dān)，用戶可以瀏覽到更舒適的設(shè)計(jì)而不會(huì)覺(jué)得沉重。同時(shí)一些更精美的圖形，現(xiàn)實(shí)中的照片等，如果配合低透明度的漸變色，則可以更好的增強(qiáng)圖片本身的氛圍，或者解決某些圖片本身的視覺(jué)缺陷，甚至可以為圖片帶來(lái)耳目一新的感覺(jué)。

一、純漸變色作為背景的應(yīng)用：

01.藍(lán)綠漸變作為背景，商務(wù)、沉穩(wěn)、安全的藍(lán)色和新穎、生機(jī)的綠色相結(jié)合，耳目一新，輕快的漸變色再配合波動(dòng)的粒子效果，更加凸顯文案“重新定義應(yīng)用開(kāi)發(fā)”的概念。

02.相對(duì)低飽和度的紫色到橙黃色的漸變作為太空背景，不過(guò)分搶眼，區(qū)別于真實(shí)的太空情形，紫色的神秘和橙黃色憧憬更加增加了畫(huà)面的趣味性和想象力

03.大面積的白色，超簡(jiǎn)約優(yōu)雅的風(fēng)格，此刻清新素雅的藍(lán)綠漸變色塊充當(dāng)了一部分素材效果，同時(shí)可以很好的吸引瀏覽者，引導(dǎo)之視覺(jué)焦點(diǎn)到頁(yè)面中間的內(nèi)容，配合時(shí)尚的襯線字體以及整體的排版效果，簡(jiǎn)單的視覺(jué)，設(shè)計(jì)氛圍卻更接近完美。

04.輕緩的明度漸變背景，融合人物膚色，打破純扁平的單調(diào)感，沒(méi)有多余的其他元素，整體品質(zhì)感倍增。

05.同樣輕緩的同色系的漸變背景，使得原本多色彩的列表不再單調(diào)，且更舒適新穎。

06.紅色和橙黃色的暖色系漸變，讓背景更細(xì)膩，舒服，簡(jiǎn)約的內(nèi)容和精美的時(shí)鐘設(shè)計(jì)讓整個(gè)畫(huà)面舒適自然又不缺亮點(diǎn)。

二、低透明度的漸變色作為遮罩層的應(yīng)用：

07.背景傳遞的喜悅氛圍，而高飽和度的藍(lán)色透明漸變使用增強(qiáng)了這個(gè)氛圍，同時(shí)可以讓整個(gè)畫(huà)面的設(shè)計(jì)氣息更濃，而圖片本身的多元素內(nèi)容，被遮罩之后，部分元素弱化，使得頁(yè)面內(nèi)的信息展示更為清晰。

08.低飽和度的漸變色可以彌補(bǔ)圖片本身不具備的色彩氛圍，可以豐富設(shè)計(jì)感，同樣可以更好呈現(xiàn)左側(cè)文案，而右側(cè)無(wú)文字內(nèi)容，視覺(jué)自然落到漸變色背后的主圖上。

09.作用在人物上的漸變，讓人物和背景漸變更切合，整體時(shí)尚的氣息更濃，配合亮白的文字，干凈舒適，內(nèi)容突出！

10.不同的狀態(tài)需求和內(nèi)容時(shí)不同的透明度處理，既可以保留圖片所傳遞的更自然貼切的信息，又能規(guī)避圖片過(guò)于明顯的搶眼效果，青紫色的漸變?cè)鰪?qiáng)了畫(huà)面的時(shí)尚香艷的氛圍。

后：

不同的色彩有不同的情感傳遞，而什么時(shí)候選擇更適合的色彩漸變，需要考慮到當(dāng)前設(shè)計(jì)主題內(nèi)容是什么，而不同的嘗試和探索或許也會(huì)有更多意想不到的效果，列舉了一些不同情形下的漸變色使用，喜歡能用到頁(yè)面設(shè)計(jì)的合適的地方，增強(qiáng)頁(yè)面的整體感覺(jué)，獨(dú)樹(shù)一幟。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,6874,0.html

上一篇：網(wǎng)絡(luò)推廣效果差多半網(wǎng)站有問(wèn)題嗎

下一篇：響應(yīng)式網(wǎng)站為什么這么受大家歡迎