ADDPS教學(xué)模型在“UI交互設(shè)計(jì)”課程中的應(yīng)用研究

李莉 陳樹菁

摘要：為達(dá)到人才培養(yǎng)目標(biāo)，采取合適的教學(xué)方法和選取適合的教學(xué)內(nèi)容非常重要。本文分析了ADDPS教學(xué)模型在“UI交互設(shè)計(jì)”課程中的應(yīng)用，在設(shè)計(jì)課程時(shí)，將知識點(diǎn)與學(xué)生的興趣相結(jié)合，采用線上、線下、翻轉(zhuǎn)課堂等多種教學(xué)方法和多維度、多層次的考評方式，按照互聯(lián)網(wǎng)公司架構(gòu)的角色分配任務(wù)，學(xué)生根據(jù)角色定位完成項(xiàng)目和課程的學(xué)習(xí)。經(jīng)過幾輪教學(xué)實(shí)施，該方法不僅調(diào)動了學(xué)生的學(xué)習(xí)創(chuàng)造力，也驅(qū)動了教師的自我進(jìn)步，教學(xué)相長，師生共進(jìn)。

關(guān)鍵詞：ADDPS教學(xué)模型；UI交互設(shè)計(jì)；混合式教學(xué)

引言

教育部提出的開展一流本科教育，實(shí)施“新工科、新醫(yī)科、新農(nóng)科和新文科”建設(shè)，是加快推進(jìn)教育現(xiàn)代化、實(shí)現(xiàn)高等教育內(nèi)涵式發(fā)展的重要舉措，對高校學(xué)科建設(shè)而言，在于面向科技創(chuàng)新、產(chǎn)業(yè)升級需求的學(xué)科融合發(fā)展理念。“四新”建設(shè)與學(xué)科專業(yè)優(yōu)化、創(chuàng)新能力提高、產(chǎn)學(xué)研用融合、時(shí)代新人培養(yǎng)有著緊密的聯(lián)系[1]。

教有法而無定法，最有效的方法是因材施法。面對競爭日趨激烈的互聯(lián)網(wǎng)市場和全棧型開發(fā)人員的大量涌現(xiàn)，前端設(shè)計(jì)師在整個(gè)IT設(shè)計(jì)行業(yè)中迎來了新的挑戰(zhàn)[2]。因此，在當(dāng)前教學(xué)和市場互為依存的環(huán)境下，針對創(chuàng)新型、實(shí)踐型課程，探索適合此課程的教學(xué)方法，應(yīng)是每一位教師不懈的追求和堅(jiān)持。

“UI交互設(shè)計(jì)”是一門實(shí)用性強(qiáng)的交叉性綜合課程，交叉學(xué)科的合作以及教育創(chuàng)新性的重要性不言而喻[3]。目前，在計(jì)算機(jī)專業(yè)相關(guān)課程的教學(xué)過程中，一般只注重理論和內(nèi)容的講解，忽略了學(xué)習(xí)者對于學(xué)習(xí)內(nèi)容的興趣和動機(jī)，也就是說，在教學(xué)方式上只注重技能的培養(yǎng)，而忽略了對學(xué)生創(chuàng)造力與創(chuàng)新的培養(yǎng)。運(yùn)用適合課程的教學(xué)模式的意義在于注重學(xué)生的差異化與個(gè)性化，教學(xué)內(nèi)容與環(huán)境相依相存，既驅(qū)動了教師的自我進(jìn)步，也觸發(fā)學(xué)生的學(xué)習(xí)力，契合專業(yè)人才培養(yǎng)的目標(biāo)[4-5]。

1. ADDPS教學(xué)模型構(gòu)建與教學(xué)設(shè)計(jì)

通過教學(xué)過程實(shí)踐與摸索，采用“教學(xué)相長，知識點(diǎn)融入學(xué)生興趣中，多層次多維度考評，邊教邊學(xué)，邊學(xué)邊教，師生共進(jìn)”的教學(xué)理念。例如，通過實(shí)戰(zhàn)項(xiàng)目“繪制QQ完整交互原型圖”和“XX招聘”網(wǎng)站實(shí)例，將知識點(diǎn)與學(xué)生關(guān)注點(diǎn)相結(jié)合。另外，通過小組合作完成帶有思政元素的課程作業(yè)設(shè)計(jì)，將知識點(diǎn)與社會情感元素相融，構(gòu)建“思政+文化+藝術(shù)+科技”融合創(chuàng)新的設(shè)計(jì)教學(xué)理念。采用學(xué)生自評、互評、競評以及師評結(jié)合的多維度考評方式，采用線上、線下等多種教學(xué)方法，實(shí)現(xiàn)基于ADDPS模型的混合式教學(xué)模式，如圖1所示。

