潘倩

摘 要：UI交互設(shè)計(jì)是一門(mén)對(duì)各類用戶界面進(jìn)行優(yōu)化、規(guī)范和美化的設(shè)計(jì)科學(xué)，優(yōu)秀的人機(jī)互動(dòng)體驗(yàn)和信息可視化設(shè)計(jì)是其追求的目標(biāo)。要想上好UI交互設(shè)計(jì)這門(mén)課，教師就必須突破傳統(tǒng)教學(xué)模式的框架，根據(jù)UI交互設(shè)計(jì)課程的教學(xué)大綱、課程教學(xué)計(jì)劃、所授專業(yè)的職業(yè)崗位需求等，借助信息化技術(shù)手段，將微課引入U(xiǎn)I交互設(shè)計(jì)課程教學(xué)的各個(gè)階段。教學(xué)實(shí)踐證明，將微課引入課程教學(xué)不僅可以提高學(xué)生的學(xué)習(xí)興趣和主動(dòng)性，而且提高了教師的信息化教學(xué)水平。

關(guān)鍵詞：微課;信息化教學(xué);UI交互設(shè)計(jì)

21世紀(jì)是信息技術(shù)高速發(fā)展的時(shí)代，人們對(duì)圖形的需求已經(jīng)不能滿足于平面的圖形，更加可視的、可交互性的二維甚至三維的圖形界面設(shè)計(jì)越來(lái)越受到重視和追捧。User Interface（用戶界面）簡(jiǎn)稱“UI”，其范圍涵蓋了手機(jī)界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、軟件界面設(shè)計(jì)、游戲界面設(shè)計(jì)和播放器界面設(shè)計(jì)等。UI交互設(shè)計(jì)是一門(mén)對(duì)各類界面進(jìn)行優(yōu)化、規(guī)范和美化的設(shè)計(jì)科學(xué)，以滿足用戶對(duì)信息技術(shù)產(chǎn)品界面更加人性化、靈活性、簡(jiǎn)易性、可控性、安全性和一致性要求為目標(biāo)，最終為使用者提供愉悅體驗(yàn)的設(shè)計(jì)過(guò)程。因此，要上好UI交互設(shè)計(jì)這門(mén)課程，教師就必須在課堂教學(xué)中大膽突破，利用信息化建設(shè)浪潮帶來(lái)的平臺(tái)和技術(shù)尤其是微課，從學(xué)生的需求角度出發(fā)，生動(dòng)有趣地開(kāi)展教學(xué)設(shè)計(jì)。

一、對(duì)微課的認(rèn)識(shí)

微課，英文為Microlecture，由 micro（微觀的）+lecture（講座、講課、演講）組成。由此可見(jiàn)，短小精悍的教學(xué)視頻是微課的核心組成部分。很多人對(duì)微課概念的理解僅停留在微課就是幾分鐘一個(gè)的與教學(xué)知識(shí)點(diǎn)相關(guān)的教學(xué)視頻，以為進(jìn)行微課教學(xué)就是將提前做好的教學(xué)視頻發(fā)布給學(xué)生，讓學(xué)生照著視頻提前學(xué)習(xí)，然后帶著問(wèn)題在面對(duì)面的課堂教學(xué)中進(jìn)行解決即可。然而，不管是追溯微課的起源、應(yīng)用歷史還是調(diào)研分析優(yōu)秀的微課，微課的內(nèi)涵除了微視頻，還包括與某個(gè)知識(shí)技能點(diǎn)相關(guān)的教學(xué)計(jì)劃、教學(xué)大綱、素材案例、教學(xué)設(shè)計(jì)、教學(xué)課件與素材、教學(xué)考核、教學(xué)測(cè)評(píng)、學(xué)生反饋和教師評(píng)價(jià)等輔助性教學(xué)資源包，所有這些教學(xué)要素通過(guò)有序的分解與重構(gòu)，看似“碎片化”的學(xué)習(xí)，實(shí)則與傳統(tǒng)課堂教學(xué)相比，更有針對(duì)性、問(wèn)題解決導(dǎo)向性、靈活性、方便性、互動(dòng)性和及時(shí)性的特點(diǎn)[1]。

