你知道產品圖片列表，採用什麼佈局最好嗎？
產品列表是使用者挑選商品，決定是否購買或使用的關鍵頁面，合理的佈局方案不僅能提升使用者的視覺體驗，同時還能提高使用者的操作體驗，從而促進使用者買單。
產品列表採用什麼樣的佈局方案才是有效的呢？
我們不能拋開產品單獨分析，而是需要根據你的產品數量、使用者需求、產品目的等多方面來確定。不過最重要的在此之前我們還需要知道有哪些佈局方案。
下面我總結了六大布局：
下面為了方便大家分析對比，我將對這六大布局進行分析，同時從圖片細節展示、承載產品數多少、商品資訊對比強弱、趣味性和新鮮感這四個決定採用何種佈局方案的點進行評分。
列表佈局
列表佈局也就是我們常見的圖文列表，一個列表垂直呈現多個連續的行元素。列表佈局重在文字內容，由於圖片尺寸較小，因此圖片細節展示不豐富。最常見的使用場景就是電商、團購類列表，如：淘寶、大眾點評等。
其優勢是，由於列表佈局遵循自上而下的閱讀模式，因此有利於商品資訊的對比，同時一屏可展示產品數較多。但是其趣味性和新鮮感較差，因此瀏覽時間過長會出現視覺疲勞。
如圖：
以大眾點評為例：其圖片直接採用產品圖，質量較低而且統一性不強。同時針對團購類的產品，我們需要快速瀏覽檢視每個列表的資訊，從而針對優惠資訊進行對比，因此採用列表佈局較為適合。
以淘票票為例：圖片主要起到視覺引導的作用，而使用者需要看的就是打折的詳細資訊，因此採用列表佈局有利於商品的對比使用。
綜上，如果滿分是五顆星，那麼列表的圖片細節展示較差為2顆星；承載產品數多為5顆星；商品資訊對比強為5顆星；趣味性和新鮮感低為2顆星。
什麼時候使用？
當你的產品圖片質量不高，產品數量較多，你的產品需要通過優惠資訊、價格引數等來進行對比，另外對介面效果要求較低時，我們可以採用列表佈局。
大圖網格佈局
大圖網格佈局，也就是指一行只展示一張圖片，由於其圖片佔比較大，因此往往一屏只能展示1到2張，圖片細節能夠清晰展現，使用者可直接根據圖片進行商品對比。最常見的使用場景就是以圖片為主的APP推薦列表，例如：愛彼迎、螞蟻短租、懶人週末等。
相比於列表佈局，大圖佈局頁面空間的消耗大，一屏可展示內容少，不利於資訊的查詢和對比，同時視覺效果較好，因此適合以圖片為主的產品，同時多用於商品數量較少或推薦列表中。
如圖：
以螞蟻短租和懶人週末為例，雖然他們一個是短租類APP，一個是生活類APP。其共同點是他們的圖片都是經過專人編輯，圖片質量較高，同時對介面視覺要求較高，採用大圖佈局可展示更多的細節，幫助使用者篩選對比，提升整體的介面效果。
綜上，如果滿分是五顆星，那麼大圖網格佈局的圖片細節展示豐富為5顆星、承載產品數少為2顆星、商品資訊對比弱為2顆星、趣味性和新鮮感較高為4顆星。
什麼時候使用？
當你的產品數量較少，圖片有專人維護，同時從產品屬性上看，使用者需要通過圖片來進行對比時，我們就可以採用大圖展示，大圖展示往往視覺效果好，多用於圖片類、租房類、商品推薦等列表中。
兩列網格佈局
兩列網格佈局也就是將螢幕一分為二，圖片和文字進行上下展示，類似一個網格，瀏覽次序類似一個Z字，因此產品都能均衡的被使用者看到。例如：天貓、嚴選等商品列表。
相比於大圖展示，一屏可展示更多的商品，有利於資訊的對比，相對於列表佈局，兩列網格佈局更適合使用者目標不明確或者以圖片為主的產品。
如圖：
以in和嚴選為例：雖然他們分別為圖片社交類和電商類，但其目的都是讓使用者通過圖片選擇自己感興趣的內容。從產品細節展示來說，比列表佈局更豐富；從產品資訊對比來說，比大圖更便捷。因此目前兩列網格佈局應用較為廣泛。
綜上，如果滿分是五顆星，那麼兩列網格佈局的圖片細節展示一般為3顆星；承載產品數較多為4顆星；商品資訊對比較強為4顆星；趣味性和新鮮感一般為3顆星。
什麼時候使用？
如果你的產品是以圖片對比為主，同時又不需要大圖展示時，即可採用該佈局進行設計。兩列網格佈局往往和列表佈局會一起使用。
兩列瀑布流佈局
兩列瀑布流佈局也就是將螢幕一分為二，和常規佈局類似，其中圖片的寬固定，高隨圖片的尺寸變化而變化。相比於兩列宮格佈局，瀑布流佈局採用不規則的Z字佈局，讓介面更有趣味性，避免視覺疲勞。
由於佈局的高度由圖片決定，因此，圖片細節的表達更為有力，但其不足的是圖片大小不統一，大的容易被看到，而小的容易被忽略。因此瀑布流佈局多使用者使用者目的性不強，產品數量較多的情況。
如圖：
在彙總時我發現現在很多APP列表都採用了瀑布流的形式，以小紅書和淘寶為例：他們均是以圖片展示為主，同時圖片多為第三方上傳，圖片質量不統一，產品數量較多，採用瀑布流提升了介面的趣味性，避免使用者視覺疲勞。
另外，瀑布流還有個好處就是，類似上面截圖淘寶的列表，可以增加商品分類標籤，方便使用者在操作疲勞時進行選擇性篩選。
綜上，如果滿分是五顆星，那麼兩列瀑布流佈局的圖片細節展示較高為4顆星；承載產品數較多為4顆星；商品資訊對比較強為4顆星；趣味性和新鮮感較好為4顆星。
如下圖：
什麼時候使用？
兩列瀑布流佈局和兩列網格佈局的使用場景類似，唯一區別就是兩列網格佈局在數量少時，或者使用者目標明確時都可以採用。而瀑布流多用於使用者目標不明確，同時產品數量多，可以無限下滑的時候。
兩列拼圖佈局
兩列拼圖佈局，頭部常以一張大banner的形式出現，下面是由幾張圖片以各種拼圖形式呈現。一般來說，下面展示的資訊都是和他相關列表的商品。
比如：嚴選的推薦、小紅書的推薦等。
拼圖佈局往往圖片有大有小，小的也很容易被忽略，同時編輯成本高，往往適合平臺主動推薦的商品列表。我們可以將重要資訊放到大圖上，次要資訊放到小圖上。
以小紅書為例：該頁面可看成是專題頁，採用拼圖的形式展現，從不同角度進行產品的展示，最後在用列表進行產品資訊展示，引導使用者購買。
綜上，如果滿分是五顆星，那麼兩列拼圖佈局的圖片細節展示豐富為5顆星；承載產品數較少為2顆星；商品資訊對比較弱為2顆星；趣味性和新鮮感較好為4顆星。
如下圖：
什麼時候使用？
兩列拼圖佈局，在列表中使用較少，因為不規則的拼圖會導致維護成本過高，同時小圖片很容易被忽略，因此多用於推薦頁面中，圖片由編輯經過處理之後在進行上傳。
三列網格佈局
三列網格佈局，也就是將螢幕一分為三進行展示，也可以叫宮格佈局。
相比於兩列網格佈局一屏可以展示更多的商品，只是商品圖片過小，不管是從圖片對比性還是文字的對比性來說，三列網格都較弱，同時由於由於內容多，介面排版樣式單一，趣味性和新鮮感都較低，如圖：
以陌陌直播附近和嗶哩嗶哩番劇為例，這兩個欄目使用者在使用時目的性都較弱，使用者的需求是通過檢視圖片進行快速篩選和對比。對於圖片細節展示要求不高，對於趣味性和新鮮感要求也不高。
綜上，如果滿分是五顆星，那麼三列網格佈局的圖片細節展示較弱為2顆星；承載產品數非常多為2顆星；商品資訊對比較弱為2顆星；趣味性和新鮮感較好為2顆星。
如下圖：
什麼時候使用？
當你的使用者再次操作目的性不強，同時產品數量非常多，對圖片細節要求不高時，我們可以採用三列網格佈局。
三列網格佈局主要用於使用者無目的操作，產品數量較大時使用，和列表式的區別是列表式以文字為主進行對比。而三列網格佈局其圖片對比和文字對比都較弱，往往用於使用者目標不明確，需要通過展示大量圖片供使用者選擇，同時圖片對比性質教弱的產品。
總結
（1）列表佈局
當你的產品圖片質量較差，產品數量較多，需要進行文字資訊進行對比的產品時，我們可以採用列表佈局。
（2）大圖網格佈局
如果你的產品數量較少，你可以採用大圖展示。如果你的產品是圖片類，圖片質量較高，同時產品以圖片對比為主時，你可以採用大圖佈局。
（3）兩列網格佈局
如果你的產品是以圖片對比為主，同時又不需要大圖展示時，即可採用該佈局進行設計。
（4）兩列拼圖佈局
兩列拼圖佈局，在列表中使用較少，因為不規則的拼圖會導致維護成本過高，同時小圖片很容易被忽略，因此多用於推薦頁面中，圖片由編輯經過處理之後在進行上傳。
（5）三列網格佈局
三列網格佈局主要用於使用者無目的操作，產品數量較大時使用，和列表式的區別是列表式以文字為主進行對比，而三列網格佈局主要以圖片進行對比。
作者：風箏KK，公眾號：海鹽社
本文由 @ 風箏KK 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議