自微信团队逐步灰度测试将所有服务号折叠到「服务号」栏目后，商家整体流量的下滑趋势不言而喻。加之该功能内 UI 粗糙，功能错乱，更进一步引起了普通微信用户的反感。 那么对于品牌运营来说，面临公众号强制的凌乱改版应如何相对提振服务号流量颓势？本期 iSVG 分拆几点为大家答疑解惑。 01 不做服务号，转向订阅号 这不是一句玩笑话。 事实上，很多服务号在早期注册时并没有真正做好自身定位。一些品牌盲目使用服务号，看中的仅仅是其好友列表的显著推送提醒。但就其账号本身而言，可能时至今日都没有打通微信支付场景，缺乏真正的服务能力供给。 而对于将服务号能力深度打通的品牌来说，服务通知、客服系统、点单结账……琳琅满目的服务能力真正在为消费者提供便捷，它们的业务增长和用户粘性，甚至不需要通过逐月 4 次的图文推送就能保持高速拉新。 如果品牌方希望服务号更多承载内容宣传作用，不妨转而迁移至订阅号，乘上订阅号体系成熟推流机制东风，实现内容真正的破圈传播。且考虑到微信小店、小程序等业务能力大多不受服务号/订阅号差异限制，常态化的营销转化依然可以在订阅号上实现。 02 增强内容互动，提升用户粘性 服务号的折叠界面一直在进行调整，可见微信团队自身也处于摸索阶段。若想在这个栏目中获得关注者的推荐优先级，首先要提升已关注用户的打开率——打开率越高，推荐优先级越高，反之亦然。 那用户保持打开的动机是什么？无非是图文自身提供了持续稳定、吸引读者的商业服务信息，无论是新品速递、折扣优惠还是读者活动，服务号的内容要减少单向的内容输出，而是落实用户的互动参与。 所谓互动体现在方方面面，如： 评论区的有规律互动——每期内容发布同时，评论区会组织固定的形式的有奖评论互动，抽取多位幸运读者获得内容关联的奖品； 内容设计的互动巧思——每期推文保持与 SVG 交互的深度结合，积极采用交互式排版提升内容的易读性和操作的趣味性。作为运营人可以频繁观察业态内以及各行业头部品牌的常用的 SVG 技法和工具，采用如 E2 编辑器这类大多数行业顶尖企业首选的 SVG 编辑器，打造叹为观止的 SVG 黑科技排版（*参考阅读《免费+零基础｜SVG交互图文排版视频系列课》）。当然，也应保持对业内优秀作品的实时关注，这里我们向你提供 2025 年上半年度的优秀行业作品集（点击下载PDF）： 也可以访问我们的 iSVG 官网了解更多经过筛选的行业高品质 SVG 作品以及开发者联系方式：www.isvg.com O2O的互动设计——有线下门店的品牌，应该同时详尽阐述新品活动的线下参与方法；同时在线下，也要积极寻找流量回到服务号的操作链路，在点单选品、支付结账、积分兑换等操作中实现闭环。 03 探索形式创新，避开特定雷区 众所周知，公众号体系整体在加强对图片消息的流量倾斜，它不仅能获得服务号栏目内的外部流量推荐，自身卡片占位也更有特色（单独式、三图式等），相对而言更能获得读者关注。 与此同时，避开如视频消息等雷区，这些相对小众的推送方式目前微信团队完全没有进行展示效果的正确开发，存在完全无法显示在服务号列表中的严重 BUG。经过近期测试，完全相同的爆款视频内容在相似时间点多平台发布，微信端服务号流量较平时降低足足 90%，而小红书流量较平时增长 170%，微博较平时增长 700%，bilibili 较平时增长 480%…… 这就意味着，服务号栏目内目前从功能角度埋有大量雷点，所以未做过充分实验前切忌使用小众的信息送达形式。 04 更多小心思 一些服务号/订阅号（公众号）通用的策略仍然可以被使用，如在标题内容通过 emoji 提升视觉引导，参考《公众号标题emoji完整清单🤩🤡🤮🤟🧡🥇🥐🧀🥚🧋🥂🥃🥤🧊🧧⏰🪁🧸🪐🦑🦞🦪🥬🥦🥑》查询完整列表。或对时间等字符进行修饰，参考《²⁰²⁵/₀₇.₀₁｜7月标题数字日历（可复制）｜黑科技编辑器｜E2.COOL｜公众号标题创意》。 而在社群进行常规流量分发以及企业微信定点推送的同时，记得提醒用户可以考虑「置顶服务号」——此后，服务号就会从折叠栏目中回到用户的好友列表内，以原先直截了当的方式露出在用户的微信 APP 内。 [图片] 其实，一个 APP 的高频改版本身体现了微信团队自身的迷茫，换做其他 APP 你很难看到如此反复对某个入口特性的改版行为。品牌方在注意积极调整服务号运营策略的同时，也适当给予微信团队一定的时间宽容，毕竟作为微信支付的重点落地窗口，服务号依然将长期被视作品牌在移动端的企业门面。

