平面設(shè)計(jì)如何營(yíng)造縱深與層次

　　有時(shí)候平面設(shè)計(jì)太“平”不能達(dá)到最終的效果，需要一些縱深與層次來(lái)提升畫(huà)面感，從而引發(fā)一些視覺(jué)的不一樣。那么除了直接選用帶有縱深感和層次感的照片之外，我們還有哪些方法可以提高版面的縱深與層次感呢?

　　照片與文字等元素通常都是在二維的世界中編排的，在需要凸顯和強(qiáng)調(diào)信息的時(shí)候，我們也可以嘗試將元素以立體的形式展現(xiàn)，使版面產(chǎn)生縱深的變化。同時(shí)也增強(qiáng)了畫(huà)面的視覺(jué)沖擊力。

　　凸顯需要強(qiáng)調(diào)的信息

　　打破二維觀感,產(chǎn)生平面與立體的對(duì)比

　　有效增強(qiáng)畫(huà)面的視覺(jué)沖擊力

　　這種將元素均等排列的形式比較適合表現(xiàn)安靜與穩(wěn)定的印象，也經(jīng)常用于不同商品的陳列等場(chǎng)景。如果作為視覺(jué)畫(huà)面來(lái)說(shuō)，我們應(yīng)該怎樣為其添加空間上的層次與縱深感呢?

　　根據(jù)近大遠(yuǎn)小的原則，可以通過(guò)將元素縮小來(lái)產(chǎn)生位置的變化，元素縮放的越小，就意味著在視覺(jué)上距離我們?cè)竭h(yuǎn)。大小的區(qū)分，也為畫(huà)面添加了視覺(jué)焦點(diǎn)，相對(duì)于均等擺放來(lái)說(shuō)，更具有視覺(jué)表現(xiàn)力。

　　針對(duì)不同的設(shè)計(jì)目的，信息會(huì)以不同的編排形式呈現(xiàn)。上圖的雜志封面均等的平鋪于版面中，這更有助于人們觀看和篩選信息內(nèi)容。也因?yàn)樵氐拇笮∠嗤沟冒婷嬷袥](méi)有明確的焦點(diǎn)元素。

　　除修改元素大小之外，將元素之間相互疊壓也是能夠表現(xiàn)出層次與立體感的有效方式。采用這種手法時(shí)，需要確認(rèn)好信息是否可以被遮擋。而在可以實(shí)現(xiàn)動(dòng)態(tài)效果的數(shù)碼載體中，這種處理可以提升交互的趣味與視覺(jué)的美觀度。

　　我們也可以嘗試不同的疊壓形式，如上圖中修改層疊元素的透視位置，或者改為扇形排列。降低遠(yuǎn)處元素的透明度來(lái)實(shí)現(xiàn)虛實(shí)的變化。方法是多種多樣的，也希望大家能夠嘗試更多其他方式。

　　上圖是銀行卡片以平面的編排形式平鋪在版面中的例子。假設(shè)這是一個(gè)版面中的主體元素，我們需要通過(guò)組合來(lái)刻畫(huà)它的視覺(jué)形象。除以上提到的方法之外，我們還可以運(yùn)用透視原理來(lái)實(shí)現(xiàn)元素的立體效果。

　　通過(guò)對(duì)變形工具的運(yùn)用，我們可以在二維的平面中模擬出空間的透視延伸效果。與此同時(shí)，疊壓的處理也進(jìn)一步加強(qiáng)了畫(huà)面的層次感。和上圖平面的編排相比視覺(jué)效果也會(huì)更好。

　　在現(xiàn)實(shí)生活中，我們望向公路的遠(yuǎn)方時(shí)，會(huì)看到道路向遠(yuǎn)方逐漸縮小，最后直到成為一個(gè)點(diǎn)而消失在視野之外，這就是透視的最基本原理。上圖中，首先假定好視平線并確定好卡片的位置，畫(huà)面中所有透視元素的傾斜角度都應(yīng)該聚集到消失點(diǎn)上。

　　(為避免喧賓奪主，這里僅簡(jiǎn)單介紹透視在設(shè)計(jì)中的應(yīng)用，之后我們會(huì)專門推送關(guān)于透視的文章)

　　當(dāng)人眼看物體時(shí)，只有觀看的聚焦位置會(huì)是清晰的，而前景與背景的物體會(huì)相應(yīng)虛化。照相機(jī)通過(guò)更換大光圈的鏡頭，也可以達(dá)到同樣的景深效果。從消逝透視的原理來(lái)說(shuō)，因?yàn)榭諝獾穆瓷湟约熬嚯x等諸多因素的影響，物體越遠(yuǎn)細(xì)節(jié)就越少。

