数媒巴士HTML5案例

Posted 2021-04-04 西邮艺苑党员工作站

---

（1）动我试试

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

（2）一“陆”狂飙，极速挑战

内容分两个部分展现，前半部分借助视频的形式展开，紧接着进入游戏环节，通过左右遥控手机躲避行驶过程中的障碍物，最后进行排名和抽奖。

地理位置

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

人脸识别

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

案例：

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

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

（2）我的小学生证件照

点击上传自己的自拍照片就可以生成属于自己的小学证件照，而且可以点击屏幕右侧的“换基因”生成不同造型的证件照。

基于触摸屏操作

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

单屏滚动

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

案例：

  in一周年庆邀请函

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

手势操作

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

案例：

脑洞大过天，月饼究竟能做啥？

月饼究竟能做啥，打开看到白熊和冰皮月饼，点选和拖拽的方式将冰皮月饼放到白熊头上做耳朵。

基于画面呈现

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

视频/动画展示

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

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

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

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

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

案例：

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

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

（2）一镜到底，一刀未剪的大剧发布

跟随视线的深入，在色彩斑斓的画面中回顾那些很火很热的剧集和综艺，轻松愉快的BGM，个性分明的大咖，光彩夺目的荧屏巨星逐一呈现在画面中。在屏幕下方戳一戳优酷图标，画面就会变换为万花筒。

（3）劳斯莱斯BlackBadge化身黑暗骑士

采用快闪加图文切换的形式来展现，黑色的主色调以大气和高贵唯美的存在整个案例中，配合诸多经典黑色美学电影的精彩片段，即体现了对黑色美学的致敬又突出了新车型Black
Badge也融入了黑色美学的特质。

全景交互

全景交互指将用户置于一个360度环绕的图片/视频环境下进行沉浸式的体验，用户可以通过转动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏，带上VR眼镜，则可以进行VR体验。相关技术主要是3d旋转操作、陀螺仪方面的技术，全景图插件有造物节使用的css3d-engine，全景视频组件有Valiant360，还有一些收费组件如krpano。

----END----