评审访谈｜SVG交互设计的意义｜计育韬x新榜xEpub360

? 评审聊天室：

1024 节?SVG 投稿大赛虽已落幕，但本届入选的黑科技排版佳作仍常为业内津津乐道。特此，我们邀请评审团中原新榜 500 强运营人《硬核运营：新媒体技术流养成》作者计育韬老师、新榜研究院知名媒体人夏之南老师与 H5 低代码创作平台?Epub360?开发者 Justin 老师共话 SVG，一起来看看这期访谈实录吧！

?《硬核运营》作者 计老师：

同学们好，我是 JZ Creative Studio 的主理人计育韬。其实 JZ 今年已经满 12 岁了，所以我十分感谢广大读者依然能信任我这个行业老人的潮流眼光。

「新榜」作为新媒体生态内数据导向的评价体系鼻祖，可以说是大多数从业者的数据分析启蒙导师，包括我自己也还能忆起当年与复旦徐达内学长交流后的良多受益，以及早年入榜「新榜 500 强运营人」时的诚惶诚恐。这一次 E2 邀请您代表「新榜研究院」评审 1024 节投稿作品，相信您也进一步感受到了 SVG 交互技术的魅力。

那么先请问夏老师从您的专业视角看，SVG 对当下对微信公众号生态的积极意义在哪里？

? 新榜研究院?夏老师：

SVG 极大丰富了公众号图文的表达和互动维度，让单调的内容跳跃起来了，如果说用一句话描述，就是过去我们是看内容，今天咱是一起玩内容。

?《硬核运营》作者 计老师：

目前业内相对缺乏 SVG 交互设计的效果数据分析维度，对此您有什么建议能帮助运营人更好地评估工作成果吗？

? 新榜研究院 夏老师：

除了传统的转评赞和读完率， SVG 交互设计更重要的一个指标，可以是互动率——在一篇内容中有多少人在互动。

?《硬核运营》作者 计老师：

这确实是目前 SVG 交互图文的一大数据分析痛点，当下在业内对专业开发者而言也只能采用在触发节点通过 touchstart - click 双层触发架构，预埋一个空视频作为统计数据路径进行分析。我们期待未来微信团队官方能近一步提升 SVG 叶子节点的数据管理能力。

那么回到大赛中来，本届大赛内您印象最深刻的作品是哪个？

? 新榜研究院 夏老师：

其实很多作品都有印象，比如那篇“海鹏点心铺 ”的《来——捏泡泡》……没想到，我是真的找到了儿时捏泡泡的快乐，一个一个捏完全文。

?《硬核运营》作者 计老师：

是的，除了最终获奖作品外，真的还有很多精彩的投稿 SVG 值得细细品味，相信来年赛事会进一步扩充名次，让更多黑科技排版有展示机会。马上要新年了，这里也请您给广大公众号运营人一句新年寄语吧！

? 新榜研究院 夏老师：

新的一年，一起用心做好内容，爆款多多，涨粉不断！

?《硬核运营》作者 计老师：

再次感谢夏老师对 1024 节的指导工作，也欢迎广大读者关注夏老师的视频号「南哥新榜样」，还可以前往新榜的全新导航站点掌握更多硬核新媒体技能：https://nav.newrank.cn/

?《硬核运营》作者 计老师：

接下来请允许我向大家介绍「Epub360」：作为国内低代码交互设计工具的鼻祖，它一直是 E2 平台主创人员学习的榜样。而我个人也非常喜欢使用这款 H5 可视化编辑工具，以及他们旗下的 CoolSite360 低代码建站平台，隶属于复旦大学奇点新媒体研究中心的公益免费 SVG 案例搜索工具 iSVG?也搭载于其上。

那么请问 Epub360 的 Justin 老师，您觉得 SVG 对当下对微信公众号生态的积极意义在哪里？

? Epub360 Justin 老师：

