超全合集｜建党百年主题H5+SVG案例｜30份作品赏析
红色运营宝典
发布于:2021-07-02
文章内容来源于公众号：红色运营宝典，点此可查看原文，内容版权归相关企业所有，本网站仅供交流学习。若涉及版权问题或存在侵权情况，请及时与我们联系，我们将第一时间进行删除处理。
摘要：热烈庆祝中国共产党百年华诞，共同学习融媒体宣传优秀案例。
百年华诞，融媒体技术让互联网的全民传播更为多样。特此，我们筛选了截止到今日（7月2日）的 30 条公众号生态中 SVG 交互式图文和 H5 移动页作品，与各位同志们分享其中的创意和制作巧思。它们当中既有官媒输出，也有企业发布。学习、分享、收藏，为融媒体工作打开新视野。可以添加我们的助教微信 Zhuoya_Work 索要更多行业高阶开发案例。
条漫+SVG 互动技术双加成，构筑了一幅百年互动画卷。该作开发工作由业内知名开发者荒村和三千喵协同完成，看似简单的动态展开画幅中，其实包含了巧妙的动画分层。
也就是说，每一个画幅是静态整体画面与元素动画 GIF 的叠加，这就极好解决了同志们在制作新媒体内容时整体 GIF 往往不清晰的困扰。其整体点击伸长的整体效果，可以在 e2.cool 黑科技编辑器中通过免费组件「点击-伸长」实现。
团中央的该条融媒体作品，则更近一步结合了听觉感官。让声音配合画面，节省了不必要的文字篇幅，又更生动地传达了画面内容。该作的开发工作由业内知名开发者小杨完成，其中让人眼前一亮的是「伪音频视频」应用。与 SVG 的描边动画<dashoffset> 结合后，递进感和沉浸感得以全面提升，又避免了误触转跳音频页面现象。画面中左侧锁定的 CSS 盒子实则为音频播放器按钮，由此实现了同步触发的定位问题。如果就仅该布局而言，可以在 e2.cool 黑科技编辑器中通过组件「伪音频视频」实现。
简单的互动模型搭配合适的视觉设计，形成了巧妙的开信封特效。仅就技术层面而言，大多数新媒体编辑器都可以实现。如在 e2.cool 黑科技编辑器中，通过组件「点击撤场」亦可。注意使用时在筛选器中，将“默认向左”更改为“向下”。
较为少见的<touchmove> 触发式 SVG 作品，通过拖拽行为引发收缩-切换-伸长的交互效果，并且由于必须定宽 343px，开发的计算量不小。如果采用普通点击形式，则可以通过e2.cool 黑科技编辑器中的组件「点击-收缩切换-伸长」完成整体的外层逻辑代码。
作为少数由 AI 编写发布图文的中国地震台网，在昨日手工发布了一篇带背景视频布局的图文。该图文虽然核心为视频，画幅也仅一屏，但布局干练，画面简洁大方，非常值得同志们学习。其中视频两侧有缩进，得以露出背景。可以在 e2.cool 黑科技编辑器中通过组件「带背景视频」实现。
IF 设计工作室开发的此篇图文，也是将音频与 SVG 交互结合而成，前期的工作筹备量不容小觑。但这番努力的付出，确实让党员们的心声得以用更优秀的融媒体技术生动展现。其中包含标准的音频播放器美化布局，也包含了同步切换图像的模式。如果基于 e2.cool 黑科技编辑器，那么需要用到如「切换图片+播放音频」、「音频播放器美化」以及「音频触发定位器」。
科普中国此番创作了一系列别处心裁的圆形动态漫画，将我国百年来的科学发展史娓娓道来，其 SVG 的点击伸长效果由语图工作室开发。如果基于 e2.cool 黑科技编辑器，那么可以选择免费组件「点击伸长」实现相关效果代码。
党史测试题怎么发布？来看业内知名开发者赵阳与国家电网上海电力公司的融媒体解决方案。将原本静态呆板的图文，以 SVG 交互的方式组合成数字互动问卷，极大提升了问卷的能效转化。该结构特性较为复杂，建议与专业开发者合作定制。如考虑相对简化的交互形式，那么通过 e2.cool 黑科技编辑器，可以选择组件如「常规答题」或「HANS 问答」等制作。
精品的互动长卷，一般在商业领域用于重点产品的发布。而恒泰资产对建党百年融媒体工作高度重视，倾注了大量心血用于本作的设计和开发。该作品的代码设计精细，由业内知名开发者小杨操刀。无论从交互体验还是内容传达上都是 SVG 领域佳作。此类代码装置目前完全无法基于编辑器完成，只能手工定制实现。
同样由小杨操刀交互开发的作品，与共青团中央作品有异曲同工之妙。音频、漫画、交互三合一，同样是党政融媒体的典范优秀作品。
由业内知名开发者荒村操刀设计，是伊利牛奶的华诞限量版发布，插画切片十分精美。该图文是多种 SVG 装置的复合，以 e2.cool 黑科技编辑器的组件命名为例，会包含包括「点击-伸长」、「渐进效果」、「视频号美化」、「无图标超链接」、「无图标小程序」、「公众号卡片美化」等。
永远能快速流行的计数式 H5，无需复杂的设计与交互，却能快速唤醒用户的凝聚力，并且产生客观的传播能效。
精致细腻的调频式交互创意，让音频内容具备极强的可控性，配合有一定微动效的插画画面，让时代的声音娓娓而来，直击人心。
在那个年代，彩色照片尤为珍贵。通过涂抹屏幕，将用户带入照片冲印场景的氛围，数字化的黑白照片由此更具质感。该作同样运用了系统参数统计用户访问行为，计数的效应不言而喻。
不得不说，党政融媒体工作中漫画应用越来越广泛。这一份来自山西的 H5 作品则通过打卡的方式，配合锚点动画，让本身静态的地图插画具备了一定的动画能力，且以“红色基因比例”的话术引导用户不断增加停留时间。
本作与本案例合集中此前的 SVG 交互图文案例是姊妹设计，其中的音效设计会随着用户的滑动位置而变化，这也是锚点动画的作用。额外的，H5 内还提供了照片融合能力，极大丰富了二次传播的形式。相对来说，H5 的体验感沉浸度更高，SVG 作品则更加直达，同志们在融媒体形式选择上可自行判断。
一打开 H5，你就一定会意识到背后有网易团队的参与。典型的测试型逻辑，流畅的音画设计风格——没错，这正是网易哒哒和人民日报的合作作品。不过既然是非严谨逻辑的测试，自然少不了导向化设计，网易这次将其在融媒体思政工作中发挥得淋漓尽致。
收集型 H5 也是极易产生传播点的互动类型。该作的漫画更偏萌系，迎合「徽章」的圆形比例设计需要，也让互动氛围变得更轻松。另外，这一类开发也可以在图文中以 SVG 或 CSS 技术实现，所以也是同志们可以考虑的相对容易上手的融媒体设计方向。
新民晚报则以独特的“电波”视角，解读百年历程中的特殊事件。该作微横版长卷，也使用锚点动画控制元素的进场时间点，让精美的静态插画近一步提升质感。而总体来说，其与众不同的切入点，是它的最大亮点。
从入党誓词选题切入，这份 H5 技术层面虽然并不复杂，但传播效果亦形成刷屏之势。当然另外值得一提的是，看似简单的页面，其实排版设计功底深厚，尤其誓词页虽然布局交错，但易读性把控得依然很好。
线索收集类 H5 的制作一般在党政融媒体宣传中是比较少见的，而中国日报敢于创新，在百年华诞主题中探索应用，值得点赞！
当下的融媒体设计怎能缺少 VR 主题 H5？第一财经的这份作品就以虚拟博物馆的形式让用户自由浏览百年历史，并且很好得将视频、音频、图文等各色形态素材有机组合。
以放映机为画面主轴，搭配人脸融合接口的趣味互动，让用户主动将自己带入漫画情景之中。读到这里，你应该对漫画融媒体设计的重要性也充分了解了吧？
近期我们看到各个地方党委基于 H5 编辑器，制作了一批在线头像生成器，这也是融媒体传播的一个很好的切入口。以功能为导向，直接帮助用户制作个人设计物料。这里我们以一份以 Epub360 为平台基础的设计，它的各方面制作完成度相对较高。
依然是地方组织的 H5 作品，选择了长卷漫画的形式，通过单个按钮来激活或阻断播放。实际上这种简洁交互的背后，更多还照顾到了地方城市用户 H5 认知相对较少，需要让交互难度可控的思量。从画面设计来看，对于地方出品而言已经是可圈可点了。
解放军报的这份 H5 交互形式十分特别，以一种类似“抽签”的逻辑让用户随机解锁开特定图文内容，并配合电报声和节奏紧凑的背景音乐，营造了独特的部队风格。
新京报以“一颗红星穿越百年”为线索，在这份 H5 作品中融合了多种交互技术，也是较少数应用陀螺仪判定的作品。滑动、连按、长按等操作层出不穷，形式体验相当丰富。
ZOOM 式一镜到底无论从技术还是设计上都属于难度相对大的 H5，以往行业内案例通常是网易系年末娱乐大事件盘点等重头项目。而近日，苏州推出的该一镜到底 H5 作品内容扎实，设计用心，同样可以说是此类 H5 中的上乘作品。
国资小新的主题发布，则选择了一个更特殊的切入点，那就是以邮票为载体，分享在邮票上国企百年来的变迁。该 H5 作品横版布局，排版精致，交互便捷。实际上也是泛融媒体图文排版的一个很不错的范例参照。
人民法院报则以 H5 为载体，整体呈现了特刊的电子版。但它并非简单地直接将版面扫描，而是将内容完全按移动阅读习惯进行了布局，用户通过点击可以进入二次排版的版面内容。所以形似简单的电子版报纸，实则排版依然万分用心。
如此精心整理的案例，值得同志们分享收藏，也可以添加我们的助教微信 Zhuoya_Work 索要更多行业高阶开发融媒体案例作品。如有任何培训需求，则可以点击公众号会话窗口下方的预约按钮与我们取得联系。对于文本的部分案例效果，你也可以访问我们研发的融媒体制作工具进行探索尝试：
微信官方 SVG AttributeName 开发者
本文内容来源于公众号： 红色运营宝典 ，请扫码查看原文。
![]()
点此可查看原文
