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

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

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

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

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

一、宮格式布局

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

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

以微信朋友圈為例：

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

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

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

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

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

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

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

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

二、拼圖布局

這種布局方式是將幾個(gè)圖片拼成一個(gè)矩形，樣式新穎類似雜志的排版，因此也叫雜志式布局，不過(guò)因?yàn)槠鋵?duì)圖片的要求較高，因此多應(yīng)用在圖片社交中。

如：in、Nice。

雖然in和Nice都采用了拼圖的方式，不過(guò)在圖片布局上稍有不同。下面我就用一個(gè)簡(jiǎn)單的圖將兩個(gè)圖片布局方式進(jìn)行對(duì)比：

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

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

三、瀑布流布局

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

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

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

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

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

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

四、總結(jié)

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

參考鏈接：

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

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

http://www.codemsi.com/pd/773523.html 《那些謀殺你時(shí)間的Feed流》

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

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

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