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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

學(xué)生在專案項(xiàng)目中進(jìn)行雙重角色扮演，既作為需求方進(jìn)行專案要求制定，對(duì)相關(guān)迭代產(chǎn)品進(jìn)行核心功能的分析；又作為設(shè)計(jì)方進(jìn)行專案項(xiàng)目實(shí)施，通過(guò)用戶研究對(duì)界面進(jìn)行設(shè)計(jì)迭代，進(jìn)一步強(qiáng)調(diào)產(chǎn)品的核心功能。在此過(guò)程中，學(xué)生通過(guò)對(duì)自身的了解與關(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é)生從多個(gè)角度理解與掌握UI設(shè)計(jì)的核心內(nèi)容。

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

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

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

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

3.5 檢測(cè)評(píng)價(jià)即建立專案規(guī)劃

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

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

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

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

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

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

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

學(xué)生在“軟件迭代設(shè)計(jì)”的專案項(xiàng)目中，會(huì)將課程理論知識(shí)遷移到實(shí)踐設(shè)計(jì)之中，在實(shí)際設(shè)計(jì)中進(jìn)行知識(shí)延伸、遷移與系統(tǒng)梳理、綜合設(shè)計(jì)。在作品最終的展示過(guò)程中會(huì)將《交互設(shè)計(jì)》課程中的手勢(shì)設(shè)計(jì)與《UI設(shè)計(jì)》中的動(dòng)效設(shè)計(jì)相結(jié)合，使得學(xué)生可以綜合運(yùn)用所學(xué)的知識(shí)。當(dāng)然，學(xué)生也會(huì)在知識(shí)遷移過(guò)程中產(chǎn)生一定的困惑，即如何將交互思維運(yùn)用到更多UI產(chǎn)品的設(shè)計(jì)過(guò)程中，從而達(dá)到對(duì)現(xiàn)有產(chǎn)品用戶需求的把握以及對(duì)商業(yè)需求的延伸。因此，教師需要在學(xué)生進(jìn)行所選案例分析時(shí)，進(jìn)行積極正向的引導(dǎo)，反復(fù)強(qiáng)調(diào)“交互思維”與“UI設(shè)計(jì)”的核心概念，以此才能更好地讓學(xué)生去理解與關(guān)注UI設(shè)計(jì)中“以用戶為中心”的理念，從而做到對(duì)新舊知識(shí)的遷移與結(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é)生在針對(duì)專案項(xiàng)目進(jìn)行設(shè)計(jì)時(shí)，遵循知識(shí)點(diǎn)中的相應(yīng)設(shè)計(jì)原理，并進(jìn)行一定的知識(shí)延伸，將知識(shí)理論轉(zhuǎn)換成圖像化的專案設(shè)計(jì)，學(xué)生也在學(xué)與做中感受UI設(shè)計(jì)的魅力，在教學(xué)實(shí)踐的細(xì)節(jié)中錘煉學(xué)生，使他們能夠具備應(yīng)對(duì)市場(chǎng)需求的專業(yè)技術(shù)能力。