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

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

1、网店装修 课前导学知识探究流程计划设计决策任务实施同步实训实训笔记任务一 网店首页策划学习情境五学习任务情境总结知识拓展拓展训练2 学习目标任务单情境导入设计决策任务实施同步实训实训笔记2 流程计划知识探究课前导学课前导学 网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。学习任务情境总结知识拓展拓展训练3 学习目标任务单情境导入设计决策任务实施同步实训实训笔记3 流程计划知识探究课前导学课前导学 表5-1 任务单细文档：因店铺首页更新的需要，设计部

2、主管陈明发出一任务单，要求整体更换整个店铺的装修，主要的任务包括：网店首页策划、网店首页设计、网店首页上传以及无线端首页制作。任务要求:策划店铺首页布局，并完成店铺首页制作、上传，手机端首页制作、上传。1、首页版块设计规范，布局协调，能引导顾客浏览店铺。2、设计要求简约大气，有视觉冲击力，能突出产品。3、字体选择合适、配色协调、布局合理、美观大方。4、能体现品牌特色和行业特色。5、所设计的作品需为原创设计。6、能促进顾客下单购买。任务指派人陈明发出日期完成日期/时间任务名称店铺首页装修任务用途首页主题独立页0官方承接页0主图0直通车图0钻展图0详情基础优化0详情深度优化0官方引流图0主题广告图

3、0新品上新0常规活动营销策划0主题活动策划0大型活动策划0商品运营策划0任务要求有明确细文档列明要求/路径其他：风格偏好普通简洁，中规中矩 大气简约，商业气息浓 古典文化，怀旧经典 热烈奔放，情趣:_制作规范PC端：宽：1920像素，高：6000像素（可根据具体设计调整），jpg格式移动端：宽：750像素，高：3000像素（可根据具体设计调整），jpg格式自我检查确认签名组长检查确认签名验收人按要求完成是否确认签名学习任务情境总结知识拓展拓展训练4 学习目标任务单情境导入设计决策任务实施同步实训实训笔记4 流程计划知识探究课前导学课前导学1、知识目标知识目标2、技能目标技能目标掌握铺首页装修的

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

5、贵的商品都体现不出商品的价值。首页布局内容解析首页布局的内容店铺首页案例展示学习任务情境总结知识拓展拓展训练6 学习目标任务单情境导入设计决策任务实施同步实训实训笔记6 流程计划知识探究课前导学知识探究众所周知，一个店铺的首页就相当于一个实体店的门面，其影响不亚于一个产品的详情描述，店铺首页装修的好坏会直接影响客户的购物体验和店铺的转化率。那么如何才能装修好一个店铺呢？怎么布局，如何规划才能有一个不错的首页呢？如何装修才能有自己的风格呢？一个正常营业的店铺首页主要由店招、导航、海报、产品分类、客服旺旺、产品展示、店铺页尾、店铺背景以及满返、满减、红包、购物券等营销模块。网店首页策划任务一店铺首

6、页的标准布局图一、首页布局的内容学习任务情境总结知识拓展拓展训练7 学习目标任务单情境导入设计决策任务实施同步实训实训笔记7 流程计划知识探究课前导学知识探究1、店招顾名思义是店铺的招牌，店招的尺寸为950*150PX含自定义导航部分，950*120PX其导航为系统自带。店招一般展示的内容是店铺的名称、logo标志、口号等，详细一些的也可以展示1-2款主推的产品，还有领取优惠券的设计，收藏店铺的图标。店招是店铺上唯一各个页面都能展示出现的模块，所以一些重点推广信息可以设计在店招上。2、导航条导航条可分为淘宝系统自带和自定义导航条设计，主要功能是可以快速链接到相应的指定页面。一般内容为所有分类、

7、首页等，丰富一些的有会员制度、购物须知、品牌故事等等，具体可根据自己店铺内容而定。3、全屏海报或轮播海报全屏海报主要用于店铺重大公告、折扣优惠、主打产品推荐，让客户一进入首页就能看到店铺的重点，一般全屏海报尺寸 1920*600PX（建议高度在400-600PX间较好）。轮播海报主要用于推广产品的促销内容，可以做成促销海报吸引买家。尺寸为950*500PX（建议高度在400-500PX间较好）。4、产品分类产品分类方便买家根据自己的需求在店铺快速找到想要的产品。分类主要可按价格分类，产品功能分类，产品属性分类等。本模块尺寸可根据自己店铺规划大小来定义。二、首页布局的内容解析网店首页策划任务一学

