页面创意设计课程教学教案

《H5页面创意设计》下载原文可修改字体底色教学教案课时内容认识H5授课时间135分钟课时3教学目标掌握与H5相关的概念了解如何学好H5设计了解H5设计的相关流程教学重点H5的概念、类型、风格H5页面设计的原则H5设计人员应具备的素质H5的设计与制作流程教学难点H5的类型、风格，H5的优势与不足，H5页面设计的原则，H5设计作品应具备的特点，H5的设计与制作流程教学设计教学思路：（1）通过对H5的概念、类型、风格，优势与不足，以及设计原则的介绍，让学生对H5与H5页面设计有个基本认识；（2）通过对优秀H5页面设计作品的特点，以及H5设计人员应具备的能力进行讲解，告诉学生学好H5需具备的条件；（3）对H5的设计与制作流程进行介绍，包括明确设计目标、内容策划、；页面设计、交互设计和H5的生成与发布；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）通过理论加案例的方式讲解，帮助学生快速理解知识点；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣。教学资料及要求：除教材中讲解的知识，可以通过其他渠道了解更多H5相关知识，加以学习。教学内容讨论问题：1、H5是什么？2、学好H5设计需具备哪些能力？3、H5的设计与制作流程是怎样的？内容大纲：具体可结合本章的PPT课件进行配合讲解。1.1H5的基础知识1.1.1H5是什么1.1.2H5的类型1.1.3H5的风格1.1.4H5的优势与不足1.1.5H5页面设计的五大原则1.2如何学好H5设计1.2.1优秀的H5设计作品应具备的特点1.2.2H5设计人员应具备的能力1.3H5的设计与制作流程1.3.1明确设计目标1.3.2内容策划1.3.3页面设计1.3.4交互设计1.3.5H5的生成和发布1.4项目实训项目一旅游推广H5页面素材的搜集与制作项目二邀请函H5页面素材的搜集与制作实战演练小结了解H5的基础知识。掌握如何学好H5设计。掌握H5的设计与制作流程实战演练先利用Photoshop对端午节图片素材（配套资源:\素材\第1章\端午节素材.psd）进行处理，制作端午节H5页面（配套资源:\效果\第1章\端午节H5页面.psd），然后在MAKA中添加动画效果并进行预览。下图所示为参考效果。

