起点分享会|HTML 5制作工具和制作团队(附案例分析)

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

h5anlifenxianghui

下面的提到的主要作品都附带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,可实现效果很多,比如说微官网、翻页展示、测试题、交互视频、小游戏、评论、抽奖、砍价等。而交互动方式也非常多样:点击、滑动、擦除、碰撞、拖拽、摇一摇、重力感应等。

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

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分享交流会,由人人都是产品经理团队@半个 速记整理。编辑有修改。

您的赞赏,是对我创作的最大鼓励。

评论( 4

登录后参与评论
  1. 现在做H5的真多,同学也去学做H5方面的了

    回复
  2. 回复
  3. :razz: :razz: :razz: :razz: :razz: 半个and豆豆好样的

    回复
    1. 回复

      阔阔,你也好棒

加载中