详解电商商品详情页的设计招数
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">电商APP重点在于商品详情页，打造一个优秀的商品详情页，完全能够<span style="color: black;">加强</span>转化率！本文就从UI设计、交互体验、文案撰写、<span style="color: black;">制品</span>的<span style="color: black;">商场</span>模式来聊一聊电商APP商品详情页是怎么“<span style="color: black;">招数</span>”用户的。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RVsOdW48Y75TwP~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723661591&x-signature=3IAB3dyZseFsUMe8PVA73p6RRJE%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">淘宝vs京东</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">说起电商APP肯定少不了“淘宝”与“京东”，看下图淘宝与京东的<span style="color: black;">制品</span>详情页设计！</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RVsOdWXIgMRm8E~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723661591&x-signature=fkVBIl53KzPV9eJvgO7sffv%2BhoY%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最大的<span style="color: black;">区别</span><span style="color: black;">便是</span>京东比淘宝少了“立即购买”按钮，这是<span style="color: black;">为何</span>？</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">经营模式上分析</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">初期</span>的淘宝是C2C模式就如<span style="color: black;">此刻</span>的咸鱼和58，之后入驻了企业，<span style="color: black;">亦</span>就变成B2B2C模式，<span style="color: black;">然则</span>淘宝C2C的DNA基因还是<span style="color: black;">海量</span>存在。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">京东起初是自营B2C模式自营物流配送，如今<span style="color: black;">亦</span>入驻第三方企业商家，<span style="color: black;">因此</span>模式<span style="color: black;">亦</span>变<span style="color: black;">成为了</span>B2B2C模式，<span style="color: black;">然则</span>京东自营B2C模式还是在平台占据很大比例。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">从交互上分析</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">交互上的<span style="color: black;">表现</span><span style="color: black;">亦</span>是<span style="color: black;">同样</span>的，点击淘宝的“加入购物车”<span style="color: black;">必须</span>用户来<span style="color: black;">选取</span>规格；京东则默认选中展示的商品，更快捷加入购物车。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">淘宝商品详情页弱化了购物车按钮放在了右上角；京东则把购物车放在了加入购物车旁边。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当把商品加入购物车后，购物车页面淘宝<span style="color: black;">亦</span>不会选中加入的商品；京东则会选中用户加入购物车的商品。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">小结</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从经营模式上分析，两家的侧重点不<span style="color: black;">同样</span>，交互方式<span style="color: black;">亦</span>就会有差异化，淘宝平台更看重单件快速交易。京东则是<span style="color: black;">期盼</span>用户把想买的东西都放购物车，统一结算，平台<span style="color: black;">亦</span>能更方便地统一配货配送。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RVsOdWt9isBetZ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723661591&x-signature=QExc8WvsHjKAsmx%2FJudxZCsLEEs%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>不难理解，B2C的<span style="color: black;">制品</span>会更<span style="color: black;">明显</span>加入购物车，例如纯B2C的小米商城和网易严选，都是更<span style="color: black;">明显</span>加入购物车！</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">设计APP商品详情页的四个<span style="color: black;">过程</span></h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">详情页细节分析</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面来分析优秀的商品详情页是从<span style="color: black;">那些</span>方面打动用户、刺激用户购买的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当<span style="color: black;">咱们</span>在设计一个商品详情页时候，要把用户当成<span style="color: black;">咱们</span>的男女<span style="color: black;">伴侣</span>来对待，<span style="color: black;">全部</span>设计流程分为四步：</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RVsOdXFBuilFPg~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723661591&x-signature=iJMmqA%2B6Eil1Dp3oPykFdVwNigU%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户购买商品其实<span style="color: black;">便是</span>这个过程：<span style="color: black;">首要</span>认识商品（1米8大个又帅），随后信任商品（人品还好），从而产生购买价值（跟他<span style="color: black;">爱情</span>不错），<span style="color: black;">最后</span>购买转化（相守结婚）！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">分析两个卖奢侈品的APP商品详情页：</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RVsOdXT9m25asf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723661591&x-signature=dBIT7DgWRBm2UfwygOmFWUbZoNs%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户认识商品的过程其实是非常短暂的可能<span style="color: black;">便是</span>几秒钟。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">米兰的页面设计，<span style="color: black;">第1</span>眼并<span style="color: black;">无</span>让用户感知到商品，<span style="color: black;">亦</span><span style="color: black;">无</span><span style="color: black;">明显</span>奢侈品最关键的点，品牌！标题字行间距<span style="color: black;">很难</span>阅读，整体UI界面的设计给人很强的淘宝风！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">寺库很好的做了区别于淘宝京东的差异化设计，<span style="color: black;">创立</span>自己的品牌认知，首屏高清大图牢牢抓住用户，<span style="color: black;">明显</span>了品牌TUPLUS/途加，整体给人信任感！（只是<span style="color: black;">由于</span>在人群中多看了你一眼，再<span style="color: black;">亦</span><span style="color: black;">不可</span>忘掉你容颜）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户快速认识<span style="color: black;">认识</span>商品是远远<span style="color: black;">不足</span>的，下面来看两款<span style="color: black;">制品</span>向上滑动屏幕给用户的信息和感受，<span style="color: black;">这儿</span>就要跟用户<span style="color: black;">创立</span>信任了！</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RVsOdoh9wo36A3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723661591&x-signature=NwtWKSXQKkPJT6Xs9ItnTH0Jl7U%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">没错，米兰并<span style="color: black;">无</span>评论和商品详情，真的要命，滑动<span style="color: black;">不足</span>一屏就<span style="color: black;">举荐</span><span style="color: black;">关联</span><span style="color: black;">制品</span>了，<span style="color: black;">此时</span>候<span style="color: black;">非常多</span>用户早已逃之夭夭了，<span style="color: black;">无</span><span style="color: black;">创立</span>信任<span style="color: black;">基本</span>很难有结果。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">评论功能<span style="color: black;">常常</span><span style="color: black;">能够</span>创造热销的氛围，<span style="color: black;">按照</span>从众效应其它用户的<span style="color: black;">评估</span>能够引导用户作出判断，指引用户的心理和<span style="color: black;">行径</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如一个<span style="color: black;">女子</span>子认识一个男<span style="color: black;">孩儿</span>，<span style="color: black;">女子</span>子身边的人<span style="color: black;">伴侣</span>闺蜜都说这个男<span style="color: black;">孩儿</span>不错！好！值得<span style="color: black;">委托</span>！<span style="color: black;">女子</span>子可能就会听从她们的话，<span style="color: black;">最少</span>能<span style="color: black;">加强</span>对这个男<span style="color: black;">孩儿</span>的好感！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>追<span style="color: black;">女子</span>要先搞定她的闺蜜，<span style="color: black;">否则</span>闺蜜说一句“我觉得这个人不怎么样”你就完了！有点跑题了！总之<span style="color: black;">评估</span>是能够<span style="color: black;">创立</span><span style="color: black;">基本</span>信任感的！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">寺库的页面交互是非常符合用户心理的，<span style="color: black;">始终</span>向上滑动的流程：商品－评论－详情－<span style="color: black;">举荐</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">评估</span><span style="color: black;">无</span>完全打动用户，<span style="color: black;">创立</span>信任，<span style="color: black;">那样</span>详情页就得发大招了，<strong style="color: blue;"><span style="color: black;">制品</span>的详情能<span style="color: black;">不可</span>走进用户心里，<span style="color: black;">认识</span>用户，<span style="color: black;">处理</span>用户痛点是非常之关键！</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">想象一下用户买奢侈品都会关注<span style="color: black;">那些</span>点，<span style="color: black;">全部</span>购买流程会有什么担忧，当然<span style="color: black;">亦</span>要<span style="color: black;">明显</span><span style="color: black;">制品</span>的核心卖点。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">TUPLUS/途加这款<span style="color: black;">制品</span>详情页是<span style="color: black;">这般</span>的流程：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">介绍此<span style="color: black;">制品</span>斩获两项国际大奖；之后<span style="color: black;">制品</span>功能细节介绍；中间加了购买奢侈品形象人群<span style="color: black;">运用</span>场景（打造一个好的人像<span style="color: black;">运用</span>场景，会让用户联想到自己<span style="color: black;">运用</span>时形象气质）；后面<span style="color: black;">仔细</span>介绍<span style="color: black;">制品</span>的权威性——正品<span style="color: black;">保准</span>、资质证书，这都能<span style="color: black;">特别有</span>力地<span style="color: black;">处理</span>用户的担忧和痛点！</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RVsOdp623nRTnb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723661591&x-signature=fz4cS%2BKMDmBtAq9Hg5HSbQWElV4%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">详情页<span style="color: black;">处理</span>用户的担忧和痛点<span style="color: black;">表现</span><span style="color: black;">制品</span>价值。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">商品权威鉴定<span style="color: black;">仔细</span>介绍有图有真相，点击进入“寺库鉴定”页面，<span style="color: black;">首要</span>视频介绍教你怎么辨别<span style="color: black;">制品</span>的真伪，<span style="color: black;">咱们</span>有专业的鉴定<span style="color: black;">制品</span>真伪团队、团队发展历程、行业的资质证书等等信息都传递给用户，<span style="color: black;">制品</span>的安全<span style="color: black;">保证</span>，是值得购买的，这就会让用户从<span style="color: black;">基本</span>信任到有价值认可。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当用户下单后，用户会有“损失规避”效应，（意指人们<span style="color: black;">得到</span>损失时产生的痛苦远大于<span style="color: black;">得到</span>收益时所带来的<span style="color: black;">愉快</span>），这个时候下单成功页面<span style="color: black;">倘若</span>就提示“购买成功”的字样，用户就不会感受到<span style="color: black;">刚才</span>损失的心理安慰，弄<span style="color: black;">欠好</span>用户<span style="color: black;">认识</span>到自己冲动消费，马上就退单了！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span><span style="color: black;">这儿</span><span style="color: black;">能够</span>用到<span style="color: black;">有些</span>，一语双关的文案，例如：“恭喜你<span style="color: black;">作为</span>第xxx个有品味的人”，“恭喜你即将<span style="color: black;">持有</span>给你带来美好生活的xxxx<span style="color: black;">制品</span>”，总之即说明了<span style="color: black;">咱们</span>的<span style="color: black;">制品</span>好，又夸了用户有品位，<span style="color: black;">或</span>描绘<span style="color: black;">制品</span>给用户带来什么好的体验场景，<span style="color: black;">这般</span>就大大降低了“损失规避”效应带来的痛点！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">最后总结一下，设计APP商品详情页的四个<span style="color: black;">过程</span>：</strong></p>让用户快速<span style="color: black;">认识</span>认识<span style="color: black;">制品</span>；取得用户对<span style="color: black;">制品</span>的信任；让用户产生价值感受（走心、<span style="color: black;">处理</span>用户痛点与担忧）；<span style="color: black;">最后</span>实现<span style="color: black;">制品</span>购买的转化（售后良好体验、形成口碑、促进二次购买）。<h2 style="color: black; text-align: left; margin-bottom: 10px;">营销心理学效应</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">锚定效应</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用场景化解释，当你在一家西服店买西服，导购为你连续<span style="color: black;">举荐</span>了三款3000多的西服，第四件为你<span style="color: black;">举荐</span>了一件款式质量都差不多的只要1800，<span style="color: black;">此时</span>候你就会觉得好便宜，这<span style="color: black;">便是</span>锚定效应。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">再举个例子，快餐店墙上的菜单，从上到下依次从便宜到贵，但最后一个很便宜，<span style="color: black;">这般</span>最后一个就会大大<span style="color: black;">加强</span>销量！（<span style="color: black;">招数</span>！满世界的<span style="color: black;">招数</span>！）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span>这个锚定效应是怎么运用到APP<span style="color: black;">制品</span>的呢？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如，一件商品标价200元，<span style="color: black;">然则</span><span style="color: black;">能够</span>领劵，店铺送你30元优惠券，<span style="color: black;">这般</span>一来标价200，结账170，用户就会觉得很值！</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">诱饵效应</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">两家的商品价格都<span style="color: black;">同样</span>，<span style="color: black;">然则</span>一个有赠品，那就会把用户吸引过来。再<span style="color: black;">例如</span>，在淘宝买东西，当你收到商品后，会<span style="color: black;">发掘</span>商家多送了好多东西，<span style="color: black;">这般</span>买家很容易给好评，退换货的比例<span style="color: black;">亦</span>会降低，还能产生二次购买效应！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">还有商家的活动，例如卖奶茶的，第二杯半价，两件八折，买一送一，都是诱饵效应。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">从众效应</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上文中<span style="color: black;">说到</span>了从众效应，<span style="color: black;">这儿</span>就不多解释，列举个APP商品详情页案例：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">非常多</span>详情页会有<span style="color: black;">这般</span>的一个微交互提示，“177xxxxxx177<span style="color: black;">刚才</span>购买了此<span style="color: black;">制品</span>”一闪而过。还有经常<span style="color: black;">能够</span>看到，“<span style="color: black;">大众</span>都在看”，“购买此商品的人<span style="color: black;">亦</span>购买了这些商品”<span style="color: black;">这般</span>就起到了从众效应！</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">稀缺效应</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个不难理解，APP商品详情页中<span style="color: black;">非常多</span>都会提示仅剩几件，有些APP永远是剩余几件商品，<span style="color: black;">然则</span>永远卖不完。限时活动<span style="color: black;">亦</span>会有<span style="color: black;">这般</span>的效应，给用户的感觉<span style="color: black;">便是</span>不买马上就没了，不买占不到便宜！</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">损失规避</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">人<span style="color: black;">一般</span>会把<span style="color: black;">重视</span>力集中在自己会失去什么，而不是得到什么，<span style="color: black;">针对</span>损失有一种<span style="color: black;">剧烈</span>的恐惧感，<span style="color: black;">详细</span>怎么运用，上面<span style="color: black;">文案</span>中做了<span style="color: black;">详细</span>解释！</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">心理账户</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">两家饭店<span style="color: black;">一样</span>消费满500送劵，一家送现金抵用劵，一家送8折优惠劵，拿到现金抵用劵的客户，肯定会<span style="color: black;">更加多</span>再次<span style="color: black;">光临</span>，<span style="color: black;">由于</span><span style="color: black;">她们</span>手里拿的<span style="color: black;">便是</span>钱啊，不花我就亏了。而八折抵用劵，并<span style="color: black;">无</span>改客户更有力的价值感受，<span style="color: black;">她们</span>会想，我去了还是消费， 而并非享受了优惠！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>在APP中送现金抵用劵则转化率会更高！</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">最后</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">营销心理效应，会在商品详情页起到很重要的转化<span style="color: black;">功效</span>，要善于运用。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设计<span style="color: black;">区别</span>于艺术，设计<span style="color: black;">常常</span>带有目的性，<span style="color: black;">拥有</span><span style="color: black;">商场</span>属性，<span style="color: black;">因此</span>设计师<span style="color: black;">仅有</span>结合<span style="color: black;">更加多</span>的维度思考，才会设计出好的<span style="color: black;">制品</span>！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后说一句，一味追求视觉表现的UI设计师，都是耍流氓！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">作者：吴星辰，<span style="color: black;">微X</span>公众号：互联网设计帮</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由 @吴星辰 原创发布于人人都是<span style="color: black;">制品</span>经理。未经许可，禁止转载。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">题图来自Unsplash，基于CC0协议</p>
在遇到你之前，我对人世间是否有真正的圣人是怀疑的。 期待更新、坐等、迫不及待等。 楼主的文章深得我心，表示由衷的感谢！ 你的见解真是独到，让我受益匪浅。
页:
[1]