一、首先从功能与设计目标来看， H5专网页主要有以下4大类型：
1.活动运营型
为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
2.品牌宣传型
不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
3.产品介绍型
聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。
这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
4.总结报告型
自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
二．形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。
1.简单图文
简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。
2.礼物/贺卡/邀请函
每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。
3.问答/评分/测试
问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。
4.游戏
从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。
三．为设计加分的4个要点
一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：
1.细节与统一
要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。
2.紧跟热点，利用话题效应
想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。
3.讲个好故事，引发情感共鸣
不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。
4.合理运用技术，打造流畅的互动体验
随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。
结语
随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。
问题分析：
html5网站主要由html+css+js的形式组成，需要使用浏览器进行展现。
Android需要使用Java语言来开发，对于前端工程师来说，无疑是增加了很大的难度。
随后出现了很多打包工具，来协助我们将网页元素打包成手机app，将我们编写的html转化为Java语言。
解决方案：
推荐一款我们常用的打包工具：HBuilder。
该工具不仅提供了Android应用打包，还可以直接连接手机进行调试，配合HTML5+可以实现很多Android原生的功能。比如：扫码二维码，拍照，摇一摇等等。
具体操作步骤：
1、真机调试
进入软件后，第一步点击“运行”，第二步点击“手机运行”，第三步选择已连接的手机，示例中我使用的是安卓模拟机进行连接的。市面上常用的几款安卓模拟机器都可以直接连接上。
按如上几个步骤操作后，会自动执行打包并将应用安装在链接的手机（模拟器）中，可以操作手机（模拟机）进行测试。
2、打包生成Android的安装格式apk文件
① 打开软件，选择发行->发行为原生安装包，随即打开下图窗口。
② 勾选Android复选框，如果使用Dcloud公用证书的话，可以直接进行打包，手机可以安装使用。如果需要上传发行到第三方应用平台的话，需要使用自有证书，自用证书可以使用JRE自带的创建和管理数字证书的工具Keytool来生成自有证书，生成过程是免费的。
勾选Android选项后，在下方表单中填写Android包名，为保证唯一性，可以使用自有网站域名的反写方式加上应用名称。如果使用自有证书的话，还需要填写证书别名，密钥密码，证书文件。
填写完毕后，点击打包，即可生成apk文件。
其他注意事项：
1、在开发过程中，不需要进行打包，应更多的使用真机调试，可以节约很多时间。
2、开发完毕后，尽可能在各种版本的android机器上做一下测试，因为一些网页的样式在不同的android版本中呈现的效果略有不同。
3、重新编辑一下html5网站代码，将一些网页功能转换为手机功能，比如网页元素的<a>标签跳转，就应该使用Webview来完成。可以解决页面切换白屏的问题，还可以提高网站在手机中的运行效率。
微信版本太低造成的不支持，操作方法如下；
1、首先打开手机上的微信，在弹出的微信界面中，点击下面的“我”。
2、然后在打开的设置页面中，点击“设置”选项，如下图所示。
3、接着在打开的设置页面中，进入”通用“设置，如下图所示。
4、然后在打开的页面中，点击红色框里的“发现页管理”，如下图所示。
5、现在看到“摇一摇”后面的图标是灰色的，这时点击打开，如图所示，“摇一摇”功能就已经打开了。
