本文介紹常見的六大布局樣式边败，即列表袱衷、大圖網(wǎng)格、兩列網(wǎng)格笑窜、兩列瀑布流致燥、拼圖、三列網(wǎng)格布局排截，通過對它們優(yōu)缺點和使用場景的分析嫌蚤，掌握在什么情況下采用何種布局方式。

一. 列表布局

列表布局是最常用的布局方式断傲，由縮略圖和文字信息組成脱吱，列表布局對圖片質(zhì)量要求不高，重在文字內(nèi)容认罩。

使用場景：當(dāng)產(chǎn)品對圖片質(zhì)量要求不高箱蝠，想要展示的數(shù)量較多，需要通過優(yōu)惠信息猜年、價格參數(shù)等進行對比抡锈，可以采用列表布局疾忍。

優(yōu)點：自上而下的閱讀方式乔外，符合人眼閱讀習(xí)慣，有利于信息的快速掃視和對比一罩；每條信息所占空間較小杨幼，一屏可以展示更多的信息；

缺點：由于圖片占比小聂渊，細節(jié)展示不豐富差购；一屏信息量過大，長時間瀏覽會引起視覺疲勞汉嗽。

大眾點評屬于團購類APP欲逃，用戶購買商品時比較關(guān)注商品的評價、地理位置饼暑、優(yōu)惠力度稳析，決定用戶購買的因素不是圖片信息，列表中商品的標題弓叛、產(chǎn)品參數(shù)彰居、打折信息是用戶的關(guān)注點。

二. 大圖網(wǎng)格

一行展示一張圖片撰筷，圖片占比較大陈惰，一屏最多展示1-2張，適合圖片瀏覽為主的產(chǎn)品毕籽。

使用場景：產(chǎn)品數(shù)量較少抬闯，圖片有專門的人員維護井辆，大圖展示效果比較好，多用于圖片類溶握、租房類掘剪、商品推薦等列表中。

優(yōu)點：自上而下的閱讀方式奈虾，符合人眼閱讀習(xí)慣夺谁，有效傳達信息；圖片可以展示更多的商品細節(jié)肉微，豐富界面效果匾鸥，突出品牌調(diào)性。

缺點：頁面可展示的內(nèi)容少碉纳，不利于信息的查找和對比勿负。

螞蟻短租和懶人周末分別是短租和生活類App，其共同點是用戶在使用時主要通過圖片決定是否購買劳曹，采用大圖布局可展示更多的細節(jié)奴愉，幫助用戶瀏覽，提升整體的界面效果铁孵。

三. 兩列網(wǎng)格布局

此布局方式將屏幕一分為二锭硼，圖片和文字上下展示，整體風(fēng)格像網(wǎng)格布局蜕劝，用戶瀏覽順序類似Z字檀头，整個布局圖片占比比較大，對圖片質(zhì)量要求高岖沛，適用于圖片對比為主的商品暑始。

使用場景：如果你的產(chǎn)品是以圖片對比為主，同時又不需要大圖展示時婴削，可采用該布局進行設(shè)計廊镜。兩列網(wǎng)格布局往往和列表布局會一起使用。

優(yōu)點：利于圖片類商品的對比選擇唉俗，一屏可以展示4~6條信息嗤朴，視覺效果好。

缺點：文字信息較少互躬，只能展示關(guān)鍵的文字信息播赁，如商品標題、標簽吼渡、價格等容为。

京東商城，采取兩列布局的方式展示同類商品，用戶可以通過圖片對比選擇更喜歡的商品坎背，決定是否購買時再進入商品詳情進行瀏覽替劈。

二. 兩列瀑布流布局

兩列瀑布流布局和常規(guī)布局都是將屏幕一分為二，區(qū)別在于瀑布流布局圖片寬度固定得滤，高度隨圖片的尺寸的變化陨献，瀑布流布局顯示更加不規(guī)則，適合用戶目標不明確的情況懂更。

使用場景：兩列瀑布流布局和兩列網(wǎng)格布局的使用場景類似眨业，唯一區(qū)別就是兩列網(wǎng)格布局在產(chǎn)品數(shù)量少或用戶目標明確時采用；而瀑布流多用于用戶目標不明確沮协，同時產(chǎn)品數(shù)量多龄捡，可以無限下滑的時候。

優(yōu)點：圖片高度自適應(yīng)變化慷暂，圖片細節(jié)表達更豐富聘殖，用戶使用時可以無限下滑，瀏覽的內(nèi)容更多行瑞。

缺點：用戶瀏覽產(chǎn)品時奸腺，圖片大小不一，大圖容易被記住血久，小圖容易被忽略突照；采用預(yù)加載的實現(xiàn)方式，不能預(yù)估產(chǎn)品的數(shù)量洋魂。

小紅書列表展示的圖片绷旗、視頻多為用戶上傳，圖片質(zhì)量副砍、大小都不統(tǒng)一，比較適合瀑布流布局庄岖，列表顯示內(nèi)容豐富性強豁翎。

五. 三列網(wǎng)格布局

三列網(wǎng)格布局是將屏幕一分為三進行展示，也可以叫宮格布局隅忿。由于模塊比較小心剥，因此主要以圖片展示為主，文字信息一般只有簡單的標題背桐，適合用在用戶需求不明確的頁面优烧。

使用場景：如果產(chǎn)品只是為了展示更多的信息，不需要通過圖片進行對比時链峭，可采用三列網(wǎng)格布局畦娄。

優(yōu)點：排版的界面利用率高，一屏可展示的產(chǎn)品數(shù)量最多，利于用戶快速瀏覽選擇自己感興趣的產(chǎn)品熙卡。

缺點：圖片展示尺寸小杖刷、質(zhì)量低，文字信息展示簡單驳癌，對比性較弱滑燃，界面的趣味性和新鮮感都比較差。

喜馬拉雅用戶進入到歷史頻道颓鲜，主要是為了看看有沒有自己感興趣的內(nèi)容表窘，采用三列網(wǎng)格布局可以展示更多的內(nèi)容，幫助用戶快速瀏覽甜滨。

六. 拼圖布局

拼圖布局中蚊丐，頭部常以一張大banner的形式出現(xiàn)，下面是由幾張圖片以各種拼圖形式呈現(xiàn)艳吠。一般來說下面展示的信息都是和頭部圖相關(guān)的商品麦备，適合平臺主動推薦的商品列表。

使用場景：兩列拼圖布局在列表中使用較少昭娩，因為不規(guī)則的拼圖會導(dǎo)致維護成本過高凛篙，同時小圖片很容易被忽略，因此多用于推薦頁面中栏渺，圖片由編輯經(jīng)過處理之后再進行上傳呛梆。

優(yōu)點：采用雜志式排版，樣式上更活潑美觀磕诊；產(chǎn)品主次表達更清晰填物，通過圖片占比大小就可以確定主要和次要信息。

缺點：圖片一般有大有小霎终，小的也很容易被忽略滞磺；另外該樣式編輯成本高，往往需要單獨推薦莱褒。

商品推薦頁面可采用拼圖的形式展現(xiàn)击困，將重要信息放到大圖上，次要信息放到小圖上广凸，引導(dǎo)用戶購買阅茶。