[案例分享]H5页面制作的五大理念

H5页面制作的玩法无外乎4类：基于传感器、基于触摸屏操作、基于画面呈现、基于内容。4类之中可再分小类，实际使用中可以只用1种，也可以多个类别穿插起来使用，实战中又可以有诸多变化的。但前三种类型是基础，基于内容的玩法主要是图文混排展示内容，答题类游戏等与内容强相关的玩法，实际上他们也会多多少少与另外三类搭上点关系的。

基于传感器

手机上的传感器有陀螺仪、GPS、摄像头、麦克风、震动传感器、光线传感器、距离传感器等。现在智能手机普及率很高，可以放心设计玩法，但要注意结合业务本身选用相关的合适的传感器，不要随意搭配或随意叠加多个传感器，避免画蛇添足。例如做位置相关的，就选用GPS，做VR的需求就选用陀螺仪。

陀螺仪和重力感应在体感H5中用的比较多，比如打篮球、打网球，举哑铃、控制风车转动、检查手机是否平躺/竖直、全景图/AR转换角度，举哑铃就是一个简单直接有效的健康类H5活动创意。很多人分不清陀螺仪和重力感应区别是什么，小九简单的说明下，陀螺仪是可以追踪手机在XYZ三维空间的运动，而重力感应呢，你本来把手机拿在手里是竖着的，你将它转90度，横过来，它的页面就跟随你的重心自动反应过来。假如你想用手机控制星战中的激光剑的挥动，那就一定要用到陀螺仪。

案例：

（1）动我试试

用户通过使劲摇动手机唤醒呆坐的TA，随即惊爆出的带感动态画面，使原本呆坐的TA，神采飞扬，奔跑又冲浪，随后跳入别克威朗车内

地理位置

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

案例：杜蕾斯全民抓喜鹊

点击GO!!!!!进入游戏，游戏与地图结合在地图可以随时看见自己的位置，如果发现了小喜鹊，只要走向它，用篮圈将其圈住，点击捕捉即可。

人脸识别

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

案例：

（1）腾讯：我的魔兽我主演

上传自己露出五官的照片，在成型的海报上加上伤疤、眼睛等装饰物。

基于触摸屏操作

除了利用传感器创造特别的玩法外，在触摸屏上的操作也有多种玩法，如单屏滚动、手势操作、全景交互及多屏互动。在触摸屏上的操作要符合用户的正常习惯，例如滑动屏幕可以翻页、移动场景，双指拉开表示放大操作。默认提供操作示范，切记！切记！此外，可操作区域也要弄大些，方便用户操作，不要想象玩家是专业级玩家，这在策划和测试的时候要注意。

单屏滚动

这是一种很常见的交互形式。翻屏时可以加上一些转换的动画，如渐入渐出，使得翻页效果生动不单调，也可以加上重力感应，让手机在转动时产生视差效果。

案例：

（1）in一周年庆邀请函
用色彩讲述故事，一次滑动之后全屏自动切换，美轮美奂，并有真声留言，最后送出邀请函，邀你参加一周年庆典。

基于画面呈现

这类玩法一般就是展现一段比较酷炫有趣的画面内容，如视频、动画、特效，给用户带来视觉上的感官享受，用户也可以通过与画面内容互动，看自己想看的内容。

视频/动画展示

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

这个玩法的主要制作方式有：

1、 视频。主要用AE实现，能制作出很炫的效果，但成本较高，业内都是按秒计算。

2、 使用canvas制作，这种方式可以制作出像以前的flash一样的动画，效果没视频酷炫，但这类动画既可以看，又可以在播放途中自然地添加交互，用原生代码来写，难度非常大，推荐使用createjs、egret、layabox和cocos引擎工具等。

3、 使用H5+css3制作，这种方式也能像方式2一样制作出动画，但制作难度和复杂度都比方式2大，而且但是受限于手机硬件问题，暂不推荐这种方式。

案例：

（1）薛之谦史上最疯狂的广告

首页是模拟的薛之谦微博界面，开始滑动不几下至后画面一黑，薛之谦出现在画面里开始讲导演让他代言腾讯动漫的原因和过程，内容结合了二次元世界人民喜欢的腐（两个男的在一起）、骚（因为一个巧克力少年被全校女生喜欢）、逗（被面瘫少女报复），最后煽情得抱着一个动画女主走向千山万水，原来这时候才是正式开拍宣传海报，一声action薛之谦被定格在海报上。

小编想说各位老板如果您想做H5页面，可以找我们厚昌网站建设，或者关注我们的微信公众号营销型网站建设，了解更多关于建站的知识。

同时加好友，即可免费获赠价值8888元的网站诊断方案，每日仅限前三名~

营销型网站建设企业群1群：285276820，和更多的建站精英一起交流分享经验

厚昌建站，5年间专注于营销型网站建设，“敬畏您的每一分钱