案例教學+項目驅動模式運用于UI設計教學中的對策探討

楊雪玲

摘? 要：案例教學與項目驅動模式是當前最熱門的兩大教學模式，他們迎合了新課改要求與信息時代教育發(fā)展要求，被廣泛應用于各種教學實踐應用活動中。文章希望將它們運用于現代UI設計教學領域中，結合多案例分析案例教學+項目驅動模式運用于UI設計教學中的有效對策，凸顯其模式應用優(yōu)勢，希望以此提升UI設計教學水平。

關鍵詞：UI設計教學;案例教學;項目驅動模式;校本課程;優(yōu)勢;對策

中圖分類號：G642? ? ? ?文獻標志碼：A? ? ? ? ?文章編號：2096-000X（2020）25-0099-03

Abstract： Case teaching and project-driven models are currently the two most popular teaching ones which meet the requirements of the new curriculum reform and the development of information age education， and are widely used in various teaching practice applications. This paper hopes to apply them to the field of modern UI design teaching， combining multi-case analysis case teaching + project-driven mode to apply effective countermeasures in UI design teaching， highlighting the advantages of its mode application， and hope to improve the level of UI design teaching.

Keywords： UI design teaching; case teaching; project-driven model; school-based curriculum; advantages; countermeasures

現如今，在我國大數據、“互聯(lián)網+”等等先進信息化時代思想的引領下，新興智慧資源與服務能力內容被廣泛應用于社會各種領域中，其核心內容就是針對數目龐大的信息內容進行深度挖掘，進而得到有益于行業(yè)競爭、且具有一定社會價值的信息。在UI設計教學領域中，廣泛應用案例教學+項目驅動模式是有必要的，它們共同驅動了教學過程中對數據內容的應用，更加強調教學實踐應用模式創(chuàng)新，在校企合作人才培養(yǎng)模式的實施過程中尋找到了教學人才教育發(fā)展真諦，呈現了UI設計教學的巨大轉變過程，非常值得研究。

一、UI設計教學、案例教學以及項目驅動模式的理論闡述

（一）UI設計教學

UI（User Interface）其本意是指用戶界面，UI設計專門指代從事對軟件人際交互、操作邏輯、界面美觀整體設計工作的人。在高等教育院校中，UI設計則作為一門學科課程存在，它涉及到了高級網頁設計、移動應用界面設計等等課程內容，是目前國內信息產業(yè)教育領域中比較熱門的課程之一[1]。

（二）案例教學+項目驅動教學模式

案例教學+項目驅動教學模式是目前非常熱門的教學模式。首先案例教學強調從實際案例內容切入展開教學過程，圍繞問題設計教學內容，它就包含了問題提出、問題分析以及問題解決三大部分。在教師適當講解課程相應知識點后，教師希望結合實踐案例實現對教學內容的融會貫通，提高學生的學習能力水平，優(yōu)化教學方法應用。反觀項目驅動教學模式則非常追求通過任務項目設置與角色分配。在教學中當然要以學生為主體，而教師作為組織者組織學生參與到教學過程中，通過共同合作實踐完成一個或多個項目的教學活動[2]。項目驅動教學擁有較強的任務前置性與驅動動力，整個教學過程中教師帶動項目、項目帶動學生、學生與教師互動，真正形成了一個完整的閉環(huán)結構，所追求的是從項目提出到項目完成的完整性。上述兩種教法的相互結合擁有互補優(yōu)勢特性，案例教學讓項目任務變得更加豐滿化，而項目驅動本身為案例教學帶來了相對完整的教學規(guī)劃路線，二者所共同組織構建的教學方法是完整，所呈現的知識系統(tǒng)也更加健全不零散。在整個過程中，借助項目驅動教法將相關案例知識點內容聯(lián)系起來，形成新的知識系統(tǒng)，這是二者結合所追求的，它基本實現了對知識內容的查缺補漏，且指導性非常強，適合在當前的UI設計教學活動中應用展開[3]。

二、案例教學+項目驅動模式下的UI設計教學案例應用

