詳解網頁圖文組合的三種布局方式

今年6月份的那次微信大改版相信大家都還記得，訂閱號的消息可以直接通過消息列表來進行瀏覽，而不再需要進入訂閱號里面了，如下圖(左)。那次改版讓好多做公眾號的可是叫苦連天，一不小心自己的文章就被別的公號頂了，流量受到了很大的影響�？赡苁鞘盏搅斯�眾號用戶的反饋，微信又在9月的一次改版中“偷偷摸摸”的把訂閱號列表的樣式改了，如下圖(右)。雖然沒有改回以前的樣式(因為直達閱讀對于讀者來講太方便了)，但可以看出通過對圖文組合的布局優化，一屏可以多顯示一條消息了，公號內容也就多了一次被閱讀的機會。那今天我們暫且不討論微信的第一次改版是否合理，我們就第二次改版的圖文布局優化來講一講，不同的圖文布局方式各有什么優劣，該如何選擇。

圖文組合的布局大致可歸納為三類，即上下排列、左右排列、以及圖文混排。由于各個產品中業務的訴求不同，所以用戶所關注的內容也不同，這就決定了信息的優先級排布也不盡相同。所以沒有通用的布局，只有適合的布局。下面我們就三種布局方式與大家簡單分析一下。
目錄
一. 上下排列
二. 左右排列
三. 圖文混排
上下排列
上下排列就是指圖片和文字在垂直方向上排列，其中比較常見的有上圖下文(大圖)、上圖下文(多圖)以及上文下圖。

1、上圖下文（大圖）
大圖模式下的上圖下文更強調了圖片的重要性。首先大面積圖片本身的視覺沖擊力就大于文字信息，再者根據從上至下的瀏覽習慣圖片也是先于文字展現在用戶眼前。正因為如此，這對于圖片質量的要求也就更高了，如果無法保證圖片的質量，會大大影響整個頁面的美觀，從而影響到用戶對產品的定位。如下圖，站酷的首頁推薦，作為一個設計平臺的作品展示頁面，圖片的重要程度自然不言而喻。而這些作品的封面都有站酷小編參與把控，所以也不需要擔心圖片質量無法保證。

而愛彼迎的房源我們可以把它當作是“住宿”商品，圖片對于用戶來說可是商品最直觀的印象。
另外，因為這種布局方式下文字信息是與圖片同寬的，有足夠的展示區域，所以也不用擔心文字信息的完整度受到影響。倒是版面效率是值得注意的地方，大圖展示勢必帶來信息條數的減少，因此，圖片的高度不宜太高，寬高比控制在4:3至2:1之間較為合理。上面兩個例子中，站酷的圖片比例是4:3，愛彼迎的圖片比例是3:2，在750*1334的屏幕下可以看到第二條信息的大部分圖片。如果對一屏信息展示率有嚴格要求的產品，不建議采用這種布局方式，可以考慮我們接下來講的多圖模式。
2、上圖下文（多圖）
多圖模式是指一行展示2-3張圖片，常見于視頻、電商類的產品。在分析過大圖模式之后，多圖模式與之的區別也就顯而易見了。隨著圖片的變小嚴重影響了文字信息的完整度，我們之前說過，文字信息一般與圖片寬度(也就是內容模塊寬度)相等，在單行字數較少的情況下，過多的行數是不利于閱讀的，因此所能展示的文字信息也就變少了。為了能夠傳達足夠的信息，就需要一目了然的圖片，或者在圖片中加上文字信息，無論哪種都對圖片質量有很高的要求(注意：這兒的圖片質量要求，不僅僅是指精美程度，還包括定制化的程度)。最后，也是最重要的一點區別就是多圖模式下，版面效率至少提高了一倍。如下圖：

可以看到在手淘的瀑布流布局下，文字信息缺失的較多，不得不通過在圖片中放置更多的文字信息來彌補；而網易嚴選則是用一目了然的商品圖來傳達信息。這種布局方式下，可以展示更多的信息條數，版面效率相比于大圖模式提高了不少。電商類產品需要通過更多的對比來讓用戶挑選自己需要的商品，所以這種布局方式非常適用。
3、上文下圖
上文下圖相比于之前的兩種布局方式，則是提高了文字信息的重要程度。當然，由于圖片的視覺沖擊力依然存在，所以只能說是圖文同樣重要。上文下圖常見于資訊、個人動態的頁面中，圖片多是采用文中配圖或是用戶上傳，所以圖片的質量也就無法保證。而文字信息完整度則由于這種布局方式下文字的重要度決定了它的完整度幾乎不可能缺失。在版面效率上，資訊類頁面依然由圖片的寬高比所決定，個人動態類頁面則由文字內容的長短和圖片的高度共同決定。如下圖：

無論是微信的訂閱號消息還是微博，圖文同時存在的時候，文字的重要程度都不會低于圖片。
左右排列
左右排列是指圖片和文字在水平方向上排列，其中有左圖右文和左文右圖兩種布局方式。

1、左圖右文
左圖右文同樣因為圖片的視覺沖擊力和從左至右的瀏覽習慣，強調了圖片的重要性。但相比于大圖模式的上圖下文，由于圖片的變小，版面效率有所提高。而相比于多圖模式的上圖下文，同樣因為圖片的變小變窄使得文字信息有了更多的展示空間，能夠更有效的傳達信息，也因此對圖片的質量要求沒有那么高了。如下圖：

同樣是手機淘寶的商品列表，左圖右文可以展示更多的商品描述信息。此外，我們還可以發現，在圖片大小差不多的情況下，左右排列沒有多圖模式的上下排列展示的信息條目數多。也就是說，如果不縮小圖片，左右排列的版面效率并不算很高。