两列拼图布局

两列拼图布局，头部常以一张大banner的形式出现，下面是由几张图片以各种拼图形式呈现。一般来说，下面展示的信息都是和他相关列表的商品。

比如：严选的推荐、小红书的推荐等。

拼图布局往往图片有大有小，小的也很容易被忽略，同时编辑成本高，往往适合平台主动推荐的商品列表。我们可以将重要信息放到大图上，次要信息放到小图上。

以小红书为例：该页面可看成是专题页，采用拼图的形式展现，从不同角度进行产品的展示，最后在用列表进行产品信息展示，引导用户购买。

综上，如果满分是五颗星，那么两列拼图布局的图片细节展示丰富为 5 颗星；承载产品数较少为 2 颗星；商品信息对比较弱为 2 颗星；趣味性和新鲜感较好为 4 颗星。

如下图：

什么时候使用？

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

三列网格布局

三列网格布局，也就是将屏幕一分为三进行展示，也可以叫宫格布局。

相比于两列网格布局一屏可以展示更多的商品，只是商品图片过小，不管是从图片对比性还是文字的对比性来说，三列网格都较弱，同时由于由于内容多，界面排版样式单一，趣味性和新鲜感都较低，如图：

以陌陌直播附近和哔哩哔哩番剧为例，这两个栏目用户在使用时目的性都较弱，用户的需求是通过查看图片进行快速筛选和对比。对于图片细节展示要求不高，对于趣味性和新鲜感要求也不高。

综上，如果满分是五颗星，那么三列网格布局的图片细节展示较弱为 2 颗星；承载产品数非常多为 2 颗星；商品信息对比较弱为 2 颗星；趣味性和新鲜感较好为 2 颗星。

如下图：

什么时候使用？

当你的用户再次操作目的性不强，同时产品数量非常多，对图片细节要求不高时，我们可以采用三列网格布局。

三列网格布局主要用于用户无目的操作，产品数量较大时使用，和列表式的区别是列表式以文字为主进行对比。而三列网格布局其图片对比和文字对比都较弱，往往用于用户目标不明确，需要通过展示大量图片供用户选择，同时图片对比性质教弱的产品。

总结

（1）列表布局 

当你的产品图片质量较差，产品数量较多，需要进行文字信息进行对比的产品时，我们可以采用列表布局。

（2）大图网格布局

如果你的产品数量较少，你可以采用大图展示。如果你的产品是图片类，图片质量较高，同时产品以图片对比为主时，你可以采用大图布局。

（3）两列网格布局

如果你的产品是以图片对比为主，同时又不需要大图展示时，即可采用该布局进行设计。

（4）两列拼图布局

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

（5）三列网格布局

三列网格布局主要用于用户无目的操作，产品数量较大时使用，和列表式的区别是列表式以文字为主进行对比，而三列网格布局主要以图片进行对比