移動(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è)

【開課時(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ì)象，它以精美的視覺效果和便捷的操作為用戶所青睞，進(jìn)而

促進(jìn)了移動(dòng)UI設(shè)計(jì)行業(yè)的興盛。

本課程使學(xué)生進(jìn)一步了解移動(dòng)UI設(shè)計(jì)的相關(guān)知識(shí)，在項(xiàng)目的實(shí)踐過程中激

發(fā)學(xué)生的創(chuàng)新意識(shí)，促使學(xué)生加深掌握移動(dòng)UI設(shè)計(jì)的基本知識(shí)，使學(xué)生實(shí)現(xiàn)從

學(xué)校到社會(huì)的平滑過渡。

課程任務(wù)：通過學(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)問題、分析問

題、解決問題的能力，使學(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ì)師

1.負(fù)責(zé)軟件界面的美術(shù)設(shè)計(jì)、創(chuàng)意工作和制作工作；

工作內(nèi)容

2.根據(jù)各種相關(guān)軟件的用戶群，提出構(gòu)思新穎、有高度吸

引力的創(chuàng)意設(shè)計(jì)；

3.對(duì)頁面進(jìn)行優(yōu)化，使用戶操作更趨于人性化；

4.維護(hù)現(xiàn)有的應(yīng)用產(chǎn)品。

1.藝術(shù)設(shè)計(jì)，多媒體設(shè)計(jì)，動(dòng)畫設(shè)計(jì)，工業(yè)設(shè)計(jì)等相關(guān)設(shè)

計(jì)藝術(shù)專業(yè)；

2.可以獨(dú)立設(shè)計(jì)手機(jī)界面里的所有畫面元素，能夠原創(chuàng)圖

標(biāo)及制作動(dòng)畫效果；

3.熟練Photoshop,ai,Flash,或者其他設(shè)計(jì)軟件；

相關(guān)知識(shí)4.有扎實(shí)的美術(shù)功底和審美能力，富有創(chuàng)新精神，有良好

的平面設(shè)計(jì)和造型設(shè)計(jì)能力；

5.有較強(qiáng)的學(xué)習(xí)能力，能不斷的跟蹤學(xué)習(xí)，新的設(shè)計(jì)理念

和流行趨勢(shì)；

6.對(duì)移動(dòng)互聯(lián)網(wǎng)及移動(dòng)終端手機(jī)UI軟件行業(yè)發(fā)展有深刻的

理解。

3.主要職業(yè)能力

1）培養(yǎng)學(xué)生嚴(yán)謹(jǐn)認(rèn)真的工作態(tài)度和終身學(xué)習(xí)的習(xí)慣；

2）培養(yǎng)學(xué)生在實(shí)際工作中遵守相關(guān)規(guī)范和要求；

3）豐富學(xué)生的知識(shí)結(jié)構(gòu)，提升專業(yè)技能；

4）培養(yǎng)良好的人際溝通能力和團(tuán)隊(duì)互助的精神；

5）培養(yǎng)學(xué)生自我學(xué)習(xí)、勇于創(chuàng)新、積極承擔(dān)不同角色的能力。

四、課程教學(xué)目標(biāo)

1.課程總體目標(biāo)

本課程根據(jù)數(shù)字媒體與藝術(shù)設(shè)計(jì)專業(yè)學(xué)生將來工作過程中所必須具備的綜

合職業(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)行了梳理和講解，主要通過案例操作的形式，希望通過分析案例操

