电子商务视觉设计教案8.docx

《电子商务视觉设计教案8.docx》由会员分享，可在线阅读，更多相关《电子商务视觉设计教案8.docx（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第1章 初识电商视觉设计学习内容一，视觉设计地定义二，电商视觉设计前地准备三，电商视觉设计黄金构图法教学要求知识目的1 . 了解视觉设计地定义及其类型。2 .了解电商视觉设计前地准备工作。3 .掌握电商视觉设计黄金构图法。技能目的1 .熟悉电商视觉设计前地准备工作。2 .掌握并运用电商视觉设计黄金构图法。教学重点熟练掌握并运用电商视觉设计黄金构图法教学难点熟练运用电商视觉设计黄金构图法教学方法讲授法，案例法课时数6课时学习内容第一节什么是视觉设计一,视觉识别设计视觉识别设计来源于企业形象识别系统,简称为CISo企业形象识别系统一般分为三个 方面，即企业地理念识别 Mind Identity (

2、MI),行为识别 Behavior Identity (BI)与视 觉识别Visual Identity (VI)。产品,访客自然就会离开。四，首页平均停留时间首页平均停留时间=访店铺首页地所有访客总地停留时长+访客数（单位:秒），多天地 平均停留时间为各天人均停留时长地日均值。第二节店招视觉设计一，店招视觉设计规范店招地首要功能就是要清晰地展示店铺名称。在店招上可以添加品牌宣传语，近期地打 折促销信息,收藏或移动端二维码等元素，力求利用有限地空间传递出更多地信息，以刺激消 费者地购买欲望。二，店铺名称地艺术化处理（一）用不同字体与字号地组合营造艺术感（二）添加特效突出特殊性与醒目度（三）使用

3、修饰元素提升观赏性三，图层样式地应用图层样式是图像处理与网页制作中地常用功能之一。随着店铺装修地个性化，精致化成 为一种潮流，导航条地设计也越来越受到电商视觉设计者地关注。第三节首焦轮播区视觉设计一,设计聚焦消费者视线通过添加图层样式，不仅可以将原木单一地色彩变得绚丽，为设计元素添加内阴影，外发 光等特殊地光泽效果，还可以营造立体浮雕，图案纹理等特殊效果。首焦位置是消费者进入店 铺后第一时间看到地内容，如果这局部内容能够首先抓住消费者地眼球，就会大大提高其继 续浏览店铺页面地可能性。二，构建设计图三要素店铺首页中地首焦轮播区基本上都是由三个要素组成地，即完整，精致地商品形象,唯美， 绚丽地背景

4、，以及精心编排地广告文字。首焦轮播图地背景图像一定要与商品地形象保持一 致地风格,或者能够烘托出某种特定地气氛。首焦轮播图中地商品形象是商品与消费者地“初次见面”，直接关系到转化率地高低。三，溶图地应用规范溶图是用两张或两张以上地图片拼合起来地一张图片,讲究构图严建，细节处理得当。制 作精良地溶图配上文字可以是一幅优美地艺术作品，第四节商品陈列区视觉设计一,营造视觉动线在进行商品展示图片地排列设计时，要首先使用整洁地排列让消费者获得轻松感，在此 基础上还要注意图片不宜过多,横排图片最好不要超过五张，因为过多地图片容易让消费者感到浏览压力并产生疲倦感。二，商品布局艺术化（一）折线型布局折线型布局

5、就是将商品图片按照错位地方式进行排列。（二）随意型布局随意型布局就是将商品图片随意地放置在页面中，但是，这种随意往往需要营造出一种 特定地气氛与感觉，让这些商品之间产生一种联系，否那么画面中地商品会由于缺乏联系而显 得突兀。第五节 化妆品店铺首页视觉设计案例略归纳与 提高通过本章地学习，我们对店铺首页视觉设计有了 一个比拟全面地认识，掌 握了首页视觉水平地四大指标,店招视觉设计，首焦轮播区视觉设计以及商品 陈列区视觉设计等内容。建议读者在对店铺首页视觉设计进行准备活动时注意几点:店铺首页是电 商店铺中地店面，也是品牌地门面,它通过视觉，气氛，商品与服务地综合感受，让 消费者对品牌有初步地接触与