8、习任务情境总结知识拓展拓展训练8 学习目标任务单情境导入设计决策任务实施同步实训实训笔记8 流程计划知识探究课前导学知识探究5、活动促销区将店铺的促销活动，显示在店铺首页，可提升店铺的转化率。在旺铺的基础模块中，可供使用的促销工具有：满返、红包、优惠券、满减、满赠。以上营销服务，可起到主动营销买家，提升回头客的效果。我们所说的设计，是通过平面图片的设计展示在店铺的首页，让买家一目了然的看到。设计尺寸950*200PX内。6、商品展示区是指产品通过平面图片展示设计，更能突出产品的性价比，更能融化到店铺的风格里，极大提生产品的视觉展示效果（此非淘宝系统宝贝推荐的豆腐块式的产品展示）。本模块尺寸可根

9、据自己店铺规划大小来定义。7、店铺页尾主要展示的内容如关于快递包装物流，关于售后等，尺寸950*300PX内8、店铺背景一个店铺的风格确立，店铺的背景占据了大部分，背景主要设计的内容店铺的背景图片，店铺手机二维码或店铺一些重要的折扣信息都可以加入到店铺背景上。二、首页布局的内容解析网店首页策划任务一学习任务情境总结知识拓展拓展训练9 学习目标任务单情境导入设计决策任务实施同步实训实训笔记9 流程计划知识探究课前导学知识探究三、店铺首页案例展示案例：小熊电器官方旗舰店），以简约大气的风格凸显产品多样、高档，排版布局合理紧凑，无需过多的文字修饰，凸显高端家电品质。网店首页策划任务一学习任务情境总结

10、知识拓展拓展训练10 学习目标任务单情境导入设计决策任务实施同步实训实训笔记10 流程计划知识探究课前导学流程计划 通过对任务的分析及店铺首页布局规划知识的学习，制定店铺首页布局计划如下：构思大体框架在纸上画出草图整理出电子文档框架修改定稿网店首页策划任务一学习任务情境总结知识拓展拓展训练11 学习目标任务单情境导入设计决策任务实施同步实训实训笔记11 流程计划知识探究课前导学设计决策根据任务书的要求，本店铺首页设计需要包含的的模块主要如下：1、店招区域用于展示店铺的LOGO、店名、店铺口号和主推商品等信息。2、导航条为顾客提供方便的类目导航功能，可直接导航至相应类目。3、全屏海报展示店铺中最

11、热销的产品，或者当下最吸引顾客的促销产品，以全屏的形式吸引进入店铺顾客的眼球。4、优惠券将本店的优惠券展示出来，供顾客领取使用。5、店铺活动区展示店铺目前的促销活动，可通过这些活动提升店铺转化率。6、店长推荐专区展示店铺中最有竞争力的或者优惠力度最大的产品。7、新品上市专区展示店铺中的新上架产品，增加新品的曝光量。网店首页策划任务一学习任务情境总结知识拓展拓展训练12 学习目标任务单情境导入设计决策任务实施同步实训实训笔记12 流程计划知识探究课前导学任务实施一、构思大体框架：简单思考一下店铺首页的大概框架，为草图的设计做好构思。二、在纸上画出草图：用铅笔和草稿纸，尝试着绘制一下店铺首页的内容

12、，可以多次的进行修改与调整，最后确定一个定稿。三、整理出电子文档：将草稿纸上画出来的效果，使用简单的绘图工具进行绘制，将首页的大体框架整理成电子文稿，为后面的设计做好准备。四、修改页面定稿，规划完成的首页。网店首页策划任务一学习任务情境总结知识拓展拓展训练13 学习目标任务单情境导入设计决策任务实施同步实训实训笔记13 流程计划知识探究课前导学任务实施使用EXCEL软件，按照设计决策中规划好的版块，绘制出店铺首页的大体框架。网店首页策划任务一学习任务情境总结知识拓展拓展训练14 学习目标任务单情境导入设计决策任务实施同步实训实训笔记14 流程计划知识探究课前导学同步实训任务名称为店铺首页进行模

13、块策划任务要求根据本任务学习的知识，进行小家电店铺首页各模块进行策划。使用Excel工具，进行模块策划。制作规范首页各模块策完整，能反馈出各区域的主要涉及要点，以文字及图片的形式进行表达。首页宽：1920像素，核心内容需要放置在页面中心950像素内。产品资料店招主推商品2个：网红轻食早餐机、智能加湿器海报商品1个：旋钮式破壁机店长推荐商品 5个：大容量空气炸锅、紫外线消毒柜、轻食三明治机、双盖炖煮养生壶、多功能电煮锅新品4个：迷你电烤箱、萌潮养生壶、双层电饭盒、便携榨汁杯店铺资料店名：“小熊电器”小家电专卖店店标：自己设计，突出店名、主营类目，色彩搭配合理。店铺口号：健康生活每一天。优惠券：买

