全國職業(yè)院校教學能力比賽教學設(shè)計

全國職業(yè)院校教學能力比賽教學設(shè)計課題名稱校園融媒體手機應(yīng)用界面設(shè)計-原型圖繪制授課班級19n授課地點數(shù)字影像實訓基地 教學時間 2020年10月30日教學內(nèi)容分析該課程授課內(nèi)容選自“版式設(shè)計”課程第4單元《UI（界面）設(shè)計》.課程：《版式設(shè)計》是數(shù)字影像技術(shù)專業(yè)核心課程，課程內(nèi)容融合國家界面設(shè)計職業(yè)技能等級證書（1+X）標準。課程通過DM單、海報、書籍（畫冊）、光盤封套、網(wǎng)頁頁面、移動端界面設(shè)計等版式設(shè)計領(lǐng)域所涉及的典型崗位工作任務(wù)的設(shè)計制作，培養(yǎng)學生設(shè)計基礎(chǔ)、平面設(shè)計與界面設(shè)計相關(guān)的理論知識、設(shè)計規(guī)范、工作流程與關(guān)鍵技術(shù)，提升學生崗位專業(yè)能力與綜合職業(yè)素養(yǎng)。.單元：本單元主要內(nèi)容是《UI（界面）設(shè)計》，按設(shè)計內(nèi)容劃分為《移動端界面設(shè)計》與《網(wǎng)頁頁面設(shè)計》2個學習項目，之間是遞進邏輯關(guān)系。.課時：教師依據(jù)課程教學標準，結(jié)合專業(yè)實訓教學安排，對實訓項目的具體內(nèi)容進行靈活調(diào)整。界面設(shè)計是崗位從業(yè)人員經(jīng)常接觸的典型工作任務(wù)，具有很強的崗位實用性。本次課的內(nèi)容能夠為學生呈現(xiàn)一個相對完整的工作流過程，具有清晰的職業(yè)導向。.思政：課程實訓項目是在勁松職高與人民網(wǎng)校企合作背景下的真實生產(chǎn)任務(wù)。在教師指導下，學生進行項目分析與方案設(shè)計，完成“思政教育專欄”等一級欄目設(shè)計，并在后續(xù)課程中陸續(xù)完成“課程思政”、“特色活動”、“校園黨建”、“一校一品”等多個二級的設(shè)計，通過文字、視頻、圖片等相關(guān)資源的獲取、整合、加工，在學習過程中培養(yǎng)嚴謹規(guī)范的職業(yè)意識與精益求精的工匠精神，顯隱結(jié)合、潛移默化，落實課程思政。學情分析教學對象是高二年級平面設(shè)計班級學生.課程基礎(chǔ)：學習了《電腦美術(shù)》、《PS圖像處理》2門專業(yè)核心課程。.知識基礎(chǔ)：通過相關(guān)專業(yè)課程的學習，學生對于設(shè)計基礎(chǔ)知識與工具軟件運用知識有一定的掌握和運用經(jīng)驗，對UI產(chǎn)品開發(fā)流程有一定認識，但尚未進行項目實操，對IOS/安卓系統(tǒng)界面設(shè)計規(guī)范尚未有效掌握。.能力基礎(chǔ)：通過《PS圖像處理》課程的學習，學生基本掌握選區(qū)、圖層、蒙版等相關(guān)操作，具有一定的項目實訓經(jīng)驗，但對UI設(shè)計內(nèi)容尚未進行系統(tǒng)性學習，模板定制、形狀繪制、文字排版、圖標設(shè)計等UI設(shè)計相關(guān)操作技能尚未有效掌握。.素養(yǎng)基礎(chǔ)：通過前導課程的教學和訓練，學生能夠熟練使用網(wǎng)絡(luò)平臺、手機等信息化學習工具；習慣小組合作形式，能使用學習資源開展自主學習并與同學互相交流；由于職業(yè)體驗不足，對“設(shè)計之美永無止境，細節(jié)決定成敗”的職業(yè)理念缺乏認識，對“嚴謹規(guī)范、精益求精、追求卓越、”的職業(yè)品質(zhì)缺乏理解。教學目標知識目標通過課前自主學習與課堂實踐操作，理解IOS界面設(shè)計規(guī)范。能力目標根據(jù)制作要求與產(chǎn)品架構(gòu)圖，完成“校園融媒體”產(chǎn)品原型圖設(shè)計。素養(yǎng)目標通過對IOS界面設(shè)計規(guī)范的學習與運用，培養(yǎng)嚴謹規(guī)范的職業(yè)意識與精益求精的工匠精神等崗位職業(yè)素養(yǎng)。教學重點根據(jù)制作要求與產(chǎn)品架構(gòu)圖，完成“校園融媒體”產(chǎn)品原型圖設(shè)計。教學難點完成“校園融媒體工作室”原型圖設(shè)計，符合IOS界面設(shè)計規(guī)范。教學方法教法：項目教學法 學法：混合式學習環(huán)境與資源環(huán)境：平面設(shè)計工作室、多媒體教學系統(tǒng)、網(wǎng)絡(luò)學習平臺資源：微課視頻、PPT課件、圖片、實訓手冊、PDF電子文檔

