人機(jī)界面設(shè)計(jì)課程互動(dòng)式教學(xué)模式探索與實(shí)踐

宋 輝，舒新峰，謝 婷，張 磊

（西安郵電大學(xué) 計(jì)算機(jī)學(xué)院，陜西 西安 710121）

0 引言

人機(jī)界面設(shè)計(jì)是軟件設(shè)計(jì)的重要組成部分，經(jīng)過多年發(fā)展已經(jīng)成為一門以研究用戶與計(jì)算機(jī)關(guān)系為基本特征的獨(dú)立學(xué)科。近年來隨著高速互聯(lián)網(wǎng)應(yīng)用和移動(dòng)互聯(lián)網(wǎng)應(yīng)用的迅速發(fā)展和不斷推動(dòng)，用戶對(duì)應(yīng)用軟件界面友好性和個(gè)性化的要求越來越高，人機(jī)界面設(shè)計(jì)也因此成為產(chǎn)業(yè)界與學(xué)術(shù)界關(guān)注和研究的熱點(diǎn)。國內(nèi)外一些高校的計(jì)算機(jī)相關(guān)專業(yè)已經(jīng)將人機(jī)界面設(shè)計(jì)、人機(jī)交互設(shè)計(jì)等課程列入本科生培養(yǎng)方案中[1-3]。相關(guān)教師和一些學(xué)者對(duì)教學(xué)的組織和實(shí)施進(jìn)行了研究與探索[4-6]。由于該課程涉及的知識(shí)面廣、內(nèi)容新、實(shí)踐性和創(chuàng)新性強(qiáng)，按照傳統(tǒng)的教學(xué)模式進(jìn)行教學(xué)無法取得很好的教學(xué)效果[7-8]。針對(duì)這一問題，可以采用一種互動(dòng)式教學(xué)模式，通過在教學(xué)組織和教學(xué)實(shí)施中的多方面互動(dòng)，有效激發(fā)學(xué)生的學(xué)習(xí)興趣，充分發(fā)揮學(xué)生在學(xué)習(xí)中的主動(dòng)性和積極性，以取得良好的教學(xué)效果，與此同時(shí)也鍛煉和培養(yǎng)軟件工程專業(yè)認(rèn)證所要求的學(xué)生自主學(xué)習(xí)能力和將本領(lǐng)域新技術(shù)應(yīng)用于復(fù)雜工程問題解決方案中的能力。

1 互動(dòng)式教學(xué)模式

根據(jù)軟件工程專業(yè)培養(yǎng)方案[9]、軟件工程專業(yè)工程認(rèn)證對(duì)學(xué)生能力培養(yǎng)的要求[10]、教學(xué)大綱及教學(xué)目標(biāo)的要求，人機(jī)界面設(shè)計(jì)課程的教學(xué)內(nèi)容包括理論知識(shí)和實(shí)踐技術(shù)兩大部分。理論知識(shí)部分包括人機(jī)界面設(shè)計(jì)的起源和發(fā)展、人機(jī)界面設(shè)計(jì)的特點(diǎn)和設(shè)計(jì)原則、人機(jī)界面設(shè)計(jì)的過程和方法、人機(jī)界面設(shè)計(jì)的評(píng)價(jià)方式等。實(shí)踐技術(shù)包括桌面應(yīng)用軟件界面設(shè)計(jì)技術(shù)、桌面Web軟件界面設(shè)計(jì)技術(shù)和移動(dòng)Web軟件界面設(shè)計(jì)技術(shù)3方面內(nèi)容。課程的理論知識(shí)部分涉及工程學(xué)、美學(xué)、心理學(xué)相關(guān)知識(shí)；實(shí)踐技術(shù)部分涵蓋了C/S和B/S兩種模式下軟件界面設(shè)計(jì)從前端到后端的主流技術(shù)，因而整個(gè)課程的知識(shí)面非常廣、教學(xué)內(nèi)容和開發(fā)技術(shù)很新，并且對(duì)學(xué)生的實(shí)踐能力和創(chuàng)新能力要求較高。對(duì)于這樣的教學(xué)內(nèi)容和要求，如果按照傳統(tǒng)的教學(xué)模式進(jìn)行教學(xué)，學(xué)生在學(xué)習(xí)理論知識(shí)時(shí)往往會(huì)感覺抽象和枯燥；而在學(xué)習(xí)實(shí)踐技術(shù)時(shí)又不能很好地與理論相結(jié)合，從而影響學(xué)習(xí)效果，并且很難激發(fā)學(xué)生的學(xué)習(xí)興趣，促使學(xué)生自主自發(fā)學(xué)習(xí)?；?dòng)式教學(xué)模式課程教學(xué)組織及實(shí)施示意圖如圖1所示。圖中縱向箭頭表示教學(xué)實(shí)施過程中教師、學(xué)生和項(xiàng)目組這3個(gè)角色的活動(dòng)流程，橫向箭頭表示教師、學(xué)生和項(xiàng)目組這3個(gè)角色的各項(xiàng)活動(dòng)中的交互。

