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

何為張力

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

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

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

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

原理與解析

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

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

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

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

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

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

當版面中出現(xiàn)三個點時，我們在心理上便會自然形成一個負形的三角形，它與背景之間會形成圖底關(guān)系，點與點之間的距離決定了這個三角形的大小。

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

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

而一個陣列的點相互連接就成了一個面。

舉個比較常見的例子，段落文字就是由許多個點組合而成的面。

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

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

當版面中只有兩個點時，我們可以得到的信息只有版心的寬度距離，而想要得到一個完整的版面。我們還需要一個確定高度的點才行，通過這三個點的位置來腦補出整個版心的張力大小。

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

這種腦補的原因來自于視覺的閉合心理，我們會將那些區(qū)域閉合的圖形自動視為一個完整的內(nèi)容，就像圖中的圖形。通常人們會認為他們是三個完整的組，因為括號內(nèi)的距離更接近，那么事實上真的是這樣嗎？

實際上六組圖形的物理距離是完全相等的，之所以會產(chǎn)生括號外大于括號內(nèi)的錯覺完全是因為視覺心理在作怪。

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

案例解構(gòu)

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

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

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

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

我們再看這個版面，它由一個主體，和兩個文字組以及 logo 構(gòu)成，這是一個典型的由三點支撐起來的版面。

這個同樣是由三個點支撐起來的。

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

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

這個版面，可以看出版心采用了四個點來支撐，剩余兩個文字信息分布在版面的水平方向，就是圖中標注成藍色的位置。

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

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

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

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

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

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

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

對于主體位于中心位置的版面，我們最少需要三個點來起到支撐版心的作用。

這里也可以是四個點來描述版面的張力大小。

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

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

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

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

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

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

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

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

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

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

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

案例演示

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

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

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

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

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

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

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

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

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

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

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

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

我們試著將信息全都集中到一起會怎樣呢？

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

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

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

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

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