为什么你设计的详情页不耐看，也没有购买欲？

写在前面

这周我为大家写了一篇关于详情页设计方面的干货。

这篇文章是希望能从本质上帮助大家理解为什么我们需要设计详情页，怎么设计出合适的详情页，以及帮大家总结了一些常见的在详情页设计方面经常会遇到的问题，顺便带大家欣赏一些优秀的详情页，了解它们所具备的特质。

毕竟，先知道自己哪里不足，再看看别人做得好的地方，有针对性地去改善，我们才能获得进步。

下面我们进入正文咯～

大家都是因为什么原因入行电商设计的？

众所周知，商业设计是为商业服务的。

而电商设计，当然是为各大电商网购平台和卖家店铺、微店等服务的，只要你想在网上卖东西，你就需要展示你的产品，那么你就需要电商设计是为你服务的。

比如电商设计的职责范围非常广，小到主图和各种尺寸的 banner 设计，大到海报设计、首页设计、详情页设计等，全都是电商设计师们需要做的事情。

而实际上大多数成为电商设计师的人，很少有科班出生的，我这里所指的科班是指学电商设计这个专业出身的人，据我目前所知的，大家都是怎么入行电商设计领域的呢？

主要有以下几个原因和途径：

• 本来是做包装设计的，结果顺应业务需要，被老板要求做了电商设计；
• 本来是画插画的，结果顺应业务需要，被老板要求做电商设计；
• 本来是被一些培训机构忽悠说学 UI 设计可以拿高薪，于是花了大几万块去报名学习，结果学完后发现别说拿高薪了，而是根本就找不到 UI 工作，刚好碰到有招电商设计的，于是就去了；
• 正儿八经视觉传达专业或广告学或电子商务等专业毕业，歪打正着或者受前辈学姐学长们影响，从事了电商设计；
• 原本是做运营的，或者做文员的，或者做老师的，但是看着人家做的电商设计页面好有意思，于是就转行做了电商设计；
• 觉得做其他设计太枯燥，而做电商设计非常有意思有创意，于是就转行做了电商设计，比如我当年就是；

所以大家发现没有，严格来讲，电商设计这个领域实际上是没有什么所谓的正规军的。

而且目前处于电子商务老大地位的阿里巴巴也是在 2003 年 5 月份才创立了淘宝网，到了 2009 年才第一次有了双 11 这个大型的电商促销活动，之后网购的形式才被越来越多的消费者接受和熟知，这就吸引了越来越多的商家入驻，自然竞争就越来越激烈了。

这个竞争，除了是入驻商家之间的竞争，还有随着越来越多的电商平台的入场带来的各大电商平台之间的竞争，比如后来居上的京东，还有现在发展势头正猛的拼多多。

其他具体的电商设计发展史和各个平台之间发展细节我就不说了，因为几年前我在我的电商设计书籍《这么设计能热卖》里就已经提到过了。

总而言之，有竞争就意味着会有输家和赢家。在价钱差不多的情况下，低品质的就会被高品质的干掉；品质和价钱差不多的情况下，没有品牌的就会被有品牌的干掉；而都有品牌的情况下，品牌知名度低的就会被品牌知名度高的干掉；而在品牌都差不多的情况下呢，服务差的没新意的又会被服务好的有新意的干掉。

但不是每个消费者都追求大品牌或高品质的，因为每个人的个性、经济实力、喜好等不同的原因，所以那些靠低价走量的商家或平台，那些走专属定制或个性化服务的商家或平台，那些擅于博取消费者眼球或提供细微服务的商家或平台，那些擅于搞跨界合作和创新的商家或品牌，也依旧有生存的空间。

是消费者的多样性，决定了它们的多样性，它们的多样性也决定了电商设计师的多样性，所以你才会看到五花八门的风格和调性的电商设计。

它们无所谓好坏，只有合不合适；

