了解H5带来的新能力及其带来的玩法，给你一点灵感。

Html5从2014年底的初露锋芒到2015年的全面火爆，再到2016年的沉淀，H5依然是品牌Social传播的首选。因为这是一种新技术，很多策划朋友往往不知道如何策划，或者不知道无拘无束的想法是否能实现，所以在策划中，每个想法都在咨询技术人员，没有技术人员，需要供应商提供技术咨询服务，但这样的规划周期有点痛苦。还是那句话，“夫源远流长，根深叶茂”。一个好的策划者(运营商和设计师，这取决于不同的公司和职位)，要想做出优秀的创意方案，就必须了解html5发布以来的新玩法。本文也适用于规划H5活动的必要参考文件。当你想要灵感的时候，你可以看看。经过对2000个H5案例的深入分析，我总结出了四种玩法:基于传感器、触摸屏操作、图片呈现和内容。4类可分为小类，实际使用只能使用一类，也可以穿插在多个类别中使用，这取决于天赋，动作，实际战斗可以有很多变化。前三种类型是基础，本文将从这三种类型开始，分别介绍各种类型下的游戏玩法，基于内容的游戏玩法主要是图形混合排列显示内容、答案游戏和其他与内容强相关的游戏玩法，事实上，他们或多或少会与其他三种类型有关。总体纲要：1、基于传感器2、基于触摸屏操作3、基于图片呈现1、基于传感器的读者也可以直接跳到他们感兴趣的部分进行阅读。此外，如手机振动、光传感器（检测环境光强度，决定是否打开键盘灯和屏幕背光）、距离传感器(带距离传感器的手机在我们打电话后把听筒放在脸上时屏幕变黑)等。这些功能不常用，暂时不介绍，读者可以自己查找相关信息。手机上的传感器有陀螺仪，GPS、相机、麦克风、振动传感器、光传感器、距离传感器等。现在智能手机的普及率很高，你可以放心设计游戏玩法，但我们应该注意结合业务本身选择相关合适的传感器，不要随意匹配或叠加多个传感器，以避免画蛇。例如，如果位置相关，则选择GPS，如果需要VR，则选择陀螺仪。陀螺仪和重力感应广泛应用于体感H5，如打篮球、打网球、举哑铃、控制风车旋转、检查手机是否平躺/垂直、全景/AR转换角度等。举哑铃是一个简单、直接、有效的健康H5活动创意。很多人分不清陀螺仪和重力感应有什么区别。简单来说，陀螺仪可以跟踪XYZ三维空间手机的运动。至于重力感应，你手里拿着手机是垂直的。如果你把它转90度，它的页面会随着你的重心自动反应。如果你想用手机控制星战中激光剑的挥动，你必须使用陀螺仪。案例(1)动我试试？用户用力摇动手机唤醒坐着的TA，然后爆出感人的动态画面，让坐着的TA精神饱满，奔跑冲浪，然后跳进别克威朗车(2)玩耐心测试用户耐心的小游戏。用户保持手机不变的姿势并计时。一旦姿势发生变化，游戏就结束了。(3)一个“陆”飙升，快速挑战内容分为两部分展示，前半部分以视频的形式展开，点击主页上的“ENGINESTART“进入视频部分，在朋友圈、今日头条等场景中介绍速度和激情电影情节，视频部分的结尾给出了游戏挑战和游戏规则，然后进入游戏链接，通过左右遥控手机避免驾驶过程中的障碍物，最后，排名和抽奖。（4）中秋节的正确开放方式以中秋节的正确开放方式为主题，通过“聚集”和“独立”两种状态，反映了中秋节的不同状态，也是生活中的不同状态，达到共鸣。（4）中秋节的正确开放方式以中秋节的正确开放方式为主题。通过“聚集”和“独立”两种状态，反映了中秋节的不同状态，也是生活中的不同状态，以达到共鸣。相比之下，翻转手机180度，切换状态，非常独特。百度地图提供LBS服务，在地图上找到附近的麦当劳；也可以与运动结合，如记录用户的跑步轨迹，但H5不是APP，如果关闭不能检测，如果真的检测运动轨迹，建议打卡更合适。游戏可以参考pokemongo的玩法，奖品散落在用户位置附近，让用户到目的地收集奖励。案例：杜蕾斯全民抓喜鹊点击GO！!!!!当你进入游戏时，游戏和地图结合在地图上，你可以随时看到你的位置。如果你发现了一只小喜鹊，就走到它身边，用篮圈把它圈起来，点击捕捉它。你可以随时看到附近游戏的在线人数和可爱的小喜鹊，收集一定数量的喜鹊也可以兑换奖品哦！！人脸识别与人脸和H5互动，根据人脸猜测年龄，猜测情绪，测试与明星脸的匹配，人脸和游戏电影角色（电影宣传），人脸成为童年（生成高考），人脸成为老（这个想法适合美容行业），根据人脸动作反馈（如嘴喷雾、眼闪电）等，通常与AR和图片合成技术相结合。相关技术主要是人脸识别和人脸动作捕捉技术，腾讯提供优图识别技术，微软也提供人脸识别技术。案例：（1）腾讯：我的魔兽主演H5主题是主演你自己的魔兽，在两张海报中选择他们最喜欢的海报风格，上传他们的面部特征照片，在成型海报上添加疤痕、眼睛等装饰，点击完成，即完成海报制作，可以生成海报，可以分享朋友圈。（2）点击上传我的小学生身份证照片，生成我自己的小学身份证照片，点击屏幕右侧的“改变基因”生成不同形状的身份证照片。（2）点击我的小学生身份证照片，上传我自己的自拍照片，生成我自己的小学身份证照片，点击屏幕右侧的“更改基因”，生成不同形状的身份证照片。亮点：虽然黄色背景和蓝色底片的颜色对比非常强烈，但它们并没有给人一种突兀的感觉。人脸识别合成的照片恢复非常真实。(3)Snapchat嘉得乐饮料迎头浇水AR滤镜嘉得乐在Snapchat上推出了基于AR技术的滤镜，可以让球迷在胜利时感受到嘉得乐饮料迎头浇水的兴奋。在与广告商的合作方面，史努比本身在《史努比花生电影》的广告中非常受欢迎。用户愿意与他们“合影”。他们还可以吐出类似彩虹特效的糖果。UGC的传播效果很好。webRTCWebRTC，它是一种支持网页浏览器进行实时语音对话或视频对话的技术，是谷歌在2010年以6820万美元收购GlobalIPSolutions公司时获得的一项技术，可见Google布局的深远。WebRTC提供视频处理和音频处理技术，Web开发者只需编写简单的Javascript程序，无需*多媒体数字信号处理过程。由于硬件条件的限制，目前的任何想法都无法实现，更不用说传播了，但你可以继续*它，并在不久的将来使用它。2、基于触摸屏操作，除了使用传感器创建特殊的游戏玩法外，触摸屏上还有多种游戏玩法，如单屏滚动、手势操作、全景交互和多屏交互。触摸屏上的操作应符合用户的正常习惯。例如，滑动屏幕可以翻转页面和移动场景，双手指打开表示放大操作。默认情况下提供操作示范，记住！切记！此外，还应扩大可操作区域，以方便用户操作。不要想象玩家是专业玩家，在规划和测试时要注意。单屏滚动是一种非常常见的交互形式。翻转屏幕时，可以添加一些转换动画，如逐渐进出，使翻页效果生动不单调。还可以添加重力感应，使手机在旋转时产生视差效果。单屏滚动的应用场景广泛，这种形式应用于许多主页、产品介绍、报告总结和邀请函。案例：（1）in一周年邀请函以色彩讲述故事。滑动后，全屏自动切换，美观真实。最后，发送邀请函，邀请您参加一周年庆典。(2)我的S7王者之路是一款图文展示H5。页面加载完成后，屏幕不断向上滑动，可以查看Initial王者S7赛季的赛季称号、获得的星数、战场荣耀、生命英雄、给力伙伴、赛季神坑、黑CP、自己的战斗伙伴，以及具体的数据分析，点击案例结尾的“查看我的王者之路”按钮。你可以看看你的王者之路。与此同时，H5案例使用重力感应，在体验的同时摇晃手机，画面也会随之摇晃。同时，H5案例使用重力感应，同时摇晃手机，图片也会摇晃。手势操作我们与屏幕交互，除了点击、滑动，还有很多手势操作，如拖动、放大、管辖、旋转、绘图。切水果和愤怒的鸟都是典型的手势操作案例。案例:脑洞大于天，月饼能做什么？月饼能做什么？打开它，看看白熊和冰皮月饼。通过点击和拖动，将冰皮月饼放在白熊的头上做耳朵（你的第一反应真的是耳朵吗？嘻嘻)进入下一个环节，把月饼放在礼盒里送心，并且有脑洞指数，最后附上相应的月饼购买链接。3、这种基于图片呈现的游戏玩法通常是展示一个更酷和有趣的图片内容，如视频、动画和特效，给用户带来视觉感官享受。用户还可以通过与图片内容互动来查看他们想要看到的内容。视频/动画展示等H5将播放长时间但有趣、生动的视频或动画，以吸引用户对其宣传内容的*。视频/动画生动、酷、有趣，明星们经常参与表演。用户通常不会太抗拒这样的广告。相反，他们会喜欢表扬，甚至主动与朋友分享。该游戏适用于产品、节日、游戏、电影等宣传场景和叙事内容较多的场景。该游戏的主要制作方法有：视频。AE主要用于实现，可以产生非常炫目的效果，但成本较高，行业按秒计算。 使用canvas制作，可以像以前的flash一样制作动画，效果不如视频酷。但是，这种动画不仅可以观看，还可以在播放过程中自然添加交互。很难用原始代码编写。建议使用createjs、egret、layabox和cocos引擎工具等。使用H5 css3制作，也可以像方法2一样制作动画，但制作难度和复杂性大于方法2，但受手机硬件问题的限制，暂时不推荐。案例:(1)薛之谦历史上最疯狂的广告首页是模拟的薛之谦微博界面，开始滑动几次，直到画面变黑。薛之谦出现在画面中，开始讲导演让他代言腾讯动画的原因和过程。内容结合了二维世界人民喜爱的腐败(两个男人在一起)、骚(因为全校女生都喜欢巧克力少年)、逗逗(被面瘫少女报复)，最后耸人听闻的抱着一个动画女主走向千山万水，原来此时正式开拍宣传海报，一声action薛之谦被定格在海报上。(2)一镜到底，一刀未剪的大剧发布跟随视线的深入，在五彩缤纷的画面中回顾热播剧集和综艺节目，轻松愉快的BGM，个性鲜明的大咖，耀眼的银幕巨星一个个呈现在画面中。(2)一镜到底，一刀未剪的大剧发布跟随视线的深入，在五彩缤纷的画面中回顾热播剧集和综艺节目，轻松愉快的BGM，个性鲜明的大咖，耀眼的银幕巨星一一呈现在画面中。在屏幕底部戳一下优酷图标，图片就会变成万花筒。YOUKU会员推广界面在H5的最后呈现。(3)劳斯莱斯BlackBadge化身为黑暗骑士，是目前非主流快闪类型，为大家提供启发思路。H5案例以闪光和图形切换的形式显示。黑色的主色调以大气、高贵、美丽的方式存在。在整个案例中，结合许多经典黑色美学电影的精彩片段，它不仅体现了对黑色美学的致敬，也突出了新车型BlackBadge也融入了黑色美学的特点。全景交互全景交互是指在360度的图片/视频环境中沉浸式体验用户。用户可以通过转动手机或滑动屏幕来查看环境中不同角度的内容并进行交互。假如将内容分成左右两个屏幕，戴上VR眼镜，就可以进行VR体验。更适合这种玩法的场景包括虚拟全景展示、身临其境的实景展示或活动现场展示。类似于商品的360度显示，用户可以从不同的角度看到商品。相关技术主要是3d旋转操作和陀螺仪技术。全景插件包括css3d，用于创造节-engine，全景视频组件包括Valiant360，以及Krpano等收费组件。案例：（1）吴亦凡陷入黑客门，化妆室私人泄露以吴亦凡陷入黑客门为引子，通过用户的好奇心，引导用户观看。（2）我们的i音乐进入页面是宣传海报，提示框滚动显示品牌相关信息，点击进入3D场景，360度旋转手机可以全景观看，根据场景提示操作，四个不同场景将播放不同的音乐，场景中的许多元素设置品牌标志，实现宣传推广，点击“查看细节”跳转到官方微博。亮点:3d全景画面色彩鲜艳丰富，四个场景互动小，细节精致。人物也画得很仔细，再加上点击播放的音乐，整体风格非常活泼生动。（3）肯德基虚拟现实虚拟公益艺术体验馆进入页面，选择体验KFC公益艺术虚拟体验馆的方式：360度全景模式或虚拟现实眼模式。进入体验馆后，点击地面上的展厅地图，可以知道体验馆主要分为四个区域：体验馆大厅、公益艺术展、我的微信朋友厅、公益艺术展。点击画展上的画作，可以更好的欣赏画作。点击画作右下角的按钮，了解画作细节，进入微信朋友厅，看到分享的朋友头像。亮点:两种可选的体验方式都很身临其境。体验馆让人觉得就在眼前，很真实，李宇春是导游。多屏互动多屏互动是指在多个屏幕上体验活动，各自的操作会同时反映在其他屏幕上，一般以双屏互动为主。游戏玩法有多人合作或竞争，你画我猜，问答，夫妻互动，离线观众互动，多屏幕拼写观看视频等，你也可以用手机作为遥控手柄，用大屏幕显示