（中职）网店装修（第二版）学习情境六 课件.pptx

《（中职）网店装修（第二版）学习情境六 课件.pptx》由会员分享，可在线阅读，更多相关《（中职）网店装修（第二版）学习情境六 课件.pptx（92页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网店装修 课前导学知识探究流程计划设计决策任务实施同步实训实训笔记任务一 自定义页面策划学习情境六学习任务情境总结知识拓展拓展训练2 学习目标任务单情境导入设计决策任务实施同步实训实训笔记2 流程计划知识探究课前导学课前导学快节奏的网络生活带我们进入了“互联网读图时代”，一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意来展示店铺的独特性。同时，网店自定义页面对促进消费者下单购买起着尤为关键的作用。学习任务情境总结知识拓展拓展训练3 学习目标任务单情境导入设计决策任务实施同步实训实

2、训笔记3 流程计划知识探究课前导学课前导学 表6-1 任务单任务指派人任务指派人陈明陈明发出日期发出日期10.8完成日期/时间10.10任务名称任务名称年货节活动无线端自定义页面制作任务要求任务要求有明确细文档列明要求/路径其他：任务用途任务用途首页主题独立页官方承接页主图直通车图钻展图详情基础优化详情深度优化官方引流图主题广告图新品上新常规活动营销策划主题活动策划大型活动策划商品运营策划其他：自我检查自我检查确认签名组长检查组长检查确认签名验收人验收人按要求完成是否确认签名细文档：由于年货节活动即将到来，设计部主管陈明发出一任务单（见表6-1），要求制作年货节活动的自定义页面。具体要求：1、

3、整体要求：（1）活动主题醒目，排版美观，视觉冲击力强，大气上档次，让消费者有信任感。（2）页面逻辑清晰，优惠信息明显，发挥引导购买作用。2、营销策略：（1）优惠券：满50减5元，满100减10元，满300减50元；（2）前2名免单商品：抽纸、保温玻璃杯；（3）五折抢购商品：牙膏、纸巾筒、纸巾盒、洗发水；（4）八折回馈商品：饭盒、纸手帕、洗脸毛巾、玻璃杯、筷子套装、洗洁精。学习任务情境总结知识拓展拓展训练4 学习目标任务单情境导入设计决策任务实施同步实训实训笔记4 流程计划知识探究课前导学课前导学1、知识目标知识目标2、技能目标技能目标掌握网店自定义页面的设计流程能够独立完成网店自定义页面设计

4、了解自定义页面装修的基础理论知识掌握自定义页面的设计方法掌握自定义页面的上传方法学习任务情境总结知识拓展拓展训练5 学习目标任务单情境导入设计决策任务实施同步实训实训笔记5 流程计划知识探究课前导学知识探究图1-1某化妆品店铺首页1图1-2某化妆品店铺首页21、某化妆品店铺首页1，第一感觉是数码电器类店铺的装修风格，而对于化妆品店，就应选干净、清爽的配色，这样的黑色显不出高端反而有点压抑。2、某化妆品店铺首页2，装修以浅色系为主，配色清新、自然，对化妆品类目来说，这种清爽、干净的装修风格更能凸显化妆品的商品定位。所以说一个好的店铺装修，是一种营销，一种推广。差的店铺装修效果，无论多么名贵的商品

5、都体现不出商品的价值。自定义页面的主要类型认识网店自定义页面自定义页面的作用学习任务情境总结知识拓展拓展训练6 学习目标任务单情境导入设计决策任务实施同步实训实训笔记6 流程计划知识探究课前导学知识探究引入网店首页导航里除了一般的产品分类之外，还有一些“特别”的页面导航，这是属于什么页面呢？自定义页面策划任务一学习任务情境总结知识拓展拓展训练7 学习目标任务单情境导入设计决策任务实施同步实训实训笔记7 流程计划知识探究课前导学知识探究认识网店自定义页面自定义页面策划任务一自定义页面又称二级页面，是网店装修中的一个独立页面，目前电脑端和无线端的网店装修后台均可根据需求增添数量不限的自定义页面。自

6、定义页面是卖家围绕某个主题焦点的一个内容聚合页，一般是文案、图片、视频等多种组合优化美观后的页面，再配合商品详情信息、活动优惠信息等链接，继而增加页面的访问深度，也起到页面关联和购物引导的作用。如右图所示（得力官方旗舰店与颐和园合作的产品专题页面）。学习任务情境总结知识拓展拓展训练8 学习目标任务单情境导入设计决策任务实施同步实训实训笔记8 流程计划知识探究课前导学知识探究自定义页面的主要类型自定义页面策划任务一1）活动专题页面 在电子商务时代，一年中几乎有三分之二的时间卖家都在推出各种各样的网店促销活动。为了吸引消费者的注意力和兴趣，增加消费者的参与感，卖家通常会设计制作活动专题页面。活动专

