淘宝网店首页的视觉文案设计ppt课件
合集下载
店铺首页视觉设计方案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 首页视觉水平的四大指标
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学课件—第6章制作PC端网店首页
22
构图：构图的好坏直接影响海报的效果，构图主要分为左右构图、左中右三分式构图、上 下构图、底面构图和斜切构图6种。
左右构图
6.3.2 全屏海报的设计要点
23
配色：海报需要统一色调。在配色时，重要的文字信息用突出、醒目的颜色进行强调，通 过明暗对比以及不同颜色的搭配来确定对应的风格。海报的背景颜色应该统一，不要使用 太多的颜色，以免页面杂乱。
6.3.1 全屏海报的组成要点
20
全屏海报一般是由文案、商品图片、模特或背景中的至少两种元素组成的，下面分 别分别介绍。
文案：文案主要用来表现海报
主题，其组成部分包括标题、
01
副标题、促销信息等。
商品图片：可以让文案描述更
02
加具象化。
模特：模特是辅助商品展示的
03
元素。
背景：背景主要起烘托主题的
3 创建组 5 输入“农家果园”文字 6 输入其他文字
4 添加 Logo
6.2.5 制作通栏店招
17
7 输入其他文字 8 拖入水果素材 9 输入商品促销文字 10 绘制圆角矩形 11 绘制导航条
6.2.5 制作通栏店招
12 设置导航条文字
13 绘制矩形框 15 完成后的效果
18
14 设置色阶值
ห้องสมุดไป่ตู้
6.1 认识PC端网店首页 6.2 网店店招与导航条的制作 6.3 全屏海报的制作 6.4 优惠券的制作 6.5 商品分类的制作 6.6 其他板块的制作 6.7 课堂实训——制作女包PC端网首页
6.2.1 店招的制作要点
7
就淘宝网而言，按尺寸大小可以将店招分为常规店招和通栏店招两类。常规店招 为950×120像素，而通栏店招尺寸多为1920×150像素。一般来说，店招主要包括品 牌形象展示店招和商品导购店招两种。
手机淘宝页面设计介绍课件
05
广告区域：展示各种广告信息
06
页面背景：采用简洁、清晰的背景，提高用户体验
色彩搭配
主色调：手机淘宝的主色调为橙色，代表活 力、热情和温暖
辅助色：辅助色包括蓝色、绿色、紫色等， 用于强调和区分不同功能区域
对比色：使用对比色可以突出重点信息，如 红色、黄色等
渐变色：渐变色可以增加页面的层次感和 立体感，如从浅到深的渐变效果
搜索页面设计：快速准确找到 ห้องสมุดไป่ตู้需商品，提高用户体验
市场竞争力：优秀的页面设计可以提高手机淘宝 在市场竞争中的优势，吸引更多用户和商家。
手机淘宝页面设计的原则
简洁明了：页面设计应简 洁明了，让用户能够快速 找到所需信息。
易于操作：页面设计应易 于操作，让用户能够轻松 完成购物流程。
视觉吸引力：页面设计应 具有视觉吸引力，吸引用 户关注并激发购买欲望。
6
设计页面风格：设计手机淘宝页面的整体风 格，包括色彩、字体、背景等
7
测试与优化：对手机淘宝页面进行测试和优 化，确保页面的可用性和易用性
8
发布与维护：发布手机淘宝页面，并根据用 户反馈进行维护和更新
设计实践技巧
01
简化页面：减少不必要的元素，突出重点信息
02
色彩搭配：选择合适的色彩搭配，提高页面视觉效果
03
布局合理：合理安排页面元素，提高页面可读性
04
响应式设计：考虑不同设备的屏幕尺寸，实现页面自适应
设计实践成果展示
首页设计：简洁明了，突出重 点
分类页面设计：清晰明了，易 于查找
商品详情页设计：详细展示商 品信息，提高购买欲望
购物车页面设计：方便用户管 理购买商品，提高购买效率
淘宝网店视觉营销(PPT41页).pptx
一套自己的色板
网店CI VI-视觉规范
• 很多时候做着~~就乱了，（风格） • 长久不变的风格会不会老化—了解所传播出去的色系，字体风格等形象一致，传递
过程中，是同一种视觉符号，在不断的重复，每次重复都会加深记忆 • Nbj 羊羊羊
4 产品描述设计
Print Page
• 金字塔原理+ 案例
1，形象冲击 2，不同色系多角度pic 3.材料 4，原料工艺 5.所有细节卖点 6，配件 7，包装 8，销售氛围 9，信任度确认 10，顾虑排除（购买？）
• 盗梦空间—晚上梦里植入 • 设计师-白天-图片视觉-植入
5 促销广告设计
一、促销型设计的标准
• 单次点击成本CPC
• 41w点击 cpc0.24 • 以2%转化率，每单50利，去10w支出 • 盈利31万
• 3.3w点击 cpc3.03 • 以2%转化率，每单50利，去10w支出 • 亏损6.7w
色彩原理
色彩原理
色相 明度 饱和度
色彩心里
冷暖 远近 强弱
色彩调子
对比 调和 面积
一套自己的色板
网店CI VI-视觉规范
• 很多时候做着~~就乱了，（风格） • 长久不变的风格会不会老化—了解所传播出去的色系，字体风格等形象一致，传递
过程中，是同一种视觉符号，在不断的重复，每次重复都会加深记忆 • Nbj 羊羊羊
• 插图2-3pic
俏+杂志+分期 +天使之城+生活期待值 产品非原创-你很期待那种生活体验！感觉
蜂蜜+设计good=水墨风格；风格问题，美观。忽略产品本质-墨汁引发构想-网络图片 视觉传递解读，图片的寓意-植入，
Print Page
淘宝网店视觉营销PPT课件
20
4 产品描述设计
21
Print Page
• 金字塔原理+ 案例
1，形象冲击 2，不同色系多角度pic 3.材料 4，原料工艺 5.所有细节卖点 6，配件 7，包装 8，销售氛围 9，信任度确认 10，顾虑排除（购买？）
22
• 金字塔原理+ 案例
信誉 搭配 做工品质 款式风格 客户心里金字塔
.明确目标
--面向白领的产品，字体+色 彩庄重贵气
人群追求的特点。 --面向女生，字体色彩显活泼 可爱。
. 目标人群审美特征
--投射效应，让消费者把自己 想象成画面上当模特，融入 画面里面，家装产品一样
.风格识别
--固定的ci形象！产品融合
目标不同表现手法不一样
31
二、促销型设计的方法—3.形式美观
28
二、促销型设计的方法—1.主题突出
1.第一主题
--促销过程中就像一次陈述， 我们必须有一个明确的主 题，所有的元素都必须围绕 这个主题展开。 --促销主题一般是价格，折扣 和其他促销内容本身，所以 这个信息应该是放在视觉焦 焦点上的，被突出和放大元 素。
不一定要有创意-视觉聚焦在哪里-第一主题（第一时间 传递）
要有对话感，对话的逻辑展开
• 氛围感 产品介绍中的销售氛围营造和实体店一样重要，形成年很多人购买的气氛，让买家
因从众心理而决定购买
24
• 案例（ak 俏 小怡）
• 详情页：广告控制1屏内 • 搭配植入产品中（适当氛围，时机，配合植入）
• 盗梦空间—晚上梦里植入 • 设计师-白天-图片视觉-植入
25
二、促销型设计的方法—3.形式美观
. 形式美观-字体
--字体和语音的比喻 --字体大小粗细相当于音强 --字体越大音越大 --字体就是人的语言，字体合 不合适，读一遍
4 产品描述设计
21
Print Page
• 金字塔原理+ 案例
1，形象冲击 2，不同色系多角度pic 3.材料 4，原料工艺 5.所有细节卖点 6，配件 7，包装 8，销售氛围 9，信任度确认 10，顾虑排除（购买？）
22
• 金字塔原理+ 案例
信誉 搭配 做工品质 款式风格 客户心里金字塔
.明确目标
--面向白领的产品，字体+色 彩庄重贵气
人群追求的特点。 --面向女生，字体色彩显活泼 可爱。
. 目标人群审美特征
--投射效应，让消费者把自己 想象成画面上当模特，融入 画面里面，家装产品一样
.风格识别
--固定的ci形象！产品融合
目标不同表现手法不一样
31
二、促销型设计的方法—3.形式美观
28
二、促销型设计的方法—1.主题突出
1.第一主题
--促销过程中就像一次陈述， 我们必须有一个明确的主 题，所有的元素都必须围绕 这个主题展开。 --促销主题一般是价格，折扣 和其他促销内容本身，所以 这个信息应该是放在视觉焦 焦点上的，被突出和放大元 素。
不一定要有创意-视觉聚焦在哪里-第一主题（第一时间 传递）
要有对话感，对话的逻辑展开
• 氛围感 产品介绍中的销售氛围营造和实体店一样重要，形成年很多人购买的气氛，让买家
因从众心理而决定购买
24
• 案例（ak 俏 小怡）
• 详情页：广告控制1屏内 • 搭配植入产品中（适当氛围，时机，配合植入）
• 盗梦空间—晚上梦里植入 • 设计师-白天-图片视觉-植入
25
二、促销型设计的方法—3.形式美观
. 形式美观-字体
--字体和语音的比喻 --字体大小粗细相当于音强 --字体越大音越大 --字体就是人的语言，字体合 不合适，读一遍
淘宝网店视觉营销(PPT41页)
• 金字塔原理+ 案例
信誉 搭配 做工品质 款式风格 客户心里金字塔
视觉漏斗模型 组图
细节材质图
搭配方案
好评 热卖
• 针对目标定义的详细 产品描述 达到5感
•
真实感 真实再现产品原貌 不同角度 更多细节
•
逻辑感 根据买家的需求部署和展开卖点陈述，达到层层打击，达成购买
•
亲切感 针对目标消费者的特性进行文案，图像的风格设定，亲切，贴近。
策划
沟通
设计
网店定位 产品策略 受众分析 竞品分析 时段分析
产品体验 策略沟通 素材准备 草案讨论 确定创意 参考目标
形成文案 定义主题 分解层次 构图、色调 排版、字体 细节、气氛
Print Page
• Print topics here
Over!
9、静夜四无邻，荒居旧业贫。。21.2.1021.2.10Wednesday, February 10, 2021 10、雨中黄叶树，灯下白头人。。09:42:5609:42:5609:422/10/2021 9:42:56 AM 11、以我独沈久，愧君相见频。。21.2.1009:42:5609:42Feb-2110-Feb-21 12、故人江海别，几度隔山川。。09:42:5609:42:5609:42Wednesday, February 10, 2021 13、乍见翻疑梦，相悲各问年。。21.2.1021.2.1009:42:5609:42:56February 10, 2021 14、他乡生白发，旧国见青山。。2021年2月10日星期三上午9时42分56秒09:42:5621.2.10 15、比不了得就不比，得不到的就不要。。。2021年2月上午9时42分21.2.1009:42February 10, 2021 16、行动出成果，工作出财富。。2021年2月10日星期三9时42分56秒09:42:5610 February 2021 17、做前，能够环视四周；做时，你只能或者最好沿着以脚为起点的射线向前。。上午9时42分56秒上午9时42分09:42:5621.2.10 9、没有失败，只有暂时停止成功！。21.2.1021.2.10Wednesday, February 10, 2021 10、很多事情努力了未必有结果，但是不努力却什么改变也没有。。09:42:5609:42:5609:422/10/2021 9:42:56 AM 11、成功就是日复一日那一点点小小努力的积累。。21.2.1009:42:5609:42Feb-2110-Feb-21 12、世间成事，不求其绝对圆满，留一份不足，可得无限完美。。09:42:5609:42:5609:42Wednesday, February 10, 2021 13、不知香积寺，数里入云峰。。21.2.1021.2.1009:42:5609:42:56February 10, 2021 14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。2021年2月10日星期三上午9时42分56秒09:42:5621.2.10 15、楚塞三湘接，荆门九派通。。。2021年2月上午9时42分21.2.1009:42February 10, 2021 16、少年十五二十时，步行夺得胡马骑。。2021年2月10日星期三9时42分56秒09:42:5610 February 2021 17、空山新雨后，天气晚来秋。。上午9时42分56秒上午9时42分09:42:5621.2.10 9、杨柳散和风，青山澹吾虑。。21.2.1021.2.10Wednesday, February 10, 2021 10、阅读一切好书如同和过去最杰出的人谈话。09:42:5609:42:5609:422/10/2021 9:42:56 AM 11、越是没有本领的就越加自命不凡。21.2.1009:42:5609:42Feb-2110-Feb-21 12、越是无能的人，越喜欢挑剔别人的错儿。09:42:5609:42:5609:42Wednesday, February 10, 2021 13、知人者智，自知者明。胜人者有力，自胜者强。21.2.1021.2.1009:42:5609:42:56February 10, 2021 14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。2021年2月10日星期三上午9时42分56秒09:42:5621.2.10 15、最具挑战性的挑战莫过于提升自我。。2021年2月上午9时42分21.2.1009:42February 10, 2021 16、业余生活要有意义，不要越轨。2021年2月10日星期三9时42分56秒09:42:5610 February 2021 17、一个人即使已登上顶峰，也仍要自强不息。上午9时42分56秒上午9时42分09:42:5621.2.10
淘宝店铺首页设计资料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. 观察产品亮点定背景色
(完整版)淘宝入门-页面装修.ppt
1| 那些地区不推 2| 那些地区要推 3| 那些地区重点推
店铺装修的页面概述
主图
引流，提高点击率
详情页
决定/提高转化率，打消消费疑虑
首页
店铺形象，整体呈现
主图
店铺装修的页面概述
1·尺寸一般为:宽700px高700px 2·一定要突出产品 3·文案一定要吸引人，与消费者
引发共鸣 4·色彩搭配一定要醒目 5·产品要占到整个图60%—70% 6·一定要与其他同类目的产品区别
C
价格区间 的定位
D
推广地域 的定位
人群的定位
1| 性别构成 2| 年龄阶段 3| 消费能力
店铺装修要点概述
产品的定位
1| 什么产品 2| 价值多少 3| 哪个档次
店铺装修要点概述
价格区间的定位
店铺装修要点概述
1| 最高多少钱 2| 最低多少钱 3| 不能太离谱
推广地域的定位
店铺装修要点概述
店铺装修所涉及到的软件
店铺装修步骤演示
Photoshop
Dreamweaver
图文处理软件
网页代码处理软件
一般常用的软件有以上这两种
腾讯QQ
美图秀秀
鉴于大家没有基础教大家怎么用QQ截图，美图秀秀处理图文
店铺装修步骤演示
1 店招的制作
一般店招出现的内容都有：店铺名称、 LOGO/标志、主推产品等
首先大家从网上找一张可以作为店招背景的图片 用QQ截图（Ctrl+Alt+A)截出宽950px高120px大小
4 上传页头背景
店铺装修步骤演示
1 2 3 4 5
点击页头的更换图片，把做好的背景图上传，点应用到所有页面
6 上传轮播海报
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
根据店铺规模和所售商品的类型，可以参照这样的判断标准：如果是心级 店铺，那么跳失率在70%及以下都属于正常，不需要进行优化；冠级店铺 如果跳失率在60%以上，就需要考虑是否是海报设计成文案信息出现了问 题，需要根据具体的数据做出相应的优化与调整。
一、首页设计水平的四大指标 1 首页跳失率
以淘宝店铺为例，消费者进入店铺的店铺首页渠道有很多，大致可以 分为以下四种渠道。
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
3 图层样式的应用
在导航条的制作中就需要应用图层样式。因为淘宝装修后台默认的样式只允许用户 更改导航条的背景颜色。
一个质感强烈、层次清晰的导航条，不仅可以提升整个店铺首页的档次，而且能让 消费者更乐意去点击。而图层样式的作用就是对设计元素进行修饰和美化，实现色 彩、质感与光泽上的变化。
一、首页设计水平的四大指标 3 首页人均点击次数
首页人均点击次数，是指在一段时间内，人均点击了多少次店铺首页。假 设某日点击该网店的访问者数为150人，在此期间点击本店铺首页的总访问 数为600次，那么首页人均点击次数为：600次÷150人=4次/人。
运营者要根据首页人均点击次数来优化店铺整体的导航，美化商品图片， 这对访客的引导非常重要。
Contents 目录
1 首页设计水平的四大指标 2 首页各模块的视觉文案设计
二、首页各模块的视觉文案设计 1 店招的视觉文案设计 2 首焦轮播区的视觉文案设计 3 商品陈列区的视觉文案设计
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
1 店招视觉设计规范
不同的电商平台对店招的图片尺寸有着不同的要求，下面以淘宝网为例来介绍店招 的视觉设计规范。
一、首页设计水平的四大指标 2 首页点击率
首页点击率是商品在首页展现后的被点击的比例，即首页点击率＝首页点 击量÷首页展现量。
首页点击率越高，说明商品对消费者的吸引力越强；首页点击率越低，说 明商品对消费者的吸引力越差，这时就需要对店铺进行优化，如优化商品 图片和推广标题，或者优化商品详情页中的信息，让商品的展现尽可能多 地带来点击量。
一、首页设计水平的四大指标 4 首页平均停留时间
首页平均停留时间（单位：秒）＝访问店铺首页的所有访客总的停留时长÷ 访客数，多天的平均停留时间为各天平均停留时间的日均值。
一般情况下，访客平均停留时间越长，说明店铺的留客工作做得越到位。 如果访客在首页平均停留时间很短，就要考虑商品的图片设计、优化等方 面是否把商品特点都展现出来了，以及首页设计是否能够吸引访客，然后 根据后台的数据统计做出相应的调整。
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
将店铺名称的首个英文字母放 大，并使用不同于其他字体风 格的手写体，让店铺名称文字 的版式更加醒目、更具艺术感
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
2 添加特效，突出特殊性和醒目度
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
3 图层样式的应用
用“渐变叠加”图层样式来表现导航条功能按钮被 鼠标触碰后的状态，在视觉上形成凹陷的效果，将 其与导航条中正常状态下的功能按钮区分开
当鼠标指针触碰到导航条中任意一个功能按钮时，该按钮就会呈 现出不同的效果，这就是添加图层样式的效果，能给人视觉上的 错觉，让按钮上的文字更具层次感，更易于展示当前操作的结果
Contents 目录
1 首页设计水平的四大指标 2 首页各模块的视觉文案设计
一、首页设计水平的四大指标
1 首页跳失率 2 首页点击率 3 首页人均点击次数 4 首页平均停留时间
一、首页设计水平的四大指标 1 首页跳失率
首页跳失率是指消费者通过某种渠道进入店铺，只访问了首页一个页面就 离开的访问次数占该入口总访问次数的比例。电商运营者需要随时铺名称
品牌宣传语
店招元素设计
移动端二维码
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
1 店招视觉设计规范
在设计店招时要注意和导航条的风格进行统一，利用色彩、修饰元素与风格的相似 性来营造视觉上的一致性。 统一的风格及修饰元素的设计， 突出店铺的品牌形象
店招和导航条风格统一
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
CHAPTER EIGHT
店铺首页的视觉文案 设计
学习目标
➢ 掌握衡量首页设计水平的四大指标。 ➢ 掌握店招视觉文案设计的方法。 ➢ 掌握首焦轮播区视觉文案设计的方法。 ➢ 掌握商品陈列区视觉文案设计的方法。
❖ 首页可以说是一个网店的脸面，如果店铺的首页不美观，就不
能有效吸引消费者的注意力，那么不管店铺的商品有多少，也 很难吸引消费者购买。当然，首页不能只有图片，还需要配上 合适的文案，才能让它更具可读性。
为了将店铺名称与导航条的颜 色区分开，使用了发光效果来 修饰店铺名称，营造出了层次 感，也贴合了店铺销售的照明 设备的特点
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
2 添加特效，突出特殊性和醒目度
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名 称，文字与图案在外形上的契 合让店铺名称更具个性和艺术 感，更容易在消费者心中形成 特定的印象
淘宝后台要求的店招高度为120像素，建议设计时，设定 店招尺寸为950像素×120像素，加上导航条的高度30像 素，共150像素，可避免发布后导航条不显示的问题
店招高度的设计规范
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
1 店招视觉设计规范
店招的首要功能就是要清晰地展示店铺名称。在店招上可以添加品牌宣传语、近期 的打折促销信息、收藏按钮或移动端二维码等元素，但要注意这些元素最好不要超 过3个。
二、首页各模块的视觉文案设计 2 首焦轮播区的视觉文案设计
1 设计聚焦消费者视线
在店铺首页的商品图片展示板块中，在其开端位置放置单张海报图片可以在一定程 度上聚焦消费者的视线，让其有继续浏览页面的兴趣。打开网页后第一时间出现在 消费者视线中的区域即店铺首页的第一屏，在该区域会形成首焦位置。
一、首页设计水平的四大指标 1 首页跳失率
以淘宝店铺为例，消费者进入店铺的店铺首页渠道有很多，大致可以 分为以下四种渠道。
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
3 图层样式的应用
在导航条的制作中就需要应用图层样式。因为淘宝装修后台默认的样式只允许用户 更改导航条的背景颜色。
一个质感强烈、层次清晰的导航条，不仅可以提升整个店铺首页的档次，而且能让 消费者更乐意去点击。而图层样式的作用就是对设计元素进行修饰和美化，实现色 彩、质感与光泽上的变化。
一、首页设计水平的四大指标 3 首页人均点击次数
首页人均点击次数，是指在一段时间内，人均点击了多少次店铺首页。假 设某日点击该网店的访问者数为150人，在此期间点击本店铺首页的总访问 数为600次，那么首页人均点击次数为：600次÷150人=4次/人。
运营者要根据首页人均点击次数来优化店铺整体的导航，美化商品图片， 这对访客的引导非常重要。
Contents 目录
1 首页设计水平的四大指标 2 首页各模块的视觉文案设计
二、首页各模块的视觉文案设计 1 店招的视觉文案设计 2 首焦轮播区的视觉文案设计 3 商品陈列区的视觉文案设计
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
1 店招视觉设计规范
不同的电商平台对店招的图片尺寸有着不同的要求，下面以淘宝网为例来介绍店招 的视觉设计规范。
一、首页设计水平的四大指标 2 首页点击率
首页点击率是商品在首页展现后的被点击的比例，即首页点击率＝首页点 击量÷首页展现量。
首页点击率越高，说明商品对消费者的吸引力越强；首页点击率越低，说 明商品对消费者的吸引力越差，这时就需要对店铺进行优化，如优化商品 图片和推广标题，或者优化商品详情页中的信息，让商品的展现尽可能多 地带来点击量。
一、首页设计水平的四大指标 4 首页平均停留时间
首页平均停留时间（单位：秒）＝访问店铺首页的所有访客总的停留时长÷ 访客数，多天的平均停留时间为各天平均停留时间的日均值。
一般情况下，访客平均停留时间越长，说明店铺的留客工作做得越到位。 如果访客在首页平均停留时间很短，就要考虑商品的图片设计、优化等方 面是否把商品特点都展现出来了，以及首页设计是否能够吸引访客，然后 根据后台的数据统计做出相应的调整。
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
将店铺名称的首个英文字母放 大，并使用不同于其他字体风 格的手写体，让店铺名称文字 的版式更加醒目、更具艺术感
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
2 添加特效，突出特殊性和醒目度
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
3 图层样式的应用
用“渐变叠加”图层样式来表现导航条功能按钮被 鼠标触碰后的状态，在视觉上形成凹陷的效果，将 其与导航条中正常状态下的功能按钮区分开
当鼠标指针触碰到导航条中任意一个功能按钮时，该按钮就会呈 现出不同的效果，这就是添加图层样式的效果，能给人视觉上的 错觉，让按钮上的文字更具层次感，更易于展示当前操作的结果
Contents 目录
1 首页设计水平的四大指标 2 首页各模块的视觉文案设计
一、首页设计水平的四大指标
1 首页跳失率 2 首页点击率 3 首页人均点击次数 4 首页平均停留时间
一、首页设计水平的四大指标 1 首页跳失率
首页跳失率是指消费者通过某种渠道进入店铺，只访问了首页一个页面就 离开的访问次数占该入口总访问次数的比例。电商运营者需要随时铺名称
品牌宣传语
店招元素设计
移动端二维码
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
1 店招视觉设计规范
在设计店招时要注意和导航条的风格进行统一，利用色彩、修饰元素与风格的相似 性来营造视觉上的一致性。 统一的风格及修饰元素的设计， 突出店铺的品牌形象
店招和导航条风格统一
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
CHAPTER EIGHT
店铺首页的视觉文案 设计
学习目标
➢ 掌握衡量首页设计水平的四大指标。 ➢ 掌握店招视觉文案设计的方法。 ➢ 掌握首焦轮播区视觉文案设计的方法。 ➢ 掌握商品陈列区视觉文案设计的方法。
❖ 首页可以说是一个网店的脸面，如果店铺的首页不美观，就不
能有效吸引消费者的注意力，那么不管店铺的商品有多少，也 很难吸引消费者购买。当然，首页不能只有图片，还需要配上 合适的文案，才能让它更具可读性。
为了将店铺名称与导航条的颜 色区分开，使用了发光效果来 修饰店铺名称，营造出了层次 感，也贴合了店铺销售的照明 设备的特点
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
2 添加特效，突出特殊性和醒目度
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名 称，文字与图案在外形上的契 合让店铺名称更具个性和艺术 感，更容易在消费者心中形成 特定的印象
淘宝后台要求的店招高度为120像素，建议设计时，设定 店招尺寸为950像素×120像素，加上导航条的高度30像 素，共150像素，可避免发布后导航条不显示的问题
店招高度的设计规范
二、首页各模块的视觉文案设计 1 店招的视觉文案设计
1 店招视觉设计规范
店招的首要功能就是要清晰地展示店铺名称。在店招上可以添加品牌宣传语、近期 的打折促销信息、收藏按钮或移动端二维码等元素，但要注意这些元素最好不要超 过3个。
二、首页各模块的视觉文案设计 2 首焦轮播区的视觉文案设计
1 设计聚焦消费者视线
在店铺首页的商品图片展示板块中，在其开端位置放置单张海报图片可以在一定程 度上聚焦消费者的视线，让其有继续浏览页面的兴趣。打开网页后第一时间出现在 消费者视线中的区域即店铺首页的第一屏，在该区域会形成首焦位置。