H5页面创意设计课程教学教案Word格式文档下载.docx

1、（3）对H5的设计与制作流程进行介绍，包括明确设计目标、内容策划、；页面设计、交互设计和H5的生成与发布；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。1、教学手段：（1）通过理论加案例的方式讲解，帮助学生快速理解知识点；（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣。2、教学资料及要求：除教材中讲解的知识，可以通过其他渠道了解更多H5相关知识，加以学习。教学内容讨论问题：1、H5是什么？2、学好H5设计需具备哪些能力？3、H5的设计与制作流程是怎样的？内容大纲：具体可结合本章的PPT课件进行配合讲解。1.1 H5的基础知识1.1.1

2、 H5是什么1.1.2 H5的类型1.1.3 H5的风格1.1.4 H5的优势与不足1.1.5 H5页面设计的五大原则1.2如何学好H5设计1.2.1优秀的H5设计作品应具备的特点1.2.2 H5设计人员应具备的能力1.3 H5的设计与制作流程1.3.1明确设计目标1.3.2内容策划1.3.3页面设计1.3.4交互设计1.3.5 H5的生成和发布1.4项目实训项目一旅游推广H5页面素材的搜集与制作项目二邀请函H5页面素材的搜集与制作实战演练小结1、了解H5的基础知识。2、掌握如何学好H5设计。3、掌握H5的设计与制作流程先利用Photoshop对端午节图片素材（配套资源:素材第1章端午节素材.

3、psd）进行处理，制作端午节H5页面（配套资源:效果第1章端午节H5页面.psd），然后在MAKA中添加动画效果并进行预览。下图所示为参考效果。第2章认识H5的设计规范和工具180分钟4了解H5的设计规范掌握H5的图像、动效等元素设计工具掌握H5的设计生成制作工具掌握H5的创意开发工具了解H5的辅助设计工具H5的常用设计尺寸H5页面的安全区Photoshop、Illustrator、After Effects、Audition等元素设计工具MAKA、易企秀、兔展、人人秀、初页等H5制作工具意派Epub360、iH5等H5创意开发工具格式工厂、PS Play、TinyPNG、草料二维码等H5辅助

4、设计工具H5的设计规范H5的元素设计工具H5的设计生成制作工具H5的创意开发工具H5的辅助设计工具（1）通过对浏览器的选择、H5的常用设计尺寸、H5页面的安全区等知识进行讲解，让学生掌握H5的设计规范；（2）通过对Photoshop、Illustrator、After Effects、Audition进行介绍，让学生熟悉H5的元素设计工具；（3）通过对MAKA、易企秀、兔展、人人秀、初页等进行介绍，让学生熟悉H5的生成制作工具；（4）通过对意派Epub360、iH5等进行介绍，让学生熟悉H5的创意开发工具；（5）通过对格式工厂、PS Play、TinyPNG、草料二维码等进行介绍，让学生熟悉H

5、5的辅助设计工具；（6）通过项目实训练习本章知识；（7）安排实战演练巩固本章所学知识，提升设计能力与动手能力。（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；（3）对于重点内容进行着重讲解。除教材中讲解的这些工具软件，还可以了解其他工具的使用方法。知识回顾：在前面介绍了H5的基础知识，以及H5设计与制作的流程等内容。1、H5有哪些设计规范？2、H5有哪些页面元素的设计工具？3、H5的页面生成工具有哪些？4、H5有哪些创意开发工具？2.1 H5的设计规范2.1.1浏览器的选择2.1.2 H5的常用设计尺寸2.1.3 H5页面的安全区2.2 H5的元素设计工具2.2.1功能强大的设计

6、工具Photoshop2.2.2专业的矢量图绘制工具Illustrator2.2.3酷炫视频特效制作工具After Effects2.2.4音效设计制作工具Audition2.3 H5的设计生成制作工具2.3.1定制推广H5制作工具MAKA2.3.2企业营销H5制作工具易企秀2.3.3快速制作H5工具兔展2.3.4微场景H5制作工具人人秀2.3.5照片故事H5制作工具初页2.4 H5的创意开发工具2.4.1专业H5工具意派Epub36082.4.2在线编辑H5工具iH52.5 H5的辅助设计工具2.5.1音视频压缩工具格式工厂2.5.2手机预览设计稿PS Play2.5.3图片压缩工具Tiny