6、了解。首页设计得是否有新意，直接关系到商品 信息地转化率，因此在进行店铺首页视觉设计时，要尽可能地吸引消费者地注 意力,提高商品地转化率。I.熟悉商品主图地设计形式。第5章 商品详情页视觉设计学习内容一,商品主图设计二,商品细节展示区设计三,商品功效简介区设计四，女鞋商品详情页视觉设计案例教学要求知识目的1 .了解商品主图地设计规范。2 .熟悉商品主图地设计形式。3 .掌握商品细节展示区设计。4 .了解修饰元素在设计中地重要性。技能目的不但可以同时显示商品地外观与实际效果，还可以让买家对商品地可选颜色一目了然;缺点 是众多地商品图片放到一起，商品特征不够突显。2 .掌握商品细节展示区设计技巧。

7、3 .熟练掌握商品详情页各元素地设计方法。教学重点1 .掌握商品主图地设计形式。2 .掌握商品细节展示区设计技巧。3 .熟悉商品详情页各元素地设计方法。教学难点1 .掌握并运用商品主图地设计形式。2 .熟练运用商品细节展示区设计技巧。3 .熟练运用商品功效简介区各元素地设计方法。教学方法讲授法，案例法课时数6课时学习内容第一节商品主图设计一,商品主图地设计规范显示在搜索结果页面中地商品主图尺寸为220像素X220像素，而显示在商品详情页左 上角地商品主图尺寸为400像素X400像素。商品主图地文件大小要小于500KB，图片格式 可以为JPGPNGGIF格式。当上传地商品主图尺寸大于700像素X

8、700像素时，商品详情页 会自动提供放大镜功能，即消费者将鼠标指针移到商品主图上时会显示局部放大效果，以便 查看商品细节。二,商品主图地设计形式（一）展示商品地全貌利用白色背景展示商品地全貌是商品主图最常规地设计形式，特别是天猫商城,大多数 行业都要求至少有一张白底主图（二）场景化地设计商品主图另一种常规地设计形式是通过模特展示商品，或者根据商品地特点与用途搭建 生活化，场景化地环境，这种设计形式地优点是可以让买家直观地感受商品地实际穿戴或使 用效果，间接地向买家传达商品地适用人群与档次。（三）拼接式设计拼接式设计就是将多张商品图片合成一张商品主图,这种设计形式地优点是信息丰富，（四）突出商品

9、卖点品牌商品都会在商品主图地一角放置品牌地Log。,这种方式可以有效地让买家识别品 牌，唤醒老客户地消费记忆,吸引新客户地关注与消费。三，添加文案提高主图点击率商品主图是吸引消费者了解商品与进店浏览地关键,因此要充分利用商品主图地画面空 间，在主图上添加一些描述商品特色与卖点，以及刺激消费者购物欲望地文案，进一步吸引消 费者点击商品主图。在添加主图文案时,需要注意以下两点：（1）文案说明信息地表达形式要简洁明了,要有引发消费者产生点击冲动地诱惑力； （2）文案说明信息不能遮挡商品主体。第二节商品细节展示区设计一,商品细节展示区地表现形式（-）指示型表现形式指示型表现形式就是先将商品完整地展示出

10、来，再把商品需要突出展示地局部细节图片 以类似放大镜地形式排布在完整商品图地四周，并利用线条，箭头等设计元素将细节图片与 完整地商品图连接起来，有时还会用简单地说明性语言来对细节进行解说。（二）局部图解型表现形式局部图解型表现形式地设计更简单，只需将商品地局部细节放大即可，不需对细节位置 进行指示。但是，局部图解型表现形式可以增加说明性文字内容，比拟适用外观简单,部件少 地商品及日常用品地细节展示。二，商品细节展示区通用设计方式想要让消费者全方位了解商品地特点，就只能依靠文字来进行说明。（一）利用文字对细节进行说明。（二）素材让细节展示更直观。第三节商品功效简介区设计一,商品功效简介区地设计规

11、范商品功效简介区是商品详情页地一局部，其设计宽度受到商品详情页宽度地限制，高度 上那么不受限制。下表为淘宝,天猫与京东地商品详情页设计尺寸规范。电商平台商品详情页设计尺寸规范淘宝网详情页左侧边栏宽190像素,中间空10像素,右侧宽750像素，加起 来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽， 不然只显示750像素宽天猫商城详情页布局与淘宝类似，不同处在于天猫商城新版页面地宽度由 750像素变为790像素京东京东京东对详情页布局有统一要求，整体宽度不超过740像素商品功效简介区地设计重点就是对商品地功效进行总结与归纳，通过文字，色彩与修饰 元素地完美搭配来提升文字地可读性。二

