朋友们，是否还记得朋友圈不断刷屏的网易H5活动？作为一位互联网设计师，不争气的眼泪从嘴角流了出来，馋呀、羡慕呀！同样九年义务教育，为啥人家的活动效果那么好？别人一做就爆，而自己一做就废。一款优秀的H5它包含哪些要素呢？

大纲：

1. 活动概述
2. 主题构思
3. 视觉风格设计
4. 交互动效设计
5. 关于适配
6. 数据复盘总结

一、活动概述：OVERVIEW

为什么做H5活动？

本活动由平安银行对公业务中台联合Planet B举办，以IT对公派驻全新设计的IP形象灯泡仔及家族成员为载体。

活动旨在推广对公业务中台产品，由wowdesign团队设计的IT对公派驻IP-灯泡仔及其家族品牌形象结合灯泡仔快闪打卡活动，线上线下联合运营推广对公业务中台。

二、主题构思：H5 THEME

1. H5类型选择

什么样的活动主题能勾起用户的注意力？什么样的内容能引起用户的共鸣？

能让其自愿转发，愿意用这个虚拟的活动向朋友来展现表达自我人设。所以活动的方向选择尤为重要。我们对市场已有的H5活动做了归类，分析他们对应抓住了用户哪些痛点，从中获取方向。

1）测试类

契合了用户低成本有趣了解自我的需求。

2）新闻热点类

以热点话题、事件为素材，特点是时效性高，讲究与用户的距离，参与感、真实感。

3）互动游戏类

以互动性较强，特点多为有趣、简单易上手，愉悦感、成就感。

4）公益类

以社会热点问题为题材，如环保、保护濒危动物、关爱老人等，社会焦点问题出发，彰显社会责任感，给人深刻的教育警醒作用。

5）软文故事类

以独立的经历、故事为引导，多为熟为人知的生活、工作、感情的糗事，侧面达到某种营销目的。

2. 哪些因素影响用户参与并转发

用户的参与度与转发裂变数据，是衡量一个活动的成功与否。那么从用户心理学角度分析，影响因素有以下几点：自恋炫耀心理、共鸣心理、好的视觉效果。

3. 当下热点及用户心理状态

疫情之下，大家的心理和经济都受到不小影响，焦虑失望情绪高涨，希望得以表达情绪。

4. 综合分析结论

• 结合疫情下用户心理状态，疫情对他们生活、工作、经济的影响。
• 通过刷屏因素中的”共鸣“，再结合熟悉的网络流行语作为标签关键词，精准的贴合了用户表达自我、分享自我现状的诉求。
• 选用测试类玩法，让用户去测试pick自己的2020生活状态，了解自我，分享现状。

所以希望用户通过关键词选择，测试生成2020生活状态报告，由此击中了用户内心，引起共鸣，使其能参与转发此活动。并选定主题《pick你的2020戳心话》

三、UI风格设计：H5 STYLE

通过网易等平台过往H5案例分析，设计风格多为孟菲斯风格、蒸汽波故障风、插画风等较为年轻活泼富有表现力的风格。结合我们IP形象的线描风格和主题，最终敲定了孟菲斯风格设计风格。

该风格能表现各种富于个性化的文化内涵，从天真滑稽到怪诞、离奇等不同情趣。在色彩上运用一些明快、风趣、饱和度高的明亮色调，给用户极强的感官刺激和丰富的情感，贴合本次活动戳心话的各种话语场景。

设计展示：

四、交互动效设计：DYNAMIC EFFECT

对于H5而言，简单不需思考的交互操作是基本的要求，炫酷好玩的交互动效是必不可少的加分项，我们把交互动效拆解为三个方面：

1. 操作指引动效

首页的h5主题交代清楚之后，首要的就是引导用户去下一步的标签选择页面，所以按钮一定要在最舒适的点击位置，且有最强的操作提示，所以按钮呼吸缩放动画提示是一个不错的选择。

2. 交互转场动效

界面转场元素的连贯性和界面元素的进出场动画，能让界面更加流畅连贯，操作体验感更佳。

3. 标签选择页标签翻动动效

标签选择页面是整个产品最核心的交互部分，在满足易用性的基本操作交互要求上，还需要增加一定的操作趣味性，给用户带来惊喜的交互动效，比如标签3d景深旋转翻动操作方式，点击选择趣味动态反馈。

五、关于适配：ADAPTATION

1. 屏幕适配

为适配16:9及更长的全面屏手机，须把页面拆解为主体层、元素层、背景层。

1）主体层、元素层

需要把各元素定位好对应的位置关系，如主体层通过切图调整于画面居中位置，再确定好元素层距离顶部、底部的距离。

