H5实战干货、iH5黑历史,听听老司机偷偷和我说了什么？.docx

H5实战干货、iH5黑历史，听听老司机偷偷和我说了什么？

这次请来的设计师比较带感，有三个特质：

他是第一批H5设计师，资历老、故事多。
他走技术路线，段位高，透露了很多实战干货。
他是“强迫症患者”，采访完怕自己说不清楚，还在微信上发了N条短讯交代细节；我过后特意数了数，除去礼节性回复和链接共有462字——这本该是发语音的节奏啊！

铛铛dáng~欢迎老司机DAV登场：

DAV
（又是一个不给看脸的）

一、老司机的经典H5实战

吉利博越上市邀请函H5（DAV负责交互）

首先必须说清楚，老司机可是玩技术的，他一般不接设计单，而是根据甲方需求来处理素材，构造页面逻辑后完成整个H5的交互。比如上面这个今年5月他为某汽车上市制作的邀请函，每一个画面都值得细细品味，绝对能充当H5进阶教学实例。

吉利博越上市邀请函H5的密码验证部分

这个H5整整把文字玩出了4种新鲜的花样：打字机动效（iH5自带）、漂移特效、悬浮特效和转动特效。打开他案例的后台，我有点智商不够用的感觉，竟然没有半个页面！所有动效都是用一个个时间轴控制播放的，一个接一个被触发，都直接放在同一个“舞台”下（H5要求，不必模仿）。

H5漂移悬浮文字的编辑界面

一般在H5中加入这么多特效，很容易就把整个案例卡死了，然而这对于老司机而言可不是问题。莫非是因为老司机会代码？他有什么创作秘诀吗？

二、老司机是何方神圣？

帝豪4S的H5（DAV负责交互）

DAV，电子工程师，年将满三十，目前就职于一家电子电路公司。说起来，他现在的工作和H5没什么关系，而且他每个月也就接一两个H5单子。

和之前好多妹子求勾搭、工作狂属性爆表的悟脚叔叔不同，DAV业余接单显得随意得多：“如果接平面设计的话，需要反复改稿，而我是比较随性的人……【以下省略300字】所以我负责实现客户（H5实现）的需求就可以了，节省时间。”

#关爱芭瞎时尚大奖#（DAV负责交互）

所以他成为一名H5设计师其实是阴差阳错。后来工作变多后，他就开始只接负责H5交互的单子，其中有各种各样的营销小游戏，也有娱乐大众的八卦的评选活动。

比如上面的#关爱芭瞎时尚大奖#，是时尚芭莎、关爱八卦成长协会（自媒体，粉丝超过200万）合作的评选活动，本来想问问他有没有什么八卦小道消息，结果他提到这个H5只淡淡说一句，“哦，那个杂志啊……”（就没有然后了）。

截至2016年6月17日，他在iH5的个人主页长这样：

DAV在iH5的个人主页

这么寡淡？好吧，事实是DAV做的H5一般直接挂在企业账号上。本着为人民服务的心态，后面会分享他一整套专业的H5接单流程和案例优化技巧——再懒的人不看也会后悔的！

三、听老司机讲那过去的故事

DAV的二等奖H5作品（负责设计&交互）

为什么叫DAV老司机？因为他资历的确比较老。

2014年9月前后，他偶然在网上看到iH5（当时还是VXPLO互动大师）与金立手机合作的H5创作大赛，于是报名参加，自学工具的使用、自己做平面设计，耗时大半个月完成H5，拿下二等奖。

因为他在平面设计、前端、后台等领域都有所涉猎，有时会自己在iH5上开发新功能，其中还有一些不为人知的趣事。

脸盲大作战（微信排名游戏）（DAV负责交互）

【内幕1】比如，上面这个脸盲大作战的H5，涉及通过微信授权获取用户的ID和分数，是他用iH5现有的微信授权功能实现的。而想当年，他一开始还是自己编写JS代码做的微信游戏排行榜。

【内幕2】又如，之前他自己开发出在H5中“合成照片”的功能，用于拼合不同的图像素材，输出为一张照片。不久，iH5实现同样效果的“打印画布”功能也上线了。

事实是，有时候老司机急着用一些功能，就自己先做上了，并推动了平台上对应功能的上线（真是实打实的骨灰级用户）。采访过程他还回忆起iH5的发家史，从没多少教程的VXPLO，到改版后的各种“阵痛”和“革新”（这个故事就略长了）。

DAV加的14个iH5用户群

他说自己是强迫症患者，最明显的证据是他竟然加了14个iH5的用户群！而且还都不屏蔽，说自己不点开看就不舒服——上面这张横跨14个群有他身影的截图便是存证——我不介意你们加爆他QQ。

四、老司机教你接单秘诀
老司机平时自己不去找单，找上门来的单子一般是“回头客”，这从他对客户和工作负责的态度可见一斑。

DAV自制的案例说明书

这份H5案例说明书，是老司机专门设计给甲方设计师看的，罗列出H5的建议尺寸、设计素材的建议尺寸、所需素材格式等要求。

他接单的过程大概如下：
①获得策划方案
②评估实现难度
③获取平面设计素材
④处理素材（切图、压图等）
⑤导入iH5重构页面、添加效果
⑥按甲方要求修改H5

DAV自制的iH5使用指南

就算是H5做完了，老司机也不会甩手不干，还会认真地和客户进行周全的邮件确认，并附赠一份独家的“武林秘籍”——iH5的使用指南。这份指南用于引导新手客户进行后续操作，包括网站的登录、案例的创建、后台数据的查看等内容。

五、老司机教你案例优化
当然，也不是每次都这么溜的。

比如前面那个《脸盲大作战》H5，一开始甲方说可以直接套模板，价开得比较低。老司机按要求做出来后，企业方又觉得流畅度不够好，结果他只能特意花时间重做了一套设计逻辑（于是这单其实有点亏）。

DAV做的脸盲大作战H5测试版

这个游戏要求在众多猫咪中，指认出指定的猫咪，但原模板每个关卡中指定猫咪的位置是一定的。最后，老司机改良的H5成了原来的升级版，每个关卡的指定猫咪会出现在随机位置，大大提高了游戏的难度和趣味性。

是因为动用了代码吗？非也！这样的游戏也是完全通过iH5设计的，只是实现上比较考验逻辑能力。老司机承认，一般会调用JS代码的情况极少，最常见的不过是加第三方平台（如百度统计、站长之家）的页面监测代码，用于入口页面、浏览量等的统计。

同样地，很多人抱怨做出来的H5卡，其实一般是因为素材减负和画面逻辑的设计没做好，拖慢了页面加载速度。那么这一块老司机又有什么经验？

①压缩。
图片素材的尺寸与H5的尺寸对应（太大了就浪费资源），而使用压缩工具也能减少图片的容量，比如T。

②素材重构。
简单地说，就是让“对象树”下的对象越少越好。
举个例子，拿到设计PSD源文件后，如果你发现一些图片按钮并不需要什么动效，请直接把它们设计在背景里，通过透明按钮来添加触发的热区。而且在Photoshop中划分完图片后，还能使用iH5的PSD上传功能直接导入分层素材。

③隐藏。
没用到或用完的对象，考虑用事件把它们隐藏起来。

④错开。
资源加载的时间尽量错开，避免同时加载，导致需要用到的素材无法显示。这里可以先把图片隐藏，利用时间轴的方式让它显示（即加载），从而达到定时加载的效果。

这些料够猛吧？欢迎留言评论，说说你对揭秘老司机哪个H5的技术细节最感兴趣？让我们一起扒扒皮！

作品合辑：

请收下我的告白