《UI設計（項目式全彩微課版）》教案全套

《UI設計（項目式全彩微課版）》配套教學教案課時內容走進UI設計的世界—UI設計基礎授課時間360分鐘課時8教學目標理解UI設計的基本概念。了解UI設計的常用軟件。熟悉UI設計的項目流程。熟悉UI設計的軟件操作。掌握UI設計的規(guī)范與規(guī)則。培養(yǎng)對UI設計的基本興趣。教學重點熟悉UI設計的項目流程。熟悉UI設計的軟件操作。教學難點掌握UI設計的規(guī)范與規(guī)則。教學設計教學思路：（1）通過對相關知識的講解理解UI設計的基本概念；（2）通過任務式案例的講解掌握UI設計的項目流程。教學手段：（1）通過任務引入和設計理念引導學生快速了解其中的設計思路；（2）通過任務知識的解析深入學習軟件功能和制作特色；（3）通過任務實施的解析掌握制作方法；（4）通過項目演練，提高學生的實際應用能力。教學資料及要求：除了任務式案例中講解的軟件基本操作外，還可以根據(jù)需要繼續(xù)對軟件進行熟悉和操作。教學內容討論問題：1、UI設計都有哪些基本要求？內容大綱：具體可結合本項目的PPT課件進行配合講解。相關知識：了解UI設計的發(fā)展趨勢任務1.1理解UI設計的基本概念1.1.1任務引入1.1.2任務知識：UI設計的基本概念1.1.3任務實施任務1.2了解UI設計的常用軟件1.2.1任務引入1.2.2任務知識：UI設計的常用軟件1.2.3任務實施任務1.3熟悉UI設計的項目流程1.3.1任務引入1.3.2任務知識：UI設計的項目流程1.3.3任務實施任務1.4掌握UI設計規(guī)范與規(guī)則1.4.1任務引入1.4.2任務知識：UI設計規(guī)范與規(guī)則1.4.3任務實施小結理解UI設計的基本概念；了解UI設計的常用軟件；熟悉UI設計的項目流程；熟悉UI設計的軟件操作；掌握UI設計的規(guī)范與規(guī)則。

課時內容設計趣味的圖標—UI圖標設計授課時間450分鐘課時10教學目標掌握線性圖標的風格特點。掌握面性圖標的風格特點。掌握線面圖標的風格特點。掌握線性圖標的制作方法。掌握面性圖標的制作方法。掌握線面圖標的制作方法。培養(yǎng)良好的UI圖標設計勞動習慣。培養(yǎng)一定的UI圖標設計創(chuàng)新能力和藝術審美能力。教學重點掌握線性圖標、面性圖標、線面圖標的制作方法。教學難點培養(yǎng)一定的UI圖標設計創(chuàng)新能力和藝術審美能力。教學設計教學思路：（1）通過相關知識的講解了解圖標的風格特點；（2）通過任務引入引導學生了解任務學習的要點；（3）通過設計理念確認設計的構思過程和主導思想；（4）通過任務實施的解析快速熟悉UI圖標的設計制作過程；（5）通過項目演練可以拓展學生的認知和實際應用能力。教學手段：（1）通過對相關知識的講解了解圖標的風格特點；（2）通過任務式案例的講解掌握不同圖標的制作方法和技巧；（3）通過項目演練增強對UI圖標設計的認識。教學資料及要求：在網(wǎng)上找一些簡單的UI圖標進行制作，來加深學員對知識點的理解和提高實際應用能力。教學內容討論問題：1、UI圖標常用到那些工具和命令？內容大綱：具體可結合本項目的PPT課件進行配合講解。相關知識：UI圖標的風格類型任務2.1設計旅游類App線性圖標2.1.1任務引入2.1.2設計理念2.1.3任務知識：Illustrator-變換命令2.1.4任務實施任務2.2設計旅游類App面性圖標2.2.1任務引入2.2.2設計理念2.2.3任務知識：Photoshop-合并形狀命令、漸變工具、不透明度選項2.2.4任務實施任務2.3設計旅游類App線面圖標2.3.1任務引入2.3.2設計理念2.3.3任務知識：Illustrator-屬性面板、擴展外觀命令2.3.4任務實施任務2.4項目演練——設計電商類App線性圖標2.4.1任務引入2.4.2設計理念任務2.5項目演練——設計餐飲類App面性圖標2.5.1任務引入2.5.2設計理念小結掌握線性圖標、面性圖標、線面圖標的風格特點；掌握線性圖標、面性圖標、線面圖標的制作方法；培養(yǎng)良好的UI圖標設計勞動習慣、創(chuàng)新能力和藝術審美能力。作業(yè)2.4.1任務引入本任務通過學習使用軟件Illustrator繪制電商類App標簽欄中的“購物車”圖標，掌握線性圖標的設計要點與制作方法。2.4.2設計理念使用“屬性”面板進行調整使圖標符合設計規(guī)范，擴展外觀變成真實圖像。2.5.1任務引入本任務通過學習使用軟件Illustrator繪制餐飲類App標簽欄中的“訂單”圖標，掌握面性圖標的設計要點與制作方法。2.5.2設計理念使用“屬性”面板進行調整使圖標符合設計規(guī)范，擴展外觀變成真實圖像。

