电子商务视觉设计（视频指导版）全套教案课件

第1章初识电商视觉设计了解视觉设计的定义了解电商视觉设计前的准备工作掌握电商视觉设计黄金构图法学习目标目录什么是视觉设计1.1电商视觉设计前的准备1.2电商视觉设计黄金构图法1.31.1什么是视觉设计视觉识别设计1视觉传达设计21.1什么是视觉设计

1视觉识别设计CIS的构成:1.1什么是视觉设计

1视觉识别设计宝马标志的变革1.1什么是视觉设计

2视觉传达设计

视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。1.2电商视觉设计前的准备网店的视觉定位1明确视觉规范的作用21.2电商视觉设计前的准备

1网店的视觉定位营销型网店1.2电商视觉设计前的准备

1网店的视觉定位品牌型网店1.2电商视觉设计前的准备

1网店的视觉定位服务关系型网店1.2电商视觉设计前的准备

2明确视觉规范的作用统一识别1节约资源2重复利用31.2电商视觉设计前的准备

2明确视觉规范的作用统一识别

可以确保网店在整体风格、售前售后服务和产品包装形象等方面都保持整体风格的一贯性，既有利于买家识别和区分店铺，也可以避免买家在浏览时出现理解困难，甚至是理解错误的现象。1.2电商视觉设计前的准备

2明确视觉规范的作用节约资源

除了活动海报等个性模块之外，其他的页面和模块参照规范进行设计可以极大地减少设计时间，从而达到节约资源的目的。1.2电商视觉设计前的准备

2明确视觉规范的作用重复利用

设计相同属性的模块或页面时，执行视觉规范有利于减少无关的信息，方便买家的阅读和信息传递。同时，视觉规范也有利于美工之间的协调工作。标准化的视觉规范不但可以节约设计时间，还可以避免出错。1.3电商视觉设计黄金构图法对称切割构图法01简单切割构图法05组合切割构图法02流程构图法06放射构图法07多重切割构图法04物体轮廓构图法0803整体场景构图法1.3电商视觉设计黄金构图法

1对称切割构图法1.3电商视觉设计黄金构图法

2组合切割构图法1.3电商视觉设计黄金构图法

3整体场景构图法1.3电商视觉设计黄金构图法

4多重切割构图法1.3电商视觉设计黄金构图法

5简单切割构图法1.3电商视觉设计黄金构图法

6流程构图法1.3电商视觉设计黄金构图法

7放射构图法1.3电商视觉设计黄金构图法

8物体轮廓构图法课后练习题请列举几个除宝马公司之外，其他企业导入视觉识别系统的案例。请列举几个采用黄金构图法的电商视觉设计案例。请淘宝搜索皇冠店铺，分析此类店铺在视觉设计上的共性与优势。请结合本章内容并结合实例说明品牌型网店与营销型网店在视觉定位上的区别。第2章

电商网站视觉配色设计了解掌握色搭原则七要素掌握色彩联觉现象的定义了解网店风格的几大形成要素了解网店页面常见的配色误区学习目标目录网店页面的配色方案2.1网店页面的配色误区2.2网店的整体配色案例2.32.1网店页面的配色方案色搭原则七要素1色彩的联觉聚焦图片2网店风格的形成要素32.1网店页面的配色方案

1色搭原则七要素渐进配色对比配色色调配色近似配色单重点配色分隔式配色夜配色2.1网店页面的配色方案

2色彩的联觉聚焦图片2.1网店页面的配色方案

2色彩的联觉聚焦图片主要以浅紫色为主，好像与我想要购买的零食形象色彩不搭调，这种图片应该不是我需要的。不在关注图片中的信息与内容，放弃点击主要以橙黄色为主，与我想要购买的零食形象相匹配，说不定正是零食相关的图片，我要继续了解一下。继续关注图片信息，并可能执行点击操作2.1网店页面的配色方案

3网店风格的形成要素店铺的主要风格1活动的主题气氛3店铺的包装色彩4VI配色5产品的情绪22.1网店页面的配色方案

3网店风格的形成要素店铺的主要风格1商业型店铺简约清爽型店铺2.1网店页面的配色方案

3网店风格的形成要素

主要以浅紫色为主，好像与我想要购买的零食形象色彩不搭调，这种图片应该不需要的。

在关注图片中的信息与内容，放弃点击。炫酷型店铺简约清爽型店铺2.1网店页面的配色方案

3网店风格的形成要素特色型店铺2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2韩式风格淑女风格2.1网店页面的配色方案

3网店风格的形成要素波西米亚风格嬉皮风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2田园风格民族风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2中国风格商务休闲风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2运动休闲风格英伦风格2.1网店页面的配色方案

3网店风格的形成要素产品的情绪2时尚休闲风格2.1网店页面的配色方案

3网店风格的形成要素活动的主题气氛3国庆节七夕节2.1网店页面的配色方案

3网店风格的形成要素店铺的包装色彩4偏粉色系偏蓝色系2.1网店页面的配色方案

3网店风格的形成要素VI配色5单色VI双色VI多色VI2.2网店页面的配色误区色彩过多1背景和文字对比不强烈2过分强调色彩的刺激度32.2网店页面的配色误区

1色彩过多2.2网店页面的配色误区

2背景和文字对比不强烈2.2网店页面的配色误区

3过分强调色彩的刺激度2.3网店的整体配色案例选用黄色作为食品店铺的店招背景，可以刺激浏览者的食欲，引导消费者购买店铺中的产品选用黄色的商品图，与导航栏的颜色相呼应，给人一种上下统一的视觉感受选用灰色作为店铺的主色调，可以更好地凸显产品的诱人与美味2.3网店的整体配色案例店铺商品配色店铺页面辅色设计店铺页面主色设计2.3网店的整体配色案例011.店铺页面主色设计新建空白文件创建参考线2.3网店的整体配色案例021.店铺页面主色设计填充颜色填充矩形2.3网店的整体配色案例设置导航栏颜色012.店铺页面辅色设计022.店铺页面辅色设计设置店招与导航栏2.3网店的整体配色案例013.店铺商品配色导入主商品图2.3网店的整体配色案例023.店铺商品配色制作商品图2.3网店的整体配色案例033.店铺商品配色创建并填充矩形2.3网店的整体配色案例043.店铺商品配色导入图像并输入文字2.3网店的整体配色案例043.店铺商品配色制作其他部分2.3网店的整体配色案例053.店铺商品配色完成店铺页面制作课后练习题请列举几个近似配色和色调配色的设计案例。请分析色彩的联觉现象对数码类产品的影响。为男装店铺进行首页整体配色设计，效果如右图所示。请分别列举炫酷型、可爱型和特色型的店铺风格设计案例。第3章

