移動(dòng)UI設(shè)計(jì)-課程標(biāo)準(zhǔn)(教學(xué)大綱)及-教案全套-

《移動(dòng)UI設(shè)計(jì)（微課版）》課程標(biāo)準(zhǔn)XXXX學(xué)校二〇二二年月

一、課程基本信息【課程名稱】移動(dòng)UI設(shè)計(jì)（微課版）【適用專業(yè)】數(shù)字媒體與藝術(shù)設(shè)計(jì)專業(yè)【開(kāi)課時(shí)間】第X學(xué)期【課程類型】專業(yè)基礎(chǔ)課/專業(yè)核心課/專業(yè)拓展課等二、課程性質(zhì)與任務(wù)課程性質(zhì)：《移動(dòng)UI設(shè)計(jì)（微課版）》是數(shù)字媒體與藝術(shù)設(shè)計(jì)專業(yè)的一門核心專業(yè)課程，依據(jù)職業(yè)能力的要求，主要對(duì)移動(dòng)UI設(shè)計(jì)、iOS和Android系統(tǒng)移動(dòng)設(shè)備界面的結(jié)構(gòu)及設(shè)計(jì)規(guī)范等相關(guān)知識(shí)進(jìn)行梳理和講解，主要介紹了移動(dòng)UI設(shè)計(jì)基礎(chǔ)知識(shí)、移動(dòng)UI的策劃與原型設(shè)計(jì)方法、移動(dòng)UI的色彩搭配方法、移動(dòng)圖標(biāo)的設(shè)計(jì)方法、移動(dòng)App的UI設(shè)計(jì)方法、移動(dòng)App的交互設(shè)計(jì)、適配與輸出移動(dòng)UI設(shè)計(jì)的方法和設(shè)計(jì)與制作移動(dòng)App項(xiàng)目的相關(guān)知識(shí)等八部分內(nèi)容。隨著科技的發(fā)展，手機(jī)與人們生活的聯(lián)系日益密切。手機(jī)中的軟件系統(tǒng)是用戶直接操作的對(duì)象，它以精美的視覺(jué)效果和便捷的操作為用戶所青睞，進(jìn)而促進(jìn)了移動(dòng)UI設(shè)計(jì)行業(yè)的興盛。本課程使學(xué)生進(jìn)一步了解移動(dòng)UI設(shè)計(jì)的相關(guān)知識(shí)，在項(xiàng)目的實(shí)踐過(guò)程中激發(fā)學(xué)生的創(chuàng)新意識(shí)，促使學(xué)生加深掌握移動(dòng)UI設(shè)計(jì)的基本知識(shí)，使學(xué)生實(shí)現(xiàn)從學(xué)校到社會(huì)的平滑過(guò)渡。課程任務(wù)：通過(guò)學(xué)習(xí)移動(dòng)UI設(shè)計(jì)等相關(guān)理論知識(shí)，不僅促使學(xué)生具備移動(dòng)UI設(shè)計(jì)相關(guān)的理論知識(shí)和行業(yè)素養(yǎng)，同時(shí)也有助于培養(yǎng)學(xué)生發(fā)現(xiàn)問(wèn)題、分析問(wèn)題、解決問(wèn)題的能力，使學(xué)生能夠具有相對(duì)良好的溝通、交流和協(xié)調(diào)能力，培養(yǎng)良好的職業(yè)道德和行為素養(yǎng)，為后續(xù)的課程學(xué)習(xí)和職業(yè)發(fā)展打下堅(jiān)實(shí)的基礎(chǔ)。 三、職業(yè)崗位標(biāo)準(zhǔn)1．典型職業(yè)活動(dòng)移動(dòng)UI設(shè)計(jì)師等。2．典型職業(yè)崗位標(biāo)準(zhǔn)（或工作內(nèi)容、職責(zé)）、技術(shù)等級(jí)標(biāo)準(zhǔn)職業(yè)功能移動(dòng)UI設(shè)計(jì)師工作內(nèi)容負(fù)責(zé)軟件界面的美術(shù)設(shè)計(jì)、創(chuàng)意工作和制作工作；根據(jù)各種相關(guān)軟件的用戶群，提出構(gòu)思新穎、有高度吸引力的創(chuàng)意設(shè)計(jì)；對(duì)頁(yè)面進(jìn)行優(yōu)化，使用戶操作更趨于人性化；維護(hù)現(xiàn)有的應(yīng)用產(chǎn)品。相關(guān)知識(shí)藝術(shù)設(shè)計(jì)，多媒體設(shè)計(jì)，動(dòng)畫設(shè)計(jì)，工業(yè)設(shè)計(jì)等相關(guān)設(shè)計(jì)藝術(shù)專業(yè)；可以獨(dú)立設(shè)計(jì)手機(jī)界面里的所有畫面元素，能夠原創(chuàng)圖標(biāo)及制作動(dòng)畫效果；熟練Photoshop，ai，F(xiàn)lash，或者其他設(shè)計(jì)軟件；有扎實(shí)的美術(shù)功底和審美能力，富有創(chuàng)新精神，有良好的平面設(shè)計(jì)和造型設(shè)計(jì)能力；有較強(qiáng)的學(xué)習(xí)能力，能不斷的跟蹤學(xué)習(xí)，新的設(shè)計(jì)理念和流行趨勢(shì)；對(duì)移動(dòng)互聯(lián)網(wǎng)及移動(dòng)終端手機(jī)UI軟件行業(yè)發(fā)展有深刻的理解。3．主要職業(yè)能力培養(yǎng)學(xué)生嚴(yán)謹(jǐn)認(rèn)真的工作態(tài)度和終身學(xué)習(xí)的習(xí)慣；培養(yǎng)學(xué)生在實(shí)際工作中遵守相關(guān)規(guī)范和要求；豐富學(xué)生的知識(shí)結(jié)構(gòu)，提升專業(yè)技能；培養(yǎng)良好的人際溝通能力和團(tuán)隊(duì)互助的精神；培養(yǎng)學(xué)生自我學(xué)習(xí)、勇于創(chuàng)新、積極承擔(dān)不同角色的能力。四、課程教學(xué)目標(biāo)1．課程總體目標(biāo)本課程根據(jù)數(shù)字媒體與藝術(shù)設(shè)計(jì)專業(yè)學(xué)生將來(lái)工作過(guò)程中所必須具備的綜合職業(yè)能力出發(fā)，應(yīng)用先進(jìn)教學(xué)方法和教學(xué)理論，優(yōu)化和整合教學(xué)內(nèi)容，將基于移動(dòng)UI設(shè)計(jì)與操作案例相結(jié)合，構(gòu)建一種創(chuàng)新型的《移動(dòng)UI設(shè)計(jì)》教學(xué)。本課程對(duì)移動(dòng)UI設(shè)計(jì)、iOS和Android系統(tǒng)移動(dòng)設(shè)備界面的結(jié)構(gòu)及設(shè)計(jì)規(guī)范等相關(guān)知識(shí)進(jìn)行了梳理和講解，主要通過(guò)案例操作的形式，希望通過(guò)分析案例操作的過(guò)程，使學(xué)生能夠逐步培養(yǎng)自我思考、自我分析的能力，同時(shí)提升專業(yè)技能。從而促進(jìn)學(xué)生的綜合能力的全面提升，充分滿足社會(huì)對(duì)于適應(yīng)型人才的需求。2．職業(yè)能力目標(biāo)：掌握移動(dòng)UI設(shè)計(jì)、移動(dòng)UI的系統(tǒng)分類、移動(dòng)UI設(shè)計(jì)流程、移動(dòng)UI設(shè)計(jì)原則和移動(dòng)UI設(shè)計(jì)流程的職位劃分。掌握移動(dòng)UI目標(biāo)用戶、移動(dòng)UI策劃書、思維導(dǎo)圖、繪制思維導(dǎo)圖的常用軟件、繪制移動(dòng)UI思維導(dǎo)圖、繪制UI草圖、繪制原型的常用軟件和繪制移動(dòng)UI原型圖。掌握色彩搭配方法與配色方法、構(gòu)建移動(dòng)UI顏色系統(tǒng)和移動(dòng)UI色彩搭配的注意事項(xiàng)。掌握?qǐng)D標(biāo)設(shè)計(jì)常用軟件、圖標(biāo)柵格系統(tǒng)、圖標(biāo)設(shè)計(jì)形式、App圖標(biāo)的分類、圖標(biāo)尺寸和圖標(biāo)組設(shè)計(jì)規(guī)范。掌握移動(dòng)UI的基本元素、常見(jiàn)的UI設(shè)計(jì)軟件、移動(dòng)UI的設(shè)計(jì)基礎(chǔ)、移動(dòng)UI的字體規(guī)范、移動(dòng)UI圖片尺寸規(guī)范和移動(dòng)App內(nèi)容布局。掌握常見(jiàn)的交互設(shè)計(jì)軟件、交互設(shè)計(jì)的基本流程、移動(dòng)UI交互的類型、動(dòng)效在UI中的作用和交互設(shè)計(jì)需要遵循的習(xí)慣。掌握標(biāo)注的重要性、常見(jiàn)的標(biāo)注軟件、標(biāo)注移動(dòng)UI、移動(dòng)UI標(biāo)注規(guī)范、輸出與適配iOSUI設(shè)計(jì)和輸出與適配Android系統(tǒng)UI設(shè)計(jì)。掌握美妝電商App項(xiàng)目和美食外賣App項(xiàng)目的制作。五、課程內(nèi)容根據(jù)移動(dòng)UI設(shè)計(jì)相關(guān)工作內(nèi)容，總結(jié)出適應(yīng)學(xué)生特點(diǎn)的，并與數(shù)字媒體與藝術(shù)設(shè)計(jì)工作相關(guān)的基于移動(dòng)UI設(shè)計(jì)的知識(shí)，通過(guò)學(xué)習(xí)、分析操作案例。本書圍繞移動(dòng)UI設(shè)計(jì)，向讀者介紹了相關(guān)的基本知識(shí)和操作案例，構(gòu)建成體系的運(yùn)營(yíng)過(guò)程，為實(shí)際操作打下堅(jiān)實(shí)的基礎(chǔ)。本課程的學(xué)習(xí)內(nèi)容分解如下：課程內(nèi)容與教學(xué)要求序號(hào)名稱主要內(nèi)容教學(xué)要求建議學(xué)時(shí)第1章關(guān)于移動(dòng)UI設(shè)計(jì)了解移動(dòng)UI設(shè)計(jì)移動(dòng)UI的系統(tǒng)分類移動(dòng)UI設(shè)計(jì)流程移動(dòng)UI設(shè)計(jì)原則移動(dòng)UI設(shè)計(jì)流程的職位劃分講解移動(dòng)UI設(shè)計(jì)中的基礎(chǔ)知識(shí)，幫助學(xué)生快速了解移動(dòng)UI設(shè)計(jì)的基礎(chǔ)知識(shí)第2章移動(dòng)UI策劃與原型設(shè)計(jì)確定移動(dòng)UI目標(biāo)用戶完成移動(dòng)UI策劃書了解思維導(dǎo)圖繪制思維導(dǎo)圖的常用軟件繪制移動(dòng)UI思維導(dǎo)圖繪制移動(dòng)UI草圖了解原型設(shè)計(jì)繪制原型的常用軟件繪制移動(dòng)UI原型圖講解如何將客戶提出的抽象化描述轉(zhuǎn)化為具象化的移動(dòng)UI策劃和原型設(shè)計(jì)，轉(zhuǎn)化過(guò)程中使用的方法及常用軟件，幫助學(xué)生更好地完成每一款移動(dòng)UI產(chǎn)品的策劃與原型設(shè)計(jì)第3章優(yōu)秀的移動(dòng)UI色彩搭配認(rèn)識(shí)色彩和諧、統(tǒng)一的色彩搭配方法突出、對(duì)比的配色方法構(gòu)建移動(dòng)UI顏色系統(tǒng)移動(dòng)UI色彩搭配的注意事項(xiàng)講解如何為一款移動(dòng)App項(xiàng)目構(gòu)建符合設(shè)計(jì)主題的顏色系統(tǒng)，幫助學(xué)生掌握如何讓移動(dòng)UI的外觀變得更加出彩，從而可以吸引更多的用戶第4章出色的移動(dòng)圖標(biāo)設(shè)計(jì)初始App圖標(biāo)圖標(biāo)設(shè)計(jì)常用軟件熟悉圖標(biāo)柵格系統(tǒng)圖標(biāo)設(shè)計(jì)形式App圖標(biāo)的分類圖標(biāo)尺寸圖標(biāo)組設(shè)計(jì)規(guī)范講解圖標(biāo)相關(guān)的概念、設(shè)計(jì)形式和設(shè)計(jì)尺寸及設(shè)計(jì)制作方法，是學(xué)生進(jìn)入U(xiǎn)I設(shè)計(jì)行業(yè)的必備條件第5章移動(dòng)App的UI設(shè)計(jì)移動(dòng)UI的基本元素常見(jiàn)的UI設(shè)計(jì)軟件移動(dòng)UI的設(shè)計(jì)基礎(chǔ)移動(dòng)UI的字體規(guī)范移動(dòng)UI圖片尺寸規(guī)范移動(dòng)App內(nèi)容布局講解有關(guān)App界面的設(shè)計(jì)規(guī)范和設(shè)計(jì)技巧，使學(xué)生掌握App界面的設(shè)計(jì)規(guī)范和App界面的設(shè)計(jì)方法第6章移動(dòng)App交互設(shè)計(jì)了解UI交互設(shè)計(jì)常見(jiàn)的交互設(shè)計(jì)軟件交互設(shè)計(jì)的基本流程移動(dòng)UI交互的類型動(dòng)效在UI中的作用交互設(shè)計(jì)需要遵循的習(xí)慣講解有關(guān)移動(dòng)App交互設(shè)計(jì)的相關(guān)基礎(chǔ)知識(shí)，使學(xué)生掌握移動(dòng)App交互類型，并了解制作移動(dòng)App交互的繪制軟件和表現(xiàn)方法第7章適配與輸出移動(dòng)UI設(shè)計(jì)標(biāo)注的重要性常見(jiàn)的標(biāo)注軟件標(biāo)注移動(dòng)UI移動(dòng)UI標(biāo)注規(guī)范輸出與適配iOSUI設(shè)計(jì)輸出與適配Android系統(tǒng)UI設(shè)計(jì)講解標(biāo)注的重要性、常見(jiàn)的標(biāo)注軟件、標(biāo)注移動(dòng)UI和移動(dòng)UI標(biāo)注規(guī)范及輸出UI切片資源等內(nèi)容，使學(xué)生能夠理解標(biāo)注移動(dòng)UI和輸出切片資源的作用與條件，從而完成標(biāo)注和導(dǎo)出移動(dòng)AppUI的操作第8章設(shè)計(jì)與制作移動(dòng)App項(xiàng)目設(shè)計(jì)與制作美妝電商App項(xiàng)目設(shè)計(jì)與制作美食外賣App項(xiàng)目講解設(shè)計(jì)與制作兩個(gè)移動(dòng)UI項(xiàng)目，幫助學(xué)生鞏固前面所學(xué)的知識(shí)，同時(shí)加深學(xué)生對(duì)移動(dòng)UI設(shè)計(jì)規(guī)范的理解學(xué)時(shí)合計(jì)：學(xué)時(shí)六、教學(xué)實(shí)施建議1.教學(xué)建議：采用“理論+案例”的教學(xué)法，通過(guò)案例分析加強(qiáng)知識(shí)理解，將所學(xué)知識(shí)與操作案例相結(jié)合，幫助學(xué)生準(zhǔn)確理解與使用移動(dòng)UI設(shè)計(jì)的相關(guān)知識(shí)，并領(lǐng)會(huì)移動(dòng)UI設(shè)計(jì)的內(nèi)在實(shí)質(zhì)。充分利用掛圖、投影和多媒體等教學(xué)手段。2.教學(xué)評(píng)價(jià)建議：在本課程實(shí)施過(guò)程中，突出評(píng)價(jià)的教育功能，注重過(guò)程評(píng)價(jià)與結(jié)果評(píng)價(jià)并重、定性評(píng)價(jià)與定量評(píng)價(jià)相結(jié)合，形成教師和學(xué)生共同參與的多元評(píng)價(jià)主體，構(gòu)建評(píng)價(jià)體系。3.教材編寫與選用建議：教材編寫要體現(xiàn)課程的特色與設(shè)計(jì)思想，教材內(nèi)容體現(xiàn)先進(jìn)性、實(shí)用性，操作案例的選取要科學(xué)，采用全流程設(shè)計(jì)的方式，由淺入深地講解初學(xué)者需要掌握的基礎(chǔ)知識(shí)和操作技巧，全面解析各種元素的具體繪制方法，并在知識(shí)點(diǎn)后銜接相關(guān)案例，使學(xué)生能夠輕松理解知識(shí)點(diǎn)。教材力求文字標(biāo)準(zhǔn)規(guī)范、正確、科學(xué)，配備適量的直觀圖片和視頻影像資料。4.實(shí)驗(yàn)實(shí)訓(xùn)設(shè)備配置建議：充分利用掛圖、投影和多媒體等教學(xué)手段，采用理論知識(shí)與操作案例分析相結(jié)合的教學(xué)模式，幫助學(xué)生準(zhǔn)確理解相關(guān)知識(shí)。5.課程資源開(kāi)發(fā)與利用建議：開(kāi)發(fā)相關(guān)輔導(dǎo)用書、教師指導(dǎo)用書、網(wǎng)絡(luò)資源，要注重仿真軟件的應(yīng)用及開(kāi)發(fā)?！兑苿?dòng)UI設(shè)計(jì)（微課版）》配套教學(xué)教案課時(shí)內(nèi)容關(guān)于移動(dòng)UI設(shè)計(jì)授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)了解移動(dòng)UI設(shè)計(jì)；移動(dòng)UI的系統(tǒng)分類；移動(dòng)UI設(shè)計(jì)流程；移動(dòng)UI設(shè)計(jì)原則；移動(dòng)UI設(shè)計(jì)流程的職位劃分。教學(xué)重點(diǎn)掌握移動(dòng)UI設(shè)計(jì)原則；掌握移動(dòng)UI設(shè)計(jì)流程的職位劃分。教學(xué)難點(diǎn)掌握移動(dòng)UI設(shè)計(jì)流程。教學(xué)設(shè)計(jì)教學(xué)思路：通過(guò)對(duì)移動(dòng)UI設(shè)計(jì)相關(guān)基礎(chǔ)知識(shí)的講解了解移動(dòng)UI設(shè)計(jì)；教學(xué)手段：針對(duì)移動(dòng)UI與PC端UI的區(qū)別、移動(dòng)UI的系統(tǒng)分類、移動(dòng)UI設(shè)計(jì)流程、移動(dòng)UI設(shè)計(jì)原則和移動(dòng)UI設(shè)計(jì)流程的職位劃分進(jìn)行講解。教學(xué)內(nèi)容討論問(wèn)題：1、移動(dòng)UI的系統(tǒng)分類有哪些？2、移動(dòng)UI設(shè)計(jì)原則有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。1.1?了解移動(dòng)UI設(shè)計(jì)1.1.1?初始移動(dòng)UI設(shè)計(jì)1.1.2?移動(dòng)UI設(shè)計(jì)的概念1.1.3?移動(dòng)UI與PC端UI1.1.4?將PC端UI重置為移動(dòng)UI1.2?移動(dòng)UI的系統(tǒng)分類1.2.1?iOS1.2.2Android系統(tǒng)1.2.3?HarmonyOS1.2.4?WearOS和watchOS1.3?移動(dòng)UI設(shè)計(jì)流程1.3.1?需求分析1.3.2?原型設(shè)計(jì)1.3.3?UI設(shè)計(jì)1.4?移動(dòng)UI設(shè)計(jì)原則1.4.1?風(fēng)格一致性原則1.4.2?元素準(zhǔn)確性原則1.4.3?界面布局合理化原則1.4.4?系統(tǒng)響應(yīng)時(shí)間原則1.5?移動(dòng)UI設(shè)計(jì)流程的職位劃分1.5.1?產(chǎn)品經(jīng)理1.5.2?項(xiàng)目經(jīng)理1.5.3?UI設(shè)計(jì)時(shí)1.5.4?開(kāi)發(fā)工程師1.6?本章小結(jié)小結(jié)了解移動(dòng)UI設(shè)計(jì)的概念；了解移動(dòng)UI與PC端UI的不同點(diǎn)；了解移動(dòng)UI的系統(tǒng)分類以及各類型的特點(diǎn)；理解移動(dòng)UI設(shè)計(jì)流程；了解需求分析階段的主要步驟；理解移動(dòng)UI設(shè)計(jì)原則以及各原則的特點(diǎn)；理解移動(dòng)UI設(shè)計(jì)流程的職位劃分。

