1、前端互動設計課程標準一、課程概述：課程根據崗位工作流程與數字媒體藝術設計專業學生認知事物和解決問題的規律，共安 排課時為64課時，授課順序由淺入深分為三階段、六大模塊呈能力遞增方式組成，每個模 塊以一個思政主題作引導，通過任務的知識目標、能力目標、素質目標、技能訓練、案例連 接等形式，幫助學生在實踐中掌握H5可視化交互的技術和籌劃創意技能，和后續的專業課 程形成交互課程體系。第一階段為初級階段，是整門課程的基礎，包括了初識H5互動設計、基礎動畫兩個模 塊。在案例設計中融入了職業道德和大國科技的思政元素。通過學習，學生需掌握軟件的基 本使用方法和八大動畫的制作技巧，提升動畫編輯能力。第二階段為中

2、級學習階段，包括H5可視化交互制作、控件的使用、關聯技術三個模 塊，也是本課程的重點。在案例設計中融入了美麗家鄉、社會公德、文化自信的思政元素。 培養學生可視化交互的制作方法，提升交互制作能力。第三階段為高級能力的進階，包括H5創意與實現模塊。在案例設計中融入了創新精神 和工匠精神的色正。該階段通過學習115創意來源、創意產生、創意表現、創意實現4個知 識點和技能點，并依托一個真實設計工程貫穿本階段的學習，使學生全程跟蹤工程的始末， 提升學生創意能力和工程掌控能力。二、教學目標通過本課程知識與技能的學習，使學生的創造力、動畫編輯能力、H5交互能力、創意 能力和工程掌控能力等技能。引導學生建立正

3、確的職業道德觀，樹立文化自信與精益求精的 工匠精神，激發對家鄉和祖國的熱愛。使其掌握技術和藝術相結合的設計方法，拓展設計思 維，具備獨立完成H5互動整體設計的職業能力，為專業設計提供方法和途徑，能按職業崗 位需求設計制作富有創意與時代感的H5交互作品。(一)知識目標(1)理解H5前端互動的概念和用途；熟悉不同類型H5傳播的特點；(2) 了解動畫形成原理；掌握H5基礎動畫的制作方法；熟悉時間軸、幀、關鍵幀和空 白關鍵幀的概念及用法；(3)掌握H5的加載頁面和動畫控制的方法；熟練掌握H5行為與觸發事件等交互控制；掌握播放元件、屬性、關聯的使用方法；掌握H5實用工具的應用技巧；熟悉H5發布信息設置的

4、步驟與主流媒體的尺寸及其屏幕適配技巧；(4)理解H5產品創意的過程；掌握H5產品買點的提煉方法；掌握H5創意方法與表現 技巧；掌握H5從創意到實現的過程；(5)掌握H5 一鏡到底等拓展技能的制作方法。(二)能力目標(1)通過完成基礎動畫的學習，能運用時間軸、關鍵幀、元件的知識制作出關鍵幀動 畫、運動動畫、路徑動畫、曲線變形動畫、遮罩動畫、進度動畫、預置動畫、元件動畫；(2)根據軟件的設置能上傳PSD、GIF,音頻、視頻等文件并且能將制作好的H5動畫 根據屏幕適配進行準確的發布；(3)通過完成H5可視化交互制作知識的學習，能運用行為與觸發事件、幀行為交互控 制、頁行為交互控制、多圖層幀交互設計、

5、播放元件片段、改變元件屬性、關聯以及幻燈片 效果、擦玻璃、點贊與投票、陀螺隨機數、計數器、表單與統計等可視化技巧，制作出既符 合現代審美又具備實用功能的優質H5交互；(3)通過完成H5創意與實現知識的學習，能根據工程分析、運用創意尋找方法、創意 變現方法，選擇合適的交互方式獨立完成微信、微博H5工程，培養學生創意能力和工程掌 控能力。(三)素質目標(1)在習近平新時代中國特色社會主義思想指引下，通過將中國傳統元素、大國科技等 元素融入工程訓練中，弘揚中華文化，踐行社會主義核心價值觀，培養學生的愛國情懷與民 族自豪感以及對家鄉的熱愛，樹立文化自信；(2)通過完成不同類型H5傳播的特點和H5概念、

6、用途的學習，培養學生的審美意識與 專業素養；(3)通過導入科技創新手法進行頁面智能配色與編排，培養學生創新創意思維，提升科 技創新意識；(4)通過將真實設計工程融入前端互動的實踐教學，培養學生精益求精的工匠精神，具備良好的團隊協作素質和人際溝通素質。三、教學模式遵循“以學習者為中心”的理念，采用混合式教學，以在線學習為主，適當結合線下面授和討論等，課程內容在線學習時長達50%以上。學習方式為教師引領、學生微課自學及 工程驅動教學法等。四、教學日歷：建議8學時/周教學 模塊周次教學主題學習成果學習資源學習活動初識H51.課程簡介. H5的概念.H5作品的分 類與欣賞. H5設計流程 與步驟1 .

