电商视觉设计-第4章-店铺首页视觉设计说课材料

4.1 首页视觉水平的四大指标
3 首页人均点击次数
首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标
溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节 处理得当。
溶图
4.4 商品陈列区视觉设计 1 营造视觉动线 2 商品布局艺术化
4.4 商品陈列区视觉设计 1 营造视觉动线
商品陈列图
4.4 商品陈列区视觉设计
①浏览初期，视线水平移动，且浏览 1 营范造围视最觉大动。线 刚开始浏览时，消费者对商品
感，更易于展示当前操作的结果
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在 一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。
首焦位置：由于该 位置所占面积较大， 所以成为最能吸引 消费者眼球的位置
对左边的垂直浏览。
展示图充满了新鲜感和好奇，很可能将第
一排图片全部浏览完毕，并根据从上到下
的浏览经验，转向对第二排图片的浏览。
②水平浏览范围缩短。此时图片的布局没
有任何变化，消费者对于图片浏览的新鲜度 就会降低，开始失去浏览的耐心，于是对第
二排图片的水平浏览范围便会缩短。
③失去耐心，开始进行垂直浏览。当消
费者看到第三排仍然是一成不变的图片排列 后，浏览的耐心就会减少，还可能会想图片 怎么这么多，大概地往下看看吧，于是形成
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
能按钮区分开
4.2 店招视觉设计
3 图层样式的应用
当鼠标指针触碰到导航条中任意一个功能按钮时，该 按钮就会呈现出不同的效果，这就是添加图层样式的 效果，给人视觉上的错觉，让按钮上的文字更具层次
相关信息
4.3 首焦轮播区视觉设计 2 构建设计图三要素
背景
商品 首焦轮播区设计三要素
广告 文字
4.3 首焦轮播区视觉设计 2 构建设计图三要素
以七夕节为 主题的背景
以“双11” 活动为主题
的背景
不同主题的背景图
4.3 首焦轮播区视觉设计 2 构建设计图三要素
色彩灰暗，画质朦胧， 画面层次不清晰，背景
03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
1 店招视觉设计规范
店招和导航条风格统一
风格的统一及修饰元素的设 计，突出店铺的品牌形象
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感 2 添加特效突出特殊性和醒目度 3 使用修饰元素提升观赏性
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。
首焦位置
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
有趣的图片展示，能 让消费者通过视觉获 得较为愉悦的体验
文案信息告知了消费者店铺中的优惠活动， 因为店铺的优惠活动信息对于大部分消费者 而言都是极具吸引力的。同时，简洁的文字 与图形装饰的结合让消费者能够轻松地获取
学习目标
了解首页视觉水平的四大指标 掌握店招的设计规范及技巧 掌握首焦轮播区的设计技巧 了解商品陈列区的布局方式 掌握商品陈列区的布局技巧
目录
4.1 首页视觉水平的四大指标 4.2 店招视觉设计 4.3 首焦轮播区视觉设计 4.4 商品陈列区视觉设计 4.5 化妆品店铺首页视觉设计案例
4.2 店招视觉设计
2 店铺名称的艺术化处理
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名称，文字 与图案在外形上的契合让店铺名称更具 个性和艺术感，更容易在消费者心中形
成特定的印象
为店铺名称添加修饰元素
4.2 店招视觉设计
3 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
4 首页平均停留时间
首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数 （单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首 页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是 否能留住访客。
4.2 店招视觉设计
店招视觉设计规范
01
店铺名称的艺术化处理
02
图层样式的应用
将店铺名称的首个英文字母放大，并使用 不同于其他字体风格的手写体，让店铺名
称文字的版式更加醒目、更具艺术感
不同字体字号的组合
4.2 店招视觉设计
2 店铺名称的艺术化处理
2 添加特效突出特殊性和醒目度
为了将店铺名称与导航条的颜色区 分开，使用了发光效果来修饰店铺 名称，营造出的层次感，也贴合了
店铺中销售的照明设备的特点
4.1 首页视觉水平的四大指标
1 首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问 次数占该入口总访问次数的比例。
进入店铺首页的渠道
Hale Waihona Puke Baidu
4.1 首页视觉水平的四大指标
2 首页点击率
首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点 击量÷首页展现量）。
两类店铺首页排版
色调不理想
色彩纯净，画面清晰， 画面层次感强，商品形
象更突出 处理前后的商品形象对比
4.3 首焦轮播区视觉设计 2 构建设计图三要素
如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出 文字的字体与字号、色彩的变化等是设计中最为关键的环节。
文字元素的设计
4.3 首焦轮播区视觉设计 3 溶图的应用规范