“網頁UI設計”課程信息化教學設計研究與實踐

陳靜

摘 要 如何提高設計類課程的教學效率和效果，已經成為高職藝術設計類專業教學改革過程中遇到的普遍性問題。本文通過文獻研究法和探索性研究法，以“網頁UI設計”課程為例，對信息化教學設計進行研究，提出了高職設計類課程信息化教學設計的整體思路。從傳統教學方式存在的問題、教學目標及內容、教學策略、教學方法、課堂教學實施流程、信息化教學工具和資源六個方面進一步提出了信息化教學設計的方案，并輔以方案實踐的成效。研究具有一定的前瞻性和可操作性，對高職藝術設計類專業課程教學改革具有較強的現實借鑒意義。

關鍵詞 信息化教學設計 網頁UI設計 研究與實踐

中圖分類號：G424 文獻標識碼：A DOI：10.16400/j.cnki.kjdkz.2017.09.061

Research and Practice of "Web UI Design" Course

Information Teaching Design

CHEN Jing

（Hunan Vocational and Technical College， Changsha， Hunan 410151）

Abstract How to improve the teaching efficiency and effect of the design course has become a universal problem encountered in the process of teaching reform in the art design of higher vocational education. In this paper， through the literature research method and exploratory research method， taking "web UI design" course as an example， this paper studies the informationized teaching design and puts forward the whole idea of the information teaching design of higher vocational design curriculum. This paper puts forward the scheme of informationized teaching design from six aspects of traditional teaching methods， teaching objectives and contents， teaching strategies， teaching methods， classroom teaching implementation process， informationized teaching tools and resources， supplemented by the effectiveness of program practice The The study has a certain forward - looking and operable， and it has a strong practical reference for the teaching reform of professional courses in art and design.

Keywords Informationized Instructional Design； Web UI design； research and practice

在當今社會，網頁不僅成為人們獲取信息的重要方式，同時也成為公司或企業展示自我形象，宣傳產品的有效媒介。優秀的網頁包括兩個方面，即優化的網頁代碼編寫和完美的“網頁UI設計”。而“網頁UI設計”在整個網頁中尤為重要，可以說是整個網頁的門面，是公司或企業網站展示給客戶的第一印象。

在這個"互聯網+”時代背景下，信息化正潛移默化的滲透到人們生活的各個領域，包括醫療、金融、教育等方面。教育信息化已成為目前教學改革研究的重點方向。本論文的研究主題是“網頁UI設計”課程的信息化教學設計，是符合時代發展趨勢及教學改革要求的實踐性研究。

1 概述

1.1 “網頁UI設計”課程概述

UI即User Interface（用戶界面）的簡稱。指對產品的人機交互、操作邏輯、界面美觀的整體設計。[1]用戶界面設計不僅要做出好看的產品外觀、還要做出好用的產品。[2]UI設計涉及的領域非常廣，包括“網頁UI設計”、軟件UI設計、智能電視UI設計、智能手機UI設計等。本論文是專門針對“網頁UI設計”課程進行的研究。

1.2 “信息化教學設計”概述

教學設計是運用系統方法分析教學問題和確定教學目標，建立解決教學問題的策略方案，試行解決方案，評價試行結果和對方案進行修改的過程。[3]

信息化教學設計是相對于傳統教學設計而言的一種新教學方式。與傳統教學相比，信息化課堂教學具有以下特點：（1）信息共享程度高，實時性好；（2）數字化保存，快捷方便，儲存量大，連續性好；（3）信息流動性、完整性好，能雙向交互；（4）能系統、全面、準確地反映信息全過程。[4]華東師范大學教授祝智庭提出，信息化教學設計是充分利用現代信息技術和信息資源，科學安排教學過程的各個環節和要素，為學生提供良好的信息化教學條件，實現教學過程合理化的系統方法。[5]

1.3 信息化教學設計思路

由此可見，“網頁UI設計”課程信息化教學設計主要是充分利用現代信息技術和信息資料，根據課程的教學目標及內容，科學合理的安排教學環節及教學手段，為學生提供良好的信息化教學條件，解決傳統教學設計中存在的問題，從而進一步提高教學效果。endprint

2信息化教學設計方案

下文中提到的信息化教學設計方案均針對“網頁UI設計”課程，不再一一贅述。

2.1 傳統教學方式存在的問題

在傳統的課堂上，以教師講授為主的教學方式很難調動學生學習的自主性和積極性。大部分學生僅僅能做到按部就班的學習。但是，對于網頁設計師來言，了解設計前沿的流行趨勢、具備敏銳的觀察能力和創新思維尤為重要。但這些能力的培養僅僅靠傳統的教學方式很難實現。

2.2 教學目標及教學內容

“網頁UI設計”課程信息化教學設計的教學目標有兩個。第一，培養學生自主學習的能力，實時了解網頁設計前沿的流行趨勢。第二，培養學生的創新思維和敏銳的觀察能力，讓學生學會設計好看且好用的網頁。

教學內容包括：（1）網站首頁布局設計；（2）網站分頁布局設計；（3）網頁欄目設計；（4）網頁Banner圖設計；（5）網頁導航設計；（6）網頁圖標設計。

2.3 教學策略

充分利用信息化技術，開發合適的信息化教學工具，基于“真實項目進課堂”的教學模式，采用翻轉課堂等教學方法進行項目化任務實踐。

