那些你不知道的社交Feed流圖片布局

本片文章介紹了三種Feed流中的圖片布局：宮格式布局、拼圖式布局、瀑布流式布局。

之前看了一篇文章：《Feed流設計：哪些謀殺你時間的APP》，通過Feed流可以讓用戶不停的刷信息，從而留住用戶更多的時間。在仔細研究你還會發現越來越多的APP都有Feed流，而且它們的圖片布局也不相同。

如果你沒有對其有深入研究，你根本不知道遇到這種頁面該如何設計。

下面通過查詢資料和對比不同的APP後，我將Feed流中的圖片布局總結起來有三種：

宮格式布局拼圖式布局瀑布流布局一、宮格式布局

宮格式布局也就是九宮格布局，多用在社交類的APP中，九宮格圖片不僅能放進去很多內容，同時也能很好地引起網友的關注。

從上面案列可以看出：宮格式圖片布局大多用於社交發布動態的Feed流中，雖然他們都採用宮格式的布局，不過當發布的是一張圖片，其呈現的狀態還是有所差異。

以微信朋友圈為例：

未對屏幕進行區分，但對只上傳一張圖片進行了特殊的處理，二張或二張以上的圖片寬 x 高以150為閥值，二邊都大於150時，以較小的一邊為基準進行等比縮放。

具體的圖片排列情況如下圖：

1. 當圖片為三張時，3、5位置對調，排成一行：1、2、3；

2. 二張時排一行，1、2，格子大小提前就已經佔好位置；

3. 單張圖片，如果0.5 < = 寬 / 高 <= 2 時，被限定在1—4格子的範圍大小（包括間距），也就是凡是寬高比在這個範圍時，最長的那邊暫兩個格子加間距；

4. 單張圖片，寬 / 高 > 2的圖片（如全景圖），最多佔三欄，高最多佔一欄（包括間距大小）；

5. 單張圖片，寬 / 高 < 0.5（如微博長圖），高最多佔二欄，寬度最小佔二欄1/3（包括間距）；

以上圖片適配規則適合大部分的社交類APP，其中略有不同的是，在單張圖片適配的時候，站酷採用了直接佔兩格的方式，這取決於，站酷的圖片質量本來相對較高，同時尺寸上沒有微信、微博、QQ空間這麼多。

二、拼圖布局

這種布局方式是將幾個圖片拼成一個矩形，樣式新穎類似雜誌的排版，因此也叫雜誌式布局，不過因為其對圖片的要求較高，因此多應用在圖片社交中。

如：in、Nice。

雖然in和Nice都採用了拼圖的方式，不過在圖片布局上稍有不同。下面我就用一個簡單的圖將兩個圖片布局方式進行對比：

從上圖對比看：in和Nice最大的不同就是in的大圖比例更大，同時排版時多採用大圖搭配小圖的方式。

Nice雖然也採用了拼圖布局，不過其還是偏於保守，在4張圖和9張圖樣式時，均採用宮格式的布局，同時在其他樣式中，拼圖中主要的圖片採用3：2的比例，相對in來說圖片展示性稍遜，但是其優點是在展示圖片的同時，手機一屏可以顯示更多的內容。

三、瀑布流布局

瀑布流式布局是比較流行的一種網站頁面布局方式。視覺表現為參差不齊的多欄布局，最早採用此布局的是網站是Pinterest，後逐漸在國內流行。

隨著移動網際網路的發展，這種瀑布流布局也被用在了UI界面設計中。瀑布流式布局下，用戶的視線軌跡以 Z型為主，這樣的軌跡易於閱讀。

但由於用戶採用「就近原則」 閱讀信息，容易產生漏讀現象 。

因此，瀑布流式的布局適於應用在社區類瀏覽型頁面中，這樣的頁面往往信息量大，採用瀑布流式布局瀏覽體驗更為流暢。

但缺點則是信息不能完全被關注，容易漏讀信息。

上圖可以看到：在圖片收集的花瓣和視頻類的YY都用到瀑布流的形式，其優勢就是讓用戶不停的刷，缺點就是用戶很容易漏掉信息，因此這種適合泛瀏覽類的頁面。

四、總結宮格式布局：適合圖片樣式較多，質量參差不齊的APP。如：微博、微信、QQ空間等。拼圖式布局：適合圖片質量較高，尺寸較為統一的APP。如：in、Nice等。瀑布流式布局：適合圖片尺寸不統一，同時屬於泛瀏覽類的APP。如：YY小視頻、花瓣發現等。

參考連結：

https://www.cnblogs.com/meteoric_cry/p/5975165.html 《社交應用動態九宮格圖片的規則》

https://www.jianshu.com/p/eb02be5b7fd7 《仿 Nice 首頁圖片列表 9 圖樣式 (iOS)》

http://www.woshipm.com/pd/773523.html 《那些謀殺你時間的Feed流》

 

作者：風箏KK，公眾號：海鹽社

本文由 @ 風箏KK 原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基於 CC0 協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}