到达目的地：广东科贸职业技术学院
eid与广东科贸职业技术学院合作促成了这次上分教程！棒棒哒
是不是身边悄然出现了很多链接，一按进去各种炫酷的表现形式的广告，让你记忆深刻又觉得好玩？但其实它是什么呢？
相信大家都中过这个“毒”吧？
没错这就是H 5！今天就让miki老师带大家去学习这些酷炫的技能，制作自己心目中的H5，开阔一下同学们设计的眼光，让大家在设计之路走得更远，成为设计的最强王者吧！
what？why？how？想上王者做国服第一？那就往下看～
想在设计上冲分上王者么？找miki包无错！
叮叮叮上课了
到达课室，清早同学们的睡意犹存，那就来一发H5精神气爽吧！请跟着miki老师拿出你的手机！
看吧，骚年！这就是H5的威力！
H5到底为何物？能吃么？
H5是指第五代HTML，也指用H5语言制作的一切数字产品。简单地说就是网页和网页内容了。现如今更多地被人们所理解某种在微信等移动端看上去酷炫能够提升公司品牌而又能广泛分享的东西了。H5之所以能够引发如此广泛的效应，除了它够炫酷，根本在于能提供音视频、图像动画、本体储存以及更多重要的功能，使得我们的创意都能通过H5来展现综上所述，我们可以了解到H5的三大作用:
H5的种类呢？你又知否？
H5是指第五代HTML，也指用H5语言制作的一切数字产品。简单地说就是网页和网页内容了。现如今更多地被人们所理解某种在微信等移动端看上去酷炫能够提升公司品牌而又能广泛分享的东西了。H5之所以能够引发如此广泛的效应，除了它够炫酷，根本在于能提供音视频、图像动画、本体储存以及更多重要的功能，使得我们的创意都能通过H5来展现综上所述，我们可以了解到H5的三大作用：
前面miki老湿说到了三大作用，对应常见的H5种类也有三种：
展示型更多用于品牌的塑造以及陈述页面内容，设计上运用符合主题的视觉语言，让用户留下深刻印象。话不多说，请同学们拿出手机扫描二维码感受一下吧！
积极参与交互才能更好地人性化设计呢
游戏型是以小游戏形式让互动更有趣，以提高大家的参与度并增加分享几率，游戏形式多样充满趣味。
互动型通过文案与图片吸引用户参与活动，或结合现实生活场景去捕捉用户情感，往往好的创意会使互动性有更强的传播性。三种类型都各自有吸引眼球和传播效果强的优点，所使用的地方就要因内容而定了，但是H5对于交互是一种绝好的载体是无可置疑了。
如何制作H5
前面和同学们说了H5那么多的优点，那就不吊大家胃口，接下来就和miki老师探讨制作的方法吧。
暂且我们就先了解在设计方面要做的工作，分别为需求分析与规划 、交互设计与视觉设计。
miki老湿在课堂上模拟一个需求来引导同学们认识流程：光棍节
分析其中包含的元素是很有必要哒~
a）分析
接收到一个需求时，如果没有固定形式，我们就需要根据产品特点来制定H5；若有形式，我们就可以下一步，但无论如何，先思考，再动手。心急可是吃不了热豆腐哒～
b）规划
根据光棍节的主题我们要想怎么吸引人打开？怎么提高转发度？怎样紧贴时事热点？我们要进行方向定位、形式定位、风格定位。
c）交互稿
在设计时我们应该仅需要简单的线框图来表达出页面的流程，按钮的作用，点击引发的效果等即可。简单明了，一击必杀！
以“光棍节”为原型的H5基础
d）视觉稿
交互稿确认之后我们可以先制作情绪版，注意检查页面达到功能、视觉、交互要求，以便于我们视觉稿的制作。页面中要突出自己的画面效果就要有核心元素，不宜过多，突出重点即可。
画龙点睛，给你的H5加分
a）细节与统一
要考虑用户体验最佳，就要注意细节与整体的统一，要注意动效与主题的符合性。也要把握好细节，例如小小的分享提示，如果细节真的好，好感度显而易见。想要与用户有共同话题？那就关注时下热点，尝试融入话题进你的H5，这样也不失为借机宣传品牌的捷径。谁说宅人不能工作了哈。
以“光棍节”为原型的H5基础
b）讲个故事 引发情感共鸣
除了借助时下热点话题推动宣传，我们大可以打感情牌，在有限的篇幅里学会对用户讲故事，引发用户的情感共鸣，用情怀去制作。随着技术的发展，如今手机加入了大量交互功能，H5同样能利用这些功能为用户体现出流畅而且新潮的互动体验。
看到童年，是不是会有触动？
优秀H5欣赏
讲完枯燥的理论还有实践的方法，不如让同学们开开眼界，看看这些年优秀而又好玩的H5吧～
同学们对h5抱有很大兴趣呢
