电商类app详情页设计分析

详情页通常是电商类app流量最大的页面,承载决定用户是否购买商品的关键决策信息。该页面的功能、布局、交互设计对用户购买转化意义至关重要。

今天来看看天猫、京东、苏宁等的电商app详情页是怎么设计的。并分析详情页的细节设计。

一、天猫

布局为顶部快捷导航标题区、核心内容区、底部操作区。

快捷导航标题区包括内容区切换,购物车链接(方便用户随时去购物车完成后续购买),以及“更多”。分享、刷新、收藏等操作,首页、搜索等链接,以及一些卡券活动、推荐商品都在“更多”里包含。

内容区分三部分。商品、详情、评价三部分。

1,商品,从整体上让顾客了解商品情况。

第一屏:包括一组大图(通常是2张整体效果图,3张局部细节大图,均铺满屏幕),价格与已售卖数量(显示历史价满足顾客比价心理)与售卖时限(如果有则显示,有暗示赶快下单否则就没了的效果)。由于上方分享功能隐藏在了“更多”操作中,此处还显示“分享”功能。

第二屏:首先是商品参加的活动,返积分、可增送的优惠券等促销说明。然后是产品参数介绍链接(放在这里貌似略混乱)、下单选择链接:点击弹配送区域、以及型号、数量等介绍选择框。然后是商品评价信息的概述。最下是商家的信息与链接(大约在第2.5屏)。

在商品部分左滑或继续上滑,进入图文详情部分。

2,图文详情:购买决策的详细专业信息

天猫的商品图文详情页首先是三款卖家推荐、可领优惠券、店家活动。

然后是各种图文的商品介绍:近20张图片介绍,足以充分展示商品的各种特质,让用户产生购买冲动(最近一些电商尝试使用视频展示商品、未来甚至使用vr,新技术形式的采用应该能增强用户身临其境感)。最后是推荐类似商品的列表:最多24款,有效提高商品曝光、以及产生更多购买可能。

继续左滑进入评价部分。

3,评价部分:商品及商家的口碑

口碑评价部分在移动互联网时代对用户购买决策有相当大的影响。

天猫的评价部分首先是总体的评价数、典型分类数,这里都可以作为查看评价列表的筛选。

下面是具体的评价列表,包括用户名(用*替换部分),内容(包括图片,如果有图片可查看评论详情可看大图),评价与收货时间,购买商品型号。

底部操作区包括客服(咨询是购买中重要服务),商家店铺(决策依据之一),收藏(后续再买),加购物车(可继续买更多),马上抢(直接买下当前商品)。

缺点:上滑、左滑进入详情区结果相同,但显示标题不同、后续操作也略有不同,造成用户一些小凌乱。

二、京东

总体布局与天猫非常接近,分顶部标题与操作区,中间核心内容区、底部操作区。

顶部操作区,京东放置的不是购物车链接而是分享按钮与“更多”(购物车链接放到底部操作区了)。“更多”中也只有首页、消息、搜索、我的关注、浏览记录几个链接。

内容区包括商品信息区、图文详情区、评论区。

 

 

商品信息区与天猫也极为类似,除下单选择处显示配送到达时间以突出京东物流特色外,还有一些微小变化。另外推荐商品功能也放在了这个区域底部,除当前商品类似品推荐,还包括排行榜推荐。

图文详情区,京东做了左、中、右三栏拆分,分别显示图片、表格(规格参数)、文字(包装售后)。相比天猫垂直展示,更清晰易读。

底部操作区,京东相比天猫少了直接购买项。因此放置了购物车链接。

整体看,京东相比天猫详情页布局设置更简洁有效。但功能稍弱,例如缺少直接购买等方便用户快速下单功能。

另外,天猫、京东详情页在某些垂直品类例如食品领域,还缺少一些个性化适合该类商品的属性展示:人们在购买食品时,对加工方法、营养健康等也比较关注。目前的详情页并没有直接显示,需要商家在图文中去描述,其实如果针对不同类别商品做差异性标准化用户感受会更好。

 

三、苏宁

苏宁app详情页中,操作区之外看起来只有一个内容区,但实际上不缺少前面天猫与京东的图文详情、评价。但要么垂直在下方,要么需要点击某个链接进入。这里的布局相对凌乱,没有有效利用手机端用户更喜欢滑动这个特征,不利于用户快速方便找到所需信息。