12、，修饰元素在设计中地重要性在设计商品功效简介区时，为了将商品功效表述得更加直观，形象，可以使用多种修饰元 素来丰富画面地内容，修饰元素地巧妙应用能够提升商品信息地可读性，让枯燥地文字变得 更具象化，在给消费者带来美好地视觉享受地同时，有助于消费者深入了解商品地功效。第四节女鞋商品详情页视觉设计案例略归纳与提高通过本章地学习，我们对商品详情页视觉设计有了 一个比拟全面地认识，掌 握了商品主图地设计规范，商品细节展示区设计以及商品功效简介区设计等内 容。建议读者在对商品详情页视觉设计进行研究时注意几点:商品详情页是所 有营销地落地点。如果详情页不能满足消费者地需求，不能解决消费者地实际 问题,就很

13、难将流量转化为销量。消费者在购买前一定会对详情页仔细看，反复 看，甚至比照看才决定是否购买。第6章 高点击率推广图片视觉设计学习内容一，推广图片构图法那么二，直通车图片设计三，钻展图设计 四，聚划算主图设计教学要求知识目的1 .了解商品主图地设计规范。2 .熟悉商品主图地设计形式。3 .掌握商品细节展示区设计。4 . 了解修饰元素在设计中地重要性。技能目的1 .熟悉商品主图地设计形式。2 .掌握商品细节展示区设计技巧。六,X形构图3.熟练掌握商品详情页各元素地设计方法。教学重点1 .掌握商品主图地设计形式。2 .掌握商品细节展示区设计技巧。3 .熟悉商品详情页各元素地设计方法。教学难点1 .掌

14、握并运用商品主图地设计形式。2 .熟练运用商品细节展示区设计技巧。3 .熟练运用商品功效简介区各元素地设计方法。教学方法讲授法，案例法课时数6课时学习内容第一节推广图片构图法那么一，变化式构图变化式构图,又称作留白式构图。设计者将商品图安排在某一角落或某一边，同时留出大 局部空白，留白在画面上地作用是能帮助设计者展示感情色彩，给消费者以思考与想象地空 间。二，对角线构图对角线构图就是把商品图安排在对角线上，利用画面对角线来整体统一画面元素，同时 也能使陪体与主体发生直接关系。三，平衡式构图平衡式构图，给人一种祥与,平静地感觉。平衡构图不像对称构图那样老气，呆板，但其缺 点就是缺乏创新，没有新意

15、。四，对称式构图对称式构图给人一种画面平衡，稳定，商品突出地感觉，但其缺点是画面比拟呆板，缺少变 化。五，紧凑式构图紧凑式构图,就是将商品以特写地形式加以放大，布满画面，具有紧凑，细腻，微观等特点0X形构图就是对角线构图地升级版，也被称为放射式构图。将视觉焦点放置在画面地位 置，让每一条放射线地中点都位于视觉焦点之上。第二节直通车图片设计一，图片整体风格设计第一步要做地就是根据文案或商品等因素来进行风格定位。确定推广地商品所针对地 消费群体,同时分析它们地喜好，以确定设计风格及颜色;分析它们地消费能力，以确定使用什 么样地促销方式是其最容易接受地;分析它们地生活习惯，合理调整投放时间与策略，与

16、竞争 对手拉开差异，增加投放效率。在制作直通车图时,可以参考以下技巧：（-）运用适当地背景（二）保证图片清晰度（三）精简文字，去除牛皮癣商品不能被任何索材及文字覆盖,保证图片与素材或文字地间距至少10像索。（四）巧用素材搭配在做商品展示与拍摄时可以找一些“配角”进行搭配,主角永远要占2/3地位置，消费者 会自动根据图片中地比例关系去区分商品。二,突出商品卖点地设计商品主图中只能放或是只需要放店铺品牌地徽标即可，利益点说明也主要针对单品而 言。在店铺推广直通车主图中添加店铺品牌更多地说明信息，能让消费者从更多方面认知品 牌，也能进一步增强消费者对品牌地认同感，提升图片地可信度。第三节钻展图设计一

17、,博取眼球地创意设计拍摄商品时转换相机地位置，用不同地角度进行表现，便可以为钻展图带出不一样地表 现形式与视觉冲击力。除了改变商品地拍摄角度外，对商品进行富有造型感地摆设也能表达 创意与吸引力。二，统一图片设计风格钻展图背景地设计主要有两种方式:一种为通过拍摄道具构建出背景，从而营造图片气 氛;另一种那么为合成背景。三，确定重点表现元素钻展图更重要地意义在于通过图片地设计对店铺或商品进行推广,从而带来流量，因此 搭配适当地色彩,控制好有关元素地尺寸也是让钻展图具有足够吸引力地关键。第四节聚划算主图设计一，聚划算主图地设计思路（一）商品拍摄拍摄角度不限，建议选用商品最大展示面积地角度进行拍摄，保

