起点分享会｜HTML 5制作工具和制作团队（附案例分析）_html/css_WEB-ITnose

下面的提到的主要作品都附带H5链接，可以直接点击链接看作品。

Web app、Hybrid app与Native app

HTML5是一种Web 技术，由浏览器解析和执行，无需安装插件。广义指的HTML5是包括HTML、CSS和JavaScript在内的一套技术组合。而我们一般说的H5是国内的简称，主要通过微信端在朋友圈或者好友上传播的载体，比如说产品展示、人物介绍、邀请函、小游戏、抽奖等。

H5属于web app，区别于我们平时下载的app。因此我会大概介绍一下web app、hybrid app、native app的区别。以及H5制作平台和优秀的H5创作团队。

Web App ：采用Html5语言写出的，直接由浏览器解析，无需下载安装。优点是开发成本低，周期短，更新快，传播效果好，能够跨多个平台和终端；缺点：用户留存率低，UI和交互体验较差，生命周期短，容易被模仿抄袭。

比如W的陌生来电，TGideas的吴亦凡入伍交互视频，刷遍整个朋友圈，随后大家都开始模仿。

轻应用：无需下载、即搜即用的全功能 App，既有媲美甚至超越native app的用户体验，又具备web app的可被检索与智能分发的特性。

Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View（App中嵌入网页内容，通常情况下是html格式的网页），访问的内容是 Web 。有类似于Native App 的体验，但仍受限于技术，网速等等很多因素。

Native APP 指的是原生程序，需要下载安装，一般依托于操作系统，有很强的交互，可拓展性强。优点：用户体验好，性能稳定，操作速度快，可节省带宽成本，访问本地资源（通讯录，相册），用户留存率高；缺点：分发成本高（适配），维护成本高（维护旧版本），更新缓慢。

我是站在运营的角度上理解这些概念的，而不是站在技术的层面上分析的。接下来会和大家讲一下H5制作平台和优秀的H5创作团队。

H5制作平台

目前H5创作平台很多，iH5和Epub360是比较专业性的，功能强大、效果多、灵活，但是学习成本相对较高。而简单便利的平台有易企秀、云来、MAKA、初页、兔展等，易上手，可满足基本的创作需求，但是内容的表现方式有限。

iH5

iH5（互动大师），www.ih5.cn，可实现效果很多，比如说微官网、翻页展示、测试题、交互视频、小游戏、评论、抽奖、砍价等。而交互动方式也非常多样：点击、滑动、擦除、碰撞、拖拽、摇一摇、重力感应等。

这些都是用户做的非常有趣的小案例，可以看看：

• 对学霸来说，拿A挺难的   http://www.ih5.cn/idea/q_My_je
• 我看见城市的光   http://www.ih5.cn/idea/tEBbO6M
• 领唱未来•数字音乐专辑一周年   www.ih5.cn/idea/SpyOa4b
• 小游戏：窃取酵母   http://www.ih5.cn/idea/I0EAwmY

Epub360

Epub360的特色功能：svg、序列帧、助力投票组件、系统参数（判断是否关注公众号以及识别手机系统）。针对企业他们推出了很多商业化服务：导出html包、更改授权信息、绑定域名、自定义尺寸、推广渠道统计、企业主子账户管理等。

易企秀

易企秀，仅16个月就收获1000多万用户，虽然能够实现的交互效果有限，但是简单易上手，并且为用户提供了大量素材。丰富的素材库、一键加入地图、送花、投票、特效（烟花、飘雪）等。

A轮融资之后，易企秀的产品战略也有调整，国内：从H5延伸打造轻印刷设计平台，而国外已成立公司、海外产品去年10月份就上线了。

H5优秀团队和案例

除H5制作平台之外，有很多H5优秀团队，包括W公司、TGideas、朋沃、环时互动、合谷互动、LxU Studio等。他们出品了大量高质量，且大部分是具有引领潮流能力的H5作品，刷爆了朋友圈。

TGideas

隶属于腾讯互动娱乐业务系统，是一支专注于运营和营销领域的用户体验设计团队，工作范围涉及产品包装、广告创意、品牌建设、互动设计等。主要作品：

• 生命之下，想象之上
• 吴亦凡入伍
• 发现平行宇宙之美。

案例：移动页面用户行为报告： http://tgideas.qq.com/act/a20150428report/index.html?ADTAG=tgi.wx.relay

整个H5很简单，除了翻页效果就是一些简单的动效，但里面的数据值得我们关注。H5访问高峰集中在中午12点和晚上10点的休息时间，如果一个H5加载超过5秒就有74%的用户选择放弃，因此在优化这一步是非常重要的；第五页的流失率高于50%。

W公司

主要H5：

• 这个陌生来电你敢接吗？
• 1步1步看清韩寒
• 大众点评：爸，我想你了
• 大众点评：我们之间就一个字
• 字首草先生的情书

等等都是大家所熟悉的。

案例：首草先生的情书， http://love.bungba.com/

首草先生的情书是我个人很喜欢一个作品。整个H5没有选择呈现过多的互动技巧，只是静静地用大段文案和黑白影像向你诉说一段男人的心路，配乐的选择也很走心。虽然文字和页面有点多，但是不会使喜爱的人对这个H5的整体效果打折。

很多人都认为W是一个做H5为主的团队，但其实不对，他们是一家以品牌全案咨询为合作基础，以品牌战略为核心推动的新型营销机构，不是单纯的H5制作团队。主要作品是：H5和TVC。

朋沃

给QQ音乐、天天炫斗、手机管家等合作出品过众多H5页面。他们是一家以品牌策略为导向的新媒体视觉设计公司。我个人觉得该团队的H5主题及其鲜明，整体的视觉风格也是不错的。

案例：努比亚z9手机发布会邀请函， http://weixin.nubia.cn/share/z9

其主要目的是传播发布会信息和简要的产品信息，为新品发布会做宣传，该H5只有5个页面，除了首尾页，中间3个页面展现了手机的全部信息：

1. 手机的无边框、无按键
2. 摄像头超高配置、传说中可以拍星星的手机
3. 超赞音质效果。

环时互动

一家专注于社交网络的品牌构建公司。致力于在社交网络中，基于消费者洞察，通过数据挖掘与创新服务，重塑品牌的数字化影响力。主要客户：杜蕾斯、京东、联想等。杜蕾斯美术展馆和孤独实验室等是H5作品是非常具有特色的。

http://m.durex.com.cn/qr/artmuseum/

无疑，现在H5作品很多，但是能不能够做一个刷遍朋友圈的H5作品，就得想创意了。我们平台有一个用户，做了一个输入姓名的测试题，播放次数五千多万。虽然不是每个团队都可以做出像W公司、吴亦凡入伍或者是前几天“2016微信公开课PRO版”那种H5作品，但是创意是无止境的。

对于不会写代码的设计师或者是新媒体运营，可以选择使用H5制作平台去。很多优秀的H5创作平台，都是免费的，大家可以根据自己的需求去选择。

本文为iH5（互动大师）平台运营@豆豆 在起点公开课7群（微信群）做的H5分享交流会，由人人都是产品经理团队@半个 速记整理。编辑有修改。