　　我們可以利用上面提到的原理并應(yīng)用到設(shè)計(jì)當(dāng)中。上圖中，除修改了元素的大小之外，還為畫(huà)面添加了景深效果。根據(jù)元素的距離不同，模糊的程度也會(huì)不一樣。總體來(lái)說(shuō)，物體越遠(yuǎn)，虛化程度會(huì)越大。

　　為版面中文字添加陰影效果，可以使原本處于二維環(huán)境中的文字凸顯出來(lái)。仿佛懸浮在紙上一般，適合應(yīng)用于需要強(qiáng)調(diào)和吸引人注意的文字。

　　陰影的添加可以描述一個(gè)物體在空間中的位置關(guān)系。當(dāng)陰影出現(xiàn)在物體底部時(shí)，會(huì)給人平放在地面的印象;當(dāng)陰影與物體拉開(kāi)距離后，仿佛漂浮在半空的視覺(jué)就呈現(xiàn)出來(lái)了;當(dāng)陰影出現(xiàn)在物體的背面時(shí)，能讓人產(chǎn)生貼靠在墻上的感覺(jué)。

　　光影的變化，可以為文字帶來(lái)更加立體的效果，上圖的正方體是假設(shè)光源的位置在左前方所呈現(xiàn)出的明暗灰關(guān)系。

　　將文字以筆畫(huà)中心畫(huà)線并連接，就能產(chǎn)生筆畫(huà)中心凸出的印象，搭配正方體的明暗灰關(guān)系后，立體效果得到了進(jìn)一步的增強(qiáng)。

　　上圖文字效果是將輪廓復(fù)制一層并疊壓在下方，連接兩個(gè)字之間的線條，來(lái)達(dá)到一種假立體字效果。

　　( 這里的假立體是指沒(méi)有透視關(guān)系的立體效果 )

　　倒影與陰影一樣，可以描述物體與地面的關(guān)系。同時(shí)，倒影的加入也會(huì)為畫(huà)面增加品質(zhì)感。這里需要注意的是為某些與地面呈角度的物體添加倒影時(shí)，沒(méi)有辦法采用直接將物體鏡像的方式，遇到這種情況應(yīng)該重新繪制物體底部的倒影。

　　明度高的色彩具有前進(jìn)感，明度低的色彩具有后退感。上圖中左側(cè)畫(huà)面內(nèi)部會(huì)給人收縮的感覺(jué)，右側(cè)則會(huì)給人內(nèi)部向外膨脹的印象。

　　同樣的道理，上圖中，線條的粗細(xì)是一樣的。黑色的線條在白底色下會(huì)給人的感覺(jué)更加纖細(xì)，而黑底色下的白色線條則給人更粗的印象。

　　與物體的距離越近，固有色就會(huì)越鮮明，隨著距離的變遠(yuǎn)，空氣中的漫反射也會(huì)隨之增加，物體的純度也會(huì)變低。天空中大氣的密度是越靠近地面越稠密，所以越靠近地面，天空的色彩越會(huì)變得暗淡。離地面越高，色彩純度也會(huì)越高。

　　在色彩中，冷色通常會(huì)給人后退感，而暖色會(huì)給人前進(jìn)感的視錯(cuò)覺(jué)印象。暖色包括：紅、橙、黃;冷色包括：綠、藍(lán)、紫。利用冷暖的這一特性，可以有效增強(qiáng)畫(huà)面的縱深感與層次感。

　　根據(jù)內(nèi)容信息，決定以英文「Happy」作為版面的主體。為了烘托與題目相關(guān)的歡快氛圍，選用扁平風(fēng)格的立體字來(lái)為畫(huà)面加入縱深感。上圖中以字母「a」的刻畫(huà)過(guò)程為例，首先將字母疊壓處理并確定好位置關(guān)系，使用線條連接兩個(gè)文字的輪廓并填色。這里因?yàn)樘囟L(fēng)格的需要，并沒(méi)有加入透視的特性。試圖通過(guò)這種假立體來(lái)表現(xiàn)出一種有趣味性的畫(huà)面效果。

　　確定好大致風(fēng)格后我們將文字信息打散，并嘗試添加不同的延伸方向來(lái)為版面添加變化。在確保單詞閱讀順序的情況下反復(fù)調(diào)整元素的位置與關(guān)系，多去嘗試不同的組合形式。

　　上圖是最終確定好的元素位置關(guān)系，字母以不同的方向排列，其中有向上與向下的延伸方向，也有傾斜的延伸。大部分放置在版心中，也有少量采用出血處理，這其中也有聚集與孤立的對(duì)比。這些變化可以為版面帶來(lái)豐富的視覺(jué)印象。最后在延伸部分添加點(diǎn)狀肌理，主體的刻畫(huà)就完成了。

