楊雪玲

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

關(guān)鍵詞：UI設計教學;案例教學;項目驅(qū)動模式;校本課程;優(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

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

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

（一）UI設計教學

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

（二）案例教學+項目驅(qū)動教學模式

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

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

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

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

1. 教學目標

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

2. 教學方法

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

3. 教學過程

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

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

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

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

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

1. 教學導入

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

2. 復習知識

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

3. 分析任務與制作過程

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

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

4. 教學評價與總結(jié)

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

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