第34页

通关小游戏

展示案例

请在JZCreative公众号中回复“svg0216”查看20世纪福克斯案例，回复“svg0217”查看便利蜂案例，回复“svg0218”查看安波福案例（如图3-49所示）。

图3-49  安波福案例

代码逻辑

从以上几篇推文可见，在普通的轻量型交互推文中，我们较少采用图组动画嵌套和虚设手法。而在这种需要大量交互添加动画的编组过程中，采用抵消相对位移的原理，多次利用图组动画嵌套实现一次点击多个触发。采用虚设手法，多次覆盖刷新，实现同一元素的多次点击。

虚设在很大程度上，利用了人眼在很难识别短时间内微小改变的特点。比如有两个一模一样的人，甲先站在路口，乙在一千米之外，在可能的情况下，甲在瞬间被移到一千米之外，而乙紧接着也在此瞬间被移动到甲原先所在的地方。此时，站在路口观察的路人很难发现这两个人已经交换了。虚设的掩盖刷新也是这个道理。掩盖即抹去之前的，刷新即对元素进行新的操作。

由于svg的图组层次逻辑和svg动效的单次点动，一般情况下很难做到真正返回之前的状态，按顺序点击相同元素产生不同效果，所以要多次利用虚设达到目的。

翻页样式

案例展示

图3-50  上海福彩案例

请在JZCreative公众号中回复“svg0219”查看上海福彩案例（如图3-50所示），回复“svg0220”查看黑糖情话案例。

代码逻辑

点击提示触发区域进行翻页操作。它在很大程度上依靠意符，也就是说，如果没有意符，读者不知道该如何进行接下来的操作。

交互图文的读者，通常不会去碰触没有提示点的地方。当然也有不小心误触和喜欢到处寻找触发方块的人，所以在类似的交互点我们要加入很多防误触操作。一般可以直接在上方铺盖无法点击的防误触方块。这种方法简单方便，制作耗时比较少。如果追求更好的顺序式点击，则采用不一样的图组顺序设计、相应的动效设计。

此篇推文中利用位移动画（type="translate"）与不透明度动画（attributename="opacity"）相结合实现翻页效果。若每页的触发点位置不同，只需将触发点与页面编组即可；若每页的触发点位置相同，则需要复制两层相同的页面，通过控制第一层页面点击后不可见（attrbutename="visibility"），从而实现同一位置的多次触发。

滑动分割样式

案例展示

请在JZCreative公众号中回复“svg0221”查看通灵珠宝案例（如图3-51所示），回复“svg0222”查看小编备用案例。

图3-51  通灵珠宝案例

代码逻辑

滑动分割样式主要应用了css中的上下滑动/左右滑动布局（分别对应overflow-x和overflow-y属性），通过滑动布局与普通图片衔接，形成产品分割或衔接的创意视觉效果。

在处理此类交互图文时，尤其要注意终端优化问题。由于终端屏幕宽度及分辨率不同，容易导致可视区域的实际呈现效果差异，设计者通常会将创意部分限制在小于所有终端屏幕宽度的绝对宽度内。

图片跳转按钮样式

案例展示

请在JZCreative公众号中回复“svg0223”查看赞赏按钮案例（如图3-52所示）  [1]  。

图3-52  赞赏按钮案例  [2]

代码逻辑

利用“所见非所得”的思路，通过margin属性将调整不透明度后的图片叠于按钮背景图上方，点击按钮时实际点击的是透明图片，从而实现点击按钮跳转出另一张图片的效果。

此前在制作此类交互图文时，我们通常采用opacity属性，将图片的不透明度调整为0，使图片变透明。2018年7月微信团队更改了带不透明度属性图片的查看方式，因此用代码修改图片不透明度的方法不再可行。但我们依然可以利用相同的思路，将图片导出为Png格式的透明图片，做出类似的效果。

卡牌翻折样式

案例展示

请在JZCreative公众号中回复“svg0224”查看斗地主案例（如图3-53所示）。

图3-53  斗地主案例

代码逻辑

通过scale除了可以控制元素的等比例缩放外，还可以单独控制元素的纵向拉伸或横向拉伸。当元素纵向拉伸或横向拉伸赋值为负数时，即可产生翻折效果。案例中的卡牌翻折效果就是通过属性实现的，并通过限制其动画中心为图形的几何中心而非默认的画布左上角。

为矢量图形添加超链接样式

案例展示

请在JZCreative公众号中回复“svg0225”查看特仑苏案例（如图3-54所示）。

图3-54  特仑苏案例

代码逻辑

微信公众号在2018年7月中旬改版后，添加了超链接的图片右上角将自动生成icon的功能，引导读者点击触发。部分品牌在“一图流”创意设计中添加链接的图片将自动生成icon，这破坏了推文的整体性；同时，部分采用位图格式的超链接按钮设计将出现穿帮。

利用矢量图形的超链接效果可以解决上述问题。

H5营销

H5营销在很多新媒体平台都相对畅行无阻，微信朋友圈、微博、知乎等都支持投放和分发。H5营销在2014年、2015  年尚处于“翻页式”PPT的水平，今天却实现了百花齐放的交互效果。面对丰富的案例，我们到底应该做出什么选择？下面我们以技术循环论  [3]  为基础，指导新媒体运营中的H5营销。

最佳访问深度

无论交互的形式如何，抵达足够的访问深度都是运营者追求的第一目标。大多数H5的广告往往在最后露出；如果用户无法走完整个流程看到广告，那这个H5的成功就无从谈起。实际上，业内有不少浏览量极高但品牌主无人知晓的伪爆款H5，所以通过动画、交互等提前规范用户的访问路径，预判访问深度，是H5营销的基础操作。

对于最基本的翻页式H5，很多品牌主依然在特殊的情形下使用并传播。对此，应当遵循交互设计中“7±2”的原则。

从人类大脑认知水平看，一个普通人最多连续处理7±2个事件，也就是5～9个，所以在翻页式H5中，一般以7面左右为宜。有些企业发布30+的超长H5，往往是运营者不用心思考的表现。

而对于更复杂的H5设计，设计者需要考虑以下与访问深度有关的影响因子。

加载时间：  5秒内。

这意味着首屏的内容不能占用过多容量，要确保在最短时间内完成加载。因此除了视频流以外，一般H5的开屏发挥入场引导作用，主要核心内容并不会在一开始就完全展开。而且加载界面的趣味性会影响用户初始留存，所以选择调性合适的加载效果，但又不能加载时间过长，这是运营者必须权衡后完成的设计。

高峰期：  中午12点/晚上10点。

H5的投放时间，要与用户的访问高峰时段相匹配。

页面热度：  两天。

大多数H5作品在投放后，热度保持约2天，7天后运营者一般就可以对其做结案数据报告。通常一些能引发用户自主传播的H5热度也不会超过5天。加之目前各大平台对H5都有一些限流措施，所以爆款信息也会被平台归并。