課時內容制作獨特的控件—UI控件設計授課時間450分鐘課時10教學目標了解UI控件的基本概念。明確UI控件的獲取方法。了解UI控件的設計思路。掌握UI控件的制作方法。培養(yǎng)對UI控件的審美鑒賞能力。培養(yǎng)對UI控件的設計創(chuàng)意能力。教學重點了解UI控件的設計思路。掌握UI控件的制作方法。教學難點培養(yǎng)對UI控件的審美鑒賞能力。培養(yǎng)對UI控件的設計創(chuàng)意能力。教學設計教學思路：（1）通過相關知識的講解了解UI控件的基本概念和獲取方法；（2）通過任務引入引導學生了解任務學習的要點；（3）通過設計理念確認設計的構思過程和主導思想；（4）通過任務知識的解析了解設計中的軟件功能應用；（5）通過任務實施的解析快速熟悉UI控件的設計制作過程；（6）通過項目演練可以拓展學生的認知和實際應用能力。教學手段：（1）通過對相關知識的講解了解UI控件設計基礎；（2）通過任務式案例的講解掌握不同UI控件的制作方法和技巧；（3）通過項目演練增強對UI控件的認識。教學資料及要求：在網(wǎng)上找一些簡單的UI控件進行制作，來加深學員對知識點的理解和提高實際應用能力。教學內容討論問題：1、UI控件設計的設計網(wǎng)格有哪些？2、UI控件設計中常用到哪些工具和命令？內容大綱：具體可結合本項目的PPT課件進行配合講解。相關知識：UI控件設計基礎知識任務3.1設計旅游類App按鈕控件3.1.1任務引入3.1.2設計理念3.1.3任務知識：圓角矩形工具、橫排文字工具3.1.4任務實施任務3.2設計旅游類App選擇控件3.2.1任務引入3.2.2設計理念3.2.3任務知識：變換命令3.2.4任務實施任務3.3設計旅游類App加減控件3.3.1任務引入3.3.2設計理念3.3.3任務知識：置入嵌入對象命令3.3.4任務實施任務3.4設計旅游類App分段控件3.4.1任務引入3.4.2設計理念3.4.3任務知識：添加圖層蒙版命令、畫筆工具、減去頂層形狀命令3.4.4任務實施任務3.5設計旅游類App頁面控件3.5.1任務引入3.5.2設計理念3.5.3任務知識：直線工具3.5.4任務實施任務3.6設計旅游類App反饋控件3.6.1任務引入3.6.2設計理念3.6.3任務知識：橢圓工具3.6.4任務實施任務3.7設計旅游類App文本框控件3.7.1任務引入3.7.2設計理念3.7.3任務知識：字符面板3.7.4任務實施任務3.8項目演練-設計電商類App文本框控件3.8.1任務引入3.8.2設計理念任務3.9項目演練-設計餐飲類App按鈕控件3.9.1任務引入3.9.2設計理念小結了解UI控件的基本概念。明確UI控件的獲取方法。了解UI控件的設計思路。掌握UI控件的制作方法。作業(yè)3.8.1任務引入本任務通過學習使用軟件Photoshop繪制電商類App文本框控件，掌握文本框控件的設計要點與制作方法。3.8.2設計理念在設計過程中，圍繞電商類App文本框控件進行創(chuàng)意。整體呈現(xiàn)出編輯文本、操作高效的視覺效果。線性文本框的弱化有助于簡化布局。3.9.1任務引入本任務通過學習使用軟件Photoshop繪制餐飲類App按鈕控件，掌握按鈕控件的設計要點與制作方法。3.9.2設計理念在設計過程中，圍繞餐飲類App按鈕控件進行創(chuàng)意。圖標選灰色和橙色兩種顏色，可以更好地區(qū)別不同的層級關系。同時橙色既能明確操作又能吸引用戶。

