今年6月份的那次微信大改版相信大家都還記得怒炸，訂閱號的消息可以直接通過消息列表來進行瀏覽瞬测，而不再需要進入訂閱號里面了，如下圖(左)灯蝴。那次改版讓好多做公眾號的可是叫苦連天孝宗，一不小心自己的文章就被別的公號頂了，流量受到了很大的影響问潭〗泼Γ可能是收到了公眾號用戶的反饋，微信又在9月的一次改版中“偷偷摸摸”的把訂閱號列表的樣式改了灾茁，如下圖(右)北专。雖然沒有改回以前的樣式(因為直達閱讀對于讀者來講太方便了)，但可以看出通過對圖文組合的布局優(yōu)化语婴，一屏可以多顯示一條消息了驶睦，公號內容也就多了一次被閱讀的機會。那今天我們暫且不討論微信的第一次改版是否合理菜职，我們就第二次改版的圖文布局優(yōu)化來講一講旗闽，不同的圖文布局方式各有什么優(yōu)劣适室，該如何選擇举瑰。
圖文組合的布局大致可歸納為三類此迅，即上下排列、左右排列耸序、以及圖文混排坎怪。由于各個產品中業(yè)務的訴求不同，所以用戶所關注的內容也不同嘁酿，這就決定了信息的優(yōu)先級排布也不盡相同。所以沒有通用的布局娱仔，只有適合的布局游桩。下面我們就三種布局方式與大家簡單分析一下。
目錄
一. 上下排列
二. 左右排列
三. 圖文混排
上下排列
上下排列就是指圖片和文字在垂直方向上排列恩溅，其中比較常見的有上圖下文(大圖)谓娃、上圖下文(多圖)以及上文下圖滨达。
1、上圖下文（大圖）
大圖模式下的上圖下文更強調了圖片的重要性锌订。首先大面積圖片本身的視覺沖擊力就大于文字信息画株，再者根據從上至下的瀏覽習慣圖片也是先于文字展現在用戶眼前谓传。正因為如此，這對于圖片質量的要求也就更高了紧卒，如果無法保證圖片的質量诗祸，會大大影響整個頁面的美觀，從而影響到用戶對產品的定位博个。如下圖际乘，站酷的首頁推薦，作為一個設計平臺的作品展示頁面罪塔，圖片的重要程度自然不言而喻征堪。而這些作品的封面都有站酷小編參與把控，所以也不需要擔心圖片質量無法保證庸娱。
而愛彼迎的房源我們可以把它當作是“住宿”商品谐算，圖片對于用戶來說可是商品最直觀的印象。
另外斤儿，因為這種布局方式下文字信息是與圖片同寬的恐锦，有足夠的展示區(qū)域，所以也不用擔心文字信息的完整度受到影響一铅。倒是版面效率是值得注意的地方，大圖展示勢必帶來信息條數的減少肮之，因此局骤，圖片的高度不宜太高暴凑，寬高比控制在4:3至2:1之間較為合理赘来。上面兩個例子中现喳，站酷的圖片比例是4:3，愛彼迎的圖片比例是3:2犬辰，在750*1334的屏幕下可以看到第二條信息的大部分圖片嗦篱。如果對一屏信息展示率有嚴格要求的產品，不建議采用這種布局方式幌缝，可以考慮我們接下來講的多圖模式灸促。
2、上圖下文（多圖）
多圖模式是指一行展示2-3張圖片，常見于視頻浴栽、電商類的產品荒叼。在分析過大圖模式之后典鸡，多圖模式與之的區(qū)別也就顯而易見了被廓。隨著圖片的變小嚴重影響了文字信息的完整度祟敛，我們之前說過赌朋，文字信息一般與圖片寬度(也就是內容模塊寬度)相等，在單行字數較少的情況下扭吁，過多的行數是不利于閱讀的球碉，因此所能展示的文字信息也就變少了蜓斧。為了能夠傳達足夠的信息，就需要一目了然的圖片睁冬，或者在圖片中加上文字信息法精，無論哪種都對圖片質量有很高的要求(注意：這兒的圖片質量要求，不僅僅是指精美程度痴突，還包括定制化的程度)搂蜓。最后，也是最重要的一點區(qū)別就是多圖模式下辽装，版面效率至少提高了一倍帮碰。如下圖：
可以看到在手淘的瀑布流布局下，文字信息缺失的較多拾积，不得不通過在圖片中放置更多的文字信息來彌補殉挽；而網易嚴選則是用一目了然的商品圖來傳達信息。這種布局方式下拓巧，可以展示更多的信息條數斯碌，版面效率相比于大圖模式提高了不少。電商類產品需要通過更多的對比來讓用戶挑選自己需要的商品肛度，所以這種布局方式非常適用傻唾。
3、上文下圖
上文下圖相比于之前的兩種布局方式承耿，則是提高了文字信息的重要程度冠骄。當然，由于圖片的視覺沖擊力依然存在加袋，所以只能說是圖文同樣重要凛辣。上文下圖常見于資訊、個人動態(tài)的頁面中职烧，圖片多是采用文中配圖或是用戶上傳扁誓，所以圖片的質量也就無法保證防泵。而文字信息完整度則由于這種布局方式下文字的重要度決定了它的完整度幾乎不可能缺失。在版面效率上蝗敢，資訊類頁面依然由圖片的寬高比所決定择克，個人動態(tài)類頁面則由文字內容的長短和圖片的高度共同決定。如下圖：
無論是微信的訂閱號消息還是微博前普，圖文同時存在的時候肚邢，文字的重要程度都不會低于圖片。
左右排列
左右排列是指圖片和文字在水平方向上排列拭卿，其中有左圖右文和左文右圖兩種布局方式骡湖。
1、左圖右文
左圖右文同樣因為圖片的視覺沖擊力和從左至右的瀏覽習慣峻厚，強調了圖片的重要性响蕴。但相比于大圖模式的上圖下文，由于圖片的變小惠桃，版面效率有所提高浦夷。而相比于多圖模式的上圖下文，同樣因為圖片的變小變窄使得文字信息有了更多的展示空間辜王，能夠更有效的傳達信息劈狐，也因此對圖片的質量要求沒有那么高了。如下圖：
同樣是手機淘寶的商品列表呐馆，左圖右文可以展示更多的商品描述信息肥缔。此外，我們還可以發(fā)現汹来，在圖片大小差不多的情況下续膳，左右排列沒有多圖模式的上下排列展示的信息條目數多。也就是說收班，如果不縮小圖片坟岔，左右排列的版面效率并不算很高。
2摔桦、左文右圖
左文右圖與前者最大的差別就是提高了文字信息的重要程度社付。相應的，由于圖片重要度的降低酣溃，圖片質量要求和圖片大小也會有所降低瘦穆，所以版面效率也會大大提高。這類布局常見于資訊類產品赊豌。如下圖，UC頭條绵咱，首頁都是一些新聞碘饼，文字所傳達出來的信息重要度遠高于圖片熙兔。
同時，因為圖片的重要度不高艾恼，所以縮小了圖片的尺寸住涉，從而提高了版面效率。
左圖右文和左文右圖也是平時大家爭論的比較多的點钠绍。簡單來說舆声，如果描述的是一樣東西，那么圖片重于文字柳爽，采用左圖右文媳握；如果描述的是一件事，那么文字重于圖片磷脯，采用左文右圖蛾找。
圖文混排
圖文混排是指文字在Z軸方向覆蓋于圖片之上。為了適應多變的圖片赵誓，我們會在圖片與文字之間加上一個圖層以提高文字的辨識度打毛，或者對圖片做一些優(yōu)化以使文字突出。常見的有半透明遮罩俩功、無遮罩和漸變蒙層三種方式幻枉。
1、半透明遮罩
半透明遮罩由于全部覆蓋住圖片诡蜓，所以文字的重要度顯然是大于圖片的展辞。同樣因為全部覆蓋，所以圖片的質量要求也就沒有那么高了万牺。如下圖罗珍，好奇心日報中的幾個專題，專題名稱及專題描述的重要度遠高于圖片脚粟。
2覆旱、無遮罩
無遮罩就是對圖片做一些優(yōu)化使圖片與文字相互獨立開來核无，且常使用文字左上-圖片右下的對角線布局扣唱，由此可見文字信息與圖片同樣重要。但這就要求圖片必須是定制的团南，否則圖文可能會互相干擾噪沙。此外，由于圖片部分沒有遮罩吐根，對圖片的精美度要求相比于半透明遮罩也更高了正歼。如下圖：美團的專題模塊就采用了這種圖文混排無遮罩的形式，美食旅游類產品相比于資訊話題類產品拷橘，更需要圖片來傳達信息局义。
3喜爷、漸變蒙層
漸變蒙層則只是遮蓋住圖片部分，由此可見圖片的重要度相比半透明遮罩是有所提高的萄唇。同樣檩帐，因為非全部覆蓋，所以對圖片的質量有一定的要求另萤。如下圖：
愛奇藝的首頁推薦banner中湃密，都是一些熱播劇。一個劇集相對來說海報的重要度肯定是高于文字的四敞，所以采用這種部分遮蓋的內陰影形式泛源，并且將漸變蒙層和文字置于圖片底部，進一步突出圖片的重要性目养。當然俩由，如果文字也相對比較重要的話，可以將漸變蒙層和文字置于圖片頂部癌蚁，就與上圖下文和上文下圖的區(qū)別一樣幻梯。如下圖：
最新版的微信訂閱號消息列表，由于是資訊類信息努释，所以將同樣重要的文字置于圖片頂部碘梢。
那么無論是半透明遮罩、無遮罩還是漸變蒙層伐蒂，都是將文字置于圖片內部煞躬，其目的都是為了節(jié)省空間，提高版面效率逸邦。而過多的文字信息也會干擾圖片信息的傳達恩沛，所以文字信息完整度也會有所欠缺。
總結
通過上面的分析缕减，我們可以總結出這幾種布局方式在四個維度上的差別：圖文重要傾向雷客、圖片質量要求、文字信息完整度桥狡、版面效率搅裙。(注意：圖片質量要求包括精美程度以及定制化程度)
（點擊查看大圖）
因此，我們可以根據以上四個維度來選擇合適的布局方式裹芝。
