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

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

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

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

4、幾部分組成？ 2、iOS及Android系統(tǒng)的圖標(biāo)包括哪幾種分類？內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進行配合講解。2.1 iOS系統(tǒng)設(shè)計規(guī)范2.1.1 iOS設(shè)計尺寸及單位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è)計規(guī)范2.2.1 Android設(shè)計尺寸及單位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è)計尺寸及單位。2. 了解并掌握iOS及Android系統(tǒng)的界

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

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

7、3.1.6 工具欄3.2 視圖3.2.1 課堂案例制作旅游類APP相冊頁3.2.2 操作列表3.2.3 活動視圖3.2.4 警告窗3.2.5 集合視圖3.2.6 圖像視圖3.2.7 地圖視圖3.2.8 頁面瀏覽控制器3.2.9 課堂案例制作旅游類APP登機牌頁3.2.10 彈出框3.2.11 滾動視圖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 進度指示器3.3.8 刷新3.3.9 分段控件3.

8、3.10 課堂案例制作旅游類APP美食篩選頁3.3.11 滑塊3.3.12 步進器3.3.13 開關(guān)3.3.14 文本框3.4 課堂練習(xí)制作旅游類APP酒店詳情頁3.5 課后習(xí)題制作旅游類APP預(yù)約美食頁小結(jié)1、 了解并熟練掌握欄、視圖和控件的概念。2、 了解并熟練掌握欄、視圖和控件的分類。3、 了解并熟練掌握欄、視圖和控件的設(shè)計規(guī)范。4、 熟練掌握iOS系統(tǒng)界面設(shè)計的方法和規(guī)范。作業(yè)3.4 課堂練習(xí)制作旅游類APP酒店詳情頁使用移動工具移動素材，使用橫排文字工具輸入文字，矩形工具、圓角矩形工具、直線工具繪制基本形狀。3.5 課后習(xí)題制作旅游類APP預(yù)約美食頁使用移動工具移動素材，使用橫排文字

9、工具輸入文字，矩形工具、直線工具繪制基本形狀。第4講課時內(nèi)容Android系統(tǒng)界面設(shè)計授課時間360分鐘課時8教學(xué)目標(biāo) 了解欄的概念、分類和設(shè)計規(guī)范。 了解組件的概念、分類和設(shè)計規(guī)范。 熟練掌握Android系統(tǒng)界面設(shè)計的方法和規(guī)范。教學(xué)重點 掌握組件的多種分類。教學(xué)難點 熟練掌握欄的設(shè)計規(guī)范。教學(xué)設(shè)計1、 教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握制作醫(yī)療類APP閃屏頁、醫(yī)療類APP首頁、醫(yī)療類APP醫(yī)生列表頁、醫(yī)療類APP醫(yī)生介紹頁、醫(yī)療類APP醫(yī)生篩選頁和醫(yī)療類APP預(yù)約頁的方法；（2）再通過相關(guān)的解析掌握欄和組件的概念、分類和設(shè)計規(guī)范；（3）最后通過課堂練習(xí)和課后習(xí)題消化所學(xué)知識。2

10、、 教學(xué)手段：（1）通過課堂實訓(xùn)案例熟悉設(shè)計規(guī)范和軟件功能；（2）通過課堂練習(xí)和課后習(xí)題提高學(xué)生的實際應(yīng)用能力。3、 教學(xué)資料及要求：在網(wǎng)上找一些簡單的Android系統(tǒng)界面進行臨摹制作，來加深學(xué)員對知識點的理解和提高實際應(yīng)用能力。教學(xué)內(nèi)容討論問題：1、底部應(yīng)用欄有哪些組成部分？ 2、懸浮按鈕的尺寸有哪些規(guī)范？內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進行配合講解。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 底部

11、導(dǎo)航4.2.7 課堂案例制作醫(yī)療類APP醫(yī)生列表頁4.2.8 按鈕4.2.9 懸浮動作按鈕4.2.10 卡片4.2.11 紙片4.2.12 數(shù)據(jù)表4.2.13 課堂案例制作醫(yī)療類APP醫(yī)生介紹頁4.2.14 對話框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 選項卡4.2.29 文字框4.2.30 提示4.3

12、課堂練習(xí)制作醫(yī)療類APP輸入信息頁4.4 課后習(xí)題制作醫(yī)療類APP幫助支持頁小結(jié)1、 了解并熟練掌握欄和組件的概念。2、 了解并熟練掌握欄和組件的分類。3、 了解并熟練掌握欄和組件的設(shè)計規(guī)范。4、 熟練掌握Android系統(tǒng)界面設(shè)計的方法和規(guī)范。作業(yè)4.3 課堂練習(xí)制作醫(yī)療類APP輸入信息頁使用移動工具移動素材，使用置入命令置入圖片，使用矩形工具、圓角矩形工具和鋼筆工具繪制基本形狀，使用橫排文字工具輸入文字。4.4 課后習(xí)題制作醫(yī)療類APP幫助支持頁使用移動工具移動素材，使用置入命令置入圖片，使用剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用矩形工具、圓角矩形工具、橢圓工具和直線工具繪制基本形狀，使用橫排

13、文字工具輸入文字。 第5講課時內(nèi)容App界面設(shè)計實戰(zhàn)授課時間360分鐘課時8教學(xué)目標(biāo) 了解閃屏頁的概念和分類。 了解引導(dǎo)頁的概念和分類。 了解首頁的概念和分類。 了解個人中心頁、詳情頁和注冊登錄頁的概念。 熟練掌握App界面設(shè)計的方法和規(guī)范。教學(xué)重點 了解App界面的類型與組成部分。教學(xué)難點 掌握App界面設(shè)計的方法和規(guī)范。教學(xué)設(shè)計1、 教學(xué)思路：（1）通過對課堂實訓(xùn)案例的講解掌握制作美食到家App的方法；（2）再通過相關(guān)的解析掌握閃屏頁、引導(dǎo)頁、首頁、個人中心頁、詳情頁和注冊登錄頁的概念和分類；（3）最后通過課堂練習(xí)和課后習(xí)題消化所學(xué)知識。2、 教學(xué)手段：（1）通過課堂實訓(xùn)案例熟練掌握App

14、界面設(shè)計的方法和規(guī)范；（2）通過相關(guān)的解析深入學(xué)習(xí)App界面的分類和概念。3、 教學(xué)資料及要求：在網(wǎng)上找一些不同類型的App界面進行臨摹，來加深學(xué)員對知識點的理解并提高實際應(yīng)用能力。教學(xué)內(nèi)容討論問題：1、品牌推廣型閃屏頁的概念是什么？ 2、綜合型首頁由哪幾部分組成？內(nèi)容大綱：具體可結(jié)合本項目的PPT課件進行配合講解。5.1 閃屏頁5.1.1 品牌推廣型5.1.2 活動廣告型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 個人中心頁5.5 詳情頁5.6 注冊登錄頁5.7 課堂案例制作美食到家App5.8 課堂練習(xí)制作Delicacy APP5.9 課后習(xí)題制作美食來了APP小結(jié)1、 了解閃屏頁、引導(dǎo)頁、首頁、個人中心頁、詳情頁和注冊登錄頁的分類和概念。2、 熟練掌握App界