一个Geek范的H5页面制作工具

时间：2022-08-10 16:00:02 | 来源：网站运营

时间：2022-08-10 16:00:02 来源：网站运营

（如果看过我其他回答的朋友应该知道我其实是很讨厌在广义上使用H5这个词的，但是在限定的语境下，作为一个明确的指代名词，本文中提到的“H5”均指代“基于移动端传播的可交互（不限于播放影音，页面滑动，擦除，页内动画，表单收集等方式）的轻量网站”）

【申请试用的方式已经在文末更新了】

2016年4月12日 更新

百度H5已经开放使用，直接登陆百度H5网站打开就可以用啦~

前言

大概是两周前百度的朋友说他们发布了一个H5开发工具。

我说，现在这种平台太多了，遍地开花，颇有当年百团大战的感觉，你们怎么也来插了一脚。

ta说，我们这个跟别人的不一样，你用一用就知道了。

老王卖瓜这种事情我是见怪不怪， 但是有一说一，在过去一段时间里面，百度出品的H5页面确实都是业界比较先进的，尤其是在对技术的运用上，非常的得当。追踪了一些案例源码，也能感觉到，迟早会有一个平台化的开发工具诞生。

工具的诞生的目的不外乎两点：节约劳动时间和辅助完成无法徒手完成的任务。而节约时间又可以从提升劳动效率和减少沟通成本入手，对于IT业来说，这也是提升工程效率的最重要两个方式。所以我们不妨从这两方面去看一下这款H5工具，是不是一款优秀的工具。

新建

打开一个新的页面，左侧是页面列表，中间是主舞台，右侧是元素编辑，下方是图层和时间轴。相比于入门级的H5平台，多了时间轴，可以对动画做更加精细的调整。

百度H5有一个亮点是支持导入psd文件

找了一个以前的项目设计稿，却发现超过了10M的限制，在把智能对象都栅格化之后，体积终于达标了。

这是上传之前的样子


上传导入之后是这样子

17个图层全部都一键导入了进来，每一个图层都是在设计稿对应的位置，而且图层的上下顺序也是和设计稿对应的。这个功能真的非常方便，可以省去切图，定位，剩下的事情就是托拖拽拽去处理动画和交互。但略微失望的是，图层并没有按照PSD图层命名。

动画

动画的设计很像PPT，分为出场动画，离场动画和强调动画。选择动画后，在下方时间轴里可以看到动画的开始时间和持续时间，并且可以在时间轴上自由拖动，同时在动画菜单栏也可以直接输入动画时间，无论是数值控的程序员还是直觉派的设计师都可以找到适合自己的开发方式。

一个元件可以设置多个动画，比如进场之后过一段时间再离场，每个动画的开始和持续时间都可以单独设定，同样可以设定为循环指定次数或者无限循环


当然这个时间轴的部分还有很多可以改进的地方，比如时间标尺固定在栏目顶部，否则修改下面图片的时候看不到时间，另外可以增加时间辅助线，便于做串行动画的时候参考和其他动画的时间关系。

布局

在组件顺序栏中可以对图片重命名，还可以添加分组。

当新增分组之后，除了原有组件动画以外，分组本身可以设置动画，为设计师做复杂动画设计提供了很大的方便。

翻页

当在左侧工具栏选择某页的时候，右侧工具栏可以修改翻页设置。翻页特效和翻页方向都可以设置。

以及大家可能比较关心的自定义分享文案和图标

加载

加载页作为一个独立的页，编辑页面的入口也放在了重要的位置。

系统默认置入了一个加载页，可以看到，使用了一个无限循环的loding图片，这也是官方展示了一下动画的使用，确实是非常的方便。

另外一个小细节是，拖动修改图片大小的时候，如果按住shift再拖动，图片会保持原本的宽高比，用惯了PS，拖动的时候随手用了一下，没想到居然这个快捷键也被支持了，能感觉到开发团队在细节上下了很多功夫。

音乐

好像在很多人心目中，没有背景音乐的话就不能被称为是H5，虽然我一般打开页面的时候都会早早把手指等在右上角，看到音符图标出现的一瞬间赶紧按下去。

我们注意到在时间轴上方除了当前页和加载页以外，还有另外两个页面设置。全局前景看起来很适合用来控制音乐播放。

当我们上传一段音乐之后，可以设置播放，暂停的按钮图片，以及设定是否自动播放以及是否循环播放。平台默认的设置是自动播放和自动循环，算了，你们开心就好，反正我单身二十年的手速不等音乐响起就可以关掉它。

表单

H5页面另一个重要作用是收集报名信息，在百度H5中也提供了表单插件，可以一键插入表单，并且设置是否必填以及提示文字。

但是找了半天也没发现表单数据在哪里可以获取到，这时候在程序员血液中潜伏的那一点点PM的基因告诉我，在页面找小问号，可以解决问题，

果然在预览按钮旁边找到了小问号，原来帮助文档写的很详细，之前遇到的问题在文档里都写明了使用方法。

统计

页面发布后，在案例页面右侧会多出来一个统计按钮

点击进去可以查看页面PV/UV，渠道来源以及表单提交的数据。表单数据可以一键导出EXCEL文件。

其他

在页面导航栏的小问号旁边还有一个HTML5的小盾牌，出于好奇点击打开了一下，然后就是很哇塞的感觉，至于是什么感觉，你们可以自己点开试试看。

总结

标题之所以说这个平台有Geek范，是因为百度H5工具是工程师从内部工具总结发展产出的一款产品。

相信加载页的安排和音乐播放的解决方案，都是来自平时开发中做过非常多的页面所积累的经验。工程师用这些经验去改造和创造，这也符合我心目中理想的工程师：因为无法忍受重复和琐碎的工作，而发明各种各样的工具，再用这样的工具去创造更漂亮的产品。

工程师其实很难直接展现出自己的价值，他们用着只有自己能懂得语言，做着外人看不清进度快慢的事情。在这个前端的大时代里，表面上我们能看到各种移动页面的游戏，还有每天朋友圈里不停刷的营销页面，而在这些表面之下，是游戏引擎，开发平台在支持，这是前端生态的”里子“，是持续推动生态的动力。

有空的话会把市面上的H5制作平台都写一遍，然后从程序员的角度做一个横评。周末时间仓促，写的比较简单，给位看官当看个热闹好了。

这个是demo的传送门