店铺标志视觉设计了解徽标的设计要领及设计原则了解徽标的设计规范了解店标的几种设计形态掌握店标设计的七大技巧熟练掌握店标的设计流程学习目标目录徽标的设计3.1店标的设计3.23.1徽标的设计徽标的设计要领01徽标的设计标准023.1徽标的设计

1徽标的设计要领便于识别，以简为美1徽标设计要追求独特，增强记忆3徽标设计要便于运用4徽标要与客户或产品有关23.1徽标的设计

1徽标的设计要领便于识别，以简为美13.1徽标的设计

1徽标的设计要领徽标要与客户或产品有关23.1徽标的设计

1徽标的设计要领徽标设计要追求独特，增强记忆33.1徽标的设计

1徽标的设计要领徽标设计要便于运用4理想的徽标设计是缩小到2.5厘米大小都不会损失任何细节，这样的徽标才能在不同的环境下运用。特别是用于我们的网店页面时，无论是放在店标上还是店招上，尺寸都是非常小的。3.1徽标的设计

2徽标的设计标准徽标禁止侵入区3.1徽标的设计

2徽标的设计标准错误的徽标设计3.1徽标的设计

2徽标的设计标准错误的徽标设计VEROMODA品牌徽标3.2店标的设计店标的设计形态1店标的设计技巧2不同行业的店标设计3店标的设计流程43.2店标的设计

1店标的设计形态中文文字型店标1组合型店标3图形型店标4图文结合型店标5非中文型店标23.2店标的设计

1店标的设计形态中文文字型店标1

3.2店标的设计

1店标的设计形态

非中文型店标23.2店标的设计

1店标的设计形态

组合型店标33.2店标的设计

1店标的设计形态

图形型店标43.2店标的设计

1店标的设计形态

图文结合型店标53.2店标的设计

2店标的设计技巧

设计要有领导性标志设计的统一性标志的识别性标志的时代性标志的系统性标志的延伸性设计要有造型3.2店标的设计

2店标的设计技巧

设计要有领导性设计要有造型3.2店标的设计

2店标的设计技巧

标志设计的统一性标志的识别性3.2店标的设计

2店标的设计技巧

标志的时代性标志的系统性3.2店标的设计

2店标的设计技巧

标志的延伸性3.2店标的设计

3不同行业的店标设计

表现柔美型表现阳刚型表现可爱型3.2店标的设计

3不同行业的店标设计

表现柔美型3.2店标的设计

3不同行业的店标设计

表现阳刚型3.2店标的设计

3不同行业的店标设计

表现可爱型3.2店标的设计

4店标的设计流程

01卡通素材图形02新建空白文件3.2店标的设计

4店标的设计流程

03导入卡通素材图像选中素材图像把素材图像拖入文件窗口3.2店标的设计

4店标的设计流程

04文字变形处理05添加文字及修饰图案3.2店标的设计

4店标的设计流程

06添加图层效果3.2店标的设计

4店标的设计流程

07添加文字课后练习题简述一个优秀的徽标都具有哪些特点。分析徽标设计规范的重要性。请根据本章所讲内容设计一个玩具类店铺店标，效果如右图所示。淘宝搜索家居类店铺，并分析它们的店标分别属于哪一类。第4章

店铺首页视觉设计了解首页视觉水平的四大指标掌握店招的设计规范及技巧掌握首焦轮播区的设计技巧了解商品陈列区的布局方式掌握商品陈列区的布局技巧学习目标目录首页视觉水平的四大指标4.1店招视觉设计4.2首焦轮播区视觉设计4.3商品陈列区视觉设计4.4化妆品店铺首页视觉设计案例4.54.1首页视觉水平的四大指标首页跳失率1首页点击率2首页人均点击次数3首页平均停留时间44.1首页视觉水平的四大指标

1首页跳失率

首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。进入店铺首页的渠道4.1首页视觉水平的四大指标

2首页点击率

首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点击量÷首页展现量）。两类店铺首页排版4.1首页视觉水平的四大指标

3首页人均点击次数

首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为600次，那么首页人均点击次数为：600次÷150人=4次/人。人均点击次数4.1首页视觉水平的四大指标

4首页平均停留时间

首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是否能留住访客。4.2店招视觉设计店招视觉设计规范01店铺名称的艺术化处理02图层样式的应用034.2店招视觉设计

1店招视觉设计规范店招高度设计规范淘宝后台的店招高度为120像素，建议设计时设定店招尺寸为950×120像素，加上导航条高度30像素，共150像素，可避免发布后导航不显示的问题4.2店招视觉设计

1店招视觉设计规范店招元素设计品牌宣传语移动端二维码清晰的店铺名称4.2店招视觉设计

1店招视觉设计规范店招和导航条风格统一风格的统一及修饰元素的设

计，突出店铺的品牌形象4.2店招视觉设计

2店铺名称的艺术化处理添加特效突出特殊性和醒目度2用不同字体和字号的组合营造艺术感1使用修饰元素提升观赏性34.2店招视觉设计

2店铺名称的艺术化处理用不同字体和字号的组合营造艺术感1不同字体字号的组合将店铺名称的首个英文字母放大，并使用不同于其他字体风格的手写体，让店铺名称文字的版式更加醒目、更具艺术感4.2店招视觉设计2店铺名称的艺术化处理添加特效突出特殊性和醒目度2为了将店铺名称与导航条的颜色区分开，使用了发光效果来修饰店铺名称，营造出的层次感，也贴合了店铺中销售的照明设备的特点4.2店招视觉设计

2店铺名称的艺术化处理为店铺名称添加修饰元素使用修饰元素提升观赏性3使用帽子的图案来修饰店铺名称，文字与图案在外形上的契合让店铺名称更具个性和艺术感，更容易在消费者心中形成特定的印象4.2店招视觉设计

3图层样式的应用

