“網(wǎng)頁UI設(shè)計”課程信息化教學(xué)設(shè)計研究與實踐

陳靜

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

關(guān)鍵詞 信息化教學(xué)設(shè)計 網(wǎng)頁UI設(shè)計 研究與實踐

中圖分類號：G424 文獻(xiàn)標(biāo)識碼：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

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

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

1 概述

1.1 “網(wǎng)頁UI設(shè)計”課程概述

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

1.2 “信息化教學(xué)設(shè)計”概述

教學(xué)設(shè)計是運用系統(tǒng)方法分析教學(xué)問題和確定教學(xué)目標(biāo)，建立解決教學(xué)問題的策略方案，試行解決方案，評價試行結(jié)果和對方案進(jìn)行修改的過程。[3]

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

1.3 信息化教學(xué)設(shè)計思路

由此可見，“網(wǎng)頁UI設(shè)計”課程信息化教學(xué)設(shè)計主要是充分利用現(xiàn)代信息技術(shù)和信息資料，根據(jù)課程的教學(xué)目標(biāo)及內(nèi)容，科學(xué)合理的安排教學(xué)環(huán)節(jié)及教學(xué)手段，為學(xué)生提供良好的信息化教學(xué)條件，解決傳統(tǒng)教學(xué)設(shè)計中存在的問題，從而進(jìn)一步提高教學(xué)效果。endprint

2信息化教學(xué)設(shè)計方案

下文中提到的信息化教學(xué)設(shè)計方案均針對“網(wǎng)頁UI設(shè)計”課程，不再一一贅述。

2.1 傳統(tǒng)教學(xué)方式存在的問題

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

2.2 教學(xué)目標(biāo)及教學(xué)內(nèi)容

“網(wǎng)頁UI設(shè)計”課程信息化教學(xué)設(shè)計的教學(xué)目標(biāo)有兩個。第一，培養(yǎng)學(xué)生自主學(xué)習(xí)的能力，實時了解網(wǎng)頁設(shè)計前沿的流行趨勢。第二，培養(yǎng)學(xué)生的創(chuàng)新思維和敏銳的觀察能力，讓學(xué)生學(xué)會設(shè)計好看且好用的網(wǎng)頁。

教學(xué)內(nèi)容包括：（1）網(wǎng)站首頁布局設(shè)計；（2）網(wǎng)站分頁布局設(shè)計；（3）網(wǎng)頁欄目設(shè)計；（4）網(wǎng)頁Banner圖設(shè)計；（5）網(wǎng)頁導(dǎo)航設(shè)計；（6）網(wǎng)頁圖標(biāo)設(shè)計。

2.3 教學(xué)策略

充分利用信息化技術(shù)，開發(fā)合適的信息化教學(xué)工具，基于“真實項目進(jìn)課堂”的教學(xué)模式，采用翻轉(zhuǎn)課堂等教學(xué)方法進(jìn)行項目化任務(wù)實踐。

2.4 教學(xué)方法

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

2.5 教學(xué)實施流程

“網(wǎng)頁UI設(shè)計”課程信息化教學(xué)實施流程分為六個步驟，分別是了解、團(tuán)隊、選擇、實施、評價和總結(jié)。

第一步，了解。教師引導(dǎo)學(xué)生在課堂上打開前程無憂、智聯(lián)招聘等招聘網(wǎng)站，讓學(xué)生了解企業(yè)對網(wǎng)頁設(shè)計師崗位的需求是什么？“網(wǎng)頁UI設(shè)計”需要具備哪些方面的能力？使學(xué)生有目的有方向的學(xué)習(xí)。

第二步，團(tuán)隊。要求學(xué)生自主組建團(tuán)隊，并制定相關(guān)的團(tuán)隊規(guī)章制度。這是項目分工合作的保障。

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

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

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

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

2.6 信息化教學(xué)工具和資源

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

3 信息化教學(xué)設(shè)計實踐成效

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

4 總結(jié)

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

參考文獻(xiàn)

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

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

[3] 何克抗.教學(xué)系統(tǒng)設(shè)計[M].北京：高等教育出版社，2008.

[4] 臧少麗.高職院校信息化教學(xué)內(nèi)涵與優(yōu)化策略[J].科技創(chuàng)新導(dǎo)報，2014（2）.

[5] 祝智庭.現(xiàn)代教育技術(shù)——走向信息化教育[M].北京：教育科學(xué)出版社，2002：275.endprint