基于巴特勒學(xué)習(xí)模式的《UI設(shè)計(jì)》課程混合式教學(xué)研究

廣東培正學(xué)院藝術(shù)學(xué)院 李軍燕

1 相關(guān)概念解析

1.1 巴特勒學(xué)習(xí)模式的定義

美國教育心理學(xué)家卡特·巴特勒（S.Kent Butler）在20世紀(jì)70年代依據(jù)信息加工理論，提出基本教學(xué)程序的七個步驟[1]，被稱為巴特勒學(xué)習(xí)模式。巴特勒學(xué)習(xí)模式要求教師在課程設(shè)計(jì)上運(yùn)用元認(rèn)知的策略，即提前設(shè)定課程計(jì)劃、實(shí)時進(jìn)行課程反饋與反思、實(shí)時調(diào)節(jié)學(xué)習(xí)過程，讓學(xué)生自主認(rèn)知學(xué)習(xí)過程的策略。同時，巴特勒學(xué)習(xí)模式強(qiáng)調(diào)學(xué)生對課程進(jìn)行反思，教師平衡各階段教學(xué)側(cè)重點(diǎn)，建立課程與課程之間承上啟下的平臺，讓學(xué)生不斷地對學(xué)習(xí)任務(wù)進(jìn)行加工，最后生成屬于學(xué)生自己的學(xué)習(xí)成果。

巴特勒學(xué)習(xí)模式的基本教學(xué)程序是：設(shè)置情境、激發(fā)動機(jī)、組織教學(xué)、應(yīng)用新知、檢測評價、鞏固練習(xí)以及拓展與遷移[2]。七個步驟循序漸進(jìn)，教師根據(jù)學(xué)習(xí)任務(wù)創(chuàng)建教學(xué)情境，制定學(xué)習(xí)任務(wù)激發(fā)學(xué)生學(xué)習(xí)欲望，學(xué)生通過合作學(xué)習(xí)對新舊知識進(jìn)行加工完成專案任務(wù)，教師建立評審機(jī)制對學(xué)生完成的專案任務(wù)進(jìn)行評判，學(xué)生結(jié)合教師意見對所學(xué)知識進(jìn)行反思內(nèi)化，并結(jié)合相關(guān)任務(wù)點(diǎn)進(jìn)行知識的拓展與遷移，掌握新知識的同時實(shí)現(xiàn)知識的疊加與創(chuàng)新。巴特勒學(xué)習(xí)模式是從實(shí)踐到認(rèn)知再到實(shí)踐的學(xué)習(xí)過程，教師通過巴特勒學(xué)習(xí)模式對課程進(jìn)行建立與設(shè)計(jì)，學(xué)生通過巴特勒學(xué)習(xí)模式來達(dá)到對課程的全方位學(xué)習(xí)與掌握。

1.2 混合式教學(xué)模式的定義

混合式教學(xué)模式，主要指的是將課堂教學(xué)與網(wǎng)絡(luò)教學(xué)相結(jié)合的線上線下新型授課模式。該教學(xué)模式將教師的面授與網(wǎng)絡(luò)的授課相互融合，學(xué)習(xí)過程淺入深出，由表及里，學(xué)用結(jié)合，深度學(xué)習(xí)?；旌鲜浇虒W(xué)模式利用在線網(wǎng)絡(luò)平臺進(jìn)行時空搭建，在線上，對學(xué)習(xí)知識進(jìn)行講解，讓學(xué)生在不受時間與空間的限制下掌握知識重點(diǎn)難點(diǎn)；在線下，教師對學(xué)生進(jìn)行相應(yīng)的教學(xué)活動設(shè)計(jì)，從而對所學(xué)知識進(jìn)行檢驗(yàn)、鞏固、內(nèi)化，將理論運(yùn)用到實(shí)踐當(dāng)中?；旌鲜浇虒W(xué)模式更加偏向于學(xué)生進(jìn)行知識的深度理解與多維發(fā)散，將線上與線下相互結(jié)合，不僅能豐富教師的課程設(shè)計(jì)，而且還能提升學(xué)生知識掌握的深度與廣度[3]。

2 《UI設(shè)計(jì)》課程教學(xué)目標(biāo)

1）知識目標(biāo)。通過學(xué)習(xí)《UI設(shè)計(jì)》課程，使學(xué)生了解UI設(shè)計(jì)的特征、發(fā)展?fàn)顩r、前沿動態(tài)與所要求的核心能力。課程內(nèi)容涵蓋了交互設(shè)計(jì)、設(shè)計(jì)心理學(xué)、動效設(shè)計(jì)、平面設(shè)計(jì)、數(shù)據(jù)分析等知識，學(xué)生運(yùn)用相關(guān)UI設(shè)計(jì)理論，遵循UI設(shè)計(jì)規(guī)范，以工匠精神追求精益求精，使他們更好地服務(wù)社會、服務(wù)大眾，提升行業(yè)水平。

