圖文排版入門指南

作者：由設計師小灰發表于攝影時間：2020-07-08

本文主要跟大家分享一些在設計過程中，圖文排版需要注意的一些細節以及一些排版的小技巧~

圖文排版是個老生常談的話題，每一位設計師都具備一定的圖文排版能力。我們工作中幾乎天天都在排版，對於排版似乎是信手拈來，然而就是這樣的信手拈來，卻會讓不少初中級的設計師忽視掉很多排版的細節，做起設計來也毫無章法。

在這裡，我整理了一些在排版中值得注意的細節，和排版的小技巧，希望能夠對大家有所幫助。

一、保證文字的可讀性

在頁面中，文字是重要的資訊來源，所以保證可讀性，是文字排版中首要考慮的事情。影響文字可讀性的因素很多，但在眾多問題中，流暢的閱讀排版是保障可讀性的基礎。在排版中控制好文字的長度、字距、行距、段落與對齊方式，就能夠有效的提高可讀性。左圖中，文字成為了畫面的裝飾元素，忽視了文字本身所承載的資訊；而在右圖中，文字是一種功能，用來傳遞資訊。

二、文字與背景需要清晰區分

循白紙黑字、黑紙白字的原則，在深色的背景上採用亮色的字型一般能保證可讀性。字型過細、背景與文字對比度不夠、文字透明度過高等問題，都會造成文字與背景融為一體。存在諸如此類的問題都要針對性的去調整。

三、選擇風格合適的字型

選擇與頁面設計風格不搭的字型會帶來“違和”的感覺，會改變頁面的氣質，對資訊傳遞產生影響。要根據頁面的風格，去選擇與之氣質契合的字型，如粗體厚重、細體高冷。

如右圖中，有稜角的字型與畫面搭配，會有先鋒跟潮流的感覺出現。

四、控制字型型別數量

除了選擇風格合適的字型，也要控制字型型別數量，通常單個頁面內字型型別數量最好不超過3種。因為字型種類太多會讓頁面風格極其難統一，也容易出現上文所說的字型與頁面風格不搭。雖說字型型別數量沒有非要控制在3種以內，但太多的字型型別可控性很差也容易造成視覺干擾。

五、統一的對齊方式

統一的對齊會讓文字排版井然有序，閱讀起來會非常流暢。多種對齊方式，會使頁面混亂不堪。除了文字之間要保持統一的對齊方式之外，正文要儘量保持兩端對齊，這會關係到頁面是否整潔。

六、控制行間距

行間距是行與行的間距，行間距通常伴隨著字型大小而的變化，預設行間距會稍大於字型的大小，通常的這樣看起來會比較的擁擠。正文中，將行高設定成字號的1。6~1。8倍，將會是比較舒服的，如果版面緊張，可以適當設成1。2~1。5倍。

七、控制字間距

新手排版時，有時候會因為文字內容過長，而版式又受限，會選擇去壓縮字元間距的方式來達到控制文字長度的目的。其實這是一個容易被忽略的錯誤，因為字間距過於擁擠會降低文字的可讀性。

八、控制行長與字數

單行文字如果包含的字數太多，文字內容將會很難閱讀。原因在於，一是單行太長會導致閱讀時難以換行，二是單行字數太多容易造成閱讀疲勞。所以，合理的行長與字數會使使用者在行間跳轉時比較輕鬆，反之則會使閱讀成為一種負擔。

九、圖文排版的親密性

親密性在排版中的理解，通俗的來講就是我和你近，我們的關係就密切。圖文排版中的間隔大小，是影響親密性的主要因素。左圖中高度一致的間隔，會讓人產生困惑，對各個標題、正文與圖片的關係傻傻分不清楚，嚴重影響使用者閱讀體驗。

在右圖中，我們根據親密性原則，透過間距把相關的標題正文圖片分成了一組，這樣畫面中各元素之間的關係一目瞭然。

十、留白

通常設計的首要任務就是製造視覺焦點，吸引使用者的注意力。而留白能夠讓使用者儘快的尋找到所需要的資訊，提高使用者體驗。但隨意的空白並不是留白，留白時應該注意元素之間的連續性。

如左圖，雖留出了大量的空白，但是元素之間沒有太多的連續性，造成了主次不分，反而分散使用者注意力。而右圖中，透過對齊和調整間距，使頁面有了視覺焦點，同樣是留白，就會顯得更加協調。

十一、點綴元素的使用

有時候當我們感覺到畫面空曠時，就會習慣性的新增漂浮物或相關元素來填充畫面空白。這是很常見的方法，但這個方法容易導致畫面雜亂、失去視覺的焦點。

漂浮物的使用，有兩點需要遵循：

一是儘量的剋制，要謹記新增的漂浮物只是為畫面服務，不要過多的喧賓奪主；

二是選用的漂浮物要與畫面有所關聯，一切的設計都要有合理的來源。

十二、幾何填充

除了新增漂浮物，我們還可以選擇用點、線或者色塊等幾何形狀，去填充影響版面平衡的空白。當我們排版時，畫面出現了一塊比較突兀的空白，在我們暫時沒有辦法透過變換版式的方法解決問題時，可以考慮選用這個方式去掩蓋問題。

十三、底紋文字的應用

當頁面顯得單調，而我們又要做一個簡潔的設計時，選擇新增點綴或者漂浮物就會顯得不合時宜。這時候我們怎麼樣才能讓畫面豐富起來呢，很簡單，新增底紋文字。就是在背景上增加相關的英文單詞或文字，處理的時候需要注意顏色要淡，需要與背景有較好的融合而且要與文案錯開，不然會影響文字識別性。底紋文字的應用，好處在於保持畫面簡潔的同時又能豐富畫面。