無論是網(wǎng)頁還是App，圖片與文字總是相輔相成地出現(xiàn)在主要界面中，無論是左圖右文，上圖下文，還是圖文重合，它們之間都有著千絲萬縷的關(guān)系，構(gòu)成了UI設(shè)計最基本的要素。
下圖是某新聞類App常用的右圖左文的列表界面，雖然只是簡單的排版：僅有圖片、標(biāo)題和描述性文字三種元素，其中卻包含了極其豐富的細節(jié)，運用了多種版式設(shè)計的原則，本文將通過這個案例來一一拆解，徹底搞定圖文混排這件事兒！
親疏性
該界面的左右邊距為40px，圖片距離標(biāo)題20px，這是非常典型的疏遠與親密距離。標(biāo)題字號為32px，其行距為16px，即1.5倍，（文字排版1.5-2倍為最佳行間距）標(biāo)題與描述間的距離為40px，與標(biāo)題行距也形成了疏遠和親密距離。
根據(jù)親密性原則來組織復(fù)雜信息，將彼此相關(guān)的元素靠近，歸組在一起形成從屬關(guān)系，接著遠離不相關(guān)的元素，這樣才可以清晰地區(qū)分每一組信息，大大提高可讀性。圖片和標(biāo)題更近，它引導(dǎo)用戶的視線流呈水平方向；而如果拋開親密性原則，圖片和標(biāo)題的距離與邊距相同，就會因為圖片的視覺占比最大，導(dǎo)致用戶的視線流呈垂直方向。
接著我們試著將標(biāo)題與描述文字的親密性原則也打破，發(fā)現(xiàn)相同的大行距會導(dǎo)致兩行標(biāo)題不再連貫，而是給人獨立的兩個標(biāo)題的錯覺；而相同的小距離行距則導(dǎo)致排版過于緊湊，可讀性隨之變差。
對比性
當(dāng)你遇到一些排版混亂，可讀性比較差的界面，你的視線就不知道集中在哪兒，為什么會有這種情況的發(fā)生呢？都是因為界面內(nèi)容對比不明顯造成的。重要信息和次要信息需要有非常強烈的大小、輕重對比，才會讓瀏覽者的視線聚焦在主要內(nèi)容上，從而獲取有用信息。
本文里的這個案例就通過標(biāo)題與描述文字字體粗細、字號大小、顏色進行了對比，把最有用的信息直觀地呈現(xiàn)在用戶面前。在這里，標(biāo)題是吸引用戶關(guān)注的關(guān)鍵，而下面的閱讀量只是作為資訊熱度的參考的輔助性信息，畢竟很少有人會因為閱讀量高而點開一篇連標(biāo)題都不感興趣的文章吧。如果不講究對比，標(biāo)題與輔助性文字同樣粗細、大小，閱讀視線就會情不自禁地被輔助信息所干擾。
規(guī)則性
簡潔的設(shè)計讓界面有著良好的呼吸與秩序感，大間距或是無分割線的設(shè)計，可以減少對視覺的干擾，讓用戶的瀏覽變得輕松?？疾旖缑娴脑O(shè)計尺寸，我們會發(fā)現(xiàn)該界面以20px為單元進行柵格設(shè)計：左右邊距為40px，上下圖片的間距是40px，圖片與標(biāo)題間距是20px，圖片的尺寸是200*140px，這些統(tǒng)統(tǒng)都是20的倍數(shù)，簡單的規(guī)則是美的，同時也提高了設(shè)計工作的效率。
但這里需要把握好一個度，過小的行距會讓所有列表擠成一團，而行距過大，頁面就會顯得松散，同時也會降低瀏覽效率。因此恰到好處的間距和留白才能讓信息層級變得清晰明了，要做到這一點就需要大家日常不斷地練習(xí)來積累經(jīng)驗。
平衡性
圖文左右排列讓列表在視覺上保持了一定的平衡性，帶給用戶心理上的和諧感。在本文的案例中，標(biāo)題與輔助性文字都沒有頂格，沒有與圖片上下齊平，而是留有了一定的空隙。（如下左圖所示）這又是為什么呢？
原來是因為這里沒有分割線來區(qū)隔行，而圖片是規(guī)則的矩形，更容易成為視覺的重心，通過圖片水平方向延伸建立起一個視覺矩形，在此矩形內(nèi)部的內(nèi)容與之形成從屬關(guān)系。如果標(biāo)題和描述性文字與圖片上下齊平，就會感覺文字要溢出來，脫離與圖片的從屬關(guān)系。還有另外一個更小的細節(jié)是：標(biāo)題上方與圖片的間距要比描述文字下方與圖片的間距大一些，那是因為標(biāo)題本身字號更大的關(guān)系，正如字號越大它默認的行間距也越大，如果小字號也使用同樣的間距就會顯得不協(xié)調(diào)。
上面講的平衡關(guān)系精髓全在細節(jié)，掌握這些細節(jié)設(shè)計才能讓你的界面更加精致，脫穎而出。
合理性
最后要講講這個案例為什么采用了右圖左文，這樣更合理嗎？還是左圖右文也可以。我們在設(shè)計圖文列表的時候常常就會有這樣的選擇困擾，如果拿市面上成熟的App作參考，不同的產(chǎn)品也往往會有不同的選擇，這里面到底有什么規(guī)律呢？
要解決這個問題，就得考慮到人的閱讀習(xí)慣。我們知道人閱讀時視線往往是從左至右、從上至下的順序，那么不言而喻，應(yīng)該把重要的內(nèi)容放左側(cè)。同時考慮到使用移動設(shè)備的場景，我們通常是右手持手機瀏覽，在上下滾動屏幕時右手拇指有時會遮擋屏幕的右側(cè)邊緣，因此把次要的內(nèi)容放在右側(cè)更為合適。
對新聞資訊類App來說，圖片所透露出來的信息沒有文字標(biāo)題那樣快速直接，因此圖片就處在次要位置。相反的，標(biāo)題才是吸引用戶點擊進去的關(guān)鍵因素，因此在這里右圖左文比左圖右文更為合適。
在電商類應(yīng)用中，相比產(chǎn)品名稱、介紹性文字、價格等，產(chǎn)品圖片能夠直觀地展示產(chǎn)品的外觀、尺寸、顏色等信息，這些都是用戶最先關(guān)心的要素。因此電商類App如天貓采用了左圖右文的排版方式。鳳凰新聞是資訊類應(yīng)用，因此采用了右圖左文的排版方式，讓用戶首先關(guān)注到文字內(nèi)容。
總結(jié)一下：
本文用了一個右圖左文的案例來拆解圖文排版的要點，既要關(guān)注排版的基本原則：利用親疏與對比性原則來構(gòu)建清晰的視覺層級結(jié)構(gòu)，同時可以采用柵格系統(tǒng)讓間距規(guī)則變得簡單而統(tǒng)一，而在細節(jié)處我們還要關(guān)注視覺平衡性，當(dāng)然在大的方面更需要清楚在什么樣的場景下，怎樣處理圖文位置關(guān)系才最為合理。
只有同時做到以上幾點，才能讓看似簡單的圖文頁面布局清晰而合理。掌握這些原理后，還需大量的日常練習(xí)與思考，并由此運用到更多如：上圖下文、圖文重合的場景中，才算是真正將圖文排版這個技能做到了舉一反三、運用自如。
