起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識那些你不知道的社交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格子的范圍大?。òㄩg距），也就是凡是寬高比在這個范圍時，最長的那邊暫兩個格子加間距；
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.aharts.cn/pd/773523.html 《那些謀殺你時間的Feed流》
作者：風箏KK，公眾號：海鹽社
本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
- 目前還沒評論，等你發揮！
