融媒体SVG交互设计技术规范
《 中华人民共和国融媒体 SVG 交互设计技术规范 》是由复旦大学奇点新媒体研究中心等单位牵头，学科带头人计育韬等人主要起草，并于 2024 年 8 月起面向全社会行业从业者发布的最高技术标准。该标准前身为 2016 年计育韬与微信团队合作拟定的《 SVG AttributeName 白名单 》，以下为技术规范的当前具体要求，可作为 SVG 交互设计执行时的流程对照与验收参考。
前言
本文件按照 GB/T 1.1 — 2020《 标准化工作导则 第1部分：标准化文件的结构和起草规则 》的规定起草。
请注意本文件的某些内容可能涉及专利。
本文件由复旦大学奇点新媒体研究中心提出。
本文件起草单位：复旦大学奇点新媒体研究中心、上海四零四艺术文化发展有限公司、青岛阔野文化传播有限公司、长春意符文化传媒有限公司、嘉兴千梦文化传播有限公司、上海衬线文化传播有限公司、上海谘诹信息技术有限公司、上海泛猩文化传媒有限公司、深圳云语图信息科技有限公司、锦江区科蚪网络科技工作室、泰州一付信息技术有限公司、东莞市石龙归零心态网络科技工作室。
本文件主要起草人：计育韬、姜棋超、赵国梁、杨泽昊。
融媒体SVG交互设计技术规范
1.范围
本文件规定了融媒体 SVG 交互设计的基本要求、设计要求、设计流程、验收归档。
本文件适用于融媒体 SVG 交互设计。
2.规范性引用文件
本文件没有规范性引用文件。
3.术语和定义
下列术语和定义适用于本文件。
3.1 融媒体 media convergence
充分利用媒介载体，把广播、电视、报纸等既有共同点，又存在互补性的不同媒体，在人力、内容、宣传等方面进行全面整合的新型媒体。
3.2 SVG 交互 SVG interaction
在 SVG 技术的应用下，用户通过一系列的操作（ 如点击、滑动、长按等 ）与 SVG 内容进行互动的过程。
4.缩略语
下列缩略语适用于本文件。
CSS：层叠样式表（ Cascading Style Sheets ）
HTML：超文本标记语言（ Hyper Text Markup Language ）
SVG：可伸缩矢量图形（ Scalable Vector Graphics ）
XML：可扩展标记语言（ Extensible Markup Language ）
5.基本要求
5.1
应遵守可扩展标记语言语法规范和矢量图像动画代码规范，并根据展示终端的浏览器特性选择正确的适配策略进行构建和渲染。
注：一般采用 W3C 万维网联盟制定的《 XML 可扩展标记语言语法规范》和《 SVG 矢量图像动画代码规范》。
5.2
应遵守不同展示平台或展示体系的自有技术规范。
示例1：在微信公众平台的公众号图文界面内，遵守《 SVG AttributeName 白名单 》的范围进行动画标签、动画指令和其他 CSS 指令的应用，《 SVG AttributeName 白名单 》内容参见附录 A。
示例2：在微博平台，遵守微博平台的对应融媒体 SVG 交互设计规范进行设计与开发。
5.3
应遵守不同终端硬件系统特性和渲染规则。
5.4
在移动端常见的 iOS 生态、安卓生态中浏览器引擎存在内核差异，融媒体 SVG 交互设计应在原型开发完毕后在多机型中进行调试，并注意命名空间的申明。
注：iOS 是指苹果公司开发的移动操作系统。
6.设计要求
6.1 交互设计
6.1.1
应存在明确基于自动、点击、触摸（ 开始 ）、触摸（ 结束 ）、触摸（ 移动 ）、滚动特性以及组合而成的交互结构。应包括半自动的触发形式。
6.1.2
宜包含结构可靠的触发器和相对明确的触发意符设计。触发器标签一般宜选择矩形结构、圆形结构、多边形结构或复合路径生成。
6.1.3
应为用户提供最终明确的交互反馈，反馈的视觉变化宜相对显著，反馈的位置可被预期并大概率保留在交互行为发生时的视窗范围内。
6.2 动画设计
6.2.1
宜优先选择具备缓动函数的动画表达，能体现物理加速、阻尼感的动画为佳，动画细节宜尽可能表现出物理特性的生动感，一般结合以下交互形式构件基本动画承载结构：
a) 伸长：自动或通过用户点击、拖拽（ 滑屏 ）等手势操作，使得移动端图文页面在纵向发生高度扩张，一次或多次不断向下延伸的动画效果，并能嵌套或接续新一组伸长以进一步展开画面内容；
b) 穿透触发：通过鼠标点击属性值管理 SVG 图层响应关系的关键技术，通过对不同结构穿透与否的设定，结合 XML/HTML 编程语言构建出复杂的 SVG 或 CSS 交互模型；
c) 双层触发：需要用户一次点击带动更多复杂且存在技术冲突性的动画时，通过双层触发模型进行 SVG 代码的构建。双层触发能使动画效果的可行性翻倍，通过一次点击引发更丰富的 SVG 交互效果，并能实现 SVG 动画的倒序行为；
d) 零高容器/结构：高度为零的 CSS 结构，使得内容在同一画面内可以准确无限堆叠，并由此辅助大多数的 SVG 伸长动画展现。
6.2.2
一般宜根据实际动画制作的内容选择具体模式，CSS 体系中将动画区分为以下 4 种：
a) linear（ 匀速线性 ）；
b) ease-in（ 缓入特性 ）；
c) ease-out（ 缓出特性 ）；
d) ease-in-out（ 缓动出入 ）。
6.2.3
函数坐标区间为（ 0 0;1 1 ）。
6.2.4
应采用防误触设计，确保动画不出现预期外的重复执行、无法执行等状况。
6.3 美学设计
6.3.1
应符合视觉识别系统的行业通识要求，在美学上宜基本反映出创作机构的企业文化、机关属性或媒体职能。若无文字信息和账号名称，应确保用户能感受到明确的设计所属主体。
6.3.2
宜采用个性化、拟人化的融媒体表达，可采用下列方式：
a) 在视觉识别系统基础上融合多样艺术流派形成自身融媒体交互设计美学风格；
b) 与艺术家联名开展作品设计。
6.4 行文设计
6.4.1
融媒体交互设计中的行文一般不宜采用传统排版设计学中的行文处理方式，而宜充分考虑用户跳读、速读以及电商产品的浏览习惯，引导用户在规定时间内完成预期交互行为。具体行文要求如下：
a) 文案一般宜以短句或非完整句进行排列；
b) 换行位置应根据词义的连贯性决定；
c) 长段落行文一般不宜段首缩进，采用符号避头避尾法进行排版，段落与段落之间用空行分隔。
6.4.2
宜采用融媒体交互设计中被普遍应用且成为行业通用行文基本规范的标点符号进行设计。
示例1：以“「」”替代引号。
示例2：以“｜”替代冒号、分号等。
7.设计流程
7.1 需求沟通
需求方与设计师和开发者进行初步沟通，明确基本设计方向。
7.2 需求简报
在基本确定技术可行性与设计可行性后，需求方通过专业方式建立需求简报。
7.3 技术可行性验证
针对融媒体交互设计作品中计划的某些核心交互结构进行提前的开发调试，验证代码模型的可行性，确保切片素材设计有意义。验证过程中一般采用假图和乱数假文进行视觉占位，并为后续设计师的栅格化设计提供参照。
7.4 样例设计
结合技术可行性验证的结果，为需求方提供关键章节的样例设计，确定主视觉风格。
7.5 框架设计
7.5.1
在一个整体画板中体现交互的基本特性，以静态方式将所有动态的交互过程进行呈现，包括：
a) 点击后开场的画面延展；
b) 展开后的画面纵向布局顺序；
c) 特定布局中的滑动/切换状态说明等。
7.5.2
框架设计应使需求方、开发者均能清楚核对交互细节，并方便注释新的修改需求以及对照进行下一阶段的工作。
7.5.3
设计师采用平面设计工具或前端网页设计工具开展设计。
7.6 模型化演示
7.6.1
开发者选择关键的局部结构或直接对整体进行融媒体交互能力的开发，完成完整的交互模型并进行初步功能验证，预留好功能延展的代码架构。
7.6.2
将从 HTML 本地文件到进入不同展示平台的基本部署进行模型化演示，并在多机型终端进行基本的调试和适配。
7.6.3
根据模型化演示，需求方和设计师核对需求实现的结果和设计切片的准确性。
7.7 内容交付与版权固定
7.7.1
对各项图片、内容、交互进行详细修改，定稿后进入交付流程。
7.7.2
设计方根据需求方的实际应用场景和其自身的融媒体运营能力提供对应的交付形式。包括但不限于：
a) 若需求方熟悉融媒体交互设计技术，可选择获取 HTML 文档，自行导入线上部署；
b) 若需求方缺乏对融媒体交互设计技术的认知，可选择技术插件以超链接导入的方式注入自己的平台；
c) 若需求方缺乏相关操作经验，根据情况进行具体协商由开发者进行在线部署并开展交付工作。
7.7.3
为发布方提供基本的代码内版权保护申明，界定融媒体 SVG 交互效果的版权归属，将 SVG 代码指令化序列和被终端程序调用的数据做区分，以 SVG 代码指令化序列为重点进行申明与存证。
7.8 拟发布验证
内容交付生成后，设计方完成发布前的各项设计、技术验证。具体方式及要求如下：
a) 从硬件上，应准备多种典型的系统与机型用于适配检验；
b) 从平台上，应通过额外的私人账号进行拟发布试验，检查收到内容的各项技术参数是否完备，模型运行是否顺利且流畅。
8.验收归档
8.1
融媒体交互设计正式上线后，设计方与需求方应核对发布效果，共同完成验收。
8.2
设计方应归档需求方需要的其他特定文件，包括但不限于：
a) HTML 代码文档；
b) 终稿切片文件夹；
c) 设计工程文件等。
附录A
SVG AttributeName 白名单
微信公众号文章排版使用的 SVG 是指可缩放矢量图形（ Scalable Vector Graphics ）。它是一种基于代码的图形格式，允许设计师通过编写 XML 代码来描述形状和颜色，从而创建出灵活且可以根据屏幕大小自动调整大小的图像。在微信公众号中，开发者可以使用 SVG 结合HTML和CSS来实现类似于H5的动态交互效果。由于这些交互不需要 JavaScript 脚本，因此能够直接嵌入到公众号的文章或页面中，提高了用户体验。此外，SVG 图像可以承载丰富的信息和交互元素，有助于提升品牌的传播力和用户的参与度。
但是有些 SVG 存在 BUG 漏洞，经微信公众号团队反复测试，并在 2016 年制定了微信 SVG AttributeName 白名单。
自白名单发布以来，根据业态硬/软件客观条件变化以及业态内技术发展情况，长期处于动态调整之中。截止到 2023 年底，除了图中对动画属性的基本遴选和应用说明，另请广大开发者注意以下限制细则：
（1）针对业内曾出现的留言区弹跳效果，自 2022 年 3 月起高度动画（ height ）和宽度动画（ width ）条件下 repeatCount 属性存在限制，indefinite 值保存后将被官方替换为 undefined 值。请注意类似开发行为均被微信团队视作「对抗式开发」，干扰公众号原生 UX 范式，如采用有限多次留言区弹跳亦可能受到处罚。
（2）id 传参以及 JavaScript 等保持禁用，包括在嵌入式结构内的漏洞绕过机制已在 2021 年 6 月完成封堵。
（3）外边距（margin）条件下数值存在限制，如 margin-left: -100% 在保存时会被直接抹去而失效。
（4）position 定位保持禁用，因故对于 z-index 优先级排序方法需在 flex 布局前提下应用才可生效。
（5）半严格语法条件环境，请不要长期舍弃 xmlns="http://www.w3.org/1999/xhtml" 此类命名空间申明，避免 CSS 属性表现异常。
（6）鉴于 SVG 内容的复杂特性，微信团队保持微信 APP 深色模式在对图文内容进行渲染时跳过 SVG 叶子节点，不作用于 SVG 结构。
（7）包括 SVG 在内的图文整体内容代码体积不能超过 20M。
（8）部分硬件机制可能阻止 SVG 正常渲染运行，如在 iOS 中关闭「设置」-「辅助功能」-「动态效果」-「自动播放动图」。