近期，微信侧对公众号图文的部分功能进行了重要的迭代，其中点赞的快捷操作之于 SVG 交互设计而言至关重要——双击屏幕，即可产生一个红色的点赞动画，并产生对图文的点赞。 而交互，是 SVG 黑科技排版的核心，它与当下公众号点赞的场景不谋而合。经 iSVG 的观察，市面上已经出现了不少巧妙利用该机制，大量提升图文点赞的排版策略，本期我们就来分享几种典型的 SVG 互动排版策略吧！ 高频流——引导用户快速连续点击，进而在过程中获取赞 SVG 木鱼模型是由著名交互设计工作室 JZ Creative Studio 开发的一种双层触发互动架构，其与阿里钉钉的合作项目《🥁 电 子 木 鱼 . e x e》在业内具有极高知名度。而随着微信点赞功能的变化，近期他们又推出了《（荔 枝）转 运 木 鱼 . e x e》案例，不仅在交互代码架构上有所升级，当手速足够快时可以获取「大展鸿图」书法动画，还在同时能产生直接的点赞触发，显著提升了点赞/阅读比。 [图片] 那么可以想象，只要但凡与「重复」、「手速」有关的 SVG 互动均能在交互同时顺带产生点赞。小编梳理了 JZ Creative Studio 的既往发布，认为还有包括以下图文在如今可以产生效果： [图片] 🦑点开即玩🦑鱿鱼游戏🦑 [图片] 手速挑战｜啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪！ [图片] 🤳 买（qiǎng）菜 手 速 训 练 器 🤳 以上仅供广大用户参考交互创意思路，如有其他形式的创意也欢迎提交至 iSVG 官网上线精品案例。 双击/拍一拍流——引导用户快速双击行为 如果没有用户连续点击的交互策略，也可以简单通过双击/拍一拍行为产生同步的点赞互动。所以在设计层面，我们可以直接写入「拍一拍」、「双击」等文字信息对用户进行提示，并且一般确保在单击情况下不提供交互反馈。 而理论上，大多数 SVG 交互（click）事件其实都可以转化为双击模型。著名 SVG 交互设计工具 E2 编辑器就有一款「拍一拍转换器」基于此技术特性开发而成，能够将大量 E2 编辑器中的原生 SVG 模板转化为拍一拍执行逻辑。 而在其平台的案例《大 展 鸿 图 .SVG ▶️ 游 戏 启 动！》，结尾的书法就采用了「拍一拍转换器」，巧妙完成了结尾的点赞逻辑，流程体验十分自然。 [图片] 当然对于使用 E2 编辑器的用户，还可以直接采用其他平台中的拍一拍组件： 黑科技编辑器｜拍一拍-晃动-伸长教程 黑科技编辑器｜拍一拍-伸长教程 黑科技编辑器｜拍一拍切换教程 黑科技编辑器 | 拍一拍连续切换SVG教程 由此通过上述两种 SVG 交互设计策略，我们就能实质性地提升公众号图文点赞量。即便是富文本形式的图文混排，你也可以植入一个局部的 SVG 效果进行组合。 如果你尚未掌握 E2 SVG 编辑器和其他传统富文本编辑器的混排方法，也可以点击阅读《E2黑科技编辑器&秀米&135如何混合使用SVG？（教程）》进行学习。

小红书创作服务平台近期推出重磅功能——部分账户可一键导入公众号图文，大幅提升创作者的内容迁移效率。无需手动复制粘贴，即可将公众号长文快速转换为小红书笔记格式，同时支持多种排版风格选择，助力创作者轻松实现跨平台内容分发。 目前该功能处于灰度测试阶段，我们根据业内交流了解到著名的 SVG 编辑器 E2 编辑器已获得该功能，特此记录了具体的创作流程。 详细操作步骤 第一步：登录创作平台 访问小红书创作服务平台（creator.xiaohongshu.com），使用小红书账号登录。登录后进入左侧导航栏的「笔记管理」模块。 [图片] 第二步：关联公众号（关键步骤） 在「导入长文」板块找到「关联公众号」按钮，点击后将跳转至公众号授权页面。 [图片] 具体关联方法如下： * 使用微信公众号管理员微信扫描弹出的二维码； * 在公众号后台确认授权申请（路径：公众号设置→安全中心→第三方授权管理）； * 勾选"内容管理权限"和"账号信息权限"； * 点击"确认授权"完成绑定流程。 完成上述步骤后，返回小红书创作平台即可进行导入操作。如果需要绑定多个微信公众号，那么可以在「查看公众号关联列表」中新增账号。详情请参考官方发布：fe.xiaohongshu.com ⚠️请特别注意知识产权条款：需确保导入内容为原创或已获合法授权，平台将获得内容的非独占性、永久性信息网络传播权。 [图片] 第三步：导入公众号图文 在输入框中粘贴公众号文章链接（支持千字长文），点击红色「一键排版」按钮，系统将开始处理（约 30 秒生成预览）。 [图片] 第四步：内容处理 图片处理方面： 不支持动态图片（GIF）导入，静态图片导入成功率非 100% ，需手动检查，导入能力远不及如知乎、微博长图文等平台。插入的图片展示支持三种布局选择：大图展示（全屏宽度）、左图右文（图片居左文字居右）、左文右图（文字居左图片居右），光标移动至图片上即可出现弹窗进行修改。选中图片后可通过拖动右下角控制点调整尺寸大小，松开鼠标后自动保持比例锁定。 [图片] 文字处理方面： 自动导入后需检查格式错乱问题，文字格式调整存在限制：仅支持将正文文本转换为标题格式（标题样式固定），不支持加粗、斜体等其他格式修改，长段落需拆分优化，符合小红书阅读习惯。 其他： 编辑器上方工具栏提供以下格式化功能： - 标题：仅支持将正文修改为固定格式的标题 - 引用：添加文字引用样式（缩进+灰色背景） - 有序列表：生成 1. 2. 3 .格式的有序列表 - 无序列表·：生成 • 格式的无序列表 - 下划线：添加默认颜色下划线（颜色不可自定义） - 图片：单独上传本地图片（支持JPG/PNG格式） - 表情：插入小红书内置表情符号 第五步：排版风格选择 在右侧中提供5种排版风格。简约基础是清爽布局，突出文字内容；理性现代适合科技、商业类内容，带有数据图表展示区；优雅几何用几何图形分割版面，适合时尚、设计类内容；杂志先锋是大胆排版，适合潮流、艺术主题；文艺清新则是柔和色调，适合生活方式、情感类内容。 [图片] 第六步：发布笔记 完成排版调整后，点击右下角红色「下一步」按钮【重要提醒：此操作不可逆，点击后将无法返回编辑页面】，系统将跳转至常规笔记发布页面。你可以继续添加图标，修改标题等操作来发布。 [图片] 功能限制与优化建议 已知限制包括：仅限部分账户开放（新功能灰度测试中），不支持导入公众号的付费内容，表格、复杂公式可能出现格式错乱。 优化建议：选择与内容主题匹配的排版风格，比如干货文适合理性现代，生活记录适合文艺清新，潮流内容适合杂志先锋。 总结 小红书一键导入公众号图文功能为跨平台创作者提供了高效解决方案，尤其适合需要保持多平台内容同步的自媒体人。虽然目前存在部分格式兼容问题，但通过合理的预处理和手动调整，仍能显著提升内容生产效率。建议创作者尽快尝试并反馈使用体验，帮助平台持续优化该功能。 [图片]