1.1 教學(xué)組織

圖1 互動(dòng)式教學(xué)模式課程教學(xué)組織及實(shí)施示意圖

教學(xué)內(nèi)容組織的總體思路是將理論知識(shí)的教學(xué)和實(shí)踐技術(shù)的教學(xué)進(jìn)行穿插，講理論知識(shí)時(shí)以實(shí)踐技術(shù)為載體，講實(shí)踐技術(shù)時(shí)以理論知識(shí)為支撐，形成兩方面互動(dòng)的模式。課程的教學(xué)組織首先從介紹人機(jī)界面設(shè)計(jì)的起源、發(fā)展和特點(diǎn)作為導(dǎo)入，給學(xué)生分析一些經(jīng)典的人機(jī)界面設(shè)計(jì)產(chǎn)品以及失敗的案例，讓學(xué)生對(duì)人機(jī)界面設(shè)計(jì)有一個(gè)宏觀和感性的認(rèn)識(shí)。學(xué)生在學(xué)習(xí)本課程之前已經(jīng)學(xué)習(xí)過了面向過程程序設(shè)計(jì)和面向?qū)ο蟪绦蛟O(shè)計(jì)的課程，具備了開發(fā)基本桌面軟件界面的技術(shù)。在導(dǎo)入內(nèi)容講解之后，教師指導(dǎo)學(xué)生對(duì)其前期設(shè)計(jì)的軟件界面進(jìn)行分析，指出設(shè)計(jì)中存在的缺點(diǎn)和不足，并以此引入人機(jī)界面設(shè)計(jì)應(yīng)遵循的普遍原則。人機(jī)界面設(shè)計(jì)的原則是課程理論知識(shí)的重點(diǎn)單元，如果只是常規(guī)的講解，會(huì)讓學(xué)生覺得空洞、流于形式和缺乏操作性；而當(dāng)學(xué)生意識(shí)到自己此前所設(shè)計(jì)軟件界面的缺陷后再進(jìn)行本部分內(nèi)容的講解，學(xué)生就會(huì)認(rèn)識(shí)到如果遵循這些設(shè)計(jì)原則，的確可以避免缺點(diǎn)并能改善自己此前的設(shè)計(jì)，從而很好地理解和接受這些理論知識(shí)。

課程接下來的安排是要求學(xué)生按照所學(xué)的設(shè)計(jì)原則對(duì)自己此前的界面設(shè)計(jì)進(jìn)行改進(jìn)，從而將理論應(yīng)用于實(shí)踐，更好地掌握和應(yīng)用所學(xué)理論知識(shí)。教師講解人機(jī)界面的評(píng)價(jià)方式。同樣也是在理論講解后，指導(dǎo)學(xué)生對(duì)自己改進(jìn)后的設(shè)計(jì)按照所學(xué)理論進(jìn)行評(píng)價(jià)，對(duì)于其中設(shè)計(jì)較好的部分予以肯定，對(duì)不符合設(shè)計(jì)原則和規(guī)范的部分提出改進(jìn)意見。通過這樣的理論與實(shí)踐相結(jié)合的互動(dòng)式學(xué)習(xí)，學(xué)生既能對(duì)理論知識(shí)有直觀和深刻的認(rèn)識(shí)，又能提高自己實(shí)際設(shè)計(jì)的能力和素養(yǎng)。

