本期給大家?guī)淼膬?nèi)容是關(guān)于視覺張力的應(yīng)用技巧，聽到這個(gè)詞也許會(huì)給人一種云里霧里的感覺，我們?cè)谌粘９ぷ髦幸部倳?huì)聽到這些「視覺張力」「視覺沖擊力」「視覺重力」等等專業(yè)詞匯。那么這些帶有視覺前綴的力學(xué)詞到底是什么意思呢？今天我們來一起分析一下這其中的「視覺張力」，看它在版式設(shè)計(jì)中都起著哪些作用。接下來讓我們一起學(xué)習(xí)今天的內(nèi)容吧。

何為張力

首先我們來了解一下張力的概念，從百科中的解釋可以初步了解到，張力是物體受到拉力而產(chǎn)生的牽引力，這么說是不是還有點(diǎn)暈？

通俗一些解釋，可以將它理解成在拔河時(shí)繩子兩端受到的左右拉力，我們看整個(gè)畫面在視覺心理上產(chǎn)生了一種向左右擴(kuò)張的感覺。

就像上圖中的氣球一樣，內(nèi)部充氣后產(chǎn)生了向外膨脹的擴(kuò)張力。外部的包裹部分也同時(shí)向內(nèi)產(chǎn)生收縮的力，從而產(chǎn)生了一種相互制約的緊張感。

在藝術(shù)和設(shè)計(jì)以及文學(xué)領(lǐng)域中，視覺張力這個(gè)詞也經(jīng)常用來形容和諧與沖突之間的強(qiáng)烈對(duì)比，它是一種經(jīng)過美學(xué)經(jīng)驗(yàn)與審美傾向后的主觀評(píng)價(jià)。

原理與解析

今天我們不講那么深?yuàn)W的直覺式感受，而是從平面構(gòu)成的角度來深度解析視覺張力在版式設(shè)計(jì)中的作用，客觀的了解康定斯基在其著作《點(diǎn)線面》中所提及到的視覺張力理論。

支撐起我們身體外形的是藏在內(nèi)部的骨骼部分。而在版式設(shè)計(jì)中也同樣需要支撐起整個(gè)版面的骨骼元素。

新人設(shè)計(jì)師經(jīng)常會(huì)出現(xiàn)的問題就是會(huì)把整個(gè)版面填充的很滿，他們認(rèn)為這樣能讓版面變得飽滿。但事實(shí)上這樣并不能解決什么問題。

我們需要轉(zhuǎn)換思維模式，客觀的重新認(rèn)識(shí)版面中元素起到的作用。

從構(gòu)成的角度說，版面中只要出現(xiàn)一個(gè)很小的點(diǎn)就已經(jīng)足夠吸引觀者的注意力了。點(diǎn)是視覺力量的中心，它在版面中能夠產(chǎn)生占據(jù)空間的作用。

當(dāng)版面中出現(xiàn)兩個(gè)點(diǎn)元素時(shí)，我們的視線會(huì)下意識(shí)的在他們之間形成一條隱形的線，即使他們離的很遠(yuǎn)。正是由于存在著這條無形的線段連接，才讓兩個(gè)點(diǎn)之間產(chǎn)生了關(guān)聯(lián)。包括兩點(diǎn)之間的空白區(qū)域在內(nèi)，它們都會(huì)被看做一個(gè)整體。

當(dāng)版面中出現(xiàn)三個(gè)點(diǎn)時(shí)，我們?cè)谛睦砩媳銜?huì)自然形成一個(gè)負(fù)形的三角形，它與背景之間會(huì)形成圖底關(guān)系，點(diǎn)與點(diǎn)之間的距離決定了這個(gè)三角形的大小。

同樣的道理，當(dāng)版面中出現(xiàn)四個(gè)點(diǎn)時(shí)，矩形的負(fù)空間與版面形狀產(chǎn)生了呼應(yīng)。四個(gè)點(diǎn)之間的內(nèi)部會(huì)形成一個(gè)假想的視覺面積，點(diǎn)與邊界的距離也為我們定義的版心的大小，這也是版面中張力的主要來源。

點(diǎn)具有相互連接的屬性，當(dāng)很多個(gè)距離相等的點(diǎn)占著水平方向排列會(huì)產(chǎn)生線段的印象。

而一個(gè)陣列的點(diǎn)相互連接就成了一個(gè)面。

舉個(gè)比較常見的例子，段落文字就是由許多個(gè)點(diǎn)組合而成的面。

