电商视觉设计 第4章 店铺首页视觉设计

1、第4章 店铺首页视觉设计,了解首页视觉水平的四大指标 掌握店招的设计规范及技巧 掌握首焦轮播区的设计技巧 了解商品陈列区的布局方式 掌握商品陈列区的布局技巧,目 录,4.1 首页视觉水平的四大指标,4.1 首页视觉水平的四大指标,1 首页跳失率,首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。,进入店铺首页的渠道,4.1 首页视觉水平的四大指标,2 首页点击率,首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点击量首页展现量）。,两类店铺首页排版,4.1 首页视觉水平的四大指标,3 首页人均点击次数,首页人均点击次数，指在一段时间

2、内人均点击了多少次，如下图所示。假设某日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为600次，那么首页人均点击次数为：600次150人=4次/人。,人均点击次数,4.1 首页视觉水平的四大指标,4 首页平均停留时间,首页平均停留时间=访店铺首页的所有访客总的停留时长访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是否能留住访客。,4.2 店招视觉设计,4.2 店招视觉设计,1 店招视觉设计规范,4.2 店招视觉设计,1 店招视觉设计规范,4.2 店招视觉设计,1 店招视觉设计规范,4

3、.2 店招视觉设计,2 店铺名称的艺术化处理,4.2 店招视觉设计,2 店铺名称的艺术化处理,不同字体字号的组合,4.2 店招视觉设计,2 店铺名称的艺术化处理,4.2 店招视觉设计,2 店铺名称的艺术化处理,为店铺名称添加修饰元素,4.2 店招视觉设计,3 图层样式的应用,图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也发挥着重要的作用。,4.2 店招视觉设计,3 图层样式的应用,4.3 首焦轮播区视觉设计,4.3 首焦轮播区视觉设计,1 设计聚焦消费者视线,在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在一定程度上聚焦消费者的视线，让其有继续浏览页面的兴

4、趣。,4.3 首焦轮播区视觉设计,1 设计聚焦消费者视线,下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。,首焦位置,4.3 首焦轮播区视觉设计,1 设计聚焦消费者视线,首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。,4.3 首焦轮播区视觉设计,2 构建设计图三要素,首焦轮播区设计三要素,背景,商品,广告文字,4.3 首焦轮播区视觉设计,2 构建设计图三要素,不同主题的背景图,以七夕节为主题的背景,以“双11”活动为主题的背景,4.3 首焦轮播区视觉设计,2 构建设计图三要素,处理前后的商品形象对比,色彩灰暗，画质朦胧，画面层次不清晰，背景色调不理想,色彩纯净，画面

5、清晰，画面层次感强，商品形象更突出,4.3 首焦轮播区视觉设计,2 构建设计图三要素,如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出文字的字体与字号、色彩的变化等是设计中最为关键的环节。,文字元素的设计,4.3 首焦轮播区视觉设计,3 溶图的应用规范,溶图,溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节处理得当。,4.4 商品陈列区视觉设计,4.4 商品陈列区视觉设计,1 营造视觉动线,商品陈列图,4.4 商品陈列区视觉设计,1 营造视觉动线,F形浏览模式,4.4 商品陈列区视觉设计,1 营造视觉动线,4.4 商品陈列区视觉设计,2 商品布局艺术化,折线型布局

6、,随意型布局,4.4 商品陈列区视觉设计,2 商品布局艺术化,折线型布局,4.4 商品陈列区视觉设计,2 商品布局艺术化,随意型布局,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺首页视觉设计案例,4.5 化妆品店铺