截至此時(shí)的教學(xué)安排，學(xué)生都是使用之前其他課程已經(jīng)學(xué)過的開發(fā)技術(shù)來進(jìn)行界面設(shè)計(jì)和改進(jìn)。課程將逐步講解桌面應(yīng)用軟件界面設(shè)計(jì)技術(shù)、桌面Web軟件界面設(shè)計(jì)和移動(dòng)Web軟件界面設(shè)計(jì)這3部分的內(nèi)容，其中重點(diǎn)是桌面Web軟件界面設(shè)計(jì)。每部分的教學(xué)組織也都是理論知識(shí)和實(shí)踐技術(shù)學(xué)習(xí)交互進(jìn)行。將每部分中需要講授的不同界面特點(diǎn)、具體設(shè)計(jì)原則、界面設(shè)計(jì)流程等理論知識(shí)點(diǎn)融入具體的設(shè)計(jì)技術(shù)和方法的講解中，要求學(xué)生按照講解進(jìn)行實(shí)踐練習(xí)，然后對(duì)于學(xué)生的作品進(jìn)行評(píng)價(jià)和反饋，又回到理論知識(shí)點(diǎn)上。理論知識(shí)與實(shí)踐技術(shù)互動(dòng)式學(xué)習(xí)的教學(xué)組織模式能夠很好地將人機(jī)界面設(shè)計(jì)課程的兩方面教學(xué)內(nèi)容有機(jī)結(jié)合起來，為取得良好的教學(xué)效果奠定基礎(chǔ)。

1.2 教學(xué)實(shí)施

為了更好地實(shí)施上述教學(xué)安排，同時(shí)激發(fā)學(xué)生的學(xué)習(xí)興趣，充分發(fā)揮學(xué)生在學(xué)習(xí)中的主動(dòng)性和積極性，人機(jī)界面設(shè)計(jì)課程的教學(xué)實(shí)施采用了互動(dòng)式項(xiàng)目小組學(xué)習(xí)方式，要求學(xué)生在一學(xué)期的學(xué)習(xí)過程中以項(xiàng)目小組的形式完成一個(gè)人機(jī)界面設(shè)計(jì)的實(shí)踐項(xiàng)目。在講解課程總的理論知識(shí)的同時(shí)，將所有學(xué)生分為5～6人的小組，每組選出一名組長。此后的日常上課、上機(jī)練習(xí)、課后作業(yè)和實(shí)踐項(xiàng)目都以小組形式進(jìn)行，由組長負(fù)責(zé)組織本小組的各項(xiàng)學(xué)習(xí)。項(xiàng)目小組成立后，教師會(huì)講解人機(jī)界面設(shè)計(jì)的流程和完成一個(gè)界面設(shè)計(jì)項(xiàng)目從立項(xiàng)啟動(dòng)、分析設(shè)計(jì)、實(shí)現(xiàn)評(píng)價(jià)到最終項(xiàng)目總結(jié)的全過程；并指導(dǎo)各個(gè)小組進(jìn)行項(xiàng)目選題、計(jì)劃安排、人員分工、資料查找和分析整理等工作。比如某小組項(xiàng)目選題是“影院票務(wù)管理系統(tǒng)”，教師就會(huì)指導(dǎo)該小組學(xué)生去附近影院通過現(xiàn)場(chǎng)調(diào)研影院工作人員和觀眾來收集用戶需求；對(duì)于不方便進(jìn)行現(xiàn)場(chǎng)調(diào)研的選題項(xiàng)目，教師會(huì)作為模擬用戶接受學(xué)生調(diào)研，以便學(xué)生能夠親身體會(huì)并完成需求調(diào)研和分析的環(huán)節(jié)。接下來，課程就進(jìn)入前述所說的桌面應(yīng)用軟件界面設(shè)計(jì)技術(shù)、桌面Web軟件界面設(shè)計(jì)和移動(dòng)Web軟件界面設(shè)計(jì)這3部分具體的設(shè)計(jì)技術(shù)和方法的講解和練習(xí)中。教師在課堂上講解主流的開發(fā)技術(shù)和方法，學(xué)生在課后通過完成作業(yè)和實(shí)踐項(xiàng)目進(jìn)行練習(xí)。由于界面設(shè)計(jì)尤其是Web界面設(shè)計(jì)中的新技術(shù)和新框架不斷涌現(xiàn)，教師要求學(xué)生在課外自主學(xué)習(xí)感興趣的新技術(shù)，并應(yīng)用于實(shí)踐項(xiàng)目的開發(fā)中。比如教師課堂上講授的前端開發(fā)技術(shù)是HTML、CSS（Bootstrap）、Javascript（JQuery）和Ajax，后端開發(fā)技術(shù)是Java Servlet，要求學(xué)生課后根據(jù)自己的興趣選擇學(xué)習(xí)ECMAScript、Vue和React等前端開發(fā)新技術(shù)及PHP、Python等不同的后端開發(fā)技術(shù)。這樣一方面可以拓展學(xué)生的視野，讓學(xué)生追蹤最新的技術(shù)發(fā)展趨勢(shì)，另一方面又鍛煉和培養(yǎng)在工程認(rèn)證中所強(qiáng)調(diào)的學(xué)生自主學(xué)習(xí)、不斷學(xué)習(xí)的能力以及通過各種平臺(tái)學(xué)習(xí)本領(lǐng)域最新發(fā)展技術(shù)并將其應(yīng)用于復(fù)雜工程問題的解決方案中的能力。

