中國首個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)設計工程文件等。
附錄
（資料性）
SVG AttributeName 白名單
*SVG AttributeName 白名單見表 A.1
-END-
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）