教學環(huán)節(jié)時間分配教學內(nèi)容與教師活動學生活動教學資源教學設(shè)計意圖課前準備（一）了解實訓任務(wù).發(fā)布本次實訓課程學習資源與《任務(wù)書》。.通過在線檢測，了解學生對制作要求的掌握情況。登錄學習平臺，獲取課程學習資源，并通過《任務(wù)書》了解本次實訓任務(wù)，理解制作要求。完成在線檢測題。.學習平臺：實訓任務(wù)與課程資源的發(fā)布。.在線檢測：記錄學生課前對制作要求掌握情況，為教師反饋提供了客觀依據(jù)。發(fā)布實訓任務(wù)及學習資源，引導學生理解制作要求，為實現(xiàn)教學目標鋪墊。（二）完成課前學習發(fā)布課前學習任務(wù)，設(shè)置在線檢測題，掌握學生學習情況，并反饋。登錄學習平臺，通過微課學習“IOS設(shè)計規(guī)范”，并完成在線檢測題。.微課：有效支撐學生自主學習，可反復觀看，打破時空限制，強化知識學習。.在線檢測：實時記錄、匯總學生完成情況，幫助教師了解學生課前學習效果，為課堂教學打下基礎(chǔ)。崗位知識自主學習，為完成實訓任務(wù)奠定知識基礎(chǔ)。課堂實施（一）項目領(lǐng)取5分鐘登錄學習平臺，結(jié)合數(shù)據(jù)匯總情況，反饋學生課前對制作要求的掌握情況，并回顧“UI產(chǎn)品開發(fā)流程”?；卮鹛釂枺此甲约捍嬖诘膯栴}；復習“UI產(chǎn)品開發(fā)流程”，理解本次課程任務(wù)與對應(yīng)崗位工作內(nèi)容。.學習平臺：記錄并匯總了學生課前對制作要求掌握情況，為教師反饋提供了客觀依據(jù)。.實訓手冊：引導學生完成內(nèi)容梳理，提高學習效率，記錄學習過程。以真實具體的實訓任務(wù)為載體，教授崗位知識，提高專業(yè)技能，提升職業(yè)素養(yǎng)，強調(diào)實訓教學的實效性，督促學生端正學習態(tài)度。項目背景：項目背景為“校園融媒體手機應(yīng)用開發(fā)”，該項目是我?！叭嗣窬W(wǎng)融媒體工程師學院”重點推進內(nèi)容。前端設(shè)計由校方負責，后端開發(fā)由企業(yè)方負責，校企合作共同完成。階段任務(wù)為在產(chǎn)品架構(gòu)圖的基礎(chǔ)上完成原型圖設(shè)計。制作要求：.規(guī)范：遵循IOS系統(tǒng)規(guī)范，各元件齊全。.規(guī)格：750PX*1334Px為基礎(chǔ)，如果內(nèi)容過多可根據(jù)設(shè)計需要適當增加頁面長度。.布局：布局設(shè)計合理，按模塊順序設(shè)計繪制，各個模塊清晰有序。.內(nèi)容：需要在首頁呈現(xiàn)一級模塊區(qū)域與標題，可根據(jù)設(shè)計需要決定是否呈現(xiàn)二級模塊內(nèi)容。.輸出：提交工程文件截圖（帶參考線）與JPG格式原型圖。（二）項目分析5分鐘結(jié)合學習平臺數(shù)據(jù)，反饋學生課前對于IOS設(shè)計規(guī)范的掌握情況，并通過設(shè)問引導學生進行項目分析?；仡櫿n前學習內(nèi)容，并回答提問，填寫實訓手冊。.設(shè)計規(guī)范遵循：IOS?/Android?.系統(tǒng)元件包括：（）欄、（）欄、（）欄；規(guī)格？.內(nèi)容區(qū)域包括：（1）Banner區(qū)：（）個（2）一級欄目：（）個（3）二級欄目：（）個實訓手冊：引導學生完成內(nèi)容梳理，提高學習效率，記錄學習過程?？偨Y(jié)學生IOS設(shè)計規(guī)范的自學情況，并引導學生進行項目分析，為方案制定做鋪墊。