14、满199减10元、买满380减20元、买满750减40元促销活动：秋季滋补产品特价优惠。网店首页策划任务一学习任务情境总结知识拓展拓展训练15 学习目标任务单情境导入设计决策任务实施同步实训实训笔记15 流程计划知识探究课前导学实训笔记记录学习过程和任务实施中的重要知识点及所需要用到的应用资源、以及那些老师指导任务时提出的要点。知识要点/学习问题知识点的具体解释/学习应用资源/老师指导任务要点1、2、3、网店装修 课前导学知识探究流程计划设计决策任务实施同步实训实训笔记任务二 网店首页设计学习情境五学习任务情境总结知识拓展拓展训练17 学习目标任务单情境导入设计决策任务实施同步实训实训笔记17

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

16、流程计划知识探究课前导学知识探究网店首页设计任务二一、店标的定义及作用1、店标的定义店铺的标志，是指网店中起到识别和推广店铺作用的图案，通过店标可以让消费者记住店铺主体和品牌文化，是店铺标识的图形记号。一个网店的店标可作为一个店铺的形象参考，给人的感觉是最直观的。可以代表着你店铺的风格，店主的品位，产品的特性，也可起到宣传的作用。2、店标的作用网店店标是公众识别网店的指示器。店标是一种“视觉语言”。它通过一定的图案、颜色来向消费者传输商店信息，以达到识别商店、促进销售的目的。网店店标能够引发消费者产生商品联想。店标能够使消费者产生有关商店经营商品类别或属性的联想。网店店标能够促使消费者产生喜爱

17、的感觉。风格独特的标识能够刺激消费者产生幻想，从而对该商店产生好的印象。店标知识学习任务情境总结知识拓展拓展训练19 学习目标任务单情境导入设计决策任务实施同步实训实训笔记19 流程计划知识探究课前导学知识探究二、店标要求1、文件格式GIF、JPG、JPEG、PNG2、文件大小80K以内3、建议尺寸80PX*80PX店标实例，一号店店标（见图5-4）店标知识网店首页设计任务二学习任务情境总结知识拓展拓展训练20 学习目标任务单情境导入设计决策任务实施同步实训实训笔记20 流程计划知识探究课前导学知识探究三、常见标志分析分析生活中常见的店标，归纳店标的关键字与所属行业。店标1：固力制锁（见图5-

18、5）关键字：固力，GULI，G行业：制锁，以挂锁作为设计元素店标知识网店首页设计任务二学习任务情境总结知识拓展拓展训练21 学习目标任务单情境导入设计决策任务实施同步实训实训笔记21 流程计划知识探究课前导学知识探究四、店标的设计步骤1、提取店名关键字，取得关键字的首字母。2、分析行业、主营业务或产品分类，进行抽象，选择可替代该行业的图案。3、将字母和图案结合，完成标志的设计。店标知识网店首页设计任务二学习任务情境总结知识拓展拓展训练22 学习目标任务单情境导入设计决策任务实施同步实训实训笔记22 流程计划知识探究课前导学知识探究店招知识一、店招的定义及作用1、店招的定义店招就是商店的招牌（见

19、图5-6），有的地方叫“招子”。古人称为“幌子”、“望子”。近年来随着网络交易平台的发展，店招也延伸到网店中，即虚拟店铺的招牌。网店的招牌相当于传统商铺的“门头”一样，具有同样的含义。网店首页设计任务二学习任务情境总结知识拓展拓展训练23 学习目标任务单情境导入设计决策任务实施同步实训实训笔记23 流程计划知识探究课前导学知识探究二、店招的大小店招尺寸990/950 x120PX，C店和商城的店招尺寸是有区别的，如图5-7所示：店招知识2、店招的作用（1）店招可以表明商店所售物品或服务项目的标志；（2）可以传递商店的经营理念以及品牌优势等；（3）可以展示出店铺的优势产品及服务。网店首页设计任务

20、二学习任务情境总结知识拓展拓展训练24 学习目标任务单情境导入设计决策任务实施同步实训实训笔记24 流程计划知识探究课前导学知识探究店招知识三、店招的分类以店招的主要功能进行分类的话，店招主要分为下面三大类：1、以品牌宣传为目的的店招（见图5-8）这类店招首先要考虑的内容是店铺名、店铺logo、店铺口号因为这是品牌宣传的最基本的内容；其次是关注按钮、关注人数、收藏按钮、店铺资质，可以侧面反映店铺实力；再次是搜索框、第二导航条等方便用户体验的内容。网店首页设计任务二学习任务情境总结知识拓展拓展训练25 学习目标任务单情境导入设计决策任务实施同步实训实训笔记25 流程计划知识探究课前导学知识探究店