課時(shí)內(nèi)容移動(dòng)UI策劃與原型設(shè)計(jì)授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)了解移動(dòng)UI目標(biāo)用戶；了解移動(dòng)UI策劃書；了解思維導(dǎo)圖；了解思維導(dǎo)圖的常用軟件；掌握繪制移動(dòng)UI思維導(dǎo)圖；掌握繪制移動(dòng)UI草圖；了解原型設(shè)計(jì)；了解繪制原型的常用軟件；掌握繪制移動(dòng)UI原型圖。教學(xué)重點(diǎn)掌握繪制移動(dòng)UI思維導(dǎo)圖。教學(xué)難點(diǎn)掌握繪制移動(dòng)UI草圖；掌握繪制移動(dòng)UI原型圖。教學(xué)設(shè)計(jì)教學(xué)思路：通過(guò)對(duì)移動(dòng)UI策劃與原型設(shè)計(jì)相關(guān)內(nèi)容的講解，使學(xué)員能夠掌握移動(dòng)UI策劃與原型設(shè)計(jì)的方法及形式。教學(xué)手段：采用操作案例分析與理論知識(shí)相結(jié)合的方式進(jìn)行講解。教學(xué)資料及要求：制作簡(jiǎn)單易懂的操作案例，通過(guò)由淺入深的方式，來(lái)加深學(xué)員對(duì)相關(guān)理論知識(shí)的理解。教學(xué)內(nèi)容討論問(wèn)題：1.思維導(dǎo)圖有哪些特點(diǎn)？2.草圖功能的體現(xiàn)有哪些？3.用戶的體驗(yàn)方式和用戶的體驗(yàn)要素有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。2.1?確定移動(dòng)UI目標(biāo)用戶2.1.1?分析移動(dòng)UI項(xiàng)目背景2.2.2?掌握用戶畫像分析法2.2?完成移動(dòng)UI策劃書2.3?了解思維導(dǎo)圖2.3.1?思維導(dǎo)圖的設(shè)計(jì)依據(jù)2.3.2?思維導(dǎo)圖的特點(diǎn)2.3.3?思維導(dǎo)圖的作用2.4?繪制思維導(dǎo)圖的常用軟件2.4.1?MindMeister2.4.2?MindManager2.4.3?XMind2.4.4?操作案例—下載并安裝XMind2.5?繪制移動(dòng)UI思維導(dǎo)圖2.5.1?思維導(dǎo)圖的操作流程2.5.2?思維導(dǎo)圖的基本類型2.5.3?操作案例—繪制美妝App的首頁(yè)思維導(dǎo)圖2.6繪制移動(dòng)UI草圖2.6.1?了解草圖的概念2.6.2?認(rèn)識(shí)草圖的特點(diǎn)2.6.3?草圖功能的體現(xiàn)2.6.4常見(jiàn)的草圖形式2.7?了解原型設(shè)計(jì)2.7.1?原型設(shè)計(jì)的概念2.7.2?原型設(shè)計(jì)的參與者2.8?繪制原型的常用軟件2.8.1?AxureRP2.8.2?AdobeXD2.8.3?操作案例—安裝AxureRP102.9?繪制移動(dòng)UI原型圖2.9.1?原型的表現(xiàn)手法2.9.2?原型的重要性2.9.3?操作案例—繪制美妝App分類界面原型小結(jié)了解移動(dòng)UI項(xiàng)目背景；掌握用戶畫像分析法；了解移動(dòng)UI策劃書；了解思維導(dǎo)圖；了解思維導(dǎo)圖的常用軟件；掌握下載并安裝XMind；掌握繪制美妝App的首頁(yè)思維導(dǎo)圖；掌握繪制移動(dòng)UI草圖；了解原型設(shè)計(jì)；掌握安裝AxureRP10；掌握繪制美妝App首頁(yè)草圖；掌握繪制App分類界面原型。

