很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
PC 时代，设计师们就基于 H5 开发了众多交互性能强大的酷站，进入移动时代，交互设计师们更是如鱼得水，结合移动端的重力感应、竖屏显示、手势交互等全新玩法，开创了全新的交互时代。
fff.cmiscm.com 网站收录了 15 个基于 H5 创建的极具创意的网站
所以说， 朋友圈 H5 进化史可以看做是新媒体交互设计进化史。
2014 年开始，朋友圈开始出现一些简单图文形式的 H5，早期图文型 H5 只需要用户通过简单的翻页、点击就可以参与其中，展现效果类似于 PPT。应用场景主要包括移动网站、邀请函、年终总结、产品推广等。
制作网站是 H5 在 PC 端最广泛的用法，所以，当 H5 应用到移动端时，设计师们首先会想到的就是制作移动网站。
比如，欧香小镇、燕楠国际等品牌就基于 H5 制作了移动网站。
邀请函也是图文型H5的主要应用场景之一，比如《奔驰 C 级上市邀请函》和《微信公开课 PRO 版邀请函》都是当时的典型代表。
2014 年，一些品牌开始尝试用 H5 推广产品，比如锤子手机、特斯拉等，仅仅采用精美图片加上简单的翻页动效，最终的呈现效果却超越了当时人们对微信营销的想象。
2014 年 4 月，著名奢侈品牌Burberry 推出的 H5 《从伦敦到上海的旅程》是当时交互体验的集大成者。第一步，“摇一摇”，开始体验；第二步，点击屏幕进入油画般的伦敦清晨；第三步，摩擦屏幕使晨雾散去；第四步，点击“河面”，河水泛起涟漪；最后点击屏幕上的白点，达到终点站上海。
2014 年 5 月，可口可乐推出的《分享快乐 128 年》，将图文型 H5 的交互又向前推进了一步。这支 H5 页面上的每个元素都可以动。而且相较于原本的单页翻动，更注重跨页连接，一根贯穿画面始终的“红线”，让画面在视觉上更加流畅和统一。
此后，长图型 H5 逐渐多了起来，正式引爆可以追溯到 2017 年 5 月，百雀羚刷屏长图《一九三一》开辟了长图型图文H5的新形式，这种形式非常适合移动端阅读，迅速为大众接受。
2018 年 8 月，腾讯云推出的《山城云居图》采用了横屏长图的形式。
2018 年 9 月，网易的公益H5《她挣扎48小时后死去，无人知晓》在朋友圈刷屏，这支 H5 在长图的基础上，融合滑动动画等表现形式，为图文型 H5 增加了新的创意，效果令人震撼：
活动型 H5 也是较早出现的 H5 类型，主要包括红包、抽奖、投票、砍价、拼团等，这类 H5 模式和技术都非常简单，但因为由直接利益驱动，传播力较强。
口令红包、语音红包、签到抽奖、砍价拼团（来源：人人秀官网）
常规的活动型 H5 往往缺乏情节设计，非常单调，为了更好地促使用户点击和分享，一些活动类 H5 开始探寻新的玩法。
比如，2016 年 1 号店推出的 H5《姐妹花的烦恼》，打破了常规活动类 H5 的俗套，在推出促销活动前添加了故事情节，以吐槽物价高为主题，在表现形式上机智地拿人民币开玩笑，角色直接取自于一元纸币上的少数民族形象，最后一页才出现 1 号店的促销活动。
2014 年 7 月 22 日起，一款名为“围住神经猫”的H5小游戏开始在微信朋友圈疯传，此后，游戏类 H5 如“2048”、杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等游戏类 H5 层出不穷。
近年来火爆的游戏型 H5 大都是简单的小游戏，用户只需要通过简单交互，便可参与。比如，2017 年 ofo 推出的 H5《小黄车研发车间》，利用点击、滑动、摇一摇等简单交互，让用户参与造车小游戏。
2017 年 9 月，网易严选推出了一个为强迫症患者量身定做的 H5 小游戏《好难受，强迫症受不了了》，通过对齐木块、将彩色球排列完整、救活枯萎的花、消除俄罗斯方块、修剪一下树木等 5 个“强迫症”小游戏来展现“极致美学”，不过，这个小游戏里除了简单的点击、滑动等外，还应用了重力感应等更复杂的交互。
2017 年 11 月 19 日，世界厕所日，网易新闻以此为主题，通过小游戏的形式，了解了三个有趣的厕所新闻和一个厕所文化。
2018年草莓音乐节的宣传H5和网易的H5《你的工位有猫，我的工位有刀》、《睡姿大比拼》等都属于DIY型的小游戏。
创意广告公司 Dopemine 在 2016 年推出的《活口》在玩法上有很大不同，采用了真人密室逃脱的形式，设计和交互上更为复杂。
测试型 H5 以问答、评分、测试为表现形式，利用用户的好奇心，引导用户参与问答，并分享最终结果。测试类 H5 一般分为三大类型：运势占卜、知识测试、心理测试，刚开始出现的时候以运势占卜为主，慢慢开始出现有趣的知识测试类型，近 2 年刷屏的测试类 H5 大都以心理测试为主。
1.运势占卜
通过在线抽签、塔罗牌等形式进行运势占卜。在新年、春节之类的喜庆日子，人们都很喜欢玩占卜游戏来祈求福运，此类H5操作容易，符合传统习俗，因而备受欢迎。比如，携程旅行在2016年推出的H5《我的2016福地》就引导用户从“爱情、事业、健康、财运”中任意选择一个自己想了解的福地，然后点击“探寻我的福地”，测试出2016年自己的福地。
2.知识测试
传播度较高的知识测试，通常是针对一些有趣的常识类知识进行的。比如，2017年爱奇艺推出的《2017七夕直男考卷》针对男女朋友间相处的一些趣事进行测试，取得了微信当天pv2646.6万，分享成功次数137.8万的成绩。
腾讯视频在 2017 年推出的 H5《测测娱乐圈有没有你的一席之地》则是以当时热门的综艺、电视剧、明星相关资讯为题，并结合传统考试题型进行设计。
3.心理测试
心理测试型 H5 一般通过答题来给测试者的认知、行为、情感的心理活动予以量化，帮助其了解自己的情绪、行为模式和人格特点。
近年来大火的测试型H5大都属于这种类型，比如，2018年8月，京东推出的《你是哪种走红体质》，FIYTA&网易云音乐联合推出的《你有恋爱的天分吗》，2018年9月，飞利浦推出的《友情鉴定书——塑料指数大检验》，海底捞推出的《测测你在宫斗剧中能活到第几集》，2018年10月，小米互娱《测一测你在恋爱中的形象》等。
2018 年 8 月，网易云音乐和第5人格联合推出的《你的荣格心理学原型》采用对话的形式，非常新颖，而且非常适合用于心理学测试，让被测者更轻松。
H5 二维码已被微信屏蔽，用 QQ 扫码，或网易云音乐 App 首页 banner 进入
2018 年 10 月，猫眼电影推出的《假如影子有生命》，为每一个选项设置了不同的动画效果，而不是简单地跳转到下一题，使得测试类H5的视觉效果又上了一个台阶。但心理学测试的选题过于老套，文案也缺乏亮点。
快闪是指在短时间内，快速闪过大量文字或图片信息的一种视频制作方式。国内最早使用快闪形式进行营销的品牌是苹果。2016 年 9 月，苹果在 iPhoe7 发布会结束后，采用快闪的形式，将 2小时的发布会浓缩成了 107 秒的快闪短视频，引发了巨大的传播和讨论。
苹果107S快闪，形式简洁，但细节非常考究
此后，国内使用快闪形式进行营销的品牌层出不穷，比如凯迪拉克 30S 快闪广告、CMF 设计快闪宣传片、京东《闲置衣物》公益快闪广告等，但在质量上很少能和苹果的快闪媲美。
快闪形式在 H5 中也开始应用，观看形式由横版变成了竖版，并且融入了 H5 中特有的交互形式。比如，人民日报在 2017 年推出的快闪 H5《为我党传播力疯狂打call》以及《史上最牛创业经》，都在朋友圈疯狂刷屏，之后，快闪这种H5的新形式开始受到热烈的追捧。
比如，苏宁易购在 2017 年双 11 推出的 H5，2017 年全运会宣传 H5 都是快闪形式。
模拟界面，就是模拟不同的移动端界面，进行场景的构建和情节的开展。目前常见的类型有模拟微信界面、模拟来电界面、模拟新闻界面、模拟抖音界面等。
1.模拟微信界面
模拟微信界面是模拟界面类 H5 中最常见的类型，包括微信群聊、朋友圈、微信文章等多种形式。
2015 年，大众点评推出的 H5《四大导师拯救麦渣》伪装成微信文章，利用当时很火爆的选秀节目中国好声音，结合四大导师来推广大众点评的KTV资源。
2016 年 4 月份宝马推出的 H5《该新闻已被BMW快速删除》开头模拟微信公众号文章页面，当用户点击后，新闻网页像纸一样被宝马 M2 跑车划破，接着视频新闻、朋友圈和音乐播放器都被它呼啸碾过，极具冲击力。
未来应用为 2017 年两会定制的 H5，就结合了微信群聊、微信朋友圈等形式，成功在朋友圈刷屏。
有道翻译官在 2017 年推出的 H5《深夜，男同事问我睡了吗》结合了微信聊天和群聊的形式，因为标题有吸引力，且文案设计活泼幽默，也取得了刷屏效果。
新媒体人王高高模拟微信公众号界面制作了一份个人简历，文案生动幽默，形式新颖。
2.模拟手机界面
包括模拟手机屏幕、模拟来电、模拟siri等。微信朋友圈中大范围传播的第一个模拟电话场景的 H5,是 2015 年大众点评为推广电影《复仇者联盟2》定制的H5《这个陌生来电你敢接吗？》，通过用户收到未知来电，接听后屏幕被妇联的人物武器不断敲击，最终“碎屏”，创意表现手法与《复仇者联盟2》的电影调性完美结合。
2016 年网易游戏倩女幽魂推出的 H5《头条|谁约到了杨洋》采用了模拟手机屏幕的形式，在 H5 中，杨洋通过帮用户擦手机屏幕、整理手机 APP 等方式与用户互动。
3.模拟新闻界面
2015年，腾讯游戏全民突击推出的H5《吴亦凡即将入伍》采取了模拟腾讯新闻界面的形式，然后转变成视频通话，最后再链接到广告页面。
4.模拟抖音界面
模拟抖音界面主要应用在抖音官方的推广H5中，比如2017年推出的《世界名画抖抖抖抖起来了》、2018年推出的《抖音美好奇妙夜》等。
2015 年，朋友圈开始出现双屏互动型 H5，这种类型的 H5 需要 2 台手机共同扫码完成互动，交互性能比其他 H5 显著增强。
2015 年，奔驰推出的 H5《鹊桥会，爱更多》采用双屏互动的形式，模拟喜鹊搭桥场景，当两台手机合并的时候，一座鹊桥就搭建完成，并出现唯美的爱心画面，同时车的后备箱出现玫瑰花，非常浪漫。
2015 年，六神推出的 H5《在夏天在一起》通过买通票的方式，模拟电影院让两位观众欣赏到一部制作精良的夏夜动画。
一镜到底是指看上去几乎不用剪辑，没有切换，一个镜头从头到尾，完整记录整个事件的发生过程。这种艺术手法源于电影产业，最早出现在美国波普艺术家安迪·沃霍尔拍摄的纪录片《帝国大厦》中。1964 年，他将摄影机对着帝国大厦毫不变换机位、景别地拍了 485 分钟。
纪录片《帝国大厦》剧照
第 87 届奥斯卡金像奖最佳影片《鸟人》也是一部经典的一镜到底的影片。
电影《鸟人》海报
2017 年，网易新闻推出的 H5《章莹颖失踪 74 天了，全世界都想找到她》就采用了一镜到底的形式，通过一张长图，结合滑动动画，非常清晰流畅地呈现了新闻事件的经过。
VR全景是指利用计算机生成一个全方位的虚拟现实环境，许多科幻电影都用到了 VR 技术进行拍摄，如《黑客帝国》、《阿凡达》等等。
随着 VR 技术的逐渐成熟，应用 VR 技术的 H5 逐渐增多，比如，《穿越宇宙的邀请函》是天猫在2016年制作的一个结合VR技术及一镜到底的H5，试听效果非常震撼。
从形式上来说，每一次新技术的出现都会带来新的创意形式，比如，当下大火的人工智能技术也开始在 H5 领域应用，出现了《人工智能为你定制春联》、《诗与故乡》等经典案例。
从内容上来说，所有刷屏型 H5 本质上都在做一件事情——抓住一种情绪，讲好一个故事。
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)