重疊設計法讓版式更流行

寫在前面

早在近幾年，元素重疊的設計越來越多，到現在已經慢慢成為主流設計中的一種了。

生活中常見的重疊設計 比如 抽屜 電梯 鋼筆殼等等都運用了重疊的方式。

其實網頁中出現這類設計也是非常多了，那麼

合理的運用重疊設計方式，會讓你的設計變得更好哦~

下面從網頁中的 圖片 字體 架構 色彩 元素

五個方面來講解重疊的設計運用方式以及它的作用。

－ ：圖片與圖片（圖形）的重疊設計運用

網頁設計中重疊運用在圖片中是最常見的設計方式。

既能豐富圖片的內容，又能在版式上做到靈活。

01: 打破常規，展示更多細節

多方面展示圖片的細節，通過3張圖片將人物服飾細節分別展示出來。告別死板的設計，板式更加靈活多變。

案例

02 :豐富圖片展示

圖片將圖形結合起來，使得圖片不在單調，同時富有設計感，而且有助於品牌的傳達。下列圖片與背景色進行重疊搭配，使圖片變的有富有空間和穩重感。

案例

03:相互關聯性

利用重疊的設計方式讓板塊於板塊之間相互關聯，且具有整體感。告別了原有圖片和文字之間的零散性。

案例

04: 增強空間感

下面的海報中，原本很普通的地球，但設計師是採用背景圖和球進行重疊搭配，使拉開了畫面的層次感，畫面在視覺上變得有空間感，

案例

05:增加層次感

下列海報設計中，賓士車和背景圖片之間也是採用了重疊的搭配讓整個畫面的層次感加強，破出來的車頭 在視覺具有強烈的衝擊力。

案例

二：文字與圖片的重疊設計運用

01:文字和圖片讓畫面更靈活

下列數字2014和運動鞋子進行重疊設計，視覺上帶來了一前一後的感覺

使得整個畫面變得具有活力，給用戶傳達出了一種輕快的感覺。

案例

02 : 帶來更真實的感受

下列設計，使用文字和和產品進行重疊設計，讓整個文案和產品結合的更加緊密，而且畫面也富有層次感，給用戶帶來更真實的感受。

案例

下列案例也是採用了相同的設計方式。

03:讓文字變具有引導性

下列是一個相關流程設計設計師將文字和數字進行重疊的設計方式來處理，

使得用戶能夠清晰的了解當前在第幾步驟，同時讓整段文字變得豐富起來。節省了大量不必要的空間。

案例

04: 讓文字更具有設計感

如何讓整個單調的字母，變得更有設計感，更真實呢？下面案例原本簡單的字母，加上了圖案後，使得整個設計更真實。更具有設計感。

案例

三：網站版式的重疊設計運用

網站不同內容版塊之間的重疊設計，不僅打破常規的設計，視覺上得到提升。同時也能更好的展示需求內容信息。

01 : 增強層次感

下面的網站是小李子電影宣傳網站。設計師大膽的利用色塊和主視覺人像進行重疊，不僅讓文案信息在版面中節省了空間清晰的展示。而且還給整個網站視覺增加了層次感。真正做到了給用戶有遠有近的感覺。

案例

02 : 整體感增強，不被干擾。

下面網站是一家食品網站，設計師打破常規的布局，利用重疊的方式，將圖片文案和背景元素進行結合，讓整個網頁每一個版塊之間既保持了一定的節奏感間隙，又避免了彼此不同的板塊之間元素過多而造成的干擾。

03 : 打破常規布局

下面的網站是一家政界人士的宣傳網站，設計師採用了大量不同大小的色塊和背景進行重疊搭配，每個板塊之間進行巧妙的銜接，使得畫面整體感增強，同時更視覺上給用戶帶來舒適的體驗。

案例

下列設計也是採用了相同的設計方式。使得整個畫面節省了空間，利用不同大小的色塊，有效的緩解了畫面的緊迫感，起到了過渡的作用。

04 ：強化網站的品牌宣傳

下面網站是一家牛排店的宣傳網站。設計師如何讓網站給用戶傳達出牛排優雅的感覺？

相同的方式，設計師同樣選取了大的背景圖，讓板塊和圖片之間進行重疊搭配，使視覺上做到了極大的突破同時又能有效的給用戶傳達出畫面強烈的氛圍。

案例

四：色彩之間的重疊設計運用

使用不同的色彩進行重疊搭配在視覺上往往會給用戶帶來不一樣的視覺體驗哦

01；強化視覺衝擊力

利用鮮明的對比色彩進行重疊搭配，使設計更具有視覺衝擊力和吸引力。下列海報設計，設計師將模特用亮紫色漸變到藍綠色和背景進行的重疊搭配改造。極大的增強了視覺衝擊力，同時在視覺上給用戶帶來極大的衝擊感。

案例

02:讓畫面變得更立體

下列創意類海報，設計師同樣運用了色彩重疊的設計方式來處理，將橙色按照透明度以及飽和度不斷的重疊到藍色背景使得整個字變得更立體，畫面的設計感和層次給用戶帶來強烈的視覺衝擊力

案例

03：豐富畫面

下列海報設計，設計師用粉和藍色進行重疊的方式設計，讓整個背景告別單調，視覺感十足。

案例

五：不同元素之間的重疊設計運用

利用點線面等修飾元素和主體設計進行重疊搭配可以有效讓設計變得更加有氛圍。

01：增強畫面的趣味

下列設計利用圓方三角的元素，和圖片進行重疊的處理，讓原本的圖片不再單調變得有趣。

案例

02:增強畫面的品牌氛圍

下列是一家閱讀相關的網站設計頭圖，設計師

用紙張元素和背景進行重疊的方式搭配，讓整個設計變得更加有氛圍。

案例

03：讓局部多個元素具有關聯性

下列標語，設計師將文字和線條進行重疊搭配使得讓整個文字和按鈕之間具有相關聯性不零散。

案例

從以上幾個案例分析得出

採用重疊的設計方式對設計的好處總結為幾點。

01 : 節省空間，能讓圖片展示更多的細節。

02 : 打破固有的版式設計。

03 : 利用色彩可以讓設計變得更有衝擊力。

04 : 增加層次感 空間感。

05 : 讓畫面變得有氛圍有活力。

06 : 修飾單調的設計，使得它變得更豐富。

07 : 可以讓不同元素，或版塊之間能相護關聯

08 : 讓版塊之間具有整體感。

09 : 具有一定引導的作用。

等等。

最後說下重疊的設計方式，它也是常用道破常規設計的方法之一。

只要合理的運用就能給您的設計加分

以上是根據工作總結而來的方法，很多不足還很多多包涵，如果對您有用，您的贊是對我最大的鼓勵。

作者：俊敏

原文：http://www.zcool.com.cn/article/ZNDU4OTI4.html

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