电商视觉营销：详情页视觉设计PPT教学课件.pptx

详情页视觉设计项目六

YCF01详情页布局03制作商品详情页02详情页设计理念目录CATALOG

思政课堂2020年年初，一场新型冠状病毒肺炎疫情席卷全国。在我国政府的正确引导下，中国人民战胜了疫情。请你为一家生产口罩的企业设计网店详情页，要求突出“战疫”元素，突出中国的医生、护士、大众对疫情的抗争。请将你的设计思路写在下面，并思考中国能够获得“抗疫”胜利的原因。

详情页视觉设计是针对网店中某个商品的视觉营销。详情页视觉设计的质量决定了被浏览的商品是否会转化为订单。详情页视觉设计是一项具体而细致的工作，要考虑到经营者和消费者的双重需求，尽可能高效率地利用有限的空间展示商品，通过店铺的整体风格和内部设计为消费者提供便捷、舒适的网络购物环境，形成美好的购物经历。项目导读

01掌握网店商品详情页的布局。02理解网店商品详情页设计的主要思路。学习目标03能够制作详情页焦点图。04能够制作详情页搭配建议模块。05能够制作商品亮点图。06能够制作详情页商品展示图。07能够制作详情页商品细节图。

01详情页布局一、焦点图模块二、商品展示模块三、商品亮点模块四、商品细节模块五、商品规格模块六、商品功能展示模块

一、焦点图模块焦点图作为详情页面里的一个重要部分，通常采用5~8张图片轮播，从页面中凸显出来，在颜色和设计元素上又和详情页保持统一，如图所示。焦点图模块指在详情页中最明显的位置，一般是用图片组合轮播的形式，展示商品图片的模块。提示

二、商品展示模块摆拍图的拍摄成本相对较低，大多数卖家自己也能操作。摆拍图的基本要求就是把宝贝如实地展现出来，通常需要突出商品自身的特点，讲究干净、简洁、清晰，因此最好采用纯色背景来凸显产品，如图所示。1.摆拍图

二、商品展示模块场景图能够在特定的场景中展示商品，同时衬托商品，但通常需要较高的拍摄成本和一定的拍摄技巧，如图所示。2.场景图这种拍摄手法适合有一定经济实力，有能力把控商品展现尺度的卖家。提示

三、商品亮点模块商品亮点模块将商品的优点、亮点图文并茂地展示给消费者，不是简单的信息罗列，而是将商品的功能、材质、说明等商品属性参数压缩整合，优化阅读，如图所示。

四、商品细节模块商品细节模块对商品的细节重点展示。商品细节模块是让消费者更加了解这个商品的主要手段，也是对最后的成交起到关键性作用的一步。如图所示。

五、商品规格模块商品规格模块主要展示商品的尺寸、材质、重量等商品重要参数。如果图片在拍摄的时候没有参照物，会经常有消费者在收到商品之后发现跟预期的尺寸、性能相差太多要求退货。因此我们需要加入商品规格模块，如此才能让消费者对商品有正确的预估，如图所示。

六、功能展示模块和商品细节模块类似，功能展示模块的主要是对商品各个功能做详细的解析。因为图片是静止的，所以需要在图片上对商品的其他功能做更详细的说明。时下最流行的说明方式之一是“看图说话”，不仅能够进一步展示细节，还能对细节进行补充说明，如图所示。

02详情页设计理念一、详情页设计要求二、爆款商品详情页设计理念三、人气商品详情页设计理念

一、详情页设计要求（1）商品详情页的风格应该与店标风格、店招风格等一致，不能相差太大，以免页面整体不协调。（2）商品详情页的内容一般都比较多，为了避免消费者浏览详情页时出现加载过慢的问题，建议不要使用太大的图片。（3）商品详情页主要通过浏览器进行浏览，因此要保证图片链接正确，其设计也应该符合电子商务网站网页设计的语法要求，防止出现浏览显示错误的问题。（4）商品详情页的宽度和高度没有强制限制，但是宽度一般在750像素以内。

2.准确详细的商品信息介绍1.页面生动有趣3.通过图片直观展示商品实际大小4.引导购买5.文字清晰易读二、爆款商品详情页设计理念

二、爆款商品详情页设计理念让消费者耐心读完长的商品描述特别难，因此商品页面的设计必须使消费者在购物过程中保持新鲜感。结构上要展示商品并搭配商品各种照片，使消费者愉快地下拉滚动条。1.页面生动有趣如果不能做到有趣，则不要盲目追求长页面。提示

二、爆款商品详情页设计理念商品描述要能全面概括商品的内容、相关属性，最好还能介绍一些使用方法和注意事项，更加贴心地为消费者考虑。注意展示一些消费者平时很关心的问题，如有关商品问题的介绍和解释等，如图所示。2.准确详细的商品信息介绍

二、爆款商品详情页设计理念很多服装类卖家用真人模特进行拍摄，并且标明模特身材和商品尺寸，这样的拍摄方式不仅能够让消费者了解商品的实际大小尺寸，还能更好地展示商品的线条和样式，甚至是商品的质感，如图所示。3.通过图片直观展示商品实际大小

二、爆款商品详情页设计理念消费者买了某件商品就会想着再找到和这商品搭配的商品，如买了衣服就还想买能搭配的裤子。4.引导购买卖家可以在这个时候抓住机会，把几个相关商品搭配组合成套餐