非常感谢计老师的邀请和对 Epub360 的喜爱，以下是我个人的一些想法：SVG 在设计师的眼中或许只是一种体积小、无损放大、加载快的矢量图格式，但是在微信公众号里赋予了另一层意义：具有交互手势、动画效果的内容表现形式，可称作在微信公众号生态的创新。众所周知，近几年微信公众号阅读率在下滑，而如果一个生态不做创新，下滑会一直持续。SVG 的出现和主流应用给了微信公众号一剂强心剂，有意思的动画和交互不仅短期吸引用户注意力，还增强了受众互动参与体验感和二次曝光营销分享，对微信公众号生态、品牌主和内容创作者来说是三赢。另外，创意不该被技术束缚，内容表现上的需求同时也驱动了代码技术的创新。

?《硬核运营》作者 计老师：

既然如此，这里向您提一个相对尖锐的问题：有不少运营人经常会将 SVG 交互与 H5 页面交互进行对照，那么请问你们是如何看待这两者的共性与区别？

? Epub360 Justin 老师：

SVG 交互 与 H5 页面更像是一对兄弟，两者主要都是在微信生态下生长，都具备一些交互，动画效果，但相同的内容在不同的载体下可能表现就相差很大。

总体来说，H5 优势表现在形式数量、用户信息授权个性化、逻辑数据记录、多端平台传播等；SVG 优势表现在微信上打开速度、稳定性、固定入口、可链接视频号/小程序生态产品等。两者都是为内容创作和营销宣传上发挥价值，或许期待未来可能会有一些形式上的结合，技术共享。

?《硬核运营》作者 计老师：

纵览这期投稿大赛作品后，您对广大运营人/开发者有进一步的未来创作方向建议吗？

? Epub360 Justin 老师：

保持学习心态，多看多思多练。短期创作出甲方认可的内容方向，甚至出了爆款，都源于厚积薄发，多看案例开拓眼界，多思考品牌的意图，多练习提高创作交付的能力。

?《硬核运营》作者 计老师：

据我所知，目前 Epub360 也在保持高频的产品功能迭代，听闻近期有「时间轴」功能即将上线，可以简单向我们介绍一下吗？以及有没有参与内测的方式？

? Epub360 Justin 老师：

是的，意派 Epub360 也要有自己的滑动时间轴啦！目前支持多内容元素增删关键帧动画、元素多层组合、撤回、原位替换图片元素等功能，我们在保留 Epub360 专业灵活度的同时，也学习借鉴 E2 编辑器面板操作，降低了时间轴操作门槛。关于内测，预计本月 22 号开启，大家可以关注 Epub360 公众号和留意内测群通知，我们第一时间邀请大家去体验下，感谢大家对意派 Epub360 的关注。

意派科技Epub360-专业H5设计工具，Coolsite360-专业响应式网站/小程序设计工具，欢迎关注我们，一起探索营销之道和设计之术！

?《硬核运营》作者 计老师：

交互体验，其实一直是微信公众号生态领域内的创意主旋律。这不由得让我想起当年入榜「新榜 500 强运营人」时，JZ Creative Studio 单篇图文创下 2014 年 180 万阅读量的记录：

彼时，我们与@圈圈Fancy 共同推广的小红点爆款头像，相信资深互联网人都曾有记忆，它所代表的正是早期新媒体时代用户迫切的交互诉求。斗转星移，在 2016 年我写下?SVG AttributeName 白名单体系时，开启的依然是属于交互体验的新篇章。

所以，无论你身处当下的互动媒体时代，还是未来的虚拟现实交互时代，人与人之间和人与内容之间的连线，依然会是我们内心最渴求的精神体验。

最后，再次为大家梳理当下 SVG 交互技术体系规范的标准名录。拖动下方画面右侧的标签一一查看。（该名录的标签滑动交互由?YUTU 工作室原创发明设计，如有定制需求请咨询平台管理员）

*以上交互架构由 YUTU 语图工作室授权使用，禁止任何第三方机构和编辑器未经授权的复用与模版化行为，如需定制请咨询沟通。