课时内容认识H5的设计规范和工具授课时间180分钟课时4教学目标了解H5的设计规范掌握H5的图像、动效等元素设计工具掌握H5的设计生成制作工具掌握H5的创意开发工具了解H5的辅助设计工具教学重点H5的常用设计尺寸H5页面的安全区Photoshop、Illustrator、AfterEffects、Audition等元素设计工具MAKA、—易企秀、兔展、人人秀、初页等H5制作工具意派Epub360、iH5等H5创意开发工具格式工厂、PSPlay、TinyPNG、草料二维码等H5辅助设计工具教学难点H5的设计规范H5的元素设计工具H5的设计生成制作工具H5的创意开发工具H5的辅助设计工具教学设计教学思路：（1）通过对浏览器的选择、H5的常用设计尺寸、H5页面的安全区等知识进行讲解，让学生掌握H5的设计规范；（2）通过对Photoshop、Illustrator、AfterEffects、Audition进行介绍，让学生熟悉H5的元素设计工具；（3）通过对MAKA、—易企秀、兔展、人人秀、初页等进行介绍，让学生熟悉H5的生成制作工具；（4）通过对意派Epub360、iH5等进行介绍，让学生熟悉H5的创意开发工具；（5）通过对格式工厂、PSPlay、TinyPNG、草料二维码等进行介绍，让学生熟悉H5的辅助设计工具；（6）通过项目实训练习本章知识；（7）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）通过理论加案例的方式讲解，帮助学生快速理解知识点；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对于重点内容进行着重讲解。教学资料及要求：除教材中讲解的这些工具软件，还可以了解其他工具的使用方法。教学内容知识回顾：在前面介绍了H5的基础知识，以及H5设计与制作的流程等内容。讨论问题：1、H5有哪些设计规范？2、H5有哪些页面元素的设计工具？3、H5的页面生成工具有哪些？4、H5有哪些创意开发工具？内容大纲：具体可结合本章的PPT课件进行配合讲解。2.1H5的设计规范2.1.1浏览器的选择2.1.2H5的常用设计尺寸2.1.3H5页面的安全区2.2H5的元素设计工具2.2.1功能强大的设计工具——Photoshop2.2.2专业的矢量图绘制工具——Illustrator2.2.3酷炫视频特效制作工具——AfterEffects2.2.4音效设计制作工具——Audition2.3H5的设计生成制作工具2.3.1定制推广H5制作工具——MAKA2.3.2企业营销H5制作工具——易企秀2.3.3快速制作H5工具——兔展2.3.4微场景H5制作工具——人人秀2.3.5照片故事H5制作工具——初页2.4H5的创意开发工具2.4.1专业H5工具——意派Epub36082.4.2在线编辑H5工具——iH52.5H5的辅助设计工具2.5.1音视频压缩工具——格式工厂2.5.2手机预览设计稿——PSPlay2.5.3图片压缩工具——TinyPNG2.5.4二维码生成工具——草料二维码2.6项目实训项目一使用MAKA制作H5活动页面项目二使用格式工厂将JPG格式的图片转换为PNG格式实战演练小结掌握H5的设计规范。掌握H5的元素设计、生成制作、创意开发和辅助设计工具课后练习（1）使用人人秀中的素材制作H5页面，要求完成后的效果不但美观，而且能动态显示。完成后的参考效果如下图所示。（2）使用格式工厂将“夜景.png”（配套资源:\素材\第2章\夜景.png）转换为TIF格式（配套资源:\效果\第2章\夜景.tif）。（3）使用草料二维码将“夜景.png”图片生成二维码形式，夜景图片及完成后的参考效果如下图所示（配套资源:\效果\第2章\夜景二维码.png）。课时内容H5页面的设计基础授课时间135分钟课时3教学目标掌握H5原型图的相关知识掌握H5色彩相关知识掌握H5版面相关知识教学重点H5原型图的概念色彩三要素色彩与情感、氛围的关系H5页面版面类型教学难点H5原型图应具备的要素色彩与情感、氛围的关系色彩搭配方法H5页面各类型设计要点教学设计教学思路：（1）通过讲解H5原型图是什么、H5原型图应具备的要素，让学生掌握H5原型图的基础知识；（2）通过介绍色彩的三大要素、色彩决定情感、色彩决定氛围、H5页面的配色方法，让学生掌握色彩的相关知识；（3）通过讲解H5版面类型，以及创建画面焦点、单页面视觉层级、多页面视觉层级、让版面设计的原则，学生掌握版面的相关知识；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对于重点内容进行着重讲解。教学资料及要求：除教材中讲解的知识，可以学习其他原型图绘制、色彩搭配和版面排版的相关知识。教学内容知识回顾：前面讲解了H5设计规范及各种设计工具等。讨论问题：1、什么叫H5原型图？有什么用？2、怎么让H5页面的色彩更有吸引力？3、怎么在H5页面中引导用户的浏览视线内容大纲：具体可结合本章的PPT课件进行配合讲解。3.1H5原型图3.1.1H5原型图是什么3.1.2H5原型图应具备的要素3.2色彩3.2.1/认识色彩的三大要素3.2.2色彩决定情感3.2.3色彩决定氛围3.2.4H5页面的配色方法3.2.5案例分析“跑步App”H5页面的色彩分析3.3版面3.3.1认识H5版面类型3.3.2创建画面焦点3.3.3单页面视觉层级3.3.4多页面视觉层级3.3.5版面设计的原则3.3.6案例分析分析“2020年度店长总结”H5页面版面布局3.4项目实训项目一音乐H5页面的色彩与版面鉴赏项目二抽奖H5页面的色彩与版面鉴赏实战演练小结掌握H5原型图的基础知识。掌握色彩、版面的相关知识。实战演练对下图所示的草莓音乐节H5页面进行鉴赏，分析其色彩运用与版面布局的特点。课时内容H5页面的素材设计授课时间135分钟课时3教学目标掌握H5页面的图片设计相关知识掌握H5页面的文字设计相关知识掌握H5页面的音效设计相关知识教学重点图片素材的获取H5页面中的文字及字体H5页面中音效素材的获取方法教学难点图片的设计原则H5页面标题文字和正文文字的设计技巧H5页面中音效素材的选择注意事项教学设计教学思路：（1）首先讲解H5页面图片素材的获取方法、H5页面图片的设计原则，然后通过设计案例进行理论与实践的结合学习；（2）接着认识H5页面中的文字及字体，讲解H5页面标题文字的设计技巧、H5页面正文文字的设计技巧等知识，再通过招聘H5页面文字的制作进行综合提升；（3）然后讲解H5页面中音效设计的重要性、H5页面音效素材的获取方法、H5页面音效的选择与添加注意事项等知识，并通过Audition音效制作巩固学习；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对于重点内容进行着重讲解。教学资料及要求：除讲解教材中的知识外，可以了解图片设计、文字设计与音效设计的其他知识。教学内容知识回顾：在前面讲解了H5原型图、色彩、版面等H5页面设计的基础知识。讨论问题：1、哪些渠道可以获得H5页面的图片素材、音效素材？2、如何进行图片和文字的设计？3、选择音效时需注意哪些问题？内容大纲：具体可结合本章的PPT课件进行配合讲解。4.1H5页面的图片设计4.1.1H5页面图片素材的获取方法4.1.2H5页面图片的设计原则4.1.3设计案例裁剪H5页面的背景图片4.1.4设计案例调整H5页面的图片色彩4.1.5设计案例绘制H5页面的矢量人物4.1.6设计案例优化H5页面的图片效果4.2H5页面的文字设计4.2.1认识H5页面中的文字及字体4.2.2H5页面标题文字的设计技巧4.2.3H5页面正文文字的设计技巧4.2.4设计案例制作招聘H5页面文字4.2.5设计案例制作招聘H5页面长图文字4.3H5页面的音效设计4.3.1H5页面中音效设计的重要性4.3.2H5页面音效素材的获取方法4.3.3H5页面音效的选择与添加注意事项4.3.4设计案例使用Audition制作音效4.4项目实训项目一制作节气H5页面项目二制作抢红包H5页面实战演练小结掌握H5页面的图片设计方法掌握H5页面的文字设计方法掌握H5页面的音效设计方法实战演练（1）本例将使用Photoshop制作中秋节H5页面。在制作时先绘制背景，然后添加月饼、玉兔等主要素材（配套资源:\素材\第4章\中秋节H5页面素材.psd），最后输入文字。完成后的参考效果如图所示（配套资源:\效果\第4章\中秋节H5页面.psd）。（2）本例将使用Photoshop制作阅读H5页面。在制作时先对阅读素材（配套资源:\素材\第4章\阅读.jpg）进行调色，如图4-112所示，使其符合制作需求，然后进行阅读H5页面的制作，最后添加文字。完成后的参考效果如图所示（配套资源:\效果\第4章\阅读H5页面.psd）。课时内容H5页面的动效设计授课时间135分钟课时3教学目标了解H5页面的动效设计的基础知识掌握H5页面的内页动效设计掌握H5页面的转场动效设计教学重点H5页面动效的作用内页动效的选择设计转场动效的注意事项教学难点H5页面动效的主要类型内页动效的层级设计转场动效的注意事项教学设计教学思路：（1）通过介绍H5页面动效的作用、H5页面的主要动效类型，让学生了解H5页面动效设计的基础；（2）先介绍内页动效的选择、内页动效的层级，再通过微信红包H5页面的内页动效设计案例，让学生学会如何设计内页动效；（3）先介绍设计转场动效的注意事项，再通过微信红包H5页面的动效转场设计案例，让学生掌握转场动效的设计方法；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对于重点内容进行着重讲解。教学资料及要求：除讲解教材中的知识外，可以结合自身对H5动效的了解，制作其他的动效。教学内容知识回顾：前面讲解了H5页面的图片设计、文字设计和音效设计等内容。讨论问题：1、如何选择H5页面的内页动效？2、如何进行转场动效的设计？内容大纲：具体可结合本章的PPT课件进行配合讲解。5.1H5页面动效设计基础5.1.1H5页面动效的作用5.1.2H5页面的主要动效类型5.2H5页面的内页动效设计5.2.1内页动效的选择5.2.2内页动效的层级5.2.3设计案例制作微信红包H5页面的内页动效5.3H5页面的转场动效设计5.3.1设计转场动效的注意事项5.3.2设计案例制作微信红包H5页面的转场动效5.4项目实训项目一制作产品推广H5页面动效项目二制作招聘H5页面动效实战演练小结熟悉H5页面动效设计基础掌握H5页面的内页动效设计掌握H5页面的转场动效设计实战演练本练习将在MAKA中打开家居H5页面的相关素材（配套资源:\素材\第5章\家居H5页面\），将其添加到H5页面中，然后依次为文字和图片添加动效，完成后分享到微信平台。完成后的参考效果如图所示。