7、题页面是卖家围绕网店促销活动的主题，结合店内的优惠信息以图文组合形式给消费者详细地展示促销详细内容的页面。活动专题页面设计常以鲜艳夺目的配色、别具一格的排版设计来制造紧张的营销气氛，从而提高消费者的关注度。学习任务情境总结知识拓展拓展训练9 学习目标任务单情境导入设计决策任务实施同步实训实训笔记9 流程计划知识探究课前导学知识探究自定义页面策划任务一2）品牌介绍页面 为了消除消费者的购买疑虑、提高消费者的信任感，卖家会添加品牌介绍页面来传播企业精神和品牌文化，从而提高品牌信服力，树立良好的企业形象，让消费者觉得品牌质量可靠，使店铺取得消费者心底里的认可。品牌介绍页的内容基本包含以下几个模块。品

8、牌价值 品牌价值是品牌管理要素中最为核心的部分，是品牌区别于同类竞争品牌的重要标志，也是品牌在需求者心目中的综合形象包括品牌的属性、品质、个性、档次、文化等，代表着该品牌可以为消费者带来的价值。展示传播品牌价值可以让消费者认为物有所值。学习任务情境总结知识拓展拓展训练10 学习目标任务单情境导入设计决策任务实施同步实训实训笔记10 流程计划知识探究课前导学知识探究自定义页面策划任务一品牌故事 品牌的产生以及过程就是品牌故事。好的品牌故事是消费者和品牌之间的情感切入点，给予品牌精神内涵，使得消费者受到品牌感染，从而全力激发消费者的潜在购买意识，并使消费者愿意“从一而终”地作出购买行为。学习任务情

9、境总结知识拓展拓展训练11 学习目标任务单情境导入设计决策任务实施同步实训实训笔记11 流程计划知识探究课前导学知识探究自定义页面策划任务一品牌背书 品牌为了增强其在市场上的承诺强度，通常还会借用第三方的信誉，然后第三方以一种明示或者暗示的方式来对原先品牌的消费承诺作出再一次的确认和肯定。通过品牌背书与消费者建立一种可持续的、可信任的品牌关联，从而烘托品牌实力，提升消费者对店铺的信任度和提高店铺的转化率。学习任务情境总结知识拓展拓展训练12 学习目标任务单情境导入设计决策任务实施同步实训实训笔记12 流程计划知识探究课前导学知识探究自定义页面策划任务一品牌愿景 品牌愿景就是品牌拥有的组织所共同

10、持有的品牌意象或景象，它表达了品牌的未来蓝图和终极目标，明确告知消费者品牌今天代表什么以及明天代表什么，突出企业对消费者的长期承诺。卖家通过展示品牌愿景，给消费者展示企业对产品和服务的用心与努力，使得消费者相信企业的产品，从而放心地购买该品牌的产品。学习任务情境总结知识拓展拓展训练13 学习目标任务单情境导入设计决策任务实施同步实训实训笔记13 流程计划知识探究课前导学知识探究自定义页面策划任务一3）会员活动页面 会员活动页面是向消费者介绍会员积分的价值，展现会员权益活动内容的页面。卖家常常定期推出会员权益活动，主要目的是增加会员活动度，提高会员忠诚度，激发会员购买欲望，同时吸引新的消费者加入

11、会员，引导新会员参与，以此提升店铺转化。学习任务情境总结知识拓展拓展训练14 学习目标任务单情境导入设计决策任务实施同步实训实训笔记14 流程计划知识探究课前导学知识探究自定义页面策划任务一4）售后服务页面 售后服务页面是向消费者展示网店的发货收货服务、退换货服务、安装服务、保修维修服务等一系列细致售后服务信息的页面。展示温馨的售后服务体系，就是给消费者保证店铺会全力地解决售后问题，无论是退换货，还是安装维修等，店铺都会做到及时迅捷，服务到位，热情规范，让消费者满意。一套完整的售后服务体系不仅可以体现店铺的综合实力，还能让消费者放心购买店铺的商品。学习任务情境总结知识拓展拓展训练15 学习目标

12、任务单情境导入设计决策任务实施同步实训实训笔记15 流程计划知识探究课前导学知识探究详情页策划任务一自定义页面的作用1）加深消费者访问深度 正常经营的网店每天都会引导一定的流量到店，但到店的流量能有多少访问深度才是卖家最为关注的焦点。为了能满足已到店消费者的不同需求，卖家需要通过规划好网店首页与自定义页面之间的联系，从而增加消费者的停留时间。以某旗舰店“春季火拼周活动”期间的无线端网店页面构造为例，消费者从首页海报进入“春季火拼周”聚划算活动专题页面后，再根据各自的需求分别进入新的二级页面：产品展示页面和抽奖活动专题页面。通过这些页面可以看出该店铺充分地规划页面之间的关联，疏导引流，满足不同消

