楊雪玲

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

關(guān)鍵詞：UI設(shè)計教學(xué);案例教學(xué);項(xiàng)目驅(qū)動模式;校本課程;優(yōu)勢;對策

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

一、UI設(shè)計教學(xué)、案例教學(xué)以及項(xiàng)目驅(qū)動模式的理論闡述

（一）UI設(shè)計教學(xué)

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

（二）案例教學(xué)+項(xiàng)目驅(qū)動教學(xué)模式

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

二、案例教學(xué)+項(xiàng)目驅(qū)動模式下的UI設(shè)計教學(xué)案例應(yīng)用

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

（一）項(xiàng)目《ITalk》教學(xué)設(shè)計實(shí)踐應(yīng)用

1. 教學(xué)目標(biāo)

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

2. 教學(xué)方法

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

3. 教學(xué)過程

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

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

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

（二）項(xiàng)目《手機(jī)APP主題設(shè)計》教學(xué)設(shè)計實(shí)踐應(yīng)用

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

1. 教學(xué)導(dǎo)入

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

2. 復(fù)習(xí)知識

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

3. 分析任務(wù)與制作過程

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

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

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

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

三、UI設(shè)計教學(xué)中運(yùn)用案例教學(xué)+項(xiàng)目驅(qū)動模式的優(yōu)勢歸納