<table><tbody>
除了干货，其它什么也没有
职场
数据
新媒体
设计
极客
昨天有没有被网易“第五人格”的推广 H5 刷屏？这是计老师测试后得到的二维码卡片海报▼
从一个“心理测试”这个模式来考量，正如我们在《深度分析：用H5狂吸15亿粉丝只需一个办法》提到的，即便的 Facebook 的 Social Marketing 战场也一样屡试不爽。
而从“游戏推广”的这个模式考量，相比王者荣耀 H5 系列的共鸣式切入，“第五人格”这次用了浅植入深触达，确实辐射到了更多用户。
那么问题是，同类型的 H5 这么多，凭什么网易又火了？
第七期 H5 殺手训练营即将开营！让你从零基础开始，一网打尽 H5 商业作品设计、微信高级交互图文排版等硬核技巧，而且将获赠我们的新书《硬核运营》签名本，与《Prezi 完全解读》两本 JZ 系图书，图书将在正式发售后统一邮寄给你！
细腻交互
利用拟态设计，网易的这款 H5 的开场形式上中规中矩。然而在交互上请仔细观察▼
“直接答题”的漂移路径：加速-减速；
“了解一下”的缩放动作：加速；
文字气泡的放大动作：过度放大-收回；
也正是因此，不少用户看到这份作品的直观感受是——好流畅的效果哇！
缓动函数
决定一个 H5 商业作品细腻与否，关键在于缓动函数的应用。缓动函数，是视觉设计与交互开发中常用的一种参数支持方式，重点在于模拟物理量对元素的作用效果。
因为在现实生活中，没有任何一个物体是能永久处于匀速直线运动中的。它们往往受到一个或多个力的作用，也因而形成了一系列动画的感官。 如果在 H5 设计中只是机械地为素材添加动画，产生大量类似匀速直线运动的“不科学”效果，则最终作品就会显得“生硬”。
但是，我们无法要求 H5 识别各种物理作用力，并通过计算演示其对应效果，但以下这些作用力却又广泛发生在各类动画中：
牛顿第一定律（惯性定律）；
牛顿第二定律 F=ma；
牛顿第三运动定律 F=-F’；
摩擦力 F=μ×FN，包括静摩擦力和动摩擦力；
动量守恒定律 m1v1+m2v2=m1v1′+m2v2′；
阿基米德定律 F＝γV；
胡克定律 F=-k·x（弹性定律）；
表面张力；
如文字气泡的放大回收效果，实际就是在模拟胡克定律式的效果。
既然我们无法让 H5 学会公式运算，那么描述动画更简便的策略是——确定任何时刻物体所处的位移，即获取一个“位移-时间”关系图像。并且为了进一步优化识别的便捷性，我们将位移和时间都设为 1。
由此，匀速直线运动的函数图像如下，它对应着 CSS 里运动属性的 linear 线性动画。线性动画会在多个指定值之间平均分配时间，然后在每个停止点之间进行匀速动画▼
至于加速、减速，则有如下函数效果▼
尤其通过调用 JQuery 中的缓动函数库，我们能为 H5 设计增加更多富有表现力的动画过程▼
见微知著。网易的大多数作品，除了我在《随笔｜为什么网易H5总能刷屏？》中已经谈过的方法论问题，设计细节上也是猪厂的强项。
那么，如何作为运营人，如何跨入 H5 营销圈，自己上手为公司设计优秀的投放级 H5 呢？我将在线下培训中解读更多案例，并提供教学指导▼
閱讀更多 JZ多媒體解決方案 的文章