21、招知识2、以活动促销为目的的店招（见图5-9）这类店铺的特点是店铺活动、流量集中增加，有别于店铺正常运营。所以店招首要考虑的因素是活动信息/时间/倒计时、优惠券、促销产品等活动或者促销信息；其次是搜索框、旺旺、第二导航条等方便用户体验的内容；再次才是店铺名、店铺logo、店铺口号等品牌宣传为主的内容。网店首页设计任务二学习任务情境总结知识拓展拓展训练26 学习目标任务单情境导入设计决策任务实施同步实训实训笔记26 流程计划知识探究课前导学知识探究店招知识3、以产品推广为目的的店招（见图5-10）表现突出、对店铺有贡献。店铺特点是有主推产品、想要主推一款或几款产品。在店招上，这类店铺要主打促销产

22、品、促销信息、优惠券、活动信息等促销信息；其次是店铺名、店铺logo、店铺口号等品牌宣传为主的内容；再次是搜索框、第二导航条等方便用户体验的内容。网店首页设计任务二学习任务情境总结知识拓展拓展训练27 学习目标任务单情境导入设计决策任务实施同步实训实训笔记27 流程计划知识探究课前导学知识探究店招知识四、制作店招要注意的事项1、首先视觉重点不宜过多，有1-2个就够了，太多了导致店招没有核心。2、其次根据店铺现阶段的情况来分析，如果现阶段是做大促，可以着重突出促销信息，但是品牌性也不能忽略，反之则刚好相反。3、店招一定要凸显品牌的特性，让客户很容易就清楚你是卖什么的，包括风格，品牌文化等等。这些

23、元素需要我们对自己的品牌有一定的理解之后，方可以应用至店招中，避免对自己的品牌定位出现偏差。4、颜色不要复杂，颜色一定要保持整洁性，不要使用过多的颜色，店铺本来需要表达的信息量就不大，不需要把店招作得太花哨，给买家造成视觉疲劳很可能就会流失了客户的关注度，尽量只使用1-3种颜色，减少使用过于刺激的颜色。网店首页设计任务二学习任务情境总结知识拓展拓展训练28 学习目标任务单情境导入设计决策任务实施同步实训实训笔记28 流程计划知识探究课前导学知识探究促销区知识一、常见的网店促销区 网店经营中，促销活动是很常见的，因此许多店家都会拿出专门的一个区域放促销信息。促销活动区一般在首页海报下方，详细介绍

24、网店活动内容，以此来吸引顾客的眼球、增加顾客在网店的停留时间、提高商品的诱惑力、引导客户参与活动并吸引客户点击购买商品。利用促销区可以传达的信息有很多种，例如：新品通告、分类推荐、单品推荐、活动入口、优惠说明、搜索导航、物流信息、包装信息、售后承诺和联系方式等。但对于促销区而言，并不是信息越多越好，而是必须选择对店铺引流最有效的、顾客最关注的信息放进去。网店首页设计任务二学习任务情境总结知识拓展拓展训练29 学习目标任务单情境导入设计决策任务实施同步实训实训笔记29 流程计划知识探究课前导学知识探究促销区知识1.优惠券（如图5-11）优惠券是网店中最常见的活动内容，大部分网店都会设置优惠券，并

25、将其展示于网店显眼的位置，例如：轮播海报的下方。在网店中，商品是不能随意降价的，但为了提高网店的转化率，卖家可以使用合适的优惠券来吸引消费者，让消费者产生购买欲，这样可以有效提高店铺的转化率。网店首页设计任务二学习任务情境总结知识拓展拓展训练30 学习目标任务单情境导入设计决策任务实施同步实训实训笔记30 流程计划知识探究课前导学知识探究促销区知识2.促销活动 网店平台平时有很多的促销活动，包括网店日常的普通打折活动和平台的大型节日促销，这些活动经常给店铺带来大量的流量和销售量，同时顾客也通过这些活动获得实实在在的好处。因此，促销活动非常受卖家和消费者的欢迎，而各种形式的促销活动也层出不穷，花

26、样百出。网店首页设计任务二学习任务情境总结知识拓展拓展训练31 学习目标任务单情境导入设计决策任务实施同步实训实训笔记31 流程计划知识探究课前导学知识探究促销区知识1）折扣活动3）抽奖活动2）会员活动4）满赠活动网店首页设计任务二学习任务情境总结知识拓展拓展训练32 学习目标任务单情境导入设计决策任务实施同步实训实训笔记32 流程计划知识探究课前导学知识探究分类导航知识一、产品分类导航的定义及作用定义：淘宝店铺的分类导航是指引顾客更快找到自己购买物品位置的指向灯，相当于超市中标明各类商品位置的指示牌，其重要性不言而喻。作用：1、引导顾客快速的找到所需要购买的商品，起到了路径的作用。2、还可以

