這不是一個(gè)很新鮮的話題，卻是一個(gè)很常見(jiàn)，且解決起來(lái)并不容易的問(wèn)題，在一個(gè)版面中，信息的組別越多，拉開(kāi)信息之間的層級(jí)關(guān)系就越為重要，當(dāng)然，難度也會(huì)越大，這篇文章蔥爺就帶著大家一起來(lái)解決這個(gè)問(wèn)題。
1.為什么要有層級(jí)關(guān)系？
因?yàn)橥ǔＲ粋€(gè)版面中的元素和信息是多樣的，例如在一個(gè)畫冊(cè)版面中可能會(huì)有：圖片、標(biāo)題、小標(biāo)題、正文、注解、頁(yè)眉、頁(yè)腳等等。而且這些信息會(huì)有重要和次重要之分的，如果在排版上毫無(wú)層級(jí)關(guān)系，如下圖：
那么這個(gè)版面在視覺(jué)上就會(huì)顯得非常平，缺少變化和設(shè)計(jì)感，所以也不會(huì)好看。更重要的是，由于沒(méi)有層次、缺乏視覺(jué)引導(dǎo)，受眾感受不到畫面中的主次關(guān)系，所以會(huì)大大降低閱讀和信息傳播的效率。
而上圖經(jīng)過(guò)重新排版后，把各個(gè)不同類別的信息都刻意做了視覺(jué)上的調(diào)整和加工，版面具有了比較強(qiáng)的層次感，所以在美觀性和閱讀性方面都大大提升了，這就是版式設(shè)計(jì)為什么要有層級(jí)關(guān)系的原因。
2.如何正確安排層級(jí)關(guān)系？
01. 按信息的重要程度來(lái)安排它們的層次等級(jí)
有層級(jí)就會(huì)有主次，而視覺(jué)上誰(shuí)是主誰(shuí)是次呢？這就得與信息的重要程度相呼應(yīng)，我們要使最重要的信息最為突出，次要的信息次要突出，而不重要的信息則要弱化處理。
上圖的文字排版就有著鮮明的層級(jí)關(guān)系，標(biāo)題最為重要，使用大寫的Didot字體，且關(guān)鍵單詞“ART”和“FASHION”字號(hào)最大，為第一層級(jí)；非關(guān)鍵單詞“THE”和“OF”用了比較小的字號(hào)，為第二層級(jí)；
引文為第三層級(jí)，使用小寫和普通襯線體，字號(hào)比標(biāo)題中的非關(guān)鍵字小一點(diǎn)，且使用水平傾斜效果，以區(qū)隔其他信息；
正文為第四層級(jí)，字體與引文相同，但字號(hào)要小一點(diǎn)；注解為第五級(jí)，字體為無(wú)襯線體，字號(hào)比正文更??；
頁(yè)碼為第六層級(jí)，雖然字號(hào)比正文和注解要大一點(diǎn)，但是由于位置在左下角，且整體的面積較小，所以并不突出；
頁(yè)腳為第七層級(jí)，字號(hào)和字體與注解一樣，但位置位于右下角，且排版方向?yàn)樨Q排。
所以在使用一些修飾技巧時(shí)，我們要知道哪些技巧可以最大程度上突出信息，哪些次之，哪些可以將其弱化，具體有哪些技巧，蔥爺后面會(huì)做總結(jié)和分析。
02.層級(jí)區(qū)分要盡量明顯
比如字號(hào)大小區(qū)分，如果標(biāo)題文字比正文的字號(hào)只大兩三號(hào)，那么雖然標(biāo)題在理論上要更突出一些，但是效果會(huì)很不明顯，所以我們可以大膽地把標(biāo)題拉大一些。
▲上圖除了圖片很突出以外，各文字信息類別視覺(jué)表現(xiàn)上區(qū)分不明顯，層次不豐富。
▲調(diào)整后不僅把不同信息的字號(hào)做了比較大的區(qū)隔，而且還做了顏色、字體、粗細(xì)等方面的變化，使不同信息在視覺(jué)上拉得更開(kāi)，所以，信息的層級(jí)關(guān)系變得鮮明、豐富了很多。
03.區(qū)分的手法不要太單調(diào)
想要畫面更吸引人，用于區(qū)分信息層級(jí)的修飾手法也要盡量豐富一點(diǎn)，在廣告設(shè)計(jì)或促銷海報(bào)設(shè)計(jì)中，這一點(diǎn)尤為重要。有些人設(shè)計(jì)的版面層級(jí)豐富，很有層次感，但是整體看起來(lái)有點(diǎn)單調(diào)，不精彩，很可能是因?yàn)樗麄兪褂玫男揎検址ㄌ佟⑻珕握{(diào)了，比如下圖各類信息只有大小、字體（其實(shí)字體相差也不大）、筆畫粗細(xì)、色彩的區(qū)別，所以整體效果不是很出彩。
而在方案2中，我把部分文字的排版方向也做了變更，且加入色塊以突出某些信息，并把“fashion”的字體改為手寫體，使其與版面中的其他字體明顯的區(qū)隔開(kāi)來(lái)。
修改完以后，用于區(qū)分層級(jí)關(guān)系的手法更多了，所以整個(gè)個(gè)畫面給人的感覺(jué)也比修改前要更豐富、更有設(shè)計(jì)感、更有細(xì)節(jié)。
3.有哪些區(qū)分層級(jí)的表現(xiàn)手法？
01.位置區(qū)分
我們都知道在一個(gè)版面中，越靠上、靠左的位置，越容易吸引讀者的注意，反之亦然，所以左上角或垂直居中偏上的位置，常常用來(lái)排列標(biāo)題，正文一般在版面正中央，版面底部常用來(lái)排列頁(yè)碼、注解、或者一些附加信息等，按這樣的方式把信息排列好，也能制造出簡(jiǎn)單的層級(jí)關(guān)系。
02.大小區(qū)分
越大的目標(biāo)越容易吸引注意力，所以在文字排版中，字號(hào)最大的一般情況下都是最重要的信息，比如標(biāo)題、主題、核心賣點(diǎn)等，下圖把文字信息在位置區(qū)分的基礎(chǔ)上再加上大小區(qū)分，層級(jí)關(guān)系已經(jīng)變得很明顯。
03.粗細(xì)區(qū)分
粗細(xì)區(qū)分指的是文字筆畫的粗細(xì)，同種字體、同樣字號(hào)的情況下，筆畫粗的字體要比筆畫細(xì)的字體更突出，所以，在上圖的基礎(chǔ)上再加上粗細(xì)的變化，層級(jí)關(guān)系不僅得到了進(jìn)一步加強(qiáng)，美觀性也提升了。
04.字體區(qū)分
不同的字體有不一樣的調(diào)性和視覺(jué)感受，所以把不同層級(jí)的信息使用不同的字體，也可以在視覺(jué)上將這些信息進(jìn)行分類，從而提高讀者的閱讀效率，當(dāng)然字體不要太多，最好為2-3種。在上圖的基礎(chǔ)上繼續(xù)加上字體的變化，層級(jí)區(qū)分是不是更加明顯了。
另外，不同字體的視覺(jué)沖擊力也不一樣，通常來(lái)說(shuō)，字體筆畫較粗、較簡(jiǎn)潔的字體，比筆畫細(xì)、復(fù)雜的字體具有更強(qiáng)的視覺(jué)沖擊力。
05.色彩區(qū)分
色彩能賦予設(shè)計(jì)性格，比如在下圖中加入金色后，這個(gè)版面就變得高雅、尊貴了很多，且局部的金色會(huì)從大面積的白色和黑色中跳脫出來(lái)，把文字之間的層級(jí)關(guān)系拉得更開(kāi)。
06.透明度區(qū)分
不同透明度的元素在一起會(huì)形成虛實(shí)對(duì)比的效果，從而可以加強(qiáng)版面的空間感，把重要的信息設(shè)置成高透明度，能使其離讀者更近，把不是那么重要的信息設(shè)置成低透明度，能使其離讀者更遠(yuǎn)，這也是拉開(kāi)層次的有效手段。
07.線框突出
給文字增加線框，就好像用一支筆把書上的某些文字圈出來(lái)一樣，具有使其更加突出的效果，不僅是有線框的文字可以與無(wú)線框的文字區(qū)隔開(kāi)來(lái)，而且不同形狀的線框也能彼此區(qū)隔，比如下圖中的大標(biāo)題用的是矩形線框，小標(biāo)題前面的序號(hào)用的是圓形線框。
08.造型區(qū)分
上圖中用到了不同形狀的線框，這又引申出了另一種區(qū)分信息層級(jí)的方法：造型區(qū)分，例如在下圖中，大標(biāo)題使用矩形造型、副標(biāo)題使用箭頭造型、內(nèi)文使用對(duì)話框造型，于是這些分信息從造型上就有了明顯的區(qū)分，并且他們與沒(méi)有外框造型的頁(yè)腳信息也完全區(qū)隔開(kāi)來(lái)。
注：造型除了可以在線框上體現(xiàn)外，還能在色塊、圖片、以及元素上體現(xiàn)。
09.色塊突出
色塊是具有強(qiáng)烈視覺(jué)沖擊的設(shè)計(jì)元素，所以給重要的文字信息加上色彩對(duì)比鮮明的色塊，能使其變得更突出，有色塊和沒(méi)色塊的文字形成鮮明對(duì)比，也能使層級(jí)區(qū)分更明顯。
10.空間突出
與通過(guò)設(shè)置元素不同透明度來(lái)塑造空間感不同，這里的空間突出，指的是給部分重要的信息增加立體效果，使其與扁平的元素拉開(kāi)距離。例如下圖的大標(biāo)題利用重疊的方式制造了立體效果，副標(biāo)題通過(guò)加了一個(gè)立方體，使其具有立體效果，這兩個(gè)元素都得到了進(jìn)一步的豐富和突出。
11.直線突出
直線在版式設(shè)計(jì)中有很多功能，比如強(qiáng)調(diào)、裝飾、區(qū)隔信息等等，下圖用直線賦予部分信息不同的表現(xiàn)形式，使其具有不同程度的吸引力，并相互拉開(kāi)層次。
12.圖形突出
通過(guò)給關(guān)鍵信息增加圖形也能使其更突出，圖片是具有強(qiáng)烈視覺(jué)沖擊的，所以當(dāng)把圖片疊加在大標(biāo)題上時(shí)，這一區(qū)域的整體吸引力也會(huì)大大加強(qiáng)；在副標(biāo)題左右兩邊加上類似書名號(hào)的圖形能使其更特別；在小標(biāo)題前面增加一個(gè)小菱形，既能使其更美觀，也能使其與其他內(nèi)容區(qū)隔開(kāi)來(lái)。
13.方向區(qū)分
將不同信息采用不同的排版方向，也能將其有效區(qū)分，當(dāng)然，也不是說(shuō)所有信息的排版方向都要不一樣，畢竟橫排才是最適合閱讀的，所以下圖只是把標(biāo)題和頁(yè)腳中的文字分別使用了豎排和曲線排版，另外，小標(biāo)題做了輕微的水平傾斜處理，層級(jí)關(guān)系也很鮮明。
14.質(zhì)感區(qū)分
給版面中的信息賦予不同的質(zhì)感也能使其有效區(qū)分，例如在下圖中，大標(biāo)題填充了圖片質(zhì)感，副標(biāo)題填充了金色漸變質(zhì)感，而其他信息沒(méi)有添加質(zhì)感，所以他們之間的層級(jí)關(guān)系拉得也很開(kāi)，且畫面效果更豐富。
15.點(diǎn)線面區(qū)分
雖然點(diǎn)線面之間有著密切聯(lián)系，但三者在視覺(jué)呈現(xiàn)上還是有很大差異的，所以如果你把版面中的信息當(dāng)成點(diǎn)線面來(lái)進(jìn)行設(shè)計(jì)、排版時(shí)，不僅能加強(qiáng)版面的設(shè)計(jì)感，也能達(dá)到加強(qiáng)信息區(qū)分的效果。
注：將筆畫比較粗、字號(hào)較大的文字描邊，填充設(shè)置為0，就可以將面轉(zhuǎn)化為線；把一句話的字間距加大到超出一個(gè)文字的寬度，就可以將線拆成點(diǎn)。
4.實(shí)例演練
上面熙熙攘攘講了這么多，最后蔥爺用一個(gè)很接地氣的商業(yè)案例來(lái)總結(jié)一下，以下是長(zhǎng)隆開(kāi)園廣告的設(shè)計(jì)內(nèi)容，要求設(shè)計(jì)一張1080xx2560的豎版電子屏海報(bào)。
從上圖中可以看出，除了圖片和二維碼以外，文字信息大概可以劃分為4-7個(gè)層級(jí)，所以，下面我們先將它們從位置、字體、大小、粗細(xì)這幾個(gè)方面進(jìn)行層級(jí)劃分，如下圖：
在狹長(zhǎng)的版面空間中，豎線視覺(jué)流程顯然是最合理、最易閱讀的方式，從上圖來(lái)看，這么做的效果還可以，接下來(lái)我們單獨(dú)對(duì)各部分的文字信息進(jìn)行加工。
01.大標(biāo)題是該海報(bào)中最重要的信息，所以給它添加了一個(gè)有點(diǎn)立體感的金屬效果和投影效果，使其在質(zhì)感和空間上能與其他信息區(qū)隔開(kāi)。
02.“特惠出游”是重要程度僅次于大標(biāo)題的信息，所以也應(yīng)該突出，但是突出效果不能蓋過(guò)大標(biāo)題，所以我給他添加了一個(gè)象征優(yōu)惠的飄帶線框。
03.“開(kāi)放時(shí)間”和“開(kāi)放園區(qū)及酒店”的內(nèi)容形式有點(diǎn)像，即小標(biāo)題加內(nèi)容，為了讓一個(gè)版面中的表現(xiàn)形式不至于太多、太花，所以我把這兩塊內(nèi)容采用了同一種處理方式，小標(biāo)題除了使用粗體以外，還在其左右增加了一個(gè)菱形的小圖形，而內(nèi)文則使用了金色來(lái)與小標(biāo)題進(jìn)行區(qū)分。
04.“掃碼搶五一特惠”是引導(dǎo)大家掃畫面中的二維碼，所以這句話當(dāng)然要與二維碼排在一起，為了再次突出“五一特惠”的字眼，這里還把它在字體粗細(xì)和顏色上與“掃碼搶”進(jìn)行了區(qū)隔，并在它們底部增加了一個(gè)帶有箭頭的符號(hào)，加強(qiáng)其與二維碼的聯(lián)系。
05.單塊信息加工完后，來(lái)看看它們?cè)诎婷嬷械恼w效果，從下圖可以看出，層級(jí)關(guān)系還是很豐富、很鮮明的，而且也很合理。
06.在上圖的基礎(chǔ)上，增加一些細(xì)節(jié)的處理，這則電子屏海報(bào)就做完了。
07.如果覺(jué)得上圖有點(diǎn)空，信息有點(diǎn)散，我們還可以用線框和直線將版面中的信息進(jìn)行整合和區(qū)隔，設(shè)計(jì)成類似一個(gè)表格的形式，這種效果雖然在靈活性上有所缺失，但更清晰、更飽滿。
結(jié)語(yǔ)
將版面中各元素、各信息合理的劃分好層級(jí)是版式設(shè)計(jì)最重要的工作，看完這篇文章大家應(yīng)該也發(fā)現(xiàn)了，其實(shí)所有技法都是在做對(duì)比，所以還是那句老話，無(wú)論我們做什么，都離不開(kāi)美觀、對(duì)比、統(tǒng)一、平衡、清晰等設(shè)計(jì)原則，希望這篇文章能夠幫到你。
