本文汇总了当前最流行的H5交互手势，包括单击、连击、长按、长图视差、拖拽、重力、3D空间和全景交互。通过案例分析，展示了如何巧妙结合这些手势，提升用户体验，如《漫威电影十周年》的连击交互和《你我当年》的长按体验。同时，文中探讨了各种交互在设计时的注意事项，以创造更好的沉浸式体验。
在早些年，H5其实更像是手机上的PPT，只支持点击、滑动这些基础手势操作。以内容展示为主，交互形式为辅。
但到了今天，H5的玩法已经有了质的突破。不仅交互形式超多，形式与内容也能紧密结合，产生1+1大于2的效果。
本期来汇总一下当下最热门的H5交互手势。
单击交互
点击是最常见的手势之一，可以用在页面转场上。这种交互手势，一般需要设置点击引导。
引导可以作为注释帮助用户理解H5，让用户跟着H5的思路行动，推动剧情发展。与主题相符的个性化的引导设计，能快速将用户带入情境。
比如红网的《带上“希望的种子”去北京》中，用户可以点击行李传送带上的行李“开箱验货”，查看代表们的建议，聆听他们的故事。
H5用行李箱作为点击按钮，为用户搭建去北京的场景。即使不能亲临现场，也可以“参与”会议，了解到会议内容。
点击手势也常用在测试型H5上，用户点击屏幕选择不同选项，生成专属测试结果。
连击交互
连击交互主要应用在游戏类H5中。连续点击屏幕的节奏感比较强，关联点击次数与积分排名，则会带有竞技性，能刺激分享、吸引更多人参与。
这种单一的交互方式操作比较简单，所以会搭配限时、限次等玩法。
《漫威电影十周年》H5设计了一个“揍”灭霸的环节，用户需要猛点屏幕，记录10秒内时间“揍”灭霸的次数。10秒结束后，用户可看到连击的次数和自己全网排名。
《穿越中国70年》是一支“庆祝新中国成立70年周年”的视频型H5。
其中“为祖国点赞”环节需要用户连击屏幕，每点击一次记为一分。连击时产生的爱心特效会变色，画面给用户新鲜感。
点赞创意来自短视频点赞，交互手势是用户熟悉的形式，有利于带动为祖国“打call”的积极情绪，增强体验感和沉浸感。
长按交互
长按需要用户根据引导，长时间接触H5页面中的某处按钮，保证画面的连续播放和顺利转场。
由于长按需要用户的手指保持静止的停顿状态，用户可能会感到无聊乏味。在设计时，最好可以提示H5的播放进度，给予用户时长参考。
长按交互常用于一镜到底形式的H5。往往考验故事的衔接和镜头的转换，运用得当可以带给用户很好的体验，让用户精神更加集中，从而提升完播率。
《你我当年》利用长按动作，用户可以用画中画形式畅快观看所有内容。H5回顾90后的童年暑期档，瞬间唤起童年记忆。
长图视差交互
视差动画由于运动速率与主视觉画面不同，空间层次感更加鲜明。
这可以增加画面的新鲜感，缓解高密度内容带来的的视觉疲劳。减少阅读长图文时的乏味，从画面效果上辅助H5流畅转场。
《你想要的每个好，我们都努力做好》用滑动长图+视差动画的形式，带领用户从1988年穿越到2018年，串联起兴业银行的30年发展历史。
《我在童话里遇到你的时光》使用一张长图，滑动时会有一些小元素穿插过场，使得整支H5看起来炫酷又丰富。
拖拽交互
拖拽区别于滑动，需要按着屏幕不松手，从一个点拖到另一个点，移动速度由用户控制，适合图片展示类或叙事类的策划专题。
《睡姿大比拼》H5利用了骨骼动画技术，用户可以拖动小人的四肢，DIY自己在床上的睡姿。
除了可以选择场景、人物外貌，H5还提供床上的小物件做搭配，放大或缩小后用来布置卧室。
重力交互
手机在硬件上给出了很多技术发挥的可能性，活用重力感应、陀螺仪、速度加速器等硬件设备可以创新H5玩法，增加代入感。
摇晃手机时，H5会自动判断手机倾斜的角度。由于技术性比较强，所以重力交互常用在某个特定页面。
网易新闻的《时空恋爱事务所》就是利用手机重力传感器，摇晃手机唤醒主人公，开始剧情。
3D空间交互
3D交互主要利用3D技术，搭建立体化场景，突破画面扁平化的限制，强调层次感。
但这种交互方式在开发设计环节难度较大，考虑到用户的使用习惯，3D交互的玩法也比较单一，常搭配点击、滑动等基础手势操作，3D作为H5亮点出现。
《龙猫线上扭蛋机今日营业！》中将“扭蛋机”“金币”等元素3D化，原本正常比例的动漫人物Q版化。
扭扭蛋是一个动态的过程，如果使用二维平面形象，互动的效果并不明显；3D物体强调了用户的临场感，还原扭扭蛋未知的趣味性，H5玩起来更加真实。
全景交互
在360°全景形式中，用户可以上下、左右滑动。
这种H5以类VR的形式承载整个画面交互，更注重H5场景的设计，空间立体感比较强，要求画面360°边界衔接流畅。
不过由于加载内容较多，H5体量较大，很可能会出现播放时画面卡顿等问题。
网易新闻的《一廿间，二十载》呈现全景向的场景，向用户介绍网易20周年的发展历史，用户可以360°旋转手机，查看全景画面，沉浸于H5营造的虚拟场景中。
— 今日福利 —
被PPT虐了千百遍，因PPT熬了无数个日夜。
可到底怎么做好PPT？
一盏私藏PPT模板礼包+视频课程
私信小编即可获得领取方法哦
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