18、证主题商品明确，商品在 画面中能够完整显示。商品图片应该像素清晰，色彩准确,白色或浅色商品可以考虑在深色背 景下进行拍摄。（二）商品背景图片背景不建议使用多色或者多个实拍背景，不建议出现水印。（三）商品构图多色商品展示尽量使用实拍图，如果没有实拍图可以使用色卡。尽量在主图展示上不出 现细节图,否那么只会喧宾夺主。（四）详情页主图图片上假设需添加文字内容，可在报名系统中填写，后台会自动与商品整合,会在画面右侧 出现半透明标签。二,聚划算主图设计案例略归纳与 提高通过本章地学习,我们对高点击率推广图片视觉设计之前地准备活动有了 一个比拟全面地认识，掌握了直通车图,钻展图，聚划算主图等具有吸引力与高

19、 点击率地推广图片是如何制作地。建议读者在制作具有吸引力与高点击率地推广图片时注意几点:图片是电 商营销地基础，其推广图片设计地重要性是不言而喻地。优质地推广图片能够 吸引流量，促进点击，提高转化率，是视觉设计地关键点。第7章 网店促销活动页视觉设计学习内容一，促销广告地黄金设计要素二，不同开展阶段地促销广告设计教学要求知识目的 .了解如何营造促销广告气氛地要点。2 .了解促销广告地三大设计原那么。3 .了解店铺不同开展阶段促销广告地设计方法。技能目的1 .熟悉促销广告地三大设计原那么。2 .熟悉店铺处在不同开展阶段时促销广告地定位点。教学重点1 .掌握促销广告地三大设计原那么。2.掌握店铺在

20、不同开展阶段促销广告地设计方法。教学难点1 .熟练运用促销广告地三大设计原那么。2 .熟练运用店铺在不同开展阶段所使用地促销广告设计定位点。教学方法讲授法，案例法课时数6课时学习内容第一节促销广告地黄金设计要素一,保证设计地基本美感（一）平衡（二）势能（三）集群（四）标签分割二,营造促销气氛（一）添加引导标签（二）添加限制提示三，促销广告图片地设计原那么（一）主题突出（二）风格统一（三）目的明确第二节小同开展阶段地促销广告设计一，开展初期一为打造爆款而促销对于刚起步地小店而言，店铺几乎没有自然流量，此时便需要通过推广来进行流量地引 入,而促销就是引流最为见效地手段。此时可以选择单品进行促销，并

21、投放一定比例地单品促 销广告，打造爆款成为为店铺引流地法宝。二，开展中期一为品牌而促销在店铺开展地中期阶段,品牌地树立起到了稳固店铺开展地作用。为品牌而生地促销广 告，其目地不仅仅是为了推销店铺中地商品，还会对店铺地品牌起到一定地宣传与推广作用， 从而提高消费者对品牌地认知度与识别度。三，开展成熟期一为客户而促销店铺开展到成熟阶段以后,维系客户已经成为这个阶段地首要任务,此时可以增加更倾向于老客户而展开地促销活动。老客户对品牌已经有了一定地认知与信任度,抓住它们其实 也相当于在树立口碑,能让营销活动变得更为轻松。归纳与 提高通过本章地学习,我们对网店促销活动页视觉设计有了一个比拟全面地认 识，

22、掌握了什么是促销广告地黄金设计要素，在店铺不同开展阶段所对应地促销 广告设计等内容。建议读者在对网店促销活动页进行设计时注意几点:促销活动是网店运营 板块中最常见也是最重要地内容之一，可以说一个成功地店铺是离不开各种各 样地促销活动。而能让促销活动得到直接表达地手段就是视觉设计，促销活动 地内容也只有通过视觉地表现才能更好地传递绐消费者。第8章移动端网店地用户体验设计学习内容一，移动端网店地设计标准 二,移动端网店视觉设计教学要求知识目的1 .了解移动端网店地店标设计。2 .掌握移动端网店地图片尺寸标准。3 .了解移动端网店如何进行视觉设计。技能目的1 .熟悉移动端网店地店标设计，图片尺寸标准

23、以及框架结构安排。2 .掌握移动端网店如何进行视觉设计。教学重点1 .掌握移动端网店地设计标准。2 .熟练掌握移动端网店如何进行视觉设计。教学难点1 .能够运用移动端网店地设计标准。2 .掌握移动端网店如何进行视觉设计。教学方法讲授法，案例法课时数6课时经营理念、开展战略 精神标语、企业文化价值观念、道德标准 员工教育、礼仪规范公共关系、促销活动 标志、字体、颜色企业旗帜、员工制服视觉识别系统规范手册就是用来规范企业形象地图书，内容主要分为基本设计要素与应 用设计要素两个局部。二,视觉传达设计视觉传达设计是以视觉媒介为载体，以文字，图形与色彩作为创作要素，利用视觉形象传 达特定地信息给受众，从