注意这里的数据需从矮屏（16:9，也就是iphone6）向高屏幕适配，以矮屏幕为基础，这样就能避免适配之后出现元素重叠的问题。

2）背景层

背景图根据屏幕尺寸做缩放、裁剪适配填充满屏幕。所以背景层一般设计成相对简单的画面，以免在裁剪缩放时出现较大的视觉差异。

2. 结果页扩展性适配

在选择标签类别的H5活动中，结果页面需展示用户选择的标签，但用户选择的标签数是不确定的，这样就涉及到结果页的长短适配问题。

所以在标签展示部分的底色需要是纯色或二方连续图，且二方连续图的高度需和单行标签的高度一致，保证每增加一行标签，增加对应高度的二方连续背景图，保证背景页面高度总是适配于对应标签数量所需的高度。

六、复盘总结：DATA SUMMARY

1. 浏览数（PV）、用户数（UV）

为检测活动效果，在活动的各时期通过数据平台拉取了浏览数（PV）、用户数（UV）帮助我们判断活动的传播裂变效果，并分析其影响因子：曝光数、渠道质量、标题内容吸引力，通过不断优化影响因素，以保证在计划的时间内达到预期的活动效果。

2. 漏斗数据

通过漏斗数据分析用户流失情况，可进一步分析流失原因：页面操作引导是否明确、页面内容是否有吸引力、页面可用性，帮助我们优化操作指引、内容设计优化与可用性走查。

3. 本次H5活动可以提升点

1）Ui风格应更贴合主题

主题表达上：首先作为疫情下戳心事的活动主题，并没有很好的在视觉上传达戳心和疫情的氛围，导致活动的代入感不够，用户对活动的主题感知不够明确，更多的只是灯泡仔IP风格的延续。

风格选择上：本次h5设计是基于刚刚诞生的IP形象灯泡仔为视觉kv主体，而IP形象的初创的表现形式为线描风格，还未扩展其他表现形式，在此情况下选用线描的孟菲斯风格是必然的选择。

所以在IP形象有成熟的更丰富的风格形式后，整个活动的风格也能有更多尝试可能，找到该活动主题最佳的视觉表现形式。

2）动效需要有大的突破

随着手机性能的提升，炫酷新颖的h5动效是提升用户体验，抓住用户猎奇心理和眼球的不错方式。但这需要大量开发资源的投入，和设计侧对动效的设计和研究。

天猫和网易近期的H5动效运用了大量的3d视觉效果和3d景深操作，这对h5的创新体验有着极大的帮助。本次活动在动画方面还有很大的可发挥研究的空间。

3）运营文案需更抓眼球

在这个信息爆炸的时代，没有一个抓眼球的标题，那么注定会沉默在海量的信息中。

为此上线后我们做了大量的用户调研，其中标题根据业务推广导向、实时热点导向等多方向尝试，结合新闻常用的3断式标题结构。并做了AB测试及用户调研。其中标题用实时热点方向反馈最好，以业务导向的方向对c端用户毫无吸引力。

所以后续的在做b端产品出圈设计时，在无特殊要求下，尽量往用户关心的热点、好奇点为导向去设计标题和内容。

4. 总结

• 活动设计之前要理清楚设计背景，确定好相对应的设计主题和方向，什么样的活动主题能吸引用户参与进。
• 孟菲斯风格、蒸汽波故障风、插画风是H5不错的选择，孟菲斯风格最容易出视觉效果，但这都需要贴合主题，帮助渲染活动主题氛围。
• H5活动在保证用户体验的基础上，能加入好玩有趣的交互动效是一个加分项。
• 由于市场上手机的尺寸大小不一，必须考虑好适配问题。
• 上线后的数据复盘总结能够帮助我们发现问题，使下一次活动做得更好，且一个有吸引力标题能让你成功一半。

作者：WOWdesign

来源：WOWdesign

虽然目前短视频如日中天，刷屏级别H5越来少见到了。但身为一个运营人你就得啥都“会”，想想你预算低的时候吧……下面是我尝试说服你掌握H5的优势罗列。

H5互动性强，视觉效果佳，用户的感官体验好，可以提高流量转化，加快获客的效率和速度（一般来说还是要优质的前提条件下哈~）。

从技术角度上看，制作成本低。有了模板和专业的编辑器存在之后，H5制作的难度也大大降低，就算是新手也可以完成简单的H5制作。

H5它最显著的优势在于跨平台性，大大提高了用户体验，无需下载，点开就可观看，简化流程。传播的效率而言，可以直接通过微信平台的朋友圈、微信群、公众号等渠道得到最大化的曝光。

本文将针对性的从H5全流程出发，介绍所需的工具/网站，让小白运营稳健上手制作H5。

文案策划

数英网https://www.digitaling.com/

