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

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