本文介绍常见的六大布局样式，即列表、大图网格、两列网格、两列瀑布流、拼图、三列网格布局，通过对它们优缺点和使用场景的分析，掌握在什么情况下采用何种布局方式。

一. 列表布局

列表布局是最常用的布局方式，由缩略图和文字信息组成，列表布局对图片质量要求不高，重在文字内容。

使用场景：当产品对图片质量要求不高，想要展示的数量较多，需要通过优惠信息、价格参数等进行对比，可以采用列表布局。

优点：自上而下的阅读方式，符合人眼阅读习惯，有利于信息的快速扫视和对比；每条信息所占空间较小，一屏可以展示更多的信息；

缺点：由于图片占比小，细节展示不丰富；一屏信息量过大，长时间浏览会引起视觉疲劳。

大众点评属于团购类APP，用户购买商品时比较关注商品的评价、地理位置、优惠力度，决定用户购买的因素不是图片信息，列表中商品的标题、产品参数、打折信息是用户的关注点。

二. 大图网格

一行展示一张图片，图片占比较大，一屏最多展示1-2张，适合图片浏览为主的产品。

使用场景：产品数量较少，图片有专门的人员维护，大图展示效果比较好，多用于图片类、租房类、商品推荐等列表中。

优点：自上而下的阅读方式，符合人眼阅读习惯，有效传达信息；图片可以展示更多的商品细节，丰富界面效果，突出品牌调性。

缺点：页面可展示的内容少，不利于信息的查找和对比。

蚂蚁短租和懒人周末分别是短租和生活类App，其共同点是用户在使用时主要通过图片决定是否购买，采用大图布局可展示更多的细节，帮助用户浏览，提升整体的界面效果。

三. 两列网格布局

此布局方式将屏幕一分为二，图片和文字上下展示，整体风格像网格布局，用户浏览顺序类似Z字，整个布局图片占比比较大，对图片质量要求高，适用于图片对比为主的商品。

使用场景：如果你的产品是以图片对比为主，同时又不需要大图展示时，可采用该布局进行设计。两列网格布局往往和列表布局会一起使用。

优点：利于图片类商品的对比选择，一屏可以展示4~6条信息，视觉效果好。

缺点：文字信息较少，只能展示关键的文字信息，如商品标题、标签、价格等。

京东商城，采取两列布局的方式展示同类商品，用户可以通过图片对比选择更喜欢的商品，决定是否购买时再进入商品详情进行浏览。

二. 两列瀑布流布局

两列瀑布流布局和常规布局都是将屏幕一分为二，区别在于瀑布流布局图片宽度固定，高度随图片的尺寸的变化，瀑布流布局显示更加不规则，适合用户目标不明确的情况。

使用场景：两列瀑布流布局和两列网格布局的使用场景类似，唯一区别就是两列网格布局在产品数量少或用户目标明确时采用；而瀑布流多用于用户目标不明确，同时产品数量多，可以无限下滑的时候。

优点：图片高度自适应变化，图片细节表达更丰富，用户使用时可以无限下滑，浏览的内容更多。

缺点：用户浏览产品时，图片大小不一，大图容易被记住，小图容易被忽略；采用预加载的实现方式，不能预估产品的数量。

小红书列表展示的图片、视频多为用户上传，图片质量、大小都不统一，比较适合瀑布流布局，列表显示内容丰富性强。

五. 三列网格布局

三列网格布局是将屏幕一分为三进行展示，也可以叫宫格布局。由于模块比较小，因此主要以图片展示为主，文字信息一般只有简单的标题，适合用在用户需求不明确的页面。

使用场景：如果产品只是为了展示更多的信息，不需要通过图片进行对比时，可采用三列网格布局。

优点：排版的界面利用率高，一屏可展示的产品数量最多，利于用户快速浏览选择自己感兴趣的产品。

缺点：图片展示尺寸小、质量低，文字信息展示简单，对比性较弱，界面的趣味性和新鲜感都比较差。

喜马拉雅用户进入到历史频道，主要是为了看看有没有自己感兴趣的内容，采用三列网格布局可以展示更多的内容，帮助用户快速浏览。

六. 拼图布局

拼图布局中，头部常以一张大banner的形式出现，下面是由几张图片以各种拼图形式呈现。一般来说下面展示的信息都是和头部图相关的商品，适合平台主动推荐的商品列表。

使用场景：两列拼图布局在列表中使用较少，因为不规则的拼图会导致维护成本过高，同时小图片很容易被忽略，因此多用于推荐页面中，图片由编辑经过处理之后再进行上传。

优点：采用杂志式排版，样式上更活泼美观；产品主次表达更清晰，通过图片占比大小就可以确定主要和次要信息。

缺点：图片一般有大有小，小的也很容易被忽略；另外该样式编辑成本高，往往需要单独推荐。

商品推荐页面可采用拼图的形式展现，将重要信息放到大图上，次要信息放到小图上，引导用户购买。