有效的产品列表布局怎么设计

  • A+
所属分类:经验思维

本文来源: 风筝KK(公众号:海盐社), 共 2432 字

产品列表是用户挑选商品,决定是否购买或使用的关键页面,合理的布局方案不仅能提升用户的视觉体验,同时还能提高用户的操作体验,从而促进用户买单。

产品列表采用什么样的布局方案才是有效的呢?我们不能抛开产品单独分析,而是需要根据你的产品数量、用户需求、产品目的等多方面来考虑,最适合的才是最有效的。不过最重要的在此之前我们还需要知道有哪些布局方案。下面我总结了六大布局:

有效的产品列表布局怎么设计

有效的产品列表布局怎么设计列表布局也就是我们常见的图文列表,一个列表垂直呈现多个连续的行元素。列表布局重在文本内容,由于图片尺寸较小,因此图片细节展示不丰富。

其优势是,由于列表布局遵循自上而下的阅读模式,因此有利于商品信息的对比,同时一屏可展示产品数较多。但是其趣味性和新鲜感较差,因此浏览时间过长会出现视觉疲劳。如图:

有效的产品列表布局怎么设计

以大众点评为例,其图片直接采用产品图,质量较低而且统一性不强。同时针对团购类的产品,我们需要快速浏览查看每个列表的信息,从而针对优惠信息进行对比,因此采用列表布局较为适合。

以淘票票为例,图片主要起到视觉引导的作用,而用户需要看的就是打折的详细信息,因此采用列表布局有利于商品的对比使用。

什么时候使用?

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

有效的产品列表布局怎么设计

大图网格布局,也就是指一行只展示一张图片,由于其图片占比较大,因此往往一屏只能展示1到2张,图片细节能够清晰展现,用户可直接根据图片进行商品对比。

相比于列表布局,大图布局页面空间的消耗大,一屏可展示内容少,不利于信息的查找和对比,因此适合以图片为主的产品,同时多用于商品数量较少或推荐列表中。如图:

有效的产品列表布局怎么设计

以蚂蚁短租和爱彼迎为例,他们的图片都是经过专人编辑,图片质量较高,采用大图布局可展示更多的细节,帮助用户筛选对比。

什么时候使用?

当你的产品数量较少,图片经过专门编辑的情况下,同时从产品属性上看,用户需要通过图片来进行对比时,我们就可以采用大图展示,大图展示往往视觉效果好,多用于图片类、租房类、商品推荐等列表中。

有效的产品列表布局怎么设计

两列网格布局也就是将屏幕一分为二,图片和文字进行上下展示,类似一个网格,浏览次序类似一个Z字,因此产品都能均衡的被用户看到。

相比于大图展示,一屏可展示更多的商品,有利于信息的对比,相对于列表布局,两列网格布局更适合用户目标不明确或者以图片为主的产品。

设计要点

1、文字信息展示短,往往需要配合“...”来使用

2、两列网格布局,展示信息不易过多,一般建议不超过3行

3、如果文字信息展示在图片上,需要在底部加渐变蒙层,以突显文字信息,建议信息不宜过多。

有效的产品列表布局怎么设计

以in和严选为例,虽然他们一个是图片社交一个是电商类,但是其都是想让用户通过图片选择自己感兴趣的内容,从产品细节展示来说比列表布局更丰富,从产品信息对比来说,比大图更便捷,因此目前两列网格布局应用较为广泛。

什么时候使用?

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

有效的产品列表布局怎么设计

两列瀑布流布局也就是将屏幕一分为二,和常规布局类似,其中图片的宽固定,高随图片的尺寸变化而变化,相比于两列宫格布局,瀑布流布局采用不规则的Z字布局,让界面更有趣味性,避免视觉疲劳。

由于布局的高度由图片决定,因此更有利于图片细节的表达,但是不足的是图片有大有小,大的容易被看到,而小的容易被忽略,因此瀑布流布局多用户用户目的性不强,产品数量较多的情况。

有效的产品列表布局怎么设计

在汇总时我发现现在很多APP列表都采用了瀑布流的形式,以小红书和淘宝为例,他们均是以图片展示为主,同时图片多为第三方上传,图片质量不统一,产品数量较多,采用瀑布流提升了界面的趣味性,避免用户视觉疲劳。

什么时候使用?

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

另外,瀑布流还有个好处就是,类似上面截图淘宝的列表,可以增加商品分类标签,方便用户在操作疲劳时进行选择性筛选。

有效的产品列表布局怎么设计

两列拼图布局,往往头部是一张banner大图,下面展示的信息都是和他相关列表的商品。拼图布局往往图片有大有小,小的也很容易被忽略,同时编辑成本高,往往适合平台主动推荐的商品列表。我们可以将重要信息放到大图上,次要信息放到小图上。

有效的产品列表布局怎么设计

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

什么时候使用?

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

有效的产品列表布局怎么设计

三列普通布局,也就是将屏幕一分为三进行展示,也可以叫宫格布局,由于展示图片较小,因此该布局图片呈现的细节也较少,往往用于用户目标不明确,需要通过展示大量图片供用户选择,同时图片对比性质教弱的产品。

有效的产品列表布局怎么设计

以陌陌直播附近和哔哩哔哩番剧为例,这两个栏目用户在使用时都没有什么目的性,都是通过查看大量信息进行快速对比。

什么时候使用?

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

有效的产品列表布局怎么设计

1、列表布局 

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

2、大图网格布局

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

3、两列网格布局

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

4、两列拼图布局

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

5、三列网格布局

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



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: