排版主要就是在做層級劃分以及信息美化的工作。這不是一個很新鮮的話題,卻是一個很常見,且解決起來并不容易的問題,在一個版面中,信息的組別越多,拉開信息之間的層級關系就越為重要,當然,難度也會越大,這篇文章蔥爺就帶著大家一起來解決這個問題。
因為通常一個版面中的元素和信息是多樣的,例如在一個畫冊版面中可能會有:圖片、標題、小標題、正文、注解、頁眉、頁腳等等。而且這些信息會有重要和次重要之分的,如果在排版上毫無層級關系,如下圖:
那么這個版面在視覺上就會顯得非常平,缺少變化和設計感,所以也不會好看。更重要的是,由于沒有層次、缺乏視覺引導,受眾感受不到畫面中的主次關系,所以會大大降低閱讀和信息傳播的效率。
而上圖經過重新排版后,把各個不同類別的信息都刻意做了視覺上的調整和加工,版面具有了比較強的層次感,所以在美觀性和閱讀性方面都大大提升了,這就是版式設計為什么要有層級關系的原因。
?01. 按信息的重要程度來
? ? ???安排它們的層次等級
有層級就會有主次,而視覺上誰是主誰是次呢?這就得與信息的重要程度相呼應,我們要使最重要的信息最為突出,次要的信息次要突出,而不重要的信息則要弱化處理。
上圖的文字排版就有著鮮明的層級關系,標題最為重要,使用大寫的Didot字體,且關鍵單詞“ART”和“FASHION”字號最大,為第一層級;非關鍵單詞“THE”和“OF”用了比較小的字號,為第二層級;
引文為第三層級,使用小寫和普通襯線體,字號比標題中的非關鍵字小一點,且使用水平傾斜效果,以區隔其他信息;
正文為第四層級,字體與引文相同,但字號要小一點;
注解為第五級,字體為無襯線體,字號比正文更小;
頁碼為第六層級,雖然字號比正文和注解要大一點,但是由于位置在左下角,且整體的面積較小,所以并不突出;
頁腳為第七層級,字號和字體與注解一樣,但位置位于右下角,且排版方向為豎排。
所以在使用一些修飾技巧時,我們要知道哪些技巧可以最大程度上突出信息,哪些次之,哪些可以將其弱化,具體有哪些技巧,蔥爺后面會做總結和分析。
02.層級區分要
? ? ??盡量明顯
比如字號大小區分,如果標題文字比正文的字號只大兩三號,那么雖然標題在理論上要更突出一些,但是效果會很不明顯,所以我們可以大膽地把標題拉大一些。
▲上圖除了圖片很突出以外,各文字信息類別視覺表現上區分不明顯,層次不豐富。
?
03.區分的手法
? ? ? 不要太單調
想要畫面更吸引人,用于區分信息層級的修飾手法也要盡量豐富一點,在廣告設計或促銷海報設計中,這一點尤為重要。有些人設計的版面層級豐富,很有層次感,但是整體看起來有點單調,不精彩,很可能是因為他們使用的修飾手法太少、太單調了,比如下圖各類信息只有大小、字體(其實字體相差也不大)、筆畫粗細、色彩的區別,所以整體效果不是很出彩。
而在方案2中,我把部分文字的排版方向也做了變更,且加入色塊以突出某些信息,并把“fashion”的字體改為手寫體,使其與版面中的其他字體明顯的區隔開來。
修改完以后,用于區分層級關系的手法更多了,所以整個個畫面給人的感覺也比修改前要更豐富、更有設計感、更有細節。
01.位置區分
我們都知道在一個版面中,越靠上、靠左的位置,越容易吸引讀者的注意,反之亦然,所以左上角或垂直居中偏上的位置,常常用來排列標題,正文一般在版面正中央,版面底部常用來排列頁碼、注解、或者一些附加信息等,按這樣的方式把信息排列好,也能制造出簡單的層級關系。
02.大小區分
03.粗細區分
?
04.字體區分
不同的字體有不一樣的調性和視覺感受,所以把不同層級的信息使用不同的字體,也可以在視覺上將這些信息進行分類,從而提高讀者的閱讀效率,當然字體不要太多,最好為2-3種。在上圖的基礎上繼續加上字體的變化,層級區分是不是更加明顯了。
另外,不同字體的視覺沖擊力也不一樣,通常來說,字體筆畫較粗、較簡潔的字體,比筆畫細、復雜的字體具有更強的視覺沖擊力。
05.色彩區分
06.透明度區分
?
07.線框突出
08.造型區分
09.色塊突出
10.空間突出
11.直線突出
12.圖形突出
13.方向區分
14.質感區分
15.點線面區分
注:將筆畫比較粗、字號較大的文字描邊,填充設置為0,就可以將面轉化為線;把一句話的字間距加大到超出一個文字的寬度,就可以將線拆成點。
上面熙熙攘攘講了這么多,最后蔥爺用一個很接地氣的商業案例來總結一下,以下是長隆開園廣告的設計內容,要求設計一張1080xx2560的豎版電子屏海報。
從上圖中可以看出,除了圖片和二維碼以外,文字信息大概可以劃分為4-7個層級,所以,下面我們先將它們從位置、字體、大小、粗細這幾個方面進行層級劃分,如下圖:
?“特惠出游”是重要程度僅次于大標題的信息,所以也應該突出,但是突出效果不能蓋過大標題,所以我給他添加了一個象征優惠的飄帶線框。
?“開放時間”和“開放園區及酒店”的內容形式有點像,即小標題加內容,為了讓一個版面中的表現形式不至于太多、太花,所以我把這兩塊內容采用了同一種處理方式,小標題除了使用粗體以外,還在其左右增加了一個菱形的小圖形,而內文則使用了金色來與小標題的白色進行區分。
?“掃碼搶五一特惠”是引導大家掃畫面中的二維碼,所以這句話當然要與二維碼排在一起,為了再次突出“五一特惠”的字眼,這里還把它在字體粗細和顏色上與“掃碼搶”進行了區隔,并在它們底部增加了一個帶有箭頭的符號,加強其與二維碼的聯系。
??單塊信息加工完后,來看看它們在版面中的整體效果,從下圖可以看出,層級關系還是很豐富、很鮮明的,而且也很合理。
???截止目前版面還有點空,而且信息很散,缺乏設計感,所以我們可以用線框和直線將版面中的信息進行整合和區隔,設計成類似一個表格的形式。
一頭一尾(特惠出游和二維碼)還刻意做了打破,減弱表格的規矩感。
?
結語?
如果本篇文章對你有所幫助,給蔥爺點個贊吧,謝謝!
原文地址:站酷?
作者:蔥爺
轉載請注明:學UI網 » 講透排版中的層級關系