H5

HTML5页面

H是第五代HTML，也是H5语言制作的一切数字化产品

为什么做H5页面

移动优化、产品社会化、交互趣味化、跨平台、开放成本低、易传播

字体

1.用系统自带字体做即可，如平方／黑体简、华文黑体／Helvetica neue、思源黑体／Roboto、微软雅黑。。。

2.H5如果用特殊字体的话，只能用图片切出来；

3.字号建议大于18px，偶数进行设计。

规格尺寸

1.手机端一般采用750*1334进行设计，如果考虑一屏尺寸，高度方面要考虑减去手机系统栏，以及微信APP导航栏的高度，即1334-40-88=1206，将重要内容控制在750*1206px内，最好不要过高以适配各种机型。如果做长页面，则高度不限；

2.可点击控件尽量和屏幕保持20～30px的距离；

3.为不同电子设备单个布局，背景色尽量使用纯色而非渐变。

排版：视觉聚焦，排版集中

在有限的手机屏幕空间内，最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优

动效

前期跟前端设计师进行沟通，讨论页面中元素的动效呈现。例如一些元素的位移，旋转，翻转，缩放，淡入淡出等。

音效

考虑到用户使用场景的多样性，如果要加音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰别人之前可以关闭。

交互

慎用向右滑动的交互方式

如：刮刮乐涂抹效果，左右滑动翻页等。

原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果。

慎用横屏展示效果

原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。

关于H5的一些数据真相

1.只有微笑推送的情况下，H5的活跃周期最多3天

2.最佳发布推送的时间为21点到22点

3.6页到8页为H5最佳浏览页面数，页面过多或单页体量过大会增加H5跳失率（不超过20页）

想法

被大众主流乐于分享的信息大概有这么几种：

1.最直接的利益驱动，分享有奖或者需要众筹等

2.对自己有用并且也对周围人也会有新鲜感的信息(标题党）

3.自己参加游戏或者测试得到的结果

H5的功能与设计图标

1活动运营型

为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏 邀请函 贺卡 测试题等形式

2品牌宣传型

不同于讲究实效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度

3产品介绍型

聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特征

4总结报告型

起始—支付宝的十年账单

常见的H5专题页表现形式

1简单图文

简单图文是早期最典型的H5专题页形式。

“图”的形式千变万化，可以是照片、插画、GIF等 

2礼物贺卡要情感

通过提升用户好感度来潜移默化地达到品牌宣传的目的

3问答／评分／测试

利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩

4游戏

H5游戏因为操作简单、经济性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦（最好不要做）

如何设计一款好的H5页面

1细节与统一

要成就高品质的用户体验，必须考虑到细节与整体的统一性

2紧跟热点，利用话题效应（称热度）

想要H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传不失为一条捷径

3讲个好故事，引发情感共鸣

不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，讲对内容的传播形成极大的推动。

4合理运用技术，打造流畅的互动体验

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，html5的跨平台、低成本、快迭等优势被进一步凸显