13、费者的需求，从而降低了店铺跳失率且加深了消费者的访问深度。学习任务情境总结知识拓展拓展训练16 学习目标任务单情境导入设计决策任务实施同步实训实训笔记16 流程计划知识探究课前导学知识探究自定义页面策划任务一2）提高店铺转化率 生活在互联网快时代中，人们的喜好变化来得越来越快，为了获得消费者的关注，卖家会定期设计各种主题的活动专题页面，通过有效的视觉设计，突出优惠力度，促使消费者下单，进而提升店铺的转化率。品牌介绍页面和售后服务页面虽然没有促销的紧迫感，但却起到塑造良好的企业品牌形象和让消费者感受到贴心售后服务的作用，从而提升了消费者对企业的好感度，打消消费者购买疑虑，也是有利于店铺的转化。3

14、）提升消费者粘度 店铺回头率是影响店铺权重的重要因素之一，所以卖家都十分关注会员关系维护。为了促进会员频繁光顾，卖家可以实行会员等级制度，定期推出VIP会员活动。利用会员活动页面推广宣传店铺会员福利，不但能吸引越来越多的新消费者成为店铺会员，也可以大大地增加会员复购率，从而提升消费者粘度。学习任务情境总结知识拓展拓展训练17 学习目标任务单情境导入设计决策任务实施同步实训实训笔记17 流程计划知识探究课前导学知识探究自定义页面的布局学习任务情境总结知识拓展拓展训练18 学习目标任务单情境导入设计决策任务实施同步实训实训笔记18 流程计划知识探究课前导学知识探究引入请同学们翻出上节课所搜索到的自

15、定义页面，说说这些页面的布局是怎样的？自定义页面策划任务一学习任务情境总结知识拓展拓展训练19 学习目标任务单情境导入设计决策任务实施同步实训实训笔记19 流程计划知识探究课前导学知识探究自定义页面策划任务一 为了保证自定义页面可以吸引消费者一直逛下去，并唤起其购买欲，卖家在策划自定义页面时必须保证页面视觉表现形式的合理性。虽然现在很多店铺的自定义页面呈现出各种别具风格的样式，但实际上它们的基本框架和组成部分都是有共性的。一般来说，无论是哪种类型的自定义页面都由四大部分组成：头部Banner图+楼层模块（至少一个）+背景+氛围点缀物自定义页面的布局学习任务情境总结知识拓展拓展训练20 学习目标

16、任务单情境导入设计决策任务实施同步实训实训笔记20 流程计划知识探究课前导学知识探究 其中，“楼层模块”的数量是根据网店的运营方案内容来确定。以某店铺电脑端“双旦礼遇季”活动专题页面为例，其布局为：双旦礼遇季Banner图优惠券楼层模块活动主推产品楼层模块明星单品楼层模块。再看看某店铺无线端会员活动页，其布局为：会员日Banner图会员分享抽奖活动楼层模块。故自定义页面布局中的楼层模块没有数量的硬性要求，只要能满足页面信息的传达，给予消费者良好的体验感即可。自定义页面策划任务一学习任务情境总结知识拓展拓展训练21 学习目标任务单情境导入设计决策任务实施同步实训实训笔记21 流程计划知识探究课前

17、导学流程计划通过对任务的分析及自定义页面策划的学习，制定自定义页面策划计划如下：自定义页面策划任务一确定自定义页面类型明确自定义页面主题分析优秀自定义页面撰写自定义页面策划方案学习任务情境总结知识拓展拓展训练22 学习目标任务单情境导入设计决策任务实施同步实训实训笔记22 流程计划知识探究课前导学设计决策一、确定自定义页面类型本次任务是为店铺推广宣传的“年货节”促销活动设计自定义页面，根据自定义页面的类型定义，可确定该页面为活动专题页面类型。自定义页面策划任务一学习任务情境总结知识拓展拓展训练23 学习目标任务单情境导入设计决策任务实施同步实训实训笔记23 流程计划知识探究课前导学设计决策二、

18、明确自定义页面主题仔细分析年货节活动营销策划方案，页面主题是围绕年货节促销活动开展的，故“年货节”为主题核心。为了让页面的主题标语更打动人心，可以结合店铺产品属性进行构思，该店铺是一家专营生活日用品的网店，所以最后确定自定义页面的主题为“年货家居好礼购”。自定义页面策划任务一学习任务情境总结知识拓展拓展训练24 学习目标任务单情境导入设计决策任务实施同步实训实训笔记24 流程计划知识探究课前导学设计决策三、分析优秀自定义页面分析知名电商网店的优秀自定义页面，了解其活动专题页面的布局，为自定义页面方案策划做好前提准备。自定义页面策划任务一学习任务情境总结知识拓展拓展训练25 学习目标任务单情境导

19、入设计决策任务实施同步实训实训笔记25 流程计划知识探究课前导学设计决策四、撰写自定义页面策划方案根据自定义页面的布局组成要求，在撰写策划方案前需明确楼层模块的数量以及内容。结合本次自定义页面的任务单内容，可确定该页面布局中的楼层模块共四个，分别为：优惠券模块、免单商品模块、五折抢购模块、八折回馈模块。自定义页面策划任务一学习任务情境总结知识拓展拓展训练26 学习目标任务单情境导入设计决策任务实施同步实训实训笔记26 流程计划知识探究课前导学任务实施使用Excel策划出如下“YIMI生活日用品店年货节活动自定义页面策划书”。详情页策划任务一1、打开Excel，新建文档，文件名为“YIMI生活日

