淘宝店铺首页设计资料
合集下载
淘宝网开店、装修、运营、推广与管理 第5章
5.6 设计其他模块 5.7 设计商品详情页 5.8 装修移动端店铺
5.3.1 主图的尺寸要求
18
主图的标准尺寸为310×310像素的正方形图片。淘宝网中，800×800像素以上的图片可在 商品详情页中使用放大镜功能，该功能可以放大主图细节，方便消费者通过主图查看更详细、更 全面的商品细节。在淘宝PC端编辑主图时，一般可以上传4~6个不同角度的图片，也可以在主图
优惠券的使用时间
40
优惠券的最终解释权 优惠券的使用限制
5.6.2 优惠券模块
41
1、绘制形状
2、制作斯页殊效果
3、制作虚线效果
5.6.3 客服中心
42
1、设置工作时间
2、新建客服员工
5.6.3 客服中心
3、设置岗位
5、设置名称
43
4、修改权限
5.6.4 商品推荐
44
首页是展示店铺商品的主要途径，淘宝为商家提供了“宝贝推荐”模块以展示商品信息。
03 优惠券：优惠券设计简单，信息简洁，颜色与首页整体色调保持一致，
OPTION 通常多在文字、排版上下功夫，同时注意优惠信息的说明要清晰准确。 商品区：文字说明十分简洁，重点体现商品的美观、卖点等，同时可以
04 突出显示商品的价格、促销等信息。
OPTION
5.1.5 移动端店铺视觉设计
12
3. 移动端店铺详情页设计
7、设置页头
5.4.4 设置导航条
32
1、添加导航内容
2、调整导航显示顺序
33
内容导航
5.1 店铺视觉设计 5.2 电商文案的策划和写作 5.3 设置主图 5.4 设置店招和导航 5.5 制作全屏海报
5.6 设计其他模块 5.7 设计商品详情页 5.8 装修移动端店铺
淘宝电商店铺首页内容
首页具体内容分布
1、店铺的头图,包含品牌商标、店名、主推产品小图（链接到商品详情页）、“收
藏店铺”
2、通栏菜单，包括首页、所有商品页、会员页、产品系列页、品牌宣导页
3、首页：
a、近期活动宣导、优惠券领取
b、通栏轮播广告:活动大图、主推产品大图、新品大图
c、加入会员体系政策、会员生活展示
d、产品分类图
e、唯美广告片
f、产品单品/套装大图
g、客服信息，客服咨询时间，客服分工
4、会员页：
a、会员等级、权益
b、会员专属福利（专属优惠券、生日礼物、升级礼品、专属试用、会员日
政策）
c、会员详细说明
5、产品系列页：
a、产品系列讲述
b、产品系列商品展示
c、系列产品搭配购买优惠
6、品牌页
a、品牌理念
b、优质原料供应商
c、有机成分/证书/认证机构说明
d、生产环境展示/生产工艺展示/研发团队展示/物流仓储展示
e、品牌商品保障/无忧退货。
淘宝天猫店铺设计与装修一本通
6.1 首页分析与制作——服饰 类
6.1.1 页面 说明
6.1.3 布局 说明
6.1.2 页面 配色分析
6.1.4 制作 流程
06 店铺 首页设计 分析与制 作
6.2 首页分析与制作——饰品 箱包类
6.2.1 页面 说明
6.2.3 布局 说明
6.2.2 页面 配色分析
本书精彩案例展示
本书精彩案例展 示
01 淘宝天猫店铺 基础
01 淘宝天猫店铺基础
1.1 淘宝网 开店
1.2 淘宝店 铺的组成结
构
1.3 淘宝与 天猫店铺各
模块规格
01 淘宝 天猫店铺 基础
1.1 淘宝网开店
1.1.1 注册账号和 开户认证
A
1.1.2 商品类目确 定以及装修上线
信息
5.1.5 实 战：家纺 店招设计
5.1.6 店 招的装修
5.1 店招的设计与装修
5.2.1 什么是导航条
5.2.2 导航条的尺寸 规格
5.2.3 导航条设计的 两种类型
5.2.4 导航条设计分 析
5.2.5 实战：自定义 导航设计
05 店铺基础模块的设计与装修
5.2 导航条的设计与装修
5.2.6 导航条的装修
制作——食品类
类
类
B
D
F
07 店铺详情页设计分析与制 作
7.7 详情页分析与制作—— 数码办公类
07 店铺详情页设计分析与制作
7.1.1 包包详情 页
7.1.3 运动鞋详 情页
7.1.2 现代风服 饰详情页
7.1.4 商务男袜 详情页
7.1 详情页分析与制作——服 饰鞋包类
07 店铺详情页设计分析与制作
6.1.1 页面 说明
6.1.3 布局 说明
6.1.2 页面 配色分析
6.1.4 制作 流程
06 店铺 首页设计 分析与制 作
6.2 首页分析与制作——饰品 箱包类
6.2.1 页面 说明
6.2.3 布局 说明
6.2.2 页面 配色分析
本书精彩案例展示
本书精彩案例展 示
01 淘宝天猫店铺 基础
01 淘宝天猫店铺基础
1.1 淘宝网 开店
1.2 淘宝店 铺的组成结
构
1.3 淘宝与 天猫店铺各
模块规格
01 淘宝 天猫店铺 基础
1.1 淘宝网开店
1.1.1 注册账号和 开户认证
A
1.1.2 商品类目确 定以及装修上线
信息
5.1.5 实 战：家纺 店招设计
5.1.6 店 招的装修
5.1 店招的设计与装修
5.2.1 什么是导航条
5.2.2 导航条的尺寸 规格
5.2.3 导航条设计的 两种类型
5.2.4 导航条设计分 析
5.2.5 实战：自定义 导航设计
05 店铺基础模块的设计与装修
5.2 导航条的设计与装修
5.2.6 导航条的装修
制作——食品类
类
类
B
D
F
07 店铺详情页设计分析与制 作
7.7 详情页分析与制作—— 数码办公类
07 店铺详情页设计分析与制作
7.1.1 包包详情 页
7.1.3 运动鞋详 情页
7.1.2 现代风服 饰详情页
7.1.4 商务男袜 详情页
7.1 详情页分析与制作——服 饰鞋包类
07 店铺详情页设计分析与制作
《网店美工设计》教学课件
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
1 分辨率
分辨率有两种：屏幕分辨率和图像分辨率。
2 像素
图像由一个个点组成，这个点叫作像素。像素是图像中最小的单位。每个像素是一个小点，不同颜色 的点（像素）聚集起来就变成一幅动人的画面。
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
任务描述 任务技能
淘宝网成立于2003年5月10日，由阿里巴巴集团投资创办。淘宝网分为淘宝C店和淘宝商城2种 模式。淘宝C店是淘宝集市卖家所开设的店铺，这种店铺的门槛低，任何通过实名认证的人，只要 发布10件宝贝就可以免费在淘宝上开店。淘宝商城（天猫）是亚洲最大的购物网站淘宝网打造的在 线 B2C 购物平台，自2008年4月10日成立以来，吸引了 Kappa、JackJones、苏泊尔、联想、惠普等 在淘宝商城开设官方旗舰店，受到了消费者的热烈欢迎。
而淘宝网作为服装类电子商务行业的老大，是国内B2C及C2C 电子商务网站中发展最快、 最为成功的案例，以提供具有本土特色的电子商务平台服务为宗旨，并一直不断完善和发展。 其在中国的 C2C 市场中可谓是一家独大，市场份额更是超过了 90%，行业领先的地位暂时是 无人能撼动的。目前，服装服饰类产品已经成为网络零售的第一大商品，无论从数量还是交 易规模上都是如此。单是淘宝网上初具规模的卖家群体皇冠店铺就已达上万家之多，并且仍 保持着快速增长的态势。本次任务主要是实现淘宝女装店铺首页设计。
【功能描述】 ● 使用淘宝布局要素来设计女装店铺首页。 ● 头部包括店铺的logo、宣传标语、购物车、账户登录及客户中心的图标。 ● 主体包括各个分类版块下的图片链接。 ● 底部包括店铺的各项服务链接、搜索框及返回首页和顶部的按钮。
店铺首页视觉设计
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课件
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 首页视觉水平的四大指标
淘宝店铺首页设计资料ppt课件
40
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产 品：当海报 上要放置过 多的促销产 品，可以采 用这种版式。 产品平行排 版，中间利 用半透明的 框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图： 斜切式构图 会让画面显 得时尚，动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°， 文字往右上 方倾斜便于 阅读 。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同，形成差异化竞争
12
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
（一）海报设计思路：
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产 品：当海报 上要放置过 多的促销产 品，可以采 用这种版式。 产品平行排 版，中间利 用半透明的 框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图： 斜切式构图 会让画面显 得时尚，动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°， 文字往右上 方倾斜便于 阅读 。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同，形成差异化竞争
12
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
（一）海报设计思路：
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色
淘宝首页设计框架
淘宝首页设计框架唯实分享**于200X年X月X日举办一个全校性的综合型运动会，历时一周。
期间包括三个部分：开幕式文艺演出、运动会和闭幕式颁发奖项（两天）。
我们校学生会外联部是此类校园活动指定宣传策划单位，对商家赞助大学生活动的可行性，特别是赞助我校运动会活动的可行性有较深入的了解。
现在就让我们为贵公司作此赞助可行性报告。
一、行性分析1、本次运动会得到了学院团委和学校相关部门的大力支持，规模大、参与者多，能吸引更多师生及其家属来观看，深受同学欢迎,并推动学校体育事业的发展，必引起全校性的轰动。
2、在校大学生达XXXX余人，人流量大达到运动会每天入场观看人次为XXXX左右。
人口密集，而且本校的消费能力较高，为贵公司宣传的成效更明显。
3、本次活动得到师生关注，贵公司的产品也将得到大力的宣传。
二、宣传方式1、横幅:为期一周的大横幅宣传,在学校内悬挂横幅,(横幅内容为运动会的内容和公司的相关宣传--赞助商名称)活动前三天粘贴在运动场等人流量最多的位置。
悬挂时间是一天24小时不间断性。
2、我们将在运动会的宣传海报中点明贵公司为赞助单位。
（前期宣传）3、立式广告牌。
在运动会期间作为独立的宣传方式在学校内进行宣传。
（由贵公司提供）4、在运动会举行期间，向裁判员和保安志愿者分发有赞助商标志的帽子，加大宣传力度。
5校广播站为期七天做有关贵公司的广播宣传6运动会期间（一周）由贵公司在运动会赛区附近进行一定规模的产品销售活动7运动会前后在校学生会网页上宣传并且发放传单。
8宣传棋方阵。
在运动会期间在会场主干道，主席台等显眼位置放置彩旗进行宣传。
9气球方阵。
在运动会期间在一些重要位置利用氢气球悬挂宣传。
10调查问卷：活动结束后，帮贵公司进行一次校园市场调查（调查问卷由公司准备并提供）11、在运动会期间在校内设立咨询台三、宣传效应:希望本次活动的吸引性能帮贵公司的产品吸引更多的关注,互惠互利1.海报和宣传单会注明"本次活动由***公司赞助举办。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色
• 背景选择上不能单纯当海报设计，为了做出一张 比较漂亮的图片，最好要做到背景与产品的呼应
8. 上传图片至淘宝图片空间 9. DW添加图片超链接 10. 上传网页文件 11. 发布
四、淘宝店铺首页海报设计技法
这是1920PX*500PX的全屏海报 这是1920PX*600PX的全屏海报
四、淘宝店铺首页海报设计技法
这是950PX*400PX的普通海报
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
三、淘宝店铺店招设计技法
（二）店招设计原则：
– 要直观明确的告诉客户自己店铺是卖什么的， 表现形式最好是实物照片
– 要直观明确的告诉客户自己店铺的卖点（特点、 优势、差异化）。
三、淘宝店铺店招设计技法
（三）店招设计要点：
– 店铺名字
• 告诉客户自己是卖什么的，品牌店铺可以标榜自己 的品牌
– 实物照片
– 店铺产品总共有几大分类，页面从上至下的摆放顺序是什么样的， 每个分类模块里面放几个产品，产品是否需要主次区分，是用方 格矩阵还是更灵活的展示方式，单个产品是否需要突出展示价格 或折扣等等。
二、淘宝店铺首页设计思路
• 主推产品：
– 主推产品有哪些，它们有怎样的区别和定位，它们的推介顺序是 什么样的，它们的核心卖点是什么，是否需要突出价格和折扣等 等。
（一）海报设计思路：
4. 合理板式突出主题
• 产品图片展示与摄影图片展示不同。摄影作品突 出原生态，添加文字是为了更好的突出画面。设 计作品是画面烘托文案主题的，应将主题文案放 在首位重点突出
模块式编排
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
1. 店铺活动：促销活动
• 品牌团：
– 官方活动聚划算，可提高品牌的曝光度
• 在海报设计中，大体分为两种风格：
– 将拍摄的图直接用作背景，板式排列活动文案 – 将产品提取出来，背景根据产品灵活变动，再配合板式
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
3. 文案策划排版式
• 要明确自己的海报是给中国人看的，过度使用英 文是不合适的，可将英文作为中文的辅助元素
四、淘宝店铺（一）店招设计思路：
– 以品牌宣传为主的类型：一般有着雄厚的实力， 给力的产品，想要打造自己的品牌。
• 名称、LOGO、关注、收藏等
– 以活动促销为主的店铺：薄利多销，店招风格 视活动主题来定，营造出一个活动氛围。店招 上适当的加入一些红包或者优惠券领取的按钮。
– 以产品推广为主的店铺：增加店铺主推产品的 销量，通常在店招上放上两三款推广的产品。
• 店铺页头
– 页头店招放什么内容，页头导航总共需要几个导航分类内容，是 否需要放品牌文案，是否需要着重表现收藏店铺，是否需要放活 动内容等等。
二、淘宝店铺首页设计思路
• 活动促销：
– 活动主题什么，内容是什么，文案的主次顺序，是否有需要重点 展示的产品等等。
二、淘宝店铺首页设计思路
• 产品分类：
• 官方季节性活动：
– 双十一/双十二活动/年中大促
• 店铺常规活动：换季、节日
– 符合当下季节或者节日、特殊日子的相关题材
• 店铺常规活动：
– 周年店庆、清仓甩卖
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
2. 单品推广
• 单品聚划算、爆款
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 3元素：
• 背景 • 文案：名称、卖点、价格、其他 • 产品信息
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不 同，形成差异化竞争
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
4. 规范字体：
• 一般不超过3种字体 • 重点部分加粗突出 • 字体大小使用得体
5. PS排版：
• 越是简约大气的页面，元素务必不要太多，清爽 舒适的页面多留白
6. 修改定稿：
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
7. 图片切割优化：
• Photoshop切片 • Dreamweaver热区切割优化
淘宝店铺首页设计
讲师：寇老师
认 识 淘 宝 店 铺 首 页
一、淘宝店铺首页构成元素
• 店铺页头（页头区） ：
– 店招、导航
• 活动促销（内容区） ：
– 全屏海报、全屏轮播、优惠券
• 店铺产品（内容区） ：
– 产品分类、主推产品
• 店铺页尾（页尾区） ：
– 客服中心、购物保障、发货须知等
二、淘宝店铺首页设计思路
二、淘宝店铺首页设计思路
• 店铺页尾：
– 页尾模块一定要符合店铺风格和主题，色彩要一致；内容上可添 加消保、7天无理由退换货等保障服务、客服联系方式、商品购物 流程等。
三、淘宝店铺店招设计技法
天猫店招990PX*120PX（不含导航） 天猫店招990PX*150PX（含导航） 淘宝店招950PX*150PX（含导航）
– 3段文字：主标题、副标题、附加内容 – 3种字体：不能超过3种字体
• 主标题可用粗大字体，副标题略小
– 3三种颜色：
• 70%主色，25%辅助色， 5%点缀色
– 30%以上留白：高端、大气、上档次多留白 – 0.3秒读完：
• 左边或者中间放LOGO，LOGO之下放品牌词或广告词 • 中间留空或放品牌的相关文字，或放其它 • 右边放收藏店铺等相关内容 • 之下是导航：首页，所有宝贝等
3. 配色方案：
• LOGO提取颜色 • 产品本身提取颜色 • 产品联想属性提取颜色 • 颜色不超过3种
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色
• 背景选择上不能单纯当海报设计，为了做出一张 比较漂亮的图片，最好要做到背景与产品的呼应
8. 上传图片至淘宝图片空间 9. DW添加图片超链接 10. 上传网页文件 11. 发布
四、淘宝店铺首页海报设计技法
这是1920PX*500PX的全屏海报 这是1920PX*600PX的全屏海报
四、淘宝店铺首页海报设计技法
这是950PX*400PX的普通海报
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
三、淘宝店铺店招设计技法
（二）店招设计原则：
– 要直观明确的告诉客户自己店铺是卖什么的， 表现形式最好是实物照片
– 要直观明确的告诉客户自己店铺的卖点（特点、 优势、差异化）。
三、淘宝店铺店招设计技法
（三）店招设计要点：
– 店铺名字
• 告诉客户自己是卖什么的，品牌店铺可以标榜自己 的品牌
– 实物照片
– 店铺产品总共有几大分类，页面从上至下的摆放顺序是什么样的， 每个分类模块里面放几个产品，产品是否需要主次区分，是用方 格矩阵还是更灵活的展示方式，单个产品是否需要突出展示价格 或折扣等等。
二、淘宝店铺首页设计思路
• 主推产品：
– 主推产品有哪些，它们有怎样的区别和定位，它们的推介顺序是 什么样的，它们的核心卖点是什么，是否需要突出价格和折扣等 等。
（一）海报设计思路：
4. 合理板式突出主题
• 产品图片展示与摄影图片展示不同。摄影作品突 出原生态，添加文字是为了更好的突出画面。设 计作品是画面烘托文案主题的，应将主题文案放 在首位重点突出
模块式编排
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
1. 店铺活动：促销活动
• 品牌团：
– 官方活动聚划算，可提高品牌的曝光度
• 在海报设计中，大体分为两种风格：
– 将拍摄的图直接用作背景，板式排列活动文案 – 将产品提取出来，背景根据产品灵活变动，再配合板式
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
3. 文案策划排版式
• 要明确自己的海报是给中国人看的，过度使用英 文是不合适的，可将英文作为中文的辅助元素
四、淘宝店铺（一）店招设计思路：
– 以品牌宣传为主的类型：一般有着雄厚的实力， 给力的产品，想要打造自己的品牌。
• 名称、LOGO、关注、收藏等
– 以活动促销为主的店铺：薄利多销，店招风格 视活动主题来定，营造出一个活动氛围。店招 上适当的加入一些红包或者优惠券领取的按钮。
– 以产品推广为主的店铺：增加店铺主推产品的 销量，通常在店招上放上两三款推广的产品。
• 店铺页头
– 页头店招放什么内容，页头导航总共需要几个导航分类内容，是 否需要放品牌文案，是否需要着重表现收藏店铺，是否需要放活 动内容等等。
二、淘宝店铺首页设计思路
• 活动促销：
– 活动主题什么，内容是什么，文案的主次顺序，是否有需要重点 展示的产品等等。
二、淘宝店铺首页设计思路
• 产品分类：
• 官方季节性活动：
– 双十一/双十二活动/年中大促
• 店铺常规活动：换季、节日
– 符合当下季节或者节日、特殊日子的相关题材
• 店铺常规活动：
– 周年店庆、清仓甩卖
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
2. 单品推广
• 单品聚划算、爆款
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 3元素：
• 背景 • 文案：名称、卖点、价格、其他 • 产品信息
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不 同，形成差异化竞争
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
4. 规范字体：
• 一般不超过3种字体 • 重点部分加粗突出 • 字体大小使用得体
5. PS排版：
• 越是简约大气的页面，元素务必不要太多，清爽 舒适的页面多留白
6. 修改定稿：
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
7. 图片切割优化：
• Photoshop切片 • Dreamweaver热区切割优化
淘宝店铺首页设计
讲师：寇老师
认 识 淘 宝 店 铺 首 页
一、淘宝店铺首页构成元素
• 店铺页头（页头区） ：
– 店招、导航
• 活动促销（内容区） ：
– 全屏海报、全屏轮播、优惠券
• 店铺产品（内容区） ：
– 产品分类、主推产品
• 店铺页尾（页尾区） ：
– 客服中心、购物保障、发货须知等
二、淘宝店铺首页设计思路
二、淘宝店铺首页设计思路
• 店铺页尾：
– 页尾模块一定要符合店铺风格和主题，色彩要一致；内容上可添 加消保、7天无理由退换货等保障服务、客服联系方式、商品购物 流程等。
三、淘宝店铺店招设计技法
天猫店招990PX*120PX（不含导航） 天猫店招990PX*150PX（含导航） 淘宝店招950PX*150PX（含导航）
– 3段文字：主标题、副标题、附加内容 – 3种字体：不能超过3种字体
• 主标题可用粗大字体，副标题略小
– 3三种颜色：
• 70%主色，25%辅助色， 5%点缀色
– 30%以上留白：高端、大气、上档次多留白 – 0.3秒读完：
• 左边或者中间放LOGO，LOGO之下放品牌词或广告词 • 中间留空或放品牌的相关文字，或放其它 • 右边放收藏店铺等相关内容 • 之下是导航：首页，所有宝贝等
3. 配色方案：
• LOGO提取颜色 • 产品本身提取颜色 • 产品联想属性提取颜色 • 颜色不超过3种
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：