电商视觉设计-第4章-店铺首页视觉设计说课材料
合集下载
网店美工视觉设计实战教程课件-第4章店铺首页核心模块设计
4.5.1 制作女装店招
（2）输入文本， 制作文字类型的店 标。
（4）利用直线分割 矩形，输入文本，制 作优惠券。
34
1. 设计思路
（1）新建文件， 创建店招空白区域 与导航区域的辅助 线。
（3）添加分类图 片，并结合形状与 文字使用。
（5）输入导航条 文本，并添加标签。
4.5.1 制作女装店招
A B
植入品牌形象
在设计时可以通过店铺名称、标志 来植入品牌形象。
抓住商品定位
产品定位是指展示你的店铺卖的什么产 品，精准的产品定位可以快速吸引目标 消费群体进入店铺。
4.1.2 制作常规店招
4
下面我们将介绍制作美妆专卖店“护肤壹家”常规店招的方法。由于该店铺名称与“护 肤品”有关，因此店招的整体色调要符合女性消费人群的特点，并且要有活动的氛围感。
9
输入导航条文本
38
10
最终效果
4.5.2 制作女装海报
1. 设计思路
确定主色调，红色可以 营造温暖的氛围，烘托 外套的保暖性。
39
在页面左侧添加文本，在 页面右侧添加女装模特素 材，并为女装模特添加投 影，增加其立体感。
制作背景，通过 素材与矩形工具 的运用来制作出 背景效果。
4.5.1 制作女装店招
35
2. 知识要点
文字店标的设计 导航条的设计
文本的输入
图形的绘制
4.5.1 制作女装店招
36
3. 操作步骤 下面进行女装店招的制作，其具体操作如下。
1
3
新建文件并创建辅助线
绘制收藏图标
2
输入文本
4
绘制并复制矩形
4.5.1 制作女装店招
5
店铺首页视觉设计与案例讲解
商品 店首铺首焦页轮视觉播设区计和设案计例讲三解要素
广告 文字
4.3 首焦轮播区视觉设计 2 构建设计图三要素
以七夕节为 主题的背景
以“双11” 活动为主题
的背景
不同主题的背景图
店铺首页视觉设计和案例讲解
4.3 首焦轮播区视觉设计 2 构建设计图三要素
色彩灰暗，画质朦胧， 画面层次不清晰，背景
色调不理想
2 店铺名称的艺术化处理
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名称，文字 与图案在外形上的契合让店铺名称更具 个性和艺术感，更容易在消费者心中形
成特定的印象
为店铺名称添加修饰元素
店铺首页视觉设计和案例讲解
4.2 店招视觉设计
3 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
店铺首页视觉设计和案例讲解
4.1 首页视觉水平的四大指标
1 首页跳失率 2 首页点击率 3 首页人均点击次数 4 首页平均停留时间
店铺首页视觉设计和案例讲解
4.1 首页视觉水平的四大指标
1 首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问 次数占该入口总访问次数的比例。
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感 2 添加特效突出特殊性和醒目度 3 使用修饰元素提升观赏性
店铺首页视觉设计和案例讲解
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
将店铺名称的首个英文字母放大，并使用 不同于其他字体风格的手写体，让店铺名
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
店铺首页视觉设计方案PPT课件
03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
首焦位置
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
两类店铺首页排版
4.1 首页视觉水平的四大指标
3 首页人均点击次数
首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标
《电子商务视觉设计》-教学教案
二、商品短视频构图要素与构图法则
在拍摄商品短视频时，拍摄的距离、角度、光线等因素不是一成不变的，可以根据具体情况随时进行调整。
在进行商品画面构图时，需要注意以下四个要素。
1．线条
2．色彩
3．光线
4．影调
在进行商品短视频拍摄取景时，要遵循以下构图法则。
1．主体明确
2．主体陪衬
3．合理布局
4．场景衬托
5．画面简洁
三、商品拍摄景别
在拍摄商品短视频时，需要展现商品的整体形象、不同角度的外观及内部细节等，所以经常采用全景、中景、近景、特写等不同的景别进行拍摄。
1．全景
2．中景
3．近景
4．特写
四、拍摄方向与拍摄角度
拍摄方向主要有正面、前侧面、侧面、背面等，通过选择不同的拍摄方向，可以多方位地展示商品。
在拍摄方向不变的前提下，通过改变拍摄的高度可以使画面的透视关系发生改变。
由于高度的变化，常常用到的有平视、仰视、俯视等拍摄角度。
对于拍摄高度的选择，要根据所要表现的主体商品和周围的环境来确定。
例如，在服装视频拍摄中，常常采用平视角度拍摄上衣、裙装，采用仰视角度拍摄裤子、靴子等，采用俯视角度拍摄内衣等商品。
第三节主图视频设计案例实操
一、导入并整理素材
制作商品主图视频前，首先要将所用的素材导入Premiere程序中，然后对素材文件进行整理。
(中职) Photoshop CC网店视觉设计第四章教学课件
上一页 下一页 返回
4.2 图像的显示与尺寸控制
• （5）使用菜单命令改变图像的显示比例。在“视图”菜单中，有 “放大”“缩小”“满画布显示”“实际像素”“打印尺寸”命令。 通过这些菜单命令的使用，来改变图像的显示比例。
• （6）使用工具箱的“缩放工具”改变图像的显示比例。单击工具箱 上的“缩放工具”按钮，再单击画布窗口的内部，就可以将图像显示 比例放大。按住Alt 键，并单击画布窗口的内部即可将图像显示比例 缩小。用鼠标拖动选中图像的一部分，即可使该部分图像布满整个画 布窗口。
• 网格的主要作用是对齐参考线，以便在操作中对齐物体，网格也不会 随图像输出。单击“视图”菜单下的“显示”子菜单中的“网格”命 令，即可在画布窗口内显示出网格来，如图4.4 所示。再次单击“视 图”菜单下的“显示”子菜单中的“网格” 命令，即可取消画布窗 口内的网格。当网格容易与图像混淆时，需要重新设置网格。此时， 应单击“编辑”菜单的“首选项”子菜单中“参考线、网格和切片” 命令，在调出的“首选项”对话框中，可以对网格的颜色、样式、间 隔线以及子网格进行设置，以达到满意效果为止。
• （4）Cmd（Mac）/Ctrl（Win）+悬停在图层上方：在处理图层时， 可以查看测量参考线。选定某个图层后，在按住 Cmd 键（Mac）或 Ctrl 键（Windows）的同时将光标悬停在另一图层上方。可以将此 功能与箭头键结合使用，以轻移所选的图层。
上一页
返回
4.2 图像的显示与尺寸控制
• 4.2.1 图像的显示控制
• Photoshop 提供了许多工具，如抓手工具、缩放工具、缩放命令和 导航面板等，使得使用者可以十分方便地按照不同的放大倍数查看图 像的不同区域。下面分别作简要介绍。
• （1）使用工具箱的抓手工具来改变图像的显示部位. • （2）当打开的图像很大，或者操作中将图像放大，以至于窗口中无
4.2 图像的显示与尺寸控制
• （5）使用菜单命令改变图像的显示比例。在“视图”菜单中，有 “放大”“缩小”“满画布显示”“实际像素”“打印尺寸”命令。 通过这些菜单命令的使用，来改变图像的显示比例。
• （6）使用工具箱的“缩放工具”改变图像的显示比例。单击工具箱 上的“缩放工具”按钮，再单击画布窗口的内部，就可以将图像显示 比例放大。按住Alt 键，并单击画布窗口的内部即可将图像显示比例 缩小。用鼠标拖动选中图像的一部分，即可使该部分图像布满整个画 布窗口。
• 网格的主要作用是对齐参考线，以便在操作中对齐物体，网格也不会 随图像输出。单击“视图”菜单下的“显示”子菜单中的“网格”命 令，即可在画布窗口内显示出网格来，如图4.4 所示。再次单击“视 图”菜单下的“显示”子菜单中的“网格” 命令，即可取消画布窗 口内的网格。当网格容易与图像混淆时，需要重新设置网格。此时， 应单击“编辑”菜单的“首选项”子菜单中“参考线、网格和切片” 命令，在调出的“首选项”对话框中，可以对网格的颜色、样式、间 隔线以及子网格进行设置，以达到满意效果为止。
• （4）Cmd（Mac）/Ctrl（Win）+悬停在图层上方：在处理图层时， 可以查看测量参考线。选定某个图层后，在按住 Cmd 键（Mac）或 Ctrl 键（Windows）的同时将光标悬停在另一图层上方。可以将此 功能与箭头键结合使用，以轻移所选的图层。
上一页
返回
4.2 图像的显示与尺寸控制
• 4.2.1 图像的显示控制
• Photoshop 提供了许多工具，如抓手工具、缩放工具、缩放命令和 导航面板等，使得使用者可以十分方便地按照不同的放大倍数查看图 像的不同区域。下面分别作简要介绍。
• （1）使用工具箱的抓手工具来改变图像的显示部位. • （2）当打开的图像很大，或者操作中将图像放大，以至于窗口中无
《电子商务视觉设计(第2版)》-课程标准
电子商务视觉设计（第2版）》课程标准一、课程性质该课程是电子商务专业核心课程，同时也是电子商务专业的一门面向职业岗位（群）的综合性实训课程。
本课程以PhotoshopCC2018和PremiereCC2019为操作平台，依据电子商务视觉设计工作任务规划课程内容，以理论+实例的形式全面介绍了PC端电商网店与移动端电商网店、微店的视觉设计思路和具体的实现方法，打破了以理论传授为主要特征的课程模式，转变为以工作任务为中心组织课程内容，并让学生在完成具体任务的过程中构建相关理论与实践知识，锻炼技能，发展职业能力。
通过本课程的讲解、演练与实践，能够促进学生更好地掌握电子商务视觉设计实战技能，具备利用Photoshop和Premiere进行电子商务视觉设计的实操能力，让学生从营销的角度，利用视觉手段来进行店铺形象、品牌、商品信息的传达，吸引与转化流量，提升转化率。
该课程的先修课程为《Photoshop网店美工实例教程》《网店美工》等，后续课程为《电子商务视觉营销》《网店运营实务》等。
二、设计思路本课程秉承“视觉是手段，营销是目的”的宗旨，从营销的角度来解析电子商务视觉设计的方法与技巧，涵盖电商网站视觉配色设计、店铺标志视觉设计、店铺首页视觉设计、商品详情页视觉设计、高点击率推广图片视觉设计、网店促销活动页视觉设计、移动端网店用户体验设计、手机移动端淘宝店铺视觉设计、手机移动端微店视觉设计和商品短视频视觉设计等。
本课程按照电子商务视觉设计工作任务安排学习内容，采用情境教学、理实一体的授课方法，通过“操作+报告”的考试方法，全面考核学生电子商务视觉设计的实际能力。
1．遵循职业性。
高职教育就是就业教育，是一种适应市场需求、培养高等技术应用人才的职业教育，所以高职电子商务专业的《电子商务视觉设计》就应该达到直接为提高学生专业操作技能服务，并最终为学生就业服务的教学效果。
《电子商务视觉设计》课程的设计突出职业性，着力营造职业氛围，逐步提高学生电子商务视觉设计意识，培养学生电子商务视觉设计的实际能力。
电商视觉设计第4章店铺首页视觉设计
②水平浏览范围缩短。此时图片的布局没
有任何变化，消费者对于图片浏览的新鲜度 就会降低，开始失去浏览的耐心，于是对第
二排图片的水平浏览范围便会缩短。
③失去耐心，开始进行垂直浏览。当消
费者看到第三排仍然是一成不变的图片排列 后，浏览的耐心就会减少，还可能会想图片 怎么这么多，大概地往下看看吧，于是形成
对左边的垂直浏览。
F形浏览模式
4.4 商品陈列区视觉设计
1 营商造品视海觉报动线展示图：将重点推荐的商品以
单张海报的方式呈现，较为丰富的表现形 式能很好地让消费者注意到商品信息。
单张商品展示图：较为重要的商品以单
张图片形式排列，较大的展示面积更能获 得消费者的瞩目。
三张商品展示图：非重点推荐的产品可
以三张并排展示的效果呈现。
单张图片：除了商品展示图片以外，还可
以搭配一些与展示商品相关的商品组合图 片，进一步吸引消费者的购买兴趣。
4.4 商品陈列区视觉设计 2 商品布局艺术化
4.4 商品陈列区视觉设计 2 商品布局艺术化
4.4 商品陈列区视觉设计 2 商品布局艺术化
标题文字设置的字号较大，利用
4.5 化妆品店铺首页视觉斜设面和计浮雕案、例投影等效果来点缀 标题文字，使其更加精致
01
填充背景色
4.5 化妆品店铺首页视觉设计案例
02
设置文字属性
4.5 化妆品店铺首页视觉设计案例
03 添加商品图及优惠券
4.5 化妆品店铺首页视觉设计案例
04 绘制导航条背景
4.5 化妆品店铺首页视觉设计案例
05 为导航条添加文字
4.5 化妆品店铺首页视觉设计案例
添加文字并设置图层
06
样式
第4章店铺首页核心模块设计
4.5.1 制作女装店招
2. 知识要点
31
01 海报设计要点
02
文本的输入
03 图形的绘制
4.5.1 制作女装店招
3. 操作步骤 下面进行女装店招的制作，其具体操作如下。
24
4 5
2
修改文本后的优惠券效果 创建并复制组
Contents
目录
4.1 店招设计
4.2 分类导航设计
4.3 海报设计 4.4 优惠券设计 4.5 实战演练
4.5.1 制作女装店招
26
输入文本，制作文 字类型的店标。
通过直线分割矩形， 输入文本制作优惠券。
1. 设计思路
新建文件，创建店 招空白区域与导航
分类导航按钮的制作比店招简单一些，一般可以使用Photoshop将其制作成好看的图片
13
格式。下面使用Photoshop CS6制作店铺的分类导航按钮，其具体操作如下。
1
2
绘制矩形 添加内阴影
4.2.2 设计分类导航按钮
14
4 1 3
绘制按钮 制作其他按钮并切片
5
2
存储切片
6
添加外发光
Contents
1
添加素材并输入文本
4.3.1 制作全屏海报
17
2
3
4
绘制直线
绘制树叶路径
填充并复制树叶
5
全屏海报效果
4.3.2 制作常规海报
根据放置的位置不同所要求的尺寸也有所不同，一般包括950像素、750像素、190像素
18
3个宽度，虽然海报的尺寸不同，但其制作方法相似，都要求凸出主题。下面以制作750像素
1
添加商品
3 2
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
色调不理想
色彩纯净，画面清晰， 画面层次感强，商品形
象更突出 处理前后的商品形象对比
4.3 首焦轮播区视觉设计 2 构建设计图三要素
如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出 文字的字体与字号、色彩的变化等是设计中最为关键的环节。
文字元素的设计
4.3 首焦轮播区视觉设计 3 溶图的应用规范
4.2 店招视觉设计
2 店铺名称的艺术化处理
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名称，文字 与图案在外形上的契合让店铺名称更具 个性和艺术感，更容易在消费者心中形
成特定的印象
为店铺名称添加修饰元素
4.2 店招视觉设计
3 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
1 店招视觉设计规范
店招和导航条风格统一
风格的统一及修饰元素的设 计，突出店铺的品牌形象
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感 2 添加特效突出特殊性和醒目度 3 使用修饰元素提升观赏性
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
相关信息
4.3 首焦轮播区视觉设计 2 构建设计图三要素
背景
商品 首焦轮播区设计三要素
广告 文字
4.3 首焦轮播区视觉设计 2 构建设计图三要素
以七夕节为 主题的背景
以“双11” 活动为主题
的背景
不同主题的背景图
4.3 首焦轮播区视觉设计 2 构建设计图三要素
色彩灰暗，画质朦胧， 画面层次不清晰，背景
学习目标
了解首页视觉水平的四大指标 掌握店招的设计规范及技巧 掌握首焦轮播区的设计技巧 了解商品陈列区的布局方式 掌握商品陈列区的布局技巧
目录
4.1 首页视觉水平的四大指标 4.2 店招视觉设计 4.3 首焦轮播区视觉设计 4.4 商品陈列区视觉设计 4.5 化妆品店铺首页视觉设计案例
将店铺名称的首个英文字母放大，并使用 不同于其他字体风格的手写体，让店铺名
称文字的版式更加醒目、更具艺术感
不同字体字号的组合
4.2 店招视觉设计
2 店铺名称的艺术化处理
2 添加特效突出特殊性和醒目度
为了将店铺名称与导航条的颜色区 分开，使用了发光效果来修饰店铺 名称，营造出的层次感，也贴合了
店铺中销售的照明设备的特点
感，更易于展示当前操作的结果
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在 一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。
首焦位置：由于该 位置所占面积较大， 所以成为最能吸引 消费者眼球的位置
展示图充满了新鲜感和好奇，很可能将第
一排图片全部浏览完毕，并根据从上到下
的浏览经验，转向对第二排图片的浏览。
②水平浏览范围缩短。此时图片的布局没
有任何变化，消费者对于图片浏览的新鲜度 就会降低，开始失去浏览的耐心，于是对第
二排图片的水平浏览范围便会缩短。
③失去耐心，开始进行垂直浏览。当消
费者看到第三排仍然是一成不变的图片排列 后，浏览的耐心就会减少，还可能会想图片 怎么这么多，大概地往下看看吧，于是形成
03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
对左边的垂直浏览。
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
能按钮区分开
4.2 店招视觉设计
3 图层样式的应用
当鼠标指针触碰到导航条中任意一个功能按钮时，该 按钮就会呈现出不同的效果，这就是添加图层样式的 效果，给人视觉上的错觉，让按钮上的文字更具层次
溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节 处理得当。
溶图
4.4 商品陈列区视觉设计 1 营造视觉动线 2 商品布局艺术化
4.4 商品陈列区视觉设计 1 营造视觉动线
商品陈列图
4.4 商品陈列区视觉设计
①浏览初期，视线水平移动，且浏览 1 营范造围视最觉大动。线 刚开始浏览时，消费者对商品
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。
首焦位置
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
有趣的图片展示，能 让消费者通过视觉获 得较为愉悦的体验
文案信息告知了消费者店铺中的优惠活动， 因为店铺的优惠活动信息对于大部分消费者 而言都是极具吸引力的。同时，简洁的文字 与图形装饰的结合让消费者能够轻松地获取
4.1 首页视时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标
4 首页平均停留时间
首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数 （单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首 页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是 否能留住访客。
4.2 店招视觉设计
店招视觉设计规范
01
店铺名称的艺术化处理
02
图层样式的应用
4.1 首页视觉水平的四大指标
1 首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问 次数占该入口总访问次数的比例。
进入店铺首页的渠道
4.1 首页视觉水平的四大指标
2 首页点击率
首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点 击量÷首页展现量）。
两类店铺首页排版
色彩纯净，画面清晰， 画面层次感强，商品形
象更突出 处理前后的商品形象对比
4.3 首焦轮播区视觉设计 2 构建设计图三要素
如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出 文字的字体与字号、色彩的变化等是设计中最为关键的环节。
文字元素的设计
4.3 首焦轮播区视觉设计 3 溶图的应用规范
4.2 店招视觉设计
2 店铺名称的艺术化处理
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名称，文字 与图案在外形上的契合让店铺名称更具 个性和艺术感，更容易在消费者心中形
成特定的印象
为店铺名称添加修饰元素
4.2 店招视觉设计
3 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
1 店招视觉设计规范
店招和导航条风格统一
风格的统一及修饰元素的设 计，突出店铺的品牌形象
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感 2 添加特效突出特殊性和醒目度 3 使用修饰元素提升观赏性
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
相关信息
4.3 首焦轮播区视觉设计 2 构建设计图三要素
背景
商品 首焦轮播区设计三要素
广告 文字
4.3 首焦轮播区视觉设计 2 构建设计图三要素
以七夕节为 主题的背景
以“双11” 活动为主题
的背景
不同主题的背景图
4.3 首焦轮播区视觉设计 2 构建设计图三要素
色彩灰暗，画质朦胧， 画面层次不清晰，背景
学习目标
了解首页视觉水平的四大指标 掌握店招的设计规范及技巧 掌握首焦轮播区的设计技巧 了解商品陈列区的布局方式 掌握商品陈列区的布局技巧
目录
4.1 首页视觉水平的四大指标 4.2 店招视觉设计 4.3 首焦轮播区视觉设计 4.4 商品陈列区视觉设计 4.5 化妆品店铺首页视觉设计案例
将店铺名称的首个英文字母放大，并使用 不同于其他字体风格的手写体，让店铺名
称文字的版式更加醒目、更具艺术感
不同字体字号的组合
4.2 店招视觉设计
2 店铺名称的艺术化处理
2 添加特效突出特殊性和醒目度
为了将店铺名称与导航条的颜色区 分开，使用了发光效果来修饰店铺 名称，营造出的层次感，也贴合了
店铺中销售的照明设备的特点
感，更易于展示当前操作的结果
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在 一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。
首焦位置：由于该 位置所占面积较大， 所以成为最能吸引 消费者眼球的位置
展示图充满了新鲜感和好奇，很可能将第
一排图片全部浏览完毕，并根据从上到下
的浏览经验，转向对第二排图片的浏览。
②水平浏览范围缩短。此时图片的布局没
有任何变化，消费者对于图片浏览的新鲜度 就会降低，开始失去浏览的耐心，于是对第
二排图片的水平浏览范围便会缩短。
③失去耐心，开始进行垂直浏览。当消
费者看到第三排仍然是一成不变的图片排列 后，浏览的耐心就会减少，还可能会想图片 怎么这么多，大概地往下看看吧，于是形成
03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
对左边的垂直浏览。
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
能按钮区分开
4.2 店招视觉设计
3 图层样式的应用
当鼠标指针触碰到导航条中任意一个功能按钮时，该 按钮就会呈现出不同的效果，这就是添加图层样式的 效果，给人视觉上的错觉，让按钮上的文字更具层次
溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节 处理得当。
溶图
4.4 商品陈列区视觉设计 1 营造视觉动线 2 商品布局艺术化
4.4 商品陈列区视觉设计 1 营造视觉动线
商品陈列图
4.4 商品陈列区视觉设计
①浏览初期，视线水平移动，且浏览 1 营范造围视最觉大动。线 刚开始浏览时，消费者对商品
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。
首焦位置
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
有趣的图片展示，能 让消费者通过视觉获 得较为愉悦的体验
文案信息告知了消费者店铺中的优惠活动， 因为店铺的优惠活动信息对于大部分消费者 而言都是极具吸引力的。同时，简洁的文字 与图形装饰的结合让消费者能够轻松地获取
4.1 首页视时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标
4 首页平均停留时间
首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数 （单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首 页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是 否能留住访客。
4.2 店招视觉设计
店招视觉设计规范
01
店铺名称的艺术化处理
02
图层样式的应用
4.1 首页视觉水平的四大指标
1 首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问 次数占该入口总访问次数的比例。
进入店铺首页的渠道
4.1 首页视觉水平的四大指标
2 首页点击率
首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点 击量÷首页展现量）。
两类店铺首页排版