在新媒体视觉传播领域，SVG 以其卓越的交互体验和跨平台兼容性，成为运营人提升内容质感的「黑科技」。从简单的点击动效到复杂的多层交互，SVG 正重塑着用户与内容的连接方式。本文将结合复旦大学最新学术研究论文《新媒体SVG交互设计学发凡》与 iSVG 行业实践，为你系统梳理 SVG 交互设计的技术根基、学习路径与优质资源，助你从入门到精通这一新媒体必备技能。 一、技术溯源：新媒体 SVG 的「白名单」演进史 从 W3C 标准到平台适配 SVG 作为 W3C 标准自 1999 年确立以来，在互联网传媒中始终占据重要地位。但在微信、微博等新媒体平台中，SVG 的应用并非完全遵循 W3C 规范，而是形成了独特的「平台化技术体系」。以微信公众号为例，并非所有 SVG 动画属性（AttributeName）都能正常生效——这源于早期移动端硬件性能与浏览器渲染能力的限制。 微信白名单：行业爆发的「钥匙」 2016年，复旦大学计育韬与厦门嘉庚学院林喆联合微信团队，对 W3C 标准中的 SVG 动画属性进行了全面测试，筛选出 27 个适配微信 APP 的动画标签，形成业内著名的「白名单」体系。这一关键事件推动了新媒体 SVG 交互设计的爆发式增长，清华大学、吉林大学等高校相继涌现出大批优秀开发者。 经过多年迭代，目前微信公众平台仍保留 20 个可用动画属性标签，而微博头条文章已全面开放 SVG 属性限制（仅禁用 JavaScript）。开发者需密切关注平台规则变化，避免对抗性开发导致功能失效。该动画范式同样收录于中华人民共和国《融媒体SVG交互设计技术规范》T/CASME 1609—2024 中： [图片] 二、核心概念：新媒体SVG交互的「五大基石」 复旦大学《新媒体SVG交互设计学发凡》一文指出，以下五个概念构成了SVG生态的技术底层架构，是从业者的必备知识： 白名单体系：微信平台许可的 SVG 动画属性清单，如 height/width 动画、opacity 透明度等，是交互开发的基础规则。这一体系由复旦大学计育韬与厦门嘉庚学院林喆于 2016 年确立，为行业规范化发展奠定了基础。 伸长动画：纵向/横向扩展页面内容的交互模型，分为高度驱动与画板比例扩张两种架构。前者由吉林大学赵国梁于 2020 年提出，后者由浙江传媒学院杨泽昊同年发明，目前已成为主流 SVG 编辑器的核心动画架构。 穿透触发：通过 pointer-events 属性管理 SVG 图层响应关系的关键技术，能构建无限复杂度的交互模型。该技术由复旦大学计育韬引入业内，最早应用于时尚媒体 VOGUE 公众号的「弹出式海报」效果。 双层触发：利用 touchstart 与 click 事件时间差实现的多层交互模型，由海尔集团姜棋超发明。通过让上层元素在 300ms 内触发并消失，下层元素可接收后续点击指令，衍生出无限选择器等实用功能，被 Apple 等品牌广泛采用。 零高结构/容器：高度为零（height:0）但内容可见（overflow:visible）的 CSS技术，支持内容无限堆叠。由山东大学沈佳麒发明，是穿透触发等交互模式的实现基础，几乎存在于所有定制开发级 SVG 作品中。 三、学习路径：从入门到专家的「资源地图」 零基础入门：官方教程与案例库 iSVG 公益案例库：访问 isvg.com 或 svg.show，通过 AI Agent 工具分析海量交互案例，快速掌握主流设计逻辑。 [图片] www.isvg.com [图片] svg.show 编辑器官方教程：推荐网易云课堂《微信SVG排版教程》，严格按照「基础操作→组件应用→案例复盘→特别专题」的进阶逻辑设计。本课程内容每月更新迭代，确保学员掌握最新的微信编辑器兼容方案和设计趋势。 [图片] study.163.com 如果你希望保持视频更新的同步，则可以关注视频号「黑科技编辑器」拿捏 SVG 前沿技术动态，以下提供近期的精彩专题课程动态： 低代码进阶：XML语言与效率技巧 若希望突破编辑器限制，可学习《硬核运营：新媒体技术流养成》作者计育韬的专题公开课，掌握 SVG XML 语言的快捷应用方法，例如： 利用 g 标签编组实现多层动画同步、通过 clip-path 属性创建异形蒙版效果、结合 CSS flex 布局解决 z-index 层级问题等。 [图片] [图片] 开发者级深度：从代码到行业视野 [图片] study.163.com 经典课程：网易云课堂/有赞课堂《SVG高级交互排版》，由行业鼻祖级开发者主讲，涵盖AI+SVG 融合等前沿内容。目前也可以在《点 球 大 战. SVG（高级交互排版）》中领取到课程优惠。 行业大神访谈：回顾「SVG大神专访系列」，学习科蚪、荒村、YUTU 等开发者的创意方法论与技术哲学。这里，为大家汇总我们既往开展过的多轮大神专访，刚兴趣的行业新人也可以点击逐一了解： SVG大神专访：感谢科蚪，和你天马行空的特效设计。｜SVG大神专访：荒村，就是原创精神的代言人。｜SVG大神专访：YUTU，这个学习效率如风的男人。｜SVG大神专访：ZER0N，不容小觑的斜杠青年团队！｜SVG大神专访：三千喵，从设计师到开发者的全栈汉服玩家｜SVG大神专访：重量级选手，赵阳登场！｜SVG大神专访：灵感源源不断，2H是怎么做到的？｜SVG大神专访：设计/开发/授课三栖的小雪，强者如斯。｜SVG大神专访：计育韬，开创行业更要守护行业。｜SVG大神专访：看全元光滑，增加你的边际快感｜SVG大神专访：懂点君，良好的工作习惯是创作效率的前提。 四、实践指南：避坑与最佳实践 平台规则适配： * 微信端避免使用 indefinite 循环的 height/width 动画，建议改用具体数值（如repeatCount="3"）。 * 微博端开发需参考 JZCreativeStudio 发布的《微博SVG交互开发限制性规则》，注意 JavaScript 禁用限制。 兼容性优化： * 涉及clip-path等属性时，需通过 foreignObject 标签申明 XML 命名空间，确保 iOS/Android 双系统兼容。 * 深色模式下 SVG 模块可能失效，建议通过 CSS 变量手动适配。 创意安全边界： * 任何交互设计均以不干扰用户体验为前提，避免开发留言区位移、页面卡顿等影响平台核心功能的效果。 结语：技术与创意的「双向奔赴」 SVG 交互设计既是一门严谨的技术科学，也是一场创意与规则的博弈。从复旦大学的学术研究到行业开发者的实践探索，每一次技术突破都源于对「更好用户体验」的追求。我们期待与你共同探索 SVG 的无限可能——无论是零基础入门还是资深开发者，这里都有属于你的成长路径。