图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也发挥着重要的作用。用“渐变叠加”图层样式来表现导航条功能按钮被鼠标触碰后的状态，在视觉上形成凹陷的效果，将其与导航条中正常状态下的功能按钮区分开4.2店招视觉设计

3图层样式的应用当鼠标指针触碰到导航条中任意一个功能按钮时，该按钮就会呈现出不同的效果，这就是添加图层样式的效果，给人视觉上的错觉，让按钮上的文字更具层次感，更易于展示当前操作的结果4.3首焦轮播区视觉设计设计聚焦消费者视线1构建设计图三要素2溶图的应用范围34.3首焦轮播区视觉设计

1设计聚焦消费者视线

在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。首焦位置：由于该位置所占面积较大，所以成为最能吸引消费者眼球的位置4.3首焦轮播区视觉设计

1设计聚焦消费者视线

下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。首焦位置4.3首焦轮播区视觉设计

1设计聚焦消费者视线

首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。有趣的图片展示，能让消费者通过视觉获得较为愉悦的体验

文案信息告知了消费者店铺中的优惠活动，因为店铺的优惠活动信息对于大部分消费者而言都是极具吸引力的。同时，简洁的文字与图形装饰的结合让消费者能够轻松地获取相关信息4.3首焦轮播区视觉设计

2构建设计图三要素首焦轮播区设计三要素背景商品广告文字4.3首焦轮播区视觉设计

2构建设计图三要素不同主题的背景图以七夕节为主题的背景以“双11”活动为主题的背景4.3首焦轮播区视觉设计

2构建设计图三要素处理前后的商品形象对比处理前色彩灰暗，画质朦胧，画面层次不清晰，背景色调不理想处理后色彩纯净，画面清晰，画面层次感强，商品形象更突出4.3首焦轮播区视觉设计

2构建设计图三要素

如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出文字的字体与字号、色彩的变化等是设计中最为关键的环节。文字元素的设计4.3首焦轮播区视觉设计

3溶图的应用规范溶图

溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节处理得当。4.4商品陈列区视觉设计营造视觉动线1商品布局艺术化24.4商品陈列区视觉设计

1营造视觉动线商品陈列图4.4商品陈列区视觉设计

1营造视觉动线①浏览初期，视线水平移动，且浏览范围最大。刚开始浏览时，消费者对商品展示图充满了新鲜感和好奇，很可能将第一排图片全部浏览完毕，并根据从上到下的浏览经验，转向对第二排图片的浏览。②水平浏览范围缩短。此时图片的布局没有任何变化，消费者对于图片浏览的新鲜度就会降低，开始失去浏览的耐心，于是对第二排图片的水平浏览范围便会缩短。③失去耐心，开始进行垂直浏览。当消费者看到第三排仍然是一成不变的图片排列后，浏览的耐心就会减少，还可能会想图片怎么这么多，大概地往下看看吧，于是形成对左边的垂直浏览。F形浏览模式4.4商品陈列区视觉设计

1营造视觉动线商品海报展示图：将重点推荐的商品以单张海报的方式呈现，较为丰富的表现形式能很好地让消费者注意到商品信息。单张商品展示图：较为重要的商品以单张图片形式排列，较大的展示面积更能获得消费者的瞩目。三张商品展示图：非重点推荐的产品可以三张并排展示的效果呈现。单张图片：除了商品展示图片以外，还可以搭配一些与展示商品相关的商品组合图片，进一步吸引消费者的购买兴趣。4.4商品陈列区视觉设计

2商品布局艺术化折线型布局随意型布局4.4商品陈列区视觉设计

2商品布局艺术化折线型布局4.4商品陈列区视觉设计

2商品布局艺术化随意型布局4.5化妆品店铺首页视觉设计案例

标题文字设置的字号较大，利用斜面和浮雕、投影等效果来点缀标题文字，使其更加精致文字选用不同的颜色、字号，并分成两行，显得更有层次感，并通过一些小图案对价格进行修饰和点缀，营造出一种清新的视觉感受风格一致的文字与图像，营造出一种清新、简洁、充满文艺气息的氛围

采用不规则图形作为背景图的点缀，使商品的排列既整齐又不死板，提升其观赏性和设计感4.5化妆品店铺首页视觉设计案例01填充背景色4.5化妆品店铺首页视觉设计案例02设置文字属性4.5化妆品店铺首页视觉设计案例03添加商品图及优惠券4.5化妆品店铺首页视觉设计案例04绘制导航条背景4.5化妆品店铺首页视觉设计案例05为导航条添加文字4.5化妆品店铺首页视觉设计案例06添加文字并设置图层样式4.5化妆品店铺首页视觉设计案例06添加文字并设置图层样式4.5化妆品店铺首页视觉设计案例07添加图像素材4.5化妆品店铺首页视觉设计案例08添加商品图4.5化妆品店铺首页视觉设计案例09绘制背景图形10添加模特素材图像4.5化妆品店铺首页视觉设计案例11添加文字及修饰图案4.5化妆品店铺首页视觉设计案例12添加商品图4.5化妆品店铺首页视觉设计案例13制作店铺热销推荐标题4.5化妆品店铺首页视觉设计案例14添加商品图及文字4.5化妆品店铺首页视觉设计案例15添加商品图4.5化妆品店铺首页视觉设计案例16绘制图形4.5化妆品店铺首页视觉设计案例17制作店长热荐标题4.5化妆品店铺首页视觉设计案例18制作单品展示效果4.5化妆品店铺首页视觉设计案例19店长推荐专区4.5化妆品店铺首页视觉设计案例20纯正护肤专区4.5化妆品店铺首页视觉设计案例21输入文字22添加地图图案4.5化妆品店铺首页视觉设计案例23绘制图形并输入文字课后练习题请为家电类店铺设计一个店招，并说明自己的设计思路。请列举几个溶图在实际店铺中应用的案例。请为家具类店铺设计制作首页，效果如右图所示。简述商品陈列区在设计时要考虑的因素。第5章

商品详情页视觉设计了解商品主图的设计规范掌握商品主图的设计形式掌握商品细节展示区设计技巧了解修饰元素在设计中的重要性熟练掌握商品详情页各元素的设计方法学习目标目录商品主图设计5.1商品细节展示区设计5.2商品功效简介区设计5.3女鞋商品详情页视觉设计案例5.45.1商品主图设计商品主图的设计规范1商品主图的设计形式2添加文案提高主图点击率35.1商品主图设计