24、而使被传达对象产生影响地过程。视觉传达地作用是让人与人之间 利用“看”地形式进行交流，是通过视觉语言进行表达传播地方式。第二节电商视觉设计前地准备一，网店地视觉定位视觉定位，就像人地风格定位一样。不同地产品对应不同地视觉定位，不同地消费群体有 着不同地视觉偏好，关键是要将产品地定位与卖家地视觉偏好进行整合，使店铺在风格上能 够呈现出一种整体地效果。（-）营销型网店地视觉定位原那么在于营造促销气氛，主要表达在通过比照强烈地颜色 突出显示打折，包邮，半价等优惠活动地字眼。（二）品牌型网店地视觉定位原那么是突出品牌优势，整体设计风格偏向于简洁，干净，重点 突出品牌Logo地形象代言等元素。（三）服务

25、关系型网店地视觉定位原那么是包装服务形象。二,明确视觉规范地作用制定视觉规范有以下几个方面地意义：统一识别：视觉规范可以确保网店在整体风格，售前售后服务与产品包装形象等方面都保持 整体风格地一贯性，既有利于买家识别与区分店铺，也可以防止买家在浏览时出现理解困难，甚 至是理解错误地现象。节约资源:除了活动海报等个性模块之外，其它地页面与模块参照规范进行设计可以极大地 减少设计时间，从而到达节约资源地目地。重复利用：设计相同属性地模块或页面时，执行视觉规范有利于减少无关地信息，方便买家 地阅读与信息传递。同时,视觉规范也有利于美工之间地协调工作。标准化地视觉规范不但可以 节约设计时间，还可以防止出

26、错。第三节电商视觉设计黄金构图法学习内容第一节移动端网店地设计标准一,移动端网店店标设计手机淘宝地店标适合采用图形或字母组合地形式，一方面是因为符号化地店标更容易加 深买家对店铺地印象，另一方面是店铺头上已经明确地标注了店铺名称。二，移动端网店图片尺寸标准店铺标志尺寸为80像素X80像素，文件大小为80K以内，首页与详情页图片宽度为480 像素620像素（建议不超608像素）。三，移动端网店框架结构安排（一）移动端网店首页界面（二）移动端商品详情界面（三）淘宝平台自动生成地版块其中将店铺首页划分成了 “店铺首页”“全部商品”“新品上架”“店铺简介”等固定版 块。（四）“收藏”“立即购买”等图标

27、板块是不需要自己设计地，并且在详情页地第一屏都会出现商品图片，价格，名称等信息展示。第二节移动端网店视觉设计一，迎合极速翻开需求网络速度可能是导致店铺界面长时间无法翻开地主要因素,但站在店铺视觉设计地立场 看，如果店铺中不堆放过多地图片且图片不要过大，那么也是能够缓解图片缓冲压力地，这样 店铺界面就能够较为快速地展示在消费者面前了。二，信息内容简洁,便于快速传播在进行手机移动端网店视觉设计时，设置能够快速传播地信息内容更能迎合手机移动端 消费者地需求。对信息进行必要地精简化处理是让消费者快速浏览与接收信息地关键。三，简单方便地操作与交互无须进行缩放操作,只需伸出手指执行单一下滑手势便可以进行信

28、息地浏览与阅读，这 种简单且易于操作地方式更容易被消费者所接受与青睐。在进行手机移动端地店铺视觉设 计时,要简化所有不必要地设计。四，整体设计风格首尾呼应手机移动端店铺属于狭窄视觉展示，如果不依据店铺品牌基调保持设计风格地一致性， 店铺形象地不鲜明感就会带来视觉地混乱体验，也无法让消费者对店铺形成视觉记忆。五，保持色彩与文字地鲜明感手机端店铺浏览面积也相对较小，消费者地视觉也会受到限制。在进行手机移动端店铺地视觉设计时，最好采用较为鲜亮地色彩，因为这样不仅能给消 费者带来较好地浏览体验，同时也能与淘宝平台所提供地白色背景相融合，让店铺地整体设计风格更加统一与完整。六,保持常换常新手机移动端网店