古人為了記憶天空中的星象，會(huì)將相鄰的星星連接起來，就像圖中的北斗七星，通過同形聯(lián)想，它就像是一個(gè)勺子。人們就是通過記憶勺子形狀來找到北斗七星的。

西方的星座也是同樣的道理，將相鄰的點(diǎn)連接形成對(duì)應(yīng)的圖案，最終形成我們現(xiàn)在看到的星座圖形。

當(dāng)版面中只有兩個(gè)點(diǎn)時(shí)，我們可以得到的信息只有版心的寬度距離，而想要得到一個(gè)完整的版面。我們還需要一個(gè)確定高度的點(diǎn)才行，通過這三個(gè)點(diǎn)的位置來腦補(bǔ)出整個(gè)版心的張力大小。

也就是說，想要達(dá)到支撐起整個(gè)版心的目的，版面內(nèi)最少需要三個(gè)支撐點(diǎn)。

這種腦補(bǔ)的原因來自于視覺的閉合心理，我們會(huì)將那些區(qū)域閉合的圖形自動(dòng)視為一個(gè)完整的內(nèi)容，就像圖中的圖形。通常人們會(huì)認(rèn)為他們是三個(gè)完整的組，因?yàn)槔ㄌ?hào)內(nèi)的距離更接近，那么事實(shí)上真的是這樣嗎？

實(shí)際上六組圖形的物理距離是完全相等的，之所以會(huì)產(chǎn)生括號(hào)外大于括號(hào)內(nèi)的錯(cuò)覺完全是因?yàn)橐曈X心理在作怪。

到此我們可以大致總結(jié)一下版面中的張力是怎樣產(chǎn)生的，以版面的四角作為支撐點(diǎn)，在這一基礎(chǔ)上，如果還有剩余的元素可以編排在垂直與水平的位置上。這樣整個(gè)版面就被支撐起來了，形成了一個(gè)完整的面積，給人傳達(dá)出了飽滿的視覺印象。在實(shí)際編排中由于層級(jí)的介入，版面中的元素并不一定都是等大的，同時(shí)隨著主體輪廓的不同，也會(huì)形成繞排等不同位置的結(jié)果。但萬變不離其宗，版面中每個(gè)元素的聚散離合都會(huì)影響到整個(gè)版面的張力大小。

案例解構(gòu)

這個(gè)版面主要運(yùn)用了點(diǎn)的分散和連接作用，點(diǎn)與點(diǎn)之間雖然面積較遠(yuǎn)但是依然在視覺上會(huì)被看成一個(gè)整體，其余層級(jí)的內(nèi)容則是以線的形態(tài)出現(xiàn)在版面中。經(jīng)過解構(gòu)我們可以看出，版面中的張力主要來源于版心四角的位置，這個(gè)版面是通過四個(gè)點(diǎn)支撐起來的。

接下來看這個(gè)版面，首先我們標(biāo)示出人物的面積，隨后是山峰的面積，文字以點(diǎn)的形式分散于版面中。由于點(diǎn)與點(diǎn)之間的連接作用，我們可以將其看做四條豎線。而線與線之間相連就成了一個(gè)面，這個(gè)版面主要起到支撐作用的是邊緣的三個(gè)點(diǎn)。

對(duì)于這個(gè)版面來說，與之前的版面相比，版面中元素并不是等大的。它的元素分布情況大概是這樣的，接下來我們標(biāo)出它的版心大小，可以明顯看出這個(gè)版面中起到張力作用元素主要有三個(gè)，而其余的元素則分布在版心的內(nèi)部空白位置。

從元素的排布上看就基本可以得出版心的大小了，元素之間通過對(duì)齊與擴(kuò)張，形成了一個(gè)方形的面積，版心的四個(gè)角落都有支撐點(diǎn)。

我們?cè)倏催@個(gè)版面，它由一個(gè)主體，和兩個(gè)文字組以及 logo 構(gòu)成，這是一個(gè)典型的由三點(diǎn)支撐起來的版面。

這個(gè)同樣是由三個(gè)點(diǎn)支撐起來的。

這個(gè)版面經(jīng)過結(jié)構(gòu)可以很明顯的看到，元素分散到版面的四角，形成向外擴(kuò)張的結(jié)構(gòu)，其余信息放置在空白位置。

