@研習(xí)設(shè)K先生?：我們都知道，文字與圖片是版面中重要的視覺元素，文字的排列決定了受眾的閱讀效果，而圖片則更容易吸引受眾的視線，而且在版面中，他們多數(shù)情況下都是一起出現(xiàn)的，所以說在我們的設(shè)計(jì)過程中，他們兩者之間的編排形式就很重要了。那么這個(gè)看似簡單的課題，又有哪些問題和細(xì)節(jié)是值得我們注意的？先來欣賞一些圖文混排的作品。

海報(bào)、DM、網(wǎng)頁、長圖、雜志、報(bào)紙等等媒介，都存在著大量圖文混排的應(yīng)用。

圖片與文字的距離

在我們進(jìn)行圖文混排的過程中，首先要注意的是圖片與文字的距離。圖片和文字放在一起的話，要么是文字說明圖片，要么是圖片表達(dá)文字的內(nèi)容，也就是他們之間的內(nèi)容是相關(guān)的，如果距離沒有控制好，就會給讀者帶來閱讀障礙。

來看一個(gè)小例子，如果版面中只有一張圖片和一組文字，那么他們之間的距離只要不離得太近或太遠(yuǎn)，在保證美觀度的情況下，都可以接受。

不過他們的距離特別近，就像現(xiàn)在這樣，幾乎貼在一起了或者特別遠(yuǎn)的情況，中間還沒有其他的符號進(jìn)行裝飾，看起來就不是那么沒美觀了。

正常情況下，如果我們以文字作為參照物，一行文字的高度為1X，那么文字和圖片的距離保持在一個(gè)文字的高度。

或者1.5X，包括兩個(gè)字的高度都沒問題，看起來還是比較舒服的，這是在一張圖片和一段文字的情況下。

在版面中出現(xiàn)了兩組或兩組以上的圖文組合，這個(gè)時(shí)候我們就不能單純的考慮一組圖文的距離了。

橫排忽視距離的效果就會變成這樣。

現(xiàn)在版面中的這兩組圖文，間隔距離如果太近，同樣會造成版面混亂，信息傳遞不清晰，我們很難分辨出哪段文字是解釋哪張圖形的。當(dāng)這兩組圖文的間隔距離加大，他們的關(guān)系就很明確了。版式設(shè)計(jì)的目的就是美觀、清晰、快速的向外傳遞信息，盡量不要給讀者的閱讀設(shè)置這種障礙。

圖片與文字的布局

距離這塊搞懂了，再來了解一下圖片與文字的布局。在版式設(shè)計(jì)的過程中，圖片與文字的布局也同樣重要，我們不能單純的為了美觀，而忽視了文字的可讀性。

比如版面中的這三組圖文混排的信息，在正常情況下我們會根據(jù)版面的尺寸，設(shè)計(jì)成這兩種常規(guī)的形式。不過這些形式，有的同學(xué)會覺得這樣太普通了，想做點(diǎn)變化。

做了變化以后，再來看這種布局形式，同樣很美觀，很漂亮，但是文字與圖片之間的聯(lián)系就很模糊了，閱讀的順序讓人摸不到什么規(guī)律，所以說這是一個(gè)形式上美觀但功能性很弱的設(shè)計(jì)。

如果你就是想設(shè)計(jì)成這種形式的話，那么在圖片與文字的組合之間，加入線來進(jìn)行分割，才能緩解這個(gè)問題。

除了用線來做分割，解決這個(gè)問題的方式還有很多。比如同樣是使用線條，我們還可以使用線的連接功能，將文字和其所對應(yīng)的圖片聯(lián)系到一起，提醒受眾，這段文字是用來解釋這張圖片的。

另外，我們還可以使用序號的標(biāo)注，來強(qiáng)化提示文字與圖片的聯(lián)系。

包括利用位置關(guān)系，將版面中圖片、文字相對應(yīng)，也可以很自然的把他們聯(lián)系到一起，這些都是圖文混排做變化，又不會影響閱讀體驗(yàn)的小技巧。