1商品主图的设计规范商品主图尺寸要求搜索结果页面中的商品主图尺寸为220像素×220像素商品详情页中的商品主图尺寸为400像素×400像素5.1商品主图设计

2商品主图的设计形式展示商品的全貌1拼接式设计3突出商品卖点4场景化的设计25.1商品主图设计

2商品主图的设计形式展示商品的全貌1白色背景商品主图5.1商品主图设计

2商品主图的设计形式场景化的设计2场景展示商品主图5.1商品主图设计

2商品主图的设计形式拼接式设计35.1商品主图设计

2商品主图的设计形式突出商品卖点45.1商品主图设计

3添加文案提高主图点击率添加主图文案添加价格信息，以激发消费者的购买欲望，提高点击率添加商品的材质简介，提升商品形象，让消费者了解更多商品信息5.1商品主图设计

3添加文案提高主图点击率添加品牌徽标5.1商品主图设计

3添加文案提高主图点击率添加品牌信息5.2商品细节展示区设计商品细节展示区的表现形式1商品细节展示区通用设计方式25.2商品细节展示区设计

1商品细节展示区的表现形式指示型表现形式局部图解型表现形式5.2商品细节展示区设计

1商品细节展示区的表现形式完整的商品形象展示用实线连接放大的局部细节指示型表现形式5.2商品细节展示区设计

1商品细节展示区的表现形式局部图解型表现形式5.2商品细节展示区设计

2商品细节展示区通用设计方式利用文字对细节进行说明素材让细节展示更直观5.2商品细节展示区设计

2商品细节展示区通用设计方式标题文字：对该细节图的内容进行概括和归纳，应用画龙点睛的关键词进行文案设计段落说明文字：详细阐述该细节图的内容，对标题文字进行展开说明利用文字对细节进行说明5.2商品细节展示区设计

2商品细节展示区通用设计方式利用文字对细节进行说明系统介绍商品信息对女鞋细节参数进行系统介绍，让消费者一目了然了解商品信息5.2商品细节展示区设计

2商品细节展示区通用设计方式素材让细节展示更直观箭头能将商品整体外观图与细节图联系起来，具有引导视线的作用聊天气泡用于修饰细节图、说明文字的边框，使文字和图片能一一对应，准确传递商品信息5.2商品细节展示区设计

2商品细节展示区通用设计方式素材让细节展示更直观方框规范了文字的显示范围圆形素材的使用让图像之间产生一定的联系矩形与圆形素材的使用5.3商品功效简介区设计商品功效简介区的设计规范1修饰元素在设计中的重要性25.3商品功效简介区设计

1商品功效简介区的设计规范淘宝、天猫和京东的商品详情页设计尺寸规范：电商平台商品详情页设计尺寸规范淘宝网详情页左侧边栏宽190像素，中间空10像素，右侧宽750像素，加起来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽，不然只显示750像素宽天猫商城详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由750像素变为790像素京东京东对详情页布局有统一要求，整体宽度不超过740像素5.3商品功效简介区设计

1商品功效简介区的设计规范将商品的功效分为几个不同的关键点进行介绍商品功效简介区设计5.3商品功效简介区设计

2修饰元素在设计中的重要性使用图表对商品的某些功效进行具象表现，利用数据、比例上的优势来增强说服力，提升商品功效简介的可信度复选框素材的使用，加强了对商品功效的肯定作用聊天气泡具有一定的指引视线和修饰作用将洗衣液的功效用对比图的方式表现出来，提升功效的可信性5.4女鞋商品详情页视觉设计案例5.4女鞋商品详情页视觉设计案例01新建图像文件5.4女鞋商品详情页视觉设计案例02导入广告并调整大小5.4女鞋商品详情页视觉设计案例03添加文字5.4女鞋商品详情页视觉设计案例04绘制矩形并制作渐隐效果5.4女鞋商品详情页视觉设计案例05添加文字和修饰直线5.4女鞋商品详情页视觉设计案例06添加商品图5.4女鞋商品详情页视觉设计案例07设置标题文字5.4女鞋商品详情页视觉设计案例08添加商品属性信息5.4女鞋商品详情页视觉设计案例09导入背景图像5.4女鞋商品详情页视觉设计案例10输入文字并进行修饰5.4女鞋商品详情页视觉设计案例11绘制图形并导入商品图5.4女鞋商品详情页视觉设计案例12添加文字信息5.4女鞋商品详情页视觉设计案例13设计标题5.4女鞋商品详情页视觉设计案例14添加模特实拍图5.4女鞋商品详情页视觉设计案例15制作尺码对照区标题栏5.4女鞋商品详情页视觉设计案例16绘制表格5.4女鞋商品详情页视觉设计案例17制作尺码对照表课后练习题简述商品主图如何设计才能提高点击率。请找出五个不同类目的店铺，并分析它们的商品细节展示区有何异同。请为美食类店铺设计一个商品详情页，效果如右图所示。找出两家卖同一类商品的店铺，并思考如果你是买家会选择哪一家购买，并说明购买原因。第6章

高点击率推广图片视觉设计掌握推广图片的构图法则掌握直通车图片设计的要点掌握钻展图设计的关键点掌握聚划算主图的设计熟练掌握高点击率推广图片的设计方法学习目标目录推广图片构图法则6.1直通车图片设计6.2钻展图设计6.3聚划算主图设计6.46.1推广图片构图法则变化式构图1平衡式构图3紧凑式构图5对角线构图2对称式构图4X形构图66.1推广图片构图法则

1变化式构图6.1推广图片构图法则

2对角线构图6.1推广图片构图法则

3平衡式构图6.1推广图片构图法则

4对称式构图6.1推广图片构图法则

5紧凑式构图6.1推广图片构图法则

6X形构图6.2直通车图片设计图片整体风格设计1突出商品卖点的设计26.2直通车图片设计

1图片整体风格设计直通车图片应用案例针对年轻消费群体

直通车图

针对中年群体

直通车图6.2直通车图片设计

1图片整体风格设计运用适当的背景12保持图片清晰度3精简文字，去牛皮癣4巧用素材搭配6.2直通车图片设计

