Skip to content

H5的展现形式以及玩法:

基于传感器: 类别 玩法或适用场景 陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果 地理位置 提供周边生活服务、与运动结合、上班打卡功能、外勤人员的工作监控、类似QQ的AR红包和pokemon go玩法、展示附近的优惠和广告 人脸识别 体感游戏、将用户样貌与节日/游戏/电影等主题元素相结合进行宣传的场景、用户样貌与明星脸相似度测试、猜用户年龄、猜情绪、模拟化妆 webRTC 视频会议、视频聊天、在线教育、在线问诊等视频/音频通讯的场景

基于触摸屏操作: 类别 玩法或适用场景 全景交互 虚拟全景展示、身临其境的实景展示或活动现场展示、商品360度展示 多屏互动 朋友间合作/竞技游戏、你画我猜、一问一答、情侣互动、多个屏幕拼起来看视频、投屏应用、线下现场观众互动 单屏滚动 公司主页、产品介绍、报告总结、邀请函等展示类场景 手势操作 商品图片放大查看场景、图片拖拽/旋转等编辑场景、手势解锁、拼图游戏 陀螺仪、重力感应 体感游戏、摇一摇、全景图/AR转换角度、转动手机制造视差效果

基于画面呈现: 类别 玩法或适用场景 视频/动画展示 产品、节日、游戏、电影等宣传场景;内容比较丰富的场景 图片裁剪和形变 类似变形金刚、七巧板形式的图片转换效果展示场景 3D场景展示、3D动画展示

基于内容:

如果以场景为维度来展开推荐玩法,则可参考下图所示: 
 

基于传感器 这类玩法依靠手机上的传感器实现,这些传感器有陀螺仪、gps、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。大家在设计玩法的时候,要结合业务本身选用相关的合适的传感器,不要随意搭配或随意叠加多个传感器,避免画蛇添足。例如做周边生活类的需求,就应该选用gps传感器获取地理位置,做全景图的需求就选用陀螺仪来提供便捷的交互。 陀螺仪、重力感应 这类交互在体感游戏中比较常见,如控制射箭的方向、挥剑、打乒乓球等,而在H5中则可用于摇一摇、控制赛车左右前进、检查手机是否平躺/竖直、全景图/AR转换角度等,也可以用于制造视差效果(如王者荣耀的登录界面),使画面富有层次感。

基于触摸屏操作: 手势操作 我们和屏幕交互,除了有点击、滑动外,还有很多手势操作,如拖拽、双指拉开放大、双指画圈旋转物体,画图形表示某个动作等。手势操作可用于放大查看图片、对图片进行拖拽/放大/旋转等编辑、手势解锁、也可以用于游戏上,如拼图游戏时拖拽、旋转拼图碎片。 在实现上,H5有一个手势操作库hammer.js,可以实现常用的手势操作。 

基于画面呈现: 这类玩法一般就是展现一段比较酷炫有趣的画面内容,如视频、动画、特效,给用户带来视觉上的感官享受,用户也可以通过与画面内容互动,看自己想看的内容。 视频/动画展示 这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。由于视频内容比较生动酷炫有趣味,以及常常有明星参与演出,用户一般不会太抗拒这样的广告,反而会喜欢点赞,甚至主动向朋友分享。有很多刷屏H5都是这个类型的,例如薛之谦XQQ动漫、韩寒X使命召唤等。这个玩法适合用于产品、节日、游戏、电影等宣传场景及叙述内容比较多的场景。 这个玩法的主要制作方式有:
1、视频。这种方式需要前期拍摄、后期使用专门的视频软件(如AE)制作,能制作出很炫的效果,但成本较高,用户通常只能被动地观看完整段视频。 2、使用canvas制作,这种方式可以制作出像以前的flash一样的动画,效果没视频酷炫,但这类动画既可以看,又可以在播放途中自然地添加交互,相关组件有createjs、egret等。 3、使用H5+css3制作,这种方式也能像方式2一样制作出动画,但制作难度和复杂度都比方式2大,而且也有可能带来性能问题。

全景交互 全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验,用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏,带上VR眼镜,则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示。与此类似的还有商品的360度展示,用户拖动商品即可看到不同角度下商品的样子。 相关技术主要是3d旋转操作、陀螺仪方面的技术,全景图插件有造物节使用的css3d-engine ,全景视频组件有 Valiant360,还有一些收费组件如krpano。

多屏互动

3D场景展示 http://ali-qin12.test.neone.com.cn/index.html 3D动画展示 https://g.alicdn.com/fdilab/flyover-taobao-online-wx/index.html

1:视频的形式展示故事.在视频上面加上互动. 2:3d形势展现 ,视觉效果主导,程序加分. 3:h5还可以人脸识别玩起来,包括拍照的人脸的所有数据,把人脸单独拿出来合并到视频里面. 4:h5小游戏也是一个比较不错的.