电商视觉设计 第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章电商视觉影像传达目标和要求：了解拍摄常用的器材；掌握构图的含义与目的；了解开播前必不可少的准备工作。
《UI视觉设计案例教程》PPT课件(共6章)第4章 网页界面设计
[#333333]
图 4-77 利用字号和颜色区分主次
[#808080]
当处理多行文字时，可通过控制行高和字体样式来突出关键内容，增加用 户浏览的舒适度，如图4-78所示。
间距40
图 4-78 多行文字的处理方式
学习目标reviewofworkcontent了解网页界面的组成了解常见的网页界面布局及版块规划技巧了解网页界面设计的要点了解网页界面设计的尺寸规范了解网页界面设计中常用的字体和字号掌握网页界面的一般制作方法42界面设计规范43案例实战41基础知识第4章网页界面设计41基础知识411网页界面的组成网页界面一般由页首主体内容和页脚三部分组成如图所示下面分别介绍
本章实训——设计电子商城网站页面
设计 1.分析基本结构图。2.确定配色。选择象征简洁、科技、高端的黑色、白色 思路 和灰色作为页面主要颜色。3.页面布局。首页可采用卡片式布局，将商品内
容安排在一张张卡片上，从而使页面效果看起来整齐大方，便于浏览。
案例提示
难点在于如何清晰工整地排列多行文案。当多行文字重要程度不同时，可通 过颜色、字号进行区分，如商品标题、价格和详细介绍，可将标题字号设置得大 一些，将价格以醒目的颜色突出显示，而详细介绍则用一般字体和颜色，这样浏 览者将优先看到标题和价格，最后看到介绍的内容，如图4-77所示。
1.延伸
2.曲线
3．过渡
4．隐藏 5．层叠
6．错位
1．延伸
当两个版块的内容有所关联时，将较小的版块延伸到较大的版块上，使两个版 块重叠一部分，则可以很好地打破两个版块之间的分界线。
版块的对齐与延伸
2．曲线 通过改变分割线的形状（如将直线改为曲线、折线等）能有效地解决界面呆板
问题。 注:虽然两个版块在效果上呈现出曲线过渡，但实际上版块的形状依然是矩形，
电子商务视觉设计-店铺首页视觉设计
第4章店铺首页视觉设计店铺首页在电商店铺所起到地作用就好像实体店地店面,作为品牌地门脸,它地主要作用是向消费者做展示,通过视觉,氛围,商品与服务地综合感受让消费者对品牌有初步地了解与接触。
首页设计得是否有新意直接关系到商品信息地转化率,因此在进行店铺首页视觉设计时要尽可能地让设计能够聚集消费者地注意力,提高商品信息地转化率,这才是首页视觉设计要达到地重要目地。
首页视觉水平地四大指标4.1目录CONTENTS店招视觉设计4.2首焦轮播区视觉设计4.3商品陈列区视觉设计4.4茶叶店铺首页视觉设计案例4.5首页视觉水平地四大指标4.1判断一个店铺首页设计是否合格要从四大指标来评判:首页跳失率,首页点击率,首页均点击次数与首页平均停留时间。
首页跳失率首页跳失率是指消费者通过某种渠道进入店铺,只访问了一个首页就离开地访问次数占该入口总访问次数地比例。
针对不同地店铺规模与所售商品地类型,可以参照地判断标准是:如果是心级店铺,那么跳失率在 70% 及以下都属于正常,不需要进行优化。
如果是钻级店铺,那么跳失率在 60% 以上就需要考虑是否是海报设计与商品信息地问题了,需要根据具体地数据做出相应地优化与调整。
首页点击率首页点击率是商品在首页展现后地被点击比率,即首页点击率 = 首页点击量 ÷ 首页展现量。
店铺地首页大致可以分为两类:店铺首页罗列出各种光彩夺目地商品,希望有一款商品能够吸引消费者。
店铺首页没有单品展示,以全屏商品海报形式引导为主。
两类店铺首页排版4.1.3首页均点击次数首页均点击次数首页均点击次数是指在一段时间内均点击了多少次。
均点击次数4.1.4首页平均停留时间首页平均停留时间首页平均停留时间为访问店铺首页地所有访客总地停留时长除以访客数（单位:秒）,多天地平均停留时间为各天均停留时长地日均值。
行业性质不同,每个访客在不同行业店铺停留地时间差异很大。
在进行分析时,可以以一段时间内访客在店铺首页地平均停留时间作为基数,并记录下这段时间地销售量,以后再拿新数据进行对比就知道平均停留时间内销量是提高了还是下降了。
电商视觉营销设计模板ppt课件
1.1经典形式美法则
u1.1.1对称与均衡 u1.1.2重复与节奏 u1.1.3对比与统一 u课堂作业
5
1平面设计基础
1.2常用色彩配色设计法则及进阶学习
u1.2.1色彩搭配法则 u1.2.2色彩传达 u1.2.3色彩搭配自学进阶 u课堂作业
6
1平面设计基础
1.3字体的构成法则与编排
u1 . 3 . 1 字 体 在 版 面 中 的 构 成 法 则 u1 . 3 . 2 段 落 文 字 的 编 排 法 则 u1 . 3 . 3 追 求 最 优 视 觉 效 果 的 字 体 组 合 法 则 u课 堂 作 业 1 u课 堂 作 业 2 u课 堂 作 业 3
23
0
3
第3篇综合项目实战
24
6商品拍摄实战—— 以电热水壶为例
6.1商品拍摄的基本流程 6.2拍摄流程详解
课堂作业
25
7商品图片精修实战— — 以加湿器为例
7.1图片精修的基本思路 7.2精修流程详解
课堂作业
26
8促销广告设计实战— — 以小家电为例
8.1促销广告设计的基本流程 8.2制作过程详解
9
2常用模块视觉营销设计
2.2店招视觉营销设计
u2 . 2 . 1 与 店 铺 整 体 的 色 彩 和 风 格 统 一 u2 . 2 . 2 简 洁 大 气 ， 以 少 胜 多 u2 . 2 . 3 合 理 且 丰 富 的 营 销 手 段 u课堂作业
10
2常用模块视觉营销设计
2 . 3banner视觉营销设计
21
5图片处理
5.2图片色彩优化
u5.2.1修复图片颜色 u5 . 2 . 2photoshop中的色彩优化命令 u课堂作业 u5 . 2 . 2Photoshop中的色彩优化命令 u课堂作业
u1.1.1对称与均衡 u1.1.2重复与节奏 u1.1.3对比与统一 u课堂作业
5
1平面设计基础
1.2常用色彩配色设计法则及进阶学习
u1.2.1色彩搭配法则 u1.2.2色彩传达 u1.2.3色彩搭配自学进阶 u课堂作业
6
1平面设计基础
1.3字体的构成法则与编排
u1 . 3 . 1 字 体 在 版 面 中 的 构 成 法 则 u1 . 3 . 2 段 落 文 字 的 编 排 法 则 u1 . 3 . 3 追 求 最 优 视 觉 效 果 的 字 体 组 合 法 则 u课 堂 作 业 1 u课 堂 作 业 2 u课 堂 作 业 3
23
0
3
第3篇综合项目实战
24
6商品拍摄实战—— 以电热水壶为例
6.1商品拍摄的基本流程 6.2拍摄流程详解
课堂作业
25
7商品图片精修实战— — 以加湿器为例
7.1图片精修的基本思路 7.2精修流程详解
课堂作业
26
8促销广告设计实战— — 以小家电为例
8.1促销广告设计的基本流程 8.2制作过程详解
9
2常用模块视觉营销设计
2.2店招视觉营销设计
u2 . 2 . 1 与 店 铺 整 体 的 色 彩 和 风 格 统 一 u2 . 2 . 2 简 洁 大 气 ， 以 少 胜 多 u2 . 2 . 3 合 理 且 丰 富 的 营 销 手 段 u课堂作业
10
2常用模块视觉营销设计
2 . 3banner视觉营销设计
21
5图片处理
5.2图片色彩优化
u5.2.1修复图片颜色 u5 . 2 . 2photoshop中的色彩优化命令 u课堂作业 u5 . 2 . 2Photoshop中的色彩优化命令 u课堂作业
网店美工与视觉设计 教学ppt4
252调整商品图片的尺寸在电商平台上传商品图片通常平台都会对图片的尺寸有所要求因此需要对商品图片的大小迚行修改本章小结要成为一名合格的网店美工首先要有扎实的photoshop软件应用基础photoshop具有强大的图片处理功能本章介绍了photoshop软件在网店美工岗位中的常用功能和技巧
电商美工课程
2.1.3应用PS的辅助工具
为了使图像的制作更加精细，可以使用photoshp中的辅助工具来帮助设计制作，辅助工 具主要包括标尺、参考线和网格。
2.1.4图像文件的基本操作
启动Photoshop 软件后，新建、打开、保存和关闭图像文件都是最基本的操作，掌握这 些基本操作是设计和制作图像文件的必要技能。
2.5.2 调整商品图片的尺寸
在电商平台上传商品图片，通常平台都会对图片的尺寸有所要求，因此需要对商品图片 的大小进行修改
本章小结
要成为一名合格的网店美工，首先要有扎实的photoshop软件应用基础， Photoshop具 有强大的图片处理功能，本章介绍了Photoshop软件在网店美工岗位中的常用功能和技巧。 主要包括图像文件的基本操作，商品图片颜色调整与校正，商品图片的扣取、美化与修饰，商 品图片的裁切与倾斜校正等。
Photoshop CC的界面在色彩应用上取代之前的灰色，当前的界面风格类似苹果摄影软件 的界面风格，Photoshop CC的基础工作界面，包括了菜单栏、选项栏、工具箱、图像编辑 区域、控制面板等模块。
2.1.2调整PS的界面视图
为了更好地处理图像，photoshop CC提供了多种视图显示模式和图像查看工具，主要包 括切换商品图像显示模式、调整商品图像显示比例、移动商品图像显示画面。
修补工具是使用图片中某些特定的区域来替换需要修补的区域，它会将源区域和目标区 域的纹理、明暗等相匹配，修补工具是使用最频繁的修复工具之一。
电商美工课程
2.1.3应用PS的辅助工具
为了使图像的制作更加精细，可以使用photoshp中的辅助工具来帮助设计制作，辅助工 具主要包括标尺、参考线和网格。
2.1.4图像文件的基本操作
启动Photoshop 软件后，新建、打开、保存和关闭图像文件都是最基本的操作，掌握这 些基本操作是设计和制作图像文件的必要技能。
2.5.2 调整商品图片的尺寸
在电商平台上传商品图片，通常平台都会对图片的尺寸有所要求，因此需要对商品图片 的大小进行修改
本章小结
要成为一名合格的网店美工，首先要有扎实的photoshop软件应用基础， Photoshop具 有强大的图片处理功能，本章介绍了Photoshop软件在网店美工岗位中的常用功能和技巧。 主要包括图像文件的基本操作，商品图片颜色调整与校正，商品图片的扣取、美化与修饰，商 品图片的裁切与倾斜校正等。
Photoshop CC的界面在色彩应用上取代之前的灰色，当前的界面风格类似苹果摄影软件 的界面风格，Photoshop CC的基础工作界面，包括了菜单栏、选项栏、工具箱、图像编辑 区域、控制面板等模块。
2.1.2调整PS的界面视图
为了更好地处理图像，photoshop CC提供了多种视图显示模式和图像查看工具，主要包 括切换商品图像显示模式、调整商品图像显示比例、移动商品图像显示画面。
修补工具是使用图片中某些特定的区域来替换需要修补的区域，它会将源区域和目标区 域的纹理、明暗等相匹配，修补工具是使用最频繁的修复工具之一。
第4章 电商视觉设计(46)
项目二 坚果商品详情页视觉设计
39
项目目的
本例是根据提供的素材文件（配 套资源:\素材文件\第4章\详情页 设计辅助素材），为其中一款商 品制作移动端详情页。要求按照 详情页的逻辑结构来进行布局， 然后进行每个区域的视觉设计。
项目二 坚果商品详情页视觉设计
40
项目分析
商品详情页是商品展示的重中之重， 在设计时设计人员要注意，详情页的内 容不仅要告诉消费者本商品该如何使用， 而且要说明该商品在什么情况下使用会 产生怎样的效果。详情页是提高转化率 的关键性因素，好的商品详情页不但能 激发消费者的消费欲望、树立消费者对 店铺的信任感，还能打消消费者的消费 疑虑，促使其下单。
拍摄商品图片
在日常工作中，设计人员常常会遭遇这样的尴尬情况：拿到一堆商品的图片，却发现没几张可 用。之所以会造成这种情况，是因为在拍摄商品图片时缺乏目的性和拍摄脚本，这对商品图片 的最终拍摄效果有很大的影响。
4.2.2 网店页面的视觉定位
8
1. 品牌型网店视觉定位
品牌型网店需要突出品牌优势，特别是 与同类型品牌相比要更有竞争力，达到从竞 争力中区分网店的目的。品牌型网店商品的 价格较高，在营销过程中要着重表现出商品 优势，弱化价格的敏感度。品牌型网店在视 觉营销过程中具有以下两点规律。 给消费者留下品牌强、商品优质、服务
4.1 电商视觉设计的原则 4.2 网店页面视觉设计 4.3 网店首页视觉设计 4.4 商品详情页视觉设计
4.2.1 网店页面的素材准备
7
准备辅助设计素材
辅助设计素材可以提升页面的美观度，使消费者产生阅读愉悦感，从而引发消费者的购买欲望。 辅助素材主要是指一些图形、装饰元素、字体等，这些素材能起到增加页面设计美感、提升商 品展示效果的作用。
相关主题
- 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 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
能按钮区分开