1图片整体风格设计背景模糊处理运用适当的背景16.2直通车图片设计

1图片整体风格设计用色阶调亮背景2保持图片清晰度6.2直通车图片设计

1图片整体风格设计突出促销价格3精简文字，去牛皮癣6.2直通车图片设计

1图片整体风格设计素材搭配4巧用素材搭配6.2直通车图片设计

2突出商品卖点的设计不仅有针对所展示单品的利益点信息说明，也通过“全场包邮”表明了店铺的利益点6.3钻展图设计博取眼球的创意设计1统一图片设计风格2确定重点表现元素36.3钻展图设计

1博取眼球的创意设计不同角度拍摄商品正面与侧面相结合的拍摄角度，尤其是正面给人以迎面冲来的视觉感受，富有视觉冲击力侧面拍摄角度是较为常规的拍摄角度，少了几分新鲜感与吸引力6.3钻展图设计

1博取眼球的创意设计生动、灵活的商品摆设整齐排开，中规中矩常见的单鞋摆设不同造型商品摆设6.3钻展图设计

2统一图片设计风格图片整体的设计风格非常大方，选择黄色为主的背景也彰显了其简洁的设计风格通过对元素颜色的控制，突出“低至三折”的宣传主题，激发消费者潜在的购买欲望家具的摆放富有情景感，背景使用了与家具相近的颜色，图片整体体现出了典雅的风格图片突出了商品“家具”，文案又突出了“清仓五折”，主题明确，能激发消费者的点击冲动简约风格雅典风格6.3钻展图设计

3确定重点表现元素实惠的价格是图片重点突出的对象，因此该元素色彩明亮、尺寸较大，能迅速吸引消费者的眼球重点突出优惠价格元素6.4聚划算主图设计聚划算主图的设计思路1聚划算主图设计案例26.4聚划算主图设计

1聚划算主图的设计思路商品拍摄商品背景商品构图详情页主图6.4聚划算主图设计

1聚划算主图的设计思路商品拍摄6.4聚划算主图设计

1聚划算主图的设计思路商品背景6.4聚划算主图设计

1聚划算主图的设计思路商品构图6.4聚划算主图设计

1聚划算主图的设计思路黑白半透明标签详情页主图6.4聚划算主图设计

2聚划算主图设计案例01新建聚划算主图

插入背景图6.4聚划算主图设计

2聚划算主图设计案例02移动图片添加星光修饰6.4聚划算主图设计

2聚划算主图设计案例03添加商品Logo6.4聚划算主图设计

2聚划算主图设计案例04加入半透明标签

隐藏半透明标签课后练习题请为六种推广图片构图法则各举出一个实例。在淘宝上找出直通车做得好的店铺，并分析其直通车图片的优势。请根据本章所学知识设计一张家居类的聚划算主图，效果如右图所示。列举几张你认为有设计感的钻展图，并说明它们好在哪里。第7章

网店促销活动页视觉设计掌握如何营造促销广告的氛围掌握促销广告的三大设计总则掌握不同发展阶段的促销广告设计方法学习目标目录促销广告的黄金设计要素7.1不同发展阶段的促销广告设计7.27.1促销广告的黄金设计要素保证设计的基本美感1营造促销氛围2促销广告图片的设计原则37.1促销广告的黄金设计要素

1保证设计的基本美感02错误1．色彩搭配不明显，找不出重点商品在哪里。2．修饰元素太多，容易让消费者眼花缭乱。7.1促销广告的黄金设计要素

1保证设计的基本美感02平衡势能集群标签分割7.1促销广告的黄金设计要素

1保证设计的基本美感平衡横向拍摄由于促销广告图片尺寸较窄，此时如果模特保持站立姿势，那么在图片中就无法很好地安放模特这一元素，而采用横向拍摄的方式，在均衡构图的同时，模特的动势也起到了一定的视觉引导作用7.1促销广告的黄金设计要素

1保证设计的基本美感势能动态势能静态势能添加相对较为“安静”的元素来引导消费者的目光。图中左右两侧的模特都朝向画面中间，这在某种程度上引导了消费者，将视线集中到了画面中央随着图片中纸被撕裂的动势，消费者的视线会逐渐转移到家具上，且一并将图中内容浏览完毕，这样的构图方式富有明显的动态指向效果7.1促销广告的黄金设计要素

1保证设计的基本美感势能集群有很多的促销文案信息，然而分布较为散乱，不能让消费者集中注意力，很容易形成阅读的遗漏文案信息较为集中，集群的构图方式更利于信息的传达7.1促销广告的黄金设计要素

1保证设计的基本美感势能集群利用圆形分割画面，让画面色彩得到协调的同时，使文案信息更为突出利用圆角矩形分割画面，突出促销文案信息，使画面变得更富装饰感标签分割7.1促销广告的黄金设计要素

2营造促销氛围添加引导标签添加限制提示7.1促销广告的黄金设计要素

2营造促销氛围添加引导标签

点击按钮与箭头起到了引导标签的作用，促使消费者进行点击操作7.1促销广告的黄金设计要素

2营造促销氛围

