線上線下混合式教學模式在網站設計專業課程中的探索與實踐

麥小霞

摘 要：現代信息技術的發展豐富了教師的教學方式，很多學校線上教學也發展得不錯，如何充分發揮線上教學的優勢，將疫情防控期間的線上教學經驗運用到傳統線下教學中，成為教學改革的研究熱點。本文基于對網站設計專業課程教學現狀的分析，探索了線上線下混合式教學模式，以Web UI設計課程為例進行了教學設計與實踐，并進行了總結和反思。

關鍵詞：線上線下 混合式教學 網站設計專業

得益于信息技術的飛速發展，信息技術將進一步融入常規教學活動，對基于“互聯網+”的線上線下混合式教學模式進行理論和實踐研究是深化網站設計專業課程改革的必然要求，對實現專業教學的發展和創新有著重要的意義。

一、網站設計專業課程教學現狀分析

（一）傳統線下課堂教學模式現狀分析

1.教學的形式不夠多樣化

網站設計專業課程屬于實踐類課程，在教學過程中，多是以面授為主，教師講解知識點、示范技能操作方法，學生使用教師提供的素材，運用所學到的方法把界面臨摹出來，從而學習相關的知識和技能。

2.學生的學習方式以被動接受為主

在網站設計專業課程的教學中，教師講解知識點與操作演示需要占用大量的時間。在教學過程中，教師處于主體地位，學生處于被動參與地位。教學輸出占用了大部分課堂時間，學生沒有獨立思考和獨立探索的時間，這樣容易導致學生對知識技能理解不到位，如若換成其他同類型的項目讓學生嘗試獨立完成，他們往往都是沒法完成的。

3.學生的水平參差不齊

在前面兩年的學習中，學生的網站設計水平有著顯著的差異，學生的軟件操作熟練程度不同，設計理論知識的掌握程度也不同，完成同樣的項目所需花費的時間有比較大的差異。在傳統課堂教學模式中，教師只能考慮大部分學生的學習進度，不可能分配大量的時間給進度慢的學生，進度慢的學生在課后如果沒有教師的輔導，不知道如何學習完剩下的內容。

（二）網站設計專業課程線上線下混合式教學模式可行性分析

1.相關部門建立了線上課程資源平臺，提供了優質教育資源

2020年9月16日，教育部等九部門印發的《職業教育提質培優行動計劃（2020—2023年）》通知中，提出要推動信息技術與教育教學深度融合，分級遴選5 000門左右職業教育在線精品課程，進一步擴大了優質教學資源庫的建設、應用及資源共享。

截至目前，超星學習通平臺和中國大學MOOC（慕課）上都有網站設計專業相關在線開放課程，如UI設計與制作、移動UI設計、UI設計等，為網站設計專業課程的線上線下混合式教學的開展提供了優質課程資源支持。

2.網站設計專業以實踐性課程為主，課程性質決定了本專業課程適合采用混合式教學模式

在網站設計專業課程教學中，學生首先需要掌握設計的相關理論知識，然后通過大量的網頁元素設計、各種類型的網頁界面設計等實踐練習，掌握網頁設計的知識與技能。

實踐練習是網站設計專業知識的有效獲取途徑，進行線下教學時教師可進行面對面輔導，隨時答疑反饋，這是線上教學所不具備的。雖然線上教學拓展了課堂的空間，學習不受時間的限制，學生可以隨時隨地、多次學習課程內容，但也存在自主學習能力弱的學生無法獨自通過線上學習掌握課程的知識技能等缺點。

因此，只有將線下的實踐指導與線上的學習相結合，才能真正實現網站設計專業課程的混合式教學，提升教學質量。

二、網站設計專業線上線下混合式教學模式的探索

網站設計專業對接互聯網企業，以前端開發工程師、UI設計師等職業需求為導向，以網站設計實踐能力培養為主，更加側重學生的技能培養。本專業招生面向的是初中畢業生，部分學生自律性差、學習的積極性和主動性不強。

結合網站設計專業的課程特點及對學生的學情分析和教師自身的實踐教學經驗，本專業課程線上線下混合式教學模式主要采用線下主導、線上為輔的模式，分為課前、課中、課后和評價四個部分。

課前，教師精心設計教學，尋找線上資源，線上推送資源給學生；學生自主學習，提交作業；教師在線給予學生學習反饋，開展答疑、組織學生進行線上互評互動等活動，實現課程的知識學習目標。