再來看這個(gè)組合的形式，版式上看似沒什么問題，但是這種把圖片插在了段落文字中間的方式盡量不要使用。因?yàn)閳D片出現(xiàn)在這個(gè)位置會阻礙我們正常的視覺流動，讀者在閱讀這一整段信息的節(jié)奏會被打亂，產(chǎn)生不連貫的感覺，所以說這也是一個(gè)錯(cuò)誤的案例。

換成豎排的文字，道理也一樣，圖片的布局要在不阻礙我們視線流動的基礎(chǔ)上編排。

圖片與文字的統(tǒng)一

在圖文混排的版面中，還需要注意這兩種視覺元素的協(xié)調(diào)統(tǒng)一，統(tǒng)一的重要性在以前的內(nèi)容里講過了，它直接影響著整個(gè)版面的視覺效果。因此我們就應(yīng)該想辦法，盡量減少圖片與文字之間不協(xié)調(diào)的感覺。

如果是文字量較多的段落文字，那么這種文字與圖片寬度一致的方式屬于統(tǒng)一性最強(qiáng)的。左右結(jié)構(gòu)的話，最好也要保證他們的高度是一致的，這是秩序。

單純的搞成這樣，肯定是不舒服的。

要是文字量較少的標(biāo)注、注解文字，我們保證文字信息與圖片的對齊就可以。左對齊、右對齊、居中對齊都很舒服。

如果文字的位置放在這種不左不右不居中的位置，想做統(tǒng)一就比較困難了。

圖片中文字的處理

在完整的圖片內(nèi)部加入文字信息的時(shí)候，文字信息一般都起到解釋圖片的作用，圖片與文字做比較，圖片相對更重要，是主體，這樣的話我們做類似設(shè)計(jì)的時(shí)候就要注意文字不能搶了圖片的風(fēng)頭、破壞圖片的完整性。

文字與圖片重疊，文字不要壓住圖片中重點(diǎn)展示的位置，最吸引人的位置被壓住了。結(jié)果就是現(xiàn)在這樣，文字破壞了圖片的美觀度，阻礙了圖形向外傳遞信息的速度。

如果文字是放在這幾個(gè)地方，就完全沒有問題，文字解釋圖片。

這張圖片，當(dāng)文字被安排在綠葉的位置，它的顏色再使用綠色就不太合適了，和圖片這個(gè)區(qū)域的顏色太過接近，文字識別性變得很差。把文字換成白色，與圖片進(jìn)行區(qū)隔，就不會出現(xiàn)這個(gè)問題。

當(dāng)然了，上面提到的是用文字來解釋圖形，如果我們用圖形作為背景來說的話，他們的主次關(guān)系反轉(zhuǎn)了，這就是另一回事了。

案例演示

這是我們?yōu)檫@節(jié)課設(shè)計(jì)的案例，整個(gè)版式的形式，主要就是由圖片與文字的混排構(gòu)成的。里面在細(xì)節(jié)方面的控制，也都是遵循了我們前面的內(nèi)容所提到的知識點(diǎn)，不管是整體的美感還是傳遞信息的方式都很舒服。

比如前面提到的圖片與文字的距離問題，不遠(yuǎn)不近，正好合適。這里兩組圖文的間隔距離加大，也是為了不給讀者的閱讀增加負(fù)擔(dān)。

當(dāng)文字出現(xiàn)在圖片內(nèi)部的時(shí)候，注解類的文字不能壓住圖片中重點(diǎn)展示的位置。

包括前面講過的其他注意事項(xiàng)，我們在欣賞優(yōu)秀作品的時(shí)候都可以去有意識的觀察，看看別人在做圖文混排的時(shí)候是不是這樣處理的。注意并理解了這些知識點(diǎn)以后，把他們應(yīng)用到自己的設(shè)計(jì)過程中，這也是我們學(xué)習(xí)、提升的過程。

總結(jié)

來總結(jié)一下今天的內(nèi)容，在我們進(jìn)行圖文混排的時(shí)候要注意控制好圖片與文字的距離，不要給讀者設(shè)置障礙，圖片與文字的布局不能為了美觀而破壞文字的識別性，注意圖片與文字的統(tǒng)一性，如果文字在圖片中，文字不能破壞圖片的完整性，顏色也需要有對比。

歡迎關(guān)注研習(xí)設(shè)的微信公眾號：「Yanxishe2017」