7、PNG2.5.4二维码生成工具草料二维码2.6使用MAKA制作H5活动页面使用格式工厂将JPG格式的图片转换为PNG格式1、掌握H5的设计规范。2、掌握H5的元素设计、生成制作、创意开发和辅助设计工具课后练习（1）使用人人秀中的素材制作H5页面，要求完成后的效果不但美观，而且能动态显示。完成后的参考效果如下图所示。（2）使用格式工厂将“夜景.png”（配套资源:素材第2章夜景.png）转换为TIF格式（配套资源:效果第2章夜景.tif）。（3）使用草料二维码将“夜景.png”图片生成二维码形式，夜景图片及完成后的参考效果如下图所示（配套资源:效果第2章夜景二维码.png）。第3章H5页面的设计

8、基础掌握H5原型图的相关知识掌握H5色彩相关知识掌握H5版面相关知识H5原型图的概念色彩三要素色彩与情感、氛围的关系H5页面版面类型H5原型图应具备的要素色彩搭配方法H5页面各类型设计要点1、教学思路：（1）通过讲解H5原型图是什么、H5原型图应具备的要素，让学生掌握H5原型图的基础知识；（2）通过介绍色彩的三大要素、色彩决定情感、色彩决定氛围、H5页面的配色方法，让学生掌握色彩的相关知识；（3）通过讲解H5版面类型，以及创建画面焦点、单页面视觉层级、多页面视觉层级、让版面设计的原则，学生掌握版面的相关知识；2、教学手段：（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；3、

9、教学资料及要求：除教材中讲解的知识，可以学习其他原型图绘制、色彩搭配和版面排版的相关知识。前面讲解了H5设计规范及各种设计工具等。1、什么叫H5原型图？有什么用？2、怎么让H5页面的色彩更有吸引力？3、怎么在H5页面中引导用户的浏览视线3.1 H5原型图3.1.1 H5原型图是什么3.1.2 H5原型图应具备的要素3.2色彩3.2.1/认识色彩的三大要素3.2.2色彩决定情感3.2.3色彩决定氛围3.2.4 H5页面的配色方法3.2.5案例分析“跑步App”H5页面的色彩分析3.3版面3.3.1认识H5版面类型3.3.2创建画面焦点3.3.3单页面视觉层级3.3.4多页面视觉层级3.3.5版面

10、设计的原则3.3.6分析“2020年度店长总结”H5页面版面布局3.4音乐H5页面的色彩与版面鉴赏抽奖H5页面的色彩与版面鉴赏1、掌握H5原型图的基础知识。2、掌握色彩、版面的相关知识。对下图所示的草莓音乐节H5页面进行鉴赏，分析其色彩运用与版面布局的特点。第4章H5页面的素材设计掌握H5页面的图片设计相关知识掌握H5页面的文字设计相关知识掌握H5页面的音效设计相关知识图片素材的获取H5页面中的文字及字体H5页面中音效素材的获取方法图片的设计原则H5页面标题文字和正文文字的设计技巧H5页面中音效素材的选择注意事项（1）首先讲解H5页面图片素材的获取方法、H5页面图片的设计原则，然后通过设计案例

11、进行理论与实践的结合学习；（2）接着认识H5页面中的文字及字体，讲解H5页面标题文字的设计技巧、H5页面正文文字的设计技巧等知识，再通过招聘H5页面文字的制作进行综合提升；（3）然后讲解H5页面中音效设计的重要性、H5页面音效素材的获取方法、H5页面音效的选择与添加注意事项等知识，并通过Audition音效制作巩固学习；除讲解教材中的知识外，可以了解图片设计、文字设计与音效设计的其他知识。在前面讲解了H5原型图、色彩、版面等H5页面设计的基础知识。1、哪些渠道可以获得H5页面的图片素材、音效素材？2、如何进行图片和文字的设计？3、选择音效时需注意哪些问题？4.1 H5页面的图片设计4.1.1 H5页面图片素材的获取方法4.1.2 H5页面图片的设计原则4.1.3设计案例裁剪H5页面的背景图片4.1.4调整H5页面的图片色彩4.1.5绘制H5页面的矢量人物4.1.6优化H5页面的图片效果4.2 H5页面的文字设计4.2.1认识H5页面中的文字及字体4.2.2 H5页面标题文字的设计技巧4.2.3