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

第4章 店铺首页视觉设计学习目标了解首页视觉水平的四大指标掌握店招的设计规范及技巧掌握首焦轮播区的设计技巧了解商品陈列区的布局方式掌握商品陈列区的布局技巧目 录4.44.5首焦轮播区视觉设计化妆品店铺首页视觉设计案例商品陈列区视觉设计店招视觉设计首页视觉水平的四大指标4.1 首页视觉水平的四大指标首页平均停留时间首页跳失率首页点击率首页人均点击次数31244.1 首页视觉水平的四大指标 1 首页跳失率 首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。进入店铺首页的渠道4.1 首页视觉水平的四大指标 2 首页点击率 首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点击量÷首页展现量）。两类店铺首页排版4.1 首页视觉水平的四大指标 3 首页人均点击次数 首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为600次，那么首页人均点击次数为：600次÷150人=4次/人。人均点击次数4.1 首页视觉水平的四大指标 4 首页平均停留时间 首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是否能留住访客。4.2 店招视觉设计010302图层样式的应用店铺名称的艺术化处理店招视觉设计规范4.2 店招视觉设计 1 店招视觉设计规范店招高度设计规范淘宝后台的店招高度为120像素，建议设计时设定店招尺寸为950×120像素，加上导航条高度30像素，共150像素，可避免发布后导航不显示的问题4.2 店招视觉设计 1 店招视觉设计规范店招元素设计移动端二维码品牌宣传语清晰的店铺名称4.2 店招视觉设计 1 店招视觉设计规范店招和导航条风格统一风格的统一及修饰元素的设计，突出店铺的品牌形象4.2 店招视觉设计 2 店铺名称的艺术化处理 使用修饰元素提升观赏性用不同字体和字号的组合营造艺术感13添加特效突出特殊性和醒目度24.2 店招视觉设计 2 店铺名称的艺术化处理用不同字体和字号的组合营造艺术感1将店铺名称的首个英文字母放大，并使用不同于其他字体风格的手写体，让店铺名称文字的版式更加醒目、更具艺术感不同字体字号的组合4.2 店招视觉设计 2 店铺名称的艺术化处理为了将店铺名称与导航条的颜色区分开，使用了发光效果来修饰店铺名称，营造出的层次感，也贴合了店铺中销售的照明设备的特点添加特效突出特殊性和醒目度24.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 构建设计图三要素色彩灰暗，画质朦胧，画面层次不清晰，背景色调不理想处理后处理前色彩纯净，画面清晰，画面层次感强，商品形象更突出处理前后的