教你电商APP商品详情页设计套路！UI／UE必须懂的营销设计思维！

 前言 

电商APP重点在于商品详情页，打造一个优秀的商品详情页，完全能够提高转化率！

今天从UI设计、交互体验、文案撰写、产品的商业模式来聊一聊电商app商品详情页是怎么“套路”用户的［偷笑］。

 淘宝vs京东 

说起电商APP肯定少不了“淘宝”与“京东”，看下图淘宝与京东的产品详情页设计！

最大的不同就是京东比淘宝少了“立即购买”按钮，这是为什么？

经营模式上分析：

早期的淘宝是C2C模式就如现在的咸鱼和58，之后入驻了企业，也就变成B2B2C模式，但是淘宝C2C的DNA基因还是大量存在。

京东起初是自营B2C模式自营物流配送，如今也入驻第三方企业商家，所以模式也变成了B2B2C模式，但是京东自营B2C模式还是在平台占据很大比例。

从交互上分析：

交互上的体现也是一样的，点击淘宝的“加入购物车”需要用户来选择规格，京东则默认选中展示的商品，更快捷加入购物车。

淘宝商品详情页弱化了购物车按钮放在了右上角，京东则把购物车放在了加入购物车旁边。

当把商品加入购物车后，购物车页面淘宝也不会选中加入的商品，京东则会选中用户加入购物车的商品。

所以：

从经营模式上分析，两家的侧重点不一样，交互方式也就会有差异化，淘宝平台更看重单件快速交易。京东则是希望用户把想买的东西都放购物车，统一结算，平台也能更方便的统一配货配送。

所以不难理解，B2C的产品会更突出加入购物车，例如纯B2C的小米商城和网易严选，都是更突出加入购物车。

        详情页细节分析 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第三让用户产生价值感受（走心、解决用户痛点与担忧）；

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

 营销心理学效应 

锚定效应

用场景化解释，当你在一家西服店买西服，导购为你连续推荐了三款3000多的西服，第四件为你推荐了一件款式质量都差不多的只要1800，这时候你就会觉得好便宜，这就是锚定效应。

再举个例子，快餐店墙上的菜单，从上到下依次从便宜到贵，但最后一个很便宜，这样最后一个就会大大提高销量。（套路！满世界的套路！）

那么这个锚定效应是怎么运用到app产品的呢？例如，一件商品标价200元，但是可以领劵，店铺送你30元优惠券，这样一来标价200，结账170，用户就会觉得很值。

诱饵效应

两家的商品价格都一样，但是一个有赠品，那就会把用户吸引过来，再比如，在淘宝买东西，当你收到商品后，会发现商家多送了好多东西，这样买家很容易给好评，退换货的比例也会降低，还能产生二次购买效应。

还有商家的活动，例如卖奶茶的，第二杯半价，两件八折，买一送一，都是诱饵效应。

从众效应

上文中提到了从众效应，这里就不多解释，列举个app商品详情页案例，很多详情页会有这样的一个微交互提示，“177xxxxxx177刚刚购买了此产品”一闪而过。还有经常可以看到，“大家都在看”，“购买此商品的人也购买了这些商品”这样就起到了从众效应。

稀缺效应

这个不难理解，app商品详情页中很多都会，提示仅剩几件，有些app永远是剩余几件商品，但是永远卖不完，限时活动也会有这样的效应，给用户的感觉就是不买马上就没了，不买占不到便宜。

损失规避

人通常会把注意力集中在自己会失去什么，而不是得到什么，对于损失有一种强烈的恐惧感，具体怎么运用，上面文章中做了具体解释。

心理账户

两家饭店同样消费满500送劵，一家送现金抵用劵，一家送8折优惠劵，拿到现金抵用劵的客户，肯定会更多再次光顾，因为他们手里拿的就是钱啊，不花我就亏了。而八折抵用劵，并没有改客户更有力的价值感受，他们会想，我去了还是消费， 而并非享受了优惠。

所以在app中送现金抵用劵则转化率会更高。

最后

营销心理效应，会在商品详情页起到很重要的转化作用，要善于运用。

设计不同于艺术，设计往往带有目的性，具有商业属性，所以设计师只有结合更多的维度思考，才会设计出好的产品。

最后说一句，一味追求视觉表现的UI设计师，都是耍流氓！

原文始发于微信公众号（互联网设计帮）：教你电商APP商品详情页设计套路！UI／UE必须懂的营销设计思维！