本文以ADDPS模型在“UI交互設(shè)計(jì)”課程中的應(yīng)用為例，圍繞教學(xué)大綱，確定知識點(diǎn)，通過分析（analysis）知識點(diǎn)，設(shè)計(jì)（design）課程內(nèi)容，開發(fā)（development）學(xué)生思維，在參與式學(xué)習(xí)環(huán)節(jié)（participatory learning）挖掘課程社會性元素，調(diào)動學(xué)生興趣，使之融入。通過驅(qū)動式案例教學(xué)和對應(yīng)知識點(diǎn)的講解，完成參與式學(xué)習(xí)環(huán)節(jié)。通過總結(jié)（summary）反思課程內(nèi)容，檢驗(yàn)課程學(xué)習(xí)的效果。最終，課程總評通過多層次多維度的考評方式，鍛煉學(xué)生對自我的客觀認(rèn)知、自主學(xué)習(xí)、設(shè)計(jì)創(chuàng)新、溝通協(xié)調(diào)能力。通過混合式教學(xué)設(shè)計(jì)和教學(xué)內(nèi)容相結(jié)合，進(jìn)行教學(xué)模式的新探索，發(fā)展出的“ADDPS混合式”教學(xué)模型，既提高了學(xué)生的學(xué)習(xí)興趣，也驅(qū)動了教師的自我進(jìn)步。

2. ADDPS模型的教學(xué)改革應(yīng)用

2.1 分析（analysis）知識點(diǎn)，提煉學(xué)習(xí)內(nèi)容

教師簡述網(wǎng)站項(xiàng)目全流程，也就是項(xiàng)目整體工作，在此基礎(chǔ)上，介紹設(shè)計(jì)師工作全流程，幫助學(xué)生了解學(xué)什么、怎么學(xué)，學(xué)完后會達(dá)到什么樣的效果，使學(xué)生清晰教學(xué)的每一步規(guī)劃。

每一個(gè)知識點(diǎn)通過設(shè)計(jì)分析，使學(xué)生明白該知識點(diǎn)的作用或目標(biāo)，通過何種方式，如何實(shí)現(xiàn)。例如，在“Axure RP設(shè)計(jì)規(guī)范”這一章中，教師需要介紹Axure基本操作——元件交互編輯這一功能，可以通過常用的程序如QQ或微信，向?qū)W生展示小程序的交互行為如何用元件交互編輯這一功能來實(shí)現(xiàn)。在此過程中，引導(dǎo)學(xué)生客觀看待和正確理解“交互”概念，通過介紹交互設(shè)計(jì)思維及工具，明白交互的實(shí)用功能和存在意義，以此激發(fā)學(xué)生的學(xué)習(xí)動機(jī)。

此階段嵌套“ADDPS專題式”案例訓(xùn)練，根據(jù)要求找出研究對象及需求（分析）、設(shè)計(jì)方案（設(shè)計(jì)）、重塑問題（發(fā)展）、完成課堂主體環(huán)節(jié)（參與式學(xué)習(xí)）、評估結(jié)果（總結(jié)），在此過程中，教師可以參與學(xué)生在小專題實(shí)例階段的自測。

隨著每堂課知識點(diǎn)的開啟，教師明確專題范圍，學(xué)生分組成隊(duì)，由小組自行擬定專題方向；進(jìn)行目標(biāo)人群分析和功能需求分析，形成項(xiàng)目方案和項(xiàng)目設(shè)計(jì)風(fēng)格定位；根據(jù)任務(wù)分配文檔，劃定責(zé)任人，確定時(shí)間節(jié)點(diǎn)；進(jìn)入實(shí)施階段；最后進(jìn)行評估和總結(jié)。

2.2 設(shè)計(jì)（design）課程內(nèi)容，研究怎么學(xué)

