一个好消息,(新浪)微博也支持 SVG 了。

一个坏消息,品牌方的内卷新赛道又诞生了。

一个更好也可能更坏的消息,(新浪)微博与微信公众号生态的 SVG 语法框架形式有较大差异。但有个值得一提好消息是,据了解 E2.COOL 黑科技 SVG 编辑器已经开始上架微博 SVG Beta 专用模版。

究竟怎么回事? 先行科普一下。

大家好我是交互设计师计育韬,首先非常感谢微博的这次 40+ 专业用户内测邀约活动。虽然我是其中唯一的技术侧(其他均为平台侧)个体,但无论是产品体验还是技术交流,计老师都已经感受到了微博官方的产品诚意和平等姿态,点赞!未来更多的微博 SVG 产品动态一定要关注微博账号 @头条文章,官方资讯将以此为准喔!

还不了解什么是 SVG?摒弃纯技术性的概念诠释,简单来讲微信公众号图文中具备通过手指点击等行为产生交互响应的画面,如今大多基于 SVG 技术。圈内的 SVG 品牌头号玩家包括 GQ 实验室、宝马中国、喜茶、蒂芙尼、蕉内等,想必对运营人而言都是如雷贯耳般的存在。

如果你想进一步理解它,那么可以阅读我的科普专著《硬核运营:新媒体技术流养成》,在大多数市立和高校图书馆都可以借阅到。

内测体验如何?开发层面可有差异?

以下是基本的操作指南,请务必收藏好或传阅给具体岗位的运营人员:对于已经获取内测资格的账号而言,只需要在编辑微博头条文章时,点击剪切板功能,再点击「插入 SVG 代码」按钮即可——

就是如此简单,而需要注意的是: 1)头条文章的 SVG 支持按板块编辑,这就意味着文本穿插 SVG 交互的排版制作起来会轻松得多,对比之下微信公众号图文草稿编辑页始终是没有官方 SVG 编辑入口的,一切都需要依赖各类第三方插件进行布局。 2)它的本质是代码的编辑窗口,因此不仅限于插入 结构,也可以将譬如横向滑动(CSS)、视差(perspective 裸眼 3D)等布局进来,那么这里就是一个重要的想象力突破口了。

(品牌方如需查看内测案例预览请微信小窗与我联系)

而提到想象力,SVG 发展至今、其有效的信息分层、酷炫的动画特效、丰富的感官体验……让我作为行业的先行者都尤其欣慰。且身为研究型学者,计老师也通过公益普及和培训授课等形式间接孵化了大批青年工作室团队,相信他们很快也会投入微博端 SVG 设计研究,为每一个普通的运营人提前铺平应用道路。

当然请注意,微博 SVG 的编辑区目前是存在字符限制的,对于顶尖开发者来说如果你植入重型交互装置,很可能当前不在微博 SVG 接受范围内,建议控制到 30W 代码字符以下:

但正如开场所言,W3C 联盟提供了 SVG 的全部应用空间,而 APP 则要具体问题具体分析,通过「白名单」这类属性与能力的限制规则,管控 SVG 可能干扰到 APP 生态自身技术架构稳定性的因素。

所以现在,我要谈一谈微博 SVG 交互设计与微信公众号生态的区别,无论你是专业开发者还是内容运营人,都请仔细阅读接下来的说明!

以微信公众号为例,很多行业晚辈可能并不了解,在 2016 年为了和微信团队敲定《微信下 SVG AttributeName 白名单》,我和厦门嘉庚学院的研究人员就通过各种压力测试限制了 1)部分 AttributeName 的属性(在彼时可能导致微信闪退)2)属性引用能力(避免误扰到图文外层 CSS 样式)。且随着行业的发展,白名单中又出现了如对包括 标签,以及 动画重复次数等非常细节化的限制。

因为在任何生态中,都存在看不见的力量随时觊觎平台漏洞之下的财富。「白名单」的本质不是为了制约创作者,而是守住平台的底线,并给予所有参与人公平公正的运行环境。所以作为规则的制定者,总有其苦衷可能无法为后人理解,但在无形中只要维护好了微信的生态安全,其他纷扰就不值一提了。

那么,微博 SVG 生态内包含形同「白名单」的同类规则吗?

我确切地告诉你,这是肯定的。并且,它在未来也一定会不断被迭代更新。目前,微博 SVG 也同样制约