UI設(shè)計(jì)-教學(xué)教案

1、PhotoshopCC移動(dòng)UI設(shè)計(jì)案例教程（全彩慕課版）配套教學(xué)教案第1講課時(shí)內(nèi)容初識(shí)移動(dòng)UI設(shè)計(jì)授課時(shí)間180分鐘課時(shí)4教學(xué)目標(biāo)0認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)。0認(rèn)識(shí)App。教學(xué)重點(diǎn)0認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)。教學(xué)難點(diǎn)0了解App的設(shè)計(jì)流程。教學(xué)設(shè)計(jì)1、教學(xué)思路：（1）通過認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)了解UI設(shè)計(jì)的相關(guān)概念、移動(dòng)UI設(shè)計(jì)的概念、特點(diǎn)、原則、常用軟件和學(xué)習(xí)方法；（2）通過認(rèn)識(shí)App了解App的基本概念、操作平臺(tái)、設(shè)計(jì)流程和基本分類。2、教學(xué)手段：（1）通過資料了解移動(dòng)UI和App的概念；（2）通過實(shí)例界面等圖片深入了解移動(dòng)UI和App。教學(xué)內(nèi)容討論問題：1、移動(dòng)UI設(shè)計(jì)的常用軟件有哪些？2、App的設(shè)計(jì)流程有

2、哪些步驟？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。1.1認(rèn)識(shí)移動(dòng)UI設(shè)計(jì)1.1.1 UI設(shè)計(jì)的相關(guān)概念1.1.2移動(dòng)UI設(shè)計(jì)的概念1.1.3移動(dòng)UI設(shè)計(jì)的特點(diǎn)1.1.4移動(dòng)UI設(shè)計(jì)的原則1.1.5移動(dòng)UI設(shè)計(jì)的常用軟件1.1.6移動(dòng)UI設(shè)計(jì)學(xué)習(xí)方法1.2認(rèn)識(shí)App1.2.1 App的基本概念1.2.2 App的操作平臺(tái)1.2.3 App的設(shè)計(jì)流程1.2.4 App的基本分類小結(jié)1、了解移動(dòng)UI設(shè)計(jì)。2、了解App。第2講課時(shí)內(nèi)容移動(dòng)UI設(shè)計(jì)規(guī)范授課時(shí)間180分鐘課時(shí)4教學(xué)目標(biāo)0熟練掌握iOS系統(tǒng)的設(shè)計(jì)規(guī)范。0熟練掌握Android系統(tǒng)的設(shè)計(jì)規(guī)范。教學(xué)重點(diǎn)0掌握iOS及Android

3、系統(tǒng)的設(shè)計(jì)尺寸。0掌握iOS及Android系統(tǒng)的界面結(jié)構(gòu)。0掌握iOS及Android系統(tǒng)的圖標(biāo)規(guī)范。0掌握iOS及Android系統(tǒng)的字體規(guī)范。教學(xué)難點(diǎn)0掌握iOS及Android系統(tǒng)的基本布局。教學(xué)設(shè)計(jì)1、教學(xué)思路：（1）通過資料及實(shí)例圖片講解，掌握iOS系統(tǒng)的設(shè)計(jì)規(guī)范；（2）通過資料及實(shí)例圖片講解，掌握Android系統(tǒng)的設(shè)計(jì)規(guī)范。2、教學(xué)手段：（1）通過總述了解iOS及Android系統(tǒng)的基本概念；（2）通過分類解析深入學(xué)習(xí)iOS及Android系統(tǒng)的設(shè)計(jì)尺寸及單位、界面結(jié)構(gòu)、基本布局、圖標(biāo)規(guī)范和文字規(guī)范。教學(xué)內(nèi)容討論問題：1、iOS系統(tǒng)的界面結(jié)構(gòu)有哪幾部分組成？2、iOS及Andr