苏宁的猜你喜欢固定推荐9个品,看起来应该还比较早期和简单的推荐模式。

苏宁详情页的另一个小欠缺是分享藏在了“更多”里面,天猫与京东则都放在外面显眼处,略微影响社交分享。此外,苏宁的商品信息区大图尺寸有时会铺满手机标题栏也略欠。

 

四、详情页细节设计分析

下面来分析优秀的商品详情页是从哪些方面打动用户刺激用户购买的。

当我们在设计一个商品详情页时候,要把用户当成我们的男女朋友来对待,整个设计流程分为四步:

 

用户购买商品其实就是这个过程,首先认识商品(1米8大个又帅)随后信任商品(人品还好)从而产生购买价值(跟他恋爱不错)最终购买转化(相守结婚)!

分析两个卖奢侈品的app商品详情页:

 

用户认识商品的过程其实是非常短暂的可能就是几秒钟。米兰的页面设计,第一眼并没有让用户感知到商品,也没有突出奢侈品最关键的点,品牌!标题字行间距不易阅读,整体UI界面的设计给人很强的淘宝风!

寺库很好的做了区别于淘宝京东的差异化设计,建立自己的品牌认知,首屏高清大图牢牢抓住用户,突出了品牌TUPLUS/途加,整体给人信任感!(只是因为在人群中多看了你一眼,再也不能忘掉你容颜)

用户快速认识了解商品是远远不够的,下面来看两款产品向上滑动屏幕给用户的信息和感受,这里就要跟用户建立信任了!

 

没错米兰并没有评论和商品详情,真的要命,滑动不够一屏就推荐相关产品了,这时候很多用户早已逃之夭夭了,没有建立信任基础很难有结果。

评论功能往往可以创造热销的氛围,根据从众效应其它用户的评价能够引导用户作出判断,指引用户的心理和行为。例如一个女孩子认识一个男孩子,女孩子身边的人朋友闺蜜都说这个男孩子不错!好!值得托付!女孩子可能就会听从她们的话,至少能增强对这个男孩子的好感!所以追女孩要先搞定她的闺蜜,不然闺蜜说一句“我觉得这个人不怎么样”你就完了!握草,有点跑题了!总之评价是能够建立基础信任感的!

寺库的页面交互是非常符合用户心理的,一直向上滑动的流程:商品-评论-详情-推荐。

评价没有完全打动用户,建立信任,那么详情页就得发大招了,产品的详情能不能走进用户心里,了解用户,解决用户痛点是非常之关键!

想象一下用户买奢侈品都会关注哪些点,整个购买流程会有什么担忧,当然也要突出产品的核心卖点。

TUPLUS/途加这款产品详情页是这样的流程:介绍此产品斩获两项国际大奖,之后产品功能细节介绍,中间加了购买奢侈品形象人群使用场景,(打造一个好的人像使用场景,会让用户联想到自己使用时形象气质),后面详细介绍产品的权威性,正品保证,资质证书,这都能很有力的解决用户的担忧和痛点!

 

 

详情页解决用户的担忧和痛点体现产品价值。商品权威鉴定详细介绍有图有真相,点击进入“寺库鉴定”页面,首先视频介绍,教你怎么辨别产品的真伪,我们有专业的鉴定产品真伪团队、团队发展历程、行业的资质证书等等信息都传递给用户,产品的安全保障,是值得购买的,这就会让用户从基础信任到有价值认可。

当用户下单后,用户会有“损失规避”效应,(意指人们获得损失时产生的痛苦远大于获得收益时所带来的快乐),这个时候下单成功页面如果就提示“购买成功”的字样,用户就不会感受到刚刚损失的心理安慰,弄不好用户意识到自己冲动消费,马上就退单了!

所以这里可以用到一些,一语双关的文案,例如:“恭喜你成为第xxx个有品味的人”,“恭喜你即将拥有给你带来美好生活的xxxx产品”,总之即说明了我们的产品好,又夸了用户有品位,或者描绘产品给用户带来什么好的体验场景,这样就大大降低了“损失规避”效应带来的痛点!

最后总结一下,设计app商品详情页的四个步骤:

第一让用户快速了解认识产品;

第二取得用户对产品的信任;

第三让用户产生价值感受(走心、解决用户痛点与担忧);

第四最终实现产品购买的转化(售后良好体验、形成口碑、促进二次购买)。

每天更新,
全站高品质素材免费下载!