添加限制提示时间限制说明，营造紧张感数量限制说明，营造紧张感7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出2风格统一3目标明确7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出促销活动主题突出促销活动主题被放在广告图片的右侧中心位置，且选用了对比明显的颜色，使其看起来更为突出7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出2风格统一7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出2风格统一3目标明确迎合消费者人群特点选择少女作为模特，同时在用色方面大面积使用了具有甜美感的粉色系色彩，所选择的字体造型也并非一板一眼，这都突显了少女的青春气息，也与少女服饰这一商品的气质形象相匹配采用具有怀旧倾向的黄褐色作为主色调，同时文字也选择了较为庄重和具有书法感的字体，文字色彩选择了具有稳重感的黑色与红色，以此来突显出老年人的庄严与大气，同时也很好地衬托出了服饰的特点7.2不同发展阶段的促销广告设计发展初期为品牌而促销发展中期为客户而促销发展成熟期为打造爆款而促销7.2不同发展阶段的促销广告设计单品促销广告设计发展初期单品展示单品卖点说明促销内容说明为打造爆款而促销7.2不同发展阶段的促销广告设计为打造爆款而促销发展初期为打造爆款而促销秒杀活动设计贴上“爆款”标签“爆款”标签给消费者留下商品高销量的印象，增强其信任感用销量数据来说服消费者醒目的秒杀说明设计7.2不同发展阶段的促销广告设计为提升品牌知名度开展的促销活动为品牌而促销发展中期7.2不同发展阶段的促销广告设计为品牌而促销发展中期两张图片为同一品牌的促销广告，图片整体的设计风格、商品的拍摄风格、字体的选择等元素都进行了统一与规范统一品牌形象7.2不同发展阶段的促销广告设计为客户而促销发展成熟期会员促销活动7.2不同发展阶段的促销广告设计为客户而促销发展成熟期广告语并不具备煽动性，这样的文案可以说非常常见，不具备感染力，只起到了告知作用，并没有考虑到消费者的需求，因此不能起到说服消费者的营销作用整体版面文字过多，显得较为教条：对于消费者而言，购物是一个愉快的放松过程，在这一过程中他们更希望感受到轻松与愉悦，而图中过多的文字显得繁复而拥挤，这会让消费者失去阅读的耐心会员促销页7.2不同发展阶段的促销广告设计为客户而促销发展成熟期采用图文结合的表现形式，简洁、直观，更便于阅读与浏览统计图表、装饰效果等表现形式在一定程度上减轻了文字阅读的枯燥感会员制度页面7.2不同发展阶段的促销广告设计为客户而促销发展成熟期会员促销页面信息课后练习题请列举几张添加了限制提示的促销广告，并说明其优势。请举例说明势能对消费者的影响。如果你是店铺卖家，在店铺发展初期应该如何设计促销广告图片？第8章

移动端网店的用户体验设计了解移动端网店的店标设计掌握移动端网店的图片尺寸标准掌握移动端网店如何进行视觉设计学习目标目录移动端网店的设计标准8.1移动端网店视觉设计8.28.1移动端网店的设计标准

01移动端网店店标设计02移动端网店图片尺寸标准03移动端网店框架结构安排8.1移动端网店的设计标准

1移动端网店店标设计

手机淘宝的店标直接出现在店铺头上，在店标右侧显示店铺名称。店标图片8.1移动端网店的设计标准

1移动端网店店标设计

移动端网店还可以使用商品的实物照片作为店标，一眼即可看出店铺销售的主营商品。店标图片8.1移动端网店的设计标准

2移动端网店图片尺寸标准手机淘宝对图片的发布尺寸要求：店铺标志尺寸为80像素×80像素，文件大小为80K以内店招规格尺寸为642像素×200像素8.1移动端网店的设计标准

2移动端网店图片尺寸标准高度≤960像素（建议高度不超过600像素）；图片格式支持JPG、GIF、PNG需在图片上添加文字时，中文字号≥30；英文和阿拉伯数字字号≥20首页和详情页图片宽度为480像素~620像素（建议不超608像素）图片尺寸标准8.1移动端网店的设计标准

3

移动端网店框架结构安排移动端网店首页界面红色框出部分为淘宝平台自动生成的版块，其中将店铺首页划分成了“店铺首页”“全部商品”“新品上架”“店铺简介”等固定版块，卖家只需在不同区域添加对应的店铺内容即可移动端网店详情界面图中出现的“收藏”“立即购买”等图标是不需要自己设计的，并且在详情页的第一屏都会出现商品图片、价格、名称等信息展示，卖家可以不考虑这些框架结构的布置，需要设计的是图片、名称等信息内容店铺框架结构8.1移动端网店的设计标准

3

移动端网店框架结构安排图片对应的链接移动端店铺首页的轮播图片对应8.2移动端网店视觉设计整体设计风格首尾呼应04简单方便的操作与交互03保持常换常新06保持色彩与文字的鲜明感05迎合极速打开需求0102信息内容简洁，

便于快速传播8.2移动端网店视觉设计

1迎合极速打开需求图片加载时间长8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播手机移动端商品详情界面简化版

电脑版图文详情对比8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播PC端的展示文字信息清晰可见8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播移动端的展示文字信息则比较模糊界面整体设计感较强，显得较为精致，但消费者不能很好地阅读界面中的文字信息，营销效果也会削弱。因此，不能一味地追求视觉的美观，还要注意通过文字内容的精简与尺寸的变化，保证信息能被消费者快速接收8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播大量的文字信息图文结合相比于纯文字的形式，图文结合的方式能让消费者在接收信息时更为省心8.2移动端网店视觉设计

3简单方便的操作与交互界面的缩放设计

未缩放，正常显示尺寸的商品详情界面。受手机尺寸的限制，界面中的信息较小，不能清晰地展示在消费者面前滑动屏幕后，界面放大，消费者能够较清晰地看清界面中的信息8.2移动端网店视觉设计

3简单方便的操作与交互当消费者想要完整且清晰地阅读详情页文字信息时，在未缩放的情况下，无须拖动界面，手机屏幕便可以展示该部分信息而为了能够更清晰地阅读界面上的文字信息，就需要消费者点击图片，然后滑动屏幕，放大界面放大界面后，受手机屏幕尺寸的显示，界面中的信息不能在纵向或横向空间中完整的展示，消费者就需要左右上下拖动界面才能完整地浏览这部分信息8.2移动端网店视觉设计

4整体设计风格首尾呼应女鞋手机店铺8.2移动端网店视觉设计

5

保持色彩与文字的鲜明感店铺笼罩在黑色色调之中白色底图片手机淘宝所提供的背景是白色前几屏页面风格后几屏页面风格首页装修8.2移动端网店视觉设计

5

保持色彩与文字的鲜明感两种色调对比深色调显得较为沉闷与压抑，不能给人带来轻松的感觉明亮的色彩则给消费者带来豁然开朗感，惹眼而又具有活力8.2移动端网店视觉设计

5

保持色彩与文字的鲜明感大面积采用了高纯度色彩，界面整体显得活泼，给人带来愉悦的视觉感受并没有采用高纯度色彩，却被高明度色调所覆盖，界面整体呈现出鲜明与淡雅感高纯度色彩高明度色调8.2移动端网店视觉设计

6