課時內容搭建豐富的組件—UI組件設計授課時間450分鐘課時10教學目標了解UI控件的基本概念。明確UI控件的獲取方法。掌握各種組件的設計思路。掌握各種組件的制作方法。培養(yǎng)對組件的審美鑒賞能力。培養(yǎng)對組件的設計創(chuàng)意能力。教學重點掌握各種組件的設計思路。掌握各種組件的制作方法。教學難點培養(yǎng)對組件的審美鑒賞能力。培養(yǎng)對組件的設計創(chuàng)意能力。教學設計教學思路：（1）通過相關知識的講解了解UI組件設計的概念和設計風格；（2）通過任務引入引導學生了解任務學習的要點；（3）通過設計理念確認設計的構思過程和主導思想；（4）通過任務知識的解析了解設計中的軟件功能應用；（5）通過任務實施的解析快速熟悉UI組件設計制作過程；（6）通過項目演練可以拓展學生的認知和實際應用能力。教學手段：（1）通過對相關知識的講解了解UI組件設計基礎；（2）通過任務式案例的講解掌握不同UI組件的制作方法和技巧；（3）通過項目演練增強對組件設計的認識。教學資料及要求：在網(wǎng)上找一些不同類型的UI組件進行制作，來加深學員對知識點的理解和提高實際應用能力。教學內容討論問題：1、UI組件設計技巧有哪些？2、UI組件構成元素有哪些？內容大綱：具體可結合本項目的PPT課件進行配合講解。相關知識：UI組件設計基礎知識任務4.1設計旅游類App導航欄4.1.1任務引入4.1.2設計理念4.1.3任務知識：屬性面板4.1.4任務實施任務4.2設計旅游類App標簽欄4.2.1任務引入4.2.2設計理念4.2.3任務知識：Illustrator-矩形工具、鋼筆工具、直接選擇工具4.2.4任務實施任務4.3設計旅游類App金剛區(qū)4.3.1任務引入4.3.2設計理念4.3.3任務知識：直接選擇工具、漸變疊加命令4.3.4任務實施任務4.4設計旅游類App瓷片區(qū)4.4.1任務引入4.4.2設計理念4.4.3任務知識：剪貼蒙版命令、顏色疊加命令4.4.4任務實施任務4.5項目演練-設計電商類App標簽欄4.5.1任務引入4.5.2設計理念任務4.6項目演練-設計餐飲類App標簽欄4.6.1任務引入4.6.2設計理念小結了解UI控件的基本概念；明確UI控件的獲取方法；掌握各種組件的設計思路；掌握各種組件的制作方法。作業(yè)4.5.1任務引入本任務通過學習使用軟件Illustrator和Photoshop繪制電商類App標簽欄，掌握標簽欄的設計要點與制作方法。4.5.2設計理念在設計過程中，圍繞電商類App標簽欄進行創(chuàng)意。整體設計以圖標+文字的方式進行展示，擁有較高的識別度，具有操作靈活、指導用戶的特點。白色的背景樣式，使背景與標簽欄區(qū)分明顯。線性（未選中狀態(tài)）-線性（選中狀態(tài)），這種方式下的切換狀態(tài)精致簡潔，使整體適用于電商類產品。4.6.1任務引入本任務通過學習使用軟件Illustrator和Photoshop繪制餐飲類App標簽欄，掌握標簽欄的設計要點與制作方法。4.6.2設計理念在設計過程中，圍繞餐飲類App標簽欄進行創(chuàng)意。整體設計以圖標+文字的方式進行展示，擁有較高的識別度，具有操作靈活、指導用戶的特點。白色的背景樣式，使背景與標簽欄區(qū)分明顯。面性（未選中狀態(tài)）-面性（選中狀態(tài)），這種方式下的切換狀態(tài)安全厚重，使整體適用于餐飲類產品。