課時(shí)內(nèi)容優(yōu)秀的移動(dòng)UI色彩搭配授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)認(rèn)識(shí)色彩；掌握和諧統(tǒng)一的色彩搭配方法；掌握突出對(duì)比的配色方法；掌握構(gòu)建移動(dòng)UI顏色系統(tǒng)；掌握移動(dòng)UI色彩搭配的注意事項(xiàng)。教學(xué)重點(diǎn)t掌握和諧統(tǒng)一的色彩搭配方法；t掌握突出對(duì)比的配色方法。教學(xué)難點(diǎn)掌握構(gòu)建移動(dòng)UI顏色系統(tǒng)；掌握移動(dòng)UI色彩搭配的注意事項(xiàng)。教學(xué)設(shè)計(jì)教學(xué)思路：通過(guò)對(duì)移動(dòng)UI色彩搭配相關(guān)知識(shí)的講解，使學(xué)員能夠理解并掌握移動(dòng)UI色彩搭配的方法及和技巧。教學(xué)手段：采用操作案例分析與理論知識(shí)相結(jié)合的方式進(jìn)行講解。教學(xué)資料及要求：可以準(zhǔn)備一些經(jīng)典色彩搭配的海報(bào)，分析案例的制作方法，通過(guò)觀看海報(bào)色彩與分析案例的操作方法，來(lái)加深學(xué)員對(duì)相關(guān)理論知識(shí)的理解。教學(xué)內(nèi)容討論問(wèn)題：1.色彩三屬性都有哪些？2.構(gòu)建移動(dòng)UI顏色系統(tǒng)的基本流程有哪些？3.移動(dòng)UI色彩搭配的注意事項(xiàng)有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。3.1?認(rèn)識(shí)色彩3.1.1?色彩基礎(chǔ)3.1.2?色彩三屬性3.2?和諧、統(tǒng)一的色彩搭配方法3.2.1?同色系配色方法3.2.2?鄰近色配色方法3.2.3?類似色配色方法3.2.4?同色調(diào)配色方法3.2.5?類似色配色方法3.3?突出、對(duì)比的配色方法3.3.1?中差色配色方法3.3.2?對(duì)比色配色方法3.3.3?互補(bǔ)色配色方法3.3.4?對(duì)比色調(diào)配色方法3.4?構(gòu)建移動(dòng)UI顏色系統(tǒng)3.4.1?確定風(fēng)格3.4.2?確定主色3.4.3?確定輔色3.4.4?操作案例—構(gòu)建美妝App顏色系統(tǒng)3.4.5?調(diào)整配色3.5?移動(dòng)UI色彩搭配的注意事項(xiàng)3.5.1?切記將精致、美觀放在第一位3.5.2?配色方案要符合用戶的心理印象3.5.3操作案例—美妝App首頁(yè)界面配色設(shè)計(jì)3.5.4?App界面內(nèi)容必須便于閱讀3.5.5?保守地使用色彩3.5.6規(guī)避雜亂的配色方案3.5.7操作案例—美妝App分類界面配色設(shè)計(jì)小結(jié)認(rèn)識(shí)色彩；掌握同色系配色方法；掌握鄰近色配色方法；掌握類似色配色方法；掌握同色調(diào)配色方法；掌握類似色調(diào)配色方法；掌握中差色配色方法；掌握對(duì)比色配色方法；掌握互補(bǔ)色配色方法；掌握對(duì)比色調(diào)配色方法；掌握構(gòu)建移動(dòng)UI顏色系統(tǒng)的基本流程；掌握構(gòu)建美妝App顏色系統(tǒng)；掌握移動(dòng)UI色彩搭配的注意事項(xiàng)；掌握美妝App首頁(yè)界面配色設(shè)計(jì)；掌握美妝App分類界面配色設(shè)計(jì)。