27、提高顾客在店铺里的访问深度，增加浏览流量。3、有助于顾客对整个店铺的商品全面了解，提高客单价。网店首页设计任务二学习任务情境总结知识拓展拓展训练33 学习目标任务单情境导入设计决策任务实施同步实训实训笔记33 流程计划知识探究课前导学知识探究分类导航知识二、产品的分类标准1、按商品类目2、按商品价位3、按商品上架时间4、按店铺促销活动每个店铺的分类标准不尽相同，在进行店铺分类时，需要根据自己的店铺实际情况进行区别对待。网店首页设计任务二学习任务情境总结知识拓展拓展训练34 学习目标任务单情境导入设计决策任务实施同步实训实训笔记34 流程计划知识探究课前导学知识探究分类导航知识三、产品分类导航的

28、种类1、店招导航2、页中分类导航网店首页设计任务二学习任务情境总结知识拓展拓展训练35 学习目标任务单情境导入设计决策任务实施同步实训实训笔记35 流程计划知识探究课前导学知识探究分类导航知识3、左侧分类导航网店首页设计任务二学习任务情境总结知识拓展拓展训练36 学习目标任务单情境导入设计决策任务实施同步实训实训笔记36 流程计划知识探究课前导学知识探究分类导航知识4、页尾导航网店首页设计任务二学习任务情境总结知识拓展拓展训练37 学习目标任务单情境导入设计决策任务实施同步实训实训笔记37 流程计划知识探究课前导学知识探究商品陈列区知识一、商品陈列区定义将产品按销售者的经营思想及要求，有规律地

29、摆设、展示、以方便顾客购买，提高销售效率的重要的宣传手段，是销售产业广告的主要形式。合理地陈列商品可以起到展示商品、刺激销售、方便购买、节约空间、美化购物环境等各种重要作用。据统计，店面如能正确运用商品的配置和陈列技术，销售额可以在原有基础上提高10%。二、商品陈列的重要性陈列是零售业的一个重要环节，有规矩摆设、展示商品，以便顾客购买。同时不仅美化购物环境，还可以刺激销售，提高商品销量。可以说，陈列直接影响着销售量。网店首页设计任务二学习任务情境总结知识拓展拓展训练38 学习目标任务单情境导入设计决策任务实施同步实训实训笔记38 流程计划知识探究课前导学知识探究商品陈列区知识三、电商行业商品陈

30、列电商行业商品陈列来源于线下成熟的零售行业。比如一个陌生的超市，凭感觉能找到商品所在的货架位置。超市的平面图并不是随机的，而是根据消费者需求来设计的！淘宝店铺宝贝陈列，也应有其一定规律性。电商行业中影响商品陈列的主要是：商品分类、商品图片、商品信息内容（商品名称、商品价格）等内容。超市商品陈列电商商品陈列位置内容位置内容入口处吸引顾客进店，配置主题型季节促销区（特别是标准超市）首屏焦点海报电商主题大促主题区放在卖场深处，吸引顾客向卖场纵深分类商品陈列区电商引导性标识端架区高毛利商品，低价优质商品，强化价格形象，激发购买欲望大促商品陈列区电商新热促暴点排面促销区活化陈列，吸引顾客向货架深处行进首

31、页商品分类列表电商分类运营手段特殊陈列包柱子海报宣传首页背景设置电商特别主题装饰渲染气氛网店首页设计任务二学习任务情境总结知识拓展拓展训练39 学习目标任务单情境导入设计决策任务实施同步实训实训笔记39 流程计划知识探究课前导学知识探究商品陈列区知识四、如何进行商品陈列电商行业，消费者浏览习惯都是从上到下，从左到右。陈列原则有：1、重点突出网店首页设计任务二学习任务情境总结知识拓展拓展训练40 学习目标任务单情境导入设计决策任务实施同步实训实训笔记40 流程计划知识探究课前导学知识探究商品陈列区知识2、整齐统一网店首页设计任务二学习任务情境总结知识拓展拓展训练41 学习目标任务单情境导入设计决

32、策任务实施同步实训实训笔记41 流程计划知识探究课前导学知识探究商品陈列区知识3、色彩对比网店首页设计任务二学习任务情境总结知识拓展拓展训练42 学习目标任务单情境导入设计决策任务实施同步实训实训笔记42 流程计划知识探究课前导学知识探究商品陈列区知识4、关联有序网店首页设计任务二学习任务情境总结知识拓展拓展训练43 学习目标任务单情境导入设计决策任务实施同步实训实训笔记43 流程计划知识探究课前导学流程计划通过对任务的分析及店铺首页各模块的学习，制定店铺首页设计计划如下：新建首页文件策划字体、字号、配色制作店铺首页店铺首页修改定稿网店首页设计任务二学习任务情境总结知识拓展拓展训练44 学习目

