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

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