早在近幾年，元素重疊的設(shè)計(jì)越來越多，到現(xiàn)在已經(jīng)慢慢成為主流設(shè)計(jì)中的一種了。

        生活中常見的重疊設(shè)計(jì) 比如 抽屜 電梯 鋼筆殼等等都運(yùn)用了重疊的方式。

        其實(shí)網(wǎng)頁中出現(xiàn)這類設(shè)計(jì)也是非常多了，那么

        合理的運(yùn)用重疊設(shè)計(jì)方式，會讓你的設(shè)計(jì)變得更好哦~

        下面從網(wǎng)頁中的 圖片 字體 架構(gòu) 色彩 元素

        五個(gè)方面來講解重疊的設(shè)計(jì)運(yùn)用方式以及它的作用。

        - ：圖片與圖片(圖形)的重疊設(shè)計(jì)運(yùn)用。

        網(wǎng)頁設(shè)計(jì)中重疊運(yùn)用在圖片中是最常見的設(shè)計(jì)方式。

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

       01: 打破常規(guī)，展示更多細(xì)節(jié)

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

        02 :豐富圖片展示

        圖片將圖形結(jié)合起來，使得圖片不在單調(diào)，同時(shí)富有設(shè)計(jì)感，而且有助于品牌的傳達(dá)。下列圖片與背景色進(jìn)行重疊搭配，使圖片變的有富有空間和穩(wěn)重感。

        03:相互關(guān)聯(lián)性

       利用重疊的設(shè)計(jì)方式讓板塊于板塊之間相互關(guān)聯(lián)，且具有整體感。告別了原有圖片和文字之間的零散性。

        04: 增強(qiáng)空間感

        下面的海報(bào)中，原本很普通的地球，但設(shè)計(jì)師是采用背景圖和球進(jìn)行重疊搭配，使

        拉開了畫面的層次感，畫面在視覺上變得有空間感

        05:增加層次感

        下列海報(bào)設(shè)計(jì)中，奔馳車和背景圖片之間也是采用了重疊的搭配讓整個(gè)畫面的層次感加強(qiáng)，破出來的車頭 在視覺具有強(qiáng)烈的沖擊力。

        二：文字與圖片的重疊設(shè)計(jì)運(yùn)用。

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

        下列數(shù)字2014和運(yùn)動鞋子進(jìn)行重疊設(shè)計(jì)，視覺上帶來了一前一后的感覺

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

        02 : 帶來更真實(shí)的感受

        下列設(shè)計(jì)，使用文字和和產(chǎn)品進(jìn)行重疊設(shè)計(jì)，讓整個(gè)文案和產(chǎn)品結(jié)合的更加緊密，而且畫面也富有層次感，給用戶帶來更真實(shí)的感受。

        下列案例也是采用了相同的設(shè)計(jì)方式

        03:讓文字變具有引導(dǎo)性

        下列是一個(gè)相關(guān)流程設(shè)計(jì)設(shè)計(jì)師將文字和數(shù)字進(jìn)行重疊的設(shè)計(jì)方式來處理，

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

        04: 讓文字更具有設(shè)計(jì)感

        如何讓整個(gè)單調(diào)的字母，變得更有設(shè)計(jì)感，更真實(shí)呢?下面案例原本簡單的字母，加上了圖案后，使得整個(gè)設(shè)計(jì)更真實(shí)。更具有設(shè)計(jì)感。

        三：網(wǎng)站版式的重疊設(shè)計(jì)運(yùn)用。

        網(wǎng)站不同內(nèi)容版塊之間的重疊設(shè)計(jì)，不僅打破常規(guī)的設(shè)計(jì)，視覺上得到提升。同時(shí)也能更好的展示需求內(nèi)容信息。

        01 : 增強(qiáng)層次感。

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

        02 : 整體感增強(qiáng)，不被干擾。

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

        03 : 打破常規(guī)布局

        下面的網(wǎng)站是一家政界人士的宣傳網(wǎng)站，設(shè)計(jì)師采用了大量不同大小的色塊和背景進(jìn)行重疊搭配，每個(gè)板塊之間進(jìn)行巧妙的銜接，使得畫面整體感增強(qiáng)，同時(shí)更視覺上給用戶帶來舒適的體驗(yàn)。

        下列設(shè)計(jì)也是采用了相同的設(shè)計(jì)方式。使得整個(gè)畫面節(jié)省了空間，利用不同大小的色塊，有效的緩解了畫面的緊迫感，起到了過渡的作用。

        04 ：強(qiáng)化網(wǎng)站的品牌宣傳

        下面網(wǎng)站是一家牛排店的宣傳網(wǎng)站。設(shè)計(jì)師如何讓網(wǎng)站給用戶傳達(dá)出牛排優(yōu)雅的感覺?

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

        四：色彩之間的重疊設(shè)計(jì)運(yùn)用。

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

        01;強(qiáng)化視覺沖擊力

        利用鮮明的對比色彩進(jìn)行重疊搭配，使設(shè)計(jì)更具有視覺沖擊力和吸引力。下列海報(bào)設(shè)計(jì)，設(shè)計(jì)師將模特用亮紫色漸變到藍(lán)綠色和背景進(jìn)行的重疊搭配改造。極大的增強(qiáng)了視覺沖擊力，同時(shí)在視覺上給用戶帶來極大的沖擊感。

        02:讓畫面變得更立體

        下列創(chuàng)意類海報(bào)，設(shè)計(jì)師同樣運(yùn)用了色彩重疊的設(shè)計(jì)方式來處理，將橙色按照透明度以及飽和度不斷的重疊到藍(lán)色背景使得整個(gè)字變得更立體，畫面的設(shè)計(jì)感和層次給用戶帶來強(qiáng)烈的視覺沖擊力

        03：豐富畫面

        下列海報(bào)設(shè)計(jì)，設(shè)計(jì)師用粉和藍(lán)色進(jìn)行重疊的方式設(shè)計(jì)，讓整個(gè)背景告別單調(diào)，視覺感十足。

        五：不同元素之間的重疊設(shè)計(jì)運(yùn)用。

       利用點(diǎn)線面等修飾元素和主體設(shè)計(jì)進(jìn)行重疊搭配可以有效讓設(shè)計(jì)變得更加有氛圍。

       01：增強(qiáng)畫面的趣味

       下列設(shè)計(jì)利用圓方三角的元素，和圖片進(jìn)行重疊的處理，讓原本的圖片不再單調(diào)變得有趣。

        02:增強(qiáng)畫面的品牌氛圍

        下列是一家閱讀相關(guān)的網(wǎng)站設(shè)計(jì)頭圖，設(shè)計(jì)師

        用紙張?jiān)睾捅尘斑M(jìn)行重疊的方式搭配，讓整個(gè)設(shè)計(jì)變得更加有氛圍。

        下列網(wǎng)站頭圖也是運(yùn)用的重疊的設(shè)計(jì)方式

        03：讓局部多個(gè)元素具有關(guān)聯(lián)性