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