課中，教師線下檢驗學生課前學習成果，通過講解或演示幫助學生掌握學習的重難點；學生進行實訓項目實踐，轉化知識內容，完成課程的能力目標。

課后，教師線上推送拓展資源、答疑并進行下一次任務的推送，學生自主完成拓展內容，進行知識技能的鞏固內化，完成課程的職業素養目標。

學習評價貫穿整個教學過程，課前、課中、課后都有學習評價反饋，通過實踐，探索“線上資源學習、線下活動鞏固、過程評價反饋”的線上線下混合式教學模式。

三、線上線下混合式教學設計與實施——以Web? UI設計課程為例

（一）課程目標

在網站設計專業課程中，Web UI設計是一門專業核心課程，教師根據企業典型工作任務所需的職業能力要求進行教學，遵循比較學習原則，設計了四個學習任務，按照目標遞進原則、比較學習原則確定了本課程的學習目標，幫助學生提升學習能力。Web UI設計課程學習任務和學習目標具體如下。

任務一：和茶企業官網UI設計。學習目標是達到基礎層次需求，闡述UI設計的基本概念、特征、設計規范、設計原則、設計流程，按照教師的演示一步步完成UI設計。學生能識記并理解UI設計基礎知識。

任務二：和茶企業官網響應式UI設計。學習目標是達到應用層次需求，運用UI設計規范、設計原則、設計流程，在教師的指導下，學著去完成UI設計。學生能理解并運用UI設計知識與技能。

任務三：和茶企業App UI設計。學習目標是達到綜合層次需求，根據客戶要求，獨立完成UI設計。學生能運用UI設計知識獨立完成界面設計，能分析并評價UI設計界面。

任務四：和茶企業小程序UI設計。學習目標是達到創新層次需求，運用UI設計的方法技能，根據客戶要求，制定設計方案，創新并獨立完成UI設計。學生能運用UI設計知識創造性地完成不同UI產品界面設計，達到高階能力標準要求。

（二）課程教學設計與實施

Web UI設計是一門實踐性很強的課程，為了達到課程學習目標，學生從第一個學習任務，即UI設計基本知識的識記、理解的學習目標開始學習，到最后一個學習任務，即創造性運用UI設計知識的學習目標結束，教學包括課前、課中、課后、評價四個環節。

1.課前線上自主學習

教師根據學習目標、學情分析，錄制UI設計規范、UI設計流程等案例視頻，并根據課程需要選用中國大學MOOC（慕課）在線開放課程移動UI設計里的部分視頻資源。在教學過程中，把課程相關資源上傳至超星學習通平臺，并向學生發送學習任務通知，即自主學習理論知識，完成線上測試，并收集UI界面設計案例。學生接到課程學習任務后，線上進行自主學習，為后續課堂教學奠定理論基礎。同時，教師在線指導并鼓勵學生參與討論、積極思考。

將學生的討論過程及視頻學習進度、線上測試成績等作為學生過程考核評價的內容，同時評價考核學生的自主學習能力、表達能力等職業素養。

2.課中線下集中面授學習

課堂集中學習以培養學生Web UI設計的專業技能為主。

首先，教師針對學生課前自主學習情況進行點評，再針對學生學習薄弱的環節或者本次課的關鍵知識點進行重點講解。

其次，對學生課前搜索到的優秀UI設計界面進行賞析，鼓勵學生討論、分析UI界面設計的優點和設計的邏輯，明確不同類型UI界面設計的關鍵點，為如何設計UI界面做鋪墊。教師以茶企業為主體演示如何通過頭腦風暴整理出頁面所需的元素，再運用線上微視頻學習到的設計規范、設計規則等知識，設計出和茶企業官網、App和小程序界面，引導學生思考，內化課堂知識。

最后，學生在教師指導下完成UI界面設計，并進行展示互評。

將學生在課堂中的學習過程表現，如課堂參與度、課堂知識掌握程度作為學習過程評價的一部分內容。學生設計作品的質量，包括界面設計的完成度、界面主題的表現、界面設計的規范、界面設計的視覺效果、界面設計的創新和界面設計是否符合企業要求等作為學生成果考核評價的一部分，側重職業能力的評價，同時評價學生的表達能力、分析歸納能力等職業素養。

3.課后線上拓展提升

