人機界面設計課程互動式教學模式探索與實踐

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

（西安郵電大學 計算機學院，陜西 西安 710121）

0 引言

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

1 互動式教學模式

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

1.1 教學組織

圖1 互動式教學模式課程教學組織及實施示意圖

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

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

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

1.2 教學實施

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

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

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

2 教學實踐及效果

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

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

3 結語

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