二、微課在UI交互設(shè)計(jì)課程教學(xué)中的實(shí)踐

從收集的本校3個(gè)不同專業(yè)學(xué)生的《微課使用情況調(diào)查問(wèn)卷》的數(shù)據(jù)分析顯示：目前經(jīng)常接觸微課的學(xué)生占總?cè)藬?shù)的25.72%、偶爾接觸的占57.14%、從來(lái)沒(méi)有接觸過(guò)的占17.14%;學(xué)生接觸微課的途徑主要為老師，其次是網(wǎng)絡(luò)和同學(xué);通過(guò)云課堂、微課網(wǎng)、國(guó)家精品課程網(wǎng)和網(wǎng)易公開(kāi)課接觸到微課的學(xué)生人數(shù)比例分別為88.57 %、20.0%、14.29%和11.43%，還有5.71%的學(xué)生通過(guò)其他途徑接觸微課;非常愿意使用微課進(jìn)行學(xué)習(xí)的學(xué)生占總調(diào)查人數(shù)的57.14%，愿意的占34.29%，還有8.57%的學(xué)生表示無(wú)所謂（主要是偶爾或沒(méi)接觸過(guò)微課的同學(xué)）;調(diào)查的學(xué)生當(dāng)中有80.0%對(duì)視頻講解形式的微課感興趣，40.0%的學(xué)生對(duì)動(dòng)畫(huà)形式的微課表示出興趣;希望微課可以設(shè)置在課前預(yù)習(xí)環(huán)節(jié)的比例為42.86%、出現(xiàn)在課后復(fù)習(xí)的環(huán)節(jié)比例為57.14%?！段⒄n使用情況調(diào)查問(wèn)卷》的所有數(shù)據(jù)都表明3個(gè)專業(yè)的學(xué)生對(duì)微課導(dǎo)入課程教學(xué)是持支持態(tài)度的。以UI交互設(shè)計(jì)課程為例，分享如何利用微課進(jìn)行信息化教學(xué)：

（一）課前籌備

根據(jù)UI交互設(shè)計(jì)課程的教學(xué)大綱、課程教學(xué)計(jì)劃、所授專業(yè)的職業(yè)崗位需求等，制定出6部分相對(duì)獨(dú)立又層層遞進(jìn)的教學(xué)內(nèi)容，如表1[2]。

圍繞每一部分課程的重點(diǎn)、難點(diǎn)，收集、整理、制作和上傳學(xué)習(xí)任務(wù)書(shū)、PPT課件、微課視頻、測(cè)試習(xí)題和經(jīng)典案例賞析。微課視頻重點(diǎn)提取每個(gè)典型案例所用的核心技術(shù)、難點(diǎn)和技巧點(diǎn)進(jìn)行講解，每個(gè)視頻錄制時(shí)間控制在10分鐘內(nèi)。主要采用錄屏軟件（EV錄屏）進(jìn)行錄制，由于EV錄屏是免費(fèi)的且非常容易上手，不僅方便學(xué)生觀看老師的整個(gè)操作過(guò)程，而且對(duì)于教師來(lái)說(shuō)，用此軟件錄制UI交互設(shè)計(jì)的微課視頻既經(jīng)濟(jì)又便捷。

學(xué)生可以充分利用碎片化時(shí)間，在任何可行的地點(diǎn)，登錄云課堂APP進(jìn)入U(xiǎn)I交互設(shè)計(jì)課程網(wǎng)站進(jìn)行預(yù)習(xí)，按照學(xué)習(xí)任務(wù)書(shū)完成練習(xí)。教師可以通過(guò)課程網(wǎng)站及時(shí)查看學(xué)生的自學(xué)完成情況，統(tǒng)計(jì)學(xué)生已掌握的知識(shí)技能點(diǎn)和未完成的難點(diǎn)和易錯(cuò)點(diǎn)，調(diào)整教學(xué)計(jì)劃，讓下一步的課堂教學(xué)做到有的放矢！

（二）課堂教學(xué)