課時內容打造生動的頁面—UI頁面設計授課時間720分鐘課時16教學目標掌握UI頁面的設計規(guī)則。掌握UI頁面的核心模塊。了解UI頁面的設計思路。掌握UI頁面的制作方法。培養(yǎng)對UI頁面的審美鑒賞能力。培養(yǎng)對UI頁面的設計創(chuàng)意能力。教學重點掌握UI頁面的設計規(guī)則。掌握UI頁面的核心模塊。了解UI頁面的設計思路。掌握UI頁面的制作方法。教學難點培養(yǎng)對UI頁面的審美鑒賞能力。培養(yǎng)對UI頁面的設計創(chuàng)意能力。教學設計教學思路：（1）通過相關知識的講解了解UI頁面的設計規(guī)則；（2）通過任務引入引導學生了解任務學習的要點；（3）通過設計理念確認設計的構思過程和主導思想；（4）通過任務知識的解析了解設計中的軟件功能應用；（5）通過任務實施的解析快速熟悉UI頁面的設計制作過程；（6）通過項目演練可以拓展學生的認知和實際應用能力。教學手段：（1）通過對相關知識的講解了解UI頁面設計基礎；（2）通過任務式案例的講解掌握不同UI頁面的制作方法和技巧；（3）通過項目演練增強對UI頁面設計的認識。教學資料及要求：在網(wǎng)上找一些不同類型的UI頁面進行制作，來加深學員對知識點的理解和提高實際應用能力。教學內容討論問題：1、UI頁面的設計規(guī)則是什么？2、UI頁面的核心模塊有哪些？內容大綱：具體可結合本項目的PPT課件進行配合講解。相關知識：UI頁面的風格類型任務5.1設計旅游類App閃屏頁5.1.1任務引入5.1.2設計理念5.1.3任務知識：綜合運用Photoshop軟件制作旅游類App閃屏頁5.1.4任務實施任務5.2設計旅游類App引導頁5.2.1任務引入5.2.2設計理念5.2.3任務知識：綜合運用Photoshop軟件制作旅游類App引導頁5.2.4任務實施任務5.3設計旅游類App首頁5.3.1任務引入5.3.2設計理念5.3.3任務知識：綜合運用Photoshop軟件制作旅游類App首頁5.3.4任務實施任務5.4設計旅游類App個人中心頁5.4.1任務引入5.4.2設計理念5.4.3任務知識：綜合運用Photoshop軟件制作旅游類App個人中心頁5.4.4任務實施任務5.5項目演練-設計旅游類App詳情頁5.5.1任務引入5.5.2設計理念任務5.6項目演練-設計旅游類App注冊登錄頁5.6.1任務引入5.6.2設計理念任務5.7項目演練-設計電商類App頁面5.7.1任務引入5.7.2設計理念任務5.8項目演練-設計餐飲類App頁面5.8.1任務引入5.8.2設計理念小結掌握UI頁面的設計規(guī)則。掌握UI頁面的核心模塊。了解UI頁面的設計思路。掌握UI頁面的制作方法。掌握景深的控制。

作業(yè)5.5.1任務引入本任務通過學習使用軟件Photoshop設計旅游類App詳情頁，掌握詳情頁的設計要點與制作方法。5.5.2設計理念在設計過程中，圍繞主題旅游進行創(chuàng)意。背景為純色和風景圖片作為襯托。色彩選取橘黃色、深黃色和淺灰色分別體現(xiàn)了歡快、熱情和柔和。字體選用蘋方符合設計規(guī)范。視覺表現(xiàn)應與任務5.1的設計風格保持一致。整體設計充滿特色，契合主題。5.6.1任務引入本任務通過學習使用軟件Photoshop設計旅游類App注冊登錄頁，掌握注冊登錄頁的設計要點與制作方法。5.6.2設計理念在設計過程中，圍繞主題旅游進行創(chuàng)意。整體設計具有清晰的操作流程。以實際圖片作為背景，能夠增強用戶對產品的期待。色彩選用橙色能夠體現(xiàn)旅游的歡快熱情并突出重點。字體選用蘋方符合設計規(guī)范。5.7.1任務引入本任務通過學習使用軟件Photoshop繪制電商類App頁面，掌握電商類App頁面的設計要點與制作方法。5.7.2設計理念在設計過程中，圍繞電商類App頁面進行創(chuàng)意。整體呈現(xiàn)出簡約精致的視覺效果。5.8.1任務引入本任務通過學習使用軟件Photoshop繪制餐飲類App頁面，掌握餐飲類App頁面的設計要點與制作方法。5.8.2設計理念在設計過程中，圍繞餐飲類App頁面進行創(chuàng)意。整體呈現(xiàn)出具有感染力的視覺效果。

課時內容快速輸出UI設計—UI設計輸出授課時間450分鐘課時10教學目標熟悉UI頁面的標注內容。掌握UI頁面切圖的切圖規(guī)則。了解UI頁面的常用命名。掌握UI頁面的標注。掌握UI頁面的切圖。掌握UI切圖的命名。培養(yǎng)良好的UI設計輸出習慣。培養(yǎng)一定的團隊合作能力。教學重點掌握UI頁面的標注。掌握UI頁面的切圖。掌握UI切圖的命名。教學難點培養(yǎng)良好的UI設計輸出習慣。培養(yǎng)一定的團隊合作能力。教學設計教學思路：（1）通過相關知識的講解了解UI頁面的標注內容和切圖規(guī)則；（2）通過任務引入引導學生了解任務學習的要點；（3）通過設計理念確認設計的構思過程和主導思想；（4）通過任務知識的解析了解設計中的軟件功能應用；（5）通過任務實施的解析快速熟悉UI頁面制作過程；（6）通過項目演練可以拓展學生的認知和實際應用能力。教學手段：（1）通過對相關知識的講解了解UI頁面設計基礎；（2）通過任務式案例的講解掌握不同UI頁面的制作方法和技巧；（3）通過項目演練增強對UI頁面的認識。教學資料及要求：在網(wǎng)上找一些不同類型的UI頁面進行制作，來加深學員