从最开始的台湾、日本的创意广告，到互联网公司的成功项目，不仅能得到文案灵感，还能收获到作为创意人的思维和审美

梅花网https://www.meihua.info/

聚焦于为企业市场营销（广告，公关和市场研究）部门提供各类信息情报服务。

大创意https://www.pitchina.com.cn/

专为优质品牌在国际范围内寻找最好创意的互联网平台。

设计参考

站酷https://www.zcool.com.cn/

爱果果http://www.iguoguo.net/category/company

图片素材

Pexels https://www.pexels.com/zh-cn/

免费素材图片，可以在任何地方使用，还不需要注明归属~

摄图网http://699pic.com/

可商用的版权图库，提供正版摄影高清图片素材，适合企业使用，有动手能力的话还是推荐用免费版权图库。

图片压缩

智图-图片压缩在线工具https://zhitu.isux.us/

为图片智能选择合适的图片格式,支持ps改变图片品质；可在线生成webP图片。

压缩图https://www.yasuotu.com/

有损压缩，但支持压缩JPG、PNG和GIF，支持压缩质量百分比、宽高比。

音乐素材

PizzaBGM https://www.pizzabgm.com/

商用版权音乐平台，可视化选曲很便捷，可以购买永久授权。

Bensound https://www.bensound.com/

无版权音频下载网站。需要小心使用，有部分是有版权的

视频素材

Mixkit https://mixkit.co/

无版权视频素材英文网站，安装个插件就可以翻译使用了~

Bottledvideo

无版权视频素材网站，可以付费购买高清视频素材

音视频压缩

格式工厂（需下载）

一款免费多功能的多媒体文件转换工具。格式工厂功能强大，可以帮助用户简单快速的压缩音频、视频和各个视频格式的转化。压缩质量中上，但速度很快，很适合对质量要求不是很专业的小白用户。

 H5在线制作

MAKAhttps://www.maka.im/

H5入门级专业，简单、强大的免费H5页面、微场景、微信海报制作平台。

木疙瘩https://www.mugeda.com/

专业级H5融媒体内容制作平台。

意派Epub360 https://www.epub360.com/

专业级H5制作工具，企业用户较多，很多功能需要开通年度VIP才可以使用，全面满足个性化需求。

易企秀https://store.eqxiu.com/index/

免费H5页面制作工具，易企秀定位简单翻页模板H5，面向普通用户，用户可以发布模板，模板数量较多。

作者： 菌菇君

来源：菌菇君

近几年来，H5从最初的易刷屏，再到大众疲劳，刷屏级别H5越来越难以实现。在这样的趋势下， H5还能怎么玩，实现裂变式传播呢？

在近几年中，网易、抖音、淘宝等互联网公司在品牌广告类H5，由于立意好、话题性强、视效精美、互动形式多样不断刷新人们的认知，在朋友圈引发疯狂刷屏，而从2019年起鲜少有H5能够实现刷屏。从业人员也大批量生产相似的H5，短时间内的大量套用而让大众疲劳，大众的期望值越来越高，品牌广告类H5再难掀起一丝波澜，2020年我们还能怎么做？

先来回顾近几年刷屏级别的H5的特征：

自传播是一个裂变H5的提前条件，具有传播动机的特征一般为以下四个特征，通过相互的相辅相成最后才能诞生一个具有自传播动机的H5。

01 何为有吸引力的信息载体？

在信息大爆炸的时代，每天有无数的信息出现在手机上，但是其实很多信息是自带话题性质的，比如说文化IP、公益项目、大公司新闻、热点事件等等，这些信息载体作为H5的内容，更容易获得关注。

现在以故宫这个大IP举例，近几年故宫IP不断跨界联名，做出了一波一波再带传播效应的传播事件，在故宫的传播上依靠的是：

1. 重塑人设

放下高冷形象，以“活泼幽默，平易近人”的傲娇段子手形象形成反差萌

2. 把握用户喜好, 贴近用户心理

挖掘和分析网友使用习惯、情感及体验感受是日常工作之一

3. 热点借势

利用热点自带的流量增加内容的关注度和曝光

4. 吸睛的文案

出众的文案功底，有趣易懂

具有自传播的H5需要一个好的信息载体来承载，不管你是自带流量属性，还是紧随热点，造梗玩梗，一定是要与用户产生社交货币交换价值的内容。

02 何为优秀的互动类型？

根据已有的H5，大致可以将互动类型分为以下几种：

1. 福利类，分享福利？转发锦鲤？粗暴但有效！

大家都无法忘记被拼多多100元现金红包支配的恐惧！但拼多多的100元红包需要巨大的资本支持，一般我们能够做的不过是发发优惠券，通过利益驱使用户分享暂时不再这一次的讨论范围。

2. 闯关挑战类传播