2）能力目標(biāo)。課程要求學(xué)生了解與熟悉新媒體藝術(shù)設(shè)計(jì)下的產(chǎn)品界面設(shè)計(jì)，遵循相關(guān)設(shè)計(jì)規(guī)范，掌握設(shè)計(jì)原理，以便更好地設(shè)計(jì)出符合用戶需求與市場需求的UI設(shè)計(jì)作品。

3）育人目標(biāo)。課程注重引導(dǎo)學(xué)生將民族特色經(jīng)典設(shè)計(jì)與當(dāng)代潮流相結(jié)合，推陳出新，展示民族文化魅力，增強(qiáng)民族文化自信，提升對地域特色文化設(shè)計(jì)的認(rèn)同感，并體現(xiàn)“以人為本”“以用戶為中心”的設(shè)計(jì)理念[4]。

3 基于巴特勒學(xué)習(xí)模式的《UI設(shè)計(jì)》課程混合式教學(xué)思路

巴特勒學(xué)習(xí)模式是依據(jù)信息加工理論，利用學(xué)習(xí)策略對學(xué)習(xí)任務(wù)進(jìn)行加工，最后生成學(xué)習(xí)成果[5]。《UI設(shè)計(jì)》課程采用理論教學(xué)與實(shí)踐教學(xué)相結(jié)合的教學(xué)思路，參照巴特勒學(xué)習(xí)模式，以專案項(xiàng)目的形式進(jìn)行教學(xué)實(shí)踐。

3.1 設(shè)置情境即專案項(xiàng)目制定

課程設(shè)立的專案項(xiàng)目是讓學(xué)生以三到四個人為一組，自選一款市面上已上架的軟件產(chǎn)品進(jìn)行迭代設(shè)計(jì)，該專案項(xiàng)目的系統(tǒng)設(shè)計(jì)要求是：為Android系統(tǒng)或iOS系統(tǒng)下的手機(jī)端軟件產(chǎn)品進(jìn)行迭代設(shè)計(jì)。要求學(xué)生通過交互思維對所選的軟件產(chǎn)品進(jìn)行分析與研究，通過產(chǎn)品分析、商業(yè)與用戶需求分析、競品分析、用戶建模、故事板繪制等進(jìn)行前期流程的梳理與整合，對所選迭代軟件產(chǎn)品進(jìn)行圖標(biāo)設(shè)計(jì)、界面設(shè)計(jì)、手勢設(shè)計(jì)以及動效設(shè)計(jì)，進(jìn)一步提升與改進(jìn)所選迭代軟件產(chǎn)品的核心功能，最終形成一份“軟件產(chǎn)品詳細(xì)迭代設(shè)計(jì)報(bào)告”。

3.2 激發(fā)動機(jī)即角色扮演

學(xué)生在專案項(xiàng)目中進(jìn)行雙重角色扮演，既作為需求方進(jìn)行專案要求制定，對相關(guān)迭代產(chǎn)品進(jìn)行核心功能的分析；又作為設(shè)計(jì)方進(jìn)行專案項(xiàng)目實(shí)施，通過用戶研究對界面進(jìn)行設(shè)計(jì)迭代，進(jìn)一步強(qiáng)調(diào)產(chǎn)品的核心功能。在此過程中，學(xué)生通過對自身的了解與關(guān)注，以及自我認(rèn)知下的設(shè)計(jì)構(gòu)思，將其進(jìn)行具象文字轉(zhuǎn)述，以此制定專案需求。學(xué)生結(jié)合專案需求進(jìn)行相關(guān)項(xiàng)目設(shè)計(jì)，角色間進(jìn)行切換，讓學(xué)生從多個角度理解與掌握UI設(shè)計(jì)的核心內(nèi)容。

3.3 組織教學(xué)即搭建課程與課程間的橋梁

