神仙打架
Ragnarök
校园是新媒体人才的摇篮,在融媒体 SVG 交互设计领域孕育了大量神仙级的资深开发者/设计师/运营人。此前,我们在《这些高校公众号图文,让4A公司都望尘莫及》介绍过 2021 年时期的精彩作品。转眼来到 2024,高校第一梯队的 SVG 进化到怎样的程度了呢?
本期,我们特邀复旦大学奇点新媒体研究中心的计育韬老师指导,为广大用户带来清北复交等第一梯队高校的公众号 SVG 交互设计赏析,真可谓神仙打架!
清华大学-挤压伸长
首先我们将目光聚焦清华大学,打开 SVG 交互设计案例《时光博物馆『LIVE』》,欣赏「挤压伸长」SVG 模版的巧妙应用(点击画面中的建筑手办):
这期设计参考借鉴了由 JZ Creative Studio 与局部气候调查组合作开发的《春节联欢晚会【直播live】》,并以校园建筑手办的形式区别于原作的电视机柜组合。
SVG「挤压伸长」也是黑科技 SVG 编辑器最早一批登陆的 UGC 组件之一,旨在展示业内知名开发者的授权创意交互模型,由业内大神@科蚪 发明。Ceep 老师也特此进行过应用解析。
清华大学-视差卡片
perspective 3D 作为公众号交互排版的殿堂级技术,一直备受各领域顶级头部账号青睐。清华大学在《『消息提示』您有一条生日祝福未发出》中,就出色应用了「视差卡片」架构,在横向滑动画面时产生动感的差速位移效果(左右滑动画面体验):
关于「视差卡片」的应用,我们已经多次开展过案例分解。可以点击阅读《Apple同款|3D小人立体视差滑动|E2编辑器SVG教程》查看相似案例的效果和编辑器内操作台完整截图。
清华大学-渐进效果
复杂程度从来不是 SVG 交互设计优秀与否的唯一衡量尺度,以清华大学《回到与经管相遇的第一天 》为例,通过 SVG 常规组件「渐进效果」模拟刮刮乐——排版操作便捷,体验妙趣横生:
如果需要在最后一张图展示二维码,记得在该组件的筛选器中切换「弹出图片」模式,即可支持长按保存/识别。
北京大学-长按差速上移
在定制开发(by 三千喵)案例《龙腾四海起,光华迎春来!》中,长按页面会发生不同新春元素鳞次栉比差速浮现的效果。这种效果的核心架构与《用SVG回看40个中国奥运夺金时刻 》相同:
你可以在 E2.COOL 黑科技 SVG 编辑器中选择「长按差速上移」组件形成同类效果,具体教程请点击阅读《黑科技编辑器|长按差速上移SVG教程》。
北京大学-视差滑动
你可能已经见过了不少基于黑科技 SVG 编辑器实现的 perspective 裸眼 3D 滑动排版。但全元光滑团队的作品《纯属虚构:时间的秩序,崩塌在北大。》,让行业看到了这项交互技术的革新应用方式:
文字重组和画面破碎的效果组合,呈现出了一个光怪陆离的理念世界。该文的图像大多由 AI 生成,更进一步突出了文案的内在矛盾性。同时表面包含「浮层」结构,模拟了视野时暗时明眨眼窥探的窒息感,是「视差滑动」SVG 交互设计的巅峰之作。关于该组件的应用方法,可点击阅读《来了 视差滑动SVG模板套件(全文排版)|就在E2编辑器 》。
北京大学-自由布局
由全元光滑操刀主持的北京大学推文《惊喜上新!北大特饮,承包你的整个夏天!》,是「自由布局」SVG 组件应用的绝佳案例:
编辑器中「自由布局」是应用难度最高且想象空间最大的组件群,这里另推荐以 Apple 公众号《好家伙,iOS 15 新功能真是好家伙》为参考进行入门练习。
复旦大学-一条线动画
在今年复旦大学 119 周年校庆,官方公众号以一篇 SVG 动画《亲爱的复旦,119岁生日快乐!》刷爆校友朋友圈,其主要采用的是黑科技编辑器的「一条线」模式创作生成:
关于这种 SVG 动画设计的具体方法,同样可以回看 Ceep 老师的专题录制进行学习。
复旦大学-逆向擦出伸长(含附件)
在 2023 年为配合红色电影《望道》宣发,复旦大学奇点新媒体研究中心设计《这一句,该如何翻译?》,以一图流漫画形式介绍老校长陈望道先生的非凡经历,在文章底部经过点击逆向刷新切换全部画面:
这种 SVG 效果巧妙将《共产党宣言》的翻译故事分为两个篇章,人物姿势的复用十分巧妙,在黑科技 SVG 编辑器中你可以参照以下教程排版使用「逆向擦出伸长(含附件)」模版实现。
交通大学-错层滑动
最后我们推荐交大艺术中心的像素风 SVG 交互设计《「ACcess」春季招新 | 一只鹅的旅行》,坐着大鹅的小汽车在庞大的像素风多场景中穿梭前进,设计与交互的结合足以秒杀一众企业品牌公众号:
关于 SVG「错层滑动」的设计,我们已经开展过多题专题培训,还可以点击阅读《还没掌握「错层滑动」排版?视频解析SK-II、字节跳动、迈克高仕等优秀品牌案例》查看更多作品赏析,或点击下方视频观看 Ceep 老师录制的专题课程。
黑科技编辑器秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,斩获包括法国设计奖、美国缪斯创意设计奖等诸多国际赛事大奖,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,编辑器将竭诚思考代码转化的可行性。