（三）方案制定10分鐘12.指導各組學生制定設(shè)計方案。,組織各組同學進行展示匯報，并進行審核。.以組為單位，根據(jù)制作要求與產(chǎn)品架構(gòu)圖分析，制定方案。.繪制示意圖，并展示匯報。.微課：在進行方案設(shè)計時，協(xié)助學生回顧IOS設(shè)計規(guī)范相關(guān)知識。.實訓手冊：引導學生完成內(nèi)容梳理，提高學習效率，記錄學習過程。.示意圖：引發(fā)學習興趣，展示階段成果。制定任務(wù)方案，強調(diào)設(shè)計規(guī)范，為項目實施做準備。1.在操作進行之前，引導學生學習評價標準。評價評價標準內(nèi)容優(yōu)秀（9-10分）良好（7-8分）合格（6分）設(shè)計規(guī)范遵循IOS系統(tǒng)規(guī)范進行設(shè)計，狀態(tài)欄、導航欄、標簽欄齊全，數(shù)據(jù)正確，左右頁邊距20PX。遵循IOS系統(tǒng)規(guī)范進行設(shè)計，狀態(tài)欄、導航欄、標簽欄齊全，數(shù)據(jù)正確，左右頁邊距20-24PX之間。遵循IOS系統(tǒng)規(guī)范進行設(shè)計，狀態(tài)欄、導航欄、標簽欄齊全，數(shù)據(jù)正確，左右頁邊距不小于20PX。在操作進行之前尺寸規(guī)格尺寸符合750PX*1334Px基礎(chǔ)要求能夠根據(jù)設(shè)計需要合理調(diào)整頁面長度，有序呈現(xiàn)內(nèi)容。尺寸符合750PX*1334Px基礎(chǔ)要求能夠根據(jù)設(shè)計需要調(diào)整頁面長度。尺寸符合750PX*1334Px基礎(chǔ)要求。學習“項目評價標準”，規(guī)范學生的操作過程，提布局樣式布局合理，按模塊順序設(shè)計繪制，間距統(tǒng)一，關(guān)聯(lián)度高，各個模塊清晰有序，有設(shè)計感。布局合理按模塊順序設(shè)計繪制，間距統(tǒng)一，各個模塊清晰。按模塊順序設(shè)計繪制，間距適當，各個模塊清晰。升項目實施效率與效果。內(nèi)容呈現(xiàn)內(nèi)容完整呈現(xiàn)一級模塊二級模塊，清晰有序，標題設(shè)計統(tǒng)一。內(nèi)容完整呈現(xiàn)一級模塊二級模塊，清晰有序，標題完整。內(nèi)容完整，呈現(xiàn)一級模塊清晰有序，標題完整。（四）項目效果輸出保存了設(shè)計原文件；輸出JPG文件，無白邊；并提供了工程文件截圖（帶參考線），清晰無誤。保存了設(shè)計原文件輸出JPG文件提供了工程文件截圖（帶參考線工輸出JPG文件，并提供了工程文件截圖（帶參考線工實施10分鐘觀察并指導學生遇到的問題，給予學生必要的個性化指導或操作演示。.依據(jù)產(chǎn)品架構(gòu)圖與本組的項目方案，遵循IOS設(shè)計規(guī)范，使用軟件繪制原型圖。.保存設(shè)計源文件，將JPG格式效果圖與工程文件截圖（帶標尺與參考線）上傳到實訓室FTP。.遇到問題時，進行探究學習，并主動尋求組內(nèi)協(xié)作與教師指導。并在《實訓手冊》中記錄問題以及解決措施、解決效果等。.微課視頻：詳細教授形狀工具技能操作，學生可根據(jù)需要多次觀看，自主學習。改善了傳統(tǒng)教學實訓過程中，教師疲于應(yīng)對多名學生，輔導不到位的困境。有助于學生實現(xiàn)能力目標并突破難點問題。.實訓手冊：通過問題預設(shè)，以圖文形式提供問題預設(shè)與解決建議，傳授教師經(jīng)驗，協(xié)助學生快速解決問題，提升制作效率。并以文字形式記錄學生實訓過程中遇到的問題以及解決措施，督促學生總結(jié)反思。.使用微課視頻、學習課件兩種資源，通過自主學習、合作學習、教師指導三種形式突破教學難點，實現(xiàn)技能目標。.通過評價標準引領(lǐng)，設(shè)計規(guī)范矯正、教師指導糾正三種途徑落實素養(yǎng)目標。

