T-CASME 1609-2024 融媒體SVG 交互設計技術規(guī)范

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