版面里亂中有序隱藏的網(wǎng)格

作者：Martin_K

序言

在設(shè)計(jì)中，我們經(jīng)常會(huì)看到有些畫面東一塊西一塊的信息擺放，亦或是不按常規(guī)的編排來(lái)營(yíng)造設(shè)計(jì)感和創(chuàng)意性，力求打破常規(guī)對(duì)畫面中所出現(xiàn)的元素重組，即使看似混亂的畫面，同樣也是利用網(wǎng)格系統(tǒng)對(duì)畫面中的空間進(jìn)行劃分，使其在混亂中依然井然有序，亂不是隨意的擺放，而是通過(guò)隱藏的網(wǎng)格使其具有一定的邏輯性；本期文章將通過(guò)網(wǎng)格系統(tǒng)，解密版面中隱藏的網(wǎng)格以及如何去營(yíng)造這種隱藏的網(wǎng)格，使畫面具有美感。

網(wǎng)格系統(tǒng)是排版中最為重要的工具，亦是把版面進(jìn)行有序的分割，使對(duì)象與文本大小的單元格對(duì)齊，也稱之為版面網(wǎng)格，在編排時(shí)需要按照一定的比例對(duì)版面進(jìn)行劃分，并利用網(wǎng)格完成精美的版面編排；

如上圖所示：

利用網(wǎng)格三分法將整個(gè)版面分成三份進(jìn)行檢查之后會(huì)發(fā)現(xiàn)，左邊不規(guī)則的編排看起來(lái)更加的精致，而右邊的則是常規(guī)的編排，除了文字對(duì)齊之外沒有任何太多的規(guī)則可以依賴，留白和文字的位置也比較隨意且不夠精致；在版面編排中網(wǎng)格則是檢查整個(gè)編排合理與否，元素位置是否恰當(dāng)?shù)囊罁?jù)。

網(wǎng)格是對(duì)整個(gè)版面的把控與合理劃分，在營(yíng)造亂中有序的秩序中讓版面具有科學(xué)依據(jù)的美觀性，即使是留白也有看不見的網(wǎng)格作為編排依據(jù)。

案例中主體以居中形式編排占據(jù)版面部分三分之二，而零散的文字信息在自身對(duì)齊之外，均是按照一定的網(wǎng)格的比例進(jìn)行大小和位置的排列，即使混亂但卻精致。

1、制造無(wú)形的秩序

2、確定文字元素的位置和大小

3、整體版面把控的能力

4、合理的留白

網(wǎng)格是無(wú)形的存在，是進(jìn)行版面編排時(shí)我們需要把這些隱藏的網(wǎng)格給叫出來(lái)為我們服務(wù)，在設(shè)計(jì)中越是復(fù)雜的版面越是依賴于網(wǎng)格，大多數(shù)的同學(xué)雖然知道，但是

不知道該如何利用起來(lái)創(chuàng)作出更加精致成熟的作品，下面通過(guò)幾點(diǎn)講解該如何利用網(wǎng)格？

一長(zhǎng)度為準(zhǔn)

在版面的編排時(shí)為了更好的營(yíng)造節(jié)奏感通常會(huì)把信息長(zhǎng)短不一的斷開，在斷開時(shí)人眼所看到的界線，則是以最長(zhǎng)的信息為準(zhǔn)將版面自動(dòng)劃分，而最長(zhǎng)和最短之間則可以營(yíng)造一種比例關(guān)系，即有節(jié)奏感也使信息排列更加自然，留白也有一定的依據(jù)。

如圖所示：從右邊網(wǎng)格的結(jié)構(gòu)圖中可以看出，最長(zhǎng)的文字信息占據(jù)版面三分之二左右，而大標(biāo)題的中英文則與下面短文字相等，占據(jù)三分之一，具有自然的節(jié)奏感，另外長(zhǎng)文字的斷開則與人物主體形成平衡對(duì)稱的角度，整體干凈整潔具有一定的個(gè)性特征。

對(duì)齊的依據(jù)

在版面中很多主體都是呈現(xiàn)不規(guī)則的形態(tài)，而對(duì)于編排很大程度上會(huì)帶來(lái)對(duì)齊的困擾，這時(shí)需要利用網(wǎng)格尋找對(duì)主體對(duì)齊的依據(jù)，以達(dá)到版面編排的平衡和美感，如上面結(jié)構(gòu)圖中所示，左邊的看起來(lái)更加居中對(duì)齊，而右邊的則是會(huì)使重心向右偏移導(dǎo)致版面失衡。

位置和間距