（五）項目評價15分鐘小組評價展示：組織小組互評與作品展示介紹。參與學生的發(fā)言，總結(jié)各組學生的總體表現(xiàn)和實訓效果，給予學生正面的評價和鼓勵。小組評價展示：根據(jù)評價標準，填寫實訓手冊中的評價內(nèi)容，組內(nèi)自評，推選小組代表作品，進行展示與發(fā)言。文件服務(wù)器系統(tǒng)：快速獲取并展示學生作品，提高課堂效率依據(jù)評價標準進行自評、互評，突出制作要求與設(shè)計規(guī)范，再次落實教學目標，并強化重難點問題的學習效果。教師總結(jié)評價：結(jié)合學生作品表現(xiàn)、學習過程進行總結(jié)：.突出本次實訓課程的重難點，重點強調(diào)嚴謹規(guī)范的職業(yè)意識與精益求精的工匠精神。.推薦專業(yè)的快速原型設(shè)計工具AxureRP與學習路徑，提高工作效率與質(zhì)量。教師總結(jié)評價：.回答教師提問，反思自我不足。鞏固本次實訓課所學的崗位知識和技能，感受“設(shè)計之美，永無止境，細節(jié)決定成敗”的職業(yè)理念。.（課后）登錄騰訊課堂可獲取大量免費AxureRP以及UI學習視頻資源。.實訓手冊：通過任務(wù)評價單，提供評價標準，規(guī)范有效評價。.網(wǎng)絡(luò)資源：（騰訊課堂），拓展課堂所學，豐富技能，課堂延伸。鞏固知識、能力、素養(yǎng)目標，培養(yǎng)工匠精神，落實課程思政，并引導學生認知自我不足，明確后續(xù)努力方向。三課后延伸（一）崗位知識學習發(fā)布學習資料，指導學生學習“UI設(shè)計規(guī)范”。通過微課自主學習“UI設(shè)計規(guī)范”。微課：提高學習效率，提升學習興趣，支撐學生自主學習。為完成UI設(shè)計效果圖繪制進行崗位知識準備。（二）界面效果繪制.為學生提供原型圖與界面設(shè)計效果圖對比案例，并提供案例操作視頻。.與學生交流討論，指導學生修改完善作品。.依據(jù)“原型圖”，遵循“UI設(shè)計規(guī)范”，進行實操，繪制界面效果圖。.根據(jù)個人技能程度與需要，選擇性觀看教師提供的完整案例操作視頻。.學習平臺提交JPG預覽圖與使用效果圖。.學習平臺：發(fā)布學習資源，收取學生作品資料，云端安全存儲。.案例視頻：教授后續(xù)流程《界面設(shè)計實操》關(guān)鍵技能，拓展課堂學習。完成后續(xù)課程（界面效果設(shè)計）的課前預習任務(wù)，與后續(xù)任務(wù)有機結(jié)合，課堂延伸。課后反思