20、用品店年货节活动自定义页面策划书”。2、输入自定义页面的策划内容。3、保存文档。学习任务情境总结知识拓展拓展训练27 学习目标任务单情境导入设计决策任务实施同步实训实训笔记27 流程计划知识探究课前导学同步实训学习任务情境总结知识拓展拓展训练28 学习目标任务单情境导入设计决策任务实施同步实训实训笔记28 流程计划知识探究课前导学实训笔记记录学习过程和任务实施中的重要知识点及所需要用到的应用资源、以及那些老师指导任务时提出的要点知识要点/学习问题知识点的具体解释/学习应用资源/老师指导任务要点1、2、3、网店装修 课前导学知识探究流程计划设计决策任务实施同步实训实训笔记任务二 自定义页面设计学

21、习情境六学习任务情境总结知识拓展拓展训练30 学习目标任务单情境导入设计决策任务实施同步实训实训笔记30 流程计划知识探究课前导学知识探究图1-1某化妆品店铺首页1图1-2某化妆品店铺首页21、某化妆品店铺首页1，第一感觉是数码电器类店铺的装修风格，而对于化妆品店，就应选干净、清爽的配色，这样的黑色显不出高端反而有点压抑。2、某化妆品店铺首页2，装修以浅色系为主，配色清新、自然，对化妆品类目来说，这种清爽、干净的装修风格更能凸显化妆品的商品定位。所以说一个好的店铺装修，是一种营销，一种推广。差的店铺装修效果，无论多么名贵的商品都体现不出商品的价值。自定义页面的设计原则自定义页面的常见尺寸自定义

22、页面的色彩搭配学习任务情境总结知识拓展拓展训练31 学习目标任务单情境导入设计决策任务实施同步实训实训笔记31 流程计划知识探究课前导学知识探究自定义页面设计任务二请同学们谈谈这张自定义页面设计优秀的地方在哪里？为什么？引入学习任务情境总结知识拓展拓展训练32 学习目标任务单情境导入设计决策任务实施同步实训实训笔记32 流程计划知识探究课前导学知识探究自定义页面设计任务二自定义页面的常见尺寸由于电脑和手机的屏幕大小不同，电脑端和无线端的自定义页面尺寸有所不同。1）电脑端自定义页面的尺寸宽：950px/1920px高：3000px6000px（仅建议，具体根据页面内容决定）2）无线端自定义页面的

23、尺寸宽：640px/750px（根据无线端装修后台的不同模块尺寸限制决定）高：1500px5000px（仅建议，具体根据页面内容决定）学习任务情境总结知识拓展拓展训练33 学习目标任务单情境导入设计决策任务实施同步实训实训笔记33 流程计划知识探究课前导学知识探究1）首尾呼应 在设计自定义页面时基本都是从上往下、从框架搭建到细化细节的流程顺序进行的。在这个过程中，需要至少一个的主要元素贯穿整体页面。这里是指页面头部和尾部的元素要做到首尾呼应，从而构成整张自定义页面的视觉焦点。如图右图所示，该页面头部Banner图和尾部都利用了“绿叶”元素，实现页面的首尾呼应，使得页面看起来更整体。自定义页面设

24、计任务二自定义页面的设计原则学习任务情境总结知识拓展拓展训练34 学习目标任务单情境导入设计决策任务实施同步实训实训笔记34 流程计划知识探究课前导学知识探究2）协调统一 保持页面视觉统一有利于店铺在消费者心里和脑袋里建立印象，避免被消费者遗忘。所谓的页面协调统一，是指只要保证页面里的模特、文案、点缀物、各种颜色、布局排版以及所有这些元素汇聚在一起所组成的是同一种风格，从而达成视觉协调统一的目的。自定义页面设计任务二学习任务情境总结知识拓展拓展训练35 学习目标任务单情境导入设计决策任务实施同步实训实训笔记35 流程计划知识探究课前导学知识探究自定义页面设计任务二3)层次分明 自定义页面的层次

25、主要涉及两个方面的层次，一方面是信息的层次级别有主次之分，如从头部Banner图到楼层模块内容信息部分的层次级别，一目了然的层级关系能给消费者带来舒服的阅读体验。另一方面是整个页面的层次节奏，如空间层次中的近景中景远景等，借此使页面看起来更立体，更有吸引力。学习任务情境总结知识拓展拓展训练36 学习目标任务单情境导入设计决策任务实施同步实训实训笔记36 流程计划知识探究课前导学知识探究 1、活动专题页的常见配色 主题突出、色彩鲜明的活动专题页可以烘托促销活动氛围，吸引消费者并激发其购买欲望。因此活动专题页的配色一般采用对比色配色，例如：红与绿，黄与紫，橙与蓝等，这样的搭配能带给消费者强烈的视觉