　　添加主標(biāo)題文字并在風(fēng)格上與主體統(tǒng)一處理，這也起到了關(guān)聯(lián)主體與標(biāo)題的作用。接下來(lái)將其余的文字信息按照劃分好的層級(jí)關(guān)系依次添加到版面中的空白位置，這個(gè)版面就基本完成了。上圖是元素在網(wǎng)格規(guī)范下的位置與比例關(guān)系。

　　這是加入縱深變化的版面與二維版面的對(duì)比，我們可以看出帶有立體層次的版面會(huì)給人更加熱鬧的印象，視覺(jué)沖擊力也相對(duì)較強(qiáng)。采用二維風(fēng)格的版面會(huì)稍顯安靜一些，但并不是說(shuō)帶有縱深的畫(huà)面就一定是正確的。我們需要根據(jù)項(xiàng)目的風(fēng)格定位來(lái)選擇適合的處理形式。

　　提取文案信息中的關(guān)鍵詞“stadium”作為版面的主體，并為其添加空間上的透視效果。根據(jù)上文提到的，物體距離觀察者越近就會(huì)越大，反之距離越遠(yuǎn)就會(huì)越小，最終會(huì)消失在一個(gè)點(diǎn)上。

　　接下來(lái)為主體文字添加漸變效果，根據(jù)近處的物體顏色鮮艷并且明度高，遠(yuǎn)處物體的顏色灰暗且明度暗淡的理論來(lái)調(diào)整畫(huà)面。

　　在文字底部添加微弱的投射光線來(lái)烘托背景的層次，為了讓主體文字不會(huì)顯得過(guò)于單薄，通過(guò)文字疊壓并連接線條輪廓的方式來(lái)添加厚度(這里因?yàn)橛覀?cè)的透視傾角過(guò)大，所以粗略的處理成水平的假想線)

　　為了烘托版面的視覺(jué)效果，加入與主題相關(guān)的運(yùn)動(dòng)的人物素材。人物的比例也同樣需要在透視的環(huán)境下調(diào)整，因?yàn)槿宋锏妮喞獮椴灰?guī)則形狀，我們將其簡(jiǎn)單替換成方塊的輪廓，這樣更方便我們計(jì)算比例。

　　(中間的人物是騰空狀態(tài)的，為了方便測(cè)算它在空間中的高度，將其垂直向下移動(dòng)并確定大小)

　　確定好人物在空間中的比例關(guān)系后，我們分析畫(huà)面中人物的光源方向處于畫(huà)面的右上方位置，依據(jù)光源的位置在相反方向?yàn)樵靥砑雨幱啊Ｖ黧w元素刻畫(huà)到這里就差不多完成了。

　　最后我們將文字信息按照層級(jí)關(guān)系添加到版面中，文字的數(shù)據(jù)部分我們可以將其圖形化處理，文字的添加要注意版面整體的視覺(jué)平衡，因?yàn)橛蚁聜?cè)偏重，所以將大標(biāo)題安放在左上角來(lái)平衡版面。添加logo等點(diǎn)綴元素后，這個(gè)版面也就完成了。

　　接下來(lái)我們編排一版傾向于平面風(fēng)格的版面作為對(duì)比。從案例對(duì)比中我們可以看出，帶有縱深感的畫(huà)面會(huì)給人更強(qiáng)的視覺(jué)沖擊力，更加偏向現(xiàn)實(shí)中常見(jiàn)的視覺(jué)空間。而偏向平面化的版面則有更加抽象的印象。拋去主觀性的美感，單從傳達(dá)的功能性來(lái)說(shuō)，兩者并沒(méi)有孰優(yōu)孰劣。需要根據(jù)項(xiàng)目實(shí)際情況來(lái)確定具體的畫(huà)面風(fēng)格。

　　通過(guò)以上的講解，我們知道了烘托層次與縱深感的作用與優(yōu)勢(shì)，同時(shí)也從三個(gè)方面了解了具體的刻畫(huà)方式與技巧，它們分別是“位置大小”和“添加光影”以及“色彩的進(jìn)退”。相信大家也已經(jīng)掌握了烘托層次與縱深感的相關(guān)技巧了，希望大家能夠在今后的工作中靈活應(yīng)用我們文章中所講的知識(shí)點(diǎn)，本期的內(nèi)容就到這里，我們下期再見(jiàn)。

　　上圖文字效果是將輪廓復(fù)制一層并疊壓在下方，連接兩個(gè)字之間的線條，來(lái)達(dá)到一種假立體字效果。

