电商视觉设计 第4章 店铺首页视觉设计 ppt课件
合集下载
网店美工视觉设计实战教程课件-第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
电商视觉设计教程
1 视觉识别设计
宝马标志的变革
1.1 什么是视觉设计
2 视觉传达设计
视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素， 利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。
1.2 电商视觉设计前的准备
1
网店的视觉定位
2
明确视觉规范的作用
1.2 电商视觉设计前的准备
1 网店的视觉定位
2 色彩的联觉聚焦图片
2.1 网店页面的配色方案
2 色彩的联觉聚焦图片
主要以浅紫色为主，好像与 我想要购买的零食形象色彩 不搭调，这种图片应该不是 我需要的。不在关注图片中 的信息与内容，放弃点击
主要以橙黄色为主，与我想要 购买的零食形象相匹配，说不 定正是零食相关的图片，我要 继续了解一下。继续关注图片 信息，并可能执行点击操作
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
1
统一识别
2
节约资源
3
重复利用
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
可以确保网店在整体风格、售前售后服务和产品包 统一识别 装形象等方面都保持整体风格的一贯性，既有利于买家 识别和区分店铺，也可以避免买家在浏览时出现理解困
2.2 网店页面的配色误区
3 过分强调色彩的刺激度
选用黄色作为食品 2.3 网店的整体配色案例 店铺的店招背景，
可以刺激浏览者的 食欲，引导消费者 购买店铺中的产品
选用黄色的商品图，与导 航栏的颜色相呼应，给人 一种上下统一的视觉感受
选用灰色作为店铺的主色 调，可以更好地凸显产品 的诱人与美味
店铺首页视觉设计
2、黑色
1.黑色是全色相，即饱和度和亮度为0的无彩色。 一般不宜大面积使用，但又不可缺少。
2.黑色具有高贵、稳重、科技的意象；
店铺图片营销设计
3.2.2 首页色彩与营销的关系——配色与信息传达
3、灰色
灰色，作为中性色，具有柔和多变 的特点，是一个活性最强、最容易受 影响的色彩；
它可以和任何色彩搭配，也可以帮 助两种对立的色彩实现和谐过度。
店铺图片营销设计
3.2.1 首页色彩与营销的关系——颜色与营销
2、颜色与营销——主色、辅助色、点缀色
主色决定店铺风格
分析： 主色决定的是整个店铺的风格走向，其配色要比辅助色更 清楚、更强烈。
店铺图片营销设计
3.2.1 首页色彩与营销的关系——颜色与营销
2、颜色与营销——主色、辅助色、点缀色
辅助色使页面丰富多彩
店铺图片营销设计
3.3 首页布局
1、店铺定位
店铺布局，必须以店铺定位为中心，统一风格，突出店铺主题，公 共提醒，促销信息，风格体现等。
店铺图片营销设计
3.3 首页布局
2、用户的浏览模式
1、对于淘宝店铺来讲，客户的浏览轨迹，将有可能 是F，E，Z等形状；
2、店铺页头1-3屏左右的高度是顾客浏览的重点， 因此，在这个重要的区域，要合理利用好每一个模块。
分析： 1.辅助色在整体画面中起到平衡主色的冲击效果和减轻主色 对浏览者产生的视觉疲劳度的作用，还可以起到渲染的作用，帮 助主色建立完整的形象，使页面丰富多彩。 2.允许根据具体情况选用辅助色，注意保持与基本色的协调 关系；
店铺图片营销设计
3.2.1 首页色彩与营销的关系——颜色与营销
2、颜色与营销——主色、辅助色、点缀色
跨境电商视觉设计-PPT演示文稿
店招设计
速卖通系统板块的店招尺寸宽度为1200px，高度可以在100—150px之间，一般在设计店招的 时候应该尽量将店招区域充分的利用起来，将尺寸设计为1200px*150px。这样能够在尽可能大的空 间展示店铺信息，店招也会显得相对大气，从而提高卖家的认可和购物体验。
在进行店招图片设计的时候首先要认识到两个问题: 1.目前速卖通系统的店招板块，只可以加入一个超链接； 2.在不同的时间段，有不同的促销方式和不同的重点推荐产品，因此店招也要随之改变。
一是一个好的详情文案，能更好地体现产品卖点，打动 顾客的心；二是好的详情文案也能提高访问深度，甚至还能 起到引导购买、提高转化率的作用。
在这里提别提醒一下，有一些文案可以做成图片的形 式出现，但更多时候，还是建议卖家在上传详情的时候直 接使用文字就好，这样才能真正算作图文并茂，有利于提 高产品的搜索匹配度。
视觉设计认知-----视觉规范化的实施和应用
店招：
轮播海报：
视觉设计认知-----视觉规范化的实施和应用
第三方板块
板块名称 全屏店招 全屏轮播海报 轮播海报 自定义板块 侧边栏
主图 详情
建议尺寸（宽*高）（单位：像素） 1920*150 1920*n（建议不超过600） 1200*400 1200*n（在保证字符数够用的情况下，不限） 180*n（在保证字符数够用的情况下，不限） 750*750、800*800、960*960 750*
02
文案策划
文案策划
在视觉营销中，文案对图片起到一个相辅相成的作用。如我们经常所说的图文并茂，强调的也正是 这一点。无论从产品详情的角度还是从店铺设计角度来看，在一个成功的案例中文案都是必不可少的一 部分。
文案策划
店铺首页视觉设计方案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程序中，然后对素材文件进行整理。
电商视觉设计第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
样式
《电子商务视觉设计》教学大纲
《电子商务视觉设计》教学大纲一、课程说明1.课程代码：xxxxxxxxxx2.课程名称：视觉设计3.课程学时：72学时4.课程学分：3分5.适用专业：电子商务专业6.先修课程：PHOTODHOP二、课程性质、目的与任务1.性质：本课程是电子商务专业大一第二学习开设的专业基础课程，教学方式为课堂教学，结合教育见习实践，为该专业学生毕业后从事网店美工职业做好理论和技能的准备。
2.目的：通过本课程的学习，培养学生行业认知理解力和实践操作能力。
随着电子商务行业的兴起和飞速发展，以及企业竞争的不断加剧，网上店铺蓬勃发展的同时，简单枯燥的网店页面已经远远不能打动消费者，在这种趋势下电子商务企业的岗位用人需求也日渐细分化，“网店美工”这一类技术人才在电子商务快车上的作用凸显出来。
当我们深入了解那些脱颖而出的店铺时，会发现这些店铺不仅有着过硬的爆款商品，还有店家颇具视觉冲击力的装修设计和吸引消费者眼球的亮点，完成课程学习可以顺利解决这一问题。
3.任务：本课程理论结合实践，要求学生学期内完成八个章节的学习。
了解绪论、电商视觉设计体现、电商视觉影像传达等内容，掌握电商商品图片的处理、电商网店首页视觉设计、电商网店详情页视觉设计和推广图与促销活动页视觉设计等内容，理解手机移动端视觉设计等内容。
三、学时分配四、教学内容第1章绪论目标和要求：了解视觉设计的内容；掌握电商网店的视觉定位；了解视觉营销的内容。
能够掌握商品文案的策划；能够拍摄产品；能够处理图片。
重点和难点：电商网店视觉图像的色彩调整；电商网店的字体设计，电商网店视觉设计创意及构图。
第2章电商视觉设计体现目标和要求：了解电商网店视觉体现的内容；掌握电商网店视觉风格的概念；了解广告视觉传达的概念及意义。
能够掌握商品视觉体现的主要内容；能够根据商品确定电商网店的风格。
重点和难点：商品视觉体现；电商视觉营销策略。
第3章电商视觉影像传达目标和要求：了解拍摄常用的器材；掌握构图的含义与目的；了解开播前必不可少的准备工作。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
不同主题的背景图
PPT课件
23
4.3 首焦轮播区视觉设计 2 构建设计图三要素
色彩灰暗，画质朦胧， 画面层次不清晰，背景
色调不理想
色彩纯净，画面清晰， 画面层次感强，商品形
象更突出
处理前后的商品形象对比
PPT课件
24
4.3 首焦轮播区视觉设计 2 构建设计图三要素
如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出 文字的字体与字号、色彩的变化等是设计中最为关键的环节。
PPT课件
28
4.4 商品陈列区视觉设计 1 营造视觉动线
②水平浏览范围缩短。此时图片的布局没
有任何变化，消费者对于图片浏览的新鲜度 就会降低，开始失去浏览的耐心，于是对第
4
4.1 首页视觉水平的四大指标
2 首页点击率
首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点 击量÷首页展现量）。
两类店铺首页排版
PPT课件
5
4.1 首页视觉水平的四大指标
3 首页人均点击次数
首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
店招视觉设计规范
01
店铺名称的艺术化处理
02
图层样式的应用
03
PPT课件
8
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
PPT课件
9
4.2 店招视觉设计Fra bibliotekPPT课件
2
4.1 首页视觉水平的四大指标
1 首页跳失率 2 首页点击率 3 首页人均点击次数 4 首页平均停留时间
PPT课件
3
4.1 首页视觉水平的四大指标
1 首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问 次数占该入口总访问次数的比例。
进入店铺首页的渠道
PPT课件
1 店招视觉设计规范
店招元素设计
品牌宣传语
移动端二维码
PPT课件
10
4.2 店招视觉设计
1 店招视觉设计规范
店招和导航条风格统一
风格的统一及修饰元素的设 计，突出店铺的品牌形象
PPT课件
11
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感 2 添加特效突出特殊性和醒目度 3 使用修饰元素提升观赏性
学习目标
了解首页视觉水平的四大指标
掌握店招的设计规范及技巧
掌握首焦轮播区的设计技巧
了解商品陈列区的布局方式
掌握商品陈列区的布局技巧
PPT课件
1
目录
4.1 首页视觉水平的四大指标
4.2 店招视觉设计
4.3 首焦轮播区视觉设计
4.4 商品陈列区视觉设计
4.5 化妆品店铺首页视觉设计案例
2
溶图的应用范围
3
PPT课件
18
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在 一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。
首焦位置：由于该 位置所占面积较大， 所以成为最能吸引 消费者眼球的位置
PPT课件
19
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
PPT课件
16
4.2 店招视觉设计
3 图层样式的应用
当鼠标指针触碰到导航条中任意一个功能按钮时，该 按钮就会呈现出不同的效果，这就是添加图层样式的 效果，给人视觉上的错觉，让按钮上的文字更具层次
感，更易于展示当前操作的结果
PPT课件
17
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
PPT课件
12
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
将店铺名称的首个英文字母放大，并使用 不同于其他字体风格的手写体，让店铺名
称文字的版式更加醒目、更具艺术感
不同字体字号的组合
PPT课件
13
4.2 店招视觉设计
2 店铺名称的艺术化处理
2 添加特效突出特殊性和醒目度
文字元素的设计
PPT课件
25
4.3 首焦轮播区视觉设计 3 溶图的应用规范
溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节 处理得当。
溶图
PPT课件
26
4.4 商品陈列区视觉设计 1 营造视觉动线 2 商品布局艺术化
PPT课件
27
4.4 商品陈列区视觉设计 1 营造视觉动线
商品陈列图
下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。
首焦位置
PPT课件
20
4.3 首焦轮播区视觉设计 1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
有趣的图片展示，能 让消费者通过视觉获
得较为愉悦的体验
文案信息告知了消费者店铺中的优惠活动，
因为店铺的优惠活动信息对于大部分消费者
人均点击次数
PPT课件
6
4.1 首页视觉水平的四大指标
4 首页平均停留时间
首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数 （单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首 页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是 否能留住访客。
PPT课件
7
4.2 店招视觉设计
为了将店铺名称与导航条的颜色区 分开，使用了发光效果来修饰店铺 名称，营造出的层次感，也贴合了
店铺中销售的照明设备的特点
PPT课件
14
4.2 店招视觉设计
2 店铺名称的艺术化处理
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名称，文字 与图案在外形上的契合让店铺名称更具 个性和艺术感，更容易在消费者心中形
而言都是极具吸引力的。同时，简洁的文字
与图形装饰的结合让消费者能够轻松地获取
相关信息
PPT课件
21
4.3 首焦轮播区视觉设计 2 构建设计图三要素
背景
商品 首焦轮PP播T课区件设计三要素
广告 文字
22
4.3 首焦轮播区视觉设计 2 构建设计图三要素
以七夕节为 主题的背景
以“双11” 活动为主题
的背景
成特定的印象
为店铺名称添加修饰元素
PPT课件
15
4.2 店招视觉设计
3 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
能按钮区分开