淘宝网店首页的视觉文案设计.pptx

1、店铺首页的视觉文案设计CHAPTER EIGHT 首页可以说是一个网店的脸面，如果店铺的首页不美观，就不能有效吸引消费者的注意力，那么不管店铺的商品有多少，也很难吸引消费者购买。当然，首页不能只有图片，还需要配上合适的文案，才能让它更具可读性。掌握衡量首页设计水平的四大指标。掌握店招视觉文案设计的方法。掌握首焦轮播区视觉文案设计的方法。掌握商品陈列区视觉文案设计的方法。学习目标Contents目录首页设计水平的四大指标1首页各模块的视觉文案设计2一、首页设计水平的四大指标首页跳失率1首页点击率2首页人均点击次数3首页平均停留时间41 1 1 1 首页跳失率首页跳失率一、首页设计水平的四大指标l

2、首页跳失率是指消费者通过某种渠道进入店铺，只访问了首页一个页面就离开的访问次数占该入口总访问次数的比例。电商运营者需要随时观测店铺的各项数据，并根据数据变化情况对页面进行优化与调整。l根据店铺规模和所售商品的类型，可以参照这样的判断标准：如果是心级店铺，那么跳失率在70%及以下都属于正常，不需要进行优化；冠级店铺如果跳失率在60%以上，就需要考虑是否是海报设计成文案信息出现了问题，需要根据具体的数据做出相应的优化与调整。1 1 1 1 首页跳失率首页跳失率一、首页设计水平的四大指标n以淘宝店铺为例，消费者进入店铺的店铺首页渠道有很多，大致可以分为以下四种渠道。2 2 2 2 首页点击率首页点击

3、率一、首页设计水平的四大指标l首页点击率是商品在首页展现后的被点击的比例，即首页点击率首页点击量首页展现量。l首页点击率越高，说明商品对消费者的吸引力越强；首页点击率越低，说明商品对消费者的吸引力越差，这时就需要对店铺进行优化，如优化商品图片和推广标题，或者优化商品详情页中的信息，让商品的展现尽可能多地带来点击量。3 3 3 3 首页人均点击次数首页人均点击次数一、首页设计水平的四大指标l首页人均点击次数，是指在一段时间内，人均点击了多少次店铺首页。假设某日点击该网店的访问者数为150人，在此期间点击本店铺首页的总访问数为600次，那么首页人均点击次数为：600次150人=4次/人。l运营者要

4、根据首页人均点击次数来优化店铺整体的导航，美化商品图片，这对访客的引导非常重要。4 4 4 4 首页平均停留时间首页平均停留时间一、首页设计水平的四大指标l首页平均停留时间（单位：秒）访问店铺首页的所有访客总的停留时长访客数，多天的平均停留时间为各天平均停留时间的日均值。l一般情况下，访客平均停留时间越长，说明店铺的留客工作做得越到位。如果访客在首页平均停留时间很短，就要考虑商品的图片设计、优化等方面是否把商品特点都展现出来了，以及首页设计是否能够吸引访客，然后根据后台的数据统计做出相应的调整。Contents目录首页设计水平的四大指标1首页各模块的视觉文案设计2店招的视觉文案设计1首焦轮播区

5、的视觉文案设计2商品陈列区的视觉文案设计3二、首页各模块的视觉文案设计二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计1店招视觉设计规范l不同的电商平台对店招的图片尺寸有着不同的要求，下面以淘宝网为例来介绍店招的视觉设计规范。店招高度的设计规范淘宝后台要求的店招高度为120像素，建议设计时，设定店招尺寸为950像素120像素，加上导航条的高度30像素，共150像素，可避免发布后导航条不显示的问题二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计1店招视觉设计规范l店招的首要功能就是要清晰地展示店铺名称。在店招上可以添加品牌宣传语、近