以UI交互設(shè)計(jì)中的手機(jī)界面設(shè)計(jì)為例，將課堂教學(xué)分為5個(gè)部分：

1.教師可以利用云課堂等信息化教學(xué)平臺(tái)的簽到功能對(duì)學(xué)生進(jìn)行考勤，云課堂中的手勢(shì)簽到和二維碼簽到可以設(shè)定精確的簽到時(shí)間，最大限度降低了學(xué)生代簽到或者異地簽到的概率，對(duì)學(xué)生出勤率的保證具有明顯的作用。

2.教師播放課前上傳的手機(jī)界面設(shè)計(jì)的PPT課件，參考之前收集的學(xué)生難以理解的問(wèn)題反饋。通過(guò)展示國(guó)內(nèi)外獲獎(jiǎng)的優(yōu)秀手機(jī)主題設(shè)計(jì)、手機(jī)APP界面設(shè)計(jì)作品，重點(diǎn)對(duì)手機(jī)界面設(shè)計(jì)的要求、手機(jī)界面設(shè)計(jì)的基本常識(shí)（手機(jī)顯示屏分辨率、手機(jī)界面的色彩級(jí)別及手機(jī)界面設(shè)計(jì)圖標(biāo)的尺寸）進(jìn)行視覺(jué)化和形象化的講解，為學(xué)生繪制界面打下扎實(shí)的理論基礎(chǔ)。

3.教師利用上課機(jī)房的教學(xué)軟件（如極域電子教室），邀請(qǐng)自學(xué)完成優(yōu)秀的學(xué)生積極參與基礎(chǔ)操作技能的演示，給同學(xué)們更多自主學(xué)習(xí)和自我展示的機(jī)會(huì)，為今后匯報(bào)作品培養(yǎng)表達(dá)能力。

4.針對(duì)課前學(xué)生手機(jī)界面設(shè)計(jì)作業(yè)的完成情況，圍繞重點(diǎn)與難點(diǎn)，教師將案例進(jìn)行課題分解，將一個(gè)案例分解成相對(duì)獨(dú)立的小步驟，以使學(xué)生能扎實(shí)地、一步步掌握好技術(shù)要點(diǎn)。

5.教師總結(jié)課程的重難點(diǎn)，以此案例為出發(fā)點(diǎn)，引導(dǎo)學(xué)生去思考如何將本案例所學(xué)技能進(jìn)行遷移和泛化，并且布置具有啟發(fā)性的課題。例如，案例制作的是iOS操作系統(tǒng)的應(yīng)用商店圖標(biāo)， 泛化的練習(xí)則是制作Android系統(tǒng)的應(yīng)用商店圖標(biāo)。

（三）課后評(píng)價(jià)與反饋

學(xué)生在限定的時(shí)間內(nèi)將案例作業(yè)及泛化練習(xí)作業(yè)上傳課程平臺(tái)（本文以云課堂為例）。不僅可以針對(duì)還未明白的知識(shí)點(diǎn)回看課前教師上傳的課件和微課視頻，幫助自己鞏固知識(shí)和技能，還能將著實(shí)不理解的問(wèn)題留言給教師。

教師登錄課程平臺(tái)對(duì)每位學(xué)生的作業(yè)進(jìn)行打分和點(diǎn)評(píng)，利用一對(duì)一的私密點(diǎn)評(píng)功能，讓每一位學(xué)生都能得到反饋。針對(duì)學(xué)生作業(yè)中出現(xiàn)仍然未掌握的技術(shù)難點(diǎn)，教師可以制作詳實(shí)的、更有針對(duì)性的短視頻上傳課程系統(tǒng)，幫助學(xué)生完全理解和掌握UI交互設(shè)計(jì)知識(shí)和技能。

三、UI交互設(shè)計(jì)課程采用微課教學(xué)的效果

（一）促進(jìn)了教師的信息化教學(xué)

UI交互設(shè)計(jì)課程順應(yīng)當(dāng)下市場(chǎng)對(duì)界面設(shè)計(jì)師的極度需求而生，相比較傳統(tǒng)的平面設(shè)計(jì)，不僅要處理平面的信息，還要處理多媒體界面和網(wǎng)絡(luò)視覺(jué)設(shè)計(jì)的內(nèi)容，教師必須自主學(xué)習(xí)如何使用微課等信息化教學(xué)手段上好這門(mén)課?？梢哉f(shuō)教師在制作微課和使用微課的過(guò)程中提高了信息化教學(xué)水平。

