《PhotoshopCC移動(dòng)UI設(shè)計(jì)案例教程》—教學(xué)教案

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

2、內(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 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的基本分類(lèi)小結(jié)1、了解移動(dòng)UI設(shè)計(jì)。2、了解 App 0課時(shí)內(nèi)容移動(dòng)UI設(shè)計(jì)規(guī)范授課時(shí)間180分鐘課時(shí)4教學(xué)目標(biāo)0熟練掌握iOS系統(tǒng)的設(shè)計(jì)規(guī)范。EJ熟練掌握Android系統(tǒng)的設(shè)計(jì)規(guī)范。教學(xué)重點(diǎn)0 掌握

3、iOS及Android系統(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）通過(guò)資料及實(shí)例圖片講解，掌握iOS系統(tǒng)的設(shè)計(jì)規(guī)范；（2）通過(guò)資 料及實(shí)例圖片講解，掌握Android系統(tǒng)的設(shè)計(jì)規(guī)范。2、教學(xué)手段：（1）通過(guò)總述了解iOS及Android系統(tǒng)的基本概念；（2）通過(guò)分類(lèi)解析 深入學(xué)習(xí)iOS及Android系統(tǒng)的設(shè)計(jì)尺寸及單位、界而結(jié)構(gòu)、基本布局、圖標(biāo)規(guī)范 和文字規(guī)范。教學(xué)內(nèi)容討論問(wèn)題：1、iOS系統(tǒng)的界而結(jié)構(gòu)

4、有哪幾部分組成？2、iOS及Android系統(tǒng)的圖標(biāo)包括哪幾種分類(lèi)？ 內(nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。2.1 iOS系統(tǒng)設(shè)計(jì)規(guī)范2. 1.1 iOS設(shè)計(jì)尺寸及物位3. 1. 2 iOS界面結(jié)構(gòu)4. 1.3 iOS基本布局5. 1. 4 iOS圖標(biāo)規(guī)范6. 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. 了解并

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

6、牌頁(yè)、旅游類(lèi)APP酒店列表頁(yè)和旅游類(lèi)APP美食篩選頁(yè)的方 法和技巧；（2）再通過(guò)相關(guān)的解析掌握欄、視圖和控件的概念、分類(lèi)和設(shè)計(jì)規(guī)范：（3） 最后通過(guò)課堂練習(xí)和課后習(xí)題消化所學(xué)知識(shí)。2、教學(xué)手段：（1）通過(guò)課堂實(shí)訓(xùn)案例熟悉設(shè)計(jì)規(guī)范和軟件功能：（2）通過(guò)課堂練習(xí)和課 后習(xí)題提高學(xué)生的實(shí)際應(yīng)用能力。3、教學(xué)資料及要求：在網(wǎng)上找一些簡(jiǎn)單的iOS系統(tǒng)界而進(jìn)行臨摹制作，來(lái)加深學(xué)員對(duì)知 識(shí)點(diǎn)的理解和提高實(shí)際應(yīng)用能力。教學(xué)內(nèi)容討論問(wèn)題：1、視圖有哪幾種分類(lèi)？2、按鈕的概念是什么？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。3.1 欄3. 1.1課堂案例一一制作旅游類(lèi)APP首頁(yè)4. 1. 2狀態(tài)欄5.

7、1.3導(dǎo)航欄6. 1.4搜索欄7. 1.5標(biāo)簽欄8. 1.6工具欄3.2 視圖3. 2. 1課堂案例一制作旅游類(lèi)APP相冊(cè)頁(yè)3. 2.2操作列表3. 2.3活動(dòng)視圖3.2.4警告窗3. 2.5集合視圖3. 2.6圖像視圖3. 2.7地圖視圖3. 2.8頁(yè)面瀏覽控制器3. 2.9課堂案例一一制作旅游類(lèi)APP登機(jī)牌頁(yè)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課堂案例一一制作旅游類(lèi)APP酒店列表貞3. 3.2按鈕3. 3.3編輯菜也3. 3.4標(biāo)簽3. 3.5頁(yè)面控件3. 3.

8、6選擇器3. 3.7進(jìn)度指示器3. 3.8刷新3. 3.9分段控件3. 3. 10課堂案例制作旅游類(lèi)APP美食篩選頁(yè)3. 3. 11滑塊3. 3. 12步進(jìn)器3. 3. 13開(kāi)關(guān)3. 3. 11文木框3.4 課堂練習(xí)制作旅游類(lèi)APP酒店詳情頁(yè)3.5 課后習(xí)題制作旅游類(lèi)APP預(yù)約美食頁(yè)小結(jié)1、了解并熟練掌握欄、視圖和控件的概念。2、了解并熟練掌握欄、視圖和控件的分類(lèi)。3、了解并熟練掌握欄、視圖和控件的設(shè)計(jì)規(guī)范。4、熟練掌握iOS系統(tǒng)界面設(shè)計(jì)的方法和規(guī)范。作業(yè)3.4課堂練習(xí)制作旅游類(lèi)APP酒店詳情頁(yè)使用移動(dòng)工具移動(dòng)素材，使用橫排文字工具輸入文字，矩形工具、圓角矩形工具、直 線工具繪制基本形狀.3萬(wàn)

9、稗對(duì)笈七力"rz蹣一、4G121sA-<> 產(chǎn)鼬83、 、< rC»T JU <13.5課后習(xí)題制作旅游類(lèi)APP預(yù)約美食頁(yè)使用移動(dòng)工具移動(dòng)素材，使用橫排文字工具輸入文字，矩形工具、直線工具繪制基本 形狀。X七月 具九，B IS 41"IC 。4,2第 t» X 憐X 力 Ak Mis. ”a m第4講課時(shí)內(nèi)容Android系統(tǒng)界面設(shè)計(jì)授課時(shí)間360分鐘課時(shí)8教學(xué)目標(biāo)0 了解欄的概念、分類(lèi)和設(shè)計(jì)規(guī)范。0 了解組件的概念、分類(lèi)和設(shè)計(jì)規(guī)范。EJ熟練掌握Android系統(tǒng)界面設(shè)計(jì)的方法和規(guī)范。教學(xué)重點(diǎn)必掌握組件的多種分類(lèi)。教學(xué)難點(diǎn)熟練掌握

10、欄的設(shè)計(jì)規(guī)范。教學(xué)設(shè)計(jì)1、教學(xué)思路：（1）通過(guò)對(duì)課堂實(shí)訓(xùn)案例的講解掌握制作醫(yī)療類(lèi)APP閃屏頁(yè)、醫(yī)療類(lèi) APP首頁(yè)、醫(yī)療類(lèi)APP醫(yī)生列表頁(yè)、醫(yī)療類(lèi)APP醫(yī)生介紹頁(yè)、醫(yī)療類(lèi)APP醫(yī)生篩 選頁(yè)和醫(yī)療類(lèi)APP預(yù)約頁(yè)的方法：（2）再通過(guò)相關(guān)的解析掌握欄和組件的概念、 分類(lèi)和設(shè)計(jì)規(guī)范；（3）最后通過(guò)課堂練習(xí)和課后習(xí)題消化所學(xué)知識(shí)。2、教學(xué)手段：（1）通過(guò)課堂實(shí)訓(xùn)案例熟悉設(shè)計(jì)規(guī)范和軟件功能：（2）通過(guò)課堂練習(xí)和 課后習(xí)題提高學(xué)生的實(shí)際應(yīng)用能力。3、教學(xué)資料及要求：在網(wǎng)上找一些簡(jiǎn)單的Android系統(tǒng)界而進(jìn)行臨摹制作，來(lái)加深學(xué) 員對(duì)知識(shí)點(diǎn)的理解和提高實(shí)際應(yīng)用能力。教學(xué)內(nèi)容討論問(wèn)題：1、底部應(yīng)用欄有哪些組成部分

11、？2、懸浮按鈕的尺寸有哪些規(guī)范？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。4. 1欄4. 1. 1課堂案例一一制作醫(yī)療類(lèi)APP閃屏貞5. 1. 2狀態(tài)欄6. 1. 3系統(tǒng)導(dǎo)航欄7. 2組件4. 2. 1課堂案例一一制作醫(yī)療類(lèi)APP首頁(yè)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ī)療類(lèi)APP醫(yī)生列表頁(yè)4. 2. 8按鈕4. 2. 9懸浮動(dòng)作按鈕4. 2. 10卡片4. 2. 11紙片4. 2. 12數(shù)據(jù)表4. 2. 13課堂案例制作醫(yī)療類(lèi)APP醫(yī)生介紹頁(yè)4. 2. 14對(duì)話(huà)框4. 2. 15分割

12、線4. 2. 16圖片組4. 2. 17列表4. 2. 18菜單4. 2. 19抽屜式導(dǎo)航4. 2. 20狀態(tài)指引4. 2. 21課堂案例制作醫(yī)療類(lèi)APP醫(yī)生篩選頁(yè)4. 2. 22選擇控件4. 2. 23底部面板4. 2. 24側(cè)面板4. 2. 25滑塊4. 2. 26底部提示欄4. 2. 27課堂案例制作醫(yī)療類(lèi)APP預(yù)約頁(yè)4. 2. 28選項(xiàng)卡4. 2. 29文字框4. 2. 30提示4. 3課堂練習(xí)制作醫(yī)療類(lèi)APP輸入信息頁(yè)4.4課后習(xí)題制作醫(yī)療類(lèi)APP幫助支持頁(yè)小結(jié)1、了解并熟練掌握欄和組件的概念。2、了解并熟練掌握欄和組件的分類(lèi)。3、了解并熟練掌握欄和組件的設(shè)計(jì)規(guī)范。4、熟練掌握And

13、roid系統(tǒng)界而設(shè)計(jì)的方法和規(guī)范。作業(yè)4.3課堂練習(xí)制作醫(yī)療類(lèi)APP輸入信息頁(yè) 使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用矩形工具、圓角矩形工具 和鋼筆工具繪制基本形狀，使用橫排文字工具輸入文字。的府侑息QfxtQV9 1 0*T-ft 9 d t Q fe | k 1 - MHH H4.4課后習(xí)題制作醫(yī)療類(lèi)APP幫助支持頁(yè) 使用移動(dòng)工具移動(dòng)素材，使用置入命令置入圖片，使用剪貼蒙版命令調(diào)整圖片顯 示區(qū)域，使用矩形工具、圓角矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫 排文字工具輸入文字。第5講課時(shí)內(nèi)容App界而設(shè)計(jì)實(shí)戰(zhàn)授課時(shí)間360分鐘課時(shí)8教學(xué)目標(biāo) 了解閃屏頁(yè)的概念和分類(lèi)。EJ 了

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

15、一些不同類(lèi)型的App界而進(jìn)行臨荔，來(lái)加深學(xué)員對(duì)知 識(shí)點(diǎn)的理解并提高實(shí)際應(yīng)用能力。教學(xué)內(nèi)容討論問(wèn)題：1、品牌推廣型閃屏頁(yè)的概念是什么？2、綜合型首頁(yè)由哪幾部分組成？?jī)?nèi)容大綱：具體可結(jié)合本項(xiàng)目的PPT課件進(jìn)行配合講解。5. 1閃屏頁(yè)5. 1.1品牌推廣型6. 1.2活動(dòng)廣告型7. 1.3節(jié)日關(guān)懷型5.2 引導(dǎo)頁(yè)5. 2.1功能說(shuō)明型6. 2.2產(chǎn)品推廣型7. 2.3搞笑賣(mài)萌型5.3 首頁(yè)5. 3. 1列表型5. 3.2網(wǎng)格型5. 3.3卡片型5. 3.4綜合型5.4 個(gè)人中心頁(yè)5.5 詳情頁(yè)5.6 注冊(cè)登錄頁(yè)5.7 課堂案例一一制作美食到家App5.8 8 課堂練習(xí)制作Delicacy APP5.9課后習(xí)題制作美食來(lái)了 APP小結(jié)1、 了解閃屏頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、個(gè)人中心頁(yè)、詳情頁(yè)和注冊(cè)登錄頁(yè)的分類(lèi)和概念。2、