从当前测试版 iOS 26 的应用体验上来讲，它确实有很多值得一「喷」之处：边缘折射导致的下层渲染畸变，界面内容与背景混合导致的可读性低……甚至有网友调侃其复古了 Windows Vista 的毛玻璃设计语言，难以理解苹果的此次系统更新用意。 [图片] （部分网友截图） 但是请稍等，不知你们是否留意到在产品介绍中，苹果人机交互设计副总裁 Alan 有一句值得玩味的话：「液态玻璃」的可变性，让我们具备面向未来的适应力。这种极尽模拟玻璃实体的设计并非出自和 Windows Vista 相同的目的，所谓对「未来」的理解或许需要你们以更长的时间尺度去思考。 [图片] 未来的 UI 将在哪里？ 计育韬老师个人作为 Vision Pro 产品用户，在 Liquid Glass 设计语言发布后尤其欣慰——它其实反映的是虚拟现实/增强现实 UI 迫在眉睫的更新需求。如果你也是 Vision Pro 用户，想必和我会有一种类似的体验——虽然当前各色 Vision Pro 的 APP 的 VR 内容都令人啧啧称奇，但其展示界面往往以简单粗暴的贴图方式，突兀地被固定在现实空间的不同位置。 你们不妨点击一期此前我的测评《卷起来！Apple Vision + SVG = ? ? ?》，从其中的画面录制就能显著观察到这一特性——目前 VR/AR 产品的 UI 基本都是传统硬件 UI 的简单移植和机械适配。 显然你能意识到，要想让数字化界面信息更自然地与任意现实场景结合，就人类已知的感官形式看，「玻璃」是当前最优的空间介质选择。 我们不排除随着未来科技的进步，可能出现更多超越玻璃、 亚克力的载体，能让任何数字化内容和你身边的周遭事物自然组合。但以当下高刷高像素屏幕和 HDR 的发展水平为现实基础，Liquid Glass 是「未来 UI」的正确抉择。哪怕各位读者没有接触过任何虚拟现实产品，以下这个网友的截图一定会让你顿悟—— [图片] 未来的产品将在哪里？ 计育韬老师认为， UI 的发展不可能完全脱离硬件基础而割裂存在，而 UI 的演进趋势本身也昭示着硬件公司对产品迭代的方向选择。早在 2014 年我就在《从华为三折屏，我看到“纸媒”对未来新媒体的终结｜计育韬》中，就提到了包括柔性屏基础上的「纸屏」概念。如今，折叠屏、弯曲屏正在物理上不断趋近，与之同步的 UI 全新设计语言——Liquid Glass 实际上才是第一代真正面向虚拟现实的 UI 范式。 因而一方面，虚拟现实头显类产品借助「玻璃」这种材质表现，能找到三维空间里更匹配的界面风格。另一方面，硬件产品研发本身则可以更多思考从基础的「透明手机」开始不断向我提出的「纸屏」形态迭代。 我们将不断面向全新的虚拟现实产品，也将不断面向这些产品中回到现实的感官。 因为人类，归根结底是三维的动物。 而光与玻璃相遇，是世界上最奇妙且复杂的自然现象。既要对它拟合，又要满足实时可读性的渲染本身就绝非易事。 或许我们还将见到这样或那样的，令人捧腹大笑的 UI 效果，但这并不奇怪——就像能反射奇趣形态的哈哈镜、能折射并放大缩小物体的凹凸透镜——它的原理本身，也能带我们走进微观毫末，或走向星辰大海。 欢迎共同探讨 Liquid Glass 的意义与实现！ -END-