4、oid系統(tǒng)的圖標(biāo)包括哪幾種分類？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。2.1 iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.1 iOS設(shè)計(jì)尺寸及單位2.1.2 iOS界面結(jié)構(gòu)2.1.3 iOS基本布局2.1.4 iOS圖標(biāo)規(guī)范2.1.5 iOS文字規(guī)范2.2 Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.1 Android設(shè)計(jì)尺寸及單位2.2.2 Android界面結(jié)構(gòu)2.2.3 Android基本布局2.2.4 Android圖標(biāo)規(guī)范2.2.5 Android文字規(guī)范小結(jié)1. 了解并掌握iOS及Android系統(tǒng)的設(shè)計(jì)尺寸及單位。2. 了解并掌握iOS及Android系統(tǒng)的界面結(jié)構(gòu)。3. 了解并掌握iOS及A

5、ndroid系統(tǒng)的基本布局。4. 了解并掌握iOS及Android系統(tǒng)的圖標(biāo)規(guī)范。5. 了解并掌握iOS及Android系統(tǒng)的文字規(guī)范。第3講課時(shí)內(nèi)容iOS系統(tǒng)界面設(shè)計(jì)授課時(shí)間360分鐘課時(shí)8教學(xué)目標(biāo)0了解欄的概念、分類和設(shè)計(jì)規(guī)范。0了解視圖的概念、分類和設(shè)計(jì)規(guī)范。0了解控件的概念、分類和設(shè)計(jì)規(guī)范。0熟練掌握iOS系統(tǒng)界面設(shè)計(jì)的方法和規(guī)范。教學(xué)重點(diǎn)0熟練掌握欄的應(yīng)用和設(shè)計(jì)規(guī)范。教學(xué)難點(diǎn)0掌握按鈕的概念和分類。教學(xué)設(shè)計(jì)1、教學(xué)思路：（1）通過對(duì)課堂實(shí)訓(xùn)案例的講解掌握制作旅游類APP首頁、旅游類APP相冊(cè)頁、旅游類APP登機(jī)牌頁、旅游類APP酒店列表頁和旅游類APP美食篩選頁的方法和技巧；（2）再

6、通過相關(guān)的解析掌握欄、視圖和控件的概念、分類和設(shè)計(jì)規(guī)范；（3）最后通過課堂練習(xí)和課后習(xí)題消化所學(xué)知識(shí)。2、教學(xué)手段：（1）通過課堂實(shí)訓(xùn)案例熟悉設(shè)計(jì)規(guī)范和軟件功能；（2）通過課堂練習(xí)和課后習(xí)題提高學(xué)生的實(shí)際應(yīng)用能力。3、教學(xué)資料及要求：在網(wǎng)上找一些簡(jiǎn)單的iOS系統(tǒng)界面進(jìn)行臨摹制作，來加深學(xué)員對(duì)知識(shí)點(diǎn)的理解和提高實(shí)際應(yīng)用能力。教學(xué)內(nèi)容討論問題：1、視圖有哪幾種分類？2、按鈕的概念是什么？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。3.1欄3.1.1課堂案例制作旅游類APP首頁3.1.2狀態(tài)欄3.1.3導(dǎo)航欄3.1.4搜索欄3.1.5標(biāo)簽欄3.1.6工具欄3.2視圖3.2.1課堂案例一一制作

7、旅游類APP相冊(cè)頁3.2.2操作列表3.2.3活動(dòng)視圖3.2.4警告窗3.2.5集合視圖3.2.6圖像視圖3.2.7地圖視圖3.2.8頁面瀏覽控制器3.2.9課堂案例制作旅游類APP登機(jī)牌頁3.2.10彈出框3.2.11滾動(dòng)視圖3.2.12分屏視圖3.2.13表單視圖3.2.14文字視圖3.2.15網(wǎng)絡(luò)視圖3.3控件3.3.1課堂案例制作旅游類APP酒店列表頁3.3.2按鈕3.3.3編輯菜單3.3.4標(biāo)簽3.3.5頁面控件3.3.6選擇器3.3.7進(jìn)度指示器3.3.8刷新3.3.9分段控件3.3.10課堂案例制作旅游類APP美食篩選頁3.3.11滑塊3.3.12步進(jìn)器3.3.13開關(guān)3.3.1