33、标任务单情境导入设计决策任务实施同步实训实训笔记44 流程计划知识探究课前导学设计决策一、新建首页文件：使用PS软件，建立首页文件，设置新文件宽1920PX,高6000PX，添加辅助线。二、策划字体、字号、配色和排版：字体：微软雅黑字号：大标题：60点、中标题：40点、小标题：25点配色：背景色：淡蓝色，辅助色：深蓝色，点缀色：玫红色排版：整体简约、大气，商品图片突出，商品卖点、价格醒目，购买按钮能吸引客户点击三、制作店铺首页：结合首页策划的结果，完成店铺的首页设计，包括店招、海报、优惠券、促销区、店长推荐专区、新品上市专区。四、店铺首页修改定稿。检查完成的首页，对存在的问题进行修改，完成之后

34、将首页保存为PSD和JPG格式文件。网店首页设计任务二学习任务情境总结知识拓展拓展训练45 学习目标任务单情境导入设计决策任务实施同步实训实训笔记45 流程计划知识探究课前导学任务实施一、新建图像打开Photoshop软件，新建文件，宽度：1920PX，高度6000PX，文件命名为：伊米生活淘宝店首页。网店首页设计任务二学习任务情境总结知识拓展拓展训练46 学习目标任务单情境导入设计决策任务实施同步实训实训笔记46 流程计划知识探究课前导学任务实施如果首页设计的图片高度不够，则可以通过修改画布大小来增加。打开“画布大小”，修改高度为所需要的高度，定位点击向上箭头。网店首页设计任务二学习任务情境

35、总结知识拓展拓展训练47 学习目标任务单情境导入设计决策任务实施同步实训实训笔记47 流程计划知识探究课前导学任务实施新建参考线，辅助完成首页设计定位。垂直方向：485px，1435px两条；水平方向：120px，150px，600px三条网店首页设计任务二学习任务情境总结知识拓展拓展训练48 学习目标任务单情境导入设计决策任务实施同步实训实训笔记48 流程计划知识探究课前导学任务实施二、店招设计在首页文件的店招区域，插入店标、收藏按钮、店名、店铺口号、推荐商品等内容，并进行布局和排版，完成店招的设计。网店首页设计任务二学习任务情境总结知识拓展拓展训练49 学习目标任务单情境导入设计决策任务实

36、施同步实训实训笔记49 流程计划知识探究课前导学任务实施三、导航栏设计在店招下方，新建导航栏，包含所有商品、首页、店长推荐、居家日用、热销商品等分类，蓝底白字显示。网店首页设计任务二学习任务情境总结知识拓展拓展训练50 学习目标任务单情境导入设计决策任务实施同步实训实训笔记50 流程计划知识探究课前导学任务实施四、全屏海报设计在海报区域制作海报，参考本书学习情景二的海报设计知识，完成海报设计。网店首页设计任务二学习任务情境总结知识拓展拓展训练51 学习目标任务单情境导入设计决策任务实施同步实训实训笔记51 流程计划知识探究课前导学任务实施五、优惠券设计在海报的下方，进行优惠券设计。优惠券的面值

37、有三种：5元，满50元使用；10元，满80元使用；20元，满100元使用。并设置点击领取按钮，高亮显示，吸引顾客点击领取。网店首页设计任务二学习任务情境总结知识拓展拓展训练52 学习目标任务单情境导入设计决策任务实施同步实训实训笔记52 流程计划知识探究课前导学任务实施六、促销区设计在店铺首页中，促销区的设置可以提升店铺转化率，提高客单价。在本首页中，设置了三个促销活动。活动1：幸运大转盘活动2：买满100元送礼品活动2：买满150元送礼品在促销区，使用蓝色作为底色，突出活动内容，达到吸引顾客注意的目的。网店首页设计任务二学习任务情境总结知识拓展拓展训练53 学习目标任务单情境导入设计决策任务

38、实施同步实训实训笔记53 流程计划知识探究课前导学任务实施七、店长推荐专区设计 店长推荐区，将店铺内最有竞争优势或者最热卖的产品进行推荐，吸引更多顾客购买。本首页推荐了5款产品，每款推荐产品的海报图中，包含产品图片、产品名称、产品卖点、产品价格和抢购按钮，产品按钮高亮显示，吸引顾客点击。网店首页设计任务二学习任务情境总结知识拓展拓展训练54 学习目标任务单情境导入设计决策任务实施同步实训实训笔记54 流程计划知识探究课前导学任务实施八、新品上市专区设计新品上市专区，将店铺内最新上架的产品进行推荐，吸引更多顾客购买。本店新品区推荐了4款产品，每款新产品的图中，包含产品图片、产品名称、产品卖点、产

