基于SVG技术的新媒体交互内容创新

作者:熊娇 

来源:《全媒体探索》2024年9月号

图片

新媒体时代,信息传播逐渐从传统静态传播转向交互传播,SVG这一自带交互基因属性的技术在新媒体内容生产传播领域激起层层浪花。

SVG技术激活内容生产新生态

内容与技术的融合激活了内容生产新生态。SVG技术的加持提升了优质内容的传播力,助力主流媒体在新媒体平台上探索新的风格特色。

(一)技术成熟化:扩展内容交互形式

SVG(Scalable Vector Graphics)即可缩放矢量图形,相较于JPG、PNG、GIF,可以无限伸缩而不失真,是基于XML(Extensible Markup Language)开放标准的矢量图形语言,可以直接用代码描绘图像。SVG技术即通过代码改变SVG图形的大小、位置、形状、轮廓等形态,来实现动效变化,达成交互效果。

SVG技术用于新媒体内容平台之初,在效果展现上存在不兼容、不适配等情况,SVG交互内容动效较为简单。2016年,JZCreative x 微信团队发布SVG动画白名单技术文档,在技术层面形成了图文内SVG交互式排版规范,SVG交互效果开始在有限的框架内“野蛮生长”,为创新式SVG交互内容的出现打下基础。

(二)工具多元化:探索交互动效边界

当新媒体交互产品进入大众视野后,SVG交互内容制作需求大量增加,相应的SVG交互效果编辑器、SVG交互内容案例库等多元化工具有效提升了制作效率,推动着交互内容动效边界的拓展。

一方面,SVG交互图文制作器以海量交互动效模版、开发者原创UGC交互组件探索动效实现的可能性,提高了内容创作效率。例如,135编辑器、秀米编辑器、iPaiban Pro编辑器预设多样化的SVG模块固定组合,有效融合富文本和SVG动效;E2平台黑科技编辑器在自由组合动效的基础上,与开发者共创UGC组件,为内容创作者带来潮流交互灵感。

另一方面,SVG交互内容案例库帮助新媒体内容创作者更好地了解技术趋势、学习实践经验、制定内容策略。2022年4月,“iSVG”交互图文案例搜索引擎上线,涵盖各行业、各类型SVG交互内容,可以快速检索到顶尖行业作品。2023年6月,“ChatIdea”SVG案例人工智能免费问答引擎上线,能够从主题、概念、元素、风格、交互效果等方面为用户提供优秀案例。

(三)技能普及化:降低交互制作门槛

在SVG技术应用于新媒体内容生产之初,交互效果主要通过前端工程师进行代码调试来实现。随着SVG技术从网页端向移动端发展,E2平台黑科技编辑器、iPaiban Pro编辑器等专业SVG交互图文制作编辑器的出现,极大地降低了SVG交互图文制作的技术门槛,为新媒体交互内容创新带来更多可能。以E2平台黑科技编辑器为例,其运用积木式的操作规则,摒弃了传统模板结构,用户可以对SVG组件进行自由拖拽与嵌套,在合理范围内实现多样化的组合动效。自此,基于微信公众号平台的SVG交互内容开始井喷式增长,在企业产品营销、传媒内容传播等方面广泛应用。

SVG技术应用拓展内容创作新蓝海

(一)从相加到相融:技术赋能优质内容

新技术进入内容生产领域初期常存在“喧宾夺主”的弊端,SVG应用早期也存在动效形式与内容割裂、同质化、模式化等问题。随着新媒介技术的深度实践,内容与技术的简单相加转变为深度融合,逐渐形成SVG技术为内容服务的新常态。

自2018年第28届中国新闻奖增设媒体融合奖项以来,SVG技术多次出现在中国新闻奖获奖作品中。

图片

2020年4月武汉“解封”之际,“人民日报”微信公众号推出创意 SVG 互动产品《今天,发条微信一起点亮武汉》,用户点击海报即可将武汉黄鹤楼等标志性建筑物图片由黑白变为彩色,在“点亮武汉”的过程中体会城市复苏带来的光明信心和振奋精神,引发情感共鸣。该作品获得第31届中国新闻奖二等奖。

(二)从互动到沉浸:技术延展叙事空间

