今天来看看天猫、京东、苏宁等的电商app详情页是怎么设计的。并分析详情页的细节设计。
一、天猫
布局为顶部快捷导航标题区、核心内容区、底部操作区。
内容区分三部分。商品、详情、评价三部分。
1,商品,从整体上让顾客了解商品情况。
第二屏:首先是商品参加的活动,返积分、可增送的优惠券等促销说明。然后是产品参数介绍链接(放在这里貌似略混乱)、下单选择链接:点击弹配送区域、以及型号、数量等介绍选择框。然后是商品评价信息的概述。最下是商家的信息与链接(大约在第2.5屏)。
在商品部分左滑或继续上滑,进入图文详情部分。
2,图文详情:购买决策的详细专业信息
天猫的商品图文详情页首先是三款卖家推荐、可领优惠券、店家活动。
然后是各种图文的商品介绍:近20张图片介绍,足以充分展示商品的各种特质,让用户产生购买冲动(最近一些电商尝试使用视频展示商品、未来甚至使用vr,新技术形式的采用应该能增强用户身临其境感)。最后是推荐类似商品的列表:最多24款,有效提高商品曝光、以及产生更多购买可能。
继续左滑进入评价部分。
3,评价部分:商品及商家的口碑
口碑评价部分在移动互联网时代对用户购买决策有相当大的影响。
天猫的评价部分首先是总体的评价数、典型分类数,这里都可以作为查看评价列表的筛选。
底部操作区包括客服(咨询是购买中重要服务),商家店铺(决策依据之一),收藏(后续再买),加购物车(可继续买更多),马上抢(直接买下当前商品)。
缺点:上滑、左滑进入详情区结果相同,但显示标题不同、后续操作也略有不同,造成用户一些小凌乱。
二、京东
总体布局与天猫非常接近,分顶部标题与操作区,中间核心内容区、底部操作区。
图文详情区,京东做了左、中、右三栏拆分,分别显示图片、表格(规格参数)、文字(包装售后)。相比天猫垂直展示,更清晰易读。
底部操作区,京东相比天猫少了直接购买项。因此放置了购物车链接。
整体看,京东相比天猫详情页布局设置更简洁有效。但功能稍弱,例如缺少直接购买等方便用户快速下单功能。
三、苏宁
苏宁app详情页中,操作区之外看起来只有一个内容区,但实际上不缺少前面天猫与京东的图文详情、评价。但要么垂直在下方,要么需要点击某个链接进入。这里的布局相对凌乱,没有有效利用手机端用户更喜欢滑动这个特征,不利于用户快速方便找到所需信息。
四、详情页细节设计分析
下面来分析优秀的商品详情页是从哪些方面打动用户刺激用户购买的。
当我们在设计一个商品详情页时候,要把用户当成我们的男女朋友来对待,整个设计流程分为四步:
用户购买商品其实就是这个过程,首先认识商品(1米8大个又帅)随后信任商品(人品还好)从而产生购买价值(跟他恋爱不错)最终购买转化(相守结婚)!
分析两个卖奢侈品的app商品详情页:
用户认识商品的过程其实是非常短暂的可能就是几秒钟。米兰的页面设计,第一眼并没有让用户感知到商品,也没有突出奢侈品最关键的点,品牌!标题字行间距不易阅读,整体UI界面的设计给人很强的淘宝风!
寺库很好的做了区别于淘宝京东的差异化设计,建立自己的品牌认知,首屏高清大图牢牢抓住用户,突出了品牌TUPLUS/途加,整体给人信任感!(只是因为在人群中多看了你一眼,再也不能忘掉你容颜)
用户快速认识了解商品是远远不够的,下面来看两款产品向上滑动屏幕给用户的信息和感受,这里就要跟用户建立信任了!
评价没有完全打动用户,建立信任,那么详情页就得发大招了,产品的详情能不能走进用户心里,了解用户,解决用户痛点是非常之关键!
TUPLUS/途加这款产品详情页是这样的流程:介绍此产品斩获两项国际大奖,之后产品功能细节介绍,中间加了购买奢侈品形象人群使用场景,(打造一个好的人像使用场景,会让用户联想到自己使用时形象气质),后面详细介绍产品的权威性,正品保证,资质证书,这都能很有力的解决用户的担忧和痛点!
详情页解决用户的担忧和痛点体现产品价值。商品权威鉴定详细介绍有图有真相,点击进入“寺库鉴定”页面,首先视频介绍,教你怎么辨别产品的真伪,我们有专业的鉴定产品真伪团队、团队发展历程、行业的资质证书等等信息都传递给用户,产品的安全保障,是值得购买的,这就会让用户从基础信任到有价值认可。
当用户下单后,用户会有“损失规避”效应,(意指人们获得损失时产生的痛苦远大于获得收益时所带来的快乐),这个时候下单成功页面如果就提示“购买成功”的字样,用户就不会感受到刚刚损失的心理安慰,弄不好用户意识到自己冲动消费,马上就退单了!
所以这里可以用到一些,一语双关的文案,例如:“恭喜你成为第xxx个有品味的人”,“恭喜你即将拥有给你带来美好生活的xxxx产品”,总之即说明了我们的产品好,又夸了用户有品位,或者描绘产品给用户带来什么好的体验场景,这样就大大降低了“损失规避”效应带来的痛点!