廣東培正學院藝術學院 李軍燕

1 相關概念解析

1.1 巴特勒學習模式的定義

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

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

1.2 混合式教學模式的定義

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

2 《UI設計》課程教學目標

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

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

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

3 基于巴特勒學習模式的《UI設計》課程混合式教學思路

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

3.1 設置情境即專案項目制定

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

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

學生在專案項目中進行雙重角色扮演，既作為需求方進行專案要求制定，對相關迭代產品進行核心功能的分析；又作為設計方進行專案項目實施，通過用戶研究對界面進行設計迭代，進一步強調產品的核心功能。在此過程中，學生通過對自身的了解與關注，以及自我認知下的設計構思，將其進行具象文字轉述，以此制定專案需求。學生結合專案需求進行相關項目設計，角色間進行切換，讓學生從多個角度理解與掌握UI設計的核心內容。

3.3 組織教學即搭建課程與課程間的橋梁

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

圖1 《UI設計》課程第一章“UI設計本體”教學思路

3.4 應用新知即隨學隨練

將專案項目設計進行任務拆分，結合每周課程的教學安排，分階段完成專案項目設計。學生需在“超星學習通”上完成每周理論課程的學習，并根據(jù)本周課程學習內容完成與理論課程相對應的專案階段任務。

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

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

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

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

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

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

3.6 鞏固練習即教學答疑

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

圖2 以學生的專案項目修改方案

3.7 擴展與遷移即知識遷移

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

4 總結

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