作的過程，使學(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的基本元素、常見的UI設(shè)計(jì)軟件、移動(dòng)UI的設(shè)計(jì)基礎(chǔ)、

移動(dòng)UI的字體規(guī)范、移動(dòng)UI圖片尺寸規(guī)范和移動(dòng)App內(nèi)容布局。

?掌握常見的交互設(shè)計(jì)軟件、交互設(shè)計(jì)的基本流程、移動(dòng)UI交互的類型、

動(dòng)效在UI中的作用和交互設(shè)計(jì)需要遵循的習(xí)慣。

?掌握標(biāo)注的重要性、常見的標(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í)，通過學(xué)習(xí)、分析操作案例。本書

圍繞移動(dòng)UI設(shè)計(jì)，向讀者介紹了相關(guān)的基本知識(shí)和操作案例，構(gòu)建成體系的

運(yùn)營(yíng)過程，為實(shí)際操作打下堅(jiān)實(shí)的基礎(chǔ)。本課程的學(xué)習(xí)內(nèi)容分解如下：

課程內(nèi)容與教學(xué)要求

建議

序號(hào)名稱主要內(nèi)容教學(xué)要求

學(xué)時(shí)

?了解移動(dòng)UI設(shè)計(jì)講解移動(dòng)UI設(shè)

?移動(dòng)UI的系統(tǒng)分類計(jì)中的基礎(chǔ)知

關(guān)于移動(dòng)

第1章?移動(dòng)UI設(shè)計(jì)流程識(shí)，幫助學(xué)生快

UI設(shè)計(jì)

?移動(dòng)UI設(shè)計(jì)原則速了解移動(dòng)UI

?移動(dòng)UI設(shè)計(jì)流程的職位劃分設(shè)計(jì)的基礎(chǔ)知識(shí)

講解如何將客戶

?確定移動(dòng)UI目標(biāo)用戶提出的抽象化描

?完成移動(dòng)UI策劃書述轉(zhuǎn)化為具象化

?了解思維導(dǎo)圖的移動(dòng)UI策劃

移動(dòng)UI策?繪制思維導(dǎo)圖的常用軟件和原型設(shè)計(jì)，轉(zhuǎn)

第2章劃與原型設(shè)?繪制移動(dòng)UI思維導(dǎo)圖化過程中使用的

計(jì)?繪制移動(dòng)UI草圖方法及常用軟

?了解原型設(shè)計(jì)件，幫助學(xué)生更

?繪制原型的常用軟件好地完成每一款

?繪制移動(dòng)UI原型圖移動(dòng)UI產(chǎn)品的

策劃與原型設(shè)計(jì)

講解如何為一款

移動(dòng)App項(xiàng)目構(gòu)

?認(rèn)識(shí)色彩

建符合設(shè)計(jì)主題

?和諧、統(tǒng)一的色彩搭配方法

優(yōu)秀的移動(dòng)的顏色系統(tǒng)，幫

?突出、對(duì)比的配色方法

第3章UI色彩搭助學(xué)生掌握如何

?構(gòu)建移動(dòng)UI顏色系統(tǒng)

酉己讓移動(dòng)UI的外

?移動(dòng)UI色彩搭配的注意事項(xiàng)

觀變得更加出

彩，從而可以吸

引更多的用戶

?初始App圖標(biāo)講解圖標(biāo)相關(guān)的

?圖標(biāo)設(shè)計(jì)常用軟件概念、設(shè)計(jì)形式

?熟悉圖標(biāo)柵格系統(tǒng)和設(shè)計(jì)尺寸及設(shè)

出色的移動(dòng)

第4章?圖標(biāo)設(shè)計(jì)形式計(jì)制作方法，是

圖標(biāo)設(shè)計(jì)

?App圖標(biāo)的分類學(xué)生進(jìn)入U(xiǎn)I設(shè)

?圖標(biāo)尺寸計(jì)行業(yè)的必備條

?圖標(biāo)組設(shè)計(jì)規(guī)范件

?移動(dòng)UI的基本元素講解有關(guān)App界

?常見的UI設(shè)計(jì)軟件面的設(shè)計(jì)規(guī)范和

?移動(dòng)UI的設(shè)計(jì)基礎(chǔ)設(shè)計(jì)技巧，使學(xué)

移動(dòng)App的

第5章?移動(dòng)UI的字體規(guī)范生掌握App界面

UI設(shè)計(jì)

?移動(dòng)UI圖片尺寸規(guī)范的設(shè)計(jì)規(guī)范和

?移動(dòng)App內(nèi)容布局App界面的設(shè)計(jì)

方法

講解有關(guān)移動(dòng)

?了解UI交互設(shè)計(jì)

App交互設(shè)計(jì)的

?常見的交互設(shè)計(jì)軟件

相關(guān)基礎(chǔ)知識(shí)，

?交互設(shè)計(jì)的基本流程

移動(dòng)App交使學(xué)生掌握移動(dòng)

第6章?移動(dòng)UI交互的類型

互設(shè)計(jì)App交互類型,

?動(dòng)效在UI中的作用

并了解制作移動(dòng)

?交互設(shè)計(jì)需要遵循的習(xí)慣

App交互的繪制

軟件和表現(xiàn)方法

講解標(biāo)注的重要

性、常見的標(biāo)注

軟件、標(biāo)注移動(dòng)

?標(biāo)注的重要性

UI和移動(dòng)UI標(biāo)

?常見的標(biāo)注軟件

注規(guī)范及輸出

?標(biāo)注移動(dòng)UI

適配與輸出UI切片資源等

?移動(dòng)UI標(biāo)注規(guī)范

第7章移動(dòng)UI設(shè)內(nèi)容，使學(xué)生能

?輸出與適配iOSUI設(shè)計(jì)

計(jì)夠理解標(biāo)注移動(dòng)

?輸出與適配Android系統(tǒng)UI設(shè)

UI和輸出切片

計(jì)

資源的作用與條

件，從而完成標(biāo)

注和導(dǎo)出移動(dòng)

AppUI的操作

講解設(shè)計(jì)與制作

兩個(gè)移動(dòng)UI項(xiàng)

設(shè)計(jì)與制作目，幫助學(xué)生鞏

?設(shè)計(jì)與制作美妝電商App項(xiàng)目

第8章移動(dòng)App項(xiàng)固前面所學(xué)的知

?設(shè)計(jì)與制作美食外賣App項(xiàng)目

目識(shí)，同時(shí)加深學(xué)

生對(duì)移動(dòng)UI設(shè)

計(jì)規(guī)范的理解

學(xué)時(shí)合計(jì)：學(xué)時(shí)

六、教學(xué)實(shí)施建議

1.教學(xué)建議：

采用“理論+案例”的教學(xué)法，通過案例分析加強(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í)施過程中，突出評(píng)價(jià)的教育功能，注重過程評(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.課程資源開發(fā)與利用建議：

開發(fā)相關(guān)輔導(dǎo)用書、教師指導(dǎo)用書、網(wǎng)絡(luò)資源，要注重仿真軟件的應(yīng)用及

開發(fā)。

《移動(dòng)UI設(shè)計(jì)（微課版）》

配套教學(xué)教案

第1講

課時(shí)內(nèi)容關(guān)于移動(dòng)UI設(shè)計(jì)授課時(shí)間分鐘課時(shí)

0了解移動(dòng)UI設(shè)計(jì)；

0移動(dòng)UI的系統(tǒng)分類；

教學(xué)目標(biāo)國(guó)移動(dòng)UI設(shè)計(jì)流程；

0移動(dòng)UI設(shè)計(jì)原則；

0移動(dòng)UI設(shè)計(jì)流程的職位劃分。

0掌握移動(dòng)UI設(shè)計(jì)原則；

教學(xué)重點(diǎn)

0掌握移動(dòng)UI設(shè)計(jì)流程的職位劃分。

教學(xué)難點(diǎn)0掌握移動(dòng)UI設(shè)計(jì)流程。

I、教學(xué)思路：通過對(duì)移動(dòng)UI設(shè)計(jì)相關(guān)基礎(chǔ)知識(shí)的講解了解移動(dòng)UI設(shè)計(jì)；

教學(xué)設(shè)計(jì)2、教學(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)容

討論問題：1、移動(dòng)UI的系統(tǒng)分類有哪些？

2、移動(dòng)UI設(shè)計(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端UI

1.1.4將PC端UI重置為移動(dòng)UI

1.2移動(dòng)UI的系統(tǒng)分類

1.2.1iOS

1.2.2Android系統(tǒng)

1.2.3HarmonyOS

1.2.4WearOS和watchOS

1.3移動(dòng)UI設(shè)計(jì)流程

1.3.1需求分析

1.3.2原型設(shè)計(jì)

1.3.3UI設(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.3UI設(shè)計(jì)時(shí)

1.5.4開發(fā)工程師

1.6本章小結(jié)

1.了解移動(dòng)UI設(shè)計(jì)的概念；

2.了解移動(dòng)UI與PC端UI的不同點(diǎn)；

3.了解移動(dòng)UI的系統(tǒng)分類以及各類型的特點(diǎn)；

小結(jié)4.理解移動(dòng)UI設(shè)計(jì)流程；

5.了解需求分析階段的主要步驟；

6.理解移動(dòng)UI設(shè)計(jì)原則以及各原則的特點(diǎn)；

7.理解移動(dòng)UI設(shè)計(jì)流程的職位劃分。

第2講

課時(shí)內(nèi)容移動(dòng)UI策劃與原型設(shè)授課時(shí)間分鐘課時(shí)

1+

0了解移動(dòng)UI目標(biāo)用戶；

0了解移動(dòng)UI策劃書；

0了解思維導(dǎo)圖；

0了解思維導(dǎo)圖的常用軟件；

教學(xué)目標(biāo)0掌握繪制移動(dòng)UI思維導(dǎo)圖；

0掌握繪制移動(dòng)UI草圖；

0了解原型設(shè)計(jì)；

0了解繪制原型的常用軟件；

0掌握繪制移動(dòng)UI原型圖。

教學(xué)重點(diǎn)0掌握繪制移動(dòng)UI思維導(dǎo)圖。

0掌握繪制移動(dòng)UI草圖；

教學(xué)難點(diǎn)

0掌握繪制移動(dòng)UI原型圖。

1、教學(xué)思路：通過對(duì)移動(dòng)UI策劃與原型設(shè)計(jì)相關(guān)內(nèi)容的講解，使學(xué)員能夠掌握移動(dòng)

UI策劃與原型設(shè)計(jì)的方法及形式。

教學(xué)設(shè)計(jì)2、教學(xué)手段：采用操作案例分析與理論知識(shí)相結(jié)合的方式進(jìn)行講解。

3、教學(xué)資料及要求：制作簡(jiǎn)單易懂的操作案例，通過由淺入深的方式，來加深學(xué)員

對(duì)相關(guān)理論知識(shí)的理解。

教學(xué)內(nèi)容

討論問題：1.思維導(dǎo)圖有哪些特點(diǎn)？

2.草圖功能的體現(xiàn)有哪些？

3.用戶的體驗(yàn)方式和用戶的體驗(yàn)要素有哪些？

內(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.1MindMeister

2.4.2MindManager

2.4.3XMind

2.4.4操作案例一下載并安裝XMind

2.5繪制移動(dòng)UI思維導(dǎo)圖

2.5.1思維導(dǎo)圖的操作流程

2.5.2思維導(dǎo)圖的基本類型

2.5.3操作案例一繪制美妝App的首頁思維導(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常見的草圖形式

2.7了解原型設(shè)計(jì)

2.7.1原型設(shè)計(jì)的概念

2.7.2原型設(shè)計(jì)的參與者

2.8繪制原型的常用軟件

2.8.1AxureRP

2.8.2AdobeXD

2.8.3操作案例一安裝AxureRP10

2.9繪制移動(dòng)UI原型圖

2.9.1原型的表現(xiàn)手法

2.9.2原型的重要性

2.9.3操作案例一繪制美妝App分類界面原型

1.了解移動(dòng)UI項(xiàng)目背景；

2.掌握用戶畫像分析法；

3.了解移動(dòng)UI策劃書；

4.了解思維導(dǎo)圖；

5.了解思維導(dǎo)圖的常用軟件；

6.掌握下載并安裝XMind；

小結(jié)

7.掌握繪制美妝App的首頁思維導(dǎo)圖

8.掌握繪制移動(dòng)UI草圖；

9.了解原型設(shè)計(jì)；

10.掌握安裝AxureRP10；

11.掌握繪制美妝App首頁草圖；

12.掌握繪制App分類界面原型。

第3講

分鐘

課時(shí)內(nèi)容優(yōu)秀的移動(dòng)UI色彩搭配授課時(shí)間課時(shí)

0認(rèn)識(shí)色彩；

0掌握和諧統(tǒng)一的色彩搭配方法；

教學(xué)目標(biāo)0掌握突出對(duì)比的配色方法；

0掌握構(gòu)建移動(dòng)UI顏色系統(tǒng)；

0掌握移動(dòng)UI色彩搭配的注意事項(xiàng)。

0掌握和諧統(tǒng)一的色彩搭配方法；

教學(xué)重點(diǎn)

0掌握突出對(duì)比的配色方法。

0掌握構(gòu)建移動(dòng)UI顏色系統(tǒng)；

教學(xué)難點(diǎn)

0掌握移動(dòng)UI色彩搭配的注意事項(xiàng)。

1、教學(xué)思路：通過對(duì)移動(dòng)UI色彩搭配相關(guān)知識(shí)的講解，使學(xué)員能夠理解并掌握移動(dòng)UI

色彩搭配的方法及和技巧。

教學(xué)設(shè)計(jì)2、教學(xué)手段：采用操作案例分析與理論知識(shí)相結(jié)合的方式進(jìn)行講解。

3、教學(xué)資料及要求：可以準(zhǔn)備一些經(jīng)典色彩搭配的海報(bào)，分析案例的制作方法，通過觀

看海報(bào)色彩與分析案例的操作方法，來加深學(xué)員對(duì)相關(guān)理論知識(shí)的理解。

教學(xué)內(nèi)容

討論問題：1.色彩三屬性都有哪些？

2.構(gòu)建移動(dòng)UI顏色系統(tǒng)的基本流程有哪些？

3.移動(dòng)UI色彩搭配的注意事項(xiàng)有哪些？

內(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首頁界面配色設(shè)計(jì)

3.5.4App界面內(nèi)容必須便于閱讀

3.5.5保守地使用色彩

3.5.6規(guī)避雜亂的配色方案

3.5.7操作案例一美妝App分類界面配色設(shè)計(jì)

1.認(rèn)識(shí)色彩；

2.掌握同色系配色方法；

3.掌握鄰近色配色方法；

4.掌握類似色配色方法；

5.掌握同色調(diào)配色方法；

6.掌握類似色調(diào)配色方法；

7.掌握中差色配色方法；

小結(jié)8.掌握對(duì)比色配色方法；

9.掌握互補(bǔ)色配色方法；

10.掌握對(duì)比色調(diào)配色方法；

H.掌握構(gòu)建移動(dòng)UI顏色系統(tǒng)的基本流程；

12.掌握構(gòu)建美妝App顏色系統(tǒng)；

13.掌握移動(dòng)UI色彩搭配的注意事項(xiàng)；

14.掌握美妝App首頁界面配色設(shè)計(jì)；

15.掌握美妝App分類界面配色設(shè)計(jì)。

第4講

課時(shí)內(nèi)容出色的移動(dòng)圖標(biāo)設(shè)計(jì)授課時(shí)間分鐘課時(shí)

0了解App圖標(biāo)的概念和重要性；

0了解圖標(biāo)設(shè)計(jì)常用軟件；

0了解圖標(biāo)柵格系統(tǒng)；

教學(xué)目標(biāo)0理解圖標(biāo)設(shè)計(jì)形式；

0理解App圖標(biāo)的分類；

0掌握?qǐng)D標(biāo)尺寸；

0掌握?qǐng)D標(biāo)組設(shè)計(jì)規(guī)范。

0理解圖標(biāo)設(shè)計(jì)形式；

教學(xué)重點(diǎn)

0理解App圖標(biāo)的分類。

0掌握?qǐng)D標(biāo)尺寸；

教學(xué)難點(diǎn)

0掌握?qǐng)D標(biāo)組設(shè)計(jì)規(guī)范。

1、教學(xué)思路：通過對(duì)移動(dòng)圖標(biāo)設(shè)計(jì)相關(guān)知識(shí)的講解，使學(xué)員能夠理解并掌握設(shè)計(jì)與

繪制移動(dòng)圖標(biāo)的方法和技巧。

教學(xué)設(shè)計(jì)2、教學(xué)手段：采用操作案例分析與理論知識(shí)相結(jié)合的方式進(jìn)行講解。

3、教學(xué)資料及要求：收集不同類型的移動(dòng)圖標(biāo)，通過觀看并分析不同移動(dòng)圖標(biāo)以及

操作案例，來加深學(xué)員對(duì)相關(guān)理論知識(shí)的理解。

教學(xué)內(nèi)容

討論問題：I.移動(dòng)UI圖標(biāo)的設(shè)計(jì)形式有哪些？

2.App圖標(biāo)的分類有哪些？

內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。

4.1初始App圖標(biāo)

4.1.1App圖標(biāo)的概念

4.1.2App圖標(biāo)的重要性

4.2圖標(biāo)設(shè)計(jì)的常用軟件

4.2.1AdobeIllustrator

4.2.2AdobePhotoshop

4.2.3CorelDRAW

4.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.5App圖標(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.3iOS的圖標(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)出

1.了解App圖標(biāo)的概念和重要性；

2.了解圖標(biāo)設(shè)計(jì)常用軟件；

3.了解圖標(biāo)柵格系統(tǒng)；

4.理解圖標(biāo)設(shè)計(jì)形式；

5.理解App圖標(biāo)的分類；

小馬口

6.掌握設(shè)計(jì)與制作磨砂質(zhì)感工具圖標(biāo)；

7.掌握?qǐng)D標(biāo)尺寸；

8.掌握設(shè)計(jì)與制作水果裝飾圖標(biāo)；

9.掌握設(shè)計(jì)與制作時(shí)鐘啟動(dòng)圖標(biāo)；

10.掌握?qǐng)D標(biāo)組設(shè)計(jì)規(guī)范。

第5講

課時(shí)內(nèi)容移動(dòng)App的UI設(shè)計(jì)授課時(shí)間分鐘課時(shí)

0了解移動(dòng)UI的基本元素；

0了解常見的UI設(shè)計(jì)軟件；

0掌握移動(dòng)UI的設(shè)計(jì)基礎(chǔ)；

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

0掌握移動(dòng)UI的字體規(guī)范；

0了解移動(dòng)UI圖片尺寸規(guī)范；

0掌握移動(dòng)App內(nèi)容布局。

0掌握移動(dòng)UI的設(shè)計(jì)基礎(chǔ)；

教學(xué)重點(diǎn)

0掌握移動(dòng)UI的字體規(guī)范。

教學(xué)難點(diǎn)0掌握移動(dòng)App內(nèi)容布局。

1、教學(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é)設(shè)計(jì)2、教學(xué)手段：通過案例操作的方式，使學(xué)生可以循序漸進(jìn)地領(lǐng)會(huì)如何完成一套移動(dòng)

App的UI設(shè)計(jì)。

3、教學(xué)資料及要求：準(zhǔn)備一些視頻和圖片素材，以便在講解過程中使用。

教學(xué)內(nèi)容

討論問題：I.移動(dòng)UI的基本元素有哪些？

2.移動(dòng)App界面的布局方式有哪些？

內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。

5.1移動(dòng)App的基本元素

5.2常見的UI設(shè)計(jì)軟件

5.2.1AdobePhotoshop

5.2.2Sketch

5.2.3AdobeXD

5.3移動(dòng)UI的設(shè)計(jì)基礎(chǔ)

5.3.1iOS的開發(fā)單位

5.3.2iOS的界面尺寸規(guī)范

5.3.3操作案例一設(shè)計(jì)與制作iOSApp啟動(dòng)界面

5.3.4Android系統(tǒng)的開發(fā)單位

5.3.5Android系統(tǒng)的界面尺寸規(guī)范

5.3.6操作案例一設(shè)計(jì)與制作Android系統(tǒng)App界面

5.4移動(dòng)UI的字體規(guī)范

5.4.1iOS字體規(guī)范

5.4.2操作案例一設(shè)計(jì)與制作iOSApp登錄界面

5.4.3Android系統(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首頁界面

5.6.3設(shè)置App界面中的內(nèi)容間距

5.6.4操作案例一設(shè)計(jì)與制作iOSApp側(cè)面菜單界面

5.6.5多動(dòng)App界面的布局方式

I.了解移動(dòng)UI的基本元素；

小結(jié)2.了解常見的UI設(shè)計(jì)軟件；

3.掌握移動(dòng)UI的設(shè)計(jì)基礎(chǔ)；

4.掌握設(shè)計(jì)與制作iOSApp啟動(dòng)界面；

5.掌握設(shè)計(jì)與制作Android系統(tǒng)App界面；

6.掌握移動(dòng)UI的字體規(guī)范；

7.掌握設(shè)計(jì)與制作iOSApp登錄界面；

8.掌握設(shè)計(jì)與制作Android系統(tǒng)App分類界面；

9.了解移動(dòng)UI圖片尺寸規(guī)范；

10.掌握移動(dòng)App內(nèi)容布局；

11.掌握設(shè)計(jì)與制作iOSApp首頁界面；

12.掌握設(shè)計(jì)與制作iOSApp側(cè)面菜單界面。

第6講

課時(shí)內(nèi)容移動(dòng)App交互設(shè)計(jì)授課時(shí)間分鐘課時(shí)

0了解交互動(dòng)效的概念；

0了解常見的交互設(shè)計(jì)軟件；

0了解交互設(shè)計(jì)的基本流程；

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

0掌握移動(dòng)UI交互的類型；

0掌握動(dòng)效在UI中的作用；

0了解交互設(shè)計(jì)需要遵循的習(xí)慣。

教學(xué)重點(diǎn)0掌握移動(dòng)UI交互的類型。

教學(xué)難點(diǎn)0掌握移動(dòng)UI中的作用。

1、教學(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é)設(shè)計(jì)2、教學(xué)手段：通過講解操作案例的方式，使學(xué)員熟知移動(dòng)App交互類型，并了解制

作移動(dòng)App交互的繪制軟件和表現(xiàn)手法。

3、教學(xué)資料及要求：準(zhǔn)備一些視頻和案例素材，以便在講解過程中使用。

教學(xué)內(nèi)容

討論問題：1.移動(dòng)UI交互的類型有哪些？

2.動(dòng)效在UI中作用有哪些？

內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。

6.1了解UI交互設(shè)計(jì)

6.1.1交互動(dòng)效的概念

6.1.2基礎(chǔ)動(dòng)效類型

6.2常見的交互設(shè)計(jì)軟件

6.2.1AdobeAffterEffects

6.2.2AdobeXD

6.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)過渡

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í)慣

1.了解UI交互設(shè)計(jì)；

小結(jié)2.了解交互設(shè)計(jì)軟件；

3.掌握交互設(shè)計(jì)的基本流程；

4.掌握移動(dòng)UI交互的類型；

5.掌握設(shè)計(jì)與制作App轉(zhuǎn)場(chǎng)交互；

6.掌握設(shè)計(jì)與制作相冊(cè)App內(nèi)容呈現(xiàn)交互；

7.掌握設(shè)計(jì)與制作App點(diǎn)贊反饋交互；

8.掌握動(dòng)效在UI中的作用；

9.掌握設(shè)計(jì)與制作App后臺(tái)交互；

10.了解交互設(shè)計(jì)需要遵循的習(xí)慣。

第7講

分鐘

課時(shí)內(nèi)容適配與輸出移動(dòng)UI設(shè)計(jì)授課時(shí)間課時(shí)

0了解標(biāo)注的重要性；

0了解常見的標(biāo)注軟件；

0掌握標(biāo)注移動(dòng)UI；

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

0了解移動(dòng)UI標(biāo)注規(guī)范；

0掌握輸出與適配iOSUI設(shè)計(jì)；

0掌握輸出與適配Android系統(tǒng)UI設(shè)計(jì)。

教學(xué)重點(diǎn)0掌握標(biāo)注移動(dòng)UIo

0掌握輸出與適配iOSUI設(shè)計(jì)；

教學(xué)難點(diǎn)

0掌握輸出與適配Android系統(tǒng)UI設(shè)計(jì)；

1、教學(xué)思路：介紹標(biāo)注的重要性、常見的標(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é)設(shè)計(jì)2、教學(xué)手段：通過邊操作邊講解的方式，使學(xué)員快速掌握適配與輸出移動(dòng)UI設(shè)計(jì)的

操作方法。

3、教學(xué)資料及要求：準(zhǔn)備一些視頻和案例素材，以便在講解過程中使用。

教學(xué)內(nèi)容

討論問題：移動(dòng)UI標(biāo)注規(guī)范有哪些？

內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。

7.1標(biāo)注的重要性

7.2常見的標(biāo)注軟件

7.2.1PxCook

7.2.2AssistorPS

7.3標(biāo)注移動(dòng)UI

7.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.1Android系統(tǒng)中的“點(diǎn)9”切圖

7.6.2輸出與適配的一稿兩用

7.6.3操作案例一導(dǎo)出Android系統(tǒng)App切圖資源

1,了解標(biāo)注的重要性；

2.了解常用的標(biāo)注軟件；

3.掌握移動(dòng)App標(biāo)注的內(nèi)容；

小結(jié)

4,掌握標(biāo)注iOSApp界面；

5.了解標(biāo)注的聲明文檔；

6.掌握標(biāo)注Android系統(tǒng)App界面；

7.掌握移動(dòng)UI標(biāo)注規(guī)范；

8.掌握輸出與適配QSUI設(shè)計(jì)；

9.掌握導(dǎo)出iOSApp界面切圖資源；

10.掌握輸出與適配Android系統(tǒng)UI設(shè)計(jì)；

11.掌握導(dǎo)出Android系統(tǒng)App切圖資源。

第8講

課時(shí)內(nèi)容設(shè)計(jì)與制作移動(dòng)App項(xiàng)授課時(shí)間分鐘課時(shí)

日

0分析美妝電商App的項(xiàng)目背景；

0掌握制作美妝電商App界面的草圖原型；

0掌握構(gòu)建美妝電商App的顏色系統(tǒng)；

0掌握設(shè)計(jì)與制作美妝電商App的圖標(biāo)組；