这种花式排版技术，人民日报、人民网、新华网、央视新闻都在用
红色运营宝典
发布于:2020-05-13
文章内容来源于公众号：红色运营宝典，点此可查看原文，内容版权归相关企业所有，本网站仅供交流学习。若涉及版权问题或存在侵权情况，请及时与我们联系，我们将第一时间进行删除处理。
摘要：这么多案例，对你的机关单位新媒体运营是否有启发？
图文内 SVG 交互式排版规范是 2016 年由 JZCreative 和微信团队联合以反向白名单形式向业界推出的黑科技排版技术。如今，这一技术已经在包括 Apple、华为、宝马、奔驰、玛莎拉蒂、法拉利、爱马仕、香奈儿、迪奥等一众超一线大牌公众号频繁应用，被誉为排版中的“奢侈品”。长按识别下方二维码，一睹该技术在商业领域的逆天应用▼![]()
不过，这一顶尖技术的开源特性也为党政机关提供了应用的可能性。尽管目前整体来看，他们对相关技术的应用略显薄弱，也远不及商业领域中的头部品牌营销，但包括人民日报、人民网、新华网、央视新闻等党政头部新媒体都在积极探索，接下来我们不妨一起浏览他们的近期作品集。
基于 SVG 花式排版形成爆款传播，人民日报率先做到了。这篇《今天，发条微信一起点亮武汉》是上个月的绝对热门图文，引发了全领域全行业的关注和模仿。“人民日报这篇排版怎么做到的？”是当时 80% 小白编辑都在咨询的问题。代码结构上看，它的交互开发并不复杂。CSS 层级上它由一个父元素<section> 和一个子元素<svg> 嵌套而成，其中灰度版（黑白版）照片在父元素内，以<background-image> 形式示人，RGB 版（彩色版）照片在子元素内，同样以背景图形式植入。一开始，SVG 通过<opacity:0> 保持透明，当它被点击后透明度参数从 0 渐进至 1，由此带动背景图逐步呈现。由于其结构简单，你也可以在例如 135 编辑器等第三方平台上找到模板（id：97481），所以设计的重点在于这两张前后照片的修图。“景物的夜景色彩版取景专业且修图精细，黑白版降低了亮度、饱和度，调整了黑白渐变映射关系，所以使得这组黑白-彩色的变化绝不仅仅是色彩变化，而是多项图片参数的渐进变化。”
有了人民日报的成功策划，人民网也很快基于地球日主题发布了类似 SVG 交互结构的作品。这篇《地球人，晚安》的前后变化更为丰富，文案、插图、手绘纹理都有一定的变化。
除了疫情数据可视化，我们也还向行业交付过诸多其他 Data Visualization 案例，近期的《一图看懂真爱梦想2019年报》同样引发了公益圈的热议与好评。当下，我们正在为多个政府职能机构开发图文可视化动态 SVG 数据报告，如果你的机关单位有类似的需求或疑问，可以与管理员微信 Zhuoya_Work 联系。
新华网的《免费！》一文也同样使用了伸长式 SVG 图文模型，告知了读者面向医务工作者免费的旅游景区信息。那么同样，我们也为你带来一段免费的教学视频，并且以 Apple 图文为案例，让你最快理解这类伸长式图文的开发思路▼
新华网的另一篇《都！给！他！们！》则采用了 GIF 控制器模型，让用户主动按序触发一个 GIF 动画。不过本文瑕疵较多，一方面打开时加载速度较慢，另外前景与背景的<viewbox> 参数未能准确设设定，导致黑底露出问题严重。
这么多案例，对你的机关单位新媒体运营是否有启发？我们常常发现，党政新媒体运营的思路、技术、方法会慢于市场发展，而面对人人平等的开源技术，我们就有可能提前布局，和人民日报、人民网、新华网、央视新闻一样及时行动起来。 红色新媒体运营宝典
来了？坐，有什么困难跟组织说。
本文内容来源于公众号： 红色运营宝典 ，请扫码查看原文。
![]()
点此可查看原文
