电商详情这样设计，不行!

上一期，也就是上周4的《电商详情这样设计，运营都开心坏了！》，数据是过去2个月教程里面最好的一篇了，本以为大家怎么学习热情下降了，结果原来只要胃口对得上，还是非常爱学习的。

所以，

今天的文章还是讲电商详情设计。

在上篇教程中，我给大家分享了几招电商详情设计常用的方法。这篇我会换一个角度，通过反面案例来讲述电商设计中新手们常犯的错误。

上期教大家可以怎么做，

今天教大家不能怎么做。

所以这期就是上期的镜像篇。

OK，还是按惯例热身一下，进入干货时间！

这里的节奏，当然不是动次打次的那种。

说的是视觉上的节奏感。

用户在看产品详情的时候，其实就有点类似于看一部电影。太平淡的剧情容易让人失去耐心，而一直激烈则会让人感觉到视觉疲劳，难以坚持下去。要想一直牢牢抓住用户的注意力，情节就必须有起有伏。

对应到视觉设计中，就是信息排布的节奏感。只有良好的排版节奏感才可以让人很舒服的阅读下去。

来看一个阿芙精油的页面：

这个页面最大的问题就是没有重点，整体太平淡了，很难引起用户的情绪起伏。

再看一个例子：

这个页面细看一下，其实信息量并不是很大，但是由于糟糕的排版节奏，让整个页面十分沉闷。

电商详情页都是长条型的，所以在排版的时候，屏与屏之间的过渡就变得十分重要。上面两个反面例子都是在过渡的时候处理得很差，所以会导致视觉上节奏不明确。

我给大家总结一个最基本的排版原则：

只要按照这样的节奏走，肯定错不了。

来看实操案例。

我们将上面说到的阿芙精油的页面优化一下。

上面我们分析过，阿芙的这个页面主要问题是两个：一是文字信息多，而且没有重点。二是整体视觉过于平淡。

所以我们优化的整体思路就是减少信息密度，排版上图文过度要有节奏感。

优化结果：

最终大图：

我们可以看到优化后的页面图文分离，信息密度适中，再加入色彩的变化，整体节奏感比之前好了很多！

现在电商的流量手机端占了绝对大头，所以我们做设计的时候一定要有竖屏思维。

竖屏的最大特点就是用户会快速的向下滑动页面，所以用户的浏览习惯有两个特性：

一是快，在每屏停留的时间非常短暂，2-3秒不能看明白的内容基本就跳过了。

二是视线是单向的，所以我们的信息编排要尽量简单、清晰。多利用上下的空间排版，少用左右排版。

很多新手在做详情页的时候都不具有竖屏思维，想当然的把内容直接填满页面，这样会造成信息的碎片化严重。

我们经常可以看到这样的详情页：

过于碎片化的信息，会让用户不知道从哪里开始阅读，信息传达的效率低下。

从设计上看，这样的页面上由于使用了过多的点和线的元素，画面被分割得太厉害：

这种排版方式除了视觉上不好看，还会造成什么后果呢？

看下面这张图你就明白了：

要解决这个问题其实也很简单，一招就可以搞定。

下面我通过一个实操案例来演示。

其实很简单，我们将画面上零碎的点进行合并，组成一个面，这样就减少了画面上的躁音。

优化后的页面：

这里我只优化了其中一部分内容，其它部分的方法也差不多，就是将一小块一小块的内容进行合并，形成更大块的面。文案也集中到一块区域，这样就可以解决信息碎片化的问题。

最后看下大图：

整个页面是不是舒展了很多!

OK，继续。

图文不符是指画面的内容没有精确的表达出卖点所在，这样的设计没有说服力。

最常见的情况是，有些设计师不管文案讲的什么内容，都往画面上摆一个产品图，这样当然不能说是错的，但确实是不够精准的。

比如下图，画面要表达的信息是TYPE-C的接口内部是对称设计的，可以正反插。但是作者放了这根线的正反面，而且是不同颜色的，如果不看文案，用户会觉得他在表达这根线是有两种颜色可选，因此图文并不相符。

