清/北/复/交公众号SVG设计哪家强？-CSDN博客

本文链接：https://blog.csdn.net/e2_cool/article/details/141257475

神仙打架

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编辑器》。