H5页面创意设计课程教学教案Word格式文档下载.docx
《H5页面创意设计课程教学教案Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《H5页面创意设计课程教学教案Word格式文档下载.docx（24页珍藏版）》请在冰豆网上搜索。
（3）对H5的设计与制作流程进行介绍，包括明确设计目标、内容策划、；
页面设计、交互设计和H5的生成与发布；
（4）通过项目实训练习本章知识；
（5）安排实战演练巩固本章所学知识，提升设计能力与动手能力。
1、教学手段：
（1）通过理论加案例的方式讲解，帮助学生快速理解知识点；
（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣。
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页面素材的搜集与制作
实战演练
小结
1、了解H5的基础知识。
2、掌握如何学好H5设计。
3、掌握H5的设计与制作流程
先利用Photoshop对端午节图片素材（配套资源:
\素材\第1章\端午节素材.psd）进行处理，制作端午节H5页面（配套资源:
\效果\第1章\端午节H5页面.psd），然后在MAKA中添加动画效果并进行预览。
下图所示为参考效果。
第2章
认识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）安排实战演练巩固本章所学知识，提升设计能力与动手能力。
（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣；
（3）对于重点内容进行着重讲解。
除教材中讲解的这些工具软件，还可以了解其他工具的使用方法。
知识回顾：
在前面介绍了H5的基础知识，以及H5设计与制作的流程等内容。
1、H5有哪些设计规范？
2、H5有哪些页面元素的设计工具？
3、H5的页面生成工具有哪些？
4、H5有哪些创意开发工具？
2.1H5的设计规范
2.1.1
浏览器的选择
2.1.2H5的常用设计尺寸
2.1.3H5页面的安全区
2.2H5的元素设计工具
2.2.1
功能强大的设计工具——Photoshop
2.2.2
专业的矢量图绘制工具——Illustrator
2.2.3
酷炫视频特效制作工具——AfterEffects
2.2.4
音效设计制作工具——Audition
2.3H5的设计生成制作工具
2.3.1
定制推广H5制作工具——MAKA
2.3.2
企业营销H5制作工具——易企秀
2.3.3
快速制作H5工具——兔展
2.3.4
微场景H5制作工具——人人秀
2.3.5
照片故事H5制作工具——初页
2.4H5的创意开发工具
2.4.1
专业H5工具——意派Epub3608
2.4.2
在线编辑H5工具——iH5
2.5H5的辅助设计工具
2.5.1
音视频压缩工具——格式工厂
2.5.2
手机预览设计稿——PSPlay
2.5.3
图片压缩工具——TinyPNG
2.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页面的设计基础
掌握H5原型图的相关知识
掌握H5色彩相关知识
掌握H5版面相关知识
H5原型图的概念
色彩三要素
色彩与情感、氛围的关系
H5页面版面类型
H5原型图应具备的要素
色彩搭配方法
H5页面各类型设计要点
1、教学思路：
（1）通过讲解H5原型图是什么、H5原型图应具备的要素，让学生掌握H5原型图的基础知识；
（2）通过介绍色彩的三大要素、色彩决定情感、色彩决定氛围、H5页面的配色方法，让学生掌握色彩的相关知识；
（3）通过讲解H5版面类型，以及创建画面焦点、单页面视觉层级、多页面视觉层级、让版面设计的原则，学生掌握版面的相关知识；
2、教学手段：
（1）采用理论加案例的方法进行讲解，引导学生快速熟悉并掌握相关知识；
3、教学资料及要求：
除教材中讲解的知识，可以学习其他原型图绘制、色彩搭配和版面排版的相关知识。
前面讲解了H5设计规范及各种设计工具等。
1、什么叫H5原型图？
有什么用？
2、怎么让H5页面的色彩更有吸引力？
3、怎么在H5页面中引导用户的浏览视线
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页面的色彩与版面鉴赏
1、掌握H5原型图的基础知识。
2、掌握色彩、版面的相关知识。
对下图所示的草莓音乐节H5页面进行鉴赏，分析其色彩运用与版面布局的特点。
第4章
H5页面的素材设计
掌握H5页面的图片设计相关知识
掌握H5页面的文字设计相关知识
掌握H5页面的音效设计相关知识
图片素材的获取
H5页面中的文字及字体
H5页面中音效素材的获取方法
图片的设计原则
H5页面标题文字和正文文字的设计技巧
H5页面中音效素材的选择注意事项
（1）首先讲解H5页面图片素材的获取方法、H5页面图片的设计原则，然后通过设计案例进行理论与实践的结合学习；
（2）接着认识H5页面中的文字及字体，讲解H5页面标题文字的设计技巧、H5页面正文文字的设计技巧等知识，再通过招聘H5页面文字的制作进行综合提升；
（3）然后讲解H5页面中音效设计的重要性、H5页面音效素材的获取方法、H5页面音效的选择与添加注意事项等知识，并通过Audition音效制作巩固学习；
除讲解教材中的知识外，可以了解图片设计、文字设计与音效设计的其他知识。
在前面讲解了H5原型图、色彩、版面等H5页面设计的基础知识。
1、哪些渠道可以获得H5页面的图片素材、音效素材？
2、如何进行图片和文字的设计？
3、选择音效时需注意哪些问题？
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.3
升级会员 