2.4 教學方法

在本課程信息化的教學過程中采用了多種教學方法，主要包括項目教學法、翻轉課堂教學法、小組合作學習法、問題探究式教學法、討論法和講授法。其一，項目教學法。通過多年實踐，創新了“真實項目進課堂”的教學模式，讓學生通過簽訂了商業合同的真實項目實踐提升自我，培養了學生的可持續就業能力。其二，翻轉課堂教學法。通過教學模式的創新，利用信息化教學資源和工具，讓學生重構了學習流程，改變了教和學的關系，優化了教學過程，培養了學生自主學習的能力，最終提升了教學效果。其三，小組合作學習法。網頁創意設計階段，在教師的引導下，學生以項目團隊為單位，采用頭腦風暴法等進行創意學習，鍛煉了學生的創新思維能力。在整個項目完成的過程中，學生以團隊的形式通過分工和合作來完成項目任務，提高了學生的綜合能力和綜合素養。其四，問題探究式教學法。學生在課前和課后有任務安排，在教師的引導下進行任務的學習，并以團隊為單位制作PPT或視頻，對相應學習任務進行匯報，通過探究學習進一步提高學生的自主學習能力。其五，討論法。在項目互評階段，通過討論給予其他團隊評價，提高了學生敏銳的觀察能力；在強化練習階段，通過討論進一步地學習及鞏固知識技能。其六，講授法。教師在課堂上講解“網頁UI設計”的相關原理、方法和步驟。通過課堂演示，微課視頻等方式引導學生分析和認識問題，掌握知識和技能。

2.5 教學實施流程

“網頁UI設計”課程信息化教學實施流程分為六個步驟，分別是了解、團隊、選擇、實施、評價和總結。

第一步，了解。教師引導學生在課堂上打開前程無憂、智聯招聘等招聘網站，讓學生了解企業對網頁設計師崗位的需求是什么？“網頁UI設計”需要具備哪些方面的能力？使學生有目的有方向的學習。

第二步，團隊。要求學生自主組建團隊，并制定相關的團隊規章制度。這是項目分工合作的保障。

第三步，選擇。本課程采用的是真實項目進課堂的教學模式。只有通過真實的項目鍛煉，才能設計出以用戶體驗為中心的“網頁UI設計”。教師在這個階段需要不斷地鼓勵學生走出校園，走進社會，尋找真實項目。學生在這個階段需要找到完全真實的商業項目，并簽訂商業合同。

第四步，實施。在項目的實施上必須從保證項目的進度、實現有效的團隊合作、高效的指導和掌控過程的平臺四個方面進行考慮。其一，為了保障項目的進度，制定了項目的進度安排表，并每周采用隨機抽號的方法抽取學生匯報項目進度。其二，為了加強有效的團隊合作，主要是通過線下會議，線上多人語音和多人視頻會議的方式及團隊規章制度的約束來實現。其三，為了提升教學效率和效果，采用學生為主體，教師為主導，企業指導參與其中的方式進行教學。在教學的過程中提供了大量的教學視頻、電子學習資料、專業學習網站等信息化教學資源。

第五步，評價。課程的評價是全面且立體的，包括客戶、學生、教師、項目過程、匯報及項目質量的評價。

第六步，總結。以團隊為單位對全面且立體的評價進行總結與反思，找到問題所在，并找到解決問題的辦法。

2.6 信息化教學工具和資源

“網頁UI設計”課程信息化教學設計運用了多個信息化教學工具和資料。包括教師自主構建的課程在線教育平臺、自主研發的隨機抽號程序、制作了多個微課教學視頻、提供了大量電子學習資料、專業學習網站、線上多人語音和多人視頻會議信息化工具的使用等。

3 信息化教學設計實踐成效

“網頁UI設計”課程信息化教學效果非常好，主要表現在以下四個方面：（1）解決了傳統教學方式存在的問題，促進學生積極自主地學習，培養了學生的自主學習能力、創新思維和敏銳的觀察能力。（2）學生的網站作品均上線，以用戶體驗為中心的“網頁UI設計”獲得了企業、專家、同行的好評。（3）教師的“網頁UI設計”課程資源和學生的網站作品在國家、省級多個技能比賽中獲獎。（4）“網頁UI設計”課程的教學模式創新和教學成效得到了多家主流媒體的報道和推廣。

4 總結

“網頁UI設計”課程信息化教學設計充分利用現代信息技術和信息資料，科學合理地安排教學策略、教學方法及教學實施流程。為學生提供了良好的信息化教學條件，解決了在傳統教學設計中學生學習不夠主動，不夠積極的問題。在信息化的教學設計中不斷培養學生的自主學習能力、創新思維能力和敏銳的觀察能力，最終提高“網頁UI設計”課程教學效果。

參考文獻

[1] Zhang Z.METHOD AND DEVICE FOR IMPLEMENTING A USER INTERFACE：， WO/2015/018299[P].2015.

[2] [德]Smashing Magazine著.眾妙之門——網站UI設計之道[M].人民郵電出版社，2010.2.

[3] 何克抗.教學系統設計[M].北京：高等教育出版社，2008.

[4] 臧少麗.高職院校信息化教學內涵與優化策略[J].科技創新導報，2014（2）.

[5] 祝智庭.現代教育技術——走向信息化教育[M].北京：教育科學出版社，2002：275.endprint