南昌企业建设网站开发,登陆Wordpress手机app,网站开发素材,seo咨询推广找推推蛙编辑搜图
中华人民共和国《融媒体 SVG 交互设计技术规范》是由复旦大学奇点新媒体研究中心等单位牵头#xff0c;学科带头人计育韬等人主要起草#xff0c;并于 2024 年 8 月起面向全社会行业从业者发布的最高技术标准。该标准前身为 2016 年计育韬与微信团队合作拟定的《SV… 编辑搜图
中华人民共和国《融媒体 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)设计工程文件等。 附录 资料性
SVG AttributeName 白名单
*SVG AttributeName 白名单见表 A.1 编辑搜图 -END-
