HTML5有哪些创意类型？-H5教程

回复内容：

举一些比较草根/实用的例子吧，像W的例子虽是经典但只能远望，和3水老师交流过几次，他对“创造”的理解和追求不是一般人所能及。另外，我们之间就一个聚字不是gif，是canvas。。

下面这些纯粹从实用性角度分享一些例子：

1、带个人属性的测试
基本逻辑：输入姓名>随机出带姓名变量的结果>分享
核心思想：测试结果一般带有个人属性并有炫耀性质（社交货币？），以此激励分享。比如“XXX是靠脸吃饭的”“XXX的新年签是好运”“XXX的颜值完败凤姐”
常见类型：算命、新年签、运势、职业...

典型例子 《快来算算你是靠什么吃饭的》 PV 5000万（第三方统计）
可能很多人看到过



2、炫耀/恶搞 DIY
基本逻辑：输入个人信息>生成个性页面>分享
核心思想：生成的页面为用户常见页面的高仿真版本，比如朋友圈主页、新闻页面、杂志封面，甚至一些更具体的，结婚证、学生证等等，一般为恶搞或者炫耀，以此激励分享。比如 生成自己的明星朋友圈，生成自己的头条新闻、生成结婚证等等
常见类型：生成朋友圈、新闻报道、对话记录、结婚证等等

典型例子 《网易新闻 我要上头条》 PV 5000万（官方对外公布数据，据说是2天内）
刷屏典型


3、人物叙事
基本逻辑：展现人物生活/工作片段>让读者感动、无地自容>分享支持
核心思想：一般是不太受关注的劳动工作者或公务人员，展现平凡而细微的人物生活，文案正能量、具煽动性，以此激发分享。
题外话：个人不赞同用这种方式来营销，但H5确实比较适合做这种人物叙事，不像视频那么重，更方便分享和传播，对很多人物摄影爱好者来说是个很好的表达方式。

典型案例 《如果可以，让我们一起回家》 PV 500万（第三方统计）
公益+硬植入，不太喜欢


4、小游戏
基本逻辑：直接玩>获得成就>分享
核心思想：一次游戏时长不超过1分钟，规则简单，难度大，但随着熟练度提升难度快速降低，于是给玩家造成自己很聪明获得很高成绩的错觉，以此激励分享。
常见类型：不固定，好玩就行

典型例子 《按住一秒钟》 PV 700万
虽然没有神经猫那么火，但相对而言这种制作难度较低，对一般的H5制作者可行度更高一些


未完，待续 一些传统的大家见了很多的就不说了，基本都在下面几个分类吧。

1.测试：知乎出过一个财务包子铺还不错。
2.小游戏：激励好友进行分享，最出名的莫过于神经猫了。
3.利人利己型：发红包
4.展示型，从内容分为以下几个部分

• · 心灵鸡汤或抓住亲情，友情，爱情的h5
  
• · 怀旧型：抓住用户的母校情怀，怀旧情怀等用户心理来进行制作
  
• · 热点营销：比如黄太吉借助港囧的热点营销，最近的小王子，还有些借助节日的。
  

下面介绍几种酷炫的h5做法。
一.高B格技术型：全景三维空间
1.案例：杜蕾斯美术馆
用全景三维空间技术打造了一个网上美术馆，随着手机滑动，可看到不同的房间与陈设。
扫二维码体验：
2.梦幻水晶球。
通过移动手机，镜头从水晶球外不断摇晃推近，渐渐走进水晶球的微观世界里。通过手机环顾四周，可以360度欣赏水晶球里的全景，摇一摇雪花便漫天飘洒。使用了重力感应、3D等技术，文字与BGM的使用也十分讲究。
二.手机场景模拟
案例有“这个陌生来电你敢接吗？”是大众点评为了宣传《复仇者联盟2》出的一个H5，用未知来电开启画面将用户引入到与自己有关联的故事里，最后引出品牌广告。完美有没有！当时朋友圈刷屏啊。
扫二维码体验：相似的还有欧莱雅做的可以互动的朋友圈，小时代宣传做过的一个h5,百度的一个陌生女人的来电，“吴亦凡即将入伍”H5页面.......相似的还有欧莱雅做的可以互动的朋友圈，小时代宣传做过的一个h5,百度的一个陌生女人的来电，“吴亦凡即将入伍”H5页面.......
三.双屏互动
楼上答主说过了，分享一个奔驰在七夕做的吧：七夕鹊桥会。
扫描二维码体验：
类似的还有很多，小屏到大屏的也有：记得有个从手机往电脑倒冰块的，链接忘了。类似的还有很多，小屏到大屏的也有：记得有个从手机往电脑倒冰块的，链接忘了。
四.GIF的运用
大众点评：我们之间就一个字
能从gif动图中了解每个字的真谛，简洁而富有意义。
扫描二维码体验：
大概就这些吧，赞数多以后再更~ 模式一：精美的设计

首先说美，指的是页面是以内容、设计取胜的，这类型的H5最典型的是W公司的作品，像“我们之间就一个字”、“首草先生”已经变成一种模式了，很多H5在模仿套用。

有一种观点说现在是读图时代，设计一定要精简再精简，能用图片的地方就不要出现文字。很多时候，这其实也是一个约定俗称的规则了， 我们在设计运营活动和产品方案的时候，不自觉地想把能砍的东西砍掉，简单就是最好的。然而这些以内容和设计取胜的页面，却“违反常规”地流行起来，不得不让人思考当设计美到一种境界的时候，人们本身就会为美买单。

