首页 > 建站资源 > 网站运营 > 设计分享:你知道产品图片列表,采用什么布局最好吗?

设计分享:你知道产品图片列表,采用什么布局最好吗?

时间:2018-09-13    来源:人人都是产品经理

作者:风筝KK,公众号:海盐社

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

产品列表采用什么样的布局方案才是有效的呢?

我们不能抛开产品单独分析,而是需要根据你的产品数量、用户需求、产品目的等多方面来确定。不过最重要的在此之前我们还需要知道有哪些布局方案。

下面我总结了六大布局:

下面为了方便大家分析对比,我将对这六大布局进行分析,同时从图片细节展示、承载产品数多少、商品信息对比强弱、趣味性和新鲜感这四个决定采用何种布局方案的点进行评分。

列表布局

列表布局也就是我们常见的图文列表,一个列表垂直呈现多个连续的行元素。列表布局重在文本内容,由于图片尺寸较小,因此图片细节展示不丰富。最常见的使用场景就是电商、团购类列表,如:淘宝、大众点评等。

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

如图:

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

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

综上,如果满分是五颗星,那么列表的图片细节展示较差为 2 颗星;承载产品数多为 5 颗星;商品信息对比强为 5 颗星;趣味性和新鲜感低为 2 颗星。

什么时候使用?

当你的产品图片质量不高,产品数量较多,你的产品需要通过优惠信息、价格参数等来进行对比,另外对界面效果要求较低时,我们可以采用列表布局。

大图网格布局

大图网格布局,也就是指一行只展示一张图片,由于其图片占比较大,因此往往一屏只能展示 1 到 2 张,图片细节能够清晰展现,用户可直接根据图片进行商品对比。最常见的使用场景就是以图片为主的APP推荐列表,例如:爱彼迎、蚂蚁短租、懒人周末等。

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

如图:

以蚂蚁短租和懒人周末为例,虽然他们一个是短租类APP,一个是生活类APP。其共同点是他们的图片都是经过专人编辑,图片质量较高,同时对界面视觉要求较高,采用大图布局可展示更多的细节,帮助用户筛选对比,提升整体的界面效果。

相关推荐
产品运营:如何形成习惯让用户心甘情愿地留下来?
产品运营:站在用户体验的角度看抖音广告
运营:95%的产品都会忽略用户留存误区,如何提升留存率?
体验至上不再是金科玉律,现在用户决策购买才是王道!
创意策略:从用户出发的创意脑暴的8个步骤
以微信网易为例:新闻型产品列表设计分析
20大UI设计原则 设计师必备宝典
APP应用设计教程:设计元素的应用条件
设计完美的界面排版10个要点分享
让UI设计显得更简约的小技巧分享
细说用户体验设计背后的“黑暗模式”
遵循用户需求的设计:最美APP的9条闪光定律
微软发布Windows 8.1更新 针对鼠标键盘用户
企鹅进化论 细数那些年我们一起用过的QQ
用户界面设计教程:UI设计六要素分享
谷歌将推新设计语言 统一安卓用户界面设计
今日最佳设计:人像即按钮 社交应用新趋势
细节决定成败!提高用户登录体验的5个细节
百设网:专注于应用界面设计的作品交易网站
好看好用?UI设计师不可不学的易用性原则
如何给Android产品设计一款合适的图标?
分享设计:Froont打造网站设计界的Github
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
想让界面优雅易读?聊聊移动端字体7个准则
天天喊着学UI 你知道安卓和iOS的区别吗?
连按钮都设计不好 你还指望用户点击?
分享为SOUNDWAVE设计WATCH应用的五个技巧
这是个看脸的世界 即便你是APP也是如此
再见METRO!WINDOWS 10通用应用设计趋势分析
超实用干货!视觉设计师的五项技能修炼方法
百度官方出品!2015-2016交互体验趋势
界面设计:从减少点击次数到降低使用负荷
简约至上:教你打造用户喜爱的产品设计风格
用户为王!关于征询授权、注册及加载等待的体验优化

精彩推荐

热门教程