“纸媒”会终结当下和未来短期内的各类新媒体固有形态——这一论点是计育韬老师早在 2014 年提出的，当时在网络上引起了广泛讨论和关注。时间来到 2024 年，华为发布三折屏旗舰机，而从这一被网友趣谈为“奏折”的硬件新物种上，我依然看到的是“纸媒”对未来新媒体的终结趋势。 当然，这里的“纸媒”必然也不是当前的固有形态，它的定义与形态就在我 2014 年时候的一篇短文中。本期计育韬老师带同学们再次回顾，并少量增加当代的观察新视角： 人类，终究还是一种三维感知动物。 我们从人类文明的高度俯瞰，稚子皆知我们经历了“蒸汽时代-电气时代-信息时代”，而媒体传播的每一次重大飞跃：驿站的落寞与铁路邮政的崛起、电报/电视/广播的兴盛、互联网的奔腾……无不印证着：媒体传播，归根结底取决于信息交互设备的技术和它所产生的用户体验度。 而进一步细分，计育韬老师认为：信息时代还可以被再次细分为“网器时代”与“去设施化时代”。 01 当代新媒体能活多久？ 关于网络传播的运营，国内的媒体人普遍停留在思考“我的这期图文/笔记/视频怎么创作才能让看到的人更多？”的层面。但微信、微博、小红书、抖音本身能以当前形态存在多久？ 我不敢妄下定论，但我可以确定的是，我们身处的时代里一切“媒体”都需自适于移动终端硬件条件。微博诞生于 PC 端 + 低数据，微信诞生于移动端 + 低数据、抖音诞生于移动端 + 4G……移动设备自身发展的“便携化”很大程度上决定了他们的诞生与走向。常有学者说“碎片化”的时间管理是新媒体崛起的原因，而我认为“碎片化”背后的根源是移动设备的“便携化”产出了碎片化的时间而已。不得不警惕的是：未来的移动设备正在向着“可穿戴”迈进。它们将越来越回归传统贴身之物——现在可能是手表、眼镜、头盔，再以后呢？在这些平台上，如果原生出媒体新形态，完全自适于手机的新媒体有多大机会改造成功？ 更不得不警惕的是：“网器时代”也只是信息时代的一个过渡阶段，大多数移动设备终将只是个半成品。何谓“网器时代”？让我们看看周遭，是否一切带电的器械设备都在不断以各种新方式接入互联网，与人发生更深层的交互？ 02 “网器时代”亦有尽头 计育韬老师在这里想再次强调：媒体传播，归根结底取决于信息交互设备的技术和它所产生的用户体验度。 目前手机的操作应用要求越来越复杂——简单易用？那只是某些过去的瞬时体验，如今产生“被手机束缚”感受的人正越来也多……移动设备对人的生活习惯、思维方式、心理感受的长期效应如何评价？为何我们，越来越感受到“信息茧房”？ 因为人，终究还是一种三维感知动物。“去设施化”的信息技术发展趋势已经凸显，移动设备的功能再发生逆向植入——它们植入手表，植入眼镜，植入头显、植入戒指……它们正在回归能让人感到亲切而“复古”的载体。你觉得不少产品失败了？但面对如苹果、谷歌、脸书等上数千技术精英团队开发的产品，我们实际又有多大资格以我们视角去绝对地批判呢？ 相对来说，“测试”已然是我们能付诸的做好行动，基于任何视角任何目的产生使用的真正反馈，才是参与这个时代的最好方法。（点击阅读计育韬老师此前对 Apple Vision Pro 的测试《卷起来！Apple Vision + SVG = ? ? ?》） 03 纸媒取代新媒体 而标题中我谈到的当下的新媒体将被纸媒反向替代，我们先看看如下事实： 1）手机越做越轻越做越薄——出于三维空间内的便携性要求； 2）手机屏占比越来越大——出于更高密度的有效信息承载； 3）弯曲屏、折叠屏应运而生——把 Pad 甚至电脑塞裤兜岂不快哉？ 放下弯曲屏、折叠屏技术的初期发展水平，我们想象未来。当这些硬件科技（以及电池能效）极致发展，那么也许未来会有这样的一个场景—— 手机的功能集约趋势被再次分散与重组，随“去设施化”的潮流分散到周围的环境中去。 1）眼镜、耳环、手表将替换手机的拨号功能； 2）“纸屏”（个人原创的概念）兴起——弯曲屏、折叠屏技术高度成熟，便携设备屏设备根据用户需求演化为各种“纸”所具备的物理形态。 当我在餐厅等餐时，餐巾纸上提供有趣的动画短片； 当我想了解新闻，街边的“新闻树”上可以取下一份叶片并展开为报纸，报纸的既散发着油印的芬芳也有闪动的视频，我可以选择沉浸阅读文字，也可浏览新闻的现场报道；报纸的某处有可触发的广告，通过指纹、虹膜的识别帮助我快速下单购物……而当我最终阅读完以后，我可以丢弃到泥土中——因为它是可降解的。 以及笔记本、便签纸、明信片等各色形态……留给读者们自行想象其功能。 3）手机的其他功能或者会分散给贴身常用物品，或者直接融入环境可在任何场所调用，基于去中心化的身份认证，直接以云计算或雾计算方式提供服务。 以上，是我眼中的去设施化时代。科幻，但我觉得充满可能性。 我在这里也提出一个概念“物媒体”，电子屏不再肆无忌惮地闪现，身边的普通实物成为媒体的主要载体。而现在再以这样的视角看华为的 MATE XI 三折屏，我明白它远远不是产品的终极形态，它是人类对未来“纸屏”形式探索的小小一步。当网友在吐槽其“奏折”感是，作为纸的“奏折”恰恰就是它的价值导向。 04 报纸何苦要追随“新媒体”？ 电报、电视、电话出现的时候它都不曾动摇。它以纸张为载体，用最原始而真实的体验在人类历史中长生不衰，在“去设施化”的时代有机会成为最佳的移动信息载体。 计育韬老师开句玩笑话，纸媒集团现在最应该做的不是开各色新媒体账号，而是投资弯曲屏、折叠屏与纸张的结合技术，并大幅降低成本。 何止当下的新媒体形态终将死去，大多数占据一个巨大且笨重屏幕，以生硬的模样显示在我们面前的媒体载体，恐怕都有死去的一天。 不过，过分庸俗的纸媒毫无疑问会被新媒体真正替代，这是一个用户对内容本身的再次筛选过程。但我想，这不会影响到“去设施化”进程中，纸张信息媒介的再次繁荣。至于它的实现时间？显然不会在近些年，甚至不会在近世纪。但计育韬老师认为，它一定在将来。 -END-