优化稿：

剪去多余的信息，只对接口进行特写放大，让用户看清楚它的内部结构，这样就一目了然了。

再看一个例子。

下面是一张化妆品的详情页，是说该产品用了一个很高大上的技术，但是整个画面却只放了几个标准的产品图，让人感觉不到专业性。

那怎么表达出专业性呢？

还记得上篇教程讲的内容吗？我们可以用参照物。用代表专业的人和物体来体现出产品的专业性。

用科研人员来体现出产品的专业性，这样是不是就非常有说服力了！

看下大图：

记住，电商详情页面时刻都在做推销的工作，设计师所做的，就是将每一句文案变得更打动人，更有说服力！

太有说服力了！

很多运营在策划详情页的时候，往往喜欢堆砌过多的卖点，可能他们自己也不确定产品的最大卖点是什么，所以就全堆上去，觉得总会有一个卖点击中用户。

殊不知道这样的想法犯了一个传播学上最基本的道理，那就是信息量是传播性的敌人。信息越多，指向性越弱，传播力度越弱。

你觉得总有一个卖点可以击中用户，但实际上可能击中用户的那个卖点，最后被用户忽略了，他根本就没看到。

用户的注意力是有限的，他花在你的图上面的时间也是有限的，所以你必须要提炼出用户最关心的卖点，帮用户节省时间。

详情页上面也经常看到类似的问题：

文案上写了这么多卖点，图片怎么表达呢？显然一张图不可能表达出这么多卖点，所以只能放一个标准的产品图，这样实际上啥也没说。

之所以说详情页要做到一屏一卖点，不只是因为视觉上更好看，更重要的是想要图片和文案有更高的契合度，达到 1+1 > 2 的效果。

下面我们沿着这样的思路，将上面的图片优化一下。

第一步，我们要提炼卖点，把文案重点放在“补水保湿”上。

因为整个产品是黑色的，所以我选择了一张很有质感的丝质的背景图。

接着调整产品和背景的光影效果，让它们更融合。

整体色调我也微调了一下，让暗处带一点点蓝色，这样会比纯灰色更有质感一些。

最后加一个水泡呼应一个补水的主题，再补齐文案，整个画面就完成了！

对比一下效果：

我们可以看到，将卖点进行提炼之后，整个画面的主题特别清晰，视觉传达也非常到位了！

OK，这期的内容就到这，

接下来该你试试身手了！

----------------------------------

结合今天讲的内容，自拟素材和文案，出1-4张练习稿。

尺寸：

宽度 1000px，高度不限。

格式：

提交作品的时候，需要把你的文件命名修改为：

你的名字-你的QQ-练习作品，如：阿门-QQ12345678-练习作品.jpg

（不要ai或者cdr等格式，也不要压缩包）

邮件标题：

20200326-你的名字-QQ-练习作品

请注意-------------------

从这期练习开始，大家需要在练习作品中添加“庞门正道”或者“Artman design”的文字，以防止有人从网上盗图。

--------------------------

我会选择3位同学送出庞门正道定制本各一本,这个是只送不卖的纪念品，纪念你曾经努力的意义。

下一期教程出来的时候公布优秀结果，投稿邮箱：

[e-mail]。

-----------------------------------------------

上期练习一共收到55份作品，大家辛苦了：）

全部作品截图：

很多同学都十分用心的在做练习，相信时间会见证你们的进步，下面精选出3位同学送出小礼物：

01号作品

时空者

两张作品的表达都很到位，把产品的卖点呈现得很突出。

02号作品

sansna

场景选得不错，光影细节还可以更细化一些，产品与整个场景的亮度不在一个层次上。

03号作品

克利夫兰孤狼

这位同学一直在坚持做练习，而且每次都做得挺不错，非常值得鼓励！

以上三位送出庞门正道定制本各一个！

-----------------------

好了，

学到干货的同学请大方地点击一下喜欢作者！！：）

这样下一期干货来得更快！

(在公众号回复：色彩教程，排版教程，有惊喜)

越努力，越幸运。

这里是庞门正道。