26、效果，给人亮丽、鲜艳的感觉。某网店活动专题页的头部Banner图采用红绿搭配，突出了“夏日时光”主题，同时让人感觉明快、活泼。活动专题页面一般也会以暖色为主色调，如红色、橙色、黄色等，这种色调的运用可以使页面给人带来热情、兴奋、欢快的心理感受。自定义页面设计任务二自定义页面的设计原则学习任务情境总结知识拓展拓展训练37 学习目标任务单情境导入设计决策任务实施同步实训实训笔记37 流程计划知识探究课前导学知识探究自定义页面设计任务二另外，活动专题页面为了能与节日主题相呼应，很多时候会选择节日代表色。常见的节日代表色见下表节日相关颜色春节红色 金色 中国红情人节紫色 粉色 红色妇女节玫红色 丁香色

27、儿童节鹅黄色 天蓝色 绿色中秋节普蓝色 红色 橙黄色国庆节中国红 黄色圣诞节红色 绿色 白色学习任务情境总结知识拓展拓展训练38 学习目标任务单情境导入设计决策任务实施同步实训实训笔记38 流程计划知识探究课前导学知识探究2、品牌介绍页的常见配色 在设计品牌介绍页时必须考虑品牌本身的风格与色调。品牌介绍页的内容主要是围绕着店铺的品牌文化，品牌历史，发展故事等等开展，为了让消费者在浏览品牌介绍页的过程中，能深深地把店铺品牌形象烙在心间，品牌介绍页的配色一般是挑选能代表该品牌形象风格的颜色。林氏木业品牌介绍页的主色调是湖绿色，与其品牌风格色调所表现的是完全一致的。自定义页面设计任务二学习任务情境总

28、结知识拓展拓展训练39 学习目标任务单情境导入设计决策任务实施同步实训实训笔记39 流程计划知识探究课前导学知识探究自定义页面设计任务二3、会员活动页的常见配色 会员活动的目的是刺激会员消费，吸引更多新会员加入，因此会员活动页的配色通常表现为以暖色调为主，同时采用对比色或者间隔色的搭配，给人活泼轻松的感觉，从而衬托会员活动氛围。除此配色方案外，也有一些店铺为了深化会员对品牌的认知，在会员活动页面的配色设计中融合能代表品牌形象风格的颜色。学习任务情境总结知识拓展拓展训练40 学习目标任务单情境导入设计决策任务实施同步实训实训笔记40 流程计划知识探究课前导学知识探究自定义页面设计任务二4、售后服

29、务页的常见配色 售后服务页是为了向消费者保证店铺拥有强大的售后服务能力，页面要求大气庄重，有信服力，能让消费者感到安心且信任店铺。故售后服务页的配色一般以冷色调为主，如：蓝色、绿色等等，或者运用非彩色搭配，如黑字白底、白字黑底。学习任务情境总结知识拓展拓展训练41 学习目标任务单情境导入设计决策任务实施同步实训实训笔记41 流程计划知识探究课前导学知识探究图1-1某化妆品店铺首页1图1-2某化妆品店铺首页21、某化妆品店铺首页1，第一感觉是数码电器类店铺的装修风格，而对于化妆品店，就应选干净、清爽的配色，这样的黑色显不出高端反而有点压抑。2、某化妆品店铺首页2，装修以浅色系为主，配色清新、自然

30、，对化妆品类目来说，这种清爽、干净的装修风格更能凸显化妆品的商品定位。所以说一个好的店铺装修，是一种营销，一种推广。差的店铺装修效果，无论多么名贵的商品都体现不出商品的价值。自定义页面的排版形式自定义页面的点缀元素学习任务情境总结知识拓展拓展训练42 学习目标任务单情境导入设计决策任务实施同步实训实训笔记42 流程计划知识探究课前导学知识探究观察在任务一实训中搜集到的自定义页面，可发现其排版形式有很多种类型，那么什么样的自定义页面适合什么样的排版形式呢？自定义页面设计任务二引入学习任务情境总结知识拓展拓展训练43 学习目标任务单情境导入设计决策任务实施同步实训实训笔记43 流程计划知识探究课前

31、导学知识探究自定义页面的排版形式1）常规楼层形 常规楼层形的专题页面比较简洁利落，主要把控好背景颜色要有深-浅-深-浅的层次节奏，每一个楼层模块都是独立的，清晰明了，有利于信息阅读。这种排版形式应用比较广泛，常用于品牌介绍页或售后服务页。自定义页面设计任务二学习任务情境总结知识拓展拓展训练44 学习目标任务单情境导入设计决策任务实施同步实训实训笔记44 流程计划知识探究课前导学知识探究 大部分新手美工在设计活动专题页面时也偏爱使用常规楼层形排版，但为了打破常规楼层形排版过于单调的局限，往往会在其基础上做一些细微的演变，比如整体页面背景不做切割，只需在中间部分进行分割，作独立的楼层模块（如左下图