在學(xué)習(xí)課程的前期，會對《數(shù)字媒體藝術(shù)概論》《設(shè)計(jì)概論》《版式設(shè)計(jì)》《交互設(shè)計(jì)》等課程進(jìn)行回顧與整合，建立起課程與課程之間的聯(lián)系。以第一章“UI設(shè)計(jì)本體”為例（如圖1），該章節(jié)從用戶界面設(shè)計(jì)這一主題出發(fā)講解UI設(shè)計(jì)的本體，正確理解界面設(shè)計(jì)與用戶界面設(shè)計(jì)兩者的概念，并詳細(xì)講解UI設(shè)計(jì)的構(gòu)成要素。學(xué)生在學(xué)習(xí)本章內(nèi)容時會對UI設(shè)計(jì)產(chǎn)品的界面有大體的框架了解，但需要清楚地區(qū)分界面設(shè)計(jì)與用戶界面設(shè)計(jì)的不同。通過本次課程，學(xué)生可以合理地將前期的交互設(shè)計(jì)思維與UI設(shè)計(jì)基本流程相結(jié)合，對現(xiàn)有產(chǎn)品進(jìn)行用戶需求的把握以及商業(yè)需求的延伸，更好地理解與關(guān)注UI設(shè)計(jì)中“以用戶為中心”的概念。該章節(jié)課程分為四個任務(wù)點(diǎn)，在講述“UI設(shè)計(jì)概念”時，會對“用戶研究”“交互設(shè)計(jì)”“界面設(shè)計(jì)”“用戶體驗(yàn)設(shè)計(jì)”的概念進(jìn)行回顧與理解，并與UI設(shè)計(jì)概念進(jìn)行聯(lián)系，讓學(xué)生能清楚了解UI設(shè)計(jì)在整個APP產(chǎn)品應(yīng)用開發(fā)中所處的地位和作用。在“UI設(shè)計(jì)的構(gòu)成要素”講述中，從文字、圖形、頁面版式、多媒體以及跨平臺界面設(shè)計(jì)五個方向去認(rèn)識與理解UI設(shè)計(jì)內(nèi)容，并結(jié)合前期的《版式設(shè)計(jì)》課程內(nèi)容，區(qū)分C/S平臺、B/S平臺以及APP平臺的設(shè)計(jì)內(nèi)容。在“UI設(shè)計(jì)的基本流程”中，要求學(xué)生熟悉移動界面設(shè)計(jì)規(guī)范和制作流程；在教師的指導(dǎo)下，能夠根據(jù)客戶需求，繪制APP界面框架；制定UI設(shè)計(jì)任務(wù)流程。在“設(shè)計(jì)軟件介紹”的內(nèi)容介紹中，結(jié)合前期《計(jì)算機(jī)輔助設(shè)計(jì)》課程的內(nèi)容，讓學(xué)生面對UI設(shè)計(jì)中的用戶及需求調(diào)研、信息架構(gòu)設(shè)計(jì)、流程圖與線框圖、可交互原型與高保真、動效設(shè)計(jì)以及切圖交付的不同任務(wù)選擇合適的軟件進(jìn)行設(shè)計(jì)完善。

圖1 《UI設(shè)計(jì)》課程第一章“UI設(shè)計(jì)本體”教學(xué)思路

3.4 應(yīng)用新知即隨學(xué)隨練

將專案項(xiàng)目設(shè)計(jì)進(jìn)行任務(wù)拆分，結(jié)合每周課程的教學(xué)安排，分階段完成專案項(xiàng)目設(shè)計(jì)。學(xué)生需在“超星學(xué)習(xí)通”上完成每周理論課程的學(xué)習(xí)，并根據(jù)本周課程學(xué)習(xí)內(nèi)容完成與理論課程相對應(yīng)的專案階段任務(wù)。

以“迭代設(shè)計(jì)方案提出”任務(wù)為例，在該周課程的教學(xué)中，教師教授了界面設(shè)計(jì)中的色彩設(shè)計(jì)與字體設(shè)計(jì)的規(guī)范，學(xué)生學(xué)習(xí)該周課程后，教師發(fā)布的專案任務(wù)是對所選軟件產(chǎn)品進(jìn)行設(shè)計(jì)思路的確定，即選擇合適的設(shè)計(jì)風(fēng)格、色彩搭配以及字體字號組合，同時完善基礎(chǔ)界面設(shè)計(jì)框架并繪制線框圖。該專案任務(wù)要求學(xué)生對前期調(diào)研與資料收集的內(nèi)容進(jìn)行梳理與整合，將需要迭代的界面進(jìn)行標(biāo)注，確定迭代設(shè)計(jì)方案，并在線框圖中進(jìn)行方案的展示與描述。