（二）激發(fā)了學(xué)生學(xué)習(xí)的自覺(jué)性與主動(dòng)性

因?yàn)閁I交互設(shè)計(jì)課程微課視頻和課件資料等是教師提前幾天甚至一周上傳的，學(xué)生可以很好地利用碎片化時(shí)間提前進(jìn)行預(yù)習(xí)，避免了因?yàn)檎n堂學(xué)習(xí)時(shí)間有限而難以在短短幾節(jié)課內(nèi)理解和掌握知識(shí)點(diǎn)的困境。同時(shí)，精彩優(yōu)秀案例的分析也大大激發(fā)了學(xué)生的學(xué)習(xí)興趣和主動(dòng)性，而且學(xué)生可以提前將自己對(duì)重難點(diǎn)的困惑反饋給教師，避免了傳統(tǒng)課堂教學(xué)課后反饋不及時(shí)的問(wèn)題。

（三）活躍了課堂氣氛

傳統(tǒng)課堂教學(xué)是教師的單向輸出為主，學(xué)生很少有機(jī)會(huì)參與討論和互動(dòng)，精力都集中在被動(dòng)聽(tīng)課上。而采用微課進(jìn)行教學(xué)，因?yàn)橥ㄟ^(guò)之前的預(yù)習(xí)已經(jīng)對(duì)本次課程內(nèi)容有一定的掌握，學(xué)生就有了自信，可以更多參與到教師設(shè)置的互動(dòng)和討論活動(dòng)中。教學(xué)實(shí)踐表明，不少優(yōu)秀活躍的學(xué)生是非常愿意參與到簡(jiǎn)短的基礎(chǔ)知識(shí)點(diǎn)的教學(xué)活動(dòng)中的，他們很是愿意擔(dān)任幾分鐘小老師的角色的。

（四）延伸和泛化了課本知識(shí)

傳統(tǒng)的課堂教學(xué)，老師往往只能在課程結(jié)束前對(duì)知識(shí)技能的延伸和泛化做點(diǎn)羅列，很少有機(jī)會(huì)跟進(jìn)。而通過(guò)信息化的教學(xué)手段，如教師可以制作泛化的課件或者微課視頻，在線發(fā)布到課程平臺(tái)以供學(xué)生參考學(xué)習(xí)。學(xué)生也可以將自己泛化的案例作品上傳課程平臺(tái)以供教師指導(dǎo)和評(píng)價(jià)[3]。

四、結(jié)束語(yǔ)

UI交互設(shè)計(jì)是一門(mén)對(duì)各類界面進(jìn)行優(yōu)化、規(guī)范和美化的設(shè)計(jì)科學(xué)，是人與機(jī)器、人與軟件傳遞和交換信息的媒介，用戶能否獲得滿意和愉悅的操作體驗(yàn)很大程度上決定著產(chǎn)品的成敗。因此，UI交互設(shè)計(jì)課程相比很多傳統(tǒng)的視覺(jué)課程而言，也對(duì)教師的教學(xué)能力提出了更高的要求，教師不僅要掌握UI交互設(shè)計(jì)的原理與方法，而且要善于利用微課等信息化教學(xué)手段，將UI交互設(shè)計(jì)課程上得有意思、可互動(dòng)和有時(shí)效。

參考文獻(xiàn)

[1] 張一春.微課建設(shè)研究與思考[J].中國(guó)教育網(wǎng)絡(luò)，2013，10（10）：28-31.

[2] 張晨起.Photoshop UI交互設(shè)計(jì)[M].人民郵電出版社，2018：1-6.

[3] 任璘.教師移動(dòng)教學(xué)能力提升策略研究：以微課教學(xué)資源建設(shè)為例[J].湖北開(kāi)放職業(yè)學(xué)院學(xué)報(bào)，2019，32（19）：152-153.