32、）。还有一种排版是在原来的基础上，对某一块楼层的内部进行一些小变化。如右下图所示，该页面将某一楼层模块切分成大小不一的模块。这些经过改良的常规楼层形排版，经常用于活动专题页面设计中。自定义页面设计任务二学习任务情境总结知识拓展拓展训练45 学习目标任务单情境导入设计决策任务实施同步实训实训笔记45 流程计划知识探究课前导学知识探究2）“S”形 “S”形排版的自定义页面，对比于常规楼层的排版形式不会显得枯燥呆板，而是给人轻松活泼的感觉，而且消费者阅读起来也十分流畅。这种排版形式适用于不同类型的自定义页面。自定义页面设计任务二学习任务情境总结知识拓展拓展训练46 学习目标任务单情境导入设计决策任务

33、实施同步实训实训笔记46 流程计划知识探究课前导学知识探究3）“Z”形“Z”形排版的自定义页面跟“S”形有点类似，都打破了常规楼层形式的平淡单调，但“Z”形排版会比“S”形排版多了一份厚重感，更适合用于男性化风格的自定义页面，比如汽车、男性护肤、游戏、电子器械等类目的自定义页面。自定义页面设计任务二学习任务情境总结知识拓展拓展训练47 学习目标任务单情境导入设计决策任务实施同步实训实训笔记47 流程计划知识探究课前导学知识探究4）“1”字形“1”字形排版的自定义页面，给人呈现一种硬朗大气的感觉。这种形式的自定义页面需要有高质量模特大图或产品图镇楼才能避免背景抢镜的情况。因此，“1”字形排版一般

34、情况很少用到，但对于那些追求独特和个性化的卖家来说，“1”字形排版是不错的选择。自定义页面设计任务二学习任务情境总结知识拓展拓展训练48 学习目标任务单情境导入设计决策任务实施同步实训实训笔记48 流程计划知识探究课前导学知识探究5）自由排版形 自由排版形的自定义页面适合用于高端路线的时尚服饰类目，这种排版设计虽看上去简洁干净，但是对于设计师的排版功力要求却比较高，新手美工一般不太适合尝试。详情页设计任务二学习任务情境总结知识拓展拓展训练49 学习目标任务单情境导入设计决策任务实施同步实训实训笔记49 流程计划知识探究课前导学知识探究 点缀元素的应用较多地出现在活动专题页或者会员活动页，设计时

35、在页面背景上适当地增加点缀元素能有效地烘托主题，活跃气氛，比起空白干净的背景更有吸引力一些。增加点缀元素的时候需要考虑是否与节日主题相匹配，在页面中加入一些与主题吻合的点缀元素，会让消费者在浏览页面时更有代入感。常见节日主题对应的点缀元素见下表自定义页面设计任务二自定义页面的点缀元素节日点缀物元素春节灯笼、对联、炮竹烟花、红包、中国结、书法字体端午节粽子、龙舟、竹、山水、水墨七夕节爱心、丝带、巧克力、手捧花、情书、花瓣、蝴蝶结中秋节月亮、月饼、玉兔、灯笼、夜空圣诞节雪花、红帽子、圣诞树、雪人、圣诞老人、礼物学习任务情境总结知识拓展拓展训练50 学习目标任务单情境导入设计决策任务实施同步实训实训

36、笔记50 流程计划知识探究课前导学流程计划分析策划方案明确风格、配色、排版、点缀物、字体通过对任务的分析及自定义页面设计的学习，制定自定义页面设计计划如下：Photoshop制作自定义页面搜索收集相关素材自定义页面设计任务二学习任务情境总结知识拓展拓展训练51 学习目标任务单情境导入设计决策任务实施同步实训实训笔记51 流程计划知识探究课前导学设计决策一、分析策划方案根据策划方案得知：（1）本次任务所设计的自定义页面类型为活动主题页面，此类页面要求主题鲜明，活动氛围浓厚，且其包含的促销信息较多，所以在设计时须突出不同的促销活动信息，最大化地满足不同消费者的优惠需求。（2）页面主题为：年货家居好

37、礼购。从这里可提取的信息有：活动背景对应的节日是春节，店铺类目是生活用品类。春节的节日特征是欢庆喜悦，生活用品类的特征则是给人温暖温馨的感觉。通过主题标语“好礼购”字样可知店铺希望消费者在浏览页面时能将本店商品和赠送亲朋戚友的年货礼物联想在一起，从而萌生购买心理。（3）从页面的布局规划图可知，除了头部Banner图外，楼层模块一共有四个，分别对应的促销活动是：优惠券、免单活动、五折抢购、八折回馈。该页面容纳的优惠信息较多，故在设计时尽量使用统一协调的配色和元素，把多个优惠活动连接一起，让活动主题贯穿页面。自定义页面设计任务二学习任务情境总结知识拓展拓展训练52 学习目标任务单情境导入设计决策任