這個(gè)版面較之前就要更復(fù)雜一些了，來看一下它的結(jié)構(gòu)，標(biāo)出版心后可以看出元素基本上是圍繞著版心的大小進(jìn)行排布的，左下角為了增加元素的張力作用，依然采用了三點(diǎn)的分布方式來占據(jù)更大的空間面積，從宏觀角度來說版面依然采用了三個(gè)點(diǎn)的骨骼結(jié)構(gòu)。

這個(gè)版面，可以看出版心采用了四個(gè)點(diǎn)來支撐，剩余兩個(gè)文字信息分布在版面的水平方向，就是圖中標(biāo)注成藍(lán)色的位置。

這個(gè)版面中出現(xiàn)了帶有出血的元素，看一下它的版心和元素的構(gòu)成情況，采用了四個(gè)點(diǎn)的出血結(jié)構(gòu)。

這個(gè)版面的變化性相對(duì)難度更大，我們來看它的構(gòu)成結(jié)構(gòu)，可以看到整個(gè)版面大致分為兩欄，左側(cè)小欄和右側(cè)大欄內(nèi)的元素編排都采用了三大支撐點(diǎn)來產(chǎn)生版心的張力效果。從整體的角度觀看版面，也會(huì)得出同樣的三點(diǎn)支撐版心的印象。

這個(gè)版面中，主體的形狀變化較強(qiáng)。除編排在四角的元素外，其余元素都采用了繞排的呼應(yīng)形式安排在了空白位置上，整體看去采用了四個(gè)點(diǎn)來產(chǎn)生張力作用。

這個(gè)也是一樣，采用純文字的版面編排，占據(jù)四個(gè)角落，其余元素編排在空白位置。

這個(gè)呢，版心的張力主要來源是四個(gè)角落的元素位置。

我們來總結(jié)一下，當(dāng)版面底部已經(jīng)有一個(gè)很大的圖像或者文字時(shí)，版面頂部只要有一個(gè)元素就可以撐起整個(gè)版面的張力。

頂部也可以是兩個(gè)元素來同時(shí)產(chǎn)生張力作用。

對(duì)于主體位于中心位置的版面，我們最少需要三個(gè)點(diǎn)來起到支撐版心的作用。

這里也可以是四個(gè)點(diǎn)來描述版面的張力大小。

此外，如果這時(shí)還有其余的元素需要添加，可以添加到垂直和水平的空白位置上。

接下來我們拿這個(gè)版面來進(jìn)行舉例，中心的圓形是版面中最大的元素，被編排到了版面的正中心位置。

隨后出現(xiàn)在版面中的是四個(gè)角落的文字元素，它們的出現(xiàn)加大了版心的張力大小。

隨后，其余的文字信息被編排到了版心的垂直和水平的位置并貼近版心的邊緣。

接下來在垂直位置添加裝飾性的點(diǎn)元素來起到占據(jù)空間的目的。

最后在版面的空白處繼續(xù)添加其余的文字信息，這個(gè)版面就基本上變得非常飽滿了。

接下來我們看一下它的元素構(gòu)成結(jié)構(gòu)。

并不是只有文字的位置才能起到加強(qiáng)版面張力的作用，換成圖形和圖像也是同樣的道理。我們看這個(gè)圖，將周圍的元素去除后，版面中原本熱鬧的氛圍消失了，版面占據(jù)空間的張力也隨之變小了，但絕對(duì)不是說底部的版面就是不對(duì)的，一切都是根據(jù)項(xiàng)目的定位來判定的。

這個(gè)版面同樣具有熱鬧的節(jié)日氛圍，去掉周圍的圖像元素后，明顯變得冷清起來，版面的張力也隨之縮小了很多。

這個(gè)版面也是同樣的道理，去除周圍的元素后，版面的視覺張力縮小了，與之前相比缺少了沖擊力，變得安靜了。

這個(gè)版面因?yàn)辄c(diǎn)元素的出現(xiàn)，整體給人的感受非常飽滿，將點(diǎn)去除后，原本被占據(jù)的空間變小了，明顯沒有之前的版面具有視覺張力。

案例演示

這是廣告牌，投放尺寸主要設(shè)定在一個(gè)人能夠近距離觀看的大小，也就是說版面中可以出現(xiàn)一些比較細(xì)小的文字。

（這里需要特別提醒的是，在實(shí)際應(yīng)用中如果廣告牌掛得比較高，就需要根據(jù)實(shí)際情況來調(diào)整最小的文字字號(hào)了。否則說明文字的出現(xiàn)也就沒有實(shí)際意義了。）