8、4文本框3.4課堂練習(xí)一一制作旅游類APP酒店詳情頁3.5課后習(xí)題一一制作旅游類APP預(yù)約美食頁小結(jié)1、2、3、4、了解并熟練掌握欄、視圖和控件的概念。了解并熟練掌握欄、視圖和控件的分類。了解并熟練掌握欄、視圖和控件的設(shè)計(jì)規(guī)范。熟練掌握iOS系統(tǒng)界面設(shè)計(jì)的方法和規(guī)范。3.4課堂練習(xí)制作旅游類APP酒店詳情頁使用移動(dòng)工具移動(dòng)素材，使用橫排文字工具輸入文字，矩形工具、圓角矩形工具、直線工具繪制基本形狀。作業(yè)3.5課后習(xí)題制作旅游類APP預(yù)約美食頁使用移動(dòng)工具移動(dòng)素材，使用橫排文字工具輸入文字，矩形工具、直線工具繪制基本形狀。七月-_-NK1!UILKnLBt-r:ri-mn：第4講課時(shí)內(nèi)容Andr

9、oid系統(tǒng)界面設(shè)計(jì)授課時(shí)間360分鐘課時(shí)8教學(xué)目標(biāo)0了解欄的概念、分類和設(shè)計(jì)規(guī)范。0了解組件的概念、分類和設(shè)計(jì)規(guī)范。0熟練掌握Android系統(tǒng)界面設(shè)計(jì)的方法和規(guī)范。教學(xué)重點(diǎn)0掌握組件的多種分類。教學(xué)難點(diǎn)0熟練掌握欄的設(shè)計(jì)規(guī)范。教學(xué)設(shè)計(jì)1、教學(xué)思路：（1）通過對(duì)課堂實(shí)訓(xùn)案例的講解掌握制作醫(yī)療類APP閃屏頁、醫(yī)療類APP首頁、醫(yī)療類APP醫(yī)牛列表頁、醫(yī)療類APP醫(yī)牛介紹頁、醫(yī)療類APP醫(yī)牛篩選頁和醫(yī)療類APP預(yù)約頁的方法；（2）再通過相關(guān)的解析掌握欄和組件的概念、分類和設(shè)計(jì)規(guī)范；（3）最后通過課堂練習(xí)和課后習(xí)題消化所學(xué)知識(shí)。2、教學(xué)手段：（1）通過課堂實(shí)訓(xùn)案例熟悉設(shè)計(jì)規(guī)范和軟件功能；（2）通過課

10、堂練習(xí)和課后習(xí)題提高學(xué)生的實(shí)際應(yīng)用能力。3、教學(xué)資料及要求：在網(wǎng)上找一些簡(jiǎn)單的Android系統(tǒng)界面進(jìn)行臨摹制作，來加深學(xué)員對(duì)知識(shí)點(diǎn)的理解和提高實(shí)際應(yīng)用能力。教學(xué)內(nèi)容討論問題：1、底部應(yīng)用欄有哪些組成部分？2、懸浮按鈕的尺寸有哪些規(guī)范？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。4.1欄4.1.1課堂案例一一制作醫(yī)療類APP閃屏頁4.1.2狀態(tài)欄4.1.3系統(tǒng)導(dǎo)航欄4.2組件4.2.1課堂案例制作醫(yī)療類APP首頁4.2.2底部應(yīng)用欄4.2.3頂部應(yīng)用欄4.2.4背板4.2.5橫幅4.2.6底部導(dǎo)航4.2.7課堂案例制作醫(yī)療類APP醫(yī)生列表頁4.2.8按鈕4.2.9懸浮動(dòng)作按鈕4.2.1

