电子商务视觉设计 第2版 第5章 商品详情页视觉设计.ppt

* * * * * * * * * * * * * * * * * * * * * * 商品详情页是所有营销的落地点。消费者通过有哪些信誉好的足球投注网站进入店铺后，首先进入的便是详情页；所有页面上有且仅有详情页承担着下单购买的职责；消费者在购买前要对详情页仔细看、反复看，甚至对比看，才能决定是否咨询卖家、是否下单。如果详情页不能满足消费者的需求，不能解决消费者的实际问题，那么前面的工作做得再好，都会功亏一篑。所以，无论是什么店铺，都要对商品详情页进行重点设计。 商品详情页视觉设计 第5章 5.1 目录 CONTENTS 5.2 5.3 5.4 商品主图设计 5.1 当消费者在电商平台中有哪些信誉好的足球投注网站商品时，显示在有哪些信誉好的足球投注网站结果页面中的商品图片就是商品主图。商品主图形成了消费者对商品的第一印象，决定着消费者是否点击打开商品详情页，并对商品产生购买欲望。因此，商品主图的设计专业性与视觉吸引力直接影响着店铺的点击率和转化率。 5.1.1 商品主图的设计规范 淘宝网商品主图尺寸要求 有哪些信誉好的足球投注网站结果页面中的商品主图尺寸为220像素×220像素 商品详情页中的商品主图尺寸为400像素×400像素 天猫商城的商品主图设计规范与淘宝网不同，其规定商品主图尺寸为 800 像素 ×800 像素以上，自动拥有放大镜功能。 5.1.2 商品主图的设计形式 利用白色背景展示商品的全貌是商品主图常规的设计形式，特别是天猫商城，大多数行业都要求至少有一张白底主图。 展示商品的全貌 01 以白色背景展示的商品主图 5.1.2 商品主图的设计形式 商品主图另一种常规的设计形式是通过模特展示商品，或者根据商品的特点和用途搭建生活化、场景化的环境。 场景化的设计 02 利用场景展示的商品主图 5.1.2 商品主图的设计形式 拼接式设计就是将多张商品图片合成一张商品主图。 拼接式设计 03 拼接式设计的商品主图 5.1.2 商品主图的设计形式 品牌商品都会在主图的一角放置品牌的 Logo，这种方式可以有效地让消费者识别品牌，唤醒老客户的消费记忆，吸引新客户的关注和消费。 突出商品卖点 04 突出卖点的商品主图 5.1.3 添加文案提高主图点击率 添加主图文案 添加售后信息，以激发消费者的购买欲望，提高点击率 添加商品的卖点简介，提升商品形象，让消费者了解更多商品信息 5.1.3 添加文案提高主图点击率 添加品牌徽标 添加品牌信息 在添加主图文案时，需要注意以下两点。 （1）文案说明信息的表达形式要简洁明了，要有引发消费者产生点击冲动的诱惑力。 （2）文案说明信息不能遮挡商品主体。 商品细节展示区设计 5.2 在商品详情页中，为了让消费者能够完整而清晰地了解商品的细节和特点，设计人员会设计相应的模块（商品细节展示区）来对商品进行全方位的展示。下面将详细介绍商品细节展示区的表现形式及其通用的设计方式。 5.2.1 商品细节展示区的表现形式 指示型表现形式就是先将商品完整地展示出来，再把商品需要突出展示的局部细节图片以类似放大镜的形式排布在完整商品图的四周，并利用线条、箭头等设计元素将细节图片与完整的商品图连接起来，有时还会用简单的说明性语言来对细节进行解说。 非常适合体积较小、部件较多的商品或家具等外形特大商品的细节展示。 指示型表现形式 01 5.2.1 商品细节展示区的表现形式 局部图解型表现形式的设计更简单，只需将商品的局部细节放大即可，不需对细节位置进行指示。 比较适合于外观简单、部件少的商品及日常用品的细节展示。 局部图解型表现形式 02 5.2.2 商品细节展示区的通用设计方式 利用文字对细节进行说明 01 标题文字：对该细节图的内容进行概括和归纳，应用画龙点睛的关键词进行文案设计 段落说明文字：详细阐述该细节图的内容，对标题文字进行展开说明 使用文字对细节进行说明 5.2.2 商品细节展示区的通用设计方式 利用文字对细节进行说明 01 系统介绍商品信息 对童鞋细节参数进行系统介绍，让消费者一目了然 5.2.2 商品细节展示区的通用设计方式 素材让细节展示更直观 02 使用两种素材展示商品细节 箭头能将商品整体外观图与细节图联系起来，具有引导视线的作用 聊天气泡用于修饰细节图、说明文字的边 框，使文字和图片能一一对应，以便准确 传递商品信息 5.2.2 商品细节展示区的通用设计方式 素材让细节展示更直观 02 矩形与圆形素材的使用 方框规范了文字的显示范围 圆形素材的使用让图像之间产生一定的联系 商品功效简介区设计 5.3 商品功效简介区用于对商品的功能或作用进行详尽、透彻的分析和解说。功效简介区的位置在整个商品详情页中算是比较靠后的，消费者能坚持浏