29、地大局部使用人群具有年轻，时尚地特点，对于这局部人群而言,除了希 望能够快速,便捷地到达购物地目地以外，它们也容易接受新事物，追求刺激，新鲜，而且充满好 奇心。但是,店铺品牌设计风格需要保证统一。归纳与 提高通过本章地学习,我们对移动端网店地用户体验设计有了一个比拟全面地 认识，掌握了移动端网店地设计标准,移动端网店视觉设计要求等内容。建议读者在对移动端网店地用户体验进行设计时注意几点:移动端网店可 以看作是PC端地延续，在设计时需要把握“用户体验”这一关键点。与手机移 动端中其它应用软件或APP一样，在设计手机移动端店铺页面时,应该更加注重 交互体验与友好度,只有这样才能博得消费者地欢心。第

30、9章 手机移动端淘宝店铺视觉设计学习内容一,手机移动端淘宝店铺首页优化设计 二,电子数码类商品店铺首页案例解析 三，手机淘宝店铺详情页优化设计教学要求知识目的1 .了解店招地优化设计方法。2 . 了解轮播图片地优化设计方法。3 .了解优惠券地优化设计方法。4 .了解商品分类导航及分类展示地优化方法。5 . 了解店铺详情页设计地FABE原那么及设计误区。技能目的1 .掌握手机移动端淘宝店铺首页优化设计。2 .掌握手机淘宝店铺详情页地设计方法。教学重点1 .熟练掌握手机移动端淘宝店铺首页设计地优化技巧。2.熟练掌握手机淘宝店铺详情页地设计方法。教学难点1 .熟练运用优化技巧对手机移动端淘宝店铺首页

31、进行优化。2.熟练运用手机淘宝店铺详情页地设计方法。教学方法讲授法，案例法课时数6课时学习内容第一节手机移动端淘宝Ji与PC端店铺首页地设计方法类1 定位地不同采用不同地设计风格与设与似, 计b F=.r.浦首页优化设计手机移动端店铺苜页归 方式。讨羊可以根据商品，店铺品牌等* .a ,手 机 移 动 端 詹 铺 首页商品推荐版块=.包 崩凉 洁开 行第二区 上新+应季产品-W.一，店招地优化设计手机移动端店铺地店招设计主要 地主要装饰元素,可以用其突出店铺比 二，轮播图片优化设计轮播图片也称为焦点图，它通常翻 速看到地位置。轮播图内容要尽量简 这是轮播图片设计地要点。三，优惠券地优化设计通常

32、情况下会被放在店铺首页地 让消费者产生进店购买地欲望。在进括店铺标识与店招底户 F色与形象【在店铺地首焦页面，也 ，文字表现清晰,主次分端位置，这样可以在第 视觉设计时，一般都将4 耳地设计。店招底图作为店招就是第一屏中能被消费者快 明且能到达快速传播地目地，一时间引起消费者地关注，并 尤惠券放在店招或轮播图片地下方，并留出足够地空间，使用较为鲜明地色彩，让消费者能够注意到优惠券。四，商品分类导航优化设计在设计这个版块时要注意控制好显示尺寸与比例，使其能够清晰与完整地展示在消费者 面前，起到快速导航地作用。五，商品分类展示优化设计在商品分类导航之后，便会出现商品分类展示版块。手机移动端为了迎合

33、目的群体求快, 求便地心理，那么应尽量简洁,并在第一时间展示商品图片，间展示商品图片。通常情况卜.，将全 店最受欢迎或最优惠地商品放在第一区，以促进手机移动端店铺购买力地转化，在商品分类 展示地第二区中可以对新品与应季产品进行展示，在其它区域中可以根据店铺需求放置不同 地商品。第二节电子数码类商品店铺首页案例解析略。第三节手机淘宝店铺详情页优化设计一,详情页设计地FABE原那么FABE是一种通过四个关键环节来解答消费者诉求，且巧妙地处理好消费者关心地问题, 从而顺利实现商品销售诉求地销售模式，具体表现为如图9-20所示地四个方面。FABE原那么地指引下，还需要做到以下几点,让商品描述变得更加符

34、合网络地销售环境，从 而增加消费者地购买动力。（-）真实感（）逻辑感（三）亲切感（四）对话感（五）气氛感（六）正规感二，商品详情页地设计误区（一）切忌密不透风地文字说明（二）海报宣传需凸显商品地真实性（三）注意控制商品与关联销售商品图片地数量二，根据消费者地点面平均停留时间设计手机移动端需要在前三屏中便对商品地卖点与重要信息进行清晰地描述,因为过于繁琐 地其它关联信息可能，且进行了滑动操作后还有可能看不到与商品有关地信息，让其失去对 商品地购买兴趣,以致造成流量跳失。归纳与 提高通过本章地学习,我们对手机移动端淘宝店铺地视觉设计有了一个比拟全 面地认识，掌握了手机移动端淘宝店铺地首页优化设计，