課時(shí)內(nèi)容出色的移動(dòng)圖標(biāo)設(shè)計(jì)授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)了解App圖標(biāo)的概念和重要性；了解圖標(biāo)設(shè)計(jì)常用軟件；了解圖標(biāo)柵格系統(tǒng)；理解圖標(biāo)設(shè)計(jì)形式；理解App圖標(biāo)的分類；掌握?qǐng)D標(biāo)尺寸；掌握?qǐng)D標(biāo)組設(shè)計(jì)規(guī)范。教學(xué)重點(diǎn)t理解圖標(biāo)設(shè)計(jì)形式；t理解App圖標(biāo)的分類。教學(xué)難點(diǎn)t掌握?qǐng)D標(biāo)尺寸；t掌握?qǐng)D標(biāo)組設(shè)計(jì)規(guī)范。教學(xué)設(shè)計(jì)教學(xué)思路：通過(guò)對(duì)移動(dòng)圖標(biāo)設(shè)計(jì)相關(guān)知識(shí)的講解，使學(xué)員能夠理解并掌握設(shè)計(jì)與繪制移動(dòng)圖標(biāo)的方法和技巧。教學(xué)手段：采用操作案例分析與理論知識(shí)相結(jié)合的方式進(jìn)行講解。教學(xué)資料及要求：收集不同類型的移動(dòng)圖標(biāo)，通過(guò)觀看并分析不同移動(dòng)圖標(biāo)以及操作案例，來(lái)加深學(xué)員對(duì)相關(guān)理論知識(shí)的理解。教學(xué)內(nèi)容討論問(wèn)題：1.移動(dòng)UI圖標(biāo)的設(shè)計(jì)形式有哪些？2.App圖標(biāo)的分類有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。4.1?初始App圖標(biāo)4.1.1?App圖標(biāo)的概念4.1.2?App圖標(biāo)的重要性4.2?圖標(biāo)設(shè)計(jì)的常用軟件4.2.1?AdobeIIlustrator4.2.2?AdobePhotoshop4.2.3?CorelDRAW4.3?熟悉圖標(biāo)柵格系統(tǒng)4.3.1?系統(tǒng)圖標(biāo)柵格4.3.2?圖標(biāo)柵格規(guī)范4.4?圖標(biāo)設(shè)計(jì)形式4.4.1?中文風(fēng)格4.4.2?英文風(fēng)格4.4.3?圖形風(fēng)格4.4.4?數(shù)字風(fēng)格4.4.5?特殊符號(hào)風(fēng)格4.5?App圖標(biāo)的分類4.5.1?工具圖標(biāo)4.5.2?操作案例—設(shè)計(jì)與制作磨砂質(zhì)感工具圖標(biāo)4.5.3?裝飾風(fēng)格4.5.4?啟動(dòng)圖標(biāo)4.6?圖標(biāo)尺寸4.6.1Android系統(tǒng)的圖標(biāo)設(shè)計(jì)尺寸4.6.2?操作案例—設(shè)計(jì)與制作水果裝飾圖標(biāo)4.6.3?iOS的圖標(biāo)設(shè)計(jì)尺寸4.6.4?操作案例—設(shè)計(jì)與制作時(shí)鐘啟動(dòng)圖標(biāo)4.7?圖標(biāo)組設(shè)計(jì)規(guī)范4.7.1創(chuàng)建制作清單4.7.2?設(shè)計(jì)草圖4.7.3?數(shù)字化呈現(xiàn)4.7.4?確定最終效果4.7.5?命名與導(dǎo)出小結(jié)了解App圖標(biāo)的概念和重要性；了解圖標(biāo)設(shè)計(jì)常用軟件；了解圖標(biāo)柵格系統(tǒng)；理解圖標(biāo)設(shè)計(jì)形式；理解App圖標(biāo)的分類；掌握設(shè)計(jì)與制作磨砂質(zhì)感工具圖標(biāo)；掌握?qǐng)D標(biāo)尺寸；掌握設(shè)計(jì)與制作水果裝飾圖標(biāo)；掌握設(shè)計(jì)與制作時(shí)鐘啟動(dòng)圖標(biāo)；掌握?qǐng)D標(biāo)組設(shè)計(jì)規(guī)范。

