H5页面的三种设计原理及玩法

一个好的策划人员（运营人员、设计师，这个视不同公司，岗位不同），若要做一个优秀的创意方案，必须得了解自html5发布以来的新玩法。下面H5游戏制作公司小编就来给大家科普一下H5页面的三种设计原理及玩法。

一、基于传感器

1、地理位置

结合位置提供LBS服务，百度地图之前做过一个在地图上找附近的麦当劳的活动；也可以与运动结合，如记录用户的跑步轨迹，但是H5不是APP，如果关闭了就不能检测了，如果真的检测运动轨迹的话，建议还是到点打卡的方式会更合适。游戏可参考 pokemon go的玩法，在用户的位置附近散落奖品，让用户走到目的地收集奖励。

2、人脸识别

用人脸融合H5开发，玩法有根据人脸猜测年龄、猜情绪，测试与明星脸的匹配度，将人脸和游戏电影人物相结合（电影宣传用），将人脸变成小时候的样子（生成高考证），将人脸变成年老的样子（这个创意适合做美容美妆行业），根据人脸的动作做出反馈（比如嘴巴喷火、眼睛放闪电）等，通常跟AR和图片合成技术搭配使用。相关技术主要是人脸识别和人脸动作捕捉的技术，腾讯有提供优图识别技术，微软也有提供人脸识别技术。

二、基于触摸屏操作

1、单屏滚动

这是一种很常见的交互形式。翻屏时可以加上一些转换的动画，如渐入渐出，使得翻页效果生动不单调，也可以加上重力感应，让手机在转动时产生视差效果。单屏滚动的应用场景比较广泛，很多主页、产品介绍、报告总结、邀请函都应用了这种形式。

2、手势操作

我们和屏幕交互，除了有点击、滑动外，还有很多手势操作，如拖拽、放大、所辖、旋转、画图。切水果和愤怒的小鸟都是非常不错的手势操作典型案例。

三、基于画面呈现

1、视频/动画展示

这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。视频/动画生动酷炫有趣味，以及常常有明星参与演出，用户一般不会太抗拒这样的广告，反而会喜欢点赞，甚至主动向朋友分享。这个玩法适合用于产品、节日、游戏、电影等宣传场景及叙述内容比较多的场景。

2、全景交互

全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验，用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏，带上VR眼镜，则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示。与此类似的还有商品的360度展示，用户拖动商品即可看到不同角度下商品的样子。

3、多屏互动

多屏互动指在多个屏幕上体验活动，各自的操作会同时反应到其他屏幕上，一般以双屏互动为主。玩法有多人合作或竞技、你画我猜、一问一答、情侣互动、线下与现场观众互动、多个屏幕拼起来看视频等，也可以把手机作为遥控手柄，用大屏幕来显示。制作此类活动时，切记注意场景，上百人的大场和十几个人的中场和几个人的小场是不同的，策划上完全不同，大屏只有一个，人一多就要考虑到展示的问题，要么只实时展示战绩，要么只展示一瞬间的头像（主区域，视动作而定，比如一次击杀、一次抢赢，夜店霸屏也是不错的参考）。

以上就是我们H5页面定制开发的三种原理，并附带了几种玩法，如果你对这种宣传工具比较感兴趣，可以咨询我们蓝橙互动网站客服，为你定制开发H5页面，蓝橙互动专注H5开发服务长达7年，精通各类型H5页面开发，相信能够满足你的需求。