中華人民共和國《融媒體 SVG 交互設(shè)計(jì)技術(shù)規(guī)范》是由復(fù)旦大學(xué)奇點(diǎn)新媒體研究中心等單位牽頭，學(xué)科帶頭人計(jì)育韜等人主要起草，并于 2024 年 8 月起面向全社會(huì)行業(yè)從業(yè)者發(fā)布的最高技術(shù)標(biāo)準(zhǔn)。該標(biāo)準(zhǔn)前身為 2016 年計(jì)育韜與微信團(tuán)隊(duì)合作擬定的《SVG AttributeName 白名單》，以下為技術(shù)規(guī)范的當(dāng)前具體要求，可作為SVG交互設(shè)計(jì)執(zhí)行時(shí)的流程對(duì)照與驗(yàn)收參考。

前言

本文件按照GB/T 1.1—2020《標(biāo)準(zhǔn)化工作導(dǎo)則  第1部分：標(biāo)準(zhǔn)化文件的結(jié)構(gòu)和起草規(guī)則》的規(guī)定起草。

請(qǐng)注意本文件的某些內(nèi)容可能涉及專利。

本文件由復(fù)旦大學(xué)奇點(diǎn)新媒體研究中心提出。

本文件起草單位：復(fù)旦大學(xué)奇點(diǎn)新媒體研究中心、上海四零四藝術(shù)文化發(fā)展有限公司、青島闊野文化傳播有限公司、長春意符文化傳媒有限公司、嘉興千夢(mèng)文化傳播有限公司、上海襯線文化傳播有限公司、上海諮諏信息技術(shù)有限公司、上海泛猩文化傳媒有限公司、深圳云語圖信息科技有限公司、錦江區(qū)科蚪網(wǎng)絡(luò)科技工作室、泰州一付信息技術(shù)有限公司、東莞市石龍歸零心態(tài)網(wǎng)絡(luò)科技工作室。

本文件主要起草人：計(jì)育韜、姜棋超、趙國梁、楊澤昊。

融媒體SVG交互設(shè)計(jì)技術(shù)規(guī)范

1.范圍

本文件規(guī)定了融媒體 SVG 交互設(shè)計(jì)的基本要求、設(shè)計(jì)要求、設(shè)計(jì)流程、驗(yàn)收歸檔。

本文件適用于融媒體 SVG 交互設(shè)計(jì)。 

2.規(guī)范性引用文件

本文件沒有規(guī)范性引用文件。 

3.術(shù)語和定義

下列術(shù)語和定義適用于本文件。 

3.1 融媒體 media convergence 

充分利用媒介載體，把廣播、電視、報(bào)紙等既有共同點(diǎn)，又存在互補(bǔ)性的不同媒體，在人力、內(nèi)容、宣傳等方面進(jìn)行全面整合的新型媒體。 

3.2 SVG 交互 SVG interaction 

在 SVG 技術(shù)的應(yīng)用下，用戶通過一系列的操作（如點(diǎn)擊、滑動(dòng)、長按等）與 SVG 內(nèi)容進(jìn)行互動(dòng)的過程。 

4.縮略語 

下列縮略語適用于本文件。 

CSS：層疊樣式表（Cascading Style Sheets） 

HTML：超文本標(biāo)記語言（Hyper Text Markup Language） 

SVG：可伸縮矢量圖形（Scalable Vector Graphics） 

XML：可擴(kuò)展標(biāo)記語言（Extensible Markup Language）

5.基本要求 

5.1 應(yīng)遵守可擴(kuò)展標(biāo)記語言語法規(guī)范和矢量圖像動(dòng)畫代碼規(guī)范，并根據(jù)展示終端的瀏覽器特性選擇正確的適配策略進(jìn)行構(gòu)建和渲染。 注：一般采用 W3C 萬維網(wǎng)聯(lián)盟制定的《XML 可擴(kuò)展標(biāo)記語言語法規(guī)范》和《SVG 矢量圖像動(dòng)畫代碼規(guī)范》。 

5.2 

應(yīng)遵守不同展示平臺(tái)或展示體系的自有技術(shù)規(guī)范。 