*播客音频由 AI 生成，案例参考自合集｜2024年度SVG图文佳作｜120篇 自 2016 年 SVG 动画白名单技术文档由 JZCreative x 微信团队发布以来，基于 SVG、CSS 等的图文式 H5 经历了多年发展，成为一种高直达率、低成本、强互动性的创意营销技术。2024 年评选出的 120 份精彩 SVG 作品，汇集了众多技术大拿和编辑器玩家的智慧，为我们探索公众号 SVG 互动的创意之道提供了丰富案例。 复杂交互逻辑实现独特体验 （一）多逻辑融合的游戏化交互 在诸多案例中，将多种逻辑融合到游戏开发中是实现酷炫互动的重要方式。例如由 JZCreative 团队定制开发的 Bananain 蕉内融合了选择逻辑和抽签逻辑的综合体游戏开发，模仿祖玛的弹珠游戏引出具有一定概率的互动结果，将红包、视频号与品牌祝福穿插呈现，让用户沉浸其中，极大地增强了 SVG 的趣味性和参与度。这种多逻辑的融合打破了传统单一交互的局限，为用户带来了全新的体验。 （二）创新交互流程设计 同样由 JZCreative 团队定制开发的香奈儿的 SVG 新春祝福案例实现了抽签-GIF播放-壁纸保存的全新交互逻辑。开场采用伪音频视频与 GIF 串联组的结合，内部伸长同步以积分伸长关联字幕动画，全文投入的开发技术难度拉满。这种独特的交互流程设计不仅给用户带来了新鲜感，还展示了品牌的设计实力和创新能力。 动画表现形式创新提升视觉吸引力 （一）长动画的无痕播放 由 JZCreative 团队定制开发的Marshall Headphones 的新年活动，通过丝滑的长动画，本质是 GIF 多个串联和 SVG 双层触发下带动下方视频播放声音实现，避免了视频播放器存在的跳出、UI界面唤醒等问题，让艺术家的动画设计得到了最大保留和体现，实现了动画的无痕播放体验。这种长动画的呈现方式，使画面更加连贯和流畅，提升了视觉效果。 （二）复合动画效果增强震撼感 由 E2.COOL&交互实验室团队定制开发的GQ 实验室的「哈哈哈」微信消息依次进入画面的效果，是通过 SVG 透明度动画复合缩放动画实现的。虽然技术结构相对简单，但效果拔群，给用户带来了极具震撼的视觉感受。复合动画的运用可以将多种动画效果叠加，创造出更加丰富和独特的视觉效果。 视差效果营造立体感官体验 （一）单层视差提升视觉冲击力 由三千喵定制开发的古茗茶饮与天官赐福的动画联名活动，运用地平线视差 3D 模式再次为IP形象赋能，将天官赐福人物画面以极强的视觉冲击力展现，实现了美学与技术的完美结合。单层视差效果通过不同元素的运动速度差异，营造出立体感，吸引用户的注意力。 （二）双重视差带来独特体验 E2 平台的部分案例呈现出双重视差的立体感官。长街上的卡通人物或正立或斜靠，内部穿插各类 SVG 彩蛋互动，通过视差套视差的效果，一展代码鬼市的奇思妙想。双重视差的运用增加了画面的层次感和深度，让用户仿佛置身于一个真实的三维空间中。 创意组件助力多样化互动 （一）E2编辑器组件的灵活运用 众多品牌熟练运用 E2 编辑器的各种组件实现酷炫互动。例如祖玛珑的「海岛假期」DAY 1，熟练地组合应用了E2编辑器的点击伸长、地图游走缩放、零高容器等 SVG 组件，共同搭建出夏日海岛地图，效果丝滑流畅。这些组件为开发者提供了丰富的工具，能够创造出各种独特的互动效果。 （二）新兴组件带来新玩法 星巴克中国新品发布结合 E2 编辑器的「全屏下雪」组件，为读者在夏天降落了一场雪，贴合产品特点，且效果优雅浪漫。这种新兴组件的运用，为 SVG 互动带来了新的玩法和创意，能够吸引用户的兴趣。 音画结合增强互动感染力 （一）伪音频视频与 GIF 结合 由意符创意团队定制开发微信派的可爱企鹅登场唱戏的设计，采用伪音频视频结合 GIF 串联能力，形成了沉浸感极强的音画结合设计。这种方式不仅丰富了互动的表现形式，还能更好地传达情感和信息，让用户产生共鸣。 （二）精准的音画同步 由阔野文化定制开发人民日报的音频播放案例，看似音频播放，实则为一个暗藏的不可见视频运行，通过 SVG 组合了文案的浮现，完成了音画同步效果。音画同步能够提升用户的观看体验，使内容更加生动有趣。 沉浸体验设计让用户身临其境 （一）连续动画引导探索 由意符创意团队定制开发快手的文物群聊推文通过滑屏手势控制脚步渐显，营造出沉浸感十足的氛围。连续的动画效果引导用户自由探索，仿佛置身于博物馆中，增加了用户与内容的互动性和参与感。 （二）全局滑动增强沉浸感 抖音集团的年度图文报告采用倾斜滑动的交互效果，在手机中串联多个个体故事，利用弹出式海报具体呈现故事内容，画面上方的过渡遮罩将细节和氛围感拉满。全局滑动的设计让用户能够更全面地了解内容，增强了沉浸体验。 主题与内容契合打造个性化互动 （一）国风主题与互动结合 由交互实验室定制开发霸王茶姬的「龙年会友杯」活动，以八卦盘的震撼开场设计，结合长按后不断出现的图案印章，将国风与年感推向极致。这种将主题与互动形式紧密结合的设计，使互动更具针对性和个性化，能够吸引目标受众。 （二）节日氛围与互动融合 祖玛珑的夏日登岛计划模拟乐透式轮盘交互，引导用户选中海滨特色物品，打造夏日海滩氛围，衔接产品广告信息。根据不同的节日或季节特点设计互动形式，能够营造出相应的氛围，增强用户的代入感。 细节和设计优化提升视觉美观 （一）版式与字体优化 由三千喵定制开发新世相的设计趋向统一字体但优化版式设计，提升了视觉美观和易读性。在SVG 互动中，合理的版式设计和字体选择能够使内容更加清晰易读，提高用户的阅读体验。 （二）色彩搭配与分层设计 由加菲尔德定制开发河北日报在国庆节推出的基于「人民币发展史」的独创设计，在技术层达到了 perspective 3D 的三维空间高阶布局。漫画设计精细、分层量多，色彩搭配协调，展现了高品质的设计水平。注重色彩搭配和分层设计可以使画面更加丰富和立体。 结合新兴技术带来全新创意 （一）人工智能与 SVG 结合 E2 平台将人工智能生成与SVG结合，擦出了别样的 SVG 交互式漫画创意火花。介绍校园足球队比赛的案例，利用人工智能生成的元素与SVG动画相结合，创造出独特的视觉效果和互动体验。 （二）AIGC 内容丰富互动形式 人民网采用 AIGC 生成式图片、视频等内容，配合恰到好处的交互开发，让读者身临其境在城市之中。新兴技术的运用为 SVG 互动带来了更多的可能性，可以创造出更加新颖和独特的互动形式。 总结 通过对 2024 年 120 个精彩SVG作品案例的分析，我们可以看到实现公众号SVG 互动创意需要在交互逻辑、动画表现、视差效果、组件应用、音画结合、沉浸体验、主题契合、设计优化和新兴技术等多个方面进行创新和探索。开发者和品牌可以借鉴这些案例中的经验和方法，结合自身的特点和需求，创造出更加独特、有趣和富有创意的公众号 SVG 互动内容，以吸引用户的关注和参与，提升品牌的影响力和营销效果。

