我們每天都在跟網(wǎng)頁(yè)設(shè)計(jì)打交道，時(shí)間長(zhǎng)了難免厭倦疲勞，這時(shí)需要一點(diǎn)新技巧激活一下創(chuàng)意細(xì)胞。東莞光龍網(wǎng)站建設(shè)設(shè)計(jì)團(tuán)隊(duì)總結(jié)了9個(gè)瞬間讓網(wǎng)頁(yè)界面變驚艷的高級(jí)技巧。
01
-
文字蒙版
剪貼蒙版效果，通過(guò)底層元素來(lái)約束上層的元素形狀。通常底層采用加粗的字母或文字來(lái)營(yíng)造形式感十足的視覺(jué)效果。在今天的這個(gè)網(wǎng)頁(yè)設(shè)計(jì)案例中，圖片素材還跌價(jià)了一層漸變色，加上黑底和文本，整個(gè)頁(yè)面簡(jiǎn)潔，但層次并不少，比較高級(jí)。
02
-
切斜切割圖片
常規(guī)的左右布局，但對(duì)素片素材進(jìn)行非常規(guī)矩形處理。在切斜的方向上進(jìn)行了切割，賦予頁(yè)面以角度和方向感。圖片素材中的蜂鳥(niǎo)和圖片切割的方向也保持平衡，這種呼應(yīng)顯得相當(dāng)巧妙。頁(yè)面布局簡(jiǎn)單，卻視覺(jué)出彩。
03
-
剪貼蒙版與圖片信息結(jié)合排版
文字剪貼蒙版效果可以有多種表達(dá)方式。這個(gè)作品中，被剪切圖片和文本信息保持風(fēng)格一致，圖片中的風(fēng)景所在地的名字和文本相互呼應(yīng)。切換底部圖片的時(shí)候，右上角的內(nèi)容也相應(yīng)地改變。這種設(shè)計(jì)讓布局得到了簡(jiǎn)化，但是信息量卻倍增，相當(dāng)只記得借鑒。
04
-
打破平庸的傾斜拼接背景
圖片文本二元組合形式很多，要打破排版新鮮感，單獨(dú)或多圖對(duì)齊布局很難創(chuàng)造視覺(jué)意外，但雙色拼接式的背景，加上傾斜的拼接角度，打破了規(guī)整平庸的布局，營(yíng)造出錯(cuò)落的視覺(jué)體驗(yàn)，增添了一種層次感。
05
-
強(qiáng)化信息量的輔助性圖片
白色為主的背景下，一個(gè)標(biāo)題，一個(gè)CTA按鈕（行為召喚按鈕如何設(shè)計(jì)），一張創(chuàng)造焦點(diǎn)的圖標(biāo)，本是很常見(jiàn)的界面設(shè)計(jì)，難免覺(jué)得平庸。適當(dāng)引入與主題相符的輔助性圖片，錯(cuò)落地排布著，能夠讓布局更活潑，內(nèi)容信心量更豐富，也能讓頁(yè)面更加出彩。
06
-
細(xì)節(jié)布局極佳的背景圖
一圖勝千言。如果你的界面中有那么一張細(xì)節(jié)足夠豐富，色彩足夠經(jīng)驗(yàn)，同時(shí)也夠貼合主題的高品質(zhì)頭圖的話，刻意增加的裝飾、技巧反而是多余的。配上標(biāo)題，按鈕，稍微注意一下對(duì)齊和布局，直接出貨肯定是沒(méi)問(wèn)題的。
07
-
兼顧功能和視覺(jué)的側(cè)邊欄
側(cè)邊欄的設(shè)計(jì)并非新銳新鮮的ui組件，但絕大多數(shù)側(cè)邊欄設(shè)計(jì)都是作為導(dǎo)航組件，設(shè)計(jì)單一。如側(cè)邊欄能兼顧導(dǎo)航功能和視覺(jué)均能兼顧的設(shè)計(jì)，會(huì)讓頁(yè)面顯得視覺(jué)討喜，不單調(diào)。
東莞網(wǎng)站設(shè)計(jì)側(cè)邊欄案例
08
-
圖片色彩疊加和色彩對(duì)比
在圖片色彩上疊加黑色或深灰，讓前景的文本可讀性增強(qiáng)，也是當(dāng)下流行的設(shè)計(jì)策略，不過(guò)這種設(shè)計(jì)策略有時(shí)候有點(diǎn)單調(diào)。設(shè)計(jì)師可巧妙的使用紅、黑、白三色對(duì)比，背景圖片的主題鮮明，信息量十足，使得整個(gè)布局簡(jiǎn)單又耐看。
09
-
圍繞視覺(jué)焦點(diǎn)圖來(lái)做強(qiáng)化設(shè)計(jì)
使用一個(gè)唄摳出來(lái)的人物形象焦點(diǎn)還不夠？可加入被切割出來(lái)的背景圖，疊加上色彩來(lái)輔助說(shuō)明環(huán)境，主要的標(biāo)題，說(shuō)明性文字文本，使用對(duì)比度明顯的白色呈現(xiàn)，選擇合適的布局，放置進(jìn)入網(wǎng)頁(yè)。輔助性的文本使用對(duì)比度弱的灰色至于背景，強(qiáng)化信息量。