示例1：在微信公眾平臺(tái)的公眾號(hào)圖文界面內(nèi)，遵守《SVG AttributeName 白名單》的范圍進(jìn)行動(dòng)畫標(biāo)簽、動(dòng)畫指令和其他 CSS 指令的應(yīng)用，《SVG AttributeName 白名單》內(nèi)容參見附錄 A。 

示例2：在微博平臺(tái)，遵守微博平臺(tái)的對(duì)應(yīng)融媒體 SVG 交互設(shè)計(jì)規(guī)范進(jìn)行設(shè)計(jì)與開發(fā)。 

5.3 

應(yīng)遵守不同終端硬件系統(tǒng)特性和渲染規(guī)則。 

5.4 

在移動(dòng)端常見的 iOS 生態(tài)、安卓生態(tài)中瀏覽器引擎存在內(nèi)核差異，融媒體 SVG 交互設(shè)計(jì)應(yīng)在原型開發(fā)完畢后在多機(jī)型中進(jìn)行調(diào)試，并注意命名空間的申明。

注：iOS 是指蘋果公司開發(fā)的移動(dòng)操作系統(tǒng)。

6.設(shè)計(jì)要求 

6.1  交互設(shè)計(jì) 

6.1.1 

應(yīng)存在明確基于自動(dòng)、點(diǎn)擊、觸摸（開始）、觸摸（結(jié)束）、觸摸（移動(dòng)）、滾動(dòng)特性以及組合而成的交互結(jié)構(gòu)。應(yīng)包括半自動(dòng)的觸發(fā)形式。 

6.1.2 

宜包含結(jié)構(gòu)可靠的觸發(fā)器和相對(duì)明確的觸發(fā)意符設(shè)計(jì)。觸發(fā)器標(biāo)簽一般宜選擇矩形結(jié)構(gòu)、圓形結(jié)構(gòu)、多邊形結(jié)構(gòu)或復(fù)合路徑生成。 

6.1.3 

應(yīng)為用戶提供最終明確的交互反饋，反饋的視覺變化宜相對(duì)顯著，反饋的位置可被預(yù)期并大概率保留在交互行為發(fā)生時(shí)的視窗范圍內(nèi)。 

6.2  動(dòng)畫設(shè)計(jì) 

6.2.1 

宜優(yōu)先選擇具備緩動(dòng)函數(shù)的動(dòng)畫表達(dá)，能體現(xiàn)物理加速、阻尼感的動(dòng)畫為佳，動(dòng)畫細(xì)節(jié)宜盡可能表現(xiàn)出物理特性的生動(dòng)感，一般結(jié)合以下交互形式構(gòu)件基本動(dòng)畫承載結(jié)構(gòu)： 

a)伸長：自動(dòng)或通過用戶點(diǎn)擊、拖拽（滑屏）等手勢(shì)操作，使得移動(dòng)端圖文頁面在縱向發(fā)生高度擴(kuò)張，一次或多次不斷向下延伸的動(dòng)畫效果，并能嵌套或接續(xù)新一組伸長以進(jìn)一步展開畫面內(nèi)容 

b)穿透觸發(fā)：通過鼠標(biāo)點(diǎn)擊屬性值管理SVG圖層響應(yīng)關(guān)系的關(guān)鍵技術(shù)，通過對(duì)不同結(jié)構(gòu)穿透與否的設(shè)定，結(jié)合 XML/HTML 編程語言構(gòu)建出復(fù)雜的 SVG 或 CSS 交互模型； 

c)雙層觸發(fā)：需要用戶一次點(diǎn)擊帶動(dòng)更多復(fù)雜且存在技術(shù)沖突性的動(dòng)畫時(shí)，通過雙層觸發(fā)模型進(jìn)行 SVG 代碼的構(gòu)建。雙層觸發(fā)能使動(dòng)畫效果的可行性翻倍，通過一次點(diǎn)擊引發(fā)更豐富的 SVG 交互效果，并能實(shí)現(xiàn) SVG 動(dòng)畫的倒序行為；

d)零高容器/結(jié)構(gòu)：高度為零的 CSS 結(jié)構(gòu)，使得內(nèi)容在同一畫面內(nèi)可以準(zhǔn)確無限堆疊，并由此輔助大多數(shù)的 SVG 伸長動(dòng)畫展現(xiàn)。 