38、务实施同步实训实训笔记52 流程计划知识探究课前导学设计决策二、明确风格、配色、排版、点缀物、字体（1）风格：根据策划书的分析，初定YIMI生活日用品店年货节活动专题页设计风格以喜庆、热闹、动感为主。（2）配色：选取暖色为主色调，再结合节日代表色表，最终敲定页面色彩为红色、金黄色，营造活泼热闹的氛围。（3）排版：因优惠活动和参与活动的商品较多，页面排版采用常规楼层形（局部自由排版）的形式。（4）点缀物：本任务的页面主题为年货节，根据节日主题点缀物代表所示，页面中可加入灯笼、烟花爆竹、红包等具有春节特色的点缀元素。（5）字体：头部Banner图的主标题字体选用传统韵律感比较强的叶根友毛笔行书，与

39、春节活动背景相呼应。小标题和正文部分选用微软雅黑字体。自定义页面设计任务二学习任务情境总结知识拓展拓展训练53 学习目标任务单情境导入设计决策任务实施同步实训实训笔记53 流程计划知识探究课前导学设计决策三、搜索收集相关素材（1）素材初定：灯笼、福袋、祥云图案、红色屋檐、烟花、祥云。（2）素材来源：通过到百度图片或各大设计网站搜索下载素材。推荐设计网站有：花瓣网、千图网、包图网等等。自定义页面设计任务二学习任务情境总结知识拓展拓展训练54 学习目标任务单情境导入设计决策任务实施同步实训实训笔记54 流程计划知识探究课前导学任务实施1、搜集所需的页面设计素材，如下图所示。自定义页面设计任务二学习

40、任务情境总结知识拓展拓展训练55 学习目标任务单情境导入设计决策任务实施同步实训实训笔记55 流程计划知识探究课前导学任务实施2、打开Photoshop软件，新建一个750X4000像素的文件。由于上传该页面时将采用美颜切图模块，该模块的宽度要求是750像素。高度先设定一个值，这里设置4000像素，如果后面发现高度不够，可以增加画布；如果高度过高，可以用裁切的方法裁掉多余部分。自定义页面设计任务二学习任务情境总结知识拓展拓展训练56 学习目标任务单情境导入设计决策任务实施同步实训实训笔记56 流程计划知识探究课前导学任务实施3、头部Banner图设计 添加头部Banner图背景，使用叶根友毛笔

41、行书字体设计主题文案。为了烘托春节氛围分别添加灯笼、祥云图案、福袋等元素，同时在Banner图摆放了参加本次促销活动的商品，目的是希望消费者一进入活动专题页面就能感受到本次促销的热度，从而激发其购物欲望。自定义页面设计任务二学习任务情境总结知识拓展拓展训练57 学习目标任务单情境导入设计决策任务实施同步实训实训笔记57 流程计划知识探究课前导学任务实施4、优惠券模块设计 优惠券模块的导航条两边增加小祥云元素呼应主题。三张优惠券并排呈现，每张优惠券使用具有中国风的纹理背景，确保每个细节元素都能与年货节主题相吻合。自定义页面设计任务二学习任务情境总结知识拓展拓展训练58 学习目标任务单情境导入设计

42、决策任务实施同步实训实训笔记58 流程计划知识探究课前导学任务实施5、免单商品模块设计 免单商品模块的导航条两边增加大祥云元素，两个免单商品左右并列摆放，通过加粗字体突出“前两名免单”及“9.9特价”的超低价优惠信息。自定义页面设计任务二学习任务情境总结知识拓展拓展训练59 学习目标任务单情境导入设计决策任务实施同步实训实训笔记59 流程计划知识探究课前导学任务实施6、五折抢购模块设计 五折抢购模块是本次活动最有诚意的促销，也是本次活动主推的折扣商品。在导航条两边增添烟花元素，用红色屋檐元素作为背景，呈现参加五折抢购活动的商品。为了突出每件活动商品的卖点和折扣价格，采用上下并列、图文左右交替的

43、摆放形式。自定义页面设计任务二学习任务情境总结知识拓展拓展训练60 学习目标任务单情境导入设计决策任务实施同步实训实训笔记60 流程计划知识探究课前导学任务实施7、八折回馈模块设计 由于参与八折回馈活动的商品比较多，所以这个模块采用左右并列的形式摆放商品。自定义页面设计任务二学习任务情境总结知识拓展拓展训练61 学习目标任务单情境导入设计决策任务实施同步实训实训笔记61 流程计划知识探究课前导学任务实施8、分别保存文档为PSD格式和JPG格式。最终的YIMI生活日用品店年货节活动专题页如右图所示。自定义页面设计任务二学习任务情境总结知识拓展拓展训练62 学习目标任务单情境导入设计决策任务实施同

44、步实训实训笔记62 流程计划知识探究课前导学同步实训学习任务情境总结知识拓展拓展训练63 学习目标任务单情境导入设计决策任务实施同步实训实训笔记63 流程计划知识探究课前导学实训笔记记录学习过程和任务实施中的重要知识点及所需要用到的应用资源、以及那些老师指导任务时提出的要点知识要点/学习问题知识点的具体解释/学习应用资源/老师指导任务要点1、2、3、网店装修 课前导学知识探究流程计划设计决策任务实施同步实训实训笔记任务三 自定义页面上传学习情境六学习任务情境总结知识拓展拓展训练65 学习目标任务单情境导入设计决策任务实施同步实训实训笔记65 流程计划知识探究课前导学知识探究电脑端自定义页面的上