11、0 卡片4.2.11 紙片4.2.12數(shù)據(jù)表4.2.13課堂案例制作醫(yī)療類APP醫(yī)生介紹頁4.2.14對(duì)話框4.2.15分割線4.2.16 圖片組4.2.17 列表4.2.18菜單4.2.19抽屜式導(dǎo)航4.2.20狀態(tài)指引4.2.21課堂案例制作醫(yī)療類APP醫(yī)生篩選頁4.2.22選擇控件4.2.23底部面板4.2.24側(cè)面板4.2.25滑塊4.2.26底部提示欄4.2.27課堂案例制作醫(yī)療類APP預(yù)約頁4.2.28 選項(xiàng)卡4.2.29 文字框4.2.30 提示4.3課堂練習(xí)一一制作醫(yī)療類APP輸入信息頁4.4課后習(xí)題一一制作醫(yī)療類APP幫助支持頁小結(jié)1、了解并熟練掌握欄和組件的概念。2、了解并

12、熟練掌握欄和組件的分類。3、了解并熟練掌握欄和組件的設(shè)計(jì)規(guī)范。4、熟練掌握Android系統(tǒng)界面設(shè)計(jì)的方法和規(guī)范。作業(yè)4.3課堂練習(xí)制作醫(yī)療類APP輸入信息頁使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用矩形工具、圓角矩形工具和鋼筆工具繪制基本形狀，使用橫排文字工具輸入文字。吃訐予甘二！T-ah?drQh,|t1fl-1隹|-a4.4課后習(xí)題制作醫(yī)療類APP幫助支持頁使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用矩形工具、圓角矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排文字工具輸入文字。第5講課時(shí)內(nèi)容App界面設(shè)計(jì)實(shí)戰(zhàn)授課時(shí)間360分鐘課時(shí)8教學(xué)目標(biāo)

13、0了解閃屏頁的概念和分類。0了解引導(dǎo)頁的概念和分類。0了解首頁的概念和分類。0了解個(gè)人中心頁、詳情頁和注冊(cè)登錄頁的概念。0熟練掌握App界面設(shè)計(jì)的方法和規(guī)范。教學(xué)重點(diǎn)0了解App界面的類型與組成部分。教學(xué)難點(diǎn)0掌握App界面設(shè)計(jì)的方法和規(guī)范。教學(xué)設(shè)計(jì)1、教學(xué)思路：（1）通過對(duì)課堂實(shí)訓(xùn)案例的講解掌握制作美食到家App的方法；（2）再通過相關(guān)的解析掌握閃屏頁、引導(dǎo)頁、首頁、個(gè)人中心頁、詳情頁和注冊(cè)登錄頁的概念和分類；（3）最后通過課堂練習(xí)和課后習(xí)題消化所學(xué)知識(shí)。2、教學(xué)手段：（1）通過課堂實(shí)訓(xùn)案例熟練掌握App界面設(shè)計(jì)的方法和規(guī)范；（2）通過相關(guān)的解析深入學(xué)習(xí)App界面的分類和概念。3、教學(xué)資料及

14、要求：在網(wǎng)上找一些不冋類型的App界面進(jìn)行臨摹，來加深學(xué)員對(duì)知識(shí)點(diǎn)的理解并提高實(shí)際應(yīng)用能力。教學(xué)內(nèi)容討論問題：1、品牌推廣型閃屏頁的概念是什么？2、綜合型首頁由哪幾部分組成？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。5.1閃屏頁5.1.1品牌推廣型5.1.2活動(dòng)廣告型5.1.3節(jié)日關(guān)懷型5.2引導(dǎo)頁5.2.1功能說明型5.2.2產(chǎn)品推廣型5.2.3搞笑賣萌型5.3首頁5.3.1列表型5.3.2網(wǎng)格型5.3.3卡片型5.3.4綜合型5.4個(gè)人中心頁5.5詳情頁5.6注冊(cè)登錄頁5.7課堂案例制作美食到家App5.8課堂練習(xí)制作DelicacyAPP5.9課后習(xí)題制作美食來YAPP小結(jié)1、了解閃屏頁、引導(dǎo)頁、首頁、個(gè)人中心頁、詳情頁和注冊(cè)登錄頁的分類和概念。2、熟練掌握App界面設(shè)計(jì)的規(guī)范。5.8課堂練習(xí)制作DelicacyApp使用移動(dòng)工具移動(dòng)素材，使用橢圓工具和圓角矩形工具繪制圖形，使用投影和漸變疊加命令