中國首個SVG技術(shù)標(biāo)準(zhǔn)公開，上海四零四藝術(shù)文化參與起草與制定
如何評判一份 SVG 交互設(shè)計作品的優(yōu)劣？如何掌握專業(yè)有效的 SVG 創(chuàng)作/驗收方法？甲方采購如何避免無良乙方、平臺忽悠？乙方執(zhí)行如何為甲方真正排憂解難？
日前，受國家認(rèn)可的首個業(yè)態(tài)內(nèi)專業(yè)技術(shù)標(biāo)準(zhǔn)公開，參與起草與制定的多方專業(yè)機(jī)構(gòu)代表了行業(yè)發(fā)展的前沿水平，體現(xiàn)了第二屆中國 SVG 開發(fā)者大會“于道各努力，千里自同風(fēng)”的業(yè)態(tài)風(fēng)向，也呼應(yīng)了《交互新媒體創(chuàng)作者行業(yè)道德宣言》（萬方數(shù)據(jù)庫收錄）的技術(shù)向善愿景。
中華人民共和國《融媒體 SVG 交互設(shè)計技術(shù)規(guī)范》是由復(fù)旦大學(xué)奇點新媒體研究中心等單位牽頭，上海四零四藝術(shù)文化發(fā)展有限公司作為中國領(lǐng)先的零代碼 SVG 交互設(shè)計在線平臺，受邀參與到起草與制定工作中，并于 2024 年 8 月起面向全社會行業(yè)從業(yè)者發(fā)布，是目前 SVG 交互設(shè)計領(lǐng)域的最高技術(shù)標(biāo)準(zhǔn)。
該標(biāo)準(zhǔn)前身為 2016 年計育韜與微信團(tuán)隊合作制定的《SVG AttributeName 白名單》，以下為技術(shù)規(guī)范的當(dāng)前具體要求，可作為 SVG 交互設(shè)計執(zhí)行時的流程對照與驗收參考。
前言
本文件按照GB/T 1.1—2020《標(biāo)準(zhǔn)化工作導(dǎo)則 第1部分：標(biāo)準(zhǔn)化文件的結(jié)構(gòu)和起草規(guī)則》的規(guī)定起草。
請注意本文件的某些內(nèi)容可能涉及專利。
本文件由復(fù)旦大學(xué)奇點新媒體研究中心提出。
本文件起草單位：復(fù)旦大學(xué)奇點新媒體研究中心、上海四零四藝術(shù)文化發(fā)展有限公司、青島闊野文化傳播有限公司、長春意符文化傳媒有限公司、嘉興千夢文化傳播有限公司、上海襯線文化傳播有限公司、上海諮諏信息技術(shù)有限公司、上海泛猩文化傳媒有限公司、深圳云語圖信息科技有限公司、錦江區(qū)科蚪網(wǎng)絡(luò)科技工作室、泰州一付信息技術(shù)有限公司、東莞市石龍歸零心態(tài)網(wǎng)絡(luò)科技工作室。
本文件主要起草人：計育韜、姜棋超、趙國梁、楊澤昊。
融媒體SVG交互
設(shè)計技術(shù)規(guī)范
1.范圍
本文件規(guī)定了融媒體 SVG 交互設(shè)計的基本要求、設(shè)計要求、設(shè)計流程、驗收歸檔。
本文件適用于融媒體 SVG 交互設(shè)計。
2.規(guī)范性引用文件
本文件沒有規(guī)范性引用文件。
3.術(shù)語和定義
下列術(shù)語和定義適用于本文件。
3.1 融媒體 media convergence
充分利用媒介載體，把廣播、電視、報紙等既有共同點，又存在互補(bǔ)性的不同媒體，在人力、內(nèi)容、宣傳等方面進(jìn)行全面整合的新型媒體。
3.2 SVG 交互 SVG interaction
在 SVG 技術(shù)的應(yīng)用下，用戶通過一系列的操作（如點擊、滑動、長按等）與 SVG 內(nèi)容進(jìn)行互動的過程。
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ī)范和矢量圖像動畫代碼規(guī)范，并根據(jù)展示終端的瀏覽器特性選擇正確的適配策略進(jìn)行構(gòu)建和渲染。
注：一般采用 W3C 萬維網(wǎng)聯(lián)盟制定的《XML 可擴(kuò)展標(biāo)記語言語法規(guī)范》和《SVG 矢量圖像動畫代碼規(guī)范》。
5.2
應(yīng)遵守不同展示平臺或展示體系的自有技術(shù)規(guī)范。
示例1：在微信公眾平臺的公眾號圖文界面內(nèi)，遵守《SVG AttributeName 白名單》的范圍進(jìn)行動畫標(biāo)簽、動畫指令和其他 CSS 指令的應(yīng)用，《SVG AttributeName 白名單》內(nèi)容參見附錄 A。
示例2：在微博平臺，遵守微博平臺的對應(yīng)融媒體 SVG 交互設(shè)計規(guī)范進(jìn)行設(shè)計與開發(fā)。
5.3
應(yīng)遵守不同終端硬件系統(tǒng)特性和渲染規(guī)則。
5.4
在移動端常見的 iOS 生態(tài)、安卓生態(tài)中瀏覽器引擎存在內(nèi)核差異，融媒體 SVG 交互設(shè)計應(yīng)在原型開發(fā)完畢后在多機(jī)型中進(jìn)行調(diào)試，并注意命名空間的申明。
注：iOS 是指蘋果公司開發(fā)的移動操作系統(tǒng)。
6.設(shè)計要求
6.1 交互設(shè)計
6.1.1
應(yīng)存在明確基于自動、點擊、觸摸（開始）、觸摸（結(jié)束）、觸摸（移動）、滾動特性以及組合而成的交互結(jié)構(gòu)。應(yīng)包括半自動的觸發(fā)形式。
6.1.2
宜包含結(jié)構(gòu)可靠的觸發(fā)器和相對明確的觸發(fā)意符設(shè)計。觸發(fā)器標(biāo)簽一般宜選擇矩形結(jié)構(gòu)、圓形結(jié)構(gòu)、多邊形結(jié)構(gòu)或復(fù)合路徑生成。
6.1.3
應(yīng)為用戶提供最終明確的交互反饋，反饋的視覺變化宜相對顯著，反饋的位置可被預(yù)期并大概率保留在交互行為發(fā)生時的視窗范圍內(nèi)。
6.2 動畫設(shè)計
6.2.1
宜優(yōu)先選擇具備緩動函數(shù)的動畫表達(dá)，能體現(xiàn)物理加速、阻尼感的動畫為佳，動畫細(xì)節(jié)宜盡可能表現(xiàn)出物理特性的生動感，一般結(jié)合以下交互形式構(gòu)件基本動畫承載結(jié)構(gòu)：
a) 伸長：自動或通過用戶點擊、拖拽（滑屏）等手勢操作，使得移動端圖文頁面在縱向發(fā)生高度擴(kuò)張，一次或多次不斷向下延伸的動畫效果，并能嵌套或接續(xù)新一組伸長以進(jìn)一步展開畫面內(nèi)容
b) 穿透觸發(fā)：通過鼠標(biāo)點擊屬性值管理SVG圖層響應(yīng)關(guān)系的關(guān)鍵技術(shù)，通過對不同結(jié)構(gòu)穿透與否的設(shè)定，結(jié)合 XML/HTML 編程語言構(gòu)建出復(fù)雜的 SVG 或 CSS 交互模型；
c) 雙層觸發(fā)：需要用戶一次點擊帶動更多復(fù)雜且存在技術(shù)沖突性的動畫時，通過雙層觸發(fā)模型進(jìn)行 SVG 代碼的構(gòu)建。雙層觸發(fā)能使動畫效果的可行性翻倍，通過一次點擊引發(fā)更豐富的 SVG 交互效果，并能實現(xiàn) SVG 動畫的倒序行為；
d) 零高容器/結(jié)構(gòu)：高度為零的 CSS 結(jié)構(gòu)，使得內(nèi)容在同一畫面內(nèi)可以準(zhǔn)確無限堆疊，并由此輔助大多數(shù)的 SVG 伸長動畫展現(xiàn)。
6.2.2
一般宜根據(jù)實際動畫制作的內(nèi)容選擇具體模式，CSS 體系中將動畫區(qū)分為以下 4 種：
a) linear（勻速線性）；
b) ease-in（緩入特性）；
c) ease-out（緩出特性）；
d) ease-in-out（緩動出入）。
6.2.3
函數(shù)坐標(biāo)區(qū)間為（0 0;1 1）。
6.2.4
應(yīng)采用防誤觸設(shè)計，確保動畫不出現(xiàn)預(yù)期外的重復(fù)執(zhí)行、無法執(zhí)行等狀況。
6.3 美學(xué)設(shè)計
6.3.1
應(yīng)符合視覺識別系統(tǒng)的行業(yè)通識要求，在美學(xué)上宜基本反映出創(chuàng)作機(jī)構(gòu)的企業(yè)文化、機(jī)關(guān)屬性或媒體職能。若無文字信息和賬號名稱，應(yīng)確保用戶能感受到明確的設(shè)計所屬主體。
6.3.2
宜采用個性化、擬人化的融媒體表達(dá)，可采用下列方式：
a) 在視覺識別系統(tǒng)基礎(chǔ)上融合多樣藝術(shù)流派形成自身融媒體交互設(shè)計美學(xué)風(fēng)格；
b) 與藝術(shù)家聯(lián)名開展作品設(shè)計。
6.4 行文設(shè)計
6.4.1
融媒體交互設(shè)計中的行文一般不宜采用傳統(tǒng)排版設(shè)計學(xué)中的行文處理方式，而宜充分考慮用戶跳讀、速讀以及電商產(chǎn)品的瀏覽習(xí)慣，引導(dǎo)用戶在規(guī)定時間內(nèi)完成預(yù)期交互行為。具體行文要求如下：
a) 文案一般宜以短句或非完整句進(jìn)行排列；
b) 換行位置應(yīng)根據(jù)詞義的連貫性決定；
c) 長段落行文一般不宜段首縮進(jìn)，采用符號避頭避尾法進(jìn)行排版，段落與段落之間用空行分隔。
6.4.2
宜采用融媒體交互設(shè)計中被普遍應(yīng)用且成為行業(yè)通用行文基本規(guī)范的標(biāo)點符號進(jìn)行設(shè)計。
示例1：以“「」”替代引號。
示例2：以“｜”替代冒號、分號等。
7.設(shè)計流程
7.1 需求溝通
需求方與設(shè)計師和開發(fā)者進(jìn)行初步溝通，明確基本設(shè)計方向。
7.2 需求簡報
在基本確定技術(shù)可行性與設(shè)計可行性后，需求方通過專業(yè)方式建立需求簡報。
7.3 技術(shù)可行性驗證
針對融媒體交互設(shè)計作品中計劃的某些核心交互結(jié)構(gòu)進(jìn)行提前的開發(fā)調(diào)試，驗證代碼模型的可行性，確保切片素材設(shè)計有意義。驗證過程中一般采用假圖和亂數(shù)假文進(jìn)行視覺占位，并為后續(xù)設(shè)計師的柵格化設(shè)計提供參照。
7.4 樣例設(shè)計
結(jié)合技術(shù)可行性驗證的結(jié)果，為需求方提供關(guān)鍵章節(jié)的樣例設(shè)計，確定主視覺風(fēng)格。
7.5 框架設(shè)計
7.5.1
在一個整體畫板中體現(xiàn)交互的基本特性，以靜態(tài)方式將所有動態(tài)的交互過程進(jìn)行呈現(xiàn)，包括：
a) 點擊后開場的畫面延展；
b) 展開后的畫面縱向布局順序；
c) 特定布局中的滑動/切換狀態(tài)說明等。
7.5.2
框架設(shè)計應(yīng)使需求方、開發(fā)者均能清楚核對交互細(xì)節(jié)，并方便注釋新的修改需求以及對照進(jìn)行下一階段的工作。
7.5.3
設(shè)計師采用平面設(shè)計工具或前端網(wǎng)頁設(shè)計工具開展設(shè)計。
7.6 模型化演示
7.6.1
開發(fā)者選擇關(guān)鍵的局部結(jié)構(gòu)或直接對整體進(jìn)行融媒體交互能力的開發(fā)，完成完整的交互模型并進(jìn)行初步功能驗證，預(yù)留好功能延展的代碼架構(gòu)。
7.6.2
將從 HTML 本地文件到進(jìn)入不同展示平臺的基本部署進(jìn)行模型化演示，并在多機(jī)型終端進(jìn)行基本的調(diào)試和適配。
7.6.3
根據(jù)模型化演示，需求方和設(shè)計師核對需求實現(xiàn)的結(jié)果和設(shè)計切片的準(zhǔn)確性。
7.7 內(nèi)容交付與版權(quán)固定
7.7.1
對各項圖片、內(nèi)容、交互進(jìn)行詳細(xì)修改，定稿后進(jìn)入交付流程。
7.7.2
設(shè)計方根據(jù)需求方的實際應(yīng)用場景和其自身的融媒體運(yùn)營能力提供對應(yīng)的交付形式。包括但不限于
a) 若需求方熟悉融媒體交互設(shè)計技術(shù)，可選擇獲取 HTML 文檔，自行導(dǎo)入線上部署；
b) 若需求方缺乏對融媒體交互設(shè)計技術(shù)的認(rèn)知，可選擇技術(shù)插件以超鏈接導(dǎo)入的方式注入自己的平臺；
c) 若需求方缺乏相關(guān)操作經(jīng)驗，根據(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 代碼指令化序列為重點進(jìn)行申明與存證。
7.8 擬發(fā)布驗證
內(nèi)容交付生成后，設(shè)計方完成發(fā)布前的各項設(shè)計、技術(shù)驗證。具體方式及要求如下：
a) 從硬件上，應(yīng)準(zhǔn)備多種典型的系統(tǒng)與機(jī)型用于適配檢驗；
b) 從平臺上，應(yīng)通過額外的私人賬號進(jìn)行擬發(fā)布試驗，檢查收到內(nèi)容的各項技術(shù)參數(shù)是否完備，模型運(yùn)行是否順利且流暢。
8.驗收歸檔
8.1
融媒體交互設(shè)計正式上線后，設(shè)計方與需求方應(yīng)核對發(fā)布效果，共同完成驗收。
8.2
設(shè)計方應(yīng)歸檔需求方需要的其他特定文件，包括但不限于
a) HTML 代碼文檔；
b) 終稿切片文件夾；
c) 設(shè)計工程文件等。
附錄A
（資料性）
SVG AttributeName 白名單
*SVG AttributeName 白名單見表 A.1
編輯
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）