在版面中很多情況下會(huì)糾結(jié)文字的位置該放哪里，網(wǎng)格則可以為文字?jǐn)[放的位置提供參考依據(jù)，而英文字母的制作系統(tǒng)與中文有別，在利用網(wǎng)格時(shí)則需要適當(dāng)?shù)恼{(diào)整字距和行間距，讓版面看起來(lái)更加的精致工整，位置和間距的調(diào)整是針對(duì)整體版面而并非局部。

如圖所示：當(dāng)橫向與縱向編排混合使用時(shí)，文字的位置和間距則需要嚴(yán)格控制，小文字則與大文字占居的網(wǎng)格也是同樣大小，看起來(lái)凌亂的編排則是依據(jù)隱藏的網(wǎng)格制作一定的編排秩序，讓編排更加的精致美觀，中文造字的基礎(chǔ)則是依據(jù)方塊，而在編排中對(duì)于間距的調(diào)整幾乎沒有，自然排列即可。

簡(jiǎn)約松散型、個(gè)性凌亂型、平鋪半屏型

以三種常見的典型版式編排來(lái)闡述隱藏在版式中網(wǎng)格的應(yīng)用，如何更好的利用網(wǎng)格在版面中制造一定的秩序以達(dá)到理想的編排效果，讓版面看起來(lái)更加的美觀精致。

簡(jiǎn)約松散型

簡(jiǎn)約松散型則是在文字信息沒有那么多的情況下，以凸顯主體為目的的版面中，同樣也是利用這些隱藏的網(wǎng)格讓編排更加的符合主體所傳遞的意境。

先來(lái)看一個(gè)常規(guī)編排，在文字較少的情況下，設(shè)計(jì)師的第一反應(yīng)就是簡(jiǎn)單的常規(guī)編排，雖然沒有太多的問題，但會(huì)版面歸于呆板。

簡(jiǎn)約松散是把信息按照版面的大小等比的進(jìn)行劃分，利用網(wǎng)格主動(dòng)的去營(yíng)造一種秩序，即使在較為松散的情況下也一定有依據(jù)可遵循。

案例演示

找一張質(zhì)量比較高的素材，把文字置入版面進(jìn)行編排，并適當(dāng)加入創(chuàng)意讓簡(jiǎn)約而不簡(jiǎn)單，左邊的圖下面較多的留白則是為了迎合主體人物的視覺引導(dǎo)，整體以主體為主更多的是突出一種意境。

右邊的圖當(dāng)文字被打散之后再進(jìn)行編排雖然會(huì)讓整個(gè)版面更加具有透氣性，但是也讓版面的意境大打折扣，即使所有餓信息都是嚴(yán)格按照網(wǎng)格編排的，編排很多時(shí)候是依據(jù)主題來(lái)進(jìn)行的。 

所以這里使用那種編排方法，還是要看主題表達(dá)的內(nèi)容。

個(gè)性凌亂型

個(gè)性凌亂型也是創(chuàng)意編排的一種，同時(shí)也是非常依賴于網(wǎng)格的，即使在版面中橫七八豎的躺著不同的方向的元素，而這些元素也是在網(wǎng)格的基礎(chǔ)上嚴(yán)謹(jǐn)?shù)木幣拧?/p>

隨意凌亂，很多情況下針對(duì)凌亂的編排則是隨意的擺放最終導(dǎo)致出來(lái)的效果不盡人意，且沒有任何的依據(jù)可言，看似沒什么問題，但總感覺不夠精致。

依據(jù)網(wǎng)格的凌亂，在飄落的字母中同樣是也是按照網(wǎng)格大小進(jìn)行有序的排列，雖然沒有大小的變化，但是確是凌亂中透著工整。

案例演示

新建一個(gè)畫布，然后把畫布平均分成九份，在這個(gè)基礎(chǔ)之上已經(jīng)把網(wǎng)格創(chuàng)建好了，不管如何凌亂的變化都是在這個(gè)基礎(chǔ)之上進(jìn)行的，添加一定的裝飾材質(zhì)之后把網(wǎng)格進(jìn)行適當(dāng)?shù)淖兓?/p>

平鋪半屏型

上圖的案例中也是平鋪滿屏的一種，另外則還有就是背景和其它元素鋪滿整個(gè)畫面，以整個(gè)版面為基準(zhǔn)的半滿屏，也可以說(shuō)是元素占居版面的三分之一，這種類型最為常用。

平鋪半屏則是以黃金比例為基準(zhǔn)，讓主體占居大部分的版面，而文字信息則是依據(jù)主體進(jìn)行的編排，這種方式凸顯整體性。

案例演示

新建一個(gè)畫布，然后將主體置入到畫面中，調(diào)整好左右的邊距和主體的位置，使整個(gè)主體占居版面的大部分面積，并對(duì)背景和主體進(jìn)行刻畫。

如圖所示，邊距和主體的位置調(diào)整好之后，對(duì)背景和主體進(jìn)行適當(dāng)?shù)男Ч坍?，而整體由于邊距和主體位置的確定，大致的網(wǎng)格框架已已經(jīng)出來(lái)，文字信息則是在主體基礎(chǔ)上劃分。

把其它文字信息也置入畫面當(dāng)中，并把網(wǎng)格圖畫出來(lái)，可以看出文字則是依據(jù)整個(gè)主體將版面劃分成等比的網(wǎng)格，右邊豎排的小字則是從中心往下排，填充留白處

則是為了讓版面更加平衡。

對(duì)于隱藏在版面中的網(wǎng)格先介紹到這吧，這也是網(wǎng)格系統(tǒng)中的一小部分，在自建網(wǎng)格的時(shí)候一定要注意文字信息的視覺差，切記墨守陳規(guī)，網(wǎng)格只是一個(gè)工具，具體的則要根據(jù)實(shí)際的應(yīng)用以人眼視覺為基準(zhǔn)進(jìn)行調(diào)整。