H5 技术开发指南 —— 不怕没有技术团队，不怕没有预算

 2015-05-06  

h41

或许你常常有这样的困惑：脑海中有无数个 big idea 飘荡，一到具体执行却“捉襟见肘”，因为找个靠谱供应商实在很难，而且预算真的有限……

本文将和大家分享H5未来发展的几点思考，并重点介绍在没有技术团队和低预算的情况下，如何利用设计工具实践自己的内容创意，无需编程来设计H5交互场景应用。

微信等社交超级app的崛起、带来了内容创意营销的黄金时代

国内以微信为代表的超级App的崛起，带来了数亿的活跃用户，解决了内容的传播通路，通过内嵌浏览器内核，用户只需点击一个链接，无需在移动端输入网址便可快速访问内容页面，极大提高了用户获取内容的便捷性。

由于社交化传播的特点，内容营销的地位和价值提到前所未有的高度，海量的传播不仅仅属于有充足推广预算的大机构所独享，一款优质的内容，在低成本下同样能得到读者的大量转发，带来可观的传播效应。去中心化的社交传播特性，带来了内容创意营销的黄金时代，为众多创意策划群体带来施展拳脚的机会。

Html5 将成为内容的重要载体

Html5经过8年的演进，终于于2014年年底正式发布标准，未来各大浏览器内核将会逐步支持H5标准，解决了H5页面渲染的统一性。

就像W3C首领JeffJaffe表示的那样：“HTML5代表着下一代的网页元素。就在不久之前，用户还在浏览静态网页，而如今的网页却如此丰富。现在，所有人都可以使用最新的稳定标准来创造元素，并且可以应用在所有浏览器中。如果我们无法做到这一点，我们就无法做到统一网页标准。”

H5具有丰富的表现力及跨端能力，虽然体验与原生app还有差距，随着腾讯于2014年年底开放了X5浏览器内核，优化了webkit的H5渲染，同时，微信开放了JsSDK，使H5页面可以轻松调用微信app原生的功能，大大丰富了H5的交互体验，目前，众多的机构已将H5做为内容呈现及服务导入的标准方式，移动互联网时代，H5已替代flash，成为富媒体内容的重要载体。

H5场景应用，将会成为连接传播、互动、服务的界面

超级APP+H5场景应用，将成为未来移动互联网的主要形态，随着微信等社交平台的越发成熟与开放，内容将不仅仅是静态的形式，结合超级APP的接口与流量，H5将呈现出更多的用户互动功能特征，在传播、互动的同时，借助APP的高级接口，H5不仅仅做为导流的媒介，还可以直接在H5轻应用里完成卡券、订单、支付等服务功能，借助微信wifi、iBeacon，H5还可以方便的和线下服务结合，H5场景应用，将会成为连接传播、互动、服务的界面。

内容营销，创意为王，创意不该被技术捆绑

一年前，要实现一个简单的H5场景应用，还不是件轻松地事，涉及到前端动效及交互开发、微信接口开发、服务端开发，现在，大量的优秀H5场景应用快速推出，这与H5开发团队的逐渐成熟以及多款H5可视化设计工具推出有直接的关系。

如何不用开发、不受技术限制，低成本完成优质的H5场景应用，是众多创意设计机构所期盼的，这个目标，已经不远。

综合来讲，完成一款H5场景应用的交付，基本上有以下两种实现方式：

交给专业开发团队

如果你不差钱，拥有自己的开发团队或者有靠谱的外包伙伴，那你可以拥有极大的自由度尽情发挥你的创意，随着近年来技术的发展，也有些成熟的开源开发框架可以来提升开发效率，比如CreatJs、GreenSock、Zepto.js、ScrollMagic等。

目前高预算H5场景应用很多采用定制开发这种模式。

优点：高自由度定制、最优的代码运行效率。
缺点：开发周期长，高昂的人员成本、沟通成本，如果是外包，还会带来较高的管理成本。

选用 H5 设计工具

能拥有技术团队的营销策划机构毕竟是少数，大量的H5内容也没有充足的预算来进行技术外包，不过随着H5的火爆，许多技术团队开发了H5设计工具来降低开发门槛，实现无需编程，可视化设计H5交互场景应用，这无疑是对预算有限、没有开发团队的机构是件好事，大部分的H5场景应用，完全可以选择设计工具完成交付。

优点：低成本、周期短、可由设计师独立完成交付，沟通成本低、改版快。

缺点：自由度受限，不能完全达到编代码的自由度、代码有冗余，运行效率降低，不过随着工具产品的发展以及手机性能的提升，这些逐渐会得到改善。

市面上已有很多优秀的H5设计工具，策划设计机构完全可以根据自身的创意需求选择合适的H5设计工具，来降低开发、实施成本。

网上优秀的H5设计制作工具：《H5页面在线制作工具大搜集》

下面从 H5 场景应用的三个层级来提供选择建议：

1、动态展示

展示级的 H 5场景应用是目前用的最多的类型，主要实现动态的内容展示，类似于PPT的动态效果，目前此类的产品已有很多选择，比如MAKA、易企秀、初页、兔展等，已有大量的机构采用此类工具进行H5场景应用设计，学习成本低，可快速实现。

对于动画要求较高的创意需求，如果需要设计组合动画、支持序列动画（比如大众点评的“我们之间就一个字”）、支持动画时间序列管理，可以选择 Epub360、AdobeEdge、Hype 等，这些软件偏向于设计师专业群体，需要些学习成本。

展示类 H5 一般以设计和文案为重中之重，动态效果服务于内容。制作难度不大，一个比较简便的方法就是先做好静态设计，之后再考虑画面元素的动态展示。以下推荐两个用在线编辑平台做的H5，通过大量序列动画的应用，可以做到不逊色于高级 H5 定制的水平：

2、交互式动画

交互级的 H5 场景应用除了支持动画外，还需要支持手势触发和设备触发行为（摇一摇、重力感应等），此类的 H5 场景需求逐渐增长，一款 H5 场景应用可以将内容进行层级组织，通过用户的触发行为进行内容的交互呈现，同时通过触发反馈来增强用户的交互体验。目前支持触发器功能，能实现交互级的设计工具主要有epub360、adobeEdge、Hype等。

交互式动画典型的代表就是游戏，通过动作触发、参数变量设置、逻辑判断和记忆存储实现复杂的交互。以下推荐的案例是一款推理游戏，综合运用了动作触发、序列动画、参数、擦除、判断、记忆储存等功能。零开发。

3、互动 & 用户参与

互动级的 H5，需要支持用户的参与、提升游戏性，读者不仅仅只是内容的阅读者和转发者，还能够参与内容的个性化修改，形成读者自己的内容，满足读者的社交需求，完成此类的 H5 场景应用，以往基本上都需要开发团队介入了，如今类似 Epub360 这样的平台已支持灵活的参数变量以及计时器功能，甚至微信拍照、录音等高级接口也已经实现零代码编写的用户界面操作。

以下中国好歌曲的案例就用到了拍照功能，用户可以选择自己的照片与好歌曲的导师合影：