《前端互動(dòng)設(shè)計(jì)》課程標(biāo)準(zhǔn)

《前端互動(dòng)設(shè)計(jì)》課程標(biāo)準(zhǔn)院校課程負(fù)責(zé)人團(tuán)隊(duì)成員一、課程概述：課程根據(jù)崗位工作流程與數(shù)字媒體藝術(shù)設(shè)計(jì)專業(yè)學(xué)生認(rèn)知事物和解決問題的規(guī)律，共安排課時(shí)為64課時(shí)，授課順序由淺入深分為三階段、六大模塊呈能力遞增方式組成，每個(gè)模塊以一個(gè)思政主題作引導(dǎo)，通過任務(wù)的知識(shí)目標(biāo)、能力目標(biāo)、素質(zhì)目標(biāo)、技能訓(xùn)練、案例連接等形式，幫助學(xué)生在實(shí)踐中掌握H5可視化交互的技術(shù)和策劃創(chuàng)意技能，和后續(xù)的專業(yè)課程形成交互課程體系。第一階段為初級(jí)階段，是整門課程的基礎(chǔ)，包括了初識(shí)H5互動(dòng)設(shè)計(jì)、基礎(chǔ)動(dòng)畫兩個(gè)模塊。在案例設(shè)計(jì)中融入了職業(yè)道德和大國(guó)科技的思政元素。通過學(xué)習(xí)，學(xué)生需掌握軟件的基本使用方法和八大動(dòng)畫的制作技巧，提升動(dòng)畫編輯能力。第二階段為中級(jí)學(xué)習(xí)階段，包括H5可視化交互制作、控件的使用、關(guān)聯(lián)技術(shù)三個(gè)模塊，也是本課程的重點(diǎn)。在案例設(shè)計(jì)中融入了美麗家鄉(xiāng)、社會(huì)公德、文化自信的思政元素。培養(yǎng)學(xué)生可視化交互的制作方法，提升交互制作能力。第三階段為高級(jí)能力的進(jìn)階，包括H5創(chuàng)意與實(shí)現(xiàn)模塊。在案例設(shè)計(jì)中融入了創(chuàng)新精神和工匠精神的色正。該階段通過學(xué)習(xí)H5創(chuàng)意來源、創(chuàng)意產(chǎn)生、創(chuàng)意表現(xiàn)、創(chuàng)意實(shí)現(xiàn)4個(gè)知識(shí)點(diǎn)和技能點(diǎn)，并依托一個(gè)真實(shí)設(shè)計(jì)項(xiàng)目貫穿本階段的學(xué)習(xí)，使學(xué)生全程跟蹤項(xiàng)目的始末，提升學(xué)生創(chuàng)意能力和項(xiàng)目掌控能力。二、教學(xué)目標(biāo)通過本課程知識(shí)與技能的學(xué)習(xí)，使學(xué)生的創(chuàng)造力、動(dòng)畫編輯能力、H5交互能力、創(chuàng)意能力和項(xiàng)目掌控能力等技能。引導(dǎo)學(xué)生建立正確的職業(yè)道德觀，樹立文化自信與精益求精的工匠精神，激發(fā)對(duì)家鄉(xiāng)和祖國(guó)的熱愛。使其掌握技術(shù)和藝術(shù)相結(jié)合的設(shè)計(jì)方法，拓展設(shè)計(jì)思維，具備獨(dú)立完成H5互動(dòng)整體設(shè)計(jì)的職業(yè)能力，為專業(yè)設(shè)計(jì)提供方法和途徑，能按職業(yè)崗位需求設(shè)計(jì)制作富有創(chuàng)意與時(shí)代感的H5交互作品。（一）知識(shí)目標(biāo)（1）理解H5前端互動(dòng)的概念和用途；熟悉不同類型H5傳播的特點(diǎn)；（2）了解動(dòng)畫形成原理；掌握H5基礎(chǔ)動(dòng)畫的制作方法；熟悉時(shí)間軸、幀、關(guān)鍵幀和空白關(guān)鍵幀的概念及用法；（3）掌握H5的加載頁(yè)面和動(dòng)畫控制的方法；熟練掌握H5行為與觸發(fā)事件等交互控制；掌握播放元件、屬性、關(guān)聯(lián)的使用方法；掌握H5實(shí)用工具的應(yīng)用技巧；熟悉H5發(fā)布信息設(shè)置的步驟與主流媒體的尺寸及其屏幕適配技巧；（4）理解H5產(chǎn)品創(chuàng)意的過程；掌握H5產(chǎn)品買點(diǎn)的提煉方法；掌握H5創(chuàng)意方法與表現(xiàn)技巧；掌握H5從創(chuàng)意到實(shí)現(xiàn)的過程；（5）掌握H5一鏡到底等拓展技能的制作方法。（二）能力目標(biāo)（1）通過完成基礎(chǔ)動(dòng)畫的學(xué)習(xí)，能運(yùn)用時(shí)間軸、關(guān)鍵幀、元件的知識(shí)制作出關(guān)鍵幀動(dòng)畫、運(yùn)動(dòng)動(dòng)畫、路徑動(dòng)畫、曲線變形動(dòng)畫、遮罩動(dòng)畫、進(jìn)度動(dòng)畫、預(yù)置動(dòng)畫、元件動(dòng)畫；（2）根據(jù)軟件的設(shè)置能上傳PSD、GIF、音頻、視頻等文件并且能將制作好的H5動(dòng)畫根據(jù)屏幕適配進(jìn)行準(zhǔn)確的發(fā)布；（3）通過完成H5可視化交互制作知識(shí)的學(xué)習(xí)，能運(yùn)用行為與觸發(fā)事件、幀行為交互控制、頁(yè)行為交互控制、多圖層幀交互設(shè)計(jì)、播放元件片段、改變?cè)傩?、關(guān)聯(lián)以及幻燈片效果、擦玻璃、點(diǎn)贊與投票、陀螺隨機(jī)數(shù)、計(jì)數(shù)器、表單與統(tǒng)計(jì)等可視化技巧，制作出既符合現(xiàn)代審美又具備實(shí)用功能的優(yōu)質(zhì)H5交互；（3）通過完成H5創(chuàng)意與實(shí)現(xiàn)知識(shí)的學(xué)習(xí)，能根據(jù)項(xiàng)目分析、運(yùn)用創(chuàng)意尋找方法、創(chuàng)意變現(xiàn)方法，選擇合適的交互方式獨(dú)立完成微信、微博H5項(xiàng)目，培養(yǎng)學(xué)生創(chuàng)意能力和項(xiàng)目掌控能力。（三）素質(zhì)目標(biāo)（1）在習(xí)近平新時(shí)代中國(guó)特色社會(huì)主義思想指引下，通過將中國(guó)傳統(tǒng)元素、大國(guó)科技等元素融入項(xiàng)目訓(xùn)練中，弘揚(yáng)中華文化，踐行社會(huì)主義核心價(jià)值觀，培養(yǎng)學(xué)生的愛國(guó)情懷與民族自豪感以及對(duì)家鄉(xiāng)的熱愛，樹立文化自信；（2）通過完成不同類型H5傳播的特點(diǎn)和H5概念、用途的學(xué)習(xí)，培養(yǎng)學(xué)生的審美意識(shí)與專業(yè)素養(yǎng)；（3）通過導(dǎo)入科技創(chuàng)新手法進(jìn)行頁(yè)面智能配色與編排，培養(yǎng)學(xué)生創(chuàng)新創(chuàng)意思維，提升科技創(chuàng)新意識(shí)；（4）通過將真實(shí)設(shè)計(jì)項(xiàng)目融入前端互動(dòng)的實(shí)踐教學(xué)，培養(yǎng)學(xué)生精益求精的工匠精神，具備良好的團(tuán)隊(duì)協(xié)作素質(zhì)和人際溝通素質(zhì)。三、教學(xué)模式遵循“以學(xué)習(xí)者為中心”的理念，采用混合式教學(xué)，以在線學(xué)習(xí)為主，適當(dāng)結(jié)合線下面授和討論等，課程內(nèi)容在線學(xué)習(xí)時(shí)長(zhǎng)達(dá)50%以上。學(xué)習(xí)方式為教師引領(lǐng)、學(xué)生微課自學(xué)及項(xiàng)目驅(qū)動(dòng)教學(xué)法等。四、教學(xué)日歷：建議8學(xué)時(shí)/周教學(xué)模塊周次教學(xué)主題學(xué)習(xí)成果學(xué)習(xí)資源學(xué)習(xí)活動(dòng)初識(shí)H511.課程簡(jiǎn)介2.H5的概念3.H5作品的分類與欣賞4.H5設(shè)計(jì)流程與步驟1.知識(shí)點(diǎn)：了解H5的概念；了解H5的用途；理解H5產(chǎn)品的判斷標(biāo)準(zhǔn)2.能力點(diǎn)：能把不同類型H5動(dòng)畫的特點(diǎn)帶入到項(xiàng)目設(shè)計(jì)中。能通過三點(diǎn)分析判斷H5產(chǎn)品的優(yōu)缺點(diǎn)。3.素質(zhì)點(diǎn)：培養(yǎng)學(xué)生正確的審美情趣和動(dòng)畫思維方式。1.課程簡(jiǎn)介視頻2.H5的概念微課3.H5作品的分類微課4.H5設(shè)計(jì)流程與步驟微課5．本模塊4個(gè)知識(shí)點(diǎn)的PPT6.拓展資源視頻1.作業(yè)：分小組，收集5個(gè)優(yōu)秀H5作品，并分析其優(yōu)缺點(diǎn)。2.在線測(cè)試基礎(chǔ)動(dòng)畫2—31.界面與舞臺(tái)2.文件導(dǎo)入3.關(guān)鍵幀動(dòng)畫4.運(yùn)動(dòng)動(dòng)畫5.路徑動(dòng)畫6.曲線變形動(dòng)畫7.遮罩動(dòng)畫8.進(jìn)度動(dòng)畫9.預(yù)置動(dòng)畫10.元件動(dòng)畫11.聲音與視頻上傳12.H5發(fā)布與適配1.知識(shí)點(diǎn)：掌握軟件的基本使用方法，以及關(guān)鍵幀動(dòng)畫、運(yùn)動(dòng)動(dòng)畫、路徑動(dòng)畫、曲線變形動(dòng)畫、遮罩動(dòng)畫、進(jìn)度動(dòng)畫、預(yù)置動(dòng)畫、音視頻和發(fā)布的制作方法。2.能力點(diǎn)：能熟練運(yùn)用6總基礎(chǔ)動(dòng)畫完成具備美感的簡(jiǎn)易H5動(dòng)畫。3.素質(zhì)點(diǎn)：通過在訓(xùn)練項(xiàng)目中融入愛國(guó)元素，培養(yǎng)學(xué)生的愛國(guó)情懷與民族自豪感。1.基礎(chǔ)動(dòng)畫模塊微課2.本模塊重點(diǎn)知識(shí)討論3.基礎(chǔ)動(dòng)畫微課所附帶的PPT4.拓展資源視頻5.拓展資源圖片2.作業(yè)：①課堂案例制作②公司標(biāo)志遮照動(dòng)畫③壽司滾動(dòng)動(dòng)畫④5秒vlog動(dòng)畫2.在線測(cè)試3.在線討論可視化交互41.加載頁(yè)面2.幀行為交互3.頁(yè)面交互4.播放原件片段5.改變?cè)貙傩?.知識(shí)點(diǎn)：理解加載頁(yè)面作用；掌握可視化交互的4種方式；握繪制工具的應(yīng)用；掌握行為與觸發(fā)事件來設(shè)置交互的方法；掌握幀行為和頁(yè)面行為設(shè)置交互的方法。2.能力點(diǎn)：能設(shè)計(jì)獨(dú)特審美的在自主加載頁(yè)面。能根據(jù)項(xiàng)目要求設(shè)置H5按鈕和頁(yè)面的跳轉(zhuǎn)；能通過對(duì)按鈕的設(shè)置來控制原件片段。3.素質(zhì)點(diǎn)：通過在訓(xùn)練項(xiàng)目中融入大國(guó)科技，繼承與弘揚(yáng)中華文化。1.可視化交互模塊微課2.可視化交互模塊微課的ppt3.本模塊重點(diǎn)知識(shí)討論4.拓展資源視頻5.拓展資源圖片2.作業(yè)：①課堂案例制作②長(zhǎng)沙老街輪播圖2.在線測(cè)試3.在線討論控件51.投票2.點(diǎn)贊3.計(jì)數(shù)器4.陀螺儀1.知識(shí)點(diǎn)：熟悉8個(gè)實(shí)用工具的屬性；掌握8個(gè)實(shí)用工具的設(shè)置方法；掌握8個(gè)實(shí)用工具對(duì)頁(yè)面、按鈕、動(dòng)畫控制的方法。2.能力點(diǎn)：能完成每個(gè)實(shí)用工具的小練習(xí)；能根據(jù)項(xiàng)目選擇2—4種工具制作交互動(dòng)畫。3.素質(zhì)點(diǎn)：通過美麗家鄉(xiāng)案例、中國(guó)傳統(tǒng)文化融入教學(xué)，培養(yǎng)學(xué)生的愛國(guó)情懷與民族自豪感，樹立文化自信1.控件模塊中微課2.控件模塊微課的ppt3.本模塊重點(diǎn)知識(shí)討論4.拓展資源視頻5.拓展資源圖片1.作業(yè)：①課堂案例制作②比亞迪汽車加載頁(yè)面③長(zhǎng)沙老街輪播圖2.在線測(cè)試3.在線討論關(guān)聯(lián)綁定61.動(dòng)畫關(guān)聯(lián)2.公式關(guān)聯(lián)3.自動(dòng)關(guān)聯(lián)4.條件判斷5.邏輯表達(dá)式1.知識(shí)點(diǎn)：掌握舞臺(tái)關(guān)聯(lián)和元件關(guān)聯(lián)的區(qū)別與作用；理解關(guān)聯(lián)對(duì)象和關(guān)聯(lián)屬性的概念；理解播放模式中切換、同步的用法；掌握屬性關(guān)聯(lián)與自動(dòng)關(guān)聯(lián)的區(qū)別和不同的用法。2.能力點(diǎn)：能用所學(xué)知識(shí)完成卷軸展開動(dòng)畫任務(wù)。能用關(guān)聯(lián)方法控制動(dòng)畫。3.素質(zhì)點(diǎn)：培養(yǎng)學(xué)生自主學(xué)習(xí)能力和舉一反三的能力；通過在訓(xùn)練項(xiàng)目中融入中國(guó)傳統(tǒng)元素，繼承與弘揚(yáng)中華文化。1.關(guān)聯(lián)綁定模塊中微課2.關(guān)聯(lián)綁定微課的ppt3.本模塊重點(diǎn)知識(shí)討論4.拓展資源視頻5.拓展資源圖片1.作業(yè)：課堂案例制作2.在線測(cè)試3.在線討論創(chuàng)意與實(shí)現(xiàn)7—81.手術(shù)刀案例2.天貓雙十一案例3.剪刀石頭布案例1.知識(shí)點(diǎn)：掌握H5創(chuàng)意方法和表現(xiàn)技巧。理解H5設(shè)計(jì)靈感來源。2.能力點(diǎn)：在制作實(shí)際案例，能根據(jù)創(chuàng)意綜合選擇和運(yùn)用交互技術(shù)。3.素質(zhì)點(diǎn)：通過知識(shí)的學(xué)習(xí)提升審美素養(yǎng)和專業(yè)素質(zhì)。1.創(chuàng)意與實(shí)現(xiàn)模塊中視頻2.創(chuàng)意與實(shí)現(xiàn)視頻的ppt3.本模塊重點(diǎn)知識(shí)討論4.拓展資源視頻5.拓展資源圖片2.作業(yè)：①課堂案例制作②完成全國(guó)大學(xué)生廣告大賽命題1項(xiàng)2.在線測(cè)試3.在線討論拓展知識(shí)選修1.學(xué)生優(yōu)秀作品賞析2.廣告營(yíng)銷類案例3.公益案例4.文化類案例5.政府新聞案例1.知識(shí)點(diǎn)：掌握創(chuàng)意、技術(shù)、視覺三種H5作品的分析方法。2.能力點(diǎn)：運(yùn)用H5的設(shè)計(jì)思維、三種分析法正確分析優(yōu)秀作品。3.素質(zhì)點(diǎn)：通過知識(shí)的