上述教學(xué)實(shí)施過程中的互動(dòng)主要體現(xiàn)在教師與學(xué)生的互動(dòng)和學(xué)生之間的互動(dòng)兩個(gè)方面。教師和學(xué)生之間的互動(dòng)以“引導(dǎo)”和“推動(dòng)”兩種形式進(jìn)行。課堂學(xué)習(xí)和上機(jī)實(shí)驗(yàn)時(shí)，教師提出預(yù)設(shè)的開放性問題，引導(dǎo)學(xué)生進(jìn)行多角度思考，組織小組內(nèi)學(xué)生的討論和交流，鼓勵(lì)學(xué)生進(jìn)行創(chuàng)新性思考和設(shè)計(jì)，并敢于表達(dá)自己的想法和體會(huì)。比如開放性問題包括“微信的界面設(shè)計(jì)和手機(jī)QQ的界面設(shè)計(jì)各有什么特點(diǎn)?還可以設(shè)計(jì)得更好嗎？”“如果你有機(jī)會(huì)設(shè)計(jì)新一代手機(jī)操作系統(tǒng)的界面，你會(huì)怎樣去設(shè)計(jì)?”“響應(yīng)式設(shè)計(jì)、扁平化設(shè)計(jì)、單頁面應(yīng)用設(shè)計(jì)等新的界面設(shè)計(jì)趨勢(shì)會(huì)帶來哪些弊端”等。這些問題沒有統(tǒng)一的標(biāo)準(zhǔn)答案，提問的目的在于引導(dǎo)學(xué)生進(jìn)行思考，鼓勵(lì)學(xué)生表達(dá)自己的觀點(diǎn)并與其他同學(xué)交流辯論，促進(jìn)學(xué)生進(jìn)行創(chuàng)新性設(shè)計(jì)等。另一方面，教師對(duì)學(xué)生的日常練習(xí)作業(yè)和項(xiàng)目設(shè)計(jì)進(jìn)行及時(shí)的反饋和評(píng)價(jià)，肯定其中好的方面，對(duì)不足之處提出改進(jìn)建議和意見，以推動(dòng)學(xué)生更好地完成作業(yè)和實(shí)踐項(xiàng)目。學(xué)生之間的互動(dòng)主要有小組內(nèi)互動(dòng)和小組間互動(dòng)兩種形式。每個(gè)小組內(nèi)各個(gè)學(xué)生的學(xué)習(xí)能力和設(shè)計(jì)能力各不相同，通過小組合作完成項(xiàng)目的方式，小組內(nèi)同學(xué)之間互相學(xué)習(xí)、互相幫助、互相督促，既完成了人機(jī)界面設(shè)計(jì)的練習(xí)，又訓(xùn)練了學(xué)生的交流溝通能力和團(tuán)隊(duì)合作能力。由于在項(xiàng)目完成后，每組學(xué)生都要向老師和全班其他同學(xué)演示其作品的設(shè)計(jì)效果并講解設(shè)計(jì)思路，并進(jìn)行公開打分，這使得一方面各小組之間存在著互相競(jìng)爭(zhēng)的氛圍，各小組之間在平時(shí)做作業(yè)時(shí)就會(huì)進(jìn)行互相對(duì)比、互相追趕；另一方面在作品演示時(shí)各小組學(xué)生又可以聽到其他小組的設(shè)計(jì)思路和體會(huì)，看到其他小組的設(shè)計(jì)效果，起到了互相交流和互相學(xué)習(xí)的作用。在小組之間互相評(píng)分過程中，學(xué)生會(huì)主動(dòng)地按照課堂上所學(xué)的人機(jī)界面設(shè)計(jì)原則和評(píng)價(jià)標(biāo)準(zhǔn)等知識(shí)來給其他組挑毛病，真正做到了學(xué)以致用，理論學(xué)習(xí)和實(shí)踐學(xué)習(xí)相結(jié)合。除了在小組內(nèi)互動(dòng)和小組間互動(dòng)，教師還鼓勵(lì)學(xué)生和其他專業(yè)的學(xué)生進(jìn)行交流，比如向藝術(shù)專業(yè)的同學(xué)學(xué)習(xí)美工設(shè)計(jì)和配色等知識(shí)，以使其作品更加美觀和專業(yè)。