而我们把时间固定在某一瞬间，你会发现每个平台或品牌或商家都有其各自所在的位置，而我们把时间拉长来看，你又会看到每个平台或品牌或商家的位置不是固定不变的。有的上去了，有的下去了，有的消失了，而有的还是在原地不动，当然，还会有一些新兴的面孔出现。而我们电商设计师，就是为以上所有这些处在不同位置的商家或品牌或平台服务的。

我们的最高职责是跟运营、推广、客服、渠道等各个环节一起，协助新面孔上榜，或者协助已上榜的它们往上走，再次就是帮它们维持原有位置和形象，最次就是至少不要让它们消失在大众视野里就够了。

当然，身为电商设计的我们也是一样的道理：我们是跟商家品牌和平台同命运的，我们是多样化的，我们也是面临了诸多竞争的，我们也是希望能往前走的，或者一鸣惊人的，而不是消失在职业的历史长河里。

大家在设计详情页的时候最常遇到的几个问题是什么？

如果说首页设计是线下门店的装潢，那么线上的店铺详情页设计就相当于是门店里所展示的各个产品的说明书了。

线下门店里有导购员，线上店铺里有客服，但去门店购物的消费者是有地域和区域限制的，比如你很少会看到一个一线城市的白领会专门坐飞机来武汉武商广场的 Gucci 专柜买包包，但是你却能看到一个线上的奢侈品店铺可以为来自世界各地的消费者提供购物服务。

门店里的导购员可以做到一对一服务，消费者去门店逛可以看到实物，可以去触摸，去试穿，去试用体验，但是线上购物则做不到这些点，所以也就注定了详情页设计需要肩负起重任，要把每一个产品的卖点展示清楚，详细情况介绍清楚，还要让消费者感到可信。

如果你是大品牌的话，你的详情页设计还需要体现出品牌感、品质感，不能看起来太掉价；如果你的产品目前正在搞促销，你的详情页设计则得把促销感体现出来；如果你的产品有优于其他产品或品牌的卖点，你还得把差异化和产品卖点展示出来；如果你不希望顾客一点击进来详情页就扭头离开，你还得把详情页设计的耐看或有趣，信息直观，浏览体验好一点儿；

。。。。。。等等

而据我所观察的，大部分在详情页设计这块做的不太好的电商设计师们常犯的几个错误，以及所欠缺的方面主要包含以下几个方面：

• 没有创意和想法，只会到处去找模版套或者模仿；
• 不知道去哪找参考或找的参考本身就不好；
• 找到了合适的参考，但是却模仿不出来，也不知道去哪找素材；
• 非科班出身的设计师对色彩和排版都比较欠缺；
• 好不容易把详情页头图设计好了，但是却不知道如何衔接下面的产品展示部分了；
• 不擅长写文案也不擅长挖掘产品卖点；
• 自己设计的详情页总感觉缺少一些质感，不耐看；
• 阴影不会处理，合成不擅长，修图不会；
• 不知道如何绘制或处理一些介绍产品结构原理的内部解剖图；
• 这类目会做了，但是换一个类目做却不会了；
• 不知道如何设计出耐看的，有质感的，或者有趣的详情页；
• 不知道如何把握品牌调性，把控促销感和大牌感之间的平衡；

以上我总结出来的 12 个设计详情页常见的问题，大家自己可以对照着看看。

因为只有知道自己存在哪些问题了，你才能有针对性地去训练和学习，你才会设计出老板或运营满意的详情页，提高客户转化率和留存率的详情页，进而实现加薪或升职的可能性。

优秀的详情页一般具备哪些特质？

明白自身在做详情页设计的时候存在的问题，然后再对照着看看那些优秀的吸引人的详情页设计所具备的一些特质，提升自己的审美，再通过训练来培养自己的动手能力，那么自己才会得到快速的提升。

不过，那些网红店铺和大牌奢侈品的详情页设计我就不说了，毕竟能成为自带流量的网红的是少数，能成为奢侈品的大牌也是少数。