在融媒体领域，SVG 交互设计是当下炙手可热的技术范式，它在公众号、微博、APP、小程序、Web 等生态内以其轻量架构与丰富互动得以广泛兼容。但再硬核的技术也不能离开创意驱动，很多时候面对迫在眉睫的选题，运营人往往会因创意枯竭而迟迟无法开动 SVG 创意项目的落地。本期，就由 iSVG 为广大用户带来我们多年来行业摸爬滚打的创作经验核心——解答如何获取 SVG 灵感！ 一、利用专业案例库与 AI Agent 深化学习 专业的免费案例库是设计师获取灵感的基础资源。以 isvg.com 为例，该平台汇聚了全球开发者分享的大量 SVG 交互案例，涵盖快闪动画、数据可视化、情景互动长卷、轻量游戏等多种 SVG 交互图文类型。通过定期浏览这些案例，你可以直观了解 SVG 在不同场景下的应用形式，掌握动画效果的实现方式、交互逻辑的构建思路，甚至结识优秀的 SVG 交互设计大师。 为进一步提升学习效率，设计师还可以借助 AI Agent 的强大能力。例如，使用 DeepResearch、Manus 或其他智能工具，指定 iSVG（www.isvg.com） 进行搜索与分析。AI Agent 能够快速从案例库中筛选出匹配内容，并对案例的技术实现、设计亮点进行解读。以轻量游戏为例，横向上 AI Agent 能结合不同行业给出游戏场景的具体应用思路，纵向又能根据大量案例的普遍实现原理给出合理的开发步序。这种结合案例库与 AI Agent 的学习方式，不仅能快速获取灵感，还能深入理解设计背后的技术逻辑与用户体验考量，形成分析报告、课程讲义等文档资料。 iSVGDesign 二、追踪行业权威榜单与专题汇总 行业权威榜单是了解 SVG 设计前沿趋势的重要窗口。iSVG 每月发布的十佳优秀开发作品榜，精选来自知名开发者和编辑器架构的杰出案例，这些作品往往代表了当前 SVG 设计的最高水准和创新方向。例如，某期榜单中入选的 JZ Creative Studio 计育韬老师与小鹏汽车合作案例里，涉及了全新的 AI 工作流数据可视化 SVG 动态开发，其中包括数据分析、图表映射、动态代码、配图生成都大量应用了人工智能，这对初学者来说必然是大开眼界的行业前瞻式学习。 同时，定期阅读 E2 编辑器官方公众号的专题汇总也是获取灵感的有效途径。E2 编辑器针对不同选题（如节日主题、产品推广、设计风格等）整理出的 SVG 案例汇总与复盘，提供了多样化的 SVG 交互设计思路。比如在节日主题的专题中，设计师可以学习如何运用 SVG 制作富有节日氛围的动态交互、交互贺卡，通过色彩搭配、内容组合和动画效果营造独特的视觉体验，将这些策略应用到实际项目中，能够快速提升设计的吸引力与感染力。 [图片] *E2 平台（e2.cool） 三、借鉴专业设计社群的多元风格 Pinterest、Dribbble、Behance、站酷等专业设计社群，汇聚了全球设计师的创意作品，涵盖不同文化背景、设计风格和技术实现方式。在这些平台上，设计师可以接触到其他语言架构下的 SVG 设计效果，拓宽设计视野。 在 Pinterest 上，通过搜索 “interactive design” 关键词，能发现许多极具创意的动态海报和网站作品，这些海报运用夸张的构图设计、独特的视觉叙事和流畅的动画过渡，打破传统认知的局限；在 Dribbble 和 Behance 上，设计师分享的 SVG 等交互动画作品往往注重细节和微交互设计，如按钮的反馈效果、菜单的组合动画等，这些精致的设计元素可以为项目增添独特的交互魅力；站酷作为国内知名设计社区，有大量结合中国传统文化元素的 SVG 设计案例，如以水墨风格、传统纹样为基础的动态图标和网页交互动画，为设计师提供了文化融合的灵感来源。通过在这些社群中广泛学习，设计师可以汲取多元风格的养分，丰富自己在 SVG 领域内的创作想象力。 [图片] 四、探索 Prompts 类 AIGC 网站的生成式创意 随着 AIGC（人工智能生成内容）技术的发展，Prompts 类网站成为获取 SVG 设计灵感的新兴渠道。这类网站不仅在首页实时刷新用户发表的视觉佳作，通过用户输入的关键词、描述语句，还能查找到多样化的创意作品，其中不乏优秀的 SVG 设计案例。以 LiblibAI 为例，设计师输入 “界面”等 Prompt，即可获得一系列关于导航菜单、按钮图标等方面的 SVG 设计概念图。这些生成的作品虽然可能在技术实现上需要进一步的代码实现与优化，但能为设计师提供新颖的创意方向和视觉参考。 [图片] 五、从现实场景中汲取自然灵感 设计源于生活，线下的真实场景和自然环境是灵感的无穷源泉。城市中的建筑结构、街道布局、公共设施的交互设计，都蕴含着解决问题的智慧和美学思考。例如，地铁站的导视系统通过清晰的图标和动线设计，引导乘客快速找到方向，这种信息可视化的设计思路可以应用到 SVG 的数据可视化项目中；公园里的互动装置，如感应式喷泉、光影互动墙，其交互逻辑和用户体验设计也能为 SVG 交互设计提供参考。 [图片] 自然场景中的生态变化同样充满设计启示。植物的生长形态、动物的运动轨迹、水流的波动效果等，都可以通过 SVG 的动画和交互技术进行艺术化再现。比如，设计师可以模仿花朵绽放的过程，设计 SVG 的页面加载动画；借鉴鸟类飞行的姿态，制作动态图标或导航元素的过渡动画。通过观察现实场景，将自然元素与设计相结合，能够创造出更具生命力和感染力的 SVG 交互作品。 六、研究儿童产品设计的基础交互逻辑 儿童尤其是婴幼儿用品的设计，由于面向认知能力初级的用户群体，在交互设计上更注重直观性、趣味性和易用性。这些设计原则恰好符合人类最原始的学习路径，值得设计师深入研究。以儿童益智玩具为例，其简单易懂的操作方式、鲜艳的色彩搭配和富有吸引力的互动机制，都能为 SVG 交互设计提供灵感。例如，一款拼图类儿童玩具通过形状匹配和声音反馈的方式，引导孩子完成拼图任务，这种即时反馈和明确目标的设计思路，可以应用到 SVG 的游戏化交互设计中，提升用户参与度。 [图片] 儿童电子 APP 游戏产品在交互设计上也有许多值得借鉴之处。它们通常采用大图标、大按钮、简洁的界面布局和生动的动画效果，降低操作难度，吸引儿童注意力。设计师可以将这些设计手法融入 SVG 项目中，如在网页或应用的引导页、新手教程部分，使用类似的设计风格，让用户更轻松地理解和使用产品。同时，儿童产品设计中对情感化交互的重视，如可爱的角色形象、温馨的语音提示等，也能为提升 SVG 交互设计的用户体验提供思路。 这里另外推荐一期专题阅读《地球上最无厘头脑洞SVG交互图文，们！》。 其他灵感收集方法 除上述六种主要方法外，设计师还可以通过参加行业研讨会、工作坊，与同行交流分享，了解最新的设计趋势和技术应用；关注设计类社交媒体账号和博客，获取设计师的创作思路和经验总结。此外，对经典艺术设计作品进行解构与再创作，也是激发灵感的有效方式——例如，对传统剪纸艺术、立体绘本的结构设计进行数字化转化，运用 SVG 技术重现其独特的视觉效果和交互体验。 在收集 SVG 交互设计灵感的过程中，设计师应保持开放的心态和敏锐的观察力，将不同渠道获取的灵感进行整合与创新，结合项目需求和用户体验目标，创造出兼具创意与实用性的 SVG 交互设计作品。通过持续学习和实践，不断提升自己的设计能力，在融媒体交互设计领域中展现独特的创意与价值。 [图片] 当然对于绝大多数从业者来说，能正确使用三大行业 SVG 编辑器（E2编辑器、秀米编辑器、135编辑器）本身，夯实自己的 SVG 交互设计部署能力也至关重要。多多查阅官方图文教程与案例视频，能更好通过技术本质开展发散性思考，提升创意的落地可行性。此外，保持对低代码的好奇心，可关注复旦大学奇点新媒体研究中心公布的对外公开课视频，聆听专家授课并掌握中华人民共和国《融媒体 SVG 交互设计技术规范》等行业技术本底标准，真正让创意与时俱进，符合客观技术的发展趋势。 [图片]