中职教育二年级下学期电子与信息《电商网页平面设计基础》教学设计

1/10《电商网页平面设计基础》教学设计授课课题电商网页设计课程计算机平面设计学校教学对象中职学生授课课时12分41秒授课类型理实一体教学设计描述本次课演示作品效果创设情景，激发学生的兴趣。现场提问互动，活跃课堂氛围，引入课程主题，教师通过讲授法传授知识和技能，从而激发学生的兴趣，引导学生积极主动学习，让学生学有所得。教学对象分析经过对平面设计课程一段时间的学习，大部分学生对图形、图像的基本知识有了一定的了解，也掌握了一定的技能，但对他们来说，电商网页设计这部分需要涉及各方面知识点，而且规范也较为复杂，而他们缺乏对电商网页架构和规范的整体认真和细节把控。通过讲授归纳电商网页的基本概念和基本组成还有明确电商网页设计中的规范，帮助学生建立完整的基础理论和规范体系。教学目标知识目标1、了解网页的基本构成2、明确电商网页的设计规范。能力目标学生可以充分发挥自身的创造力与想像力，培养学生综合运用知识的能力。情感目标促进学生获取信息的能力、设计能力、审美能力的提高，鼓励学生溶入自己的个性制作出新颖、吸引人的作品。思政目标让学生了解好的平面设计作品往往需要设计师的深思熟虑和精雕细琢，培养学生沉下心来做事的工匠精神。教学重点网页的基本构成和电商网页的设计规范教学难点熟练掌握电商网页的设计规范教学方法ppt讲授法学习方法自主学习、练习法教具多媒体平台、网络教室教学结构教师：导入讲授考察学习情况交流评价讨论交流评价讨论学生：思考听讲、总结反馈教材的设计思路及分析《电商网页设计基础》这次课，主要是为了提升学生对电商网页的基础理论知识和设计规范的认知，帮助学生全方位设计理论知识的建立，从而夯实学生的设计能力基础。本节课以赏析三张电商网页为案例来吸引学生的注意，并导入新课。再从网页的概念出发，分析网页的基本构成，并了解电商网页的设计规范，让学生对电商网页的设计有一个整体且清晰的认识，把握电商网页的设计规范，提升对电商网页设计整体性设计的把控。学习过程中，学生的自学能力、创新能力、审美能力及学生的知识综合应用能力得到全面的发展。教学过程教学环节教师活动学生活动设计意图情景引入教师展示三张电商网页图片，分小组进行提问学生观赏这三张图片，各小组讨论总结发言。展示当前流行的电商网页，用提问的方式而引发学生的思考，切入本节课程的主题。概念及组成部分教师讲授电商网页设计的基础理论一、首先，明确基本概念。网页设计，是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。它的本质就是网站的图形界面设计。而电商网页，就是向大众提供购物服务的平台，电商网页设计就是为各大电商网购平台和卖家店铺、微店等提供设计服务，更好的展示产品，促进商品的销售。二、网页设计组成1.首页首页别名叫作Index或者Default，是索引和目录的意思。首页类似书籍的目录，需要查看哪个子网页就点击链接即可进入。到了现在，网站首页仍然是引导用户进入不同区域的一个「目录」，这个目录除了导航功能外也要露出一部分内容给用户来吸引点击，露出的部分一定要有一个「更多」按钮来指引用户找到二级页面。2.二级页面在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面。二级页面之后还有三级页面等级别。从点击的概率上来说，自然是越靠前访问量越高，页面层级越深越不容易被用户找到。一般网站有三级页面，就是为了避免用户迷失。为此还会在页面中加入面包屑导航。面包屑导航就是在页面第一屏出现的诸如首页>体育>NBA频道，这样的超链接结构，方便用户理解自己在哪里，并且点击可以回到其他页面。3.底层页在网站结构中最后提供用户实质资讯的页面就是底层页。比如，在门户网站首页或二级页面中我们点击感兴趣的标题后，在底层页中才会看到全部的资讯。待用户阅读完底层页的信息后可以顺势在左侧或右侧的侧栏寻找用户可能感兴趣的相关内容；在底侧可以看到网友的评论；底侧也会有分享按钮、赞功能等；如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。4.广告门户类网站如何盈利？广告是变现方法之一。banner一般尺寸巨大，在网站之中非常显眼。因此也不一定是外部广告，也有内部活动、推荐资讯等。那么banner图的尺寸有固定吗？答案是没有。Banner的宽度有两种，一种是满屏（1920PX）、一种是基于安全距离的满尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以banner不可以做得很高，否则第一屏信息会显示得不够。你可能会说，那就让用户往下拉啊。但是在网站的访问用户之中，第二屏触及到的用户比第一屏会少很多。也就是很多用户可能点击网站后就会跳走或者关闭，那么第一屏的信息真的非常重要了，可谓是寸土寸金。所以我们的banner不应该占据过大的区域。比如站酷网的Banner区域为1380x350px。5.Footer在网站具体的页面设计中，底部会有一个区域我们称之为footer。一般footer的颜色都会比上边内容区域要暗，因为footer的信息在逻辑的级别上是次要的。footer区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让footer变得特别明显。学生认真听讲，记录本节课的重点。让学生了解电商网页设计的基础知识，培养学生的综合认知。设计规范三：电商网页设计规范01页面尺寸规范电商网页页面的尺寸宽度1920px，高度尺寸按照页面所需要的信息来制定，显示尺寸为1920*1080px。PC端的banner一般为730*400，专题活动页，主页面宽度为1920，高度为580-700px,其中显示区域高度为1210px.产品详情页，宽度尺寸790px,高度只要能充分展示所需信息就可以。02颜色规范页面颜色要求：页面中使用的颜色不得多余5种，黑白灰不算色，针对不同主体使用合适的色系，主题颜色和辅助色要根据配色原理搭配。单色、同色系：适合产品本身颜色比较统一，通过吸取产品较近的周边颜色，添加合适的辅助色，使画面丰富而统一，这种色系适合单品的一个横幅广告的设计。相似色、临近色系：一般在主色调明确的情况下辅助添加类似色，是一种比较好掌握的颜色。补色系：这里把互补色、单边补色分割、补色分割3种情况，电商网页的调性要活泼，产品基本上都属于色彩明快的品类，色彩上的愉悦更容易激起点击的欲望，补色系的运用要注意面积的搭配及颜色灰度的调整。多色搭配：可把对比色、矩形分割、广场分割多颜色的搭配归为，一般比较难把控，可以做小面积的装饰以平衡画面。03板式规范页面设计要有整体性、一致性，版式设计的一般法则：对齐。对齐分左对齐、右对齐和居中。常见的电商海报，基本上采用了左右对齐的方式，对齐是最基础最常见的班师排列方式，给人以稳重、力量、统一、工整的感觉。左对齐可以使画面变得统一有秩序感。居中的排版则给人正式、大气、高端、品质的感觉，对比。无对比不设计，对比一般有大小、深浅等，可以有效增加画面的视觉效果和冲击力。04文字规范在页面中使用的中英文字体不得超过5种，页面中出现3次的为主要字体，其他为陪衬字体，黑体为产品详情页的主要字体。在banner中的字体基本上要经过设计，还没能力设计字体时，可在原字的基础上做适当的特殊效果，字体的大小和颜色要和背景的颜色区分开，便于消费者阅读。字体的风格要统一，达到统一的秩序感。05广告语规范，广告语要注意极限用语的应用，广告法规定极限用语不得出现在商品的标题、副标题、主图、详情页等位置，极限词例如：世界级、最高级、万能学生认真听讲，记录本节