h5物体拖动_网易爆款H5 的交互方法参考

本文详细介绍了H5的各种交互形式,包括单击、连击、长按、长图视差、拖拽、双指缩放、声音、书写、重力和3D空间交互,展示了如何通过这些交互提升用户体验,创造更丰富的H5内容。
摘要由CSDN通过智能技术生成

在早些年,H5其实更像是手机上的PPT,只支持点击、滑动这些基础手势操作。以内容展示为主,交互形式为辅。

但到了今天,H5的玩法已经有了质的突破。不仅交互形式超多,形式与内容也能紧密结合,产生1+1大于2的效果。

01 单击交互

a4d406ea-5e27-eb11-8da9-e4434bdf6706.png

点击是最常见的手势之一,可以用在页面转场上。这种交互手势,一般需要设置点击引导

引导可以作为注释帮助用户理解H5,让用户跟着H5的思路行动,推动剧情发展。与主题相符的个性化的引导设计,能快速将用户带入情境。

比如红网的《带上“希望的种子”去北京》中,用户可以点击行李传送带上的行李“开箱验货”,查看代表们的建议,聆听他们的故事。

H5用行李箱作为点击按钮,为用户搭建去北京的场景。即使不能亲临现场,也可以“参与”会议,了解到会议内容。

a5d406ea-5e27-eb11-8da9-e4434bdf6706.png

点击手势也常用在测试型H5上,用户点击屏幕选择不同选项,生成专属测试结果。

网易哒哒的《测测你的哲学气质》、《测测你是欢乐颂里的谁》、《饲养手册》都是测试型H5,只需简单的点击交互即可完成。

02 连击交互

a7d406ea-5e27-eb11-8da9-e4434bdf6706.png

连击交互主要应用在游戏类H5中。连续点击屏幕的节奏感比较强,关联点击次数与积分排名,则会带有竞技性,能刺激分享、吸引更多人参与。

这种单一的交互方式操作比较简单,所以会搭配限时、限次等玩法。

网易哒哒的《漫威电影十周年》H5设计了一个“揍”灭霸的环节,用户需要猛点屏幕,记录10秒内时间“揍”灭霸的次数。10秒结束后,用户可看到连击的次数和自己全网排名。

aad406ea-5e27-eb11-8da9-e4434bdf6706.png

《守护你的幸运足球》属于不设置连击次数限制的H5。连击求精准不求数量,需要点击屏幕控制足球高度,不能“飞”得太高撞

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值