所以网红店铺的详情页设计的再随意，图片就是手机自拍的，文字就是 word 文档敲出来的也不影响销量；大牌奢侈品店铺的详情页就算设计的再简单也不影响它卖高价，只要品牌 logo 那么一放，代言人往那一放，广告使劲砸，商品是正品，图片修图修的完美点就够了。

所以呢，这两种极端特例其实是不太适用于我们这些常规的店铺或品牌来玩的，所以我这篇文章就不分析它们了，我们只说那些常规的店铺或品牌的详情页好了，这对我们来说更有参考价值。

那么那些优秀的详情页一般具备哪些特质呢？我们一起来看看：

1. 详情页的头图设计一定要抓人眼球

如何抓人眼球呢？要么是能准确的体现出产品的卖点，要么设计得有趣一点，要么就设计得有品牌调性一点，根据不同的目的和定位来决定。

比如一款包包，头图部分可以用合成的形式，把包包的容积大和多功能性特点展示出来：

△ 爱华仕双肩母婴包包

比如，洽洽的山核桃味和焦糖味瓜子，头图部分就把那种美味的口感要体现出来，让人忍不住流口水的感觉：

△ 洽洽瓜子

比如，休闲食品的详情页头图设计，则可以把头图设计的趣味一点，给人一种边吃边玩的放松感觉：

△ 洽洽喀吱脆

当然，趣味的同时，也可以体现出产品制作原材料的新鲜感：

△ 洽洽山药脆片

比如卖 suv 轮胎的详情页，你看下面这样的头图设计，是不是感觉超酷超帅？深得 suv 车主有没有？毕竟选择开 suv 的人内心深处一般都是有点追求酷和 man，自由和狂野感觉的人，不论男女。

△ 威狮轮胎

再比如，头图部分也不一定要做的太炫技，就干净、简洁清透一点也行：

△ 海尔

△ 直白吹风机

这种 ins 风格现在挺流行的，而且任何类目其实都适用于这种风格和调性，只要它想体现的是场景感，和生活品味。

实现形式也是多种多样的，不管是摄影、C4D 还是合成的形式其实都可以做出来，主要考验的是你的光影细节处理、透视和修图能力了。

2. 整体详情页的设计调性要符合产品本身的特点

不知道大家发现没有，其实你的产品的品牌、价格、功能等特质，就决定了你的文案应该怎么去写，而你的产品和品牌特质以及文案，又决定了你的详情页头图的设计调性，而你的详情页头图的设计调性又决定了你下面内容部分的设计调性。

它们是一环扣一环的，而且从上至下是协调统一的整体，比如：

△ 狮威轮胎&洽洽瓜子

△ 直白吹风机

3. 产品的卖点和优势要清晰地展示出来

其实一个好的详情页头图设计就已经把产品主要的卖点和优势展示出来了，但是涉及到更细致的一些结构和细节部分，还是需要在下面继续做展示和解析。

比如，我们来看一看不同类目的产品结构和细节是如何展示的：

体现玩偶的布料材质：

展现吸奶器的工作原理，体现安全和温和感：

展现水箱的导流设计原理：

展现轮胎的降噪原理和特质：

展示空气净化器的工作原理：

体现纸尿裤的轻柔和透气性：

展示蒸奶器的阻隔污染功效：

展示调奶器的过滤原理，展现其安全性能：

展现空气消毒器的工作原理：

展现夹板夹头发的丝滑感：

展现电动牙刷的清洁效果：

还有很多类目和优秀的原理展示图我就不继续放了，大家平时多养成收集的习惯，给自己建立一个资料库，当你自己要做设计的时候多去参考和模仿，久而久之也就信手拈来了。

而且不知道大家发现没有，这些效果里面，有的是用合成完成的，有的是用手绘的形式完成的，还有的是直接用 C4D 建模的形式完成的，再还有更复杂的则需要多种方式结合来完成了。

