他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

版式設(shè)計(jì)里的「張力」是什么意思?今天幫你解答!

2019-1-25    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

 

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

何為張力

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

通俗一些解釋?zhuān)梢詫⑺斫獬稍诎魏訒r(shí)繩子兩端受到的左右拉力,我們看整個(gè)畫(huà)面在視覺(jué)心理上產(chǎn)生了一種向左右擴(kuò)張的感覺(jué)。

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

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

原理與解析

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

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

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

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

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

當(dāng)版面中出現(xiàn)兩個(gè)點(diǎn)元素時(shí),我們的視線(xiàn)會(huì)下意識(shí)的在他們之間形成一條隱形的線(xiàn),即使他們離的很遠(yuǎn)。正是由于存在著這條無(wú)形的線(xià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è)假想的視覺(jué)面積,點(diǎn)與邊界的距離也為我們定義的版心的大小,這也是版面中張力的主要來(lái)源。

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

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

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

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

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

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

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

這種腦補(bǔ)的原因來(lái)自于視覺(jué)的閉合心理,我們會(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ò)覺(jué)完全是因?yàn)橐曈X(jué)心理在作怪。

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

案例解構(gòu)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

并不是只有文字的位置才能起到加強(qiáng)版面張力的作用,換成圖形和圖像也是同樣的道理。我們看這個(gè)圖,將周?chē)脑厝コ螅婷嬷性緹狒[的氛圍消失了,版面占據(jù)空間的張力也隨之變小了,但絕對(duì)不是說(shuō)底部的版面就是不對(duì)的,一切都是根據(jù)項(xiàng)目的定位來(lái)判定的。

這個(gè)版面同樣具有熱鬧的節(jié)日氛圍,去掉周?chē)膱D像元素后,明顯變得冷清起來(lái),版面的張力也隨之縮小了很多。

這個(gè)版面也是同樣的道理,去除周?chē)脑睾螅婷娴囊曈X(jué)張力縮小了,與之前相比缺少了沖擊力,變得安靜了。

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

案例演示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

藍(lán)設(shè)計(jì)ssll180.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

日歷

鏈接

個(gè)人資料

存檔