HTML5页面
- h5是第五代HTML，也指H5语音制作的一切数字化产品
为什么要做H5页面
移动优先、产品社会化、交互趣味化、跨平台、开发成本低、易于传播
规范
字体
1、用系统自带字体即可，如苹方/san francisco、黑体简/华文黑体/Helvetica neue、
2、H5如果用特殊字体的话，只能用图片切出来。
3、字号建议大于18px，偶数进行设计。
规格尺寸
1、手机端一般采用750 * 1334px进行设计，如果考虑做一屏尺寸，高度方面要考虑减去手机系统栏，以及微信App导航栏的高度。
即1334-40-88=1206，将重要内容控制在750 * 1206px以内，最好不要过高一适配各种机型。如果做长界面，则高度不限；
2、可点击控件尽量和屏幕保持在20-30ox的距离；
3、为不同电子设备单个布局，背景颜色使用纯色而非渐变。
排版
- 视觉聚焦，排版集中
在有限的手机屏幕空间内，最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。
动效
前期跟前端设计师进行沟通，讨论页面中元素的动效呈现，例如一些元素的位移，旋转，翻转，缩放，淡入淡出等；
音效
考虑到用户使用场景的多样性，如果要加背景音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰到别人之前可以关闭。
交互
慎用向右滑动的交互方式
如：刮刮乐涂抹效果，左右滑动页面等。原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果
慎用横屏展示效果
原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高，对不同屏幕手机，长宽比例不一，难以展示最佳的视觉效果。
数据真相
- 只有微信推送的情况下，H5活跃周期最多三天。
- 最佳发布推送时间为21点到22点。
- 6到8页最佳浏览页数，页数过多或单页体量过大会增加到H5跳失率。
想法
被大众主流乐于分享的信息大概有几种：
- 最直接的利益驱动，分享有奖或者需要众筹等；
- 最自己有用并且也对周围人也会有新鲜感的信息；
- 自己参与游戏或者测试得到的结果；
H5的功能与设计目标
1、活动运营型
为活动推广运营而打造的H5 页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡，测试题等形式。
2、品牌宣传型
不同于讲究时效性的活动运营型，品牌宣传型H5页面等同于同一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精得很态度。
3、产品介绍型
聚焦于产品功能介绍，运营H5的互动技术优势尽情展示产品特性。
4、总结报告型
起始——支付宝的十年账单
常见的H5表现形式
1、简单图文
简单图文是早期最经典的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。
2、礼物/贺卡/邀请函
通过提升用户好感度来潜移默化地达到品牌宣传的目的
3、问答/评分/测试
利用用户的求知欲和探索与，一路选选选，看最后到底是什么成绩。
4、游戏
H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生厌倦。
如何设计一款好的H5页面？
1、细节与统一
要成就高品质的用户体验，必须考虑到细节与整体的统一性。
2、紧跟热点，利用话题效应
想要H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传不失为一条捷径。
3、讲个好故事，引发用户共鸣
不论H5的形式如何多变，有价值的内容始终是第一位的，在有限的篇幅里，学会讲故事，引发用户共鸣，将对内容的传播形式形成极大的推动。
4、合理地运用技术，打造流畅的互动体验
随着硬件的升级，H5技术的发展以及微信平台的开放，H5的跨平台、低成本、快迭代等优势被进一步凸显。
