一篇文章講透排版中的層級(jí)關(guān)系

這不是一個(gè)很新鮮的話題,卻是一個(gè)很常見,且解決起來并不容易的問題,在一個(gè)版面中,信息的組別越多,拉開信息之間的層級(jí)關(guān)系就越為重要,當(dāng)然,難度也會(huì)越大,這篇文章蔥爺就帶著大家一起來解決這個(gè)問題。

image.png

因?yàn)橥ǔR粋€(gè)版面中的元素和信息是多樣的,例如在一個(gè)畫冊(cè)版面中可能會(huì)有:圖片、標(biāo)題、小標(biāo)題、正文、注解、頁眉、頁腳等等。而且這些信息會(huì)有重要和次重要之分的,如果在排版上毫無層級(jí)關(guān)系,如下圖:



那么這個(gè)版面在視覺上就會(huì)顯得非常平,缺少變化和設(shè)計(jì)感,所以也不會(huì)好看。更重要的是,由于沒有層次、缺乏視覺引導(dǎo),受眾感受不到畫面中的主次關(guān)系,所以會(huì)大大降低閱讀和信息傳播的效率。



而上圖經(jīng)過重新排版后,把各個(gè)不同類別的信息都刻意做了視覺上的調(diào)整和加工,版面具有了比較強(qiáng)的層次感,所以在美觀性和閱讀性方面都大大提升了,這就是版式設(shè)計(jì)為什么要有層級(jí)關(guān)系的原因。



     01. 按信息的重要程度來

       安排它們的層次等級(jí)


有層級(jí)就會(huì)有主次,而視覺上誰是主誰是次呢?這就得與信息的重要程度相呼應(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í),字體為無襯線體,字號(hào)比正文更??;


頁碼為第六層級(jí),雖然字號(hào)比正文和注解要大一點(diǎn),但是由于位置在左下角,且整體的面積較小,所以并不突出;


頁腳為第七層級(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)題拉大一些。



▲上圖除了圖片很突出以外,各文字信息類別視覺表現(xiàn)上區(qū)分不明顯,層次不豐富。


▲調(diào)整后不僅把不同信息的字號(hào)做了比較大的區(qū)隔,而且還做了顏色、字體、粗細(xì)等方面的變化,使不同信息在視覺上拉得更開,所以,信息的層級(jí)關(guān)系變得鮮明、豐富了很多。


03.區(qū)分的手法

      不要太單調(diào)


想要畫面更吸引人,用于區(qū)分信息層級(jí)的修飾手法也要盡量豐富一點(diǎn),在廣告設(shè)計(jì)或促銷海報(bào)設(shè)計(jì)中,這一點(diǎn)尤為重要。有些人設(shè)計(jì)的版面層級(jí)豐富,很有層次感,但是整體看起來有點(diǎn)單調(diào),不精彩,很可能是因?yàn)樗麄兪褂玫男揎検址ㄌ?、太單調(diào)了,比如下圖各類信息只有大小、字體(其實(shí)字體相差也不大)、筆畫粗細(xì)、色彩的區(qū)別,所以整體效果不是很出彩。



而在方案2中,我把部分文字的排版方向也做了變更,且加入色塊以突出某些信息,并把“fashion”的字體改為手寫體,使其與版面中的其他字體明顯的區(qū)隔開來。



修改完以后,用于區(qū)分層級(jí)關(guān)系的手法更多了,所以整個(gè)個(gè)畫面給人的感覺也比修改前要更豐富、更有設(shè)計(jì)感、更有細(xì)節(jié)。


    01.位置區(qū)分
我們都知道在一個(gè)版面中,越靠上、靠左的位置,越容易吸引讀者的注意,反之亦然,所以左上角或垂直居中偏上的位置,常常用來排列標(biāo)題,正文一般在版面正中央,版面底部常用來排列頁碼、注解、或者一些附加信息等,按這樣的方式把信息排列好,也能制造出簡(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)性和視覺感受,所以把不同層級(jí)的信息使用不同的字體,也可以在視覺上將這些信息進(jìn)行分類,從而提高讀者的閱讀效率,當(dāng)然字體不要太多,最好為2-3種。在上圖的基礎(chǔ)上繼續(xù)加上字體的變化,層級(jí)區(qū)分是不是更加明顯了。



另外,不同字體的視覺沖擊力也不一樣,通常來說,字體筆畫較粗、較簡(jiǎn)潔的字體,比筆畫細(xì)、復(fù)雜的字體具有更強(qiáng)的視覺沖擊力。

05.色彩區(qū)分