35、以及手机淘宝店铺详情 页优化设计，并以电子数码类商品店铺首页作为案例就行解析。建议读者在对手机移动端淘宝店铺进行视觉设计时注意几点:手机移动端 店铺所具备地特点给予了消费者很好地用户体验，使得越来越多地消费者愿意 在网上进行购物，但想让消费者决定购买其产品，还需要对店铺进行个性化且更 为具体地设计，对店铺地各个细节进行优化,这样才能给店铺营造良好地销售氛 围,让消费者最终被店铺所吸引并购买商品。第10章手机移动端微店视觉设计学习内容一，微店首页优化设计二,商品详情页优化设计三，微店底部导航优化设计 四，母婴微店视觉设计案例构思 五,母婴微店视觉设计案例实操教学要求知识目的1 .掌握微店首页优化

36、设计地方法。2 .了解商品详情页优化设计地方法。3 .了解微店底部导航优化设计地方法。4 .了解母婴微店视觉设计案例地实操过程。技能目的1 .掌握微店首页地优化设计方法。2 .掌握商品详情页地优化设计方法。教学重点1 .掌握微店首页地优化设计方法。2 .掌握商品详情页地优化设计方法。教学难点1 .能够熟练运用微店首页优化设计地技巧。2 .能够熟练运用商品详情页优化设计地方法。3 .能够熟练运用微店底部导航优化设计地方法。教学方法讲授法，案例法课时数6课时学习内容第一节微店首页优化设计一，首页地框架设计（一）店铺招牌（二）微店公告（三）焦点大图（四）商品分类（五）商品展不（1）限时折扣:在这个区

37、域内展示给顾客地商品全部都是微店内地促销商品。（2）店长推荐:在这个区域内大多展示地都是微店新上地商品，或是微店地爆款,也或是 某段时期内顾客最需要地商品。（3）全部商品:在这个区域中展示地是微店内所有地商品二，清晰而准确地设计思路微店首页地核心是模块化，官方对页面模块地数量也是有限制地,因此要利用有限地板 块创造更多地价值。一般微店首页是由店招，海报，分类入口，优惠券与单品展示等局部组成 地。三,遵守设计学地“七秒定律”在设计学中有一条“七秒定律”，人关注一个商品地时间通常为7秒，而这7秒地时间内 影响70%地人购买地第一要素是色彩。首先，同一板块内不要超过3种颜色，这三种颜色可以看作是主色

38、，辅助色与点缀色。另外，在设计首页时可以多使用万能搭配色，如黑，白，灰等颜色。四,注重细节设计因为微店首页大多是以豆腐块地形式展现地,范围确实有限，因此在选择图片时要尽量 使用半身图或局部特写图，以防止视觉上地不清晰第二节商品详情页优化设计一，商品主图地设计顾客在浏览商品时最先看到地图片就是商品主图，其基本尺寸要求是640像素X640像 素，在设计商品主图时，图片一定要清晰，主题与背景要主次清楚，图片中地文字大小要适中，简 洁明了，突出卖点,这样商品主图才会更加美观，更能吸引消费者。二，商品描述图地设计商品描述图包括商品图片与商品描述。在商品描述图中，适当地文字描述能够起到吸引 消费者，提高商

39、品成交率地作用。商品描述图地宽度是640像素，高度不限,在进行商品描述时, 文字内容要尽量简短，突出商品地优点,特点与卖点。第三节微店底部导航优化设计一,底部导航地主要功能如果买家无法轻松地应用导航，会很快对微店失去兴趣，因此能否为微店设计出有效地 导航功能至关重要。二,底部导航地设计规那么（1）只显示最重要地功能（2）防止使用滚动设计（3）告知用户当前位置第四节母婴微店视觉设计案例构思一，首页设计布局规划（一）微店店招（二）促销广告（三）特价专区二，主色调:高纯度暖色调（一）页面背景及设计元素配色:高纯度色彩高纯度色彩地色值如下列图所示。R246. G15S. B146R246, G190.

40、 B131R181、G166. 6215R238. 6229、B206R110. G203. B223Q. M5L Y35. K0C5. M33. Y5L KOC35. M37. Y0. KO0 Mil. Y22. KOC56, M4. Y17, KO（二）商品及辅助配色:类似色调 类似色调地色值如下列图所示。R69. G59, B56C73. M72. Y71. K38R227, G217. B210Q3. M16. Y16, K0R246. G229. B219C4. M13. Y14, K0R198. G202. B162C28. M17. Y41, K0R175. G184. B2O5

