如何创作一部点击量高的H5作品

柴之琪+邹敏+成雨静

2017年3月3日至15日，湖北广播电视台长江云报道组专程赴北京开展全国两会专题报道，期间联合四川川报观察客户端、湖南新湖南客户端、江苏苏州看苏州客户端四家媒体制作了H5作品《客官，请上船！你有一张四省通用提货券！》，推出首日点击量就已突破500万，从提出创意的的6个昼夜里，长江云制作组起早贪黑，废寝忘食，秉承“工匠精神”，精雕细刻，创作了一个比较满意的新媒体作品。

3月6日，小组讨论形成创意，初步构思以一艘载满货物的宝船为游览线索，宝船乘风破浪游经四省，浩浩荡荡达海通江。表达出在长江经济带这一国家战略的创新驱动下，多省经济在融合中互惠共享，走向全球的主题思想。

策划当天形成了可行性分析：①大的时间轴构架；②内页多个小时间轴的配合；③点击交互实现转换的游戏体验；④元素繁多或会导致H5因大而卡顿，需想办法解决；⑤随机数分享模块需从头制作；⑥四省合作，交流意见需达成一致，这得占用一定的交流成本。故初步估计制作周期在一周左右。此作品由长江云担纲主力，承担设计页面、逻辑结构搭建、整合素材、页面集成等90%的工作量。

3月7日初步定下整个地图的基调，以古中国风为主题气质，遂开始总体设计，同时整个H5的结构也进入搭建阶段，长江云小组拟采用封面——导语页嵌入地图首页——地图页——分享页——尾页的流水线结构，一滑到底，通过手指的滑动来控制空间的移动进而控制宝船的航线轨迹，实现在四省装货的效果。内页则准备采用点击收货的形式，尽可能做流畅有点击的快感。分享页则由装满货物的箱子构成，尾页由参与制作的四省媒体APP的LOGO填充。

3月8日确定了整体风格后，长江云制作组开始构思交互手法和转场形式。由于整体采用的是“中国风”风格，初步设想在封面和进入地图转场的地方采用“拨云散雾”的形式，将“祥云”的元素嵌入其中：导语文字放置厚厚的祥云之上，随着用户手指的滑动，云雾渐渐消散，宝船开始在长江上“行驶”，同时在到达每个省份的“港口”时会通过碰撞事件引出“大熊猫”、“ 金丝猴”“ 丹顶鹤”“太湖 ”等四省代表元素。但作品初步完成后，测试中发现卡顿现象比较严重，经过多轮排查，发现问题出在拨云散雾的这些“云”和“碰撞事件”上，这个场景由5块比较大的云构成，每块云都有各自的一长段轨迹；碰撞事件交互比较复杂，都需要占用较大内存，虽能营造一个非常富有动感的场景，但因卡顿给用户带来的体验较差，经过反复斟酌，决定本着“用户体验至上”的理念，删掉了这些云层和碰撞事件，大大提升了流畅度。

3月9日 设计基本完成，进入制作阶段，整体采用的仍然是大滑动时间轴套透明按钮的结构，同时对透明按钮内的不同元素做不同时间的轨迹描绘。在最上层铺设内页的架构方面，初始设为隐藏，以对应作品整体逻辑。这一天先后完成了地图页的滑动设置、部分交互设置、拨云散雾的效果、随机分享的模块、两个需要做动画的序列以及内页铺设，工作量繁重，达到正常工作日的三倍以上，直到深夜一点，小组成员的工作还在持续进行。

3月10日 长江云制作组首先对预加载页文字反复修改，一开始撰写的文字是：等待10秒，精彩自来，但大家讨论之后认为：一是文字与作品主题没有关联；二是等待时间过长，容易增加用户的抵触情绪。经过反复斟酌，最后修改为：上船的乘客较多，请耐心等待哦。此外，四个省份内页的铺设并测试、页面之间的交互设置也做了大量修改。3月10日当天下午完成了整个制作，并开始第一次测试。面对着眼前这个花费了五个日夜所精心培育出的“花朵”，大家非常激动，然而，现实情况遇到了一点波折：虽预想到由于内容丰富，场景复杂，交互频繁，作品播放会有一定的卡顿，但在测试时，“宝船”每移动一次就会卡一次，完全不能按照正常轨迹运行，甚至出现了以前从来没有发生过的闪退现象，用户体验极差。

尽管“理想很丰满，现实很骨感”，但我们并没有气馁，大家來不及吃完饭就开始分析原因，初步列举出以下几条：①内容太繁杂，元素过多，单个元素的大小过大。②滑动时间轴过长。③搭建内页元素时间轴和需要加载的轨迹达到100条，而一般普通H5作品通常只需不到10条，致使负载过大。④粒子渲染的文字特效达到2.7M，占用资源过多。 ⑤元素太分散，需要分开加载的项目太多，其中一个项目包含的层级达到7层，而一般仅为3-4层。

针对以上问题，长江云制作组一一进行了优化，首先将每个超过100KB的素材都进行了无损压缩，这样一下子就压缩了60%的空间；其次将滑动时间轴缩短，对齐前面的关键帧，调整好船的轨迹和页面间的转场；第三在多次压缩粒子渲染文件无果后，选择了删除这个特效，从实际效果看，对作品内容并无太大影响。第四采用了画布加速，将同类型同层元素装在一起，将加载层级由七层减到5层。完成了以上优化后，再次进行测试，作品流畅度得到很大提高，此时已是3月11日凌晨1点半。

3月11日 长江云制作小组本着“一切为了提高用户体验”的理念，对部分细节做了第十次优化，例如内页的返回按钮的放大，尾页logo转盘的放大，不同页面之间叠加的优化，尾页增加分享页面提示的按钮等等，最后于当天下午7点56由四省媒体同时发布，推送。作品一经推送，就获得了广大用户和同行的好评，大家普遍认为，此作品立意高远，形式新颖，界面画风古朴明朗，操作手感平滑流畅。作品发出48小时内，四省多个客户端和两微等端口上的转发总量达到800万+，不到一个星期转发总量已突破1010万。

通过这次H5制作，我们收获良多：①对“预加载页面”的制作和运用更加自如，这会是一个很有用且讨巧的小模块。②用户体验！用户体验！用户体验！重要的事情说三遍，不管你效果有多华丽，交互有多炫酷，没有流畅的用户体验，一切都是白搭。③要做好内容随时会被修改的准备，文件、元素一定要命名，尤其是在元素特别多的情况下。④画布可以在一定程度上优化加载速度。相信这些宝贵的收获将给我们以后的创作带来有益的启迪。

（湖北广播电视台长江云）