色彩能賦予設(shè)計(jì)性格,比如在下圖中加入金色后,這個(gè)版面就變得高雅、尊貴了很多,且局部的金色會(huì)從大面積的白色和黑色中跳脫出來,把文字之間的層級(jí)關(guān)系拉得更開。



06.透明度區(qū)分

不同透明度的元素在一起會(huì)形成虛實(shí)對(duì)比的效果,從而可以加強(qiáng)版面的空間感,把重要的信息設(shè)置成高透明度,能使其離讀者更近,把不是那么重要的信息設(shè)置成低透明度,能使其離讀者更遠(yuǎn),這也是拉開層次的有效手段。



07.線框突出


給文字增加線框,就好像用一支筆把書上的某些文字圈出來一樣,具有使其更加突出的效果,不僅是有線框的文字可以與無線框的文字區(qū)隔開來,而且不同形狀的線框也能彼此區(qū)隔,比如下圖中的大標(biāo)題用的是矩形線框,小標(biāo)題前面的序號(hào)用的是圓形線框。


08.造型區(qū)分


上圖中用到了不同形狀的線框,這又引申出了另一種區(qū)分信息層級(jí)的方法:造型區(qū)分,例如在下圖中,大標(biāo)題使用矩形造型、副標(biāo)題使用箭頭造型、內(nèi)文使用對(duì)話框造型,于是這些分信息從造型上就有了明顯的區(qū)分,并且他們與沒有外框造型的頁腳信息也完全區(qū)隔開來。


注:造型除了可以在線框上體現(xiàn)外,還能在色塊、圖片、以及元素上體現(xiàn)。

09.色塊突出

色塊是具有強(qiáng)烈視覺沖擊的設(shè)計(jì)元素,所以給重要的文字信息加上色彩對(duì)比鮮明的色塊,能使其變得更突出,有色塊和沒色塊的文字形成鮮明對(duì)比,也能使層級(jí)區(qū)分更明顯。



10.空間突出

與通過設(shè)置元素不同透明度來塑造空間感不同,這里的空間突出,指的是給部分重要的信息增加立體效果,使其與扁平的元素拉開距離。例如下圖的大標(biāo)題利用重疊的方式制造了立體效果,副標(biāo)題通過加了一個(gè)立方體,使其具有立體效果,這兩個(gè)元素都得到了進(jìn)一步的豐富和突出。



11.直線突出

直線在版式設(shè)計(jì)中有很多功能,比如強(qiáng)調(diào)、裝飾、區(qū)隔信息等等,下圖用直線賦予部分信息不同的表現(xiàn)形式,使其具有不同程度的吸引力,并相互拉開層次。


12.圖形突出

通過給關(guān)鍵信息增加圖形也能使其更突出,圖片是具有強(qiáng)烈視覺沖擊的,所以當(dāng)把圖片疊加在大標(biāo)題上時(shí),這一區(qū)域的整體吸引力也會(huì)大大加強(qiáng);在副標(biāo)題左右兩邊加上類似書名號(hào)的圖形能使其更特別;在小標(biāo)題前面增加一個(gè)小菱形,既能使其更美觀,也能使其與其他內(nèi)容區(qū)隔開來。



13.方向區(qū)分

將不同信息采用不同的排版方向,也能將其有效區(qū)分,當(dāng)然,也不是說所有信息的排版方向都要不一樣,畢竟橫排才是最適合閱讀的,所以下圖只是把標(biāo)題和頁腳中的文字分別使用了豎排和曲線排版,另外,小標(biāo)題做了輕微的水平傾斜處理,層級(jí)關(guān)系也很鮮明。


14.質(zhì)感區(qū)分

給版面中的信息賦予不同的質(zhì)感也能使其有效區(qū)分,例如在下圖中,大標(biāo)題填充了圖片質(zhì)感,副標(biāo)題填充了金色漸變質(zhì)感,而其他信息沒有添加質(zhì)感,所以他們之間的層級(jí)關(guān)系拉得也很開,且畫面效果更豐富。



15.點(diǎn)線面區(qū)分

雖然點(diǎn)線面之間有著密切聯(lián)系,但三者在視覺呈現(xiàn)上還是有很大差異的,所以如果你把版面中的信息當(dāng)成點(diǎn)線面來進(jìn)行設(shè)計(jì)、排版時(shí),不僅能加強(qiáng)版面的設(shè)計(jì)感,也能達(dá)到加強(qiáng)信息區(qū)分的效果。



注:將筆畫比較粗、字號(hào)較大的文字描邊,填充設(shè)置為0,就可以將面轉(zhuǎn)化為線;把一句話的字間距加大到超出一個(gè)文字的寬度,就可以將線拆成點(diǎn)。