課后的學習側重課堂的學習反饋和拓展提升。學生可以在超星學習通平臺提出對課堂學習內容有疑問的知識技能點，教師組織學生一起討論回答。另外，操作技能較弱、操作速度慢的學生，可以在線觀看操作視頻，完成作業。教師在線提供拓展項目案例的相關資源，讓學生鞏固拓展本次所學內容。將學生課后完成的拓展練習作為學生職業素養評價的一部分內容，評價學生的知識遷移能力、自主學習能力等。

4.評價貫穿始終

課程評價以學習目標為導向，重點對學生的職業素養和職業能力進行評價，包括學生的自主學習能力、溝通表達能力等職業素養通用性指標，也包括學生的知識理解、技能掌握等專業性指標，從不同角度關注學生綜合職業能力和職業素養的培養，把職業能力目標與職業素養目標的評價分散在課前、課中、課后的學習中完成，貫穿課程教學始終。

四、網站設計專業課程線上線下混合式教學的總結與反思

目前，Web UI設計課程采用了線上線下混合式教學模式，整體而言，學生還是喜歡這種新的教學模式，肯定了這種教學模式的優勢。例如，線上學習的時間靈活，可以反復學習，大大提高了學習的主動性；線下課堂集中學習有助于消化重難點知識，提高知識的運用能力，提升技能水平等。

同時，在教學過程中，混合式教學也存在一些問題，如視頻資源制作質量有待提升，視頻時間長度還需斟酌，教師教學任務加重、影響教學情緒等。

為了在網站設計專業課程中更好地采用線上線下混合式教學模式，取得更好的教學效果，筆者在現有課程實踐經驗基礎上進行反思，認為需要在以下三個方面繼續改進。

（一）師生需要充分利用現有線上課程資源平臺

高質量的課程資源是線上線下混合式教學開展的基礎，一方面教師要充分利用超星學習通平臺、中國大學MOOC（慕課）等開放平臺上的資源，也需要繼續挖掘收費培訓類平臺，整合不同平臺的資源，豐富線上教學資源，另一方面要允許學生根據自己的學習進度或者興趣愛好自主選擇對應的知識點進行學習，這樣可以大大提高學生學習的主觀能動性和學習自由度。

（二）教師的引導、監控教學過程的作用需要進一步發揮

線上線下混合式教學模式是以學生為主體、教師為主導的教學方式，這對教師、學生的能力有更高的要求，需要教師全程監控學生的學習，準確掌握學生的學習情況。教師要充分發揮學習平臺的數據監控功能，或者引入人工智能學情分析系統，通過采集學生的學習數據，了解學生的學習情況或學習偏好，為學生精準推送相應的線上資源包，促進學生學習能力的提升。

（三）需要構建多層次、多主體的評價體系

線上線下混合式教學模式要求學生有更強的自主學習能力，但部分學生學習自覺性比較欠缺。

因此，應當多設置不同類型的線上過程化考核評價方式，如線上觀看課程視頻、線上投票答題、線上討論、線上作業互批和線上理論測試等，提高學生的興趣，增強學生的參與感，完善學生自主學習的激勵機制。

線下課堂的評價，一方面以課堂學習過程中的觀察為主，學生和教師共同評價學生的團隊合作能力、溝通協調能力和解決問題能力等職業素養，另一方面通過學生完成項目的質量來評價專業能力，并且可以引入企業專家共同參與評價，讓學生設計的作品更加符合企業需求。

參考文獻：

[1]王文豪，仇冬，陳曉兵，等.線上線下混合教學模式構建：以Java程序設計為例[J].湖北師范大學學報（哲學社會科學版），2021（4）.

[2]袁貝貝.線上線下融合教學模式平臺構建研究：以三維動畫制作課程為例[J].信息與電腦（理論版），2020（22）.

[3]侯征.線上線下混合式教學在景觀規劃設計課程中探索與實踐[J].現代園藝，2021（19）.

[4]過夢旦.Python課程線上線下混合式教學研究與實踐[J].中國新通信，2021（17）.

[5]吳燕.線上線下混合式教學模式在“計算機輔助設計”課程中的探索[J].安徽建筑，2021（11）.

[6]從悅.網絡營銷視域下混合式教學在網頁美工課程改革中的實踐與研究[J].營銷界，2020（47）.

[7]孫可，趙楷夫.線上教學到線上線下混合式教學實踐[J].沈陽師范大學學報（自然科學版），2021（4）.

（作者單位：廣州市工貿技師學院）