該專案項(xiàng)目任務(wù)所需完成的設(shè)計(jì)內(nèi)容一共有六項(xiàng)，時間為兩周。在確定設(shè)計(jì)思路時，學(xué)生需對用戶調(diào)研與商業(yè)分析等相關(guān)資料進(jìn)行收集與整理，以此確定需要迭代的軟件產(chǎn)品界面內(nèi)容，學(xué)生可以將其原本界面進(jìn)行截圖并以關(guān)鍵信息標(biāo)注的形式進(jìn)行展示。對于界面設(shè)計(jì)風(fēng)格的選擇，學(xué)生以視覺意向圖的形式進(jìn)行設(shè)計(jì)風(fēng)格闡釋。界面色彩搭配與字體字號組合的選擇是此次項(xiàng)目的核心，也是該周課程的知識重點(diǎn)。學(xué)生需要考慮移動端自身系統(tǒng)下的屏幕模式，選擇合適的界面主體色、輔助色、強(qiáng)調(diào)色以及文字色與背景色，色彩所選數(shù)量需結(jié)合軟件產(chǎn)品的品牌調(diào)性去確定。對于字體字號的選擇，主要是結(jié)合學(xué)生所選軟件產(chǎn)品的交互系統(tǒng)來確定。對于界面設(shè)計(jì)框架的完成，主要是讓學(xué)生在前期的信息架構(gòu)圖上去標(biāo)注相關(guān)迭代界面的內(nèi)容。在迭代功能上，主要以一個核心功能為切入點(diǎn)，進(jìn)行層級菜單的再設(shè)計(jì)。繪制線框圖時，則要求學(xué)生根據(jù)前期設(shè)計(jì)思路的整合，對所選軟件產(chǎn)品進(jìn)行界面迭代設(shè)計(jì)。為了讓學(xué)生能夠真正地參與到UI的完整設(shè)計(jì)制作過程中，要求學(xué)生對主界面進(jìn)行全新設(shè)計(jì)，導(dǎo)航欄上的功能模塊控制在四到五個，同時學(xué)生要在所設(shè)計(jì)的模塊中任選一到兩個模塊進(jìn)行菜單的層級設(shè)計(jì)，界面總體不少于二十個。該專案項(xiàng)目任務(wù)最終會以設(shè)計(jì)方案和報(bào)告的形式進(jìn)行展示匯報(bào)，學(xué)生借助“超星學(xué)習(xí)通”平臺上傳報(bào)告，方便與各組同學(xué)進(jìn)行交流。

3.5 檢測評價即建立專案規(guī)劃

學(xué)生根據(jù)每周專案項(xiàng)目的階段任務(wù)內(nèi)容，完成指定任務(wù)，并形成相應(yīng)的設(shè)計(jì)方案和報(bào)告，利用“騰訊會議”平臺進(jìn)行方案匯報(bào)。學(xué)生將自己的設(shè)計(jì)思路進(jìn)行展示，教師可以在學(xué)生匯報(bào)時了解學(xué)生對理論課程知識點(diǎn)的掌握（如表1）。

表1 專案項(xiàng)目階段任務(wù)發(fā)布、采用方式、效果與提交時間整體展示

此次專案項(xiàng)目一共分為七個階段任務(wù)，分為產(chǎn)品分析、商業(yè)與用戶需求分析、競品分析、用戶建模、迭代設(shè)計(jì)方案提出、迭代設(shè)計(jì)思路梳理和專案項(xiàng)目最終展示。產(chǎn)品分析，主要要求學(xué)生對所選軟件產(chǎn)品進(jìn)行深入分析，即分析軟件產(chǎn)品的核心功能、界面設(shè)計(jì)亮點(diǎn)并確定迭代設(shè)計(jì)的方向。商業(yè)與用戶需求分析，要求學(xué)生通過用戶價值圖、熱氣球法則圖和電梯宣言圖去分析所選軟件產(chǎn)品的商業(yè)性與用戶需求，并以此設(shè)計(jì)用戶調(diào)研問卷，同時繪制軟件產(chǎn)品信息架構(gòu)圖。競品分析，要求學(xué)生根據(jù)所選軟件產(chǎn)品的行業(yè)分類，從直接競爭者、間接競爭者和潛在競爭者去進(jìn)行相關(guān)競品分析。用戶建模，學(xué)生根據(jù)前期的產(chǎn)品分析、商業(yè)性與用戶需求分析和競品分析來完成所選軟件產(chǎn)品的用戶畫像，以此確定用戶群體分類，明確產(chǎn)品的設(shè)計(jì)方向。提出迭代設(shè)計(jì)方案，要求學(xué)生對所選軟件產(chǎn)品進(jìn)行設(shè)計(jì)思路的確定，即設(shè)計(jì)風(fēng)格、色彩搭配以及字體字號選擇，同時對基礎(chǔ)界面設(shè)計(jì)框架進(jìn)行完善并繪制線框圖。迭代設(shè)計(jì)思路梳理，在這里分成三個階段任務(wù)，學(xué)生根據(jù)前期階段任務(wù)的完成，對所選軟件產(chǎn)品進(jìn)行圖標(biāo)設(shè)計(jì)、界面設(shè)計(jì)以及高保真設(shè)計(jì)。專案項(xiàng)目最終展示，主要要求學(xué)生對前期各階段任務(wù)進(jìn)行修訂與整理，將設(shè)計(jì)思路進(jìn)行實(shí)際成品展示，形成對所選軟件產(chǎn)品的最終迭代設(shè)計(jì)報(bào)告。此次專案項(xiàng)目的任務(wù)安排與課程教授的內(nèi)容緊密聯(lián)系，各個階段任務(wù)相輔相成，環(huán)環(huán)相扣，學(xué)生在一步步設(shè)計(jì)過程中形成了一個清晰的UI設(shè)計(jì)流程框架。

