APP的列表布局方式

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

一. 列表布局

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

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

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

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


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

二. 大图网格

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

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

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

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


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

三. 两列网格布局

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

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

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

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


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

二. 两列瀑布流布局

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

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

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

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


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

五. 三列网格布局

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

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

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

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


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

六. 拼图布局

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

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

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

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

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

你可能感兴趣的:(APP的列表布局方式)