6、期的打折促销信息、收藏按钮或移动端二维码等元素，但要注意这些元素最好不要超过3个。店招元素设计清晰的店铺名称品牌宣传语移动端二维码二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计1店招视觉设计规范l在设计店招时要注意和导航条的风格进行统一，利用色彩、修饰元素与风格的相似性来营造视觉上的一致性。店招和导航条风格统一统一的风格及修饰元素的设计，突出店铺的品牌形象二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计2店铺名称的艺术化处理用不同字体和字号的组合营造艺术感1将店铺名称的首个英文字母放大，并使用不同于其他字体风格的手写体，让店铺名

7、称文字的版式更加醒目、更具艺术感二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计2店铺名称的艺术化处理用不同字体和字号的组合营造艺术感1添加特效，突出特殊性和醒目度2为了将店铺名称与导航条的颜色区分开，使用了发光效果来修饰店铺名称，营造出了层次感，也贴合了店铺销售的照明设备的特点二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计2店铺名称的艺术化处理用不同字体和字号的组合营造艺术感1添加特效，突出特殊性和醒目度2使用修饰元素提升观赏性3使用帽子的图案来修饰店铺名称，文字与图案在外形上的契合让店铺名称更具个性和艺术感，更容易在消费者心

8、中形成特定的印象二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计3图层样式的应用l在导航条的制作中就需要应用图层样式。因为淘宝装修后台默认的样式只允许用户更改导航条的背景颜色。l一个质感强烈、层次清晰的导航条，不仅可以提升整个店铺首页的档次，而且能让消费者更乐意去点击。而图层样式的作用就是对设计元素进行修饰和美化，实现色彩、质感与光泽上的变化。二、首页各模块的视觉文案设计1 1 1 1 店招的视觉文案设计店招的视觉文案设计3图层样式的应用用“渐变叠加”图层样式来表现导航条功能按钮被鼠标触碰后的状态，在视觉上形成凹陷的效果，将其与导航条中正常状态下的功能按钮区分开

9、当鼠标指针触碰到导航条中任意一个功能按钮时，该按钮就会呈现出不同的效果，这就是添加图层样式的效果，能给人视觉上的错觉，让按钮上的文字更具层次感，更易于展示当前操作的结果二、首页各模块的视觉文案设计2 2 2 2 首焦轮播区的视觉文案设计首焦轮播区的视觉文案设计1设计聚焦消费者视线l在店铺首页的商品图片展示板块中，在其开端位置放置单张海报图片可以在一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。打开网页后第一时间出现在消费者视线中的区域即店铺首页的第一屏，在该区域会形成首焦位置。店铺的首焦位置首焦位置：由于该位置所占面积较大，所以成为最能吸引消费者眼球的位置二、首页各模块的视觉文案设计2

10、2 2 2 首焦轮播区的视觉文案设计首焦轮播区的视觉文案设计1设计聚焦消费者视线n店铺在首页的首焦位置安排了以文字叙述为主要表现形式的店铺介绍，消费者在进入店铺后迫切想要了解到的是商品的信息，而非店铺的介绍。二、首页各模块的视觉文案设计2 2 2 2 首焦轮播区的视觉文案设计首焦轮播区的视觉文案设计1设计聚焦消费者视线有趣的图片展示，能让消费者通过视觉获得较为愉悦的体验文案信息告知了消费者店铺中的优惠活动，因为店铺的优惠活动信息对于大部分消费者而言都是极具吸引力的。同时，简洁的文字与图形装饰的结合让消费者能够轻松地获取相关信息二、首页各模块的视觉文案设计2 2 2 2 首焦轮播区的视觉文案设计

11、首焦轮播区的视觉文案设计2构成首焦轮播图的三要素l店铺首页中的首焦轮播区基本上都是由三个要素组成的，即唯美、绚丽的背景，完整、精致的商品形象，以及精心编排的广告文案。首焦轮播区设计三要素背景商品广告文字二、首页各模块的视觉文案设计2 2 2 2 首焦轮播区的视觉文案设计首焦轮播区的视觉文案设计2构成首焦轮播图的三要素首焦轮播图的背景一定要与商品的形象保持一致的风格，或者能够烘托出某种特定的气氛。以七夕节为主题的背景不同主题的背景图以“双十一”活动为主题的背景二、首页各模块的视觉文案设计2 2 2 2 首焦轮播区的视觉文案设计首焦轮播区的视觉文案设计2构成首焦轮播图的三要素首焦轮播图中的商品形象