但对于文案，我觉得还是能用一个词就不要一句话，尤其要避免一句绕来绕去的话。我们看一个非常经典的案例，W公司给大众点评做的“我们之间就一个字”，第一次看到的时候觉得每一页的设计非常精美，被震撼到了。其吸引的地方在于每一页的一个字：金、本、欠、梦、日、朋、拼、赞、聚，至于底下的小字，应该没多少人会看完，更别说完全懂得文案意思了，似乎这段文案更像是页面的一个装饰。

“首草先生”这个H5的文案更加密集了，这个页面打动人的地方在于其中渗透出的温馨、真情，在当时缺乏精美页面的大环境下，能够赢得许多用户的青睐。可是现在发布这样一个文案密集型的页面，也许效果会很一般。

还有一个自己觉得非常美的页面，出自悦榕庄——国际顶级度假酒店，画面是水墨画风格，配上合适的文案，加上了简单的长按交互，中国风的意境非常优雅，有兴趣的可以自己感受一下。（目前貌似打不开了，这里有截图黄山悦榕庄：唤起这一刻 移动网站）

想要以美取胜，需要投入的成本还是蛮大的，毕竟使用户感到惊喜的是整个页面的美感，而不是创新的形式。更精美的页面意味着更多的设计投入，我们也有几次想走这样的风格，但发现钱没给到位真心找不到牛逼的设计师做出理想的画面。就像游戏一样，H5要想做得精美，没有天生丽质之说，都是一分钱一分货，靠成本堆出来的。

模式二：出乎意料的形式

再来说另外一种模式，就是通过形式的创新，当用户看到的时候给人出乎意料的感觉。这类页面的共性是“仿真”，模仿现实世界中的某一对象来制作页面，首先让人有熟悉的感觉，然后在此基础上发挥创意、打破熟悉的感觉，给人以惊喜：哦！原来不是我想的这样诶！

开年最早被刷的是一加出品的“一步一步看清韩寒”，用了打字机的方式，把韩寒的成长历程展示出来。有个关键地方在于需要长按的按钮，可以说功过都有，好处是通过按钮达到用户互动的效果，必须长按才能继续展示图文，保证整个过程用户的注意力都是在屏幕上的，而缺点是一直要长按是蛮累的。韩寒的这个案例和前面说的悦榕庄，算是介于美和形式创新之间的方案，两者兼而有之。

吴亦凡的这个页面，被刷出新高度了，自从这个案子之后，吴亦凡也就成了“H5小王子”，接连出演了几个H5页面。明星和题材天然的吸引力，吴亦凡人气爆棚，“入伍”更是引人注意，因为大陆基本上不会有明星入伍的事情。就算它是一篇娱乐新闻，自身就是传播性很强的爆点新闻了。仿真，然后出其不意的突破。模拟腾讯娱乐新闻，所有人一开始都以为是一篇娱乐新闻，但是画风突变，吴亦凡动了起来，这时候看客发现不对劲，注意力被吸引，才能一步一步把故事讲下去。剧情紧凑，看客眼球被牢牢抓住。引人注意的标题 -> 新闻中的吴亦凡忽然动了起来（违反常规） -> 画面闪烁，吴亦凡跳出 -> 模拟吴亦凡来电 -> 与吴亦凡的视频通话（谜底揭晓）。这是5个接触点，每一个都自带极强的吸引力，让用户一个个场景跟着走下来，最后吴亦凡视频中揭晓故事的来龙去脉（谜底），用户恍然大悟，觉得刚才这一连串的剧情很有意思。

百度出品的“时代姐妹花”也是一个比较典型的案例，模仿微信的聊天窗口和朋友圈，把用户代入进去。最早看到是欧莱雅做了类似的页面，但是传播度远不如百度。此页面有几个关键场景：锁屏界面、聊天列表、群聊窗口、朋友圈timeline，每一个场景都是像素级模仿真实的界面，所以这个案例也是最为典型的仿真模式了。在此之后，有很多公司基于这种模式做出自己的微创新。

之前说到精美的页面需要高成本投入，是金钱+创意的双重挑战，难度系数不小。而后面说的这种形式创新，难度稍微降低了一些，首先是不需要高成本的投入了，并且有一定的套路可循：模仿现实生活中的某一对象，然后找出打破常规印象的突破点。有趣的是，自从吴亦凡的页面之后，很少有刷屏级的页面出来，我也一直在期待下一个爆红的页面会是什么样的。然后忽然有一天中午，在吃着火锅没唱歌的时候，网易的“我要上头条”页面，又迅速地刷了起来。互联网圈子的人应该都有玩过，这个页面正是用的这种仿真模式，模仿真实的新闻，文案风格+界面，然后把用户的名字套上，做出搞笑的效果。

最后还是回到开头所说，许多产品、运营上的所谓经验，即使背得滚瓜烂熟，自己真正做的时候还是“谋事在人、成事在天”。过去的大半年中，我们做过了许多尝试，有些页面传播量稍微可观，但依然没有刷爆朋友圈的案例出来，倒是积累了一些失败的教训，以后避免再犯。

想要做到病毒传播，运气的成分还是蛮重要，就像你不知道为什么flappy bird、围住神经猫、duang~、主要看气质等等忽然爆红的东西为什么会流行起来，W公司陆续推出了很多页面，流行起来的屈指可数。