《圖形創(chuàng)意（微課版）》 教案 課題7、8 VI設(shè)計(jì)-“果之怡”品牌VI圖形創(chuàng)意、UI設(shè)計(jì)-天氣預(yù)報(bào)App圖形創(chuàng)意

任課教師專業(yè)日期年月日教學(xué)課題VI設(shè)計(jì)—“果之怡”品牌VI圖形創(chuàng)意課時(shí)6課時(shí)所選教材《圖形創(chuàng)意（微課版）》教學(xué)班級(jí)一、教學(xué)目標(biāo)1.學(xué)習(xí)目標(biāo)（1）熟悉VI設(shè)計(jì)的基本原則；（2）熟悉VI設(shè)計(jì)的主要內(nèi)容；（3）掌握VI設(shè)計(jì)中的圖形創(chuàng)意技巧；（4）完成“果之怡”品牌VI圖形創(chuàng)意實(shí)踐。2.素養(yǎng)目標(biāo)（1）培養(yǎng)VI設(shè)計(jì)的實(shí)踐能力和創(chuàng)造力；（2）培養(yǎng)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)態(tài)度和良好的圖形把控能力。二、教學(xué)重難點(diǎn)1.教學(xué)重點(diǎn)（1）VI設(shè)計(jì)的基本原則；（2）VI設(shè)計(jì)的主要內(nèi)容；（3）VI設(shè)計(jì)中的圖形創(chuàng)意技巧；（4）設(shè)計(jì)與制作標(biāo)志和輔助圖形以及VI應(yīng)用部分。2.教學(xué)難點(diǎn)（1）VI設(shè)計(jì)中的圖形創(chuàng)意技巧；（2）設(shè)計(jì)與制作標(biāo)志和輔助圖形以及VI應(yīng)用部分。三、教學(xué)方式與資源1.教學(xué)方式課堂講授+案例分析+課堂討論+拓展案例+綜合實(shí)訓(xùn)+知識(shí)拓展2.教學(xué)資源一體化教室、外網(wǎng)、PPT、筆記本、筆。四、教學(xué)過程教學(xué)流程活動(dòng)設(shè)計(jì)案例展示【第一、二節(jié)課】1.課前討論（10分鐘）VI設(shè)計(jì)包含的應(yīng)用范圍非常廣，請(qǐng)掃描書中的“圖片：課前討論”二維碼，欣賞其中列舉的作品，分析其中的VI設(shè)計(jì)，思考以下問題。（1）該作品中VI設(shè)計(jì)內(nèi)容具體包含哪些？（2）該作品中主要的圖形是什么？起著怎樣的作用？2.先講解本堂課需要了解的項(xiàng)目描述和項(xiàng)目目標(biāo)。（10分鐘）3．然后講解本項(xiàng)目需要的知識(shí)準(zhǔn)備（70分鐘）（1）VI設(shè)計(jì)的基本原則?統(tǒng)一性原則規(guī)范性原則美觀性原則獨(dú)特性原則原創(chuàng)性原則（2）VI設(shè)計(jì)的主要內(nèi)容設(shè)計(jì)師在進(jìn)行VI設(shè)計(jì)前，需要確定標(biāo)志、標(biāo)準(zhǔn)字體、標(biāo)準(zhǔn)色彩、輔助圖形、標(biāo)語等基本要素，避免制作后的效果不符合要求。（3）VI設(shè)計(jì)中的圖形創(chuàng)意技巧①標(biāo)志圖形創(chuàng)意技巧標(biāo)志圖形的主要作用是傳達(dá)理念和特色，設(shè)計(jì)師在設(shè)計(jì)標(biāo)志圖形時(shí)可以根據(jù)企業(yè)、品牌、組織的名稱和行業(yè)，進(jìn)行具象化或抽象化設(shè)計(jì)。②輔助圖形創(chuàng)意技巧提取標(biāo)志局部將標(biāo)志中部分元素和其他個(gè)性化元素相結(jié)合重新打造與標(biāo)志具有強(qiáng)關(guān)聯(lián)，但更具感染力的輔助圖形重新打造與標(biāo)志不相關(guān)，但與品牌、企業(yè)、行業(yè)、自身風(fēng)格氣質(zhì)相關(guān)的輔助圖形（通常用在僅有文字標(biāo)志的情況下）1.老師圍繞VI設(shè)計(jì)提出問題，學(xué)生展開討論，老師解答學(xué)生討論過程中產(chǎn)生的問題2.老師在講解過程中通過案例輔助講解VI設(shè)計(jì)的相關(guān)知識(shí)，加強(qiáng)學(xué)生對(duì)知識(shí)點(diǎn)的理解與應(yīng)用1.中國郵政VI設(shè)計(jì)2.港中國際貨運(yùn)代理（廣州）有限公司VI設(shè)計(jì)（LAZYstudio）3.具象化標(biāo)志圖形（豌豆莢標(biāo)志）4.抽象化標(biāo)志圖形（紅點(diǎn)設(shè)計(jì)大獎(jiǎng)標(biāo)志）【第三、四節(jié)課】1.課前回顧（10分鐘）先對(duì)前一堂課所講述的內(nèi)容進(jìn)行回顧，讓學(xué)生鞏固已學(xué)知識(shí)。2.講解項(xiàng)目實(shí)施（80分鐘）（1）先講解“果之怡”品牌VI設(shè)計(jì)構(gòu)思①標(biāo)志構(gòu)思②標(biāo)準(zhǔn)字體構(gòu)思③標(biāo)準(zhǔn)色彩構(gòu)思④輔助圖形構(gòu)思⑤應(yīng)用場(chǎng)景圖形構(gòu)思（2）然后講解制作標(biāo)志和輔助圖形①制作標(biāo)志②制作輔助圖形1.老師提問學(xué)生，讓學(xué)生回答上一堂課所講述內(nèi)容2.理論講解的過程中配合案例步驟進(jìn)行說明，加強(qiáng)學(xué)生對(duì)知識(shí)點(diǎn)的鞏固與訓(xùn)練，提升學(xué)生的實(shí)操能力1.標(biāo)志構(gòu)思過程2.VI設(shè)計(jì)標(biāo)準(zhǔn)字體方案3.VI設(shè)計(jì)配色方案4.輔助圖形構(gòu)思過程5.名片構(gòu)思6.包裝貼紙構(gòu)思7.標(biāo)價(jià)牌構(gòu)思8.其他應(yīng)用場(chǎng)景構(gòu)思【第五、六節(jié)課】1.課前回顧（5分鐘）先對(duì)前一堂課所講述的內(nèi)容進(jìn)行回顧，讓學(xué)生鞏固已學(xué)知識(shí)。2.繼續(xù)講解項(xiàng)目實(shí)施中的制作VI應(yīng)用部分（40）①制作名片②制作包裝貼紙③制作標(biāo)價(jià)牌和其他應(yīng)用場(chǎng)景2.項(xiàng)目實(shí)訓(xùn)（45分鐘）本項(xiàng)目要求為“云開”新能源公司設(shè)計(jì)VI，需要根據(jù)下方提供的設(shè)計(jì)任務(wù)單進(jìn)行分析、收集素材、圖形創(chuàng)意，然后制作出符合要求的VI設(shè)計(jì)作品。項(xiàng)目名稱“云開”新能源公司VI設(shè)計(jì)項(xiàng)目項(xiàng)目背景“云開”新能源公司是一家從事風(fēng)能和水能開發(fā)的新能源公司，由于新成立不久，準(zhǔn)備加強(qiáng)公司宣傳，需要設(shè)計(jì)師根據(jù)企業(yè)從事的業(yè)務(wù)進(jìn)行VI設(shè)計(jì)，用于向內(nèi)部員工、求職人員、企業(yè)客戶傳達(dá)企業(yè)定位，提升企業(yè)知名度和影響力，從而吸引更多年輕人進(jìn)入本企業(yè)作品主題“云開”新能源作品形式計(jì)算機(jī)制作，矢量文件格式作品數(shù)量品牌標(biāo)志1個(gè)，輔助圖形和VI應(yīng)用場(chǎng)景效果若干效果要求①設(shè)計(jì)風(fēng)格：簡(jiǎn)約、自然、穩(wěn)重，與公司的新能源行業(yè)屬性相適應(yīng)②文字設(shè)計(jì)：對(duì)標(biāo)志、圖案和辦公用品中的字體進(jìn)行設(shè)計(jì)，標(biāo)志文字要具備設(shè)計(jì)感，其他文字要具備識(shí)別性和美觀性③色彩設(shè)計(jì)：色彩要與風(fēng)能、水能業(yè)務(wù)具有一定的關(guān)聯(lián)性，色調(diào)統(tǒng)一④圖形創(chuàng)意：包括標(biāo)志圖形和輔助圖形，圖形要具備風(fēng)能和水能的特征，使人在看到圖形的同時(shí)，了解企業(yè)業(yè)務(wù)，從而起到宣傳企業(yè)的作用⑤應(yīng)用場(chǎng)景：需要在多個(gè)辦公應(yīng)用場(chǎng)景中體現(xiàn)，具體的設(shè)計(jì)作品包括名片、工作證、紙杯、檔案袋、信封等1.老師提問學(xué)生，讓學(xué)生回答上一堂課所講述內(nèi)容2.理論講解的過程中配合案例步驟進(jìn)行說明，加強(qiáng)學(xué)生對(duì)知識(shí)點(diǎn)的鞏固與訓(xùn)練，提升學(xué)生的實(shí)操能力3.學(xué)生自主展開項(xiàng)目實(shí)訓(xùn)，獨(dú)立自主完成任務(wù)操作，老師巡視課堂，檢查學(xué)生完成情況，對(duì)學(xué)生操作過程的的疑難問題進(jìn)行解答額和指導(dǎo)4.老師篩選出具有代表性的學(xué)生作品進(jìn)行展示并點(diǎn)評(píng)五、課后作業(yè)1.本小節(jié)學(xué)習(xí)體會(huì)2.進(jìn)行拓展訓(xùn)練3.下一堂課的預(yù)習(xí)六、教學(xué)反思（教師填寫）任課教師專業(yè)日期年月日教學(xué)課題UI設(shè)計(jì)—天氣預(yù)報(bào)App圖形創(chuàng)意課時(shí)6課時(shí)所選教材《圖形創(chuàng)意（微課版）》教學(xué)班級(jí)一、教學(xué)目標(biāo)1.學(xué)習(xí)目標(biāo)（1）熟悉UI設(shè)計(jì)基本內(nèi)容；（2）掌握UI設(shè)計(jì)圖形創(chuàng)意規(guī)范；（3）完成天氣預(yù)報(bào)App?UI圖形創(chuàng)意實(shí)踐。2.素養(yǎng)目標(biāo)（1）培養(yǎng)在UI設(shè)計(jì)中嚴(yán)謹(jǐn)細(xì)致和以用戶體驗(yàn)為主的設(shè)計(jì)態(tài)度；（2）培養(yǎng)在UI設(shè)計(jì)中合理規(guī)劃界面的邏輯思維。二、教學(xué)重難點(diǎn)1.教學(xué)重點(diǎn)（1）UI設(shè)計(jì)基本內(nèi)容；（2）UI圖形設(shè)計(jì)規(guī)范；（3）天氣預(yù)報(bào)App圖標(biāo)制作；（4）天氣預(yù)報(bào)App界面制作。2.教學(xué)難點(diǎn)（1）天氣預(yù)報(bào)App圖標(biāo)制作；（2）天氣預(yù)報(bào)App界面制作。三、教學(xué)方式與資源1.教學(xué)方式課堂講授+案例分析+課堂討論+拓展案例+綜合實(shí)訓(xùn)+知識(shí)拓展2.教學(xué)資源一體化教室、外網(wǎng)、PPT、筆記本、筆。四、教學(xué)過程教學(xué)流程活動(dòng)設(shè)計(jì)案例展示【第一、二節(jié)課】1.課前討論（10分鐘）UI設(shè)計(jì)的整體視覺效果會(huì)受到界面圖形、布局、配色、字體排版等多方面的綜合影響，請(qǐng)掃描書稿中“圖片：課前討論”二維碼，欣賞其中列舉的不同天氣預(yù)報(bào)類App界面，思考以下問題。（1）每個(gè)作品中的圖形主要有哪些？（2）你認(rèn)為這些圖形對(duì)UI設(shè)計(jì)的整體視覺效果有怎樣的影響？2.先講解本堂課需要了解的項(xiàng)目描述和項(xiàng)目目標(biāo)。（10分鐘）3．然后講解本項(xiàng)目需要的知識(shí)準(zhǔn)備（70分鐘）（1）UI設(shè)計(jì)基本內(nèi)容①圖標(biāo)設(shè)計(jì)圖標(biāo)設(shè)計(jì)是指將某些實(shí)體活動(dòng)以及真實(shí)、幻想或抽象的動(dòng)機(jī)做成圖形符號(hào)的過程，用于幫助用戶理解與吸引用戶視線，是用戶成功進(jìn)行交互和提高用戶體驗(yàn)的關(guān)鍵一環(huán)，也是UI設(shè)計(jì)中的圖形創(chuàng)意重點(diǎn)。②手機(jī)界面設(shè)計(jì)手機(jī)界面是用戶與手機(jī)系統(tǒng)、應(yīng)用交互的窗口，手機(jī)界面設(shè)計(jì)必須基于手機(jī)設(shè)備的物理特性和系統(tǒng)應(yīng)用的特性，針對(duì)手機(jī)中的各種頁面，以及用戶在手機(jī)上的瀏覽習(xí)慣，進(jìn)行界面設(shè)計(jì)。手機(jī)界面的組成包括狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)域和標(biāo)簽欄組成，每個(gè)區(qū)域?qū)?yīng)的內(nèi)容不同。③網(wǎng)站頁面設(shè)計(jì)網(wǎng)站頁面設(shè)計(jì)則是根據(jù)集合內(nèi)容和不同使用需求對(duì)網(wǎng)站頁面進(jìn)行規(guī)劃和美化，網(wǎng)站頁面中的圖形設(shè)計(jì)應(yīng)該風(fēng)格統(tǒng)一，每個(gè)頁面干凈直觀，以一個(gè)主色調(diào)為主，配上合適的文字和圖形，讓用戶流暢、舒適，愉快地接收信息，與網(wǎng)站頁面進(jìn)行交互。④應(yīng)用軟件界面設(shè)計(jì)應(yīng)用軟件界面設(shè)計(jì)主要是指針對(duì)應(yīng)用軟件的不同界面功能進(jìn)行設(shè)計(jì)。設(shè)計(jì)師在設(shè)計(jì)應(yīng)用軟件界面時(shí)，應(yīng)統(tǒng)一不同界面的風(fēng)格，并在不同界面中保留相同的圖形元素，使界面之間互有關(guān)聯(lián)。（2）UI圖形設(shè)計(jì)規(guī)范①圖標(biāo)設(shè)計(jì)規(guī)范②按鈕設(shè)計(jì)規(guī)范1.老師圍繞UI設(shè)計(jì)提出問題，學(xué)生展開討論，老師解答學(xué)生討論過程中產(chǎn)生的問題2.老師在講解過程中通過案例輔助說明UI設(shè)計(jì)的相關(guān)知識(shí)，加強(qiáng)學(xué)生對(duì)知識(shí)點(diǎn)的理解與應(yīng)用1.中國農(nóng)業(yè)銀行App界面2.Monsters網(wǎng)頁（ByAfterglow）3.某數(shù)據(jù)平臺(tái)應(yīng)用軟件界面4.某應(yīng)用程序的啟動(dòng)圖標(biāo)5.美團(tuán)界面的功能型圖標(biāo)6.某APP的修飾型圖標(biāo)7.各種按鈕的標(biāo)注8.不同狀態(tài)按鈕的視覺效果【第三、四節(jié)課】1.課前回顧（10分鐘）先對(duì)前一堂課所講述的內(nèi)容進(jìn)行回顧，讓學(xué)生鞏固已學(xué)知識(shí)。2.講解項(xiàng)目實(shí)施（80分鐘）（1）先講解天氣預(yù)報(bào)App圖形設(shè)計(jì)構(gòu)思啟動(dòng)圖標(biāo)設(shè)計(jì)構(gòu)思天氣預(yù)報(bào)設(shè)計(jì)圖標(biāo)構(gòu)思?xì)庀髨D標(biāo)設(shè)計(jì)構(gòu)思建議信息圖標(biāo)設(shè)計(jì)構(gòu)思（2）然后講解天氣預(yù)報(bào)App原型圖繪制（3）最后講解天氣預(yù)報(bào)App圖標(biāo)制作1.老師提問學(xué)生，讓學(xué)生回答上一堂課所講述內(nèi)容2.理論講解的過程中配合案例步驟進(jìn)行說明，加強(qiáng)學(xué)生對(duì)知識(shí)點(diǎn)的鞏固與訓(xùn)練，提升學(xué)生的實(shí)操能力1.啟動(dòng)圖標(biāo)設(shè)計(jì)構(gòu)思2.天氣預(yù)報(bào)圖標(biāo)設(shè)計(jì)構(gòu)思3.氣象圖標(biāo)設(shè)計(jì)構(gòu)思4.建議信息圖標(biāo)設(shè)計(jì)構(gòu)思5.天氣預(yù)報(bào)App原型圖【第五、六節(jié)課】1.課前回顧（5分鐘）先對(duì)前一堂課所講述的內(nèi)容進(jìn)行回顧，讓學(xué)生鞏固已學(xué)知識(shí)。2.繼續(xù)講解項(xiàng)目實(shí)施中的天氣預(yù)報(bào)App界面制作（40分鐘）3.項(xiàng)目實(shí)訓(xùn)（45分鐘）本項(xiàng)目要求為旅游網(wǎng)制作登錄頁，要求用新穎的插畫風(fēng)格進(jìn)行登錄頁圖形創(chuàng)意，需要根據(jù)下方提供的設(shè)計(jì)任務(wù)單進(jìn)行分析、收集素材、繪制草圖、圖形創(chuàng)意制作，然后制作出符合要求的網(wǎng)頁頁面設(shè)計(jì)作品。項(xiàng)目名稱旅游網(wǎng)登錄頁UI設(shè)計(jì)項(xiàng)目背景長(zhǎng)假即將來臨，某旅游網(wǎng)站想重新設(shè)計(jì)登錄頁，使登錄頁效果更加簡(jiǎn)約、生動(dòng)、美觀，更能吸引用戶注冊(cè)、登錄，增加用戶對(duì)該旅游網(wǎng)的好感作品主題旅游網(wǎng)登錄頁作品規(guī)格1920px×1080px效果要求①風(fēng)格：扁平插畫風(fēng)格，簡(jiǎn)約、清新②字體：宜選擇易識(shí)別、簡(jiǎn)潔、端正的字體③圖形創(chuàng)意：符合旅游行業(yè)屬性，以現(xiàn)實(shí)中的自然風(fēng)景素材為圖形創(chuàng)意靈感，運(yùn)用圖形創(chuàng)意構(gòu)圖方式和表現(xiàn)手法，設(shè)計(jì)出符合形式美法則的圖形，需要能帶來舒適的視覺感受，讓用戶對(duì)該旅游網(wǎng)站留下好印象④色彩：采用清爽的、與