節約而不簡單，如何創造出令人驚艷的設計？

有的時候，一個出彩的網頁並不需要多麼豐富的元素，更多的是要讓有限的幾個本元素各司其職，構造好布局，營造層次。這次案例當中的網頁作品來自 Moodily 的首席設計師兼聯合創始人 Corey Haggard ，技巧並不複雜。

運用文字剪貼蒙版效果

剪貼蒙版效果，可以通過底層的元素來約束上層的元素形狀。近幾年流行在底層使用加粗的字母或者文字營造形式感十足的視覺效果。這個網頁中，圖片素材還疊加上了一層漸變色，加上黑底和文本，整個頁面簡單，但是層次並不少，比較高級的設計。

用傾斜的圖片切割效果

一樣是使用簡單的左右布局，圖片素材沒有使用常用的矩形，而是在傾斜的方向上進行了切割，這賦予了頁面以角度和方向感。圖片素材中的蜂鳥和圖片切割的方向也保持平行，這種呼應顯得比較巧妙。頁面布局簡單，但是因此而出彩。

剪貼蒙版和圖片信息的結合

通用是使用了文字剪切蒙版的效果，但是這個頁面的被剪切圖片和文本所傳達的信息，保持了一致，圖片中的風景所在地的名字和文本相互呼應。切換底部圖片的時候，右上角的內容也相應地改變。這種設計讓布局得到了簡化，但是信息卻倍增，相當值得學習。

打破平庸得傾斜拼接背景

圖片和文本得二元組合很多，上下左右得排版也不新鮮，丹徒和多圖都不會讓人覺得意外，但是雙色拼接式得背景，加上傾斜得拼接角度，打破了規整平庸得布局，營造出錯覺得視覺體驗，平添了一種層次感。

強化信息量的輔助性圖片

白色為主的背景下， 一 個標題，一個CTA 按鈕，一張創造焦點的圖標，本是很常見的設計，甚至會讓人覺得平庸。適當地引入與主題相符的輔助性圖片，錯落地排布著，能夠讓布局更活潑，內容信息量更豐富，也能讓頁面更加出彩。

一張細節布局俱佳的背景圖

一圖勝千言這句老話絕對有道理。如果你的網頁素材中有這麼一張細節足夠豐富，色彩足夠驚艷，同時也足夠貼合主題的高品質圖片的話，其他的裝飾、技巧大都是多餘的。配上標題，加上按鈕，稍微注意一下布局，直接出貨是肯定沒問題的。

兼顧功能和視覺的側邊欄

側邊欄不是新鮮的UI組件，但是絕大多數的側邊欄作為導航組件，設計的都太簡單。在一個布局簡單的網頁當中，可以採用一個兼顧導航功能（導航選項被太多）和視覺（輔助提升頁面視覺）的側邊欄，會讓頁面顯得視覺討喜，還不會讓人覺得功能單調。

圖片色彩疊加和色彩對比

在圖片色彩上疊加黑色或者深灰，讓前景的文本可讀性更強，也是當下流行的設計策略，不過這樣設計有時候會顯得略有一點單調，於是設計師巧妙地使用了紅、黑、白三色對比，背景圖片的主體鮮明，而信息量十足，使得整個布局簡單，但是非常耐看。

圍繞直覺焦點圖來強化設計

使用一個被摳出來得人物形象做焦點還是不夠？那麼可以加入被切割出來得背景圖，疊加上色彩，用來輔助說明環境，主要得標題和說明性得文本，使用對比明顯得白色呈現，選擇合適得布局，放置進入網頁；輔助性得文本使用對比度弱得灰色置於背景，強化信息量。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！