課時(shí)內(nèi)容移動(dòng)App的UI設(shè)計(jì)授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)了解移動(dòng)UI的基本元素；了解常見(jiàn)的UI設(shè)計(jì)軟件；掌握移動(dòng)UI的設(shè)計(jì)基礎(chǔ)；掌握移動(dòng)UI的字體規(guī)范；了解移動(dòng)UI圖片尺寸規(guī)范；掌握移動(dòng)App內(nèi)容布局。教學(xué)重點(diǎn)t掌握移動(dòng)UI的設(shè)計(jì)基礎(chǔ)；t掌握移動(dòng)UI的字體規(guī)范。教學(xué)難點(diǎn)t掌握移動(dòng)App內(nèi)容布局。教學(xué)設(shè)計(jì)教學(xué)思路：介紹移動(dòng)UI的基本元素、設(shè)計(jì)軟件、設(shè)計(jì)基礎(chǔ)、字體規(guī)范、圖片尺寸規(guī)范和App內(nèi)容布局等相關(guān)內(nèi)容，使學(xué)員能夠理解并掌握移動(dòng)App的UI設(shè)計(jì)的方法和技巧。教學(xué)手段：通過(guò)案例操作的方式，使學(xué)生可以循序漸進(jìn)地領(lǐng)會(huì)如何完成一套移動(dòng)App的UI設(shè)計(jì)。教學(xué)資料及要求：準(zhǔn)備一些視頻和圖片素材，以便在講解過(guò)程中使用。教學(xué)內(nèi)容討論問(wèn)題：1.移動(dòng)UI的基本元素有哪些？2.移動(dòng)App界面的布局方式有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。5.1?移動(dòng)App的基本元素5.2?常見(jiàn)的UI設(shè)計(jì)軟件5.2.1?AdobePhotoshop5.2.2?Sketch5.2.3?AdobeXD5.3?移動(dòng)UI的設(shè)計(jì)基礎(chǔ)5.3.1?iOS的開(kāi)發(fā)單位5.3.2?iOS的界面尺寸規(guī)范5.3.3?操作案例—設(shè)計(jì)與制作iOSApp啟動(dòng)界面5.3.4?Android系統(tǒng)的開(kāi)發(fā)單位5.3.5?Android系統(tǒng)的界面尺寸規(guī)范5.3.6?操作案例—設(shè)計(jì)與制作Android系統(tǒng)App界面5.4?移動(dòng)UI的字體規(guī)范5.4.1?iOS字體規(guī)范5.4.2?操作案例—設(shè)計(jì)與制作iOSApp登錄界面5.4.3?Android系統(tǒng)字體規(guī)范5.4.4?操作案例—設(shè)計(jì)與制作Android系統(tǒng)App分類界面5.5?移動(dòng)UI圖片尺寸規(guī)范5.6?移動(dòng)App內(nèi)容布局5.6.1?了解App界面中的全局邊距5.6.2?操作案例—設(shè)計(jì)與制作iOSApp首頁(yè)界面5.6.3?設(shè)置App界面中的內(nèi)容間距5.6.4?操作案例—設(shè)計(jì)與制作iOSApp側(cè)面菜單界面5.6.5?移動(dòng)App界面的布局方式小結(jié)了解移動(dòng)UI的基本元素；了解常見(jiàn)的UI設(shè)計(jì)軟件；掌握移動(dòng)UI的設(shè)計(jì)基礎(chǔ)；掌握設(shè)計(jì)與制作iOSApp啟動(dòng)界面；掌握設(shè)計(jì)與制作Android系統(tǒng)App界面；掌握移動(dòng)UI的字體規(guī)范；掌握設(shè)計(jì)與制作iOSApp登錄界面；掌握設(shè)計(jì)與制作Android系統(tǒng)App分類界面；了解移動(dòng)UI圖片尺寸規(guī)范；掌握移動(dòng)App內(nèi)容布局；掌握設(shè)計(jì)與制作iOSApp首頁(yè)界面；掌握設(shè)計(jì)與制作iOSApp側(cè)面菜單界面。