最終在學(xué)期末，教師指導(dǎo)學(xué)生進(jìn)行項(xiàng)目總結(jié)和驗(yàn)收，各小組進(jìn)行作品演示和經(jīng)驗(yàn)分享，所有同學(xué)進(jìn)行自己本學(xué)期學(xué)習(xí)的總結(jié)，分析自己所完成作業(yè)和項(xiàng)目產(chǎn)品的得失，也以此作為對(duì)本課程所講授的所有理論知識(shí)和實(shí)踐技術(shù)內(nèi)容的總復(fù)習(xí)。通過這種在教學(xué)實(shí)施中的教師與學(xué)生的互動(dòng)和學(xué)生之間的互動(dòng)使得學(xué)生在一學(xué)期的學(xué)習(xí)中自始至終對(duì)課程的教學(xué)和作業(yè)練習(xí)和實(shí)踐項(xiàng)目保持著濃厚的興趣和積極的熱情，學(xué)生會(huì)自主自發(fā)地去進(jìn)行學(xué)習(xí)和練習(xí)，并樂于進(jìn)行創(chuàng)新性思考和探索，既能較好地實(shí)現(xiàn)教學(xué)目標(biāo)，又能培養(yǎng)學(xué)生各方面的工程實(shí)踐能力。

2 教學(xué)實(shí)踐及效果

人機(jī)界面設(shè)計(jì)課程目前已在我校軟件工程專業(yè)2014—2017級(jí)的23個(gè)班開設(shè)。教學(xué)中按照前述的互動(dòng)式教學(xué)模式實(shí)施并不斷調(diào)整完善。從課堂教學(xué)和實(shí)驗(yàn)教學(xué)的實(shí)施情況、學(xué)生完成的各項(xiàng)作業(yè)和實(shí)踐項(xiàng)目的實(shí)際效果、期末考試的成績和課程目標(biāo)的達(dá)成度來看，達(dá)到了預(yù)期的教學(xué)目標(biāo)，總體教學(xué)效果良好。教學(xué)組織中理論知識(shí)與實(shí)踐教學(xué)的穿插互動(dòng)有效解決了課程涉及的知識(shí)面廣、知識(shí)點(diǎn)多、內(nèi)容新因而難于組織教學(xué)內(nèi)容的問題。教學(xué)實(shí)施中學(xué)生與老師、學(xué)生與學(xué)生之間的互動(dòng)有效解決了課程實(shí)踐性和創(chuàng)新性強(qiáng)從而不易實(shí)施教學(xué)的問題。各項(xiàng)目小組學(xué)生對(duì)其設(shè)計(jì)作品的公開演示和評(píng)價(jià)打分更是激發(fā)了學(xué)生的學(xué)習(xí)興趣和高質(zhì)量完成作品的熱情。學(xué)生除了課堂學(xué)習(xí)和課內(nèi)上機(jī)之外，在課后還花了大量的時(shí)間自主查閱資料、收集和創(chuàng)作設(shè)計(jì)資源和設(shè)計(jì)模板、學(xué)習(xí)最新的設(shè)計(jì)技術(shù)和設(shè)計(jì)框架，獲益匪淺。