从可读到可动、可听,SVG技术不断赋能新媒体内容创新,增强用户互动体验,拓展新媒体内容叙事空间。

例如,“人民网”微信公众号推文《为让我们吃好,他们有多拼?》将SVG与音频结合,用户点击“微缩田园”即可聆听“育种人”原声告白;光明网策划的《裸眼3D沉浸式观展|这是一篇很“哇塞”的推文》,用3D视差SVG效果,将方寸屏幕变为对口援疆19省市非物质文化遗产的线上互动画廊;“都市时报”微信公众号推出的《昆明向南  磨憨向上丨手绘长图带你行走中老铁路  见证一场“双向奔赴”》,通过错层滑动动效让高铁穿梭城市景观,展现中老铁路通车一周年历程。

图片

(三)从协作到合作:技术“破圈”创新内容范式

对优质SVG交互内容产品的探索,必定是从内部协同走向外部合作,多方创意碰撞激活潮流表达,推动内容范式创新。例如,2023年,“GQ实验室”联合企业推出SVG推文《红了》,火爆朋友圈。光明网也与北京市政府部门、群团组织等合作,推出了一系列融媒产品:《全国爱耳日|您有一份来自北京的礼物,请查收……》以SVG热区触发音频,生动展现了北京交通、文化、经济等方面的发展变迁;《数说“大兴工会五年赶考记”》运用SVG标签抽拉等动效,将万字报告转化为兼具互动性与可读性的可视化成绩单;《下班,我要去这里逛公园!》以SVG图文展现绿隔公园之美……在微信图文内容日渐式微的背景下,SVG交互内容凭借新奇的视觉冲击力、艺术设计创造力、社交传播共情力提振了受众注意力,为内容传播开辟了交互新路径。

SVG技术推动新媒体交互内容迭代

(一)可玩性:游戏设计“黏”住用户

SVG交互内容中游戏属性的增加,可以引导用户从“看内容”到“玩内容”,为用户带来更丰富、更有趣的参与体验,提升用户的分享欲,扩大社交传播效果。抽签、闯关、测试等多样化互动机制的运用,充分调动了用户的感官系统,让SVG交互内容增加了更多的情感和社交元素,提高了用户在内容阅读中的沉浸感、愉悦感。

(二)结构性:内容层叠“套”出惊喜

基于SVG特性,交互内容可以如同“搭积木”一般层层叠叠、相互嵌套,结构化内容布局让文章更具有逻辑性、层次性。通过结构化展示,用户可以通过触摸电子设备对动效的播放、回放、慢放、复原等进行控制,获得更多自主权与参与感,从而满足信息选择、信息管理的需求,缓解阅读疲劳,获得非线性互动叙事的深度感官体验。技术与文本混排,可以帮助图文、音视频等多种新媒体形态更好地实现可视化,增加交互内容信息量,提升内容产品丰富度。

(三)艺术性:风格碰撞“勾”起兴致

SVG动态效果在艺术性、交互性上的统一,为新媒体内容增添了审美趣味、感官刺激,为用户带来情感共鸣。一方面,SVG交互内容可以实现节奏上的“律动”,依靠设计元素形变的轨迹、时间、伴随、聚焦、层级等方面,控制、引导整体内容的输出节奏,对用户的阅读界面进行拆解重构。另一方面,多维度元素有序排列带来视觉上的愉悦,技与艺不断融合,把控交互内容的审美性和形象性,在风格碰撞中不断拓展新媒体作品的艺术边界。

结  语

当前,SVG互动作品的应用还仅限于微信、微博等部分渠道,其他平台在转载过程中无法完整呈现出SVG互动效果,一定程度上影响了内容传播效率。不过,提升内容交互体验已经成为一大趋势,随着技术和行业实践的持续发展,我们可以期待SVG交互内容在各新媒体渠道展现其独特的魅力。

面对新媒体交互内容迭代趋势,新媒体内容创作者应当强化媒体融合意识,通过调研、分析等方式持续拓宽视野,紧跟新媒体交互内容发展潮流;应当激发学习创新动力,提升新媒体应用技能,持续探索尝试新创意、新思路;应当深入了解受众需求,积极与用户建立良性互动关系,探索个性化、品牌化的新媒体交互内容生产。

(作者单位:光明网)