通过简单的闯关挑战能够激起用户的胜负欲，分享后寻找期望的得到别人的认同感和赞美，虽然达到一些传播性质，但是很难实现转化率。

3. 测试类传播

测试类传播最关键的点在于：塑造形象，为自己打造理想人设，或者是别人眼里积极的印象，或者是标榜自己的个性、喜好，吸引同类关注。

而在近几年刷屏的众多的H5中，大部分为测试类传播。

可以说是网易哒哒开启了测试类的H5的新高度，还记得一早起来被“我的哲学气质”在朋友圈刷屏吗？测试类H5容易被传播主要在于：

1）与自身紧密相关

检测参与者自身的某些特点；

2）好玩有趣、参与门槛低

通常形式新颖、结果有趣。用户参与活动所需的操作十分简单，只需要点击几下，就能看到结果；

3）满足猎奇心

人们对于自己未知的事情，总是会充满好奇，而且怀有一定的期待；

4）迎合虚荣心

正面积极的测试结果设定，用户的虚荣心得到极大满足；

5）从众心理作祟

从众心理的驱使下，很多用户也跟风去测试，并将结果转发到自己的朋友圈；

所以测试类的H5是目前最适合被复杂的传播方式，流程简单，技术难度低，传播性已经被验证。

4. 盘点回顾类

盘点回顾一般分为两种：事件盘点和个人盘点，时间跨度越大越有价值。

5. 创造模拟类

用户一般会借由这类传播创造属于自己的个性态度和生活状态作品，在社交区域展示自己，场景稍微偏向隐私或不为人知的状态传播效果。

6. 插画视频类

插画类需要很强的故事性和画面感，制作编排成本极高，不适合被普遍使用。

7. 公益类

公益类参与条件简单，受众人群广，用户通过公益他们其实是在平凡生活之外，提供了一种发泄情绪的“仪式”，传播也可以为自己在朋友圈塑造良好的形象。

03 何为合适的视觉效果？

强设计感或者奇特的画风能够戳中用户的尖叫点，线上传播不断挑战审美线，变成两个极端，一个极其精美，一个是极其独特戏谑才能让人足够有传播动机，视觉效果需要量力而行。

04 何为新颖的技术加成？

新的技术和体验能够博得用户的关注和转发，但现在不是H5开发的初期，能够被使用的技术都几乎被各个品牌使用了，所以在技术层面上不推荐使用完全新的技术去吸引关注，但是可以用一些具体一定人机交互的技术用在H5中，获得一定的参与感和趣味性。

总的来说，H5的线上传播主要依靠以下四点：内容情怀；社交需求；设计美学；创新体验。一个具有传播效应的H5可能同时满足以上四点，但可能在其中一点特别强，也一样可以达成传播的效果。

投放市场的品牌广告H5一般是品牌整案营销的一个部分，H5的衰落和广告行业本身的投放策略变更也有一定的关系。对于有实体产品的公司来说，随着近年来直播电商和KOL的兴盛，品牌方越来越倾向于投钱到直播主播和KOL中直接实现购买转化率，甚至很多的互联网公司也开始倾向于KOL来做品牌推广和拉新。

品牌H5所面临的现状是，一方面裂变越来越难以达成，另一方面预算也逐渐偏向于自媒体，品牌H5是否还有刷屏的可能性，在我看来还是有，需要营销整案就一定是现象级的，且不要和腾讯的相关业务相冲突。

那么H5应该何去何从？

1）降低H5在传播中重要值和预估值

裂变越来越难以达成，那么在立项时衡量是否有必要以H5的形式去呈现，衡量项包括：传播目的、期望值、投入产出比等。不管是已方还是乙方的H5创意，对H5的内容和形式进行预估，最好高性价比去做，甚至不要做。

2）物尽其用，各渠道增加曝光量

如果一些传播营销内容需要H5的形式来承载，那么就想增加各个渠道去曝光，曝光人数足够多，至少在后期复盘时，数据不会过于难看。另外用户基数够大在一定程度上，二次甚至多次的转发也随意增加。至于怎么增加曝光渠道，要么有钱，要么有能力拉资源，那就是品牌各显各的本事的时候了。

最后

传播形式始终在变化，从前广告在纸媒和电视上，后来在电脑和手机；以前广告形式是文字和视频，现在广告形式有了互动体验等多种创新形式。虽然刷屏级别H5越来越难以实现，但H5依然是好用的运营手段H5的形式是作为运营人员的基础工具，以实现各种运营需求。

相关阅读：

1.品牌营销推广，如何制作H5？

2.网易爆款H5交互玩法！

3.网易H5刷屏技巧及策略！

4.如何通过H5裂变10万用户？

5.如何做一个10W+PV的H5活动推广？

作者：舒季

来源：舒季