保持常换常新在“双十一”预售期间，店铺首页轮播图都展示了与“双十一”相关的内容，告诉消费者店铺的相关活动内容雅诗兰黛双十一轮播图课后思考题简述移动端网店店标如何设计。找出三家自己感兴趣的网店，并分析它们的用户体验设计好在哪里。对比PC端和手机端网店的用户体验设计，并分析它们有何不同。第9章

手机移动端淘宝店铺视觉设计掌握店招的优化设计方法掌握轮播图片的优化设计方法掌握优惠券的优化设计方法掌握商品分类导航及分类展示的优化方法了解店铺详情页设计的FABE原则熟练掌握手机淘宝店铺详情页的设计方法学习目标目录手机移动端淘宝店铺首页优化设计9.1电子数码类商品店铺首页案例解析9.2手机淘宝店铺详情页优化设计9.39.1手机移动端淘宝店铺首页优化设计手机移动端店铺首页首页设计框架图9.1手机移动端淘宝店铺首页优化设计1店招的优化设计

2轮播图片优化设计

3优惠券的优化设计

4商品分类导航优化设计

5商品分类展示优化设计

9.1手机移动端淘宝店铺首页优化设计店招底图设计1店招的优化设计用鞋子图片作为底图的主体，与店铺“女鞋”的主题相呼应9.1手机移动端淘宝店铺首页优化设计1店招的优化设计活动时间说明优惠券的设置双十一活动背景图PC端与手机端店招设计的不同9.1手机移动端淘宝店铺首页优化设计1店招的优化设计图片与文字组合的店招底图9.1手机移动端淘宝店铺首页优化设计1店招的优化设计提醒关注店铺9.1手机移动端淘宝店铺首页优化设计1店招的优化设计该店铺主营玩具类商品，然而其店招选择了与店铺毫无关系的图片，即使看起来不错，也无法起到任何说明与传达店铺信息的作用该店招底图中也没使用与店铺有明显关联的图片。店铺主营百货小商品，而底图中主要呈现了笔记本电脑的图片，没有与店铺产生实质性联系，且与店招标识的设计风格不匹配，消费者看到这个店招后无法感受到店铺的品牌氛围无关的店招图片9.1手机移动端淘宝店铺首页优化设计1店招的优化设计文字被遮挡该店招中说明文字被大面积遮挡，同时文字太多，很不美观，这样的表现方式无法让消费者有效获取信息，底图中的文字便失去了意义9.1手机移动端淘宝店铺首页优化设计轮播图片2轮播图片优化设计9.1手机移动端淘宝店铺首页优化设计确定轮播图的先后顺序2轮播图片优化设计9.1手机移动端淘宝店铺首页优化设计优惠券板块3优惠券的优化设计9.1手机移动端淘宝店铺首页优化设计活动优惠券3优惠券的优化设计过于花哨的设计9.1手机移动端淘宝店铺首页优化设计4商品分类导航优化设计商品分类按钮足够明显，且分开两行的组合设计让分类信息能够完整地展示在消费者面前，让其可以快速了解店铺中商品的分类情况9.1手机移动端淘宝店铺首页优化设计商品分类展示5商品分类展示优化设计

简洁的分类标题提示，没有过多的装饰商品名称与价格说明无过多修饰，一目了然9.1手机移动端淘宝店铺首页优化设计促销和爆款商品展示4商品分类展示优化设计商品分类展示第一区中对爆款商品进行展示商品分类展示第一区中对促销商品进行展示9.1手机移动端淘宝店铺首页优化设计新品展示4商品分类展示优化设计9.1手机移动端淘宝店铺首页优化设计店长推荐4商品分类展示优化设计在店铺首页商品分类展示第三区中，选择对店长推荐的商品进行展示，就如同实体店中常会出现贴有“店长推荐”标签的商品，这类商品通常属于热销商品或是店铺中的“镇店之宝”，打着这个旗号的商品对消费者也具有一定的吸引力9.2电子数码类商品店铺首页案例解析电子数码类店铺首页9.2电子数码类商品店铺首页案例解析添加明亮的色彩商品说明信息为白色，给消费者带来一目了然的视觉感受价格信息则采用黄色来表现，在黑色背景中显得非常突出，便于消费者了解商品价格9.3手机淘宝店铺详情页优化设计详情页设计的FABE原则01商品详情页的设计误区02根据消费者的页面平均停留

时间设计039.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则F特征即介绍商品的特质、特性等基本功能，以及它是如何满足消费者需要的。特征（Features）B以消费者利益为中心，告知并强调消费者购买商品后会得到的利益，能够激发消费者的购买欲望。利益（Benefits）A优点就是商品的卖点与优势，向消费者证明商品的卖点，其实就是给消费者提供了更多的购买该商品的理由。优点（Advantages）E证据就是指第三方认知、新闻舆论或技术报告等信息，它们需要有足够的权威性、客观性、可靠性与可见证性，这样才能获得消费者的信任。证据（Evidence）9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01逻辑感02亲切感03对话感04氛围感05正规感069.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01商品展示细节图9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01逻辑感02

视觉漏斗模型中的逻辑关系即是FABE原则所体现的逻辑顺序，通过介绍商品的特征→商品特点→能给消费者带来的利益点→证明商品质量的证据这四个步骤，在层层说明中一步步打消消费者的购买顾虑，增强其购买信心，最终形成下单成交。9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01漫画形式的图片设计亲切感03不论是结合商品特点添加插画，还是直接采用插画的表现形式，总之，在商品详情页插入图画或漫画，能让页面变得更加活泼、生动，也能让消费者感到很亲切9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01商品描述亲切感03对话感049.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01亲切感03对话感04氛围感05

消费者在无形之中或多或少地都会有“凑热闹”的心理，看到某件商品有很多人买便想去看个究竟，或者自己也想跟风购买，这一点对于冲动型消费者来说尤其明显。因此，在设计商品详情页时，需要营造很多人都在购买的卖场气氛，这样的氛围会带动消费者形成购买冲动。9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01亲切感03对话感04氛围感05正规感06认证证书图片9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区切忌密不通风的文字说明1海报宣传需凸显商品的真实性2注意控制商品与关联销售商品图片的数量39.3手机淘宝店铺详情页优化设计2商品详情页的设计误区切忌密不通风的文字说明1据研究机构统计，商品详情页中70%的文字信息消费者是不会仔细阅读的，尤其是拥挤的文字会在视觉上引发消费者的畏惧感9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区海报宣传需凸显商品的真实性2消费者调研表明：78%的消费者介意图片是不是实物图，他们更希望看到真实的、没有过多修饰与美化的商品图片信息9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区海报宣传需凸显商品的真实性2海报图9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区海报宣传需凸显商品的真实性2商品实拍图9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区关联销售商品注意控制商品与关联销售商品图片的数量39.3手机淘宝店铺详情页优化设计3根据消费者的页面平均停留时间设计关联信息繁琐