7、知識點：了解H5的概念；了解H5 的用途；理解H5產品的判斷標準 2,能力點：能把不同類型H5動畫的 特點帶入到工程設計中。能通過三 點分析判斷H5產品的優缺點。3.素質點：培養學生正確的審美情 趣和動畫思維方式。.課程簡介視頻. H5的概念微課. H5作品的分類 微課. H5設計流程與 步驟微課.本模塊4個知 識點的PPT.拓展資源視頻.作業： 分小組，收 集5個優秀 H5作品，并 分析其優缺 點。.在線測試基礎 動畫2- 3.界面與舞臺.文件導入.關鍵幀動畫.運動動畫.路徑動畫曲線變形動 畫.遮罩動畫.進度動畫.預置動畫.元件動畫.聲音與視頻上傳. H5發布與適配.知識點：掌握軟件的基本使

8、用方 法，以及關鍵幀動畫、運動動畫、 路徑動畫、曲線變形動畫、遮罩動 畫、進度動畫、預置動畫、音視頻 和發布的制作方法。.能力點：能熟練運用6總基礎 動畫完成具備美感的簡易H5動畫。.素質點：通過在訓練工程中融入 愛國元素，培養學生的愛國情懷與 民族自豪感。.基礎動畫模塊 微課.本模塊重點知 識討論.基礎動畫微課 所附帶的PPT.拓展資源視頻.拓展資源圖片.作業：課堂案例 制作公司標志 遮照動畫 壽司滾動 動畫5秒vlog 動畫.在線測試 3.在線討論視交 可化互4L加載頁面.幀行為交互.頁面交互.播放原件片 段.改變元素屬 性.知識點：理解加載頁面作用；掌握 可視化交互的4種方式；握繪制工具

9、 的應用；掌握行為與觸發事件來設置 交互的方法；掌握幀行為和頁面行為 設置交互的方法。.能力點：能設計獨特審美的在自主 加載頁面。能根據工程要求設置H5按 鈕和頁面的跳轉；能通過對按鈕的設 置來控制原件片段。.素質點：通過在訓練工程中融入大 國科技，繼承與弘揚中華文化。.可視化交互模 塊微課.可視化交互模 塊微課的ppt.本模塊重點知識 討論.拓展資源視頻.拓展資源圖片.作業：課堂案例 制作長沙老街 輪播圖.在線測試.在線討論控件5器儀 票贊數埔 投點計陀 L2.3.4.知識點：熟悉8個實用工具的屬 性；掌握8個實用工具的設置方法； 掌握8個實用工具對頁面、按鈕、動 畫控制的方法。.能力點：能

10、完成每個實用工具的小 練習；能根據工程選擇2-4種工具制 作交互動畫。.素質點：通過美麗家鄉案例、中國 傳統文化融入教學，培養學生的愛國 情懷與民族自豪感，樹立文化自信.控件模塊中微課.控件模塊微課 的ppt.本模塊重點知識 討論.拓展資源視頻.拓展資源圖片.作業：課堂案例 制作比亞迪汽 車加載頁面 長沙老街 輪播圖.在線測試 3.在線討論關聯 綁定6.動畫關聯.公式關聯.自動關聯.條件判斷.邏輯表達式.知識點：掌握舞臺關聯和元件關聯 的區別與作用；理解關聯對象和關聯 屬性的概念；理解播放模式中切換、 同步的用法；掌握屬性關聯與自動關 聯的區別和不同的用法。.能力點：能用所學知識完成卷軸展 學

11、動畫任務。能用關聯方法控制動 畫。.素質點：培養學生自主學習能力和 舉一反三的能力；通過在訓練工程中 融入中國傳統元素，繼承與弘揚中華 文化。.關聯綁定模塊中 微課.關聯綁定微課 的ppt.本模塊重點知識 討論.拓展資源視頻.拓展資源圖片.作業： 課堂案例制 作.在線測試.在線討論意實 創與現7-8.手術刀案例.天貓雙十一 案例,剪刀石頭布 案例1 .知識點：掌握H5創意方法和表現技 巧。理解H5設計靈感來源。2能力點：在制作實際案例，能根據 創意綜合選擇和運用交互技術。3.素質點：通過知識的學習提升審美 素養和專業素質。.創意與實現模塊 中視頻.創意與實現視 頻的ppt.本模塊重點知識 討論.拓展資源視頻.拓展資源圖片.作業：課堂案例 制作完成全國 大學生廣告 大賽命題1 項.在線測試 3.在線討論展識 拓知選修.學生優秀作 品賞析.廣告營銷類 案例.公益案例.文化類案例.政府新聞案 例.知識點：掌握創意、技術、視覺三 種H5作品的分析方法。.能力點：運用H5的設計思維、三種 分析法正確分析優秀作