电商类app详情页设计分析

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

一、天猫

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

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

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

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

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

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

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

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

继续左滑进入评价部分。

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

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

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

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

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

二、京东

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

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

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

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

三、苏宁

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

四、详情页细节设计分析

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

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

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

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

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

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

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

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

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

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

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

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

THE END
1.轻松上手快速出图!商品详情页模板设计实用技能分享,快收好!不用PS设计详情页简单流程大公开!没有美工也能轻松做商品详情页长图https://www.sohu.com/a/828652341_121479458
2.商品图片设计形式中的拼接设计是将多张商品图片拼合成一张商品主...A.信息丰富 B.可以同时显示商品的外观和实际功效 C.买家对商品颜色一目了然 D.突显商品特征答案 查看答案发布时间:2022-06-03 更多“商品图片设计形式中的拼接设计是将多张商品图片拼合成一张商品主图,这种设计形式的优点不包括()。”相关的问题 第1题 在商品详情页设计中,商品图片设计的基本要求是能够展示...https://www.xuesai.cn/souti/IR9R7D6L.html
3.在详情页设计时,商品图片视觉营销的要点包括()。A卖点清晰有...在详情页设计时,商品图片视觉营销的要点包括( )。 A、卖点清晰有创意 B、丰富细节 C、宜简不宜繁 D、商品的大小适中 点击查看答案进入小程序搜题 你可能喜欢 网孔电流法仅适合于()电路图。? A、立体B、非平面C、平面D、任意 点击查看答案&解析进入小程序搜题 汉初三杰是()。 A.张良B.韩信C.萧何D....https://m.ppkao.com/wangke/daan/61891e1c880449b3a49984ac5b20b392
4.商品详情页设计与制作.docx商品详情页设计与制作.docx 24页VIP内容提供方:江小米 大小:26.98 KB 字数:约8.68千字 发布时间:2022-03-23发布于河北 浏览人气:324 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币 (10金币=人民币1元)商品详情页设计与制作.docx 关闭预览 想预览更多内容,点击免费在线预览全文 免费在线...https://max.book118.com/html/2022/0322/7036121003004104.shtm
5.项目四商品详情页设计与制作(理论综合)[复制]商品详情页的最顶部一般放置(),用以吸引消费者的眼球。 A.详情页海报 B.关联营销 C.商品细节图 D.客户评价 2. ()在海报中主要对商品信息或活动内容进行说明,是海报中重要组成部分。 A.促销文字 B.商品图片 C.商品品牌 D.促销信息 3. 下列方法中可以打开“图层样式”的是() ...https://www.wjx.cn/jq/78116953.aspx
6.电商产品设计:商品详情页不同平台、不同商品展示的信息有差异,但不管展示什么内容,都是依据商品即商品相关属性; 所以商品详情页的内容,在进入商品详情页时即判断展示的信息,再根据页面的设计,在不同区域分别露出信息内容。 最后,商品详情页是转化和分流的重要页面,不仅仅需要展示基本信息,更重要的是商品详情页的营销策略、推荐分流。好的商品...https://www.jianshu.com/p/c6c52e3e9d01
1.在详情页设计时,商品图片视觉营销的要点包括()。A.卖点清晰有创意 B.商品的大小适中 C.宜简不宜繁 D.丰富细节 多选题,请选择你认为正确的答案: ABCD 提交 查看参考答案https://www.shangxueba.cn/hangye/QK3CGE48.html
2.在详情页设计时,商品图片视觉营销的要点包括()。刷刷题APP(shuashuati.com)是专业的大学生刷题搜题拍题答疑工具,刷刷题提供在详情页设计时,商品图片视觉营销的要点包括()。A.卖点清晰有创意B.商品的大小适中C.宜简不宜繁D.丰富细节的答案解析,刷刷题为用户提供专业的考试题库练习。一分钟将考试题Word文档/Excel文档/PDhttps://www.shuashuati.com/ti/0af1298e422a4c25bda5c94dd97af766.html
3.ebay商品详情页主要包括哪些内容,详情页图片有什么要求ebay商品详情页主要包括哪些内容,详情页图片有什么要求 ? 为什么产品详情页的设计很重要? 因为产品详情页是对商品进行详细描述介绍的页面,其设计极有可能会对用户的购买行为产生直接的影响,好的设计能更直观地展现商品信息,吸引用户并促进购买。 ebay 商品详情页通常有哪些部分?https://www.amz123.com/ask/JQ8dQfME
4.商品详情页设计商品详情页设计是电商运营中至关重要的一环,好的商品详情页设计不仅能够提高转化率,还能增强品牌形象。这篇文章将从商品图片、商品描述和购买流程三个方面,详细阐述商品详情页设计中的7个重要元素。 一、商品图片 商品图片是商品详情页中最关键的元素之一,因为用户购买的第一印象通常来自商品的图片。在商品详情页中,...http://www.chinauci.cn/news/latest/38648.html
5.速卖通装修包括哪些内容呢,速卖通店铺装修基本步骤是什么商品详情页是展示单个商品详细信息的页面,也是买家决定是否购买的重要页面。通过速卖通装修工具,卖家可以自定义商品详情页的布局、背景、配色、字体等,并添加各种元素和内容,如商品图片、描述、参数、评价等,以帮助买家更好地了解商品。 4、其他页面 除了以上三个页面外,速卖通装修工具还支持自定义其他页面,如品牌介绍页...https://www.cifnews.com/article/154889
6.淘宝美工需要做些什么?要学什么?在某些情况下,美工可能需要将多个图片合成到一起,或者将商品图片与背景图、模特等元素进行拼接,营造更加吸引人的效果。 03、广告横幅设计 美工可能需要设计制作淘宝店铺的广告横幅,以吸引用户的眼球并促进点击率和转化率。 04、商品详情页设计 美工可以设计制作商品详情页,包括商品介绍、规格参数、购买须知等,使其更具...https://www.hxsd.com/content/37364/
7.神必淆商品详情页设计思路/操作流程商品详情页,是提高转化率的入口,能够激发顾客消费欲望,树立顾客对店铺信任感,打消顾客的消费疑虑,最终促使顾客下单。换句话说,商品详情,就是我们店铺的脸面,所以一定要重视。 今天分享,从三方入手,分别是: →商品详情页的基本思路; →详情页的基本内容框架; ...https://www.douban.com/note/821763138/
8.电商模板电商海报/主图图标/Banner/详情页设计Canva可画提供了海量的电商模板,包括电商海报、主图图标、电商Banner、电商详情页等,您只需选择喜欢的模板进行制作,即可轻松完成专业级别的电商设计。https://www.canva.cn/groups/e-commerce/
9.商品详情页面展示的多元化商品详情页模块化设计针对这些数据,采用的方案是当一个商品详情页被访问到的时候, 将数据动态渲染/填充到一个 html 模板中去,因为在浏览器展现的时候,数据写死在 html 中的, 直接就显示出来了。 比如一个商品的数据变更了,可能是异步的去更新数据的,可能需要 5 分钟,或者 10 分钟,才能将变更的数据反映的商品详情页中去; ...https://blog.csdn.net/liuerchong/article/details/107496110
10.教你玩转主图创意设计打造高转化率的六步曲主图即发布商品时放在第一位置的图片,在产品发布以后,在买家搜索时首先看到的图片,以及打开宝贝页面后显示的第一张图以及左边的四张图。商品详情页第一屏左侧商品图的第一个位置,叫商品主图,在这个位置出现的视频,即是主图视频。由于商品主图是买家进入详情页第一眼所见,所以主图的呈现效果在整个详情页中显得尤为...https://www.shuaishou.com/school/infos6626.html