手机浏览的连贯性不如PC端，同时由于消费者的页面平均停留时间很短，所以在设计手机移动端的详情页面时，必须做到简单、直截了当，并且一针见血。课后思考题在手机淘宝上搜索玩具类目排名前五的店铺首页设计有何优势。请举例说明FABE原则在手机淘宝详情页设计中的具体应用。假如要为某品牌笔记本电脑设计详情页，请简述自己的设计思路。第10章

手机移动端微店

视觉设计掌握微店首页的优化设计方法掌握商品详情页的优化设计方法掌握微店底部导航的优化设计方法根据母婴微店视觉设计案例进行实战练习学习目标目录商品详情页优化设计10.2母婴微店视觉设计案例构思10.4微店底部导航优化设计10.3母婴微店视觉设计案例实操10.5微店首页优化设计10.110.1微店首页优化设计首页的框架设计1清晰而准确的设计思路2遵守设计学的“七秒定律”3注重细节设计410.1微店首页优化设计1首页的框架设计店铺招牌微店公告焦点大图商品分类商品展示10.1微店首页优化设计1首页的框架设计店铺招牌10.1微店首页优化设计1首页的框架设计店铺招牌微店公告

微店公告常以文字来说明店铺优势、商品卖点、促销信息或服务内容等。只要是能增加顾客对店铺的信任度且便于顾客浏览的相关信息，都可以将其展示在微店公告中。10.1微店首页优化设计1首页的框架设计店铺招牌微店公告焦点大图10.1微店首页优化设计1首页的框架设计店铺招牌微店公告焦点大图商品分类10.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示限时折扣

1店长推荐

2全部商品

310.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示限时折扣

110.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示店长推荐

210.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示全部商品

310.1微店首页优化设计2清晰而准确的设计思路

微店首页10.1微店首页优化设计3遵守设计学的“七秒定律”在设计学中有一条“七秒定律”，据专业机构研究发现，人关注一个商品的时间通常为7秒，而这7秒的时间内影响70%的人购买的第一要素是色彩。首页设计效果10.1微店首页优化设计4注重细节设计使用半身图10.1微店首页优化设计4注重细节设计穿插全景图10.2商品详情页优化设计商品主图设计01商品描述图的设计0210.2商品详情页优化设计1商品主图的设计10.2商品详情页优化设计2商品描述图的设计

创意海报情景大图根据前三屏3秒注意力原则（前三屏决定顾客是否想购买商品，3秒钟必须引起顾客的注意力），开头的大图是视觉焦点，背景应该采用能够展示品牌情调及商品特色的意境图，这样可以在第一时间吸引买家的注意力商品卖点/特性商品卖点/作用/功能商品给消费者带来的好处根据FAB法则排序：F（特性）→A（作用）→B（好处）→Feature（特性）：商品品质，即指商品用料、设计的特点，即商品能看得到、摸得着的东西，是商品与众不同的地方。Advantage（作用）：从特性引发的用途，即商品的独特之处；就是这种属性将告诉客户该商品的作用或优势。Benefit（好处）：指作用或者优势会给客户带来的利益，对顾客的好处（因客户而异）。卖点中出现的数字，比如销量突破50000，50000这个数宇要放大加粗，制造劲爆的效果和氛围商品参数/信息商品的可视化尺寸设计可以采用实物与商品对比，让顾客切身体验到商品实际尺寸，以免收到货时才发现低于心理预期10.2商品详情页优化设计2商品描述图的设计

同行商品优劣对比商品优劣PK：通过对比强化商品卖点，不断地向消费者阐述商品优势模特/商品全方位展示商品展示以主推颜色为主，服装类的商品要提供模特的三围、身高信息。最好后面可以放置一些买家真人秀的模块，目的就是拉近与消费者的距离，让消费者了解商品是否适合售后保障问题/物流售后就是解决消费者已知和未知的各种问题，例如，是否支持7天无理由退换货，发什么快递，快递大概几天能到，商品有质量问题怎么解决等。这一块做好的话可以减轻客服不少的工作压力，增加购买转化率商品细节展示细节图片要清晰富有质感，并且附带相关的文字介绍商品包装展示店铺/商品资质证书品牌店面/生产车间展示店铺的资质证书以及生产车间方面的展示可以烘托出品牌和实力，但店铺的品牌不是通过几张图片以及写个品牌故事就可以做出来的，而是在整个交易过程中通过各种细节展现给消费者的10.3微店底部导航优化设计底部导航的主要功能1底部导航的设计规则210.3微店底部导航优化设计1底部导航的主要功能单手操作智能手机的触及屏幕区域10.3微店底部导航优化设计2底部导航的设计规则1只显示最重要的功能2避免使用滚动设计3告知用户当前位置优秀的底部导航设计要遵循以下规则：10.3微店底部导航优化设计2底部导航的设计规则1只显示最重要的功能底部导航块不超过5个10.3微店底部导航优化设计2底部导航的设计规则2避免使用滚动设计

对于小屏幕来说，隐藏一部分导航图标显然是一个解决方案，因为不用担心屏幕限制，只需把导航块置于一个可滚动区域。但是，这种方式难免会降低使用效率，因为即使消费者已经看到了自己需要的图标，可能仍然需要滚动一下才能看到全部标签。10.3微店底部导航优化设计2底部导航的设计规则

对于用户来说，在成功地使用导航之前，他们要搞清楚的基本问题便是“我现在在哪”。优秀的设计应该是使用户在没有任何外界指引的情况下，也能仅靠第一眼就能知道该如何从A点到B点。因此，应该使用合适的视觉线索（图标、标签或者颜色）直观地告诉用户，而不必有任何多余的解释。3告知用户当前位置10.4母婴微店视觉设计案例构思01首页设计布局规划02