淘宝天猫网店美工 店铺首页视觉的设计共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 详情页设计技巧
引起共鸣
解决痛点
痛点挖掘
• 突出对比
• 巧用反馈
• 创造场景
• 独特卖点
痛点：是个互联网概念，是相对于传统企业的需求而言的。就是用户在使
用产品或服务时抱怨的、不满的，让人感到痛苦的接触点。对于产品来说， 痛点多数时候是指尚未被满足的，而又被广泛渴望的需求，有些情况下，也 直接指代需数-人群属性
问题：请分析图中用
广告海报的目的
传达信息 引导购买
提升转化率 把别人的钱装进自己的口袋里
实操
实际查看一个海报文字层，商品层，背景层 使用素材创做广告宣传海报
淘宝天猫美工 第6章 淘宝店铺首页设计
店招风格：店招的风格要和店铺整体统一，同时也要和店 铺产品的风格有一定的关联性。
店招背景：店招左右两侧为店招的背景区域，在设计店招 后还需要对店招的背景进行相应设计。
店铺 logo ：好的店铺 logo 更能深入人心，并逐渐形成 品牌文化。
收藏和关注图标：在店招中加入店铺收藏和关注图标的链 接，可以留着更多潜在客户。
淘宝店铺的首页相当于一家实体店的门面，其首页 设计的好坏将直接影响顾客的购物体验和店铺的转化率， 好的首页一定由合适的版块布局组成。店铺首页布局并 不是将所有模块都堆积到界面中，而是将模块按照合适 的组合进行排列，组成整体格局。不同类型的店铺其首 页模块也不一样，在布局时还要考虑店铺的定位和类型。
图 6-7
图 6-8
客服中心：店铺的客服组所占的高度不多，有些店铺将客 服组设置在店招上，有的则放在首页页面的最后。如果店 铺首页特别长，那一定要把客服组放在最显眼的位置，让 顾客一看就能看到，这样才能在顾客需要帮助时发挥作用。
店铺页尾：在 PC 端的店铺页尾模块，通常会放置“商品 分类”“回到顶部”以及“购物须知”等信息，如图 6-9 所示。
图 6-28
导航的主要作用是列出店铺的分类信息，选择不同的分类 可以进行不同的商品页面，淘宝店铺中的导航是默认存在且不 可删除的。
导航的设置并不是越多越好，要结合店铺的实际运营需要。 店招导航位于店铺店招下方，宽度同店招相同，为 30 像素， 淘宝店铺的导航的文字信息部分建议在 950 像素以内；活动 导航的尺寸建议选择宽度小于 200 像素、高度小于 600 像素， 图片格式为 jpg、png、gif。
STEP 1 打开“店招 .psd”文件，将画布大小更改为 150 像素宽，然后在店招下方绘制一个红色的矩形，如图 6-29 所示。
店招背景：店招左右两侧为店招的背景区域，在设计店招 后还需要对店招的背景进行相应设计。
店铺 logo ：好的店铺 logo 更能深入人心，并逐渐形成 品牌文化。
收藏和关注图标：在店招中加入店铺收藏和关注图标的链 接，可以留着更多潜在客户。
淘宝店铺的首页相当于一家实体店的门面，其首页 设计的好坏将直接影响顾客的购物体验和店铺的转化率， 好的首页一定由合适的版块布局组成。店铺首页布局并 不是将所有模块都堆积到界面中，而是将模块按照合适 的组合进行排列，组成整体格局。不同类型的店铺其首 页模块也不一样，在布局时还要考虑店铺的定位和类型。
图 6-7
图 6-8
客服中心：店铺的客服组所占的高度不多，有些店铺将客 服组设置在店招上，有的则放在首页页面的最后。如果店 铺首页特别长，那一定要把客服组放在最显眼的位置，让 顾客一看就能看到，这样才能在顾客需要帮助时发挥作用。
店铺页尾：在 PC 端的店铺页尾模块，通常会放置“商品 分类”“回到顶部”以及“购物须知”等信息，如图 6-9 所示。
图 6-28
导航的主要作用是列出店铺的分类信息，选择不同的分类 可以进行不同的商品页面，淘宝店铺中的导航是默认存在且不 可删除的。
导航的设置并不是越多越好，要结合店铺的实际运营需要。 店招导航位于店铺店招下方，宽度同店招相同，为 30 像素， 淘宝店铺的导航的文字信息部分建议在 950 像素以内；活动 导航的尺寸建议选择宽度小于 200 像素、高度小于 600 像素， 图片格式为 jpg、png、gif。
STEP 1 打开“店招 .psd”文件，将画布大小更改为 150 像素宽，然后在店招下方绘制一个红色的矩形，如图 6-29 所示。
淘宝店首页布局图
通图所有宝贝首页微淘主页瘦妹子看这前三行200p xlogo 宽250 2-3个产品 5促销图（通栏大手机扫码 350px宽套餐专区150P X550P XP X首页布局950PX棒棒糖的手机vc300P X导航，产品系统调用单个咖啡单支棒和现在的差不多在重新设计下1店招：中间放两个产品（1）新fard500（2）咖啡1.1海报1椰枣250克 8.75元/包，10包85 4包包邮海报2100条包邮，韩国咖啡 5月19日至6月海报3x5一盒58元/24个2棒棒糖的手机专享文案是：50支减4.5320支减13.75底部导航（返回首页，所有宝贝，返对上面的说明250P X3手机扫码 350px宽文案是：手机专享4套餐专区1 300px宽文案是：9样组合只要29.9元包邮5套餐专区2 300px宽文案是：肉松饼10 椰枣500fard只要35.56套餐专区3 300px宽文案是：椰枣500G燕麦巧克力糖38.87套餐专区4 300px宽文案是：椰枣250克黑糖58.81焦糖饼干文案是：产2lulu1000文案是：两合包邮3fard1000克文案是：两合包邮4棒棒糖40文案是：两包包邮5燕麦巧克力文案是：100个包邮品6新fard250文案是：4包包邮 8送一7新fard500文案是：2包包邮8芝士600克文案是：9x5 整合文案是：包邮展10蔓越莓干1360文案是：包邮11肉松 单个文案是：30个包邮12果冻文案是：35个包邮13蔓越莓100示14能量棒15芒果干16蔓越莓饼干17vc1418草莓1419棒棒糖50文案是：2包包邮20蓝莓干文案是：包邮21320支亚米文案是：有手机专享价 省13.75元22芝士 单个23咪咪虾条24能量棒 单个25咖啡文案是：100支包邮26单支棒棒糖文案是：50支包邮27x5 单个文案是：24个包邮18导航，产品目录1行 按价格分类2行按地域分类3行按热销分类4行按人气分类底部底部导航（返回首页，所有宝贝，返回顶部）下面要有手机专享19模板推荐，颜色推荐/detail.htm?spm=20参考网站/?spm咖啡/?spm/shop/view_shop./shop/view_shop.h/shop/view_shop.h/shop/view_shop.h/shop/view_sho/?spm=a2/shop/view_sh/?spm=a2/shop/view_shop.h主要是以参考模板的样子行那个推荐）， 总体上是那个色调。
淘宝天猫美工 第2章 淘宝店铺设计的视觉要素
图 2-20
4. 文案的视觉表现 文案的视觉表现指在不影响阅读的情况下，通过字体变形、
颜色、特效等方式来表达文案的主题，以突出海报重点，如图 2-21 所示。
图 2-21
2.3.2 店铺的文Байду номын сангаас分布
淘宝店铺的文案无处不在，无论是店招、海报、主图、 详情页，还是店外宣传等都有大量的文字信息，但在不同的 位置，需要的文案也有所不同。
生活中的色彩可以分无彩色系和有彩色系两类。无彩色 系一般是指黑、白、灰色系列，有明有暗；有彩色系指包括 在可见光谱中的全部色彩，常见的有红、橙、黄、绿、青、 蓝、紫等颜色。下面分别进行介绍。
无彩色系：在设计色彩的运用中，经常运用到的黑色、白 色、灰色、金色和银色，相对于有彩色而言，其没有明显 的色相偏向，也称为中性色。它们中的任何一色都能与彩 色当中的任何颜色搭配调和，因此，若两色发生矛盾冲突 时，可以采用无彩色来使之达到互相连接、调和的效果。 如图 2-3 所示为无彩色搭配。
2.4.1 常见字体风格
对字体的风格进行分类，有助于设计师抓住字体之间的 微妙区别，从而以一种全新的方式对字体进行编排，进一步 为页面设计更合适的字体。在设计中，常见的字体风格主要 分为以下几种。
1. 无衬线字体
无衬线字体专指西文中没有衬线的字体，与汉字字体中的 黑体相对应。
无衬线字体没有衬线，字符末梢无任何花饰，它们笔画的 字重统一，轴线完全垂直，拥有相同的曲率、笔直的线条，以 及锐利的转角。无衬线字体在正文排版中显得比较密实，且设 置为小字号时亦能清晰辨认，因此常被广泛地用于阅读文本当 中，如图 2-27 所示的两个 Logo 的字体。
2.3.1 文案的表现方法
对于淘宝店铺来说，文案是买家对宝贝的第一感觉，优 秀有意思的文案能够吸引买家，一方面可以更好地介绍活动 内容或商品特点，另一方面能增加品牌印象，增强顾客的信 任。
4. 文案的视觉表现 文案的视觉表现指在不影响阅读的情况下，通过字体变形、
颜色、特效等方式来表达文案的主题，以突出海报重点，如图 2-21 所示。
图 2-21
2.3.2 店铺的文Байду номын сангаас分布
淘宝店铺的文案无处不在，无论是店招、海报、主图、 详情页，还是店外宣传等都有大量的文字信息，但在不同的 位置，需要的文案也有所不同。
生活中的色彩可以分无彩色系和有彩色系两类。无彩色 系一般是指黑、白、灰色系列，有明有暗；有彩色系指包括 在可见光谱中的全部色彩，常见的有红、橙、黄、绿、青、 蓝、紫等颜色。下面分别进行介绍。
无彩色系：在设计色彩的运用中，经常运用到的黑色、白 色、灰色、金色和银色，相对于有彩色而言，其没有明显 的色相偏向，也称为中性色。它们中的任何一色都能与彩 色当中的任何颜色搭配调和，因此，若两色发生矛盾冲突 时，可以采用无彩色来使之达到互相连接、调和的效果。 如图 2-3 所示为无彩色搭配。
2.4.1 常见字体风格
对字体的风格进行分类，有助于设计师抓住字体之间的 微妙区别，从而以一种全新的方式对字体进行编排，进一步 为页面设计更合适的字体。在设计中，常见的字体风格主要 分为以下几种。
1. 无衬线字体
无衬线字体专指西文中没有衬线的字体，与汉字字体中的 黑体相对应。
无衬线字体没有衬线，字符末梢无任何花饰，它们笔画的 字重统一，轴线完全垂直，拥有相同的曲率、笔直的线条，以 及锐利的转角。无衬线字体在正文排版中显得比较密实，且设 置为小字号时亦能清晰辨认，因此常被广泛地用于阅读文本当 中，如图 2-27 所示的两个 Logo 的字体。
2.3.1 文案的表现方法
对于淘宝店铺来说，文案是买家对宝贝的第一感觉，优 秀有意思的文案能够吸引买家，一方面可以更好地介绍活动 内容或商品特点，另一方面能增加品牌印象，增强顾客的信 任。