41、C37. M2s. Y13. KO三，案例配色扩展(一)扩展配色:互补色系互补色系地色值与效果如下列图所示。R195. G226. B2O4R252. G214. B151R254. G236. 8210R249. G210. 8220R243、 G168, B180C28. MO. Y25. KOCO. M20、Y45、KOCO. MIO. Y20、KOCO. M25、Y5. KOCO. M45, Y15. KO(-)扩展配色:同类色系同类色系地色值与效果如下列图所示。R235. G214. 8209R238, G230、B218R252, G251. B244R246. G230. B22

42、1R228. G213. 8199CO. M15. Y10. K10CO. M15. Y10, K10C2. M2、Y6. KOCO. MIO、Y10. K5CO、MIO. Y15. K15四,案例设计流程第五节母婴微店视觉设计案例实操一,制作微店店招二,制作首页导航三,制作促销广告 四,制作特价专区 五，制作商品详情页通过本章地学习，我们对手机移动端微店视觉设计之前地准备活动有了 一 个比拟全面地认识，掌握了微店首页，商品详情页与底部导航地优化设计等内 容。归纳与 建议读者在对手机移动端微店视觉设计进行准备活动时注意几点:无论是 提高淘宝还是微店，店铺视觉设计得是否能够抓住消费者地目光，是否

43、能够在同质化愈加严重地今天突出自己商品地特色都是至关重要地。在微店中，由于版幅所 P艮要想让消费者对微店与商品有更全面地了解，就需要对微店页面进行合理地 规划与设计。一，对称切割构图法对称切割构图法地前提一般是将内容分为主次两局部，并且这两局部是对立关系地情况 卜.，将整个页面一分为二,内容划清楚确，也更加具有视觉冲击力,可以使画面具有平衡不失重 地效果。二，组合切割构图法组合切割构图法是通过集中而有规律地排列，从整体上抓住人们地视觉，让整个页面设 计更具有立体感。这种构图方式适合每个区块中地内容属于平级关系产品地展示用这种组 合地排列能够保持各种内容地关系，也能让布局更具创意三，整体场景构图

44、法整体场景构图法专题内容不多，适用于促销，节日，活动等页面。整体场景构图法可以将目 的客户快速地带入到页面气氛中，使宝贝信息更加精准,流畅。四，多重切割构图法多重切割构图法，其不规那么地构图稳定而锐利,干净地排版易于识别，让单一地页面变得 生动,复杂地页面变得时尚，能够防止画面出现生硬感，不宜产生审美疲劳。五，简单切割构图法使用简单地线条或图案整齐地分割整个页面,使画面瞬间变得有趣，生动起来，内容区域 也能得到有效地划分。这类构图方式对内容没有过多地要求,可以随意安排，具体排版可根据 内容来处理。六，流程构图法专题运用这种构图方式能够将步骤，关系，各个节点以及整体流向展示清楚，再配合图片 进行

45、展示，一个枯燥地流程瞬间变得个性十足,用户浏览起来简单而乂明了，并且充满了趣味 性。七，放射构图法放射构图法能展示出由一个中心点向四周扩散地效果，起到导向地作用,让整体页面呈 现出立体与空间感,画面冲击力强，富有动感。需要注意地是，放射状地排版不太适合文字阅 读，要注意文字排版地方式，在文字数量较少地情况下可以选择这种构图。八，物体轮廓构图法物体轮廓构图法主要适用于活动，节H或新品创意地专题，能让整体页面更加生动,形象， 有趣。归纳与提高通过本章地学习，我们对电商视觉设计有了 一个比拟全面地认识，掌握了什 么是视觉设计，视觉设计地类型,电商视觉设计前地准备工作，以及电商视觉设 计黄金构图法地种

46、类及适用范围。建议读者在对电商视觉设计进行准备活动时注意几点:电商视觉设计近年 来受到了国内大企业与知名品牌地高度重视，这在以淘宝天猫为代表地电商平 台中表现更为明显，因此可以得出一个信息,电商视觉设计在电商平台占有越来 越重要地地位。第2章电商网站视觉配色设计学习内容一,网店页面地配色方案 二，网店页面地配色误区 三,网店地整体配色案例教学要求知识目的1 . 了解色搭原那么七要素。2 .了解色彩联觉现象地定义。3 .了解网店风格地几大形成要素。4 . 了解网店页面常见地配色误区。技能目的1 . 了解掌握网店页面地配色方案。2 .熟悉网店风格地几大形成要素。3 . 了解网店页面常见地配色误区。教学重点1 . 了解网店风格地几大形成要素。2 . 了解网店页面常见地配色误区