　　( 這里的假立體是指沒(méi)有透視關(guān)系的立體效果 )

　　倒影與陰影一樣，可以描述物體與地面的關(guān)系。同時(shí)，倒影的加入也會(huì)為畫(huà)面增加品質(zhì)感。這里需要注意的是為某些與地面呈角度的物體添加倒影時(shí)，沒(méi)有辦法采用直接將物體鏡像的方式，遇到這種情況應(yīng)該重新繪制物體底部的倒影。

　　明度高的色彩具有前進(jìn)感，明度低的色彩具有后退感。上圖中左側(cè)畫(huà)面內(nèi)部會(huì)給人收縮的感覺(jué)，右側(cè)則會(huì)給人內(nèi)部向外膨脹的印象。

　　同樣的道理，上圖中，線條的粗細(xì)是一樣的。黑色的線條在白底色下會(huì)給人的感覺(jué)更加纖細(xì)，而黑底色下的白色線條則給人更粗的印象。

　　與物體的距離越近，固有色就會(huì)越鮮明，隨著距離的變遠(yuǎn)，空氣中的漫反射也會(huì)隨之增加，物體的純度也會(huì)變低。天空中大氣的密度是越靠近地面越稠密，所以越靠近地面，天空的色彩越會(huì)變得暗淡。離地面越高，色彩純度也會(huì)越高。

　　在色彩中，冷色通常會(huì)給人后退感，而暖色會(huì)給人前進(jìn)感的視錯(cuò)覺(jué)印象。暖色包括：紅、橙、黃;冷色包括：綠、藍(lán)、紫。利用冷暖的這一特性，可以有效增強(qiáng)畫(huà)面的縱深感與層次感。

　　根據(jù)內(nèi)容信息，決定以英文「Happy」作為版面的主體。為了烘托與題目相關(guān)的歡快氛圍，選用扁平風(fēng)格的立體字來(lái)為畫(huà)面加入縱深感。上圖中以字母「a」的刻畫(huà)過(guò)程為例，首先將字母疊壓處理并確定好位置關(guān)系，使用線條連接兩個(gè)文字的輪廓并填色。這里因?yàn)樘囟L(fēng)格的需要，并沒(méi)有加入透視的特性。試圖通過(guò)這種假立體來(lái)表現(xiàn)出一種有趣味性的畫(huà)面效果。

　　確定好大致風(fēng)格后我們將文字信息打散，并嘗試添加不同的延伸方向來(lái)為版面添加變化。在確保單詞閱讀順序的情況下反復(fù)調(diào)整元素的位置與關(guān)系，多去嘗試不同的組合形式。

　　確定好人物在空間中的比例關(guān)系后，我們分析畫(huà)面中人物的光源方向處于畫(huà)面的右上方位置，依據(jù)光源的位置在相反方向?yàn)樵靥砑雨幱啊Ｖ黧w元素刻畫(huà)到這里就差不多完成了。

　　最后我們將文字信息按照層級(jí)關(guān)系添加到版面中，文字的數(shù)據(jù)部分我們可以將其圖形化處理，文字的添加要注意版面整體的視覺(jué)平衡，因?yàn)橛蚁聜?cè)偏重，所以將大標(biāo)題安放在左上角來(lái)平衡版面。添加logo等點(diǎn)綴元素后，這個(gè)版面也就完成了。

　　接下來(lái)我們編排一版傾向于平面風(fēng)格的版面作為對(duì)比。從案例對(duì)比中我們可以看出，帶有縱深感的畫(huà)面會(huì)給人更強(qiáng)的視覺(jué)沖擊力，更加偏向現(xiàn)實(shí)中常見(jiàn)的視覺(jué)空間。而偏向平面化的版面則有更加抽象的印象。拋去主觀性的美感，單從傳達(dá)的功能性來(lái)說(shuō)，兩者并沒(méi)有孰優(yōu)孰劣。需要根據(jù)項(xiàng)目實(shí)際情況來(lái)確定具體的畫(huà)面風(fēng)格。

　　通過(guò)以上的講解，我們知道了烘托層次與縱深感的作用與優(yōu)勢(shì)，同時(shí)也從三個(gè)方面了解了具體的刻畫(huà)方式與技巧，它們分別是“位置大小”和“添加光影”以及“色彩的進(jìn)退”。相信大家也已經(jīng)掌握了烘托層次與縱深感的相關(guān)技巧了，希望大家能夠在今后的工作中靈活應(yīng)用我們文章中所講的知識(shí)點(diǎn)，本期的內(nèi)容就到這里，我們下期再見(jiàn)。