android 加载h5页面部分机型滑动卡顿回弹_网易爆款H5 的交互方法参考
在早些年，H5其实更像是手机上的PPT，只支持点击、滑动这些基础手势操作。以内容展示为主，交互形式为辅。
但到了今天，H5的玩法已经有了质的突破。不仅交互形式超多，形式与内容也能紧密结合，产生1+1大于2的效果。
01 单击交互
点击是最常见的手势之一，可以用在页面转场上。这种交互手势，一般需要设置点击引导。
引导可以作为注释帮助用户理解H5，让用户跟着H5的思路行动，推动剧情发展。与主题相符的个性化的引导设计，能快速将用户带入情境。
比如红网的《带上“希望的种子”去北京》中，用户可以点击行李传送带上的行李“开箱验货”，查看代表们的建议，聆听他们的故事。
H5用行李箱作为点击按钮，为用户搭建去北京的场景。即使不能亲临现场，也可以“参与”会议，了解到会议内容。
点击手势也常用在测试型H5上，用户点击屏幕选择不同选项，生成专属测试结果。
网易哒哒的《测测你的哲学气质》、《测测你是欢乐颂里的谁》、《饲养手册》都是测试型H5，只需简单的点击交互即可完成。
02 连击交互
连击交互主要应用在游戏类H5中。连续点击屏幕的节奏感比较强，关联点击次数与积分排名，则会带有竞技性，能刺激分享、吸引更多人参与。
这种单一的交互方式操作比较简单，所以会搭配限时、限次等玩法。
网易哒哒的《漫威电影十周年》H5设计了一个“揍”灭霸的环节，用户需要猛点屏幕，记录10秒内时间“揍”灭霸的次数。10秒结束后，用户可看到连击的次数和自己全网排名。
《守护你的幸运足球》属于不设置连击次数限制的H5。连击求精准不求数量，需要点击屏幕控制足球高度，不能“飞”得太高撞上飞鸟和石柱，也不能掉在地上。
《穿越中国70年》是网易哒哒出品的一支“庆祝新中国成立70年周年”的视频型H5。
其中“为祖国点赞”环节需要用户连击屏幕，每点击一次记为一分。连击时产生的爱心特效会变色，画面给用户新鲜感。
点赞创意来自短视频点赞，交互手势是用户熟悉的形式，有利于带动为祖国“打call”的积极情绪，增强体验感和沉浸感。
03 长按交互
长按需要用户根据引导，长时间接触H5页面中的某处按钮，保证画面的连续播放和顺利转场。
由于长按需要用户的手指保持静止的停顿状态，用户可能会感到无聊乏味。在设计时，最好可以提示H5的播放进度，给予用户时长参考。
长按交互常用于一镜到底形式的H5。往往考验故事的衔接和镜头的转换，运用得当可以带给用户很好的体验，让用户精神更加集中，从而提升完播率。
《你我当年》利用长按动作，用户可以用画中画形式畅快观看所有内容。
《武林外传》、《仙剑奇侠传》、《少年包青天》……H5回顾90后的童年暑期档，瞬间唤起童年记忆。
《1分钟漫游珠港澳大桥》也是通过长按前进，展示港珠澳大桥的风景。为了不让用户感到无聊，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会自动判断手机倾斜的角度。由于技术性比较强，所以重力交互常用在某个特定页面。
网易新闻的《时空恋爱事务所》就是利用手机重力传感器，摇晃手机唤醒主人公，开始剧情。
10 3D空间交互
3D交互主要利用3D技术，搭建立体化场景，突破画面扁平化的限制，强调层次感。
但这种交互方式在开发设计环节难度较大，考虑到用户的使用习惯，3D交互的玩法也比较单一，常搭配点击、滑动等基础手势操作，3D作为H5亮点出现。
《龙猫线上扭蛋机今日营业！》中将“扭蛋机”“金币”等元素3D化，原本正常比例的动漫人物Q版化。
扭扭蛋是一个动态的过程，如果使用二维平面形象，互动的效果并不明显；3D物体强调了用户的临场感，还原扭扭蛋未知的趣味性，H5玩起来更加真实。
11 全景交互
在360°全景形式中，用户可以上下、左右滑动。
这种H5以类VR的形式承载整个画面交互，更注重H5场景的设计，空间立体感比较强，要求画面360°边界衔接流畅。
不过由于加载内容较多，H5体量较大，很可能会出现播放时画面卡顿等问题。
网易新闻的《一廿间，二十载》呈现全景向的场景，向用户介绍网易20周年的发展历史，用户可以360°旋转手机，查看全景画面，沉浸于H5营造的虚拟场景中。
著作权归作者所有，本站根据CC0协议授权转发
商业转载请联系作者获得授权，非商业转载请注明出处
联系：[运营的小事]编辑
相关文章：
使用SDL打造游戏世界之入门篇 - 1
来源：天极开发 作者：维维编译 出处：巧巧读书 2007-07-17 进入讨论组 简介 Simple DirectMedia Layer, 简称SDL，是一个自由的跨平台的多媒体开 发包，主要通过OpenGL和2D视频帧缓冲(framebuffer)提供对音频、键盘、鼠标…
RBAC新解 - 基于资源的权限管理
1、什么是角色 当说到程序的权限管理时，人们往往想到角色这一概念。角色是代表一系列可执行的操作或责任的实体，用于限定你在软件系统中能做什么、不能做什么。用户帐号往往与角色相关联，因此，一个用户在软件系统中能做什么取决于…
《C#精彩实例教程》小组阅读07 -- C#字符与字符串
本微信图文详细介绍了C#中的字符与字符串。
syslog打印不带等级_printk的日志级别和控制台级别
printk根据日志级别(loglevel)对消息进行分类。日志级别用宏定义，日志级别宏展开为一个字符串，在编译时由预处理器将它和消息文本拼接成一个字符串，因此printk 函数中日志级别宏和格式字符串间不能有逗号。下面是两个printk的例子，…
《C#精彩实例教程》小组阅读08 -- C#流程控制语句
本微信图文详细介绍了C#的流程控制语句。
ASPJPEG缩略图生成函数
好久没有发文章，贴一段代码出来晒晒！一段aspjpeg组件生成缩略图的代码，有4种生成方式，建议用最后一种，生成的缩略图最清晰而且不会拉伸、变形！做图片生成最好不过！// 缩略图生成函数 Code By S…
java面试题收集
2019独角兽企业重金招聘Python工程师标准>>> 1.什么是B/S架构？什么是C/S架构 B/S(Browser/Server)，浏览器/服务器程序 C/S(Client/Server)，客户端/服务端，桌面应用程序 2.你所知道网络协议有那些？ HTTP&…
mobile还有人用吗 spring_话说，苹果手机语音备忘录功能还有人用吗？
hi，各位，苹果手机自带的语音备忘录功能还有人在用吗？前两天，有小伙伴在后台留言问：“苹果手机语音备忘录怎么恢复？”小编一时还有些恍惚“它是什么，手机上有吗？”，好在通…
MVC5 + EF6 完整入门教程三
期待已久的EF终于来了。 学完本篇文章，你将会掌握基于EF数据模型的完整开发流程。 本次将会完成EF数据模型的搭建和使用。 基于这个模型，将之前的示例添加数据库查询验证功能。 文章提纲 概述 & 要点 详细步骤 总结 概述 & 要点 下面是本文要点&…
Matlab编程与数据类型 -- 内联函数
本微信图文详细介绍了Matlab中的内联函数。
优化营商环境建议个人_优化营商环境的几点建议（三）
优化临沂的营商环境，重点是做好招商引资的后续环境优化！事关一个地区的财税收入，所以放眼全国，招商引资到哪里都是重点工作。早在2018年4月16日，临沂就召开了新旧动能转换暨开放型经济、招商引资工作动员大会ÿ…
基于Matlab的神经网络结合遗传算法在非线性函数极值寻优中的应用
本微信图文利用神经网络进行非线性函数数据的拟合并通过遗传算法对训练后的神经网络进行非线性函数极值寻优。
十分钟成为 Contributor 系列 | 为 TiDB 重构 built-in 函数
2019独角兽企业重金招聘Python工程师标准>>> 这是十分钟成为 TiDB Contributor 系列的第二篇文章，让大家可以无门槛参与大型开源项目，感谢社区为 TiDB 带来的贡献，也希望参与 TiDB Community 能为你的生活带来更多有意义的时刻。 …
研究生要这样度过！（转）
研究生要这样度过！ 首先要知道研究生期间做什么？我认为研究生期间学生应该学三件事情： 1）建立合理的知识结构：尽量广地涉猎学科基本知识，尽量深地了解所研究领域的 方方面面、过去和现在 2）掌握…
后端开发面试自我介绍_字节跳动暑期实习后端开发面试经历
字节跳动后端实习是什么，字节跳动后端实习面试流程是怎样？今天小编就来帮助大家了解一下字节跳动后端实习面试到底有什么内容。（好了不皮了，开始正文）字节的面试流程总的来说还是挺享受的，和面试官两人的思…
《C#精彩实例教程》小组阅读09 -- C#数组与集合
本微信图文详细介绍了C#的数组与集合。
Oracle执行计划突变诊断之统计信息收集问题
Oracle执行计划突变诊断之统计信息收集问题1. 情形描述DB version：11.2.0.4WITH SQL1 AS(SELECT LAC,CI,TO_NUMBER(C.LONGITUDE) LONGITUDE,TO_NUMBER(C.LATITUDE) LATITUDEFROM MB_SYS_CELL_INFO CWHERE C.CONTY_NAME 道孚县), SQL2 AS(SELECT DISTINCT IMSI, LA…
安装gym库_强化学习Gym库学习实践(一）
最近看了一篇研究方向相关的文章，介绍了一种DQN的应用，感觉还挺新鲜的。想着把这篇文章复现出来，就开始学习强化学习的相关知识，作为一名小白，这一路走的可是真的十分艰难（我太菜了啊！ÿ…
VS2005编译QT4.8.2
为什么要编译？ 因为安装安装版的QT4.8.2，vs2005编译报错。 1.下载QT4.8.2，qt-everywhere-opensource-src-4.8.2.zip，下载vs-AddIn1.1.11. 2.解压QT源码包到C盘， 这里路径为 c:\qt\4.8.2\。 3.配置系统环境变量…
Don’t Use the Win32 API PostThreadMessage() to Post Messages to UI Threads(翻译)
大龙的博客C博客 | 首页 | 发新随笔 | 发新文章 | 联系 | 聚合 | 管理 Don’t Use the Win32 API PostThreadMessage() to Post Messages to UI Threads(翻译) Don’t Use the Win32 API PostThreadMessage() to Post Messages to UI Threads不要用Win32 API PostThreadMessage…
Matlab编程与数据类型 -- 文本M文件
本微信图文详细介绍了Matlab中的文本M文件。
安卓x86_Android：虚拟机体验基于安卓10的BlissOS V12.2 Android X86版
我是科技鲁工，今天带来基于Android10的x86版本的Bliss os的安装体验。喜欢的朋友可以关注支持一下。Bliss OS是一个基于Android x86项目的开源操作系统，能让您在PC电脑或平板电脑设备上运行最新的Android 10操作系统。该系统基于AOSP(Android开放源代码项…
《C#精彩实例教程》小组阅读10 -- C#属性与方法
本微信图文详细介绍了C#的属性与方法。
JavaScript中几个重要的知识点（1） ---- 面向对象
JavaScript中几个最重要的大知识点 面向对象DOM事件异步交互ajax面向对象 在JS中可以把任意的引用和变量都看成是一个对象。面向对象的主要三个表现形式： 封装继承多态1. 封装 1.1 单例模式 var obj{name: "sam",age: 12,method: function(){var objNamet…
scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离
轉自:http://www.cnblogs.com/mrhgw/archive/2006/11/08/553737.html 补充： scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的…
连接服务器_命令行连接FTP服务器
Windows下： 打开命令行窗口，输入 ftp，进入ftp命令模式： 输入 open ip地址 端口，进入ftp服务器，如open 172.16.3.77 2121。如下图： 输入Windows下的用户名，然后输入密码（注意：密码是不显示的，输入用户名密码不能时间太长，否则连接断掉）。 查看ftp服务器中的文件，输…
mapreduce作业reduce被大量kill掉
之前有一段时间。我们的hadoop2.4集群压力非常大。导致提交的job出现大量的reduce被kill掉。同样的job执行时间比在hadoop0.20.203上面长了非常多。这个问题事实上是reduce 任务启动时机的问题，因为yarn中没有map slot和reduce slot的概念，且ResourceMan…
Matlab编程与数据类型 -- M文件的编辑和存储
本微信图文详细介绍了Matlab中M文件的编辑和存储。
一个老工程师对理工科学生的忠告
[1]好好规划自己的路，不要跟着感觉走！根据个人的理想决策安排，绝大部分人并不指望成为什么院士或教授，而是希望活得滋润一些，爽一些。那么，就需要慎重安排自己的轨迹。从哪个行业入手，逐渐对该行…
64 安装_解决“不能安装 64 位Office，因已安装 32 位 Office 产品”问题
换了个电脑装64位的Office 2010(Office_64)，双击setup刚准备装，就收到以下错误提示：“不能安装 64 位版本的 Office 2010，因为您当前已经安装 32 位 Office 产品。64 位安装不支持 32 位产品安装：如果要安装 64 位 Off…