电商详情这样设计，不行!
上一期，也就是上周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位同学送出庞门正道定制本各一本,这个是只送不卖的纪念品，纪念你曾经努力的意义。
下一期教程出来的时候公布优秀结果，投稿邮箱：
2994247228@qq.com。
-----------------------------------------------
上期练习一共收到55份作品，大家辛苦了：）
全部作品截图：
很多同学都十分用心的在做练习，相信时间会见证你们的进步，下面精选出3位同学送出小礼物：
01号作品
时空者
两张作品的表达都很到位，把产品的卖点呈现得很突出。
02号作品
sansna
场景选得不错，光影细节还可以更细化一些，产品与整个场景的亮度不在一个层次上。
03号作品
克利夫兰孤狼
这位同学一直在坚持做练习，而且每次都做得挺不错，非常值得鼓励！
以上三位送出庞门正道定制本各一个！
-----------------------
好了，
学到干货的同学请大方地点击一下喜欢作者！！：）
这样下一期干货来得更快！
(在公众号回复：色彩教程，排版教程，有惊喜)
越努力，越幸运。
这里是庞门正道。
Send to Author