淘宝天猫网店美工 店铺首页视觉的设计共75页
合集下载
《网店美工》项目1--走进视觉营销与美工设计
者快速找到商品、下单和获得帮助。
— 29 —
1.2.2 视觉营销的流程整合
➢店铺商品和用户角度
店铺的商品
商品结构体系
商品价格体系等
决定“店铺结构”和“页面结构”
店铺的用户群
社会层次 消费能力 生活习惯等 决定“店铺风格”和“商品陈列”
— 30 —
1.2.2 视觉营销的流程整合
➢具体操作流程步骤
思考
色彩作为一种客观存在，可以表现丰富的情感效应，这就是色彩的感觉与象征。
（1）色彩的冷暖感 （2）色彩的轻重感 （3）色彩的空间感
— 16 —
色彩的冷暖
根据人们的心理和视觉判断，色彩有 冷暖之分，可分为三个类别： 暖色系（红、橙、黄）， 冷色系（蓝、绿、蓝紫）， 中性色系（绿、紫、赤紫、黄绿等）。
— 17 —
需熟练掌握各种图片、视频软件，如Photoshop、Illustrator 、C4D、 Dreamweaver、光影魔术手、会声会影等，熟悉页面布局，了解产品特性， 能设计有思想、有创意、能触动消费者、产生共鸣、赢得消费者心智的图 片。
网店美工职责一、进行网站商品图的拍摄和详情页的描述制作。 网店美工职责二、网站各种页面的设计与装修 网店美工职责三、网店的编辑描述
任务3 网店美工
1.3.1 网店美工简介 1.3.2 网店美工运营之手 1.3.3美工成长路径
— 3—
项目一 视觉营销与美工设计
【本项目重点难点】
掌握色彩的分类、属性和色彩搭配；掌握视觉营销的原则及流程整合， 掌握网店的岗位图表及美工岗位能力要求。
【项目导图】
— 4—
【引例 】裂帛的视觉营销
作为网店品牌裂帛，它以出色的产品以及高质感的视觉营销在年轻群体中迅 速站稳脚跟。它的风格无拘无束，有着狂喜、神秘、流浪、异域的意态气场。那么， 裂帛究竟是通过怎样的方式向消费者展示自己产品呢？
店铺首页视觉设计方案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像素。一般来说，店招主要包括品 牌形象展示店招和商品导购店招两种。
淘宝天猫网店美工全能第2章
2.1.4 全屏海报设要素在
该海报中的应用方式，以及 呈现的效果，让读者对三要 素的认识更为深刻。
2.1.4 全屏海报设计元素赏析
7
1、面的应用
3、点的应用
2、线的应用
新手试练
8
如图所示为搜集的两款海报效果。为了提高读者视觉设计的水平，要求对图中的点、线、面
2.4.3 店铺页面布局的原则
主次分明、中心突出
29
01
布局丰满、应有尽有
05
店铺页面布 局的原则
02
大小搭配、相互呼应
04
合理使用页面元素
03
简洁与一致性
2.4.4 淘宝首页视觉赏析
30
意尔康是中国领先的鞋类品牌企业。下面将对意尔康淘宝网页 中海报的构图技巧、商品的陈列、色彩与文本的应用进行赏析。
34
使用图形装饰文本
倾斜文本
变形文本
使用颜色装饰文本
扩展阅读——淘宝文本装饰技巧
35
投影、描边与发光效果
为文本添加立体效果
高手进阶
（1）赏析如图2-61所示为TPIWR天猫旗舰店首屏效果，要求对
页面的设计元素、页面的颜色搭配与字体搭配进行分析。 （2）赏析如图2-62所示的歌莉娅官方店首页，要求对网页中颜
扩展阅读——淘宝文本装饰技巧
高手进阶
2.4.1 视觉构图
25
中心构图
九宫格构图
2.4.1 视觉构图
26
对角线构图
三角构图
2.4.1 视觉构图
27
黄金分割点构图
2.4.2 店铺页面布局的基本元素
28
一个完整的淘宝旺铺中，网店页面一般包 括的元素有店招、导航、轮播海报、优惠 券、宝贝分类、宝贝展示、页尾等。
《淘宝天猫网店美工》试卷
《淘宝天猫网店美工》试卷基本信息：[矩阵文本题] *一、填空题 (共10题，每题1分。
)1．图层样式效果中的叠加效果包括颜色叠加、____________和图案叠加等3种。
[填空题] *_________________________________(答案：渐变叠加)2．填充图像区域可以选择________________菜单命令实现，描边图像区域的边缘可 [填空题] *_________________________________(答案：编辑/填充)3．路径的基本组成元素包括________________、________________、________________、________________和方向点等。
[填空题] *_________________________________(答案：锚点直线段曲线段方向线)4．创建快速蒙版的方法是单击工具箱中的______________________按钮。
[填空题] *_________________________________(答案：以快速蒙版模式编辑)5．修复工具和________________都可以用于修复图像中的杂点、蒙尘、划痕及褶皱等。
[填空题] *_________________________________(答案：修补工具)6．____________是指色彩的相貌，____________是指色彩的纯度，____________是指色彩的明暗程度。
[填空题] *_________________________________(答案：色相饱和度明度)7．色调是指图像原色的____________；饱和度是指色彩的____________。
[填空题] *_________________________________(答案：明暗程度纯度)8．蒙版可以通过通道获取，还可以通过________________和________________获取。
淘宝店铺首页设计资料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课件
处理后：色彩纯净， 画面清晰，画面层 次感强，商品形象 更突出
处理前后的商品形象对比
二、首页各模块的视觉文案设计 2 首焦轮播区的视觉文案设计
2 构成首焦轮播图的三要素
• 文字是首焦轮播图设计中不可或缺的重要元素，很多不能用图片表达的信息都需要 通过文字来传达，如活动的内容、商品的名称、商品的价格等。因此，艺术化的文 字编排在首焦轮播图的设计中就显得尤为重要。
2 商品布局艺术化
1 折线型布局 折线型布局就是将
商品图片按照错位 的方式进行排列。
二、首页各模块的视觉文案设计 3 商品陈列区的视觉文案设计
2 商品布局艺术化
1 折线型布局 2 随意型布局
随意型布局就是将商品图片随意地放置在页面中，但是这种随意往往需要营造 出一种特定的氛围和感觉，让这些商品之间产生一种联系。
①浏览初期，视线水平移动，且浏 览范围最大。刚开始浏览时，消费 者对商品展示图充满了新鲜感和好 奇，很可能将第一排图片全部浏览 完，并根据从上到下的浏览经验， 转向对第二排图片的浏览
②水平浏览范围缩短。此时图片的 布局没有任何变化，消费者对于图 片浏览的新鲜度就会降低，开始失 去浏览的耐心，于是对第二排图片 的水平浏览范围便会缩短
Contents 目录
1 首页设计水平的四大指标 2 首页各模块的视觉文案设计
一、首页设计水平的四大指标
1 首页跳失率 2 首页点击率 3 首页人均点击次数 4 首页平均停留时间
一、首页设计水平的四大指标 1 首页跳失率
首页跳失率是指消费者通过某种渠道进入店铺，只访问了首页一个页面就 离开的访问次数占该入口总访问次数的比例。电商运营者需要随时观测店 铺的各项数据，并根据数据变化情况对页面进行优化与调整。
淘宝天猫网店美工教程 项目9 商品详情页视觉设计
46
47
谢谢观看
商品详情页视觉设计
淘宝网店美工一本通
任务3 ∣搭配建议模块设计
一、 任务描述
17
本例将为首页焦点图中的商品搭配衣服、鞋子 与首饰，使其更显档次。
任务3 ∣搭配建议模块设计
18
二、 相关知识
使用单品进行陈列展示
使用模特进行展示
模特与单品的组合陈列
任务3 ∣搭配建议模块设计
三、 任务实施 1、添加素材 2、输入文本
19
任务3 ∣搭配建议模块设计
20
四、 新手试炼
21
内容导航
任务1 ∣了解商品详情页
任务2 ∣详情页首页焦点图设计
任务3 ∣搭配建议模块设计 任务4 ∣商品亮点设计 任务5 ∣商品信息展示设计 任务6 ∣商品细节设计 课后练习
任务4 ∣商品亮点设计
一、 任务描述
22
商品的亮点实质为商品卖点的表达形式
之一。商品的亮点可以理解为商品具备的前
FAB法则
从产品概念提炼
从更高层次的需求提炼
任务4 ∣商品亮点设计
三、 任务实施 1、添加素材 2、制作亮点1
25
任务4 ∣商品亮点设计
26
3、亮点二——时尚肩带自由调节
4、亮点三——时尚收纳 精致生活
27
内容导航
任务1 ∣了解商品详情页
任务2 ∣详情页首页焦点图设计
任务3 ∣搭配建议模块设计 任务4 ∣商品亮点设计 任务5 ∣商品信息展示设计 任务6 ∣商品细节设计
35
2、绘制并复制圆
3、添加素材与投影
4、添加颜色文本
任务5 ∣商品信息展示设计
（四） 商品全方位展示图设计 1、添加素材 2、添加投影 3、输入文本并绘制虚线
网店美工与视觉设计(第七、八章)
8.2.4 商品分类导航设计
通常情况下，在移动端店铺首页中，轮播图片与优惠券板块后面是分类导航 板块。在设计这个板块时，注意控制好显示尺寸与比例，使其能够清晰与完整地 展示在买家面前，起到快速导航作用。
8.2.5 商品分类展示设计
商品分类展示模块用于对店铺的商品进行展示，在注意布局的同时应尽量将 主营的宝贝全部覆盖，展示时，应将主推商品、热销商品进行重点突出，可通过 色相对比吸引用户眼球，或添加相应元素引导消费者。
学习目标
知识目标 1．了解移动端店铺页面的框架结构； 2．了解移动端店铺对图片发布的尺寸要求； 3．掌握移动端网店模块的编辑与装修方法。 能力目标 1．能够完成移动端模块设计和装修； 2．能够完成移动端页面装修设计。
8.1移动端网店装修的基础知识
在当今移动互联网时代，随着移动设备的普及和发展，越来越多的网民喜欢用手机 上网购物，网络购物向移动端转移的趋势进一步加强。无线端无论是在网店流量还是成 交额方面都占据着非常重要的位置，因此，对于电商企业来说，移动端店铺视觉设计成 为重点关注对象之一。
8.3.2移动端详情页设计要点
图片设计要点：图片的大小要适中，过大的图片容易出现加载缓慢的问题，影响买 家购物体验，应在保证图片清晰度的同时尽量压缩图片；细节图不能太小，尽量保 证清晰度，让买家能够看见细节详情，产生购买欲望。 文字设计要点：图片中的重点文案信息，如商品信息和商品内容描述文字等都不能 太小，否则容易导致诉求不清。 商品卖点设计：想要商品卖点突出，就要合理控制页面展示的信息量，省略一些无 关紧要的内容，提升买家购物体验。
8.3移动端网店详情页的视觉设计
主图的构成 移动端店铺的详情页与PC端店铺的商品详情页有着同样的设计思路，在设计移动端
网店装修美工及视觉营销设计(宝贝图、海报、详情页)
色彩三个属性
色彩心理与设计风格
1、红色
红色给人一种喜庆火热的感觉，是一种对人刺激性很强的色。红色容易使人兴 奋、紧张、激动，故也称为兴奋色。在网页美工设计中运用红色会达到比较好 的视觉宣传效果
2、黄色
黄色给人一种光明辉煌的感觉，是最为娇嫩的一种色。在所有的颜色当中黄色 明度最高。在网店美工设计中使用黄色和白色的搭配，会使得页面更加的干净 纯洁。
第七部分：宝贝的品牌形象 第六部分：宝贝的细节展示 第五部分：宝贝的规格参数 第一部分：创意海报 第二部分：宝贝特性介绍 第三部分：宝贝的优势
第四部分：宝贝的利益
详情页排版
创意海报情景大图 宝贝卖点/作用/功能
规格参数信息 宝贝优劣对比 全方位展示/细节图片展示 产品或店铺资历证书 售后保障问题/物流
户评价，能解读出哪些
痛点信息？对商家或运 营者有什么启示？
答：主要是3个层面 的问题。
1、产品性能问题-识别不灵敏 ；
2、按照服务问题； 3、老人和小孩使用 不方便。
详情页设计-打造卖点
5.4 详情页设计技巧
引起共鸣
解决痛点
痛点挖掘
• 突出对比
• 巧用反馈
• 创造场景
• 独特卖点
痛点：是个互联网概念，是相对于传统企业的需求而言的。就是用户在使
用产品或服务时抱怨的、不满的，让人感到痛苦的接触点。对于产品来说， 痛点多数时候是指尚未被满足的，而又被广泛渴望的需求，有些情况下，也 直接指代需数-人群属性
问题：请分析图中用
广告海报的目的
传达信息 引导购买
提升转化率 把别人的钱装进自己的口袋里
实操
实际查看一个海报文字层，商品层，背景层 使用素材创做广告宣传海报