H5互动设计说明？
点击是最常见的手势之一，可用于页面过渡。这种交互手势一般需要设置点击引导。
指导可以作为评论，帮助用户了解H5，让用户跟随H5的想法，促进剧情发展。符合主题的个性化引导设计能迅速将用户带入情境。
比如在红网的“把希望的种子带到北京”，用户可以点击行李传送带上的行李进行“拆包检查”，查看代表们的建议，听听他们的故事。
H5用行李箱作为一个点击按钮，为用户构建一个去北京的场景。即使不能亲自到现场，也可以“参与”会议，了解会议内容。
点击手势也常用于测试H5，用户点击屏幕选择不同的选项，并生成独家测试结果。
网易的《测测你的哲学气质》《欢乐颂测测你是谁》《喂食手册》都是测测H5，只需点击互动即可完成。
02组合互动
连击互动主要用于游戏H5。持续点击屏幕节奏感强，点击量和积分排名的相关性会有竞争性，可以激发分享，吸引更多人参与。
这种单一的互动模式操作起来比较简单，所以会结合限时和限时的玩法。
网易的“漫威漫画电影十周年”H5设计了一个“击败”灭霸的链接，用户需要点击屏幕记录10秒内“击败”灭霸的次数。10秒后，用户可以看到combo的数量及其在全网的排名。
守护你的幸运足球属于H5，没有连击次数的限制。为了精确而不求数量，你需要点击屏幕来控制足球的高度。不能“飞”得太高撞到鸟和石柱，也不能掉到地上。
《穿越中国70年》是网易为庆祝新中国成立70周年制作的视频《H5》。
其中“为祖国点赞”链接要求用户双击屏幕，每点击一次计一分。combo时产生的爱情特效会变色，画面会给用户新鲜感。
赞的创意来源于短视频赞，交互手势是用户熟悉的形式，有利于带动为祖国“呐喊”的正面情绪，提升体验感和沉浸感。
03长按互动
长按需要用户根据引导长时间触摸H5页面中的一个按钮，以保证画面的连续播放和平滑过渡。
因为长时间的按压需要用户的手指保持静止的暂停状态，所以用户可能会感到厌烦。在设计时，最好能提示H5的播放进度，在时长上给用户一个参考。
长按交互经常以镜像的形式用于H5。经常考验故事的衔接和镜头的转换。使用得当可以给用户带来良好的体验，让用户更加专注，从而提高播放率。
通过长按动作，用户可以自由观看画中画形式的所有内容。
《武林外传》和《仙剑奇侠传》
04长像视差互动
长画面的视差互动经常以滑动手势进行，这驱使H5连贯地播放。
视差动画由于与主视觉画面的运动速率不同，具有更鲜明的空间层次感。
这样可以增加画面的新鲜感，缓解高密度内容带来的视觉疲劳。减轻阅读长篇图文的厌烦，协助H5从画面效果中平稳过渡。
网易的《自白》就是用这种方式把故事往下滑，把主角的变化呈现给用户。使用滑动手势控制故事播放，让用户更有参与感。
“你要的都是好的，我们尽力做好”以滑动长图+视差动画的形式，带领用户从1988到2018，串联起兴业银行30年的发展历程。
童话里遇见你的时候用的是长画面，滑动的时候会在场景中插入一些小元素，让整个H5看起来很酷很丰富。
05拖放交互
拖动不同于滑动。你需要抓住屏幕，从一个点拖动到另一个点。移动速度由用户控制，适合策划图片展示或叙事等专题。
网易的“睡姿大赛”H5采用骨骼动画技术，用户可以拖动小人的四肢，在床上DIY自己的睡姿。
除了选择场景和人物，H5还在床上提供小物件进行搭配，可以放大或缩小来装饰卧室。
06双指变焦交互
双指交互要求用户同时用两个手指触摸屏幕，例如滑动屏幕来放大或缩小某些东西，也常用于图片过渡。
这种交互需要手势的微操作，玩法有些复杂。但是交互比单指点击滑动更强更有趣。
网易新闻的H5《坚持比新闻更接近真相》采用了穿越时空的设定，设计了两指放大手势进入下一页。单击按钮查看当前页面的详细信息。每个页面上统一的手势很容易让用户理解。
07语音交互
除了触觉交互，还有听觉交互。语音交互比较少见，多与录音有关。按照H5指导，录一段，DIY生成专属音频。
网易云音乐的“有故事的单曲直播”就是让用户录音，讲述自己的故事，创建录音文件。录制完成后，会生成一张带有副本的定制海报。
用声音控制H5也可以表现为自选的音乐片段，DIY成一首完整的歌曲。
网易云音乐的“放音乐，我从来没有害怕过”允许用户从几个音效中选择自己喜欢的风格，然后对原曲进行调音，生成个性化的音乐。
DIY制作的音乐代表个人喜好，具有一定的社交属性。
08写作互动
书写交互是一种自由度很高的交互方式，用户可以根据提示自由创作文字和图片。
通过绘画创造的图像是独特的，并反映了用户的情绪。面对自己画的人物，用户可以更用心地投入到H5中，流失率往往不高。
网易的《里约大冒险》给了用户一些指导，根据提示画出了小人、绳子、降落伞的形象。
虽然这些图像的线条略显粗糙，运动与背景形成鲜明对比，但由于是原创人物，用户对画面的包容性更强。
文本部分的写作交互常用于测试类H5。用户根据提示输入姓名或想说的话，生成海报得到测试结果。
网易新闻的H5“保护你名字中的汉字”可以输入你自己的名字，找到需要你自己保护的濒危汉字。
H5测试产生了日常生活中很少使用的生僻字。“守护”汉字的主题，既能让用户了解这些濒危汉字，又能赋予他们使命感，积极分享传播。
09重力相互作用
模拟现成的物理规律，可以大大降低理解的门槛，增加规划的趣味性。
移动电话为硬件技术的发展提供了许多可能性。使用重力传感器，陀螺仪，速度加速器和其他硬件设备可以创新H5游戏，增加代入感。
当摇晃手机时，H5会自动判断手机的倾斜角度。因为是技术性的，重力交互经常用在特定的页面。
网易新闻的《时空恋办公室》就是利用手机的重力传感器晃动手机唤醒主角，开始剧情。
103D空间交互
3D交互主要利用3D技术构建三维场景，突破了平面屏幕的限制，强调层次感。
然而，这种交互模式在开发和设计中难度较大。考虑到用户的使用习惯，3D交互玩法相对简单，往往结合点击、滑动等基础手势，3D作为H5的一大亮点出现。
“我的龙猫在线扭蛋游戏今天开放！“拧蛋器”“金币”等元素为3D，正常比例的原创动漫角色为q版。
拧鸡蛋是一个动态的过程。如果使用二维图像，交互效果并不明显。3D物体强调用户的存在感，还原扭蛋的未知乐趣，H5玩起来更逼真。
11全景互动
在360°全景形式下，用户可以上下左右滑动。
这款H5以类VR的形式承载整个画面交互，更注重H5场景的设计，立体感强，要求画面360°边界平滑衔接。
但由于加载内容多，H5体积大，播放时很可能会出现画面卡顿等问题。