附件：實訓手冊 專業(yè)：數(shù)字影像技術(shù)班級：平面設(shè)計姓名：小組：一、學習指南1.課題名稱：校園融媒體手機應(yīng)用界面設(shè)計-原型圖繪制2.學習目標：知識：理解并掌握IOS界面設(shè)計規(guī)范。能力：根據(jù)用戶需求與產(chǎn)品架構(gòu)圖，完成“校園融媒體”產(chǎn)品原型圖設(shè)計。素養(yǎng)：通過對IOS界面設(shè)計規(guī)范的學習與運用，感受嚴謹規(guī)范的職業(yè)意識與精益求精的工匠精神。3.學習任務(wù)：（1）項目領(lǐng)取：學習《任務(wù)書》，了解項目主題與制作要求。（2）項目分析：結(jié)合制作要求，對“產(chǎn)品架構(gòu)圖”進行分析。（3）方案制定：遵循IOS設(shè)計規(guī)范制定實施方案。（4）項目實施：依據(jù)實施方案，使用工具軟件繪制產(chǎn)品原型圖。（5）項目評價：呈現(xiàn)完成效果，依據(jù)制作要求與設(shè)計規(guī)范進行評價、提升任務(wù)質(zhì)量。二、項目說明任務(wù)書項目主題：項目主題為“校園融媒體手機應(yīng)用開發(fā)”，該項目是我校“人民網(wǎng)融媒體工程師學院”重點推進內(nèi)容。前端設(shè)計由校方負責，后端開發(fā)由企業(yè)方負責，校企合作共同完成。階段任務(wù)為在產(chǎn)品架構(gòu)圖的基礎(chǔ)上完成原型圖設(shè)計。制作要求：根據(jù)產(chǎn)品功能架構(gòu)圖，整理繪制首頁原型圖。.規(guī)范：遵循IOS系統(tǒng)規(guī)范，各元件齊全。.規(guī) 格 ：750PX*1334Px為基礎(chǔ)，如果內(nèi)容過多可根據(jù)設(shè)計需要適當增加頁面長度。.布局：布局設(shè)計合理，按模塊順序設(shè)計繪制，各個模塊清晰有序。.內(nèi)容：需要在首頁呈現(xiàn)一級模塊區(qū)域與標題，可根據(jù)設(shè)計需要決定是否呈現(xiàn)二級模塊內(nèi)容。.輸出：提交工程文件截圖（帶參考線）與JPG格式原型圖。產(chǎn)品架構(gòu)圖：一附nne幽―那Rga一惟一品生校?由工作］-刖圻創(chuàng)業(yè)1中―］—|更各凝|樂就就舌事一狀志欄-, , 1, .-―Alt人民同段印靠悼工柞曜「導晅柱--首頁■_專業(yè)特巴包設(shè)卜 口 廠 —由血小，變曲- |J , .—［電7堿―SE-—「拒―調(diào)案 —\社金曰飾出卜 兩業(yè)項目承員:―項目—■“政克號攔卜 _梧圖皆動

三、項目流程1項目領(lǐng)取制作要求：規(guī)范：遵循（EIIOS/ElAndroid）系統(tǒng)規(guī)范進行排版。規(guī)格：以（）PX*（）PX為基礎(chǔ)，如果內(nèi)容過多（口可以/口不可以）根據(jù)需要適當增加頁面長度。（3）布局：布局設(shè)計合理，按（）順序設(shè)計繪制，各個模塊清晰有序。（4）內(nèi)容：需要在首頁呈現(xiàn)（）模塊區(qū)域與標題，可根據(jù)設(shè)計需要決定是否呈現(xiàn)二級模塊內(nèi)容。（5）交付：提交（EJPG/EPNG/EGIF/EPSD）格式原型圖與提交出工程文件截圖，帶（ ）。2項目分析（1）系統(tǒng)元件包括：（ ）欄一（）PX、（ ）欄一（）PX、（ ）欄一（）PX。（2）內(nèi)容區(qū)域包括：Banner區(qū)：（）個一級模塊：（）個二級模塊：（）個3方案制定界面布局：繪制圖例：口列表式口陳列館式口九宮館式口選項卡式口旋轉(zhuǎn)木馬口行為擴展式口多面板式口圖表式口其它樣式： 方案說明：□通過審核/口修改后通過/口不予通過；指導意見：4項目實施請簡述你在操作過程中遇到了哪些問題？是否解決？解決問題方法或途徑是什么？（也可總結(jié)關(guān)鍵技術(shù)的使用技巧或者學習體會。遇到問題：解決措施：解決效果：

5項目評價評價項目評價內(nèi)容評價標準自評組評師評優(yōu)秀（9-10分）良好（7-8分）合格（6分）過程評價50分課刖學習態(tài)度端正，主動學習，認真完成各項課前學習任務(wù)，檢測正確率在85%以上。認真完成各項課前學習任務(wù)，檢測正確率在75%以上。能夠完成各項課前學習任務(wù)檢測正確率在60%以上。項目領(lǐng)取理解項目主題制作要求，理解設(shè)計規(guī)范。了解項目主題、制作要求，理解設(shè)計規(guī)范。基本了解項目主題、制作要求、設(shè)計規(guī)范。項目分析根據(jù)客戶需求與崗位知識，能夠全面、準確地分析出所有制作規(guī)格要點。能夠分析所有制作規(guī)格要點，無重大偏差。根據(jù)客戶需求與崗位知識，能夠理解主要的制作規(guī)格要點。方案制定設(shè)計方案符合制作要求與產(chǎn)品架構(gòu)圖示意，遵循設(shè)計規(guī)范各元件與各模塊清晰呈現(xiàn)，設(shè)計合理有序。設(shè)計方案符合制作要求與產(chǎn)品架構(gòu)圖示意，遵循設(shè)計規(guī)范，各元件與各模塊，設(shè)計合理。設(shè)計方案基本符合制作要求與產(chǎn)品架構(gòu)圖示意遵循設(shè)計規(guī)范。項目實施能夠組織小組研討并