陳靜

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

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

中圖分類號(hào)：G424 文獻(xiàn)標(biāo)識(shí)碼：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)今社會(huì)，網(wǎng)頁不僅成為人們獲取信息的重要方式，同時(shí)也成為公司或企業(yè)展示自我形象，宣傳產(chǎn)品的有效媒介。優(yōu)秀的網(wǎng)頁包括兩個(gè)方面，即優(yōu)化的網(wǎng)頁代碼編寫和完美的“網(wǎng)頁UI設(shè)計(jì)”。而“網(wǎng)頁UI設(shè)計(jì)”在整個(gè)網(wǎng)頁中尤為重要，可以說是整個(gè)網(wǎng)頁的門面，是公司或企業(yè)網(wǎng)站展示給客戶的第一印象。

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

1 概述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.3 教學(xué)策略

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

2.4 教學(xué)方法

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

2.5 教學(xué)實(shí)施流程

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

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

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

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

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

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

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

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

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

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

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

4 總結(jié)

“網(wǎng)頁UI設(shè)計(jì)”課程信息化教學(xué)設(shè)計(jì)充分利用現(xiàn)代信息技術(shù)和信息資料，科學(xué)合理地安排教學(xué)策略、教學(xué)方法及教學(xué)實(shí)施流程。為學(xué)生提供了良好的信息化教學(xué)條件，解決了在傳統(tǒng)教學(xué)設(shè)計(jì)中學(xué)生學(xué)習(xí)不夠主動(dòng)，不夠積極的問題。在信息化的教學(xué)設(shè)計(jì)中不斷培養(yǎng)學(xué)生的自主學(xué)習(xí)能力、創(chuàng)新思維能力和敏銳的觀察能力，最終提高“網(wǎng)頁UI設(shè)計(jì)”課程教學(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è)計(jì)之道[M].人民郵電出版社，2010.2.

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

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

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