接下來我們來看一下文案內(nèi)容，一個(gè)航拍無人機(jī)的宣傳廣告，含有品牌的標(biāo)志和文案以及圖片信息。

根據(jù)文案信息，我們給項(xiàng)目添加氣質(zhì)關(guān)鍵詞，及表現(xiàn)出科技的領(lǐng)先感，同時(shí)因?yàn)楫a(chǎn)品屬于親民定位，我們還需要加入具有輕松與溫情的氣質(zhì)。主視覺決定采用文字為主強(qiáng)調(diào)產(chǎn)品名稱，加入文字并放大成為版面中最大的面積。

這里需要注意的是，這個(gè)文字的外形輪廓給人一種濃厚的歷史氣息，就像演員走錯(cuò)了片場，完全與我們的定位不符。

換成無襯線體后，明顯覺得好多了。但是還是覺得哪里怪怪的。原因在于它的外形沒有給人很特別的印象。從「S」的收口處可以明顯看出切割感很強(qiáng)，缺少一些書寫的痕跡，整體顯得有些平淡無奇。

這個(gè)字體大體感覺上還不錯(cuò)，帶有書寫感的曲線，幾何形的外觀似乎都很符合定位。但作為版面中的主視覺元素似乎還少了點(diǎn)裝飾感。

最后選擇了這個(gè)字體，同樣具有書寫感的曲線開口，帶有幾何特征的外形以及類似電路排線一樣的裝飾結(jié)構(gòu)。

色彩方面采用橙紅色作為主色調(diào)，烘托親民的色彩氛圍。接下來將產(chǎn)品疊壓在文字之上，加強(qiáng)版面的層次感。

為了繼續(xù)加強(qiáng)版面的中層次變化，我們?cè)谖淖峙c圖像之間添加陰影，細(xì)節(jié)決定成敗，一個(gè)簡單的陰影也是需要體現(xiàn)出層次變化的。從模糊到清晰，從暗淡到濃重的變化都是塑造細(xì)節(jié)的關(guān)鍵，這里為投影添加三層強(qiáng)中弱的變化，這樣一來，陰影部分的刻畫就完成了。

與之前相比，添加陰影后的畫面在視覺層次上要更豐富一些。在視覺表現(xiàn)上也更立體。

最后我們將文字信息劃分好層級(jí)后一次添加到版面中。這個(gè)畫面就完成了。主體位于版面的中心位置，其余信息分布在版面四周，形成向外擴(kuò)散的視覺張力，一共使用了三個(gè)點(diǎn)元素來支撐版心的大小，剩余的文字信息則添加在版面底部的空白位置。

我們?cè)囍鴮⑿畔⑷技械揭黄饡?huì)怎樣呢？

可以看到，版面中元素全都集中在了版面的中心位置，這使得原本占據(jù)整個(gè)版面的視覺張力變小，版面的兩端會(huì)顯得很空曠，相對(duì)于之前的版面來說變得沒有那么飽滿了。這種情況下，也可以采用添加圖形元素的手法來填充版面兩端的空白處，讓畫面變得熱鬧起來，增強(qiáng)版面的動(dòng)感與活力。

這里我們添加一些抽象的氣泡元素，為版面添加一些概念性的印象。添加元素后，新的問題又出現(xiàn)了，由于兩側(cè)的元素僅作為裝飾出現(xiàn)，但是目前的視覺又顯得比較搶眼，這就有些干擾到了主視覺的層級(jí)地位了。

那么解決這個(gè)問題的方式也很簡單，就是弱化掉兩端的氣泡元素，讓主視覺與裝飾元素之間的層次更分明。經(jīng)過弱化處理后，這個(gè)版面看上去就舒服多了。這里需要注意的是，氣泡的虛化程度也同樣遵循了強(qiáng)中弱的層次變化，這樣的處理也進(jìn)一步加強(qiáng)了整體的視覺縱深感。

經(jīng)過圓形氣泡的填充后，版面的張力恢復(fù)到了之前的大小。整體給人更加飽滿的視覺印象。

今天我們一起學(xué)習(xí)了視覺張力在版面中的應(yīng)用技巧，一起了解到了圖像與文字在版面中不同位置所起到的作用，也講解了版面的骨骼是如何構(gòu)成的，希望我們的內(nèi)容依然能夠?qū)δ阌兴鶐椭?