12、图一定要经过色调和光影处理，能够真实再现商品的色彩和品质，或者根据背景和文字的风格做适当修饰。处理前后的商品形象对比处理后：色彩纯净，画面清晰，画面层次感强，商品形象更突出处理前：色彩灰暗，画质朦胧，画面层次不清晰，背景色调不理想二、首页各模块的视觉文案设计2 2 2 2 首焦轮播区的视觉文案设计首焦轮播区的视觉文案设计2构成首焦轮播图的三要素文字是首焦轮播图设计中不可或缺的重要元素，很多不能用图片表达的信息都需要通过文字来传达，如活动的内容、商品的名称、商品的价格等。因此，艺术化的文字编排在首焦轮播图的设计中就显得尤为重要。文字元素的设计二、首页各模块的视觉文案设计2 2 2 2 首焦轮播区

13、的视觉文案设计首焦轮播区的视觉文案设计3溶图的应用规范l溶图是用两张或两张以上的图片拼合起来的一种图片，讲究构图严谨，细节处理得当。制作精良的溶图配上文字可以是一幅优美的艺术作品。溶图l在选择溶图时要注意，要么溶图的色调与商品相似，要么溶图与商品能够和谐搭配。二、首页各模块的视觉文案设计3 3 3 3 商品陈列区的视觉文案设计商品陈列区的视觉文案设计1营造视觉动线l许多卖家习惯将商品展示图片整齐划一地排列在店铺首页之中。整齐排列的商品陈列图l如果在店铺首页放置过多的图片，会让消费者失去浏览的耐心。而这也直接导致了消费者F形浏览模式的形成。浏览初期，视线水平移动，且浏览范围最大。刚开始浏览时，消

14、费者对商品展示图充满了新鲜感和好奇，很可能将第一排图片全部浏览完，并根据从上到下的浏览经验，转向对第二排图片的浏览水平浏览范围缩短。此时图片的布局没有任何变化，消费者对于图片浏览的新鲜度就会降低，开始失去浏览的耐心，于是对第二排图片的水平浏览范围便会缩短失去耐心，开始进行垂直浏览。当消费者看到第三排仍然是一成不变的图片排列后，浏览的耐心就会更少，还可能会想，“图片怎么这么多，大概地往下看看吧”，于是开始只对左边垂直 浏览l因此，在进行商品陈列区图片的排列设计时，要首先使用整洁的排列让消费者获得轻松感，在此基础上还要注意图片不宜过多，横排图片最好不要超过五张。l通过灵活多变的排列方式形成视觉动线

15、，也能减少过于死板的排列组合带来的乏味感。商品海报展示图：将重点推荐的商品以单张海报的方式呈现，较为丰富的表现形式能很好地让消费者注意到商品信息单张商品展示图：较为重要的商品以单张图片的形式排列，较大的展示面积更能获得消费者的瞩目三张商品展示图：非重点推荐的产品可以三张并排展示的方式呈现单张图片：除了商品展示图外，还可以搭配一些与展示商品相关的商品组合图片，进一步吸引消费者的购买兴趣二、首页各模块的视觉文案设计3 3 3 3 商品陈列区的视觉文案设计商品陈列区的视觉文案设计2商品布局艺术化l折线型布局就是将商品图片按照错位的方式进行排列。折线型布局1二、首页各模块的视觉文案设计3 3 3 3 商品陈列区的视觉文案设计商品陈列区的视觉文案设计2商品布局艺术化l随意型布局就是将商品图片随意地放置在页面中，但是这种随意往往需要营造出一种特定的氛围和感觉，让这些商品之间产生一种联系。随意型布局2折线型布局1课后习题1请简述首页设计水平的四大指标分别是什么。2请列举几个你喜欢的店铺首页，并分析它们的视觉文案设计好在哪里。3请为折线型布局、随意型布局各举出一个实例。