6.2.2 

一般宜根據(jù)實(shí)際動(dòng)畫制作的內(nèi)容選擇具體模式，CSS 體系中將動(dòng)畫區(qū)分為以下 4 種： 

a)linear（勻速線性）； 

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

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

d)ease-in-out（緩動(dòng)出入）。 

6.2.3 

函數(shù)坐標(biāo)區(qū)間為（0 0;1 1）。 

6.2.4 

應(yīng)采用防誤觸設(shè)計(jì)，確保動(dòng)畫不出現(xiàn)預(yù)期外的重復(fù)執(zhí)行、無法執(zhí)行等狀況。 

6.3  美學(xué)設(shè)計(jì) 

6.3.1 

應(yīng)符合視覺識(shí)別系統(tǒng)的行業(yè)通識(shí)要求，在美學(xué)上宜基本反映出創(chuàng)作機(jī)構(gòu)的企業(yè)文化、機(jī)關(guān)屬性或媒體職能。若無文字信息和賬號(hào)名稱，應(yīng)確保用戶能感受到明確的設(shè)計(jì)所屬主體。 

6.3.2 

宜采用個(gè)性化、擬人化的融媒體表達(dá)，可采用下列方式： 

a)在視覺識(shí)別系統(tǒng)基礎(chǔ)上融合多樣藝術(shù)流派形成自身融媒體交互設(shè)計(jì)美學(xué)風(fēng)格； 

b)與藝術(shù)家聯(lián)名開展作品設(shè)計(jì)。 

6.4  行文設(shè)計(jì) 

6.4.1 

融媒體交互設(shè)計(jì)中的行文一般不宜采用傳統(tǒng)排版設(shè)計(jì)學(xué)中的行文處理方式，而宜充分考慮用戶跳讀、速讀以及電商產(chǎn)品的瀏覽習(xí)慣，引導(dǎo)用戶在規(guī)定時(shí)間內(nèi)完成預(yù)期交互行為。具體行文要求如下： 

a)文案一般宜以短句或非完整句進(jìn)行排列； 

b)換行位置應(yīng)根據(jù)詞義的連貫性決定； 

c)長段落行文一般不宜段首縮進(jìn)，采用符號(hào)避頭避尾法進(jìn)行排版，段落與段落之間用空行分隔。 

6.4.2 

宜采用融媒體交互設(shè)計(jì)中被普遍應(yīng)用且成為行業(yè)通用行文基本規(guī)范的標(biāo)點(diǎn)符號(hào)進(jìn)行設(shè)計(jì)。示例1：以“「」”替代引號(hào)。 

示例2：以“｜”替代冒號(hào)、分號(hào)等。

7.設(shè)計(jì)流程 

7.1  需求溝通 

需求方與設(shè)計(jì)師和開發(fā)者進(jìn)行初步溝通，明確基本設(shè)計(jì)方向。 

7.2  需求簡(jiǎn)報(bào) 

在基本確定技術(shù)可行性與設(shè)計(jì)可行性后，需求方通過專業(yè)方式建立需求簡(jiǎn)報(bào)。 

7.3  技術(shù)可行性驗(yàn)證 

針對(duì)融媒體交互設(shè)計(jì)作品中計(jì)劃的某些核心交互結(jié)構(gòu)進(jìn)行提前的開發(fā)調(diào)試，驗(yàn)證代碼模型的可行性，確保切片素材設(shè)計(jì)有意義。驗(yàn)證過程中一般采用假圖和亂數(shù)假文進(jìn)行視覺占位，并為后續(xù)設(shè)計(jì)師的柵格化設(shè)計(jì)提供參照。 

7.4  樣例設(shè)計(jì) 

結(jié)合技術(shù)可行性驗(yàn)證的結(jié)果，為需求方提供關(guān)鍵章節(jié)的樣例設(shè)計(jì)，確定主視覺風(fēng)格。 

7.5  框架設(shè)計(jì) 

7.5.1 

在一個(gè)整體畫板中體現(xiàn)交互的基本特性，以靜態(tài)方式將所有動(dòng)態(tài)的交互過程進(jìn)行呈現(xiàn)，包括：