課時(shí)內(nèi)容移動(dòng)App交互設(shè)計(jì)授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)了解交互動(dòng)效的概念；了解常見(jiàn)的交互設(shè)計(jì)軟件；了解交互設(shè)計(jì)的基本流程；掌握移動(dòng)UI交互的類型；掌握動(dòng)效在UI中的作用；了解交互設(shè)計(jì)需要遵循的習(xí)慣。教學(xué)重點(diǎn)t掌握移動(dòng)UI交互的類型。教學(xué)難點(diǎn)t掌握移動(dòng)UI中的作用。教學(xué)設(shè)計(jì)教學(xué)思路：介紹交互動(dòng)效的概念、交互設(shè)計(jì)軟件、交互設(shè)計(jì)的基本流程、移動(dòng)UI交互的類型、動(dòng)效在UI中的作用和交互設(shè)計(jì)需要遵循的習(xí)慣等相關(guān)內(nèi)容，使學(xué)員能夠理解并掌握移動(dòng)App交互設(shè)計(jì)的相關(guān)知識(shí)。教學(xué)手段：通過(guò)講解操作案例的方式，使學(xué)員熟知移動(dòng)App交互類型，并了解制作移動(dòng)App交互的繪制軟件和表現(xiàn)手法。教學(xué)資料及要求：準(zhǔn)備一些視頻和案例素材，以便在講解過(guò)程中使用。教學(xué)內(nèi)容討論問(wèn)題：1.移動(dòng)UI交互的類型有哪些？2.動(dòng)效在UI中作用有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。6.1?了解UI交互設(shè)計(jì)6.1.1?交互動(dòng)效的概念6.1.2?基礎(chǔ)動(dòng)效類型6.2?常見(jiàn)的交互設(shè)計(jì)軟件6.2.1?AdobeAffterEffects6.2.2?AdobeXD6.3?交互設(shè)計(jì)的基本流程6.3.1?提出交互設(shè)計(jì)創(chuàng)意想法6.3.2?實(shí)現(xiàn)創(chuàng)意想法6.4?移動(dòng)UI交互的類型6.4.1?轉(zhuǎn)場(chǎng)過(guò)渡6.4.2?操作案例—設(shè)計(jì)與制作App轉(zhuǎn)場(chǎng)交互6.4.3?層級(jí)展示6.4.4?空間擴(kuò)展6.4.5?關(guān)注焦點(diǎn)6.4.6?內(nèi)容呈現(xiàn)6.4.7?操作案例—設(shè)計(jì)與制作相冊(cè)App內(nèi)容呈現(xiàn)交互6.4.8?操作反饋6.4.7?操作案例—設(shè)計(jì)與制作相冊(cè)App點(diǎn)贊反饋交互6.5?動(dòng)效在UI中的作用6.5.1?吸引用戶注意力6.5.2?為用戶提供操作反饋6.5.3?加強(qiáng)指向性6.5.4?操作案例—設(shè)計(jì)與制作App后臺(tái)交互6.5.5?傳遞信息深度6.6?交互設(shè)計(jì)需要遵循的習(xí)慣小結(jié)了解UI交互設(shè)計(jì)；了解交互設(shè)計(jì)軟件；掌握交互設(shè)計(jì)的基本流程；掌握移動(dòng)UI交互的類型；掌握設(shè)計(jì)與制作App轉(zhuǎn)場(chǎng)交互；掌握設(shè)計(jì)與制作相冊(cè)App內(nèi)容呈現(xiàn)交互；掌握設(shè)計(jì)與制作App點(diǎn)贊反饋交互；掌握動(dòng)效在UI中的作用；掌握設(shè)計(jì)與制作App后臺(tái)交互；了解交互設(shè)計(jì)需要遵循的習(xí)慣。

