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

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

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

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

1. 宮格式布局
2. 拼圖式布局
3. 瀑布流布局

一、宮格式布局

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

從上面案列可以看出：宮格式圖片布局大多用于社交發(fā)布動態(tài)的Feed流中，雖然他們都采用宮格式的布局，不過當(dāng)發(fā)布的是一張圖片，其呈現(xiàn)的狀態(tài)還是有所差異。

以微信朋友圈為例：

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

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

1. 當(dāng)圖片為三張時，3、5位置對調(diào)，排成一行：1、2、3；

2. 二張時排一行，1、2，格子大小提前就已經(jīng)占好位置；

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

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

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

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

二、拼圖布局

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

如：in、Nice。

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

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

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

三、瀑布流布局

瀑布流式布局是比較流行的一種網(wǎng)站頁面布局方式。視覺表現(xiàn)為參差不齊的多欄布局，最早采用此布局的是網(wǎng)站是Pinterest，后逐漸在國內(nèi)流行。

隨著移動互聯(lián)網(wǎng)的發(fā)展，這種瀑布流布局也被用在了UI界面設(shè)計中。瀑布流式布局下，用戶的視線軌跡以 Z型為主，這樣的軌跡易于閱讀。

但由于用戶采用“就近原則” 閱讀信息，容易產(chǎn)生漏讀現(xiàn)象 。

因此，瀑布流式的布局適于應(yīng)用在社區(qū)類瀏覽型頁面中，這樣的頁面往往信息量大，采用瀑布流式布局瀏覽體驗更為流暢。

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

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

四、總結(jié)

1. 宮格式布局：適合圖片樣式較多，質(zhì)量參差不齊的APP。如：微博、微信、QQ空間等。
2. 拼圖式布局：適合圖片質(zhì)量較高，尺寸較為統(tǒng)一的APP。如：in、Nice等。瀑布流式布局：適合圖片尺寸不統(tǒng)一，同時屬于泛瀏覽類的APP。如：YY小視頻、花瓣發(fā)現(xiàn)等。

參考鏈接：

https://www.cnblogs.com/meteoric_cry/p/5975165.html 《社交應(yīng)用動態(tài)九宮格圖片的規(guī)則》

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

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

作者：風(fēng)箏KK，公眾號：海鹽社

本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議