案例教學+項目驅動模式下的UI設計教學充滿實用性和易用性，且在教學設計規(guī)劃方面非常到位，可滿足教師的教學方案設計，也能滿足學生學習需求，下文結合兩個案例對其教學實踐應用展開論述。

（一）項目《ITalk》教學設計實踐應用

1. 教學目標

首先《ITalk》項目是圍繞UI設計課程安排的，它的教學核心內容主要選取了某社交類APP用戶界面設計展開。在該項目中就直接融入了案例教學+項目啟動模式，希望通過這一綜合模式希望學生能夠快速掌握UI界面設計中有關界面的分析方式。深度了解頁面、功能與樣式確立相關要求，合理性分析界面功能排布。同時學會APP界面創(chuàng)建與制作操作流程，學會UI設計界面中有關字段、配圖、配色的設計要求與添加流程[4]。

2. 教學方法

在《Italk》教學中同時引入項目和案例展開教學過程，執(zhí)行設計完整的UI設計流程與設計規(guī)范要點，希望以此提高學生的實踐動手能力。在教學中也希望培養(yǎng)學生良好的專業(yè)知識學習嚴謹性與審美能力。在教學中，教師首先會通過傳統(tǒng)講授法為學生示范案例內容，講解有關《Italk》中組件和字段的相關理論分析方法與形式，讓學生初步了解Italk頁面的組成構建形式，主要為學生操作演示相關內容，讓學生基本了解頁面的構成方式。在課程中，教師會將一個完整的項目拆分為多個任務內容，要求學生按照教師要求分步驟完成各個學習任務，最終一步步構建完整的UI設計界面，完成UI設計制作過程[5]。

3. 教學過程

在教學過程中，首先教師會引入課程內容并拋出話題“大家知道嗎？我們需要學習了解UI設計界面之前首先了解UI產品的兩種主要形式，它們分別為純設計與項目設計?！眹@這兩種設計，教師就為學生分析了兩種設計各自存在的利弊，告知學生純設計一般被應用于成熟的設計師展示設計技能方面，它的設計形式呈現相對夸張，一般與設計預期存在較大差距，它所追求的是視覺效果的設計。而項目設計則不然，它追求整體設計，是適合于學生學習的設計方式。結合這一點，教師就希望圍繞項目設計展開教學過程，嘗試為學生確立UI設計項目課程學習目標，學著制作簡單的網站界面單頁。此時，教師就引出新項目——ITalk。ITalk是一款社交類APP，利用UI設計該APP主頁面，該階段教師希望結合案例進一步展開教學過程。為此，教師首先初步創(chuàng)建了項目畫布，引導學生對所選取的頁面進行相關分析，目的是為了確定頁面的結構組成。該階段學生所需要完成的學習任務很簡單，就是跟隨教師的UI設計頁面分析方式與套路深入學習，嘗試選取3種不同類型的APP主頁展開UI頁面設計與分析。

其次進入案例演示階段，該階段教師會提問學生是否能夠根據對UI設計頁面的結構分析來獲得自己更為理想的頁面？學生在思考這一問題時就指出了自己所聯(lián)想到的頁面，而教師則輔導他們進行有關頁面的元素排布、頁面組件填充、設、最終完成頁面UI原型設計。在案例演示過程中，教師要做到正確選取參考作品，為學生示范選取合理的UI設計頁面形式與樣式，圍繞《ITalk》這一課的源文件進行調整操作，而在操作過程中教師則要選取調整前后多種設計并提問學生“哪一種設計更好更合理，合理在哪里？”等等。激發(fā)學生在案例中學習討論，然后回答與教師形成互動。

最后進行模仿練習、作品展示與評價階段。該階段教師會結合《ITalk》項目再次基于理論進行講解、演示案例，隨后根據教師演示的基本流程與重點內容完成任務，利用項目拆分多個任務內容，讓學生按照一定順序完成項目學習任務。例如在練習過程中讓學生選取APP主頁的原型稿進行分析，而隨后則在原型稿的基礎之上完成設計稿作品。在作品展示與評價過程中，教師將與學生共同對作品進行評價，指出作品中的優(yōu)缺點內容，鼓勵學生展開相互分析與評價，提高作品的完成度與嚴謹度。而教師則會對學生的《ITalk》學習過程、完成度、截面排布、設計整體效果以及配圖配色等多個角度進行針對性局部點評。在教學后，教師則鼓勵學生更多思考，嘗試進一步積累自己的素材庫，甚至為他們安排更多項目內容，增大他們的UI設計界面練習量，逐漸提升他們的UI設計水平[6]。

