在早些年,H5其实更像是手机上的PPT,只支持点击、滑动这些基础手势操作。以内容展示为主,交互形式为辅。
但到了今天,H5的玩法已经有了质的突破。不仅交互形式超多,形式与内容也能紧密结合,产生1+1大于2的效果。
01 单击交互
![a4d406ea-5e27-eb11-8da9-e4434bdf6706.png](http://p01.5ceimg.com/content/a4d406ea-5e27-eb11-8da9-e4434bdf6706.png)
点击是最常见的手势之一,可以用在页面转场上。这种交互手势,一般需要设置点击引导。
引导可以作为注释帮助用户理解H5,让用户跟着H5的思路行动,推动剧情发展。与主题相符的个性化的引导设计,能快速将用户带入情境。
比如红网的《带上“希望的种子”去北京》中,用户可以点击行李传送带上的行李“开箱验货”,查看代表们的建议,聆听他们的故事。
H5用行李箱作为点击按钮,为用户搭建去北京的场景。即使不能亲临现场,也可以“参与”会议,了解到会议内容。
![a5d406ea-5e27-eb11-8da9-e4434bdf6706.png](http://p01.5ceimg.com/content/a5d406ea-5e27-eb11-8da9-e4434bdf6706.png)
点击手势也常用在测试型H5上,用户点击屏幕选择不同选项,生成专属测试结果。
网易哒哒的《测测你的哲学气质》、《测测你是欢乐颂里的谁》、《饲养手册》都是测试型H5,只需简单的点击交互即可完成。
02 连击交互
![a7d406ea-5e27-eb11-8da9-e4434bdf6706.png](http://p01.5ceimg.com/content/a7d406ea-5e27-eb11-8da9-e4434bdf6706.png)
连击交互主要应用在游戏类H5中。连续点击屏幕的节奏感比较强,关联点击次数与积分排名,则会带有竞技性,能刺激分享、吸引更多人参与。
这种单一的交互方式操作比较简单,所以会搭配限时、限次等玩法。
网易哒哒的《漫威电影十周年》H5设计了一个“揍”灭霸的环节,用户需要猛点屏幕,记录10秒内时间“揍”灭霸的次数。10秒结束后,用户可看到连击的次数和自己全网排名。
![aad406ea-5e27-eb11-8da9-e4434bdf6706.png](http://p03.5ceimg.com/content/aad406ea-5e27-eb11-8da9-e4434bdf6706.png)
《守护你的幸运足球》属于不设置连击次数限制的H5。连击求精准不求数量,需要点击屏幕控制足球高度,不能“飞”得太高撞