a)點(diǎn)擊后開場(chǎng)的畫面延展； 

b)展開后的畫面縱向布局順序； 

c)特定布局中的滑動(dòng)/切換狀態(tài)說明等。 

7.5.2 

框架設(shè)計(jì)應(yīng)使需求方、開發(fā)者均能清楚核對(duì)交互細(xì)節(jié)，并方便注釋新的修改需求以及對(duì)照進(jìn)行下一階段的工作。 

7.5.3 

設(shè)計(jì)師采用平面設(shè)計(jì)工具或前端網(wǎng)頁設(shè)計(jì)工具開展設(shè)計(jì)。 

7.6  模型化演示 

7.6.1 

開發(fā)者選擇關(guān)鍵的局部結(jié)構(gòu)或直接對(duì)整體進(jìn)行融媒體交互能力的開發(fā)，完成完整的交互模型并進(jìn)行初步功能驗(yàn)證，預(yù)留好功能延展的代碼架構(gòu)。 

7.6.2 

將從 HTML 本地文件到進(jìn)入不同展示平臺(tái)的基本部署進(jìn)行模型化演示，并在多機(jī)型終端進(jìn)行基本的調(diào)試和適配。 

7.6.3 

根據(jù)模型化演示，需求方和設(shè)計(jì)師核對(duì)需求實(shí)現(xiàn)的結(jié)果和設(shè)計(jì)切片的準(zhǔn)確性。 

7.7  內(nèi)容交付與版權(quán)固定 

7.7.1 

對(duì)各項(xiàng)圖片、內(nèi)容、交互進(jìn)行詳細(xì)修改，定稿后進(jìn)入交付流程。 

7.7.2 

設(shè)計(jì)方根據(jù)需求方的實(shí)際應(yīng)用場(chǎng)景和其自身的融媒體運(yùn)營能力提供對(duì)應(yīng)的交付形式。包括但不限于 

a)若需求方熟悉融媒體交互設(shè)計(jì)技術(shù)，可選擇獲取 HTML 文檔，自行導(dǎo)入線上部署； 

b)若需求方缺乏對(duì)融媒體交互設(shè)計(jì)技術(shù)的認(rèn)知，可選擇技術(shù)插件以超鏈接導(dǎo)入的方式注入自己的平臺(tái)； 

c)若需求方缺乏相關(guān)操作經(jīng)驗(yàn)，根據(jù)情況進(jìn)行具體協(xié)商由開發(fā)者進(jìn)行在線部署并開展交付工作。 

7.7.3 

為發(fā)布方提供基本的代碼內(nèi)版權(quán)保護(hù)申明，界定融媒體 SVG 交互效果的版權(quán)歸屬，將 SVG 代碼指令化序列和被終端程序調(diào)用的數(shù)據(jù)做區(qū)分，以 SVG 代碼指令化序列為重點(diǎn)進(jìn)行申明與存證。 

7.8  擬發(fā)布驗(yàn)證

內(nèi)容交付生成后，設(shè)計(jì)方完成發(fā)布前的各項(xiàng)設(shè)計(jì)、技術(shù)驗(yàn)證。具體方式及要求如下： 

a)從硬件上，應(yīng)準(zhǔn)備多種典型的系統(tǒng)與機(jī)型用于適配檢驗(yàn)； 

b)從平臺(tái)上，應(yīng)通過額外的私人賬號(hào)進(jìn)行擬發(fā)布試驗(yàn)，檢查收到內(nèi)容的各項(xiàng)技術(shù)參數(shù)是否完備，模型運(yùn)行是否順利且流暢。

8.驗(yàn)收歸檔 

8.1 

融媒體交互設(shè)計(jì)正式上線后，設(shè)計(jì)方與需求方應(yīng)核對(duì)發(fā)布效果，共同完成驗(yàn)收。 

8.2 

設(shè)計(jì)方應(yīng)歸檔需求方需要的其他特定文件，包括但不限于 

a)HTML 代碼文檔； 

b)終稿切片文件夾； 

c)設(shè)計(jì)工程文件等。

附錄

（資料性） 

SVG AttributeName 白名單 

*SVG AttributeName 白名單見表 A.1

-END-