课时内容H5页面的创意设计授课时间135分钟课时3教学目标掌握H5页面的交互创意设计掌握H5页面的动态创意设计教学重点使用H5+720度全景技术查看全景画面使用H5+人脸识别技术让内容更有趣使用H5+手指跟随技术让操作更生动使用H5+快闪广告提升浏览体验使用H5+视频提升内容的展现效果使用H5+GIF动画让画面更生动教学难点使用H5+物理引擎技术创建虚拟世界使用H5+重力感应技术让用户的互动体验更强使用H5+粒子特效提升视觉体验使用H5+多屏互动提升营销的娱乐性教学设计教学思路：（1）先介绍H5+720度全景技术、H5+人脸识别技术、H5+物理引擎技术、H5+重力感应技术、5+手指跟随技术，再通过制作凡科微传单全景H5页面案例进行实践练习，让学生掌握H5页面的交互创意设计方法；（2）先介绍H5+快闪广告、H5+粒子特效、H5+视频、H5+多屏互动、H5+GIF动画等知识，再通过制作快闪广告H5页面，让学生掌握H5页面的动态创意设计方法；（3）通过项目实训练习本章知识；（4）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）理论配合案例讲解基础知识；（2）重点内容需要结合案例图片来具体讲解。教学资料及要求：除讲解教材中的知识外，可以结合自己的理解学习并使用更多的技术进行H5页面的创意设计。教学内容知识回顾：在前面讲解了H5页面动效设计的基础知识，以及H5内页动效与转场动效等内容。讨论问题：1、如何进行H5页面的交互创意设计？2、如何进行H5页面的动态创意设计？内容大纲：具体可结合本章的PPT课件进行配合讲解。6.1H5页面的交互创意设计6.1.1使用H5+720度全景技术查看全景画面6.1.2使用H5+人脸识别技术让内容更有趣6.1.3使用H5+物理引擎技术创建虚拟世界6.1.4使用H5+重力感应技术让用户的互动体验更强6.1.5使用H5+手指跟随技术让操作更生动6.1.6设计案例使用凡科微传单制作全景H5页面6.2H5页面的动态创意设计6.2.1使用H5+快闪广告提升浏览体验6.2.2使用H5+粒子特效提升视觉体验6.2.3使用H5+视频提升内容的展现效果6.2.4使用H5+多屏互动提升营销的娱乐性6.2.5使用H5+GIF动画让画面更生动6.2.6设计案例制作快闪广告H5页面6.3项目实训制作元旦GIF动画实战演练小结1、掌握H5页面的交互创意设计。2、掌握H5页面的动态创意设计课后练习（1）本练习将使用凡科微传单制作房屋720°全景H5页面（配套资源:\素材\第6章\房屋720°全景H5页面\）。在制作时先将背景添加到720°全景的内图中，最后依次添加素材并设置动画效果。完成后的参考效果如图所示。（2）本练习将使用Photoshop制作夏日H5页面的GIF动画（配套资源:\效果\第6章\夏日H5页面效果.psd），完成制作后可使文字以动画的形式展现。参考效果如图所示。