所以，多看多积累是一方面，自己的手上功夫也需要加强哦。

4. 擅用图标解说

很多优秀的详情页设计里不可或缺的一个部分就是用图标的形式来代替大段的文字描述，这样图文结合的形式不仅更美观，而且可以让页面信息看起来更直观。

而详情页里的图标设计样式跟店铺首页部分的优惠券一样的，是可以根据页面的风格而设计成不同风格的，比如目前主流的一些图标风格，如下图所示：

简笔画线稿风格：

为了不让线稿图标看起来太单调，也可以结合一些小色块或者换个颜色点缀试试看：

而且线稿图标也可以给他穿上不同的外衣，相当于是有个罩子把他们框起来展示，这取决于你的详情页风格是什么样的了，比如：

扁平风格的图标：

男性化，科技感的图标风格：

C4D 立体风格的图标：

其他还有很多风格和类型的详情页图标设计我就不一一展示了，反正大家知道图标的设计也是可以风格多种多样就行了，这主要由你的详情页设计风格是什么样，你自己会哪种实现手段，以及你的执行时间够不够来决定。

5. 同一个系列的产品详情页，风格要保持统一性

前面我们都是分析的单个详情页的情况，实际上还应该从整体来看。

比如无论是出于节省时间和人力成本的角度，还是从品牌视觉统一性的角度，同一个系列的产品详情页设计应该要做到以下几点：

• 风格一致
• 可模板化
• 色彩统一
• 板式构图统一

当然，同一个系列的产品详情页设计看起来统一的同时，在氛围点缀物和一些局部细节上允许有略微的差异，也是很有必要的，这样才不会显得视觉疲劳。

如下图所示：

△ 上花间集，下毛戈平

6. 擅于引导用户一直往下看的

最重要的是，优秀的详情页绝不只是好看这么简单，最重要的是擅于引导用户一直往下看，因为详情页一般都很长，这么长的页面你还愿意一直往下滑，这是需要很多技巧的，而且看完了就想买的那种。

而要做到这一点，考验的则是设计师以下几个方面的综合能力体现：

• 前期对客户的喜好和产品特性有足够地了解；
• 从摄影环节开始前，设计师就会去沟通好自己的创意要求、产品角度、拍摄场景，以及全程跟进：详情页头图部分的设计就要把用户的吸引力抓住（至于怎么抓住我前面说了）；
• 文字排版的舒适度和节奏感，符合手机用户的阅读习惯；
• 整体配色的舒适度和节奏感；
• 配图的节奏感把控，要有大有小，注意留白；
• 产品修图很重要；
• 整体的细节把控（包括执行手法和完整度、光影、质感肌理、文字大小和间距、留白、修图等）

如下图所示：

△ 巴布豆纸尿裤&某品牌儿童睡衣

△ 恰恰&某品牌酸奶

△ 洽洽

还有很多案例我就不一一展示了，大家只要记住，几乎所有的优秀的详情页都具备以上这些特质就好了。

写在最后

当然，以上这些这些知识点不是一句两句，不是一篇文章就能讲完的，涉及到了思维创意、沟通能力、团队协作、营销定位、设计基本功、执行力、性格是否细心耐心等各个方面，要改善不是一朝一夕的事情。

大家如果想提升的话，还是多对比看看自己目前和那些优秀的详情页设计之间的差距吧，主要从思维创意/手上功夫/审美和沟通/性格和耐心等等方面，一步步去改善。然后缺啥补啥，后期不断的去多看，多学习，多模仿，多思考就好了。

哦对了，以上所有详情页设计案例均出自点奥文化团队，感谢阿赛老师的提供，还有很多优秀的设计案例，我们以后有机会再分享吧，希望对你们有用。

我们，下期再见！

欢迎关注作者的微信公众号「做设计的面条」，一个干货与文笔俱佳的美女设计师。