上面熙熙攘攘講了這么多,最后蔥爺用一個(gè)很接地氣的商業(yè)案例來總結(jié)一下,以下是長(zhǎng)隆開園廣告的設(shè)計(jì)內(nèi)容,要求設(shè)計(jì)一張1080xx2560的豎版電子屏海報(bào)。



從上圖中可以看出,除了圖片和二維碼以外,文字信息大概可以劃分為4-7個(gè)層級(jí),所以,下面我們先將它們從位置、字體、大小、粗細(xì)這幾個(gè)方面進(jìn)行層級(jí)劃分,如下圖:


在狹長(zhǎng)的版面空間中,豎線視覺流程顯然是最合理、最易閱讀的方式,從上圖來看,這么做的效果還可以,接下來我們單獨(dú)對(duì)各部分的文字信息進(jìn)行加工。

01.大標(biāo)題是該海報(bào)中最重要的信息,所以給它添加了一個(gè)有點(diǎn)立體感的金屬效果和投影效果,使其在質(zhì)感和空間上能與其他信息區(qū)隔開。


02.“特惠出游”是重要程度僅次于大標(biāo)題的信息,所以也應(yīng)該突出,但是突出效果不能蓋過大標(biāo)題,所以我給他添加了一個(gè)象征優(yōu)惠的飄帶線框。


03.“開放時(shí)間”和“開放園區(qū)及酒店”的內(nèi)容形式有點(diǎn)像,即小標(biāo)題加內(nèi)容,為了讓一個(gè)版面中的表現(xiàn)形式不至于太多、太花,所以我把這兩塊內(nèi)容采用了同一種處理方式,小標(biāo)題除了使用粗體以外,還在其左右增加了一個(gè)菱形的小圖形,而內(nèi)文則使用了金色來與小標(biāo)題進(jìn)行區(qū)分。


04.“掃碼搶五一特惠”是引導(dǎo)大家掃畫面中的二維碼,所以這句話當(dāng)然要與二維碼排在一起,為了再次突出“五一特惠”的字眼,這里還把它在字體粗細(xì)和顏色上與“掃碼搶”進(jìn)行了區(qū)隔,并在它們底部增加了一個(gè)帶有箭頭的符號(hào),加強(qiáng)其與二維碼的聯(lián)系。


05.單塊信息加工完后,來看看它們?cè)诎婷嬷械恼w效果,從下圖可以看出,層級(jí)關(guān)系還是很豐富、很鮮明的,而且也很合理。


06.在上圖的基礎(chǔ)上,增加一些細(xì)節(jié)的處理,這則電子屏海報(bào)就做完了。


07.如果覺得上圖有點(diǎn)空,信息有點(diǎn)散,我們還可以用線框和直線將版面中的信息進(jìn)行整合和區(qū)隔,設(shè)計(jì)成類似一個(gè)表格的形式,這種效果雖然在靈活性上有所缺失,但更清晰、更飽滿。




結(jié)語

將版面中各元素、各信息合理的劃分好層級(jí)是版式設(shè)計(jì)最重要的工作,看完這篇文章大家應(yīng)該也發(fā)現(xiàn)了,其實(shí)所有技法都是在做對(duì)比,所以還是那句老話,無論我們做什么,都離不開美觀、對(duì)比、統(tǒng)一、平衡、清晰等設(shè)計(jì)原則,希望這篇文章能夠幫到你。


公眾號(hào):蔥爺,標(biāo)注:本文轉(zhuǎn)載自蔥爺(公眾號(hào)ID:congyenanian),寫干貨、說實(shí)話、做真案例。

文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請(qǐng)聯(lián)系我們刪除
文章評(píng)價(jià)
登錄后可以評(píng)論
立即登錄
比格設(shè)計(jì)
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺(tái)原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機(jī)海報(bào)應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營(yíng)銷、私域流量運(yùn)營(yíng)——站式營(yíng)銷管理平臺(tái)
推薦文章
用戶運(yùn)營(yíng)平臺(tái)產(chǎn)品設(shè)計(jì)指南
淺談?dòng)脩暨\(yùn)營(yíng)中的用戶分層
內(nèi)容運(yùn)營(yíng):戴上寫作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢
一個(gè)案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬,一個(gè)女孩子在抖音靠洗車也能月入過萬!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號(hào)內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對(duì)本地生活商家收取服務(wù)費(fèi)
熱門素材樣式
運(yùn)營(yíng)導(dǎo)航
運(yùn)營(yíng)工具
分享到