课时内容综合案例：活动运营H5页面的设计与制作授课时间135分钟课时3教学目标掌握元宵节活动H5页面的前期准备了解元宵节活动H5页面设计内容了解元宵节活动H5页面动效的制作与发布教学重点元宵节活动H5页面设计构思设计元宵节活动H5标题页设计元宵节活动H5内容页设计元宵节活动H5红包页设计元宵节活动H5介绍页发布元宵节活动H5页面教学难点绘制元宵节活动H5页面原型图搜集元宵节活动H5页面素材设计元宵节活动H5标题页设计元宵节活动H5内容页设计元宵节活动H5红包页设计元宵节活动H5介绍页为元宵节活动H5页面添加动效教学设计教学思路：（1）通过分析元宵节活动H5页面的，明确该H5页面的设计构思，然后绘制原型图并搜集素材，做好前期准备工作；（2）根据前期准备的内容，进行元宵节活动H5页面的标题页、内容页、红包页、介绍页的设计；（3）接着为元宵节活动H5页面添加动效和音效，最后再发布元宵节活动H5页面；（4）通过项目实训练习活动运营型H5页面的设计与制作方法识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）理论配合案例讲解设计思路；（2）使用各设计软件设计H5页面，并添加音效和动效；（3）重难点内容着重进行讲解。教学资料及要求：除教材中的活动运营型H5页面外，学生还可以设计并制作其他的H5页面，提升自己的设计与制作能力。教学内容知识回顾：前面讲解了H5页面的交互创意设计与动态创意设计等内容。讨论问题：1、如何构思元宵节活动H5页面？2、如何设计元宵节活动H5页面的内容？3、如何为元宵节活动H5页面添加动效？4、如何发布元宵节活动H5页面？内容大纲：具体可结合本章的PPT课件进行配合讲解。7.1制作元宵节活动H5页面的前期准备7.1.1元宵节活动H5页面设计构思7.1.2绘制元宵节活动H5页面原型图7.1.3搜集元宵节活动H5页面素材7.2元宵节活动H5页面的设计7.2.1设计元宵节活动标题页7.2.2设计元宵节活动内容页7.2.3设计元宵节活动红包页7.2.4设计元宵节活动介绍页7.3元宵节活动H5页面的动效制作与发布7.3.1为元宵节活动H5页面添加动效7.3.2为元宵节活动H5页面添加音效7.3.3/发布元宵节活动H5页面7.4项目实训项目一制作会议邀请函H5页面项目二制作会议邀请函H5页面动效实战演练小结掌握元宵节活动H5页面的前期准备掌握元宵节活动H5页面的内容设计掌握元宵节活动H5页面的动效制作与发布实战演练本练习将使用素材文件（配套资源:\素材\第7章\端午节活动页面素材.psd）制作端午节活动H5页面。使用Photoshop将H5页面分为首页、活动内容和活动介绍3个部分进行制作（配套资源:\效果\第7章\端午节活动页面\）。制作完成后使用人人秀制作动效并进行发布。完成后的参考效果如图所示。