項(xiàng)目驅(qū)動式教學(xué)為專題學(xué)習(xí)小組提供相應(yīng)的設(shè)計(jì)流程訓(xùn)練。依托專題項(xiàng)目，以設(shè)計(jì)思維和設(shè)計(jì)流程訓(xùn)練為主要目的，依據(jù)UI設(shè)計(jì)的流程，引導(dǎo)學(xué)生完成相關(guān)任務(wù)。學(xué)生通過角色定位，完成和配合角色間的連接，逐步累積設(shè)計(jì)項(xiàng)目的實(shí)戰(zhàn)經(jīng)驗(yàn)，培養(yǎng)設(shè)計(jì)思維和設(shè)計(jì)實(shí)踐能力以及團(tuán)隊(duì)合作能力。以專題訓(xùn)練設(shè)計(jì)求職網(wǎng)站為例，在教學(xué)設(shè)計(jì)上，教師首先要讓學(xué)生明白項(xiàng)目的整體工作內(nèi)容，明確有哪些是需要設(shè)計(jì)師參與或者完成的部分。明確了設(shè)計(jì)師工作流程后，學(xué)生開始具體實(shí)施工作。學(xué)生可以使用任何方式來完成各項(xiàng)任務(wù)，如負(fù)責(zé)前期調(diào)研的學(xué)生可以采用線上或線下調(diào)研的方式，教師可以對調(diào)研策略、研究方法和工具使用等情況給予指導(dǎo)；對于負(fù)責(zé)架構(gòu)設(shè)計(jì)和原型設(shè)計(jì)的學(xué)生，他們需要明白自己的任務(wù)，通過自己的定位角色去完成相應(yīng)的任務(wù)，再與前一個(gè)流程的同學(xué)進(jìn)行工作配合，使項(xiàng)目能夠完整有序地進(jìn)行。在這個(gè)過程中，教師可以講授學(xué)生所需要的一些技能，也可以通過學(xué)生匯報(bào)總結(jié)的方式帶領(lǐng)學(xué)生進(jìn)入情境。

2.3 開發(fā)（development）學(xué)生思維

在此階段，需要學(xué)生具備宏觀掌控能力和思維能力，將前期的工作成果轉(zhuǎn)化為實(shí)體?！皩W(xué)而不思則罔，思而不學(xué)則殆”，只有處理好正確的學(xué)思關(guān)系，才有利于培養(yǎng)學(xué)生的創(chuàng)造性思維。教師一方面講解該階段的理論知識點(diǎn)，另一方面也需要從其他角度來激發(fā)學(xué)生的思維活力[6]。

在具體的專題訓(xùn)練中，可以以問題引導(dǎo)學(xué)生來檢驗(yàn)他們的設(shè)計(jì)思想和內(nèi)容，也可以從不同角度或扮演不同的角色來拓展學(xué)生的認(rèn)知和思維，如用戶、甲方、開發(fā)者、程序員的角色等。教師引導(dǎo)學(xué)生從多角度、多層面思考問題，鼓勵(lì)他們主動提問、探索和發(fā)現(xiàn)問題，運(yùn)用工具梳理問題、展開思維，結(jié)合跨學(xué)科知識，以此培養(yǎng)學(xué)生的綜合思維能力，拓展思維的廣度和深度。

各學(xué)習(xí)小組自擬主題，在一些具體細(xì)節(jié)和處理方式上會有所不同，針對不同的項(xiàng)目情境，需要延伸不同方向和拓展內(nèi)容，通過教師的引導(dǎo)和方法介紹、角色代入等方式，尋求問題解決方案，進(jìn)而確保項(xiàng)目研究的方向按專題計(jì)劃執(zhí)行[7]。

2.4 參與式學(xué)習(xí)（participatory learning），結(jié)合需求的交叉學(xué)科及工具運(yùn)用

對于實(shí)施制作階段，UI設(shè)計(jì)師應(yīng)該緊緊圍繞“功能”進(jìn)行原型設(shè)計(jì)和界面制作，再精致的界面如果脫離了“功能”，就是華而不實(shí)，既違背了教學(xué)目標(biāo)，也會使項(xiàng)目處于“難產(chǎn)”狀態(tài)，更談不上給予用戶使用時(shí)的愉悅感。

