H5|短视频浪潮下，H5真的落后了吗？( 四 )
文章图片
4. 长图视差交互长图视差交互常搭配滑动手势进行，带动H5连贯播放。
文章图片
视差动画由于运动速率与主视觉画面不同，空间层次感更加鲜明。这可以增加画面的新鲜感，缓解高密度内容带来的的视觉疲劳。减少阅读长图文时的乏味，从画面效果上辅助H5流畅转场。
《我在童话里遇到你的时光》使用一张长图，滑动时会有一些小元素穿插过场，使得整支H5看起来炫酷又丰富。
文章图片
5. 拖拽交互拖拽区别于滑动，需要按着屏幕不松手，从一个点拖到另一个点，移动速度由用户控制，适合图片展示类或叙事类的策划专题。
文章图片
网易哒哒的《睡姿大比拼》H5利用了骨骼动画技术，用户可以拖动小人的四肢，DIY自己在床上的睡姿。
除了可以选择场景、人物外貌，H5还提供床上的小物件做搭配，放大或缩小后用来布置卧室。
文章图片
6. 双指缩放交互双指交互需要用户两只手指同时接触屏幕，比如滑动屏幕放大或缩小某物，也常用于画面转场。
文章图片
这种交互方式对手势的微操有要求，玩法有些复杂。但互动性比单指点击、滑动更强，也更具趣味性。
在H5中，也有一种较常见的回答问题的方式，也会用到拖拽与双指缩放交互手势并用的场景。
文章图片
7. 录音交互除了触觉交互，还有听觉交互。声音交互方式比较少见，大多与录音有关，按照H5引导录一段话，DIY生成专属音频。
文章图片
8. 书写交互书写交互是自由度较高的互动方式，用户可以根据提示自由创作文字、图画。
文章图片
通过绘画创作出来的形象个性鲜明，也是用户情绪的体现，面对自己绘制的角色，用户也能更用心地投入到H5，流失率往往不高。
这些形象虽然线条有些粗糙，运动起来与背景对比鲜明，但是因为是原创角色，用户对画面的包容性也更强。
网易新闻的H5《以你之名，守护汉字》可以输入自己的名字，找到需要自己守护的濒危汉字。
H5测试生成的都是日常很少用到的生僻字，主题“守护”汉字，既可以让用户认识这些濒危汉字，也能够给予用户一种使命感，将汉字主动分享传播。
9. 重力交互模拟现成的物理规律能大大降低理解门槛，还能为策划增添趣味性。
手机在硬件上给出了很多技术发挥的可能性，活用重力感应、陀螺仪、速度加速器等硬件设备可以创新H5玩法，增加代入感。摇晃手机时，H5会自动判断手机倾斜的角度。
由于技术性比较强，所以重力交互常用在某个特定页面。
网易新闻的《时空恋爱事务所》就是利用手机重力传感器，摇晃手机唤醒主人公，开始剧情。
文章图片
10. 3D空间交互3D交互主要利用3D技术，搭建立体化场景，突破画面扁平化的限制，强调层次感以及还原用户的临场感，H5玩起来更加真实。
但这种交互方式在开发设计环节难度较大，考虑到用户的使用习惯，3D交互的玩法也比较单一，常搭配点击、滑动等基础手势操作，3D作为H5亮点出现。
文章图片
11. 全景交互在360°全景形式中，用户可以上下、左右滑动。
这种H5以类VR的形式承载整个画面交互，更注重H5场景的设计，空间立体感比较强，要求画面360°边界衔接流畅。
不过由于加载内容较多，H5体量较大，很可能会出现播放时画面卡顿等问题。
文章图片
好，有关H5营销、品牌、互动相关的内容就这儿～
你对这几类H5有什么深刻回忆吗？或者现在流行的短视频直播、电商直播有什么看法？欢迎大家留言交流，一起进步。
预告一波：下一期我将会分享产品用户社区相关内容哦～～
文章图片
素材来源：上述案例素材来源网络及网易哒哒团队，仅作交流学习。
作者：圣杰，一个乐观而幽默的理想主义者。专注互联网运营及研究，交流学习微信：heezha。个人微信公众号：运营进化史，欢迎大家一起交流～
本文由 @圣杰 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
推荐阅读
- 海报视频｜仍在救援！山西临汾一饭店坍塌|海报视频｜仍在救援！山西临汾一饭店坍塌 已致5人遇难 医院目击者：救护车就没停过
- 郑恺|蔡徐坤做饭导演不让帮忙，杨颖郑恺真的不管，只有他实在看不下去帮了忙
- 发长|沈梦辰发长视频谈淘汰，《大碗宽面》成员现身评论区，对沈梦辰的称呼好宠
- 帅不过三秒|心态国服号被官方封禁，北慕赖神深受牵连，妖刀第一视角视频回放证明清白
- 通知书|高校通知书真的送土！网友：好好种地
- 庄子|微信怎么发长视频，微信朋友圈发5分钟长视频教程！
- 表现|《中餐厅》贴心小赵表现圈粉，她是真的来开餐厅的
- 土耳其国防部公布视频称土战机27日驱离多架抵近的希腊战机
- 放飞自我|郑爽的“真”，让所有人原谅了她的“作”
- 明星婚姻|马伊琍真的变了！以前有多“卑微”，现在就有多“高傲”