39、品价格和抢购按钮，产品按钮高亮显示，吸引顾客点击。网店首页设计任务二学习任务情境总结知识拓展拓展训练55 学习目标任务单情境导入设计决策任务实施同步实训实训笔记55 流程计划知识探究课前导学同步实训任务名称店铺首页设计制作 任务要求结合上一同步实训任务的首页策划结果，为小家电店铺设计店铺首页。制作规范首页宽：1920像素，核心内容需要放置在页面中心950像素内，页面配色协调、布局合理、产品信息突出。学习任务情境总结知识拓展拓展训练56 学习目标任务单情境导入设计决策任务实施同步实训实训笔记56 流程计划知识探究课前导学实训笔记记录学习过程和任务实施中的重要知识点及所需要用到的应用资源、以及那些

40、老师指导任务时提出的要点知识要点/学习问题知识点的具体解释/学习应用资源/老师指导任务要点1、2、3、网店装修 课前导学知识探究流程计划设计决策任务实施同步实训实训笔记任务三 网店首页上传学习情境五学习任务情境总结知识拓展拓展训练58 学习目标任务单情境导入设计决策任务实施同步实训实训笔记58 流程计划知识探究课前导学知识探究图1-1某化妆品店铺首页1图1-2某化妆品店铺首页21、某化妆品店铺首页1，第一感觉是数码电器类店铺的装修风格，而对于化妆品店，就应选干净、清爽的配色，这样的黑色显不出高端反而有点压抑。2、某化妆品店铺首页2，装修以浅色系为主，配色清新、自然，对化妆品类目来说，这种清爽、

41、干净的装修风格更能凸显化妆品的商品定位。所以说一个好的店铺装修，是一种营销，一种推广。差的店铺装修效果，无论多么名贵的商品都体现不出商品的价值。网店首页包含的模块首页上传方法模块装修使用DW上传店招的方法学习任务情境总结知识拓展拓展训练59 学习目标任务单情境导入设计决策任务实施同步实训实训笔记59 流程计划知识探究课前导学知识探究网店首页上传任务三1、模块上传使用智能版旺铺的装修模块，完成首页中的对应模块的上传，在上传过程中，需要分别完成各模块图片的设计。2、代码上传 将首页设计为一张完整的图片，利用PS软件进行切片，保存为HTML网页文件，并DW软件修改图片目标链接，可通过添加全屏代码实现

42、全屏首页的整体上传。3、第三方工具上传 可使用一些第三方工具，智能化的完成首页的上传。目前比较受欢迎的有“稿定设计”等工具，这些工具更新频率较快，可关注最新的第三方工具。一、首页上传方法学习任务情境总结知识拓展拓展训练60 学习目标任务单情境导入设计决策任务实施同步实训实训笔记60 流程计划知识探究课前导学知识探究网店首页上传任务三淘宝旺铺的智能版包括了基础模块和设计师模块两大类。二、网店首页包含的模块1、基础模块基础模块中，可以分为以下几类店铺招牌宝贝推荐类：宝贝推荐、宝贝排行、自定义区分类导航类：默认分类、个性分类、悬浮导航、宝贝搜索图片展示类：图片轮播、全屏宽图、全屏轮播营销类：满返、红

43、包、购物券、满减其他类：友情链接、客服中心、生意参谋、无线二维码、充值中心、公益广告、小黄条 学习任务情境总结知识拓展拓展训练61 学习目标任务单情境导入设计决策任务实施同步实训实训笔记61 流程计划知识探究课前导学知识探究网店首页上传任务三2、设计师模块 特价专区宝贝排行宝贝分类学习任务情境总结知识拓展拓展训练62 学习目标任务单情境导入设计决策任务实施同步实训实训笔记62 流程计划知识探究课前导学知识探究网店首页上传任务三三、模块装修1、店招 使用“店铺招牌”模块来完成。2、导航条 默认情况下，店铺提供高30PX的导航条，如果想设计的更加精美，可与店招设计在一起，发挥设计水平的空间会更大一

44、些。3、全屏海报 需要使用“全屏宽图”模块完成。4、产品促销轮播海报 需要使用到“图片轮播”模块完成。5、优惠券 优惠劵可使用“购物券”模块来完成。6、活动区 需要使用到基础模块中的“营销类”模块完成。7、产品展示区 默认的主图展示，可通过“宝贝推荐”完成，但自定义的主图展示则需要使用“自定义区”模块完成。学习任务情境总结知识拓展拓展训练63 学习目标任务单情境导入设计决策任务实施同步实训实训笔记63 流程计划知识探究课前导学知识探究网店首页上传任务三四、使用DW上传店招的方法：使用DW热点工具，完成店铺页头部分的上传1、打开Dreamweaver软件，新建文件，插入店铺店招的核心部分图片（店