該階段需要學(xué)生通過角色定位滲入互聯(lián)網(wǎng)的工作崗位職能。在此過程中，既要體現(xiàn)學(xué)生的技能水平，又需要學(xué)生具備足夠的交叉學(xué)科的綜合知識能力。只有技術(shù)和創(chuàng)新的相互結(jié)合才能使設(shè)計(jì)回歸到真實(shí)功能需求，從視覺角度、交互角度和用戶滿意三個(gè)角度給予學(xué)生相應(yīng)的訓(xùn)練，讓學(xué)生明白作為前端設(shè)計(jì)師能夠獨(dú)立地完成項(xiàng)目的構(gòu)思導(dǎo)圖，實(shí)現(xiàn)線框圖，設(shè)計(jì)出視覺稿，寫出前端代碼，完成動效（JS/jQuery等），獨(dú)立完成設(shè)計(jì)和設(shè)計(jì)相關(guān)的部分。因此懂交互、懂產(chǎn)品、懂點(diǎn)代碼是一個(gè)UI設(shè)計(jì)師必備的知識技能，也是確保課題順利進(jìn)行的基本保障[8-9]。

2.5 總結(jié)（summary）課程過程，促進(jìn)課程學(xué)習(xí)效果的提升

總結(jié)每一個(gè)知識點(diǎn)及作業(yè)練習(xí)，通過學(xué)生自評、互評、反思及教師講評等方式及時(shí)關(guān)注學(xué)生的學(xué)習(xí)動態(tài)，一方面可以提高學(xué)生的思維能力，另一方面教師也能實(shí)時(shí)檢測和反饋教學(xué)狀態(tài)，做到邊教邊學(xué)、邊學(xué)邊教。通過多種教學(xué)方式，定向特定的教學(xué)內(nèi)容，多層次多角度評估學(xué)習(xí)效果，提升學(xué)生的思維能力，適應(yīng)復(fù)雜多變的社會環(huán)境，實(shí)現(xiàn)學(xué)生的差異化成長需求，既提高了學(xué)生的學(xué)習(xí)能力和自我肯定，也鞭策了教師的內(nèi)驅(qū)力。

3. 教學(xué)效果分析

ADDPS教學(xué)模型在經(jīng)過四輪的教學(xué)實(shí)施中逐步走向完善。在參與式學(xué)習(xí)中采用線上線下相結(jié)合的方式，學(xué)生以興趣和個(gè)人目標(biāo)為依據(jù)組建專題小組，通過平時(shí)練習(xí)、小組專題作業(yè)，在每個(gè)崗位職能環(huán)節(jié)通過學(xué)生自評總結(jié)、競評互評模式，提高學(xué)生的參與度和合作能力。

從2019年到2023年每個(gè)學(xué)年的第2學(xué)期開設(shè)此課，這四個(gè)學(xué)期的學(xué)生成績統(tǒng)計(jì)情況如表1所示，各分?jǐn)?shù)段成績比例分析如圖2所示，從中可以看出學(xué)生成績呈正態(tài)分布，學(xué)生平均分呈逐漸向上趨勢，良好成績比率增長較為明顯，教學(xué)效果有較明顯反映。

在實(shí)際的教學(xué)探索過程中，ADDPS模型充分結(jié)合課程自身特點(diǎn)以及實(shí)際工作崗位角色的定位，對標(biāo)前端課程，充分挖掘?qū)W生的興趣與特點(diǎn)，將課程思維元素融入課堂案例、作業(yè)項(xiàng)目中。一方面，多維度的考核方式，在實(shí)現(xiàn)學(xué)生個(gè)人成長和目標(biāo)的同時(shí)，激發(fā)了學(xué)生思維的廣度和深度，培養(yǎng)學(xué)生的創(chuàng)造力；另一方面，也能及時(shí)了解學(xué)生的反饋，提高學(xué)生滿意度。通過線上發(fā)布問卷調(diào)查、組織學(xué)生進(jìn)行自評和互評的方式，從不同角度收集對課程設(shè)計(jì)的反饋，包括對課程內(nèi)容的設(shè)計(jì)、授課的方式方法、多層次性的考核評價(jià)方式等方面，在開展課程的同時(shí)，充分收集學(xué)生的意見，適時(shí)調(diào)整，拓展學(xué)生創(chuàng)造性思維，提高學(xué)生對課程設(shè)計(jì)的滿意度。