3.6 鞏固練習(xí)即教學(xué)答疑

學(xué)生需要每周都進(jìn)行方案匯報(bào)，在匯報(bào)后，教師會根據(jù)學(xué)生的方案匯報(bào)對提出修改意見；學(xué)生也可以提出自己在設(shè)計(jì)中遇到的問題，教師加以解答。同時，學(xué)生在匯報(bào)本周方案之前，需將上一周修改后的設(shè)計(jì)方案進(jìn)行展示，教師對此進(jìn)行評價。學(xué)生對自己專案項(xiàng)目設(shè)計(jì)中存在的問題進(jìn)行反復(fù)修改（如圖2），既能對《UI設(shè)計(jì)》課程的所學(xué)內(nèi)容進(jìn)行知識的理解、記憶與演練，又能在不斷的修正中熟練掌握UI設(shè)計(jì)的原理與技術(shù)。

圖2 以學(xué)生的專案項(xiàng)目修改方案

3.7 擴(kuò)展與遷移即知識遷移

學(xué)生在“軟件迭代設(shè)計(jì)”的專案項(xiàng)目中，會將課程理論知識遷移到實(shí)踐設(shè)計(jì)之中，在實(shí)際設(shè)計(jì)中進(jìn)行知識延伸、遷移與系統(tǒng)梳理、綜合設(shè)計(jì)。在作品最終的展示過程中會將《交互設(shè)計(jì)》課程中的手勢設(shè)計(jì)與《UI設(shè)計(jì)》中的動效設(shè)計(jì)相結(jié)合，使得學(xué)生可以綜合運(yùn)用所學(xué)的知識。當(dāng)然，學(xué)生也會在知識遷移過程中產(chǎn)生一定的困惑，即如何將交互思維運(yùn)用到更多UI產(chǎn)品的設(shè)計(jì)過程中，從而達(dá)到對現(xiàn)有產(chǎn)品用戶需求的把握以及對商業(yè)需求的延伸。因此，教師需要在學(xué)生進(jìn)行所選案例分析時，進(jìn)行積極正向的引導(dǎo)，反復(fù)強(qiáng)調(diào)“交互思維”與“UI設(shè)計(jì)”的核心概念，以此才能更好地讓學(xué)生去理解與關(guān)注UI設(shè)計(jì)中“以用戶為中心”的理念，從而做到對新舊知識的遷移與結(jié)合。在課程的實(shí)訓(xùn)內(nèi)容中，學(xué)生要事先收集優(yōu)秀的界面設(shè)計(jì)案例，并運(yùn)用UI設(shè)計(jì)原則去分析界面設(shè)計(jì)的導(dǎo)航設(shè)計(jì)、界面布局以及色彩搭配等內(nèi)容。

4 總結(jié)

《UI設(shè)計(jì)》課程融合“巴特勒學(xué)習(xí)模式”，并充分發(fā)揮混合式教學(xué)的多樣性特點(diǎn)，以真實(shí)專案項(xiàng)目體驗(yàn)為教學(xué)主線，按照課程內(nèi)容安排具體專案項(xiàng)目任務(wù)。學(xué)生在針對專案項(xiàng)目進(jìn)行設(shè)計(jì)時，遵循知識點(diǎn)中的相應(yīng)設(shè)計(jì)原理，并進(jìn)行一定的知識延伸，將知識理論轉(zhuǎn)換成圖像化的專案設(shè)計(jì)，學(xué)生也在學(xué)與做中感受UI設(shè)計(jì)的魅力，在教學(xué)實(shí)踐的細(xì)節(jié)中錘煉學(xué)生，使他們能夠具備應(yīng)對市場需求的專業(yè)技術(shù)能力。