45、招中心950像素区域，可以进行超链接，即图中红色区域）学习任务情境总结知识拓展拓展训练64 学习目标任务单情境导入设计决策任务实施同步实训实训笔记64 流程计划知识探究课前导学知识探究网店首页上传任务三四、使用DW上传店招的方法：2、将店招核心区域图片上传至图片空间，使用图片空间中的图片地址，替换该图片的源文件。学习任务情境总结知识拓展拓展训练65 学习目标任务单情境导入设计决策任务实施同步实训实训笔记65 流程计划知识探究课前导学知识探究网店首页上传任务三四、使用DW上传店招的方法：3、选中图片，在该图片的属性栏中，找到“地图”属性，选择“矩形热点工具”，在图片中需要添加链接的区域，划定矩形

46、区域。学习任务情境总结知识拓展拓展训练66 学习目标任务单情境导入设计决策任务实施同步实训实训笔记66 流程计划知识探究课前导学知识探究网店首页上传任务三四、使用DW上传店招的方法：4、添加完成热点区域之后，对每个热点区域的链接进行添加，添加需要链接的目标商品或者链接对象。学习任务情境总结知识拓展拓展训练67 学习目标任务单情境导入设计决策任务实施同步实训实训笔记67 流程计划知识探究课前导学知识探究网店首页上传任务三四、使用DW上传店招的方法：5、修改热点链接后，复制代码，拷贝.中的代码。学习任务情境总结知识拓展拓展训练68 学习目标任务单情境导入设计决策任务实施同步实训实训笔记68 流程计

47、划知识探究课前导学知识探究网店首页上传任务三四、使用DW上传店招的方法：6、打开店铺PC端装修页面，编辑店招部分，将复制到的代码，粘贴至自定义招牌代码编辑区。学习任务情境总结知识拓展拓展训练69 学习目标任务单情境导入设计决策任务实施同步实训实训笔记69 流程计划知识探究课前导学知识探究网店首页上传任务三四、使用DW上传店招的方法：7、点击页头，将店招图片上传到“页头背景图”处，并关闭页头下边距10像素，保存后即可看到店招效果。学习任务情境总结知识拓展拓展训练70 学习目标任务单情境导入设计决策任务实施同步实训实训笔记70 流程计划知识探究课前导学流程计划通过对任务的分析及首页图片的分析，制定

48、首页上传的步骤计划如下：对首页图进行切片修改每个切片的源文件修改需要链接的地址上传修改好的代码对首页图进行切片修改每个切片的源文件网店首页上传任务三学习任务情境总结知识拓展拓展训练71 学习目标任务单情境导入设计决策任务实施同步实训实训笔记71 流程计划知识探究课前导学设计决策1、使用旺铺的模块上传，简便易操作，但有局限性，自由度不高，无法完成已设计首页的上传。2、使用第三方平台上传，受平台的限制，无法自由控制各模块的大小与位置。3、使用ps切片的形式上传，可自由发挥，各模块的大小位置可任意调整，并且上传简单，适用于任何一个首页。4、本首页采用PS切片的形式上传，步骤包括：首页切片修改图片原文

49、件修改链接地址上传代码。网店首页上传任务三学习任务情境总结知识拓展拓展训练72 学习目标任务单情境导入设计决策任务实施同步实训实训笔记72 流程计划知识探究课前导学任务实施1、使用PS软件，将已经完成的店铺首页JPG图片打开。网店首页上传任务三一、首页切片学习任务情境总结知识拓展拓展训练73 学习目标任务单情境导入设计决策任务实施同步实训实训笔记73 流程计划知识探究课前导学任务实施2、使用工具栏中的切片工具，对图片进行裁切，切片时，可使用辅助线作为参考。网店首页上传任务三学习任务情境总结知识拓展拓展训练74 学习目标任务单情境导入设计决策任务实施同步实训实训笔记74 流程计划知识探究课前导学

50、任务实施3、切片的划分如下：店招导航部分、海报部分、3张优惠券单独切片，3个促销活动单独切片，5件店长推荐商品单独切片，4件新品单独切片。切片和切片之间不要留空，以保证产生尽可能少的切片。网店首页上传任务三学习任务情境总结知识拓展拓展训练75 学习目标任务单情境导入设计决策任务实施同步实训实训笔记75 流程计划知识探究课前导学任务实施4、切片完成后，点击“文件”菜单中的“存储为Web和设备所用格式”子菜单。在弹出的对话框中，选择所有的切片，并设置图片格式为JPEG。网店首页上传任务三学习任务情境总结知识拓展拓展训练76 学习目标任务单情境导入设计决策任务实施同步实训实训笔记76 流程计划知识探