尽管 SVG 本身的科技感十足,但科普领域新媒体的 SVG 应用并不多见。七月末针对天问一号的发射,果壳网让我们眼前一亮,制作了一篇独具匠心的 SVG 伸长式
3.0 伸长式 SVG 的商业应用到来了!七月间,浙江传媒学院奇点新媒体工作室的主任杨泽昊提出了基于宽度参数带动整体 viewbox 控制的第三代伸长理论,此后计育韬老师选择喜茶的矩阵号进行了首次实践。三代和二代装置的差别,在于突破了定宽后大屏手机过窄的问题,但又不会出现一代的尾部留白。三代在宽度上实现了 100% 的适配效果,让任何手机都能满屏沉浸体验 SVG 互动内容。
本作的三维设定、视觉设计、交互开发都由 JZCreative 全局统筹,且在最终呈现的方式上完全对标苹果公众号:切片不可点开、深色模式下色彩强制高亮、超链接无 ICON 附着处理、内文隐藏视障用户的读屏文本。 由此我们将 SKG 的颈椎按摩仪新品 K5 第二代以苹果产品的视觉基因进行新媒体呈现。落实到具体 SVG 交互层面,我们选择克制而细腻的表现方式,以内容为核心设计动效,提供恰到好处的交互体验,完全杜绝“为了做 SVG 而做 SVG”的当下行业陋习。
缩放式 SVG 互动装置作品已经有一段时间缺乏佳作代表支撑了,而这次 VIVO 本作由大佬荒村主持开发,并在缩放基础上通过画面切换,使得内容更有聚焦感,完美呼应主题。
提到互动式漫画,那华为发布的这篇 SVG 插画作品也值得关注。业内,具备互动属性的插画整体上还很少,毕竟这需要交互开发、插画设计、剧情演绎集大成。而本作融合了多种 SVG 动画字段,是互动式漫画的又一次行业探索,经小杨开发,JZCreative 交付至华为机器视觉业务部门。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「任意点放大」实现。
网易的多个矩阵图文号始终保持着高频的 CSS/SVG 开发速度,本篇采用单一互动装置的无限平铺,生动演绎了开抽屉拍蟑螂的过程,此结构也是非常典型且讨巧的黑科技排版模型。
在六月我们指出支付宝团队的 SVG 交互开发中