課時(shí)內(nèi)容適配與輸出移動(dòng)UI設(shè)計(jì)授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)了解標(biāo)注的重要性；了解常見(jiàn)的標(biāo)注軟件；掌握標(biāo)注移動(dòng)UI；了解移動(dòng)UI標(biāo)注規(guī)范；掌握輸出與適配iOSUI設(shè)計(jì)；掌握輸出與適配Android系統(tǒng)UI設(shè)計(jì)。教學(xué)重點(diǎn)t掌握標(biāo)注移動(dòng)UI。教學(xué)難點(diǎn)t掌握輸出與適配iOSUI設(shè)計(jì)；t掌握輸出與適配Android系統(tǒng)UI設(shè)計(jì)；教學(xué)設(shè)計(jì)教學(xué)思路：介紹標(biāo)注的重要性、常見(jiàn)的標(biāo)注軟件、標(biāo)注移動(dòng)UI、移動(dòng)UI標(biāo)注規(guī)范、輸出與適配iOSUI設(shè)計(jì)和輸出與適配Android系統(tǒng)UI設(shè)計(jì)，使學(xué)員能夠了解并掌握適配與輸出移動(dòng)UI設(shè)計(jì)的使用方法和技巧。教學(xué)手段：通過(guò)邊操作邊講解的方式，使學(xué)員快速掌握適配與輸出移動(dòng)UI設(shè)計(jì)的操作方法。教學(xué)資料及要求：準(zhǔn)備一些視頻和案例素材，以便在講解過(guò)程中使用。教學(xué)內(nèi)容討論問(wèn)題：移動(dòng)UI標(biāo)注規(guī)范有哪些？?jī)?nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。7.1?標(biāo)注的重要性7.2?常見(jiàn)的標(biāo)注軟件7.2.1?PxCook7.2.2?AssistorPS7.3?標(biāo)注移動(dòng)UI7.3.1?移動(dòng)App標(biāo)注的內(nèi)容7.3.2?操作案例—標(biāo)注iOSApp界面7.3.3?標(biāo)注的聲明文檔7.3.4?操作案例—標(biāo)注Android系統(tǒng)App界面7.4?移動(dòng)UI標(biāo)注規(guī)范7.4.1?位置與尺寸的標(biāo)注規(guī)范7.4.2?色彩和文字的標(biāo)注規(guī)范7.4.3?切圖資源的尺寸必須是偶數(shù)7.5?輸出與適配iOSUI設(shè)計(jì)7.5.1?向上適配與向下適配7.5.2?適配切片命名規(guī)范7.5.3?操作案例—導(dǎo)出iOSApp界面切圖資源7.6?輸出與適配Android系統(tǒng)UI設(shè)計(jì)7.6.1?Android系統(tǒng)中的“點(diǎn)9”切圖7.6.2?輸出與適配的一稿兩用7.6.3?操作案例—導(dǎo)出Android系統(tǒng)App切圖資源小結(jié)了解標(biāo)注的重要性；了解常用的標(biāo)注軟件；掌握移動(dòng)App標(biāo)注的內(nèi)容；掌握標(biāo)注iOSApp界面；了解標(biāo)注的聲明文檔；掌握標(biāo)注Android系統(tǒng)App界面；掌握移動(dòng)UI標(biāo)注規(guī)范；掌握輸出與適配iOSUI設(shè)計(jì)；掌握導(dǎo)出iOSApp界面切圖資源；掌握輸出與適配Android系統(tǒng)UI設(shè)計(jì)；掌握導(dǎo)出Android系統(tǒng)App切圖資源。

課時(shí)內(nèi)容設(shè)計(jì)與制作移動(dòng)App項(xiàng)目授課時(shí)間分鐘課時(shí)教學(xué)目標(biāo)分析美妝電商App的項(xiàng)目背景；掌握制作美妝