45、传手机端自定义页面的上传学习任务情境总结知识拓展拓展训练66 学习目标任务单情境导入设计决策任务实施同步实训实训笔记66 流程计划知识探究课前导学知识探究自定义页面上传任务三网店装修后台电脑端自定义页面的装修页面和手机端的截然不同，那么两个不同端口的上传方法会有所不同么？引入学习任务情境总结知识拓展拓展训练67 学习目标任务单情境导入设计决策任务实施同步实训实训笔记67 流程计划知识探究课前导学知识探究一、电脑端自定义页面的上传 电脑端的自定义页面和首页的装修基础模块大同小异，所以两者的上传步骤大致相同。值得一提的是，在智能版的电脑端装修平台中，自定义页面的某些基础模块新增了同步功能。如图下图

46、所示，宝贝推荐模块、全屏宽图模块、双列图片模块、文本链接模块、图文模块、文本模块、多端轮播模块、全屏轮播模块均能实现电脑端和无线端的同步效果。但目前智能版的同步功能只支持电脑端自定义页面自动同步生成无线自定义页面，不支持从无线端同步到电脑端。智能版的同步功能方便于将设计好的电脑端自定义页面上传后直接同步生成无线端的自定义页面，能大大地提高店铺的装修效率。自定义页面上传任务三学习任务情境总结知识拓展拓展训练68 学习目标任务单情境导入设计决策任务实施同步实训实训笔记68 流程计划知识探究课前导学知识探究二、无线端自定义页面的上传 无线端的自定义页面和首页的装修模块大致相同，但是常规的基础模块有固

47、定的尺寸要求，以及这些模块只能实现一张图对应一个热区链接，对于那些想要实现无线端页面差异化与创意化的店铺来说有一定的设计约束。然而，智能版的无线端装修平台中新增了美颜切图模块，该模块能够帮助买家实现页面的自由排版布局以及一图多热区链接的设置。美颜切图模块的图片宽度要求750像素，高度最小335像素，最大2500像素，一个页面最多可以添加25个美颜切图模块（如图左下图所示），且一个切图模块可以添加多个大小范围不一的热区链接（如右下图所示）。美颜切图模块还能选择隐藏模块下方的白色间隙，从而实现页面的无缝连接，增加了卖家在自定义页面发挥无限创意的可能性。自定义页面的上传任务三学习任务情境总结知识拓展

48、拓展训练69 学习目标任务单情境导入设计决策任务实施同步实训实训笔记69 流程计划知识探究课前导学流程计划使用Photoshop切片工具切图上传到图片空间设计好详情描述后，进行切片上传，制定以下计划：上传到店铺确定自定义页面的上传方法自定义页面上传任务三学习任务情境总结知识拓展拓展训练70 学习目标任务单情境导入设计决策任务实施同步实训实训笔记70 流程计划知识探究课前导学设计决策一、使用Photoshop切片工具切图 YIMI生活日用品店年货节活动专题页涵盖优惠活动信息较多，也就意味着需添加的热区链接也随之较多。在切片前确定热区链接数量一共有15个，切片时切忌把同一个热区链接分开。二、确定页

49、面的上传方法 本次任务的活动专题页是放在无线端店铺中，且该页面的热区链接比较多。根据所学知识，智能版无线端装修中的美颜切图模块能实现页面的自由排版布局和单图对应多热区链接的效果，故选择美颜切图模块上传本次任务的活动专题页比较合适。学习任务情境总结知识拓展拓展训练71 学习目标任务单情境导入设计决策任务实施同步实训实训笔记71 流程计划知识探究课前导学任务实施1、使用Photoshop进行切片（1）打开刚才保存的YIMI生活日用品店年货节活动专题页.jpg文件，选择“切片工具”，把头部Banner图和优惠券模块、免单模块、五折抢购模块、八折回馈模块分别单独切出来（值得注意的是，由于美颜切图模块的

50、高度最小为335像素，优惠券模块高度不足335像素故不能作单独的切片）。自定义页面上传任务三学习任务情境总结知识拓展拓展训练72 学习目标任务单情境导入设计决策任务实施同步实训实训笔记72 流程计划知识探究课前导学任务实施（2）保存切片。选择“存储为WEB和设备所有格式”（快捷键：Alt+Shift+Ctrl+S），预设格式为“JPEG”，点击“存储”，选择存储格式为“仅限图像”。自定义页面上传任务三学习任务情境总结知识拓展拓展训练73 学习目标任务单情境导入设计决策任务实施同步实训实训笔记73 流程计划知识探究课前导学任务实施（3）根据保存的路径，找到相应的文件夹，打开名为“images”的