课时内容综合案例：产品推广H5页面的设计与制作授课时间135分钟课时3教学目标掌握设计制作产品推广H5页面的前期准备掌握产品推广H5页面设计掌握产品推广H5页面动效的制作与发布教学重点产品推广H5页面设计构思绘制产品推广H5页面原型图设计产品推广H5首页设计产品推广H5内页设计产品推广H5尾页为产品推广H5页面添加动效为产品推广H5页面添加音效教学难点产品推广H5页面设计构思绘制产品推广H5页面原型图设计产品推广H5首页设计产品推广H5内页设计产品推广H5尾页为产品推广H5页面添加动效为产品推广H5页面添加音效教学设计教学思路：（1）通过分析产品推广H5页面的，明确该H5页面的设计构思，然后绘制原型图并搜集素材，做好前期准备工作；（2）根据前期准备的内容，进行产品推广H5页面的首页、内页、尾页的设计；（3）接着为产品推广H5页面添加动效和音效，最后再发布产品推广H5页面；（4）通过项目实训练习产品推广H5页面的设计与制作方法识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。教学手段：（1）理论配合案例讲解设计思路；（2）使用各设计软件设计H5页面，并添加音效和动效；（3）重难点内容着重进行讲解。教学资料及要求：除教材中的产品推广型H5页面外，学生还可以设计并制作其他的H5页面，提升自己的设计与制作能力。教学内容知识回顾：前面讲解了元宵节活动H5页面设计与制作的前期准备、元宵节活动H5页面的标题页、内容页、介绍页等的设计，以及音效、动态的添加和页面的发布等内容。讨论问题：1、如何产品推广H5页面的前期构思？2、如何进行产品推广H5页面的设计与动效制作？内容大纲：具体可结合本章的PPT课件进行配合讲解。8.1 H5的基础知识8.1制作产品推广H5页面的前期准备8.1.1产品推广H5页面设计构思8.1.2绘制产品推广H5页面原型图8.1.3搜集产品推广H5页面素材8.2产品推广H5页面的设计8.2.1设计产品推广H5首页8.2.2设计产品推广H5内页8.2.3设计产品推广H5尾页8.3产品推广H5页面的动效制作与发布8.3.1为产品推广H5页面添加动效8.3.2为产品推广H5页面添加音效8.3.3发布产品推广H5页面8.4项目实训项目一制作红酒推广H5页面项目二制作红酒推广H5页面动效实战演练小结掌握产品推广H5页面制作的前期准备。掌握产品推广H5页面的设计。掌握产品推广H5页面的动效制作与发布课后练习（1）本练习将使用素材文件（配套资源:\素材\第8章\家装节产品推广素材.psd）制作家装节产品推广H5页面（配套资源:\效果\第8章\家装节产品推H5页面\）。使用Photoshop将H5页面分为首页、产品介绍和活动内容3个部分，完成后的参考效果如图所示。（2）本练习将使用人人秀制作家装节产品推广H5页面的动效。在设计时先添加语音来电互动，然后依次添加首页、产品介绍、活动内容等页面，并为文字添加动效，完成后发布H5页面内容。完成后的参考效果如图所示。课时内容综合案例：企业招聘H5页面的设计与制作授课时间135分钟课时3教学目标掌握企业招聘H5页面的前期准备掌握企业招聘H5页面的设计掌握企业