結(jié)語

“UI交互設(shè)計(jì)”課程以培養(yǎng)學(xué)生設(shè)計(jì)思想、交互思維、創(chuàng)新思想，使學(xué)生具備UI設(shè)計(jì)方案的能力，掌握設(shè)計(jì)方案質(zhì)量分析和控制能力為教學(xué)目標(biāo)。該課程是一門實(shí)用性強(qiáng)的交叉性綜合學(xué)科，與“新工科”建設(shè)理念相一致。在應(yīng)用型高校教學(xué)改革的當(dāng)下，在教學(xué)過程中使用ADDPS教學(xué)模型，與時(shí)俱進(jìn)的教學(xué)內(nèi)容和跨學(xué)科的綜合知識體系將支持課程建設(shè)和專業(yè)培養(yǎng)，建成教師、學(xué)生、市場為一體、可共享的課程教案。針對“新工科”建設(shè)要求，以提高網(wǎng)頁設(shè)計(jì)人才的設(shè)計(jì)能力、創(chuàng)新能力和專業(yè)能力為原則，企業(yè)導(dǎo)師參與人才培養(yǎng)實(shí)施環(huán)節(jié)，實(shí)戰(zhàn)項(xiàng)目融合到教學(xué)過程，學(xué)生參與項(xiàng)目開發(fā)實(shí)訓(xùn)，產(chǎn)教融合，加快培養(yǎng)綜合型科技人才，實(shí)現(xiàn)從學(xué)科導(dǎo)向轉(zhuǎn)向產(chǎn)業(yè)需求導(dǎo)向、從專業(yè)分割轉(zhuǎn)向跨界交叉融合，理論學(xué)習(xí)與實(shí)踐應(yīng)用互為一體的學(xué)習(xí)模式。

參考文獻(xiàn)：

[1]馬陸亭.新工科、新醫(yī)科、新農(nóng)科、新文科——從教育理念到范式變革[J].中國高等教育，2022（12）：9-11.

[2]黃啟駿.UI設(shè)計(jì)的交互性與界面視覺設(shè)計(jì)研究[J].數(shù)字通信世界，2022（9）：56-58.

[3]李莉，李華.BOPPPS教學(xué)模型在UI交互設(shè)計(jì)中的應(yīng)用研究[J].福建電腦，2022，38（1）：36-39.

[4]羊力超.“UI設(shè)計(jì)”課程中交互思維的分析與探究[J].無線互聯(lián)科技，2021，18（7）： 146-147.

[5]朱世敏，盛娟，王巖，等.基于移動學(xué)習(xí)的BOPPPS對分課堂教學(xué)研究與實(shí)踐——以“C語言程序設(shè)計(jì)”課程為例[J].工業(yè)和信息化教育，2021（1）：67-71.

[6]林婷婷.建構(gòu)“ADDIE專題式”教學(xué)模型的實(shí)踐應(yīng)用——以交互設(shè)計(jì)方法教學(xué)改革為例[J].中國現(xiàn)代教育報(bào)，2020（23）：101-104.

[7]陳心雨.UI設(shè)計(jì)課程中交互思維的分析與探究[J].設(shè)計(jì)，2020，33（3）：76-77.

[8]梁丹丹.視覺傳達(dá)設(shè)計(jì)在移動UI界面中的運(yùn)用[J].計(jì)算機(jī)產(chǎn)品與流通，2020（8）：248，255.

[9]賈爾斯·科爾伯恩（英）.簡約至上：交互式設(shè)計(jì)四策略[M].北京：人民郵電出版社，2011.

作者簡介：李莉，碩士研究生，高級工程師，研究方向：數(shù)字媒體技術(shù)、圖像處理；陳樹菁，本科在讀，研究方向：數(shù)字媒體技術(shù)。

課題項(xiàng)目：教育部產(chǎn)學(xué)合作協(xié)同育人項(xiàng)目——新工科背景下“UI設(shè)計(jì)”課程體系建設(shè)和教學(xué)內(nèi)容改革研究（編號：230802279031815）。