（二）項目《手機APP主題設計》教學設計實踐應用

在《手機APP主題設計》的UI設計教學中，教師希望以手機APP主題設計作為項目主線，在課程教學過程中引入教學案例促進項目開發(fā)過程。在這一教學中，APP UI圖標設計是關鍵，以下是具體的教學設計實踐應用過程。

1. 教學導入

在項目確立后，教師就運用到了案例演示，首先告知學生具體的學習任務——演示透明材質圖標內容，與學生共同探討如何表現某些透明類圖標，這一環(huán)節(jié)是項目案例導入，為學生學習手機APP主題設計內容開題;其次是情境導入，利用透明材料塑造產品品牌形象，突出產品內容。透明材料主要通過外表直觀展示內容，此時教師要為學生聯(lián)系生活，例如在書本裝幀與食品包裝上都會運用到透明材料，因為透明材料能夠讓人對包裝中的內容一目了然，更加簡潔直觀，也能給人帶來一定安全感，因此說透明效果在不同的設計中都是非常討巧的，此時教師就為學生建立了良好的透明視覺體驗;接下來教師會提出問題“大家在現實中所能想到的透明材料都有哪些呢？”結合這一問題教師希望學生能夠通過自己的能力進行搜索，例如學生就搜索到了水和玻璃杯，并要求學生自習觀察這些物體是怎樣呈現出透明的視覺效果的。比如說通過現實中水和玻璃杯的輪廓清晰辨析它們的光影內容表現，感受它們所呈現出的透明質感[7]。

2. 復習知識

在教學后，教師要帶領學生共同復習知識點，同樣結合問題展開復習過程“大家覺得透明材質與我們之前所學習的金屬材質相比有哪些特點呢？”、“這些特點該如何表現出來呢？”、“該如何用繪圖工具去表現呢？”在教學中，教師所要明確的是學習目標，教會學生繪制UI圖標、表現清晰輪廓的正確方法;第二，營造透明氛圍，同時表現透明材質的高光與投影效果;最后就是要制作出透明的玻璃質感[8]。

3. 分析任務與制作過程

《手機APP主題設計》的UI設計教學的關鍵就在于引入案例，分析教學任務與制作過程。首先是任務初步分析，引導學生打開透明材質圖標，分支制作圖標并為學生講授所有知識內容，這其中包括了背景圖層的創(chuàng)建內容、形式繪制內容以及圖層樣式運用內容。教師要合理化運用高光引導學生繪制手機APP主題內容。在任務制作過程中，教師要引導學生分組嘗試合作制作透明材質圖標。

其次，在任務再分析過程中，首先邀請每一組學生匯報本土的繪制作品成果，結合繪制作品成果分析學生創(chuàng)作過程中可能出現的各種問題;然后教授學生有關手機APP主題背景環(huán)境的營造技巧，例如對冷暖色調的對比效果分析與技巧教授;第三，使用形狀工具繪制主題背景的基本輪廓形狀。例如要在UI設計過程中曲調填充色內容，創(chuàng)建內容鏤空體系，同時保留一定的圖層樣式輪廓，體現較高的透明度。在利用圖層樣式制作細節(jié)過程中要添加投影與高光效果，最后完成手機APP主題UI界面設計過程[9]。

4. 教學評價與總結

在教學中評價學生對手機APP主題UI界面設計的完成情況，同時積極收取來自于學生的反饋內容，例如學生在UI設計操作過程中所遇到的各種問題等等。在總結中教師會為學生總結歸納有關形狀工具的使用技巧與圖層樣式的使用技巧內容[10]。

三、UI設計教學中運用案例教學+項目驅動模式的優(yōu)勢歸納