基本信息科目界面設(shè)計(jì)綜合實(shí)訓(xùn)授課課題App概念設(shè)計(jì)-視覺設(shè)計(jì)授課班級(jí)課時(shí)安排2課時(shí)任課教師授課周次學(xué)情分析授課對(duì)象具備色彩搭配、圖案造型基本能力；本課程前期已完成游戲界面項(xiàng)目,培養(yǎng)了學(xué)生游戲界面圖標(biāo)繪制、界面圖案及版式設(shè)計(jì)的能力，但學(xué)生仍在圖標(biāo)造型、色彩搭配及整體版式設(shè)計(jì)上存在造型缺陷、色彩不協(xié)調(diào)、整體風(fēng)格不統(tǒng)一的問題；本次課將要學(xué)習(xí)概念設(shè)計(jì)及視覺設(shè)計(jì)知識(shí)，基于用戶品牌視覺規(guī)范，進(jìn)行色彩指定、字體指定、圖標(biāo)設(shè)計(jì)、輔助圖形設(shè)計(jì)，為App概念設(shè)計(jì)奠定視覺基礎(chǔ)；本次課依據(jù)自主開發(fā)新型活頁式教材結(jié)合相關(guān)教參資料展開教學(xué)任務(wù)，根據(jù)本次課的內(nèi)容側(cè)重選擇活頁式教材中“產(chǎn)品概念設(shè)計(jì)”的學(xué)習(xí)內(nèi)容來展開教學(xué)。教學(xué)目標(biāo)知識(shí)與技能目標(biāo)1、認(rèn)識(shí)視覺設(shè)計(jì)在界面中的作用及視覺設(shè)計(jì)工作流程；2、能結(jié)合用戶品牌視覺規(guī)范進(jìn)行色彩指定、文字指定；3、能對(duì)照功能梳理圖及原型圖設(shè)計(jì)對(duì)應(yīng)的按鈕、圖標(biāo)、界面圖案。過程和方法目標(biāo)1、通過使用矢量繪圖軟件來實(shí)現(xiàn)色彩指定、文字指定并排版輸出；2、通過前期課程完成的功能梳理圖及原型圖，小組討論列舉并填寫需要設(shè)計(jì)的按鈕、圖標(biāo)、界面圖案工作單，并著重在“登錄頁”進(jìn)行界面視覺設(shè)計(jì)，即“登錄頁原型圖”向“登錄頁高保真設(shè)計(jì)稿”的設(shè)計(jì)轉(zhuǎn)化。情感態(tài)度和價(jià)值觀目標(biāo)學(xué)生通過體驗(yàn)式學(xué)習(xí)，以任務(wù)驅(qū)動(dòng)為引導(dǎo),激發(fā)學(xué)生學(xué)習(xí)興趣,提升學(xué)生的分析能力、團(tuán)隊(duì)合作能力。2、通過APP項(xiàng)目，引導(dǎo)學(xué)生關(guān)注國家發(fā)展，建立愛國情懷。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)教學(xué)難點(diǎn)能夠根據(jù)視覺設(shè)計(jì)工作流程梳理準(zhǔn)確的視覺要素（客戶標(biāo)志、按鈕、圖標(biāo)、界面圖案、字體指定、色彩指定）的流程位置并填寫“設(shè)計(jì)工作單”；能完成“登錄頁高保真設(shè)計(jì)稿”并輸出效果圖；能根據(jù)客戶品牌視覺規(guī)范及原型圖，進(jìn)行按鈕、圖標(biāo)、界面圖案、字體指定、色彩指定設(shè)計(jì)本項(xiàng)目工作量很大，工作流程及對(duì)應(yīng)的具體設(shè)計(jì)工作較為復(fù)雜，學(xué)生理解相應(yīng)的設(shè)計(jì)工作內(nèi)容及具體開展的時(shí)段比較困難2、基于形式美法則“變化與統(tǒng)一”、“對(duì)稱與平衡”的要求，解決學(xué)生對(duì)界面視覺中存在的風(fēng)格不統(tǒng)一、畫面不協(xié)調(diào)問題。教學(xué)重難點(diǎn)解決辦法重點(diǎn)解決辦法：通過體驗(yàn)式學(xué)習(xí)，交流討論參與“企業(yè)視覺風(fēng)格”解決APP概念設(shè)計(jì)-視覺設(shè)計(jì)要素的設(shè)計(jì)；難點(diǎn)解決辦法：通過學(xué)生演示、教師分析總結(jié)出規(guī)范規(guī)文檔等方法，幫助學(xué)生認(rèn)識(shí)和理解，解決如何根據(jù)形式美法則使畫面和諧美觀。教學(xué)方法教師教法學(xué)生學(xué)法任務(wù)驅(qū)動(dòng)法小組討論法、自主探究法教具學(xué)具計(jì)算機(jī)、學(xué)生學(xué)習(xí)資源包（含道具）、超星學(xué)習(xí)通、視頻資源教學(xué)流程學(xué)習(xí)通課前預(yù)習(xí)——引入——情境創(chuàng)設(shè)——任務(wù)分析——任務(wù)實(shí)施——效果展示及評(píng)價(jià)——?dú)w納總結(jié)——任務(wù)完善——總結(jié)——課后作業(yè)備課時(shí)間：年月日系部：簽字：年月日教學(xué)過程教學(xué)環(huán)節(jié)（時(shí)間）教學(xué)內(nèi)容思政內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖一、學(xué)習(xí)通課前預(yù)習(xí)2分鐘1、學(xué)生登錄超星學(xué)習(xí)通課程資源平臺(tái),預(yù)習(xí)本次課的基本理論知識(shí)。學(xué)生觀看本課程資源，學(xué)習(xí)基本知識(shí)，為課堂學(xué)習(xí)打下良好的基礎(chǔ)。發(fā)起問題討論：APP概念設(shè)計(jì)的作用是什么？培養(yǎng)學(xué)生自主學(xué)習(xí)能力，養(yǎng)成良好的學(xué)習(xí)習(xí)慣發(fā)布視頻資源；通過學(xué)生觀看視頻、討論情況，了解學(xué)生的預(yù)習(xí)情況。學(xué)生登錄超星學(xué)習(xí)通觀看本節(jié)課上課資源通過視頻資源學(xué)習(xí)“APP概念設(shè)計(jì)”，認(rèn)識(shí)概念設(shè)計(jì)，使課堂教學(xué)更有針對(duì)性地有序進(jìn)行。二、引入3分鐘1、展示課前的問題結(jié)果2、并引出“APP概念設(shè)計(jì)-視覺設(shè)計(jì)”的作用——是APP成型之前的風(fēng)格效果，由基本美術(shù)風(fēng)格、圖標(biāo)、按鈕、指定字體、指定色彩等設(shè)計(jì)要素構(gòu)成。設(shè)計(jì)流程中，當(dāng)確定了所有原型圖后不會(huì)馬上展開所有的高保真畫面的設(shè)計(jì)，而是先進(jìn)行幾個(gè)典型界面的概念設(shè)計(jì)，幫助設(shè)計(jì)者及客戶預(yù)判產(chǎn)品的視覺風(fēng)格傾向是否符合企業(yè)品牌視覺導(dǎo)向及APP產(chǎn)品定位，從而確定其他界面的設(shè)計(jì)風(fēng)格是否依次展開，即所有原型圖轉(zhuǎn)換成高保真設(shè)計(jì)稿的設(shè)計(jì)工作。展示問題結(jié)果，引出本節(jié)課所要學(xué)習(xí)的知識(shí)聽講、思考引出本節(jié)課學(xué)習(xí)的重點(diǎn)三、情境創(chuàng)設(shè)3分鐘通過前期的設(shè)計(jì)工作，我們已經(jīng)完成了APP的原型圖，在這一個(gè)站點(diǎn)，我們將進(jìn)行概念設(shè)計(jì)中的視覺設(shè)計(jì)。情緒是可以操縱的，盡量往好的方向引導(dǎo)，行為才會(huì)改變；創(chuàng)設(shè)與當(dāng)前學(xué)習(xí)主題相關(guān)的學(xué)習(xí)情境，引導(dǎo)學(xué)生帶著真實(shí)的“任務(wù)”進(jìn)入學(xué)習(xí)情境接收學(xué)習(xí)情境引入道具公車站點(diǎn)，把工作流程放到公交站點(diǎn)上。營造一種輕松的環(huán)境。用快樂的氛圍緩解學(xué)習(xí)新知的壓力。用聯(lián)想加深流程中目標(biāo)的理解。四、任務(wù)分析5分鐘要展開“視覺設(shè)計(jì)”工作前，請(qǐng)同學(xué)們先結(jié)合學(xué)習(xí)通的資源及前一階段工作成果回憶一下有哪些具體的設(shè)計(jì)工作，它們將出現(xiàn)在哪些對(duì)應(yīng)站點(diǎn)？A前一階段工作成果：功能梳理圖、原型圖B素材——客戶品牌視覺識(shí)別要素C新設(shè)計(jì)工作——字體、色彩、按鈕、圖標(biāo)D迷惑選項(xiàng)——非客戶產(chǎn)品、品牌元素素材、非本產(chǎn)品（APP）的圖標(biāo)2、5個(gè)同學(xué)為一小組，利用老師課前所給的素材及道具，按照工作流程及“登錄頁原型圖”挑選出必要選項(xiàng)，完成“視覺設(shè)計(jì)站點(diǎn)圖”？老師引導(dǎo)學(xué)生完成任務(wù)分析，啟發(fā)學(xué)生思考一個(gè)完整的視覺設(shè)計(jì)應(yīng)該包含哪些，同時(shí)相應(yīng)的設(shè)計(jì)工作又在哪個(gè)階段完成1、明確素材資源及工作成果；2、討論分析，完成分析從而形成主動(dòng)思考得到結(jié)論而非被動(dòng)接受。五、任務(wù)實(shí)施5分鐘任務(wù)一：“視覺設(shè)計(jì)”站點(diǎn)圖任務(wù)時(shí)間為5分鐘，選擇2個(gè)小組，進(jìn)行展示。1、小組合作，同學(xué)們先展開討論分析挑選素材；2、將挑選好的內(nèi)容在“站點(diǎn)圖”上進(jìn)行貼圖；3、確保“登錄頁高保真設(shè)計(jì)稿”具體的工作內(nèi)容清晰明確；4、制作完成后，小組討論出1名同學(xué)代表小組進(jìn)行展示發(fā)言。1、組織學(xué)生開展5分鐘的任務(wù)，下位監(jiān)督，發(fā)現(xiàn)學(xué)生存在問題，有針對(duì)性地對(duì)學(xué)生進(jìn)行指導(dǎo)；2、選出展示的兩個(gè)小組。1、組員利用小組分析出最佳結(jié)果，開始制作。2、任務(wù)制作完成后，把成品拍照上傳學(xué)習(xí)通。3、選定的小組做好演示準(zhǔn)備。通過完成任務(wù)實(shí)施，掌握本節(jié)課重點(diǎn)6分鐘1、作品效果展示。小組代表發(fā)言，介紹小組的作品2、小組互評(píng)，教師評(píng)價(jià)1）針對(duì)內(nèi)容進(jìn)行評(píng)價(jià)（1）功能是否有缺漏；（2）內(nèi)容是否選擇恰當(dāng)；2）針對(duì)流程位置進(jìn)行評(píng)價(jià)（1）先后關(guān)系是否準(zhǔn)確培養(yǎng)學(xué)生的自我及對(duì)別人的認(rèn)同感、相互欣賞和互相學(xué)習(xí)的態(tài)度請(qǐng)學(xué)生代表上臺(tái)展示自己小組的成果，并組織小組互相進(jìn)行評(píng)價(jià)。認(rèn)真觀看他人的成果展示；并進(jìn)行小組互相評(píng)價(jià)通過讓學(xué)生展示來對(duì)學(xué)生成果的驗(yàn)收；小組互評(píng)、教師評(píng)價(jià)，肯定小組成績，指出不足取長補(bǔ)短，共同進(jìn)步20分鐘任務(wù)二：登錄頁高保真界面設(shè)計(jì)根據(jù)“登錄頁原型圖”設(shè)計(jì)高保真界面，設(shè)計(jì)內(nèi)容應(yīng)包含：標(biāo)志應(yīng)用按鈕設(shè)計(jì)圖標(biāo)設(shè)計(jì)界面圖案設(shè)計(jì)2、請(qǐng)使用矢量軟件AI完成設(shè)計(jì)，輸出格式為PNG通過學(xué)習(xí)，培養(yǎng)學(xué)生獨(dú)立思考和分析的能力，形成良好的職業(yè)道德素養(yǎng)。引導(dǎo)學(xué)生查閱案例資源，分析結(jié)合工作要點(diǎn)的設(shè)計(jì)內(nèi)容，找到優(yōu)秀案例的解決方案。在具體的設(shè)計(jì)過程中理解形式美法則“變化與統(tǒng)一”、“對(duì)稱與平衡”。讓學(xué)生在設(shè)計(jì)中學(xué)會(huì)借鑒，遇到不熟悉的項(xiàng)目，不盲目開始設(shè)計(jì)，學(xué)會(huì)從優(yōu)秀案例中吸取養(yǎng)分。15分鐘拓展任務(wù)：完成其他原型圖的基礎(chǔ)圖標(biāo)、按鈕的設(shè)計(jì)結(jié)合原型圖及客戶品牌視覺規(guī)范完成字體指定和色彩指定引導(dǎo)學(xué)生明確任務(wù)要求并巡堂指導(dǎo)，分層教學(xué)。明確自身的目標(biāo)，協(xié)作成長。分層教學(xué)六、效果展示及評(píng)價(jià)6分鐘（1）作品效果展示。小組代表發(fā)言，介紹小組的作品（2）小組互評(píng)，教師評(píng)價(jià)1、原型圖轉(zhuǎn)換成高保真設(shè)計(jì)稿功能是否有缺漏；2、圖標(biāo)風(fēng)格是否恰當(dāng)；3、整體畫面色彩及字體是否符合品牌風(fēng)格；4、畫面視覺（標(biāo)志、圖標(biāo)、按鈕、界面圖案等）是否和諧統(tǒng)一。培養(yǎng)學(xué)生的自我及對(duì)別人的認(rèn)同感、相互欣賞和互相學(xué)習(xí)的態(tài)度請(qǐng)學(xué)生代表上臺(tái)展示自己小組的成果，并組織小組互相進(jìn)行評(píng)價(jià)。認(rèn)真觀看他人的成果展示；并進(jìn)行小組互相評(píng)價(jià)通過讓學(xué)生展示來對(duì)學(xué)生成果的驗(yàn)收；小組互評(píng)、教師評(píng)價(jià)，肯定小組成績，指出不足取長補(bǔ)短，共同進(jìn)步七、歸納總結(jié)3分鐘1、成果：（1）視覺設(shè)計(jì)工作單（2）登錄頁高保真設(shè)計(jì)稿（3）視覺要素：按鈕、圖標(biāo)、字體指定、色彩指定2、作品中存在的不足：（1）視覺風(fēng)格不符合客戶品牌風(fēng)格（2）未按照原型圖的內(nèi)容及布局設(shè)計(jì)界面視覺元素，元素有缺失，布局不規(guī)范通過學(xué)習(xí)，培養(yǎng)學(xué)生獨(dú)立思考和分析的能力，形成良好的職業(yè)道德素養(yǎng)。1、解析優(yōu)秀案例結(jié)合學(xué)生作品點(diǎn)評(píng)2、歸納講解知識(shí)點(diǎn)，歸納總結(jié)規(guī)范聽講、觀察、思考，自查小組出現(xiàn)的問題學(xué)習(xí)規(guī)范知識(shí)八、任務(wù)完善10分鐘1、修改完善作品2、整理作品理解那些精益求精的要求并不是一種刁難對(duì)工作的認(rèn)真負(fù)責(zé)，都是為了積攢和體現(xiàn)我們自己的能力和實(shí)力。分析問題，提出修改要求聽取意見，后續(xù)進(jìn)行修改和完善；學(xué)習(xí)不僅僅靠課堂的時(shí)間，持之以恒的自學(xué)是成長的秘訣。完成本節(jié)課作業(yè)，養(yǎng)成良好的行為習(xí)慣。九、總結(jié)2分鐘1、學(xué)生總結(jié)：總結(jié)課堂所學(xué)知識(shí)2、教師總結(jié)1）本節(jié)課基于原型圖結(jié)合客戶品牌視覺規(guī)范進(jìn)行了高保真設(shè)計(jì)稿的設(shè)計(jì)工作?！癆PP概念設(shè)計(jì)-視覺設(shè)計(jì)”的作用——是APP成型之前的風(fēng)格效果，由基本美術(shù)風(fēng)格、圖標(biāo)、按鈕、指定字體、指定色彩等視覺要素構(gòu)成。2）成果有：（1）視覺設(shè)計(jì)工作單（2）登錄頁高保真設(shè)計(jì)稿（3）視覺要素：按鈕、圖標(biāo)、字體指定、色彩指定2、設(shè)計(jì)中工作方法不足點(diǎn)：（1）文件命名方式不清晰（2）項(xiàng)目過程文件管理不規(guī)范3、形式美法則（1）色彩過多，應(yīng)精選（2）圖標(biāo)不夠簡潔，風(fēng)格不夠統(tǒng)一3、小組合作情況：①小組成員之間的交流與協(xié)作情況；②與其他成員的合作態(tài)度精益求精的職業(yè)素養(yǎng)1、認(rèn)真聽講，明確任務(wù)要求及修改意見；2、建立并管理項(xiàng)目文件夾并執(zhí)行任務(wù)。1、引導(dǎo)學(xué)生解讀重難