淘宝天猫美工 第9章 手机淘宝页面的设计
《网店美工设计》教学课件
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
1 分辨率
分辨率有两种：屏幕分辨率和图像分辨率。
2 像素
图像由一个个点组成，这个点叫作像素。像素是图像中最小的单位。每个像素是一个小点，不同颜色 的点（像素）聚集起来就变成一幅动人的画面。
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
任务描述 任务技能
淘宝网成立于2003年5月10日，由阿里巴巴集团投资创办。淘宝网分为淘宝C店和淘宝商城2种 模式。淘宝C店是淘宝集市卖家所开设的店铺，这种店铺的门槛低，任何通过实名认证的人，只要 发布10件宝贝就可以免费在淘宝上开店。淘宝商城（天猫）是亚洲最大的购物网站淘宝网打造的在 线 B2C 购物平台，自2008年4月10日成立以来，吸引了 Kappa、JackJones、苏泊尔、联想、惠普等 在淘宝商城开设官方旗舰店，受到了消费者的热烈欢迎。
而淘宝网作为服装类电子商务行业的老大，是国内B2C及C2C 电子商务网站中发展最快、 最为成功的案例，以提供具有本土特色的电子商务平台服务为宗旨，并一直不断完善和发展。 其在中国的 C2C 市场中可谓是一家独大，市场份额更是超过了 90%，行业领先的地位暂时是 无人能撼动的。目前，服装服饰类产品已经成为网络零售的第一大商品，无论从数量还是交 易规模上都是如此。单是淘宝网上初具规模的卖家群体皇冠店铺就已达上万家之多，并且仍 保持着快速增长的态势。本次任务主要是实现淘宝女装店铺首页设计。
【功能描述】 ● 使用淘宝布局要素来设计女装店铺首页。 ● 头部包括店铺的logo、宣传标语、购物车、账户登录及客户中心的图标。 ● 主体包括各个分类版块下的图片链接。 ● 底部包括店铺的各项服务链接、搜索框及返回首页和顶部的按钮。
《网店美工》教案--商品详情页设计
***学校《网店美工》教案第 1 页有兴趣的设计师们可以利用业余时间多进行了解。
如果能够成为集设计与文案才能于一身的高级人才，可想而知，你将备受青睐。
商品详情页设计是直接决定交易能否成功的其中一个重要因素，如何去构思使之更具有吸引力，更能抓住消费者的心理是关键。
我们需要收集和了解买家需要看什么，不需要看什么：图6-1 详情页所需内容板块示意接着，在再构思宝贝页面需要放置什么内容：图6-2 详情内容要点示意任务23 商品功能性介绍区域设计在做商品详情页规划前，清楚商品详情页每个区域的功能性，对后期布局设计起到相当重要的作用。
一般来说，商品详情页分三大区域：商品营销区、产品展示区、品牌包装区。
而三大区域则又细分成以下6个展现区，并形成商品描述的布局图：突出卖点：提炼商品的主要功能利益进行重点表现，吸引买家关注并进行浏览由整体到细节：先进行商品的整体展现，再进行商品的细节描述，这也是买家在购买商品时的浏览顺序情感联想：针对商品提炼情感利益，激发买家的感性购买需求导购服务：针对买家关注的商品问题进行导购式解答，逐步打消买家的购买疑虑售前售后：对买家进行购买后的一系列服务，从包装、物流到售后服务进行描述实力呈现：商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容关联销售：关联销售区域，以便买家跳出前有更多商品选择图6-3 详情页个区域内容细分示意另外，除了基础功能区域版块，为了提高买家逛店体验度以及店铺成交转化率，我们建议增加一些额外的版块，来为商品详情页的功能加分：1.增加买家购买欲望—促销活动区：在商品描述中加进给力的促销信息，让买家了解商品的同时清楚可以享受的促销优惠，让促销优惠来刺激买家的购买欲望。
2.增加客单价—商品推荐：商品推荐有两种，分为同类商品推荐，设计必须要突出同类商品中不同商品的优势。
告诉买家可以如何进行商品选择，如可以的话还可以体现出购买咨询和导购信息。
另一类则是搭配商品推荐：设计中要突出不同商品搭配的艺术，或功能或效果或视理念或促销导购写到这里来，但是文案不宣过长。
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学课件—第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像素。一般来说，店招主要包括品 牌形象展示店招和商品导购店招两种。
制作淘宝PC端首页
项目7 综合网页制作与发布/任务7.1 制作淘宝PC端首页/活动2 制作其他交易类电商网页
活动2 制作其他交易类电商网页
【作业助手2】AP DIV的编辑操作
“AP元素”面板显示了网页中所有的AP DIV及各个AP DIV之间的关系。 在“AP元素”面板中可以选择AP DIV、设置AP DIV的显示属性、设置AP DIV的堆叠顺序和重命名AP DIV等。
项目7 综合网页制作与发布/任务7.1 制作淘宝PC端首页/活动1 布局淘宝PC端首页
活动1 布局淘宝PC端首页
【作业步骤】
（1）浏览店铺的首页，分析店铺的结构。 （2）画出店铺首页布局图。 （3）准备好各类素材。 （4）利用Dreamweaver CS6制作店铺首页。 （5）预览测试效果。
项目7 综合网页制作与发布/任务7.1 制作淘宝PC端首页/活动1 布局淘宝PC端首页
项目7 综合网页制作与发布/任务7.1 制作淘宝PC端首页/活动1 布局淘宝PC端首页
活动1 布局淘宝PC端首页
【知识链接】
常见网页布局形式： （1）左右对称结构布局 （2）“同”字结构布局 （3）“回”字形结构布局 （4）“匡”字形结构布局
项目7 综合网页制作与发布/任务7.1 制作淘宝PC端首页/活动1 布局淘宝PC端首页
《淘宝天猫网店美工教程》模拟测试题一(含答案)
《淘宝天猫网店美工实战教程》模拟测试题一姓名班级学号得分一、填空题（25分，每空1分）1.位图又称像素图或点阵图像，由若干组成。
2.分辨率是指，单位长度上像素越多，图像就越清晰。
3.在“新建”对话框中的“背景内容”下拉列表框中提供了、和透明3种方式。
4.设置绘图颜色可以通过拾色器、、和吸管工具等4种方法进行设置。
5.选择“图像”菜单下的菜单命令，可以设置图像的画布大小。
6.创建不规则选区可使用的工具包括套索工具、多边形套索工具、和魔棒工具。
7.使用工具可以移动图像；使用可以将图像中的某部分图像裁切成一个新的图像文件。
8.修复工具和都可以用于修复图像中的杂点、蒙尘、划痕及褶皱等。
9.渐变工具提供了线性渐变、、、对称渐变和菱形渐变5种渐变方式。
10.Photoshop中的路径操作工具大致可以分为3类，分别为、路径编辑工具路径选择工具。
11.Photoshop中常用的图层类型包括普通图层、、、调整图层和效果图层5种。
12.需要合并链接图层时，可以单击图层面板右上角的箭头按钮，在弹出菜单中选择命令。
13.使用可以蔽整个图层或图层组，或者只遮蔽其中的所选部分。
14.图层样式效果中的叠加效果包括颜色叠加、和图案叠加等3种。
15.图像模式的转换可以通过选择子菜单中相应的命令实现。
16.用鼠标把通道拖到通道面板底部的按钮上即可复制通道。
17.单击路径面板的按钮，可以使用前景色、背景色、图案等填充路径。
18.Photoshop中除了颜色信息通道外，还包括专色通道和。
19.滤镜可以在图像中产生不规则分离的彩色玻璃格子。
20.选择【图像】/【调整】子菜单下的菜单命令，可以自动调整图像的明暗度，去除图像中不正常的高亮区和黑暗区。
二、判断题（10分，每题1分）1.对位图图像，无论将其放大和缩小多少倍，图形都有同样平滑的边缘和清晰的视觉细节。
（）2.JPG图像文件格式是Photoshop软件自身生成的文件格式，是惟一能支持全部图像色彩模式的格式。
电商2021教你打造一个优秀的淘宝天猫详情页!
电商2021教你打造一个优秀的淘宝天猫详情页！面对货比三家，非常挑剔的买家。
我们应该怎么从细节下手，去吸引我们的优质买家群体？细节，我们肯定联想到详情页。
那我们应该怎么做优秀，完美的详情页呢？下面，我就给大家整理的一套完美的思路，教大家怎么做好一个完美优秀的详情页！！〔文章有局部内容是来自其他网络〕一丶详情页有什么用？为什么我们要用详情页？详情页中的主图，就相当于是我们的人脸，详情页的图片丶文字丶媒体，文案等就是这款商品的简历，整个详情就如同一个店铺的核心，是从买家观看阅读直到转化最重要的一个细节，当然详情页也是展示宝贝重要的核心卖点、详细产品、品牌象征，赢得客户的收藏，转化重要的“基地〞！那对于我们的买家，卖家，平台详情页又代表着什么呢？！假如我们把店铺比方成一个超市里的一个商铺。
那么，与买家-详情页就是商铺的导购员，负责介绍消费者买家阅读的产品；与卖家-详情页就是铺中的展示柜，希望的是无死角去展现自己产品，对消费者买家形成诱惑力，加强购置欲；与平台，详情页是商铺的验收单，符不符合规定，有没有利益点，有没有成为“行业好商铺〞的典范？！二丶关键词1.导购员的关键词相貌端正，表里如一：1.脸面：主图干净明晰，说到主图，不可防止的就要谈到“牛皮癣〞的问题，其实根据不同类目有不同的要求，其实你只要把你作为一个客户，当你看到这张主图时，你会不会去点，不要老是说我要放这个我要放那个。
2.主图与详情页描绘商品要一致：主图描绘的商品要和详情页讲述的商品要是同一个商品，不可推此说彼。
3.店铺风格与主图丶详情页风格要一致：在这个问题上，千万不要发挥我朝人民“金玉其外败絮其中〞的“优良传统〞，要风格统一，不要远看高富帅，近看穷屌丝。
口齿伶俐，表达明晰:度：全方位讲解宝贝:可以从前后左右,亦可从上至下,甚至可以由表及里等方式仔细的介绍产品。
2.图文并茂：可看丶可读：图片的可看性强于文字，文字的可读性又强于图片，因此强强结合才是王道。
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》—教学教案
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学教案第1章小结1、掌握网店美工的工作范畴。
2、掌握网店美工需要遵循的设计原则。
3、掌握网店美工工作流程。
课后练习课后练习——赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。
第2章2.4.1文案在网店美工中的重要性2.4.2文案的策划2.4.3文案的前期准备2.4.4文案的写作要点2.4.5主图文案的设计与编写2.4.6详情页文案的设计与编写2.4.7海报文案的设计与编写2.5课堂实训——鉴赏森林大叔旗舰店的首页2.6课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配练习2：赏析森马官方旗舰店首页的布局2.7拓展知识小结1、掌握色彩的搭配技巧。
2、掌握版式布局的知识。
3、掌握文字的运用原则。
4、掌握文案设计与编写。
课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。
练习2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。
第3章实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹污点练习2：抠取红酒商品图片并合成3.6拓展知识小结1、掌握修改商品图片尺寸及校正方法。
2、掌握优化图片的方法。
3、掌握抠取图片并合成的方法。
课后练习练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。
处理前后的对比效果如图所示。
其具体要求如下。
熟练掌握商品图片的优化方法。
分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。
练习2：抠取红酒商品图片并合成本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。
淘宝店铺首页设计资料ppt课件
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产 品：当海报 上要放置过 多的促销产 品，可以采 用这种版式。 产品平行排 版，中间利 用半透明的 框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图： 斜切式构图 会让画面显 得时尚，动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°， 文字往右上 方倾斜便于 阅读 。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同，形成差异化竞争
12
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
（一）海报设计思路：
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如图 9-1 所示为两个典型淘宝手机端的店铺主页。
图 9-1
2. 详情页
手机端的详情页是增加无线端宝贝和店铺的加权点之一。 手机端的详情页可以同步电脑端的详情页，但是可能会出现 字体不整齐，图片重叠等情况。因此，若是从电脑端直接生 成的手机端详情页，在制作时要检查清楚图片和文字有无错 误；若需要重新制作手机端详情页，还应该注意以下几个方 面的问题。
STEP 2 将背景填充为粉色，如图 9-3 所示。
STEP 3 使用椭圆工具 并按住【Shift】键拖动绘制圆形， 然后使用路径选择工具 选中圆形路径，按【Shift+Alt】 组合键复制圆形路径，如图 9-4 所示。
图 9-3
图 9-4
STEP 4 框选所有圆形路径，在工具属性栏中单击“路径 操作”按钮 ，在打开的菜单中选择“合并形状路径” 选项。
颜色区别：许多电脑端的页面在视觉上更能体现出效 果，而手机端因为浏览面积小，反而不太适合运用一 些视觉画面来体现，因此在颜色搭配上也要尽量简单。
9.1.2 手机淘宝设计要点
1. 首页
同电脑端从左到右的浏览习惯不同，手机端的浏览习惯 一般是从上到下，因此，在版式设计上可以使用各种大模块 的组合，如焦点图、左文右图、多图等。
图 9-6
图 9-7
STEP 8 输入文字，设置颜色和字体，然后选中文字图层， 按【Ctrl+T】组合键进入变换状态，再按【Ctrl+ALt】组 合键对其倾斜变形，如图 9-8 所示。
STEP 9 设置前景色为字体的红色，新建图层，使用画笔 工具任意绘制装饰图像，效果如图设置字体，然后调整文字 的大小和圆形的大小，效果如图9-14 所示。
图 9-13
图 9-14
STEP 5 选择圆形图层，使用橡皮擦工具擦除一些空隙， 如图 9-15 所示。
STEP 6 在左下方输入文字的英文翻译，字号可以设置得 小一些，让其起到装饰作用，完成后保存所有操作即可， 效果如图 9-16 所示。
随着移动设备的发展，手机逐渐成为生活中不可或缺的 电子产品，众公司也逐渐开发出移动客户端供用户使用。据 不完全统计，通过淘宝移动客户端进行网络购物的比例在总 和中占80%以上，远超淘宝PC客户端。因此，淘宝店铺不能 只注重PC端界面的设计，更要把重点放在手机淘宝平台的视 觉设计上。本章将为一家家居店铺制作淘宝手机客户端的相 关页面，包括首页、详情页等。通过本章的学习，可以了解 手机淘宝页面的制作方法。
9.2.1 店铺店招设计
手机端的最新店招尺寸为 750 像素 ×254 像素，可以 是活动公告，也可以是海报图片等，制作的店铺店招的最终 效果如图 9-2 所示。
图 9-2
下面通过 Photoshop 来制作手机端的店铺店招，其具体 操作步骤如下。
STEP 1 新建一个尺寸为 750×254 像素、分辨率为 72 像 素 / 英寸的空白文件。
图 9-9
9.2.2 焦点图设计
手机端的焦点图即电脑端的海报图或轮播图，其设计的 要点类似，但由于手机屏幕较小，制作焦点图时切忌使用暗 沉的颜色。制作的焦点图的最终效果如图 9-10 所示。
图 9-10
下面便来制作家居店铺手机端首页的焦点图，其具体操 作步骤如下。
STEP 1 新建一个尺寸为 750×550 像素、分辨率为 72 像素 / 英寸的空白文件。
STEP 2 将素材文件“图 1.jpg”拖入到图像文件中，并 缩放到合适大小，如图 9-11 所示。
STEP 3 在左侧使用直排文字工具 输入文字，设置字体 和大小，效果如图 9-12 所示。
图 9-11
图 9-12
STEP 4 在文字上方绘制圆形选区，新建图层，选择“编 辑 / 描边”命令，打开“描边”对话框，设置描边为黑 色的 1 像素，如图 9-13 所示。
当善宝贝主文字说明太多时，可以舍弃图片，直接使用纯 文本的形式。
图片的制作尽量控制在手机屏幕以内，这样可以集中浏览 者注意力。
尽量完图，通过主图将宝贝信息展现出来，更有利于提高 买家购买欲和下单率。
手机端的首页设计同电脑端的首页设计模块大体相同， 包括店招、海报（焦点图）、优惠券、宝贝分类等，下面分 别对各个模块进行制作。
图 9-15
图 9-16
9.2.3 优惠券设计
手机端的优惠券模块较小，若使用太复杂的图像反而会 喧宾夺主，所以可以使用简洁的图形和文字来制作。制作的 优惠券的最终效果如图 9-17 所示。
布局区别：手机淘宝根据受众的需求，在布局上要做 到更加简洁明了，要懂得舍弃不必要的装饰。
详情区别：电脑端因为屏幕较大，可以通过较多的文 字来说明产品功能、卖点等，但是手机淘宝的详情页 则需要使用较多的图片来展示商品，而文字则越简洁 越好。
分类区别：手机淘宝在宝贝分类上要结构明确，模块 划分清晰。
STEP 5 在圆形路径上绘制一个矩形路径，选择两个形状 图层后，单击鼠标右键，在弹出的快捷菜单中选择“合并 形状”命令合并两个形状图层，
图 9-5
STEP 6 在工具属性栏中设置填充颜色为比背景色稍微深 一些的粉色，并调整其位置，如图9-6 所示。
STEP 7 复制形状图层，将复制的图层放在原形状图层下 方，在工具属性栏中设置颜色为白色，如图 9-7 所示。
9.1.1 淘宝手机端和电脑端的区别
在设计手机端的页面时，许多店家会直接将电脑端 的图片现搬到手机端来使用，但是因为手机尺寸的局限 性，可能会出现尺寸不合、文字太小和体验太差等问题。 那么淘宝手机端和电脑端有什么区别呢？具体如下：
尺寸区别：手机屏幕的尺寸决定了图片的尺寸，若尺 寸不合适则会造成界面混乱等问题。