融媒体SVG交互设计技术规范.pdfVIP

融媒体SVG交互设计技术规范

1范围

本文件规定了融媒体SVG交互设计的基本原则、设计要求、交互技术形式、设计流程。

本文件适用于融媒体SVG交互设计。

2规范性引用文件

本文件没有规范性引用文件。

3术语和定义

下列术语和定义适用于本文件。

3.1

融媒体mediaconvergence

充分利用媒介载体，把广播、电视、报纸等既有共同点，又存在互补性的不同媒体，在人力、内容、

宣传等方面进行全面整合的新型媒体。

3.2

SVG交互设计SVGinteractiondesign

指在SVG技术的应用下，用户通过一系列的操作（如点击、滑动、长按等）与SVG内容进行互动

的过程。

4缩略语

下列缩略语适用于本文件。

CSS：层叠样式表（CascadingStyleSheets）

HTML：超文本标记语言（HyperTextMarkupLanguage）

iOS：苹果公司开发的移动操作系统

SVG：可伸缩矢量图形（ScalableVectorGraphics）

XML：可扩展标记语言（ExtensibleMarkupLanguage）

5基本原则

5.1应遵守可扩展标记语言语法规范和矢量图像动画代码规范，并根据展示终端的浏览器特性选择正

确的适配策略进行构建和渲染。

注：一般遵循W3C万维网联盟制定的《XML可扩展标记语言语法规范》和《SVG矢量图像动画代码规范》。

5.2应遵守不同展示平台或展示体系的自有技术规范。

示例1：在微信公众平台的公众号图文界面内，应遵守《SVGAttributeName白名单》的范围进行动画标签、动画

指令和其他CSS指令的应用。

示例2：在微博平台，应遵守微博平台的对应融媒体SVG交互设计规范进行设计与开发。

5.3应遵守不同终端硬件系统特性和渲染规则。

1

注：在移动端常见的iOS生态、安卓生态中浏览器引擎存在内核差异，融媒体SVG交互设计应在原型开发完毕后

在多机型中进行调试，并注意命名空间的申明。

6设计要求

6.1交互设计要求

6.1.1应存在明确基于自动、点击、触摸（开始）、触摸（结束）、触摸（移动）、滚动特性以及组

合而成的交互结构。在此基础上，还应包括半自动的触发形式。

6.1.2应包含结构可靠的触发器和相对明确的触发意符设计。触发器标签一般选择矩形结构、圆形结

构、多边形结构或复合路径生成，其中矩形结构是最常见的交互热区形式。

6.1.3应为用户提供最终明确的交互反馈，反馈的视觉变化应相对显著，反馈的位置可被预期并大概

率保留在交互行为发生时的视窗范围内。

6.2动画设计要求

6.2.1应优先选择具备缓动函数的动画表达，能体现物理加速、阻尼感的动画为佳，使动画细节尽可

能表现出物理特性的生动感。

6.2.2一般根据实际动画制作的内容选择具体模式，CSS体系中将动画区分为以下4种：

a)linear（匀速线性）；

b)ease-in（缓入特性）；

c)ease-out（缓出特性）；

d)ease-in-out（缓动出入）。

6.2.3应采用防误触设计确保动画不出现预期外的重复执行、无法执行等状况。

6.3美学设计要求

6.3.1应遵循视觉识别系统的行业通识要求，在美学上基本反映出创作机构的企业文化、机关属性或

媒体职能。若无文字信息理解和账号名称露出，仍应确保用户能感受到明确的设计所属主体。

6.3.2应采用个性化、拟人化的融媒体表达，可采用下列方式：

a)在视觉识别系统基础上融合多样艺术流派形成自身融媒体轻交互设计美学风格；

b)采用付费方式与艺术家联名开展作品设计。

6.4行文设计要求

6.4.1融媒体轻交互设计中的行文一般不遵循传统排版设计学中的行文处理方式，而应充分考虑用户

跳读、速读以及电商产品的浏览习惯，引导用户尽快完成预期交互行为。具体行文要求如下：

a)文案一般以短句或非完整句进行排列；

b)换行位置根据词义的连贯性决定；

c)长段落行文一般不段首缩进，采用符号避头避尾法进行排版，段