400-844-5354
有的時(shí)候，一個(gè)出彩的網(wǎng)頁并不需要多么豐富的元素，更多的是要讓有限的幾個(gè)本元素各司其職，構(gòu)造好布局，營造層次。這次案例當(dāng)中的網(wǎng)頁作品來自 Moodily 的首席設(shè)計(jì)師兼聯(lián)合創(chuàng)始人 Corey Haggard ，技巧并不復(fù)雜，學(xué)起來吧~
運(yùn)用文字剪貼蒙版效果
剪貼蒙版效果，可以通過底層的元素來約束上層的元素形狀。近年來流行在底層使用加速的字母或者文字營造形式感十足的視覺效果。這個(gè)網(wǎng)頁中，圖片素材還疊加上了一層漸變色，加上黑色和文本，整個(gè)頁面簡單，但是層次并不少，比較高級(jí)。
巧用傾斜的圖片切割效果
一樣是使用簡單的左右布局，圖片素材沒有使用規(guī)矩的矩形，而是在傾斜的方向上進(jìn)行了切割，這賦予了頁面以角度和方向感。圖片素材中的蜂鳥和圖片切割的方向也保持平行，這種呼應(yīng)顯得比較巧妙。頁面布局簡單，但是因此而出彩。
剪貼蒙版和圖片信息的結(jié)合
同樣是使用了文字剪貼蒙版的效果，但是這個(gè)頁面讓被剪切圖片和文本所傳達(dá)的信息，保持了一致，圖片中風(fēng)景所在地的名字和文本相互呼應(yīng)。切換底部圖片的時(shí)候，右上角的內(nèi)容也相應(yīng)的改變。這種設(shè)計(jì)讓布局得到簡化，但是信息量確倍增，相當(dāng)值得學(xué)習(xí)。
打破平庸的傾斜拼接背景
圖片和文本的二元組合很多，上下左右的排版并不新鮮，單圖和多圖都不會(huì)讓人覺得意外，但是雙色拼接式的背景，加上傾斜的拼接角度，打破了規(guī)整平庸的布局，營造出錯(cuò)落的視覺體驗(yàn)，平添了一種層次感。
強(qiáng)化信息量的輔助性圖片
、
白色為主的背景下，一個(gè)標(biāo)題，一個(gè)CTA按鈕，一張創(chuàng)造焦點(diǎn)的圖標(biāo)，本是很常見的設(shè)計(jì)，甚至?xí)屓擞X得平庸。適當(dāng)?shù)囊肱c主題相符的輔助性圖片，錯(cuò)落的排布著，能夠讓布局更活潑，內(nèi)容信息量更豐富，也能讓頁面更出彩。
一張細(xì)節(jié)布局俱佳的背景圖
一圖勝千言這句話說的絕對(duì)有道理。如果你的網(wǎng)頁素材中有這么一張細(xì)節(jié)足夠豐富， 色彩足夠驚艷，同時(shí)也足夠貼合主題的高品質(zhì)圖片的話，其他的裝飾、技巧大都是多余的。配上標(biāo)題，加上按鈕，稍微注意下布局，直接出貨是肯定沒有問題的。
兼顧功能和視覺的側(cè)邊欄
側(cè)邊欄不是新鮮的UI組件，但是絕大多數(shù)的側(cè)邊欄作為導(dǎo)航組件，設(shè)計(jì)的都太簡單。在一個(gè)布局簡單的網(wǎng)頁當(dāng)中，可以采用一個(gè)兼顧導(dǎo)航功能（導(dǎo)航選項(xiàng)太多）和視覺（輔助提升頁面視覺）的側(cè)邊欄，會(huì)讓頁面顯得視覺討喜，還不會(huì)讓人覺得功能單調(diào)。
圖片色彩疊加和色彩對(duì)比
在圖片色彩上疊加黑色或者深灰，讓前景的文本可讀性更強(qiáng)，也是當(dāng)下流行的設(shè)計(jì)策略，不過這樣設(shè)計(jì)有時(shí)候會(huì)顯得略有一點(diǎn)單調(diào)，于是設(shè)計(jì)師巧妙的使用了紅、黑、白三色對(duì)比，背景圖片的主題鮮明而且信息量十足，是的整個(gè)布局簡單，但是非常耐看。
圍繞視覺焦點(diǎn)圖來強(qiáng)化設(shè)計(jì)
使用一個(gè)被摳出來的人物形象做焦點(diǎn)還不夠？那么可以加入被切割出來的背景圖，疊加上色彩，用來輔助說明環(huán)境，主要的標(biāo)題和說明性的文本，使用對(duì)比度明顯的白色呈現(xiàn)，選擇合適的布局，放置進(jìn)入網(wǎng)頁；輔助性的文本使用對(duì)比度弱的灰色置于背景，強(qiáng)化信息量。
2023-05-14
2025-07-21
2023-06-06
2025-05-01
2025-07-08
2023-12-17
2024-05-29
2024-06-21
2023-09-15
2022-05-27
返回列表
返回頂部