在課程結(jié)束后所有學(xué)生對(duì)課程的內(nèi)容、教學(xué)組織和自己的學(xué)習(xí)情況進(jìn)行了反饋。經(jīng)過統(tǒng)計(jì)，100%的學(xué)生都認(rèn)可人機(jī)界面設(shè)計(jì)課程是一門非常重要、非常有用的課程，通過課程的學(xué)習(xí)對(duì)于設(shè)計(jì)開發(fā)出友好的軟件界面和優(yōu)秀的軟件產(chǎn)品幫助很大，并且通過課程的學(xué)習(xí)對(duì)整個(gè)軟件設(shè)計(jì)流程、軟件用戶體驗(yàn)等都有了新的認(rèn)識(shí)。92%的學(xué)生認(rèn)為課程的教學(xué)內(nèi)容組織很好，教學(xué)和實(shí)驗(yàn)的方式適合，尤其是按照項(xiàng)目小組完成實(shí)踐項(xiàng)目的學(xué)習(xí)方式對(duì)他們能力的提高幫助很大、自己收獲很多。有些小組在學(xué)期末的作品演示時(shí)專門制作了自己本學(xué)期設(shè)計(jì)能力成長軌跡的PPT，在其中回顧和展示了一學(xué)期來其設(shè)計(jì)的作品如何從最初的粗糙和不規(guī)范逐漸改進(jìn)，到最后達(dá)到了符合設(shè)計(jì)原則的友好美觀的界面設(shè)計(jì)全過程，總結(jié)了學(xué)習(xí)的收獲和成長的體會(huì)，表示經(jīng)過一學(xué)期的學(xué)習(xí)自己在界面設(shè)計(jì)的各個(gè)方面都取得了很大的進(jìn)步。此外，在本課程結(jié)束以后的軟件工程課程設(shè)計(jì)中，學(xué)生就充分使用了本課程所學(xué)的知識(shí)和技術(shù)，通過良好的界面設(shè)計(jì)使得最終完成軟件的可用性及質(zhì)量比之前課程設(shè)計(jì)所完成軟件有了很大的提高。以上這些成果都說明了在課程教學(xué)中采用的互動(dòng)式教學(xué)模式是有效和成功的。

3 結(jié)語

人機(jī)界面設(shè)計(jì)課程作為一門新興課程，其教學(xué)內(nèi)容涉及的知識(shí)面廣、開發(fā)技術(shù)新，課程的實(shí)踐性和創(chuàng)新性強(qiáng)。針對(duì)課程的特點(diǎn)和工程認(rèn)證的要求，互動(dòng)式教學(xué)模式在教學(xué)組織中將理論知識(shí)教學(xué)與實(shí)踐教學(xué)進(jìn)行穿插和互動(dòng)；在教學(xué)實(shí)施中通過教師與學(xué)生的互動(dòng)和學(xué)生之間的互動(dòng)完成教學(xué)、實(shí)驗(yàn)和實(shí)踐項(xiàng)目練習(xí)。通過教學(xué)組織和教學(xué)實(shí)施兩個(gè)方面的互動(dòng)，極大地提高了學(xué)生的學(xué)習(xí)興趣，充分發(fā)揮學(xué)生在學(xué)習(xí)中的主動(dòng)性和積極性，促使學(xué)生自主自發(fā)進(jìn)行學(xué)習(xí)和練習(xí)，并進(jìn)行創(chuàng)新性思考和探索。4年來的教學(xué)效果和學(xué)生反饋表明了該教學(xué)模式是有效可行的。后續(xù)的教學(xué)中還將嘗試將慕課、微課和翻轉(zhuǎn)課堂等教學(xué)手段和互動(dòng)式教學(xué)模式結(jié)合起來，以期進(jìn)一步豐富教學(xué)形式，鼓勵(lì)學(xué)生積極參與并更好地進(jìn)行互動(dòng)。