《UI設(shè)計》

教學(xué)教案

第1講

走進UI設(shè)計的世界

課時內(nèi)容授課時間360分鐘課時8

—UI設(shè)計基礎(chǔ)

>理解UI設(shè)計的基本概念。

>了解UI設(shè)計的常用軟件。

>熟悉UI設(shè)計的項目流程。

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

>熟悉UI設(shè)計的軟件操作。

>掌握UI設(shè)計的規(guī)范與規(guī)則。

>培養(yǎng)對UI設(shè)計的基本興趣。

>熟悉UI設(shè)計的項目流程。

教學(xué)重點

>熟悉UI設(shè)計的軟件操作。

教學(xué)難點掌握UI設(shè)計的規(guī)范與規(guī)則。

1、教學(xué)思路：（1）通過對相關(guān)知識的講解理解UI設(shè)計的基本概念：（2）通過任務(wù)式

案例的講解掌握UI設(shè)計的項目流程。

2、教學(xué)手段：（1）通過任務(wù)引入和設(shè)計理念引導(dǎo)學(xué)生快速了解其中的設(shè)計思路；（2）

教學(xué)設(shè)計通過任務(wù)知識的解析深入學(xué)習(xí)軟件功能和制作特色；（3）通過任務(wù)實施的解析掌握

制作方法；（4）通過項目演練，提高學(xué)生的實際應(yīng)用能力。

3、教學(xué)資料及要求：除了任務(wù)式案例中講解的軟件基本操作外，還可以根據(jù)需要繼續(xù)

對軟件進行熟悉和操作。

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

討論問題：1、UI設(shè)計都有哪些基本要求？

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

相關(guān)知識：了解UI設(shè)計的發(fā)展趨勢

任務(wù)1.1理解UI設(shè)計的基本^念

1.1.1任務(wù)引入

LL2任務(wù)知識：II設(shè)計的基本概念

1.1.3任務(wù)實施

任務(wù)1.2了解UI設(shè)計的常用軟件

1.2.1任務(wù)引入

1.2.2任務(wù)知識：UI設(shè)計的常用軟件

1.2.3任務(wù)實施

任務(wù)1.3熟悉UI設(shè)計的項目流程

1.3.1任務(wù)引入

1.3.2任務(wù)知識：UI設(shè)計的項目流程

1.3.3任務(wù)實施

任務(wù)1.4掌握UI設(shè)計規(guī)范與規(guī)則

1.4.1任務(wù)引入

1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則

1.4.3任務(wù)實施

1、理解UI設(shè)計的基本概念；

2、了解UI設(shè)計的常用軟件；

小結(jié)3、熟悉UI設(shè)計的項目流程；

4、熟悉UI設(shè)計的軟件操作；

5、掌握UI設(shè)計的規(guī)范與規(guī)則。

第2講

設(shè)計趣味的圖標(biāo)

誤時內(nèi)容授課時間450分鐘課時10

—UI圖標(biāo)設(shè)計

>掌握線性圖標(biāo)的風(fēng)格特點。

>掌握面性圖標(biāo)的風(fēng)格特點。

>掌握線面圖標(biāo)的風(fēng)格特點。

>掌握線性圖標(biāo)的制作方法。

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

>掌握面性圖標(biāo)的制作方法。

>掌握線面圖標(biāo)的制作方法。

>培養(yǎng)良好的UI圖標(biāo)設(shè)計勞動習(xí)慣。

>培養(yǎng)一定的UI圖標(biāo)設(shè)計創(chuàng)新能力和藝術(shù)審美能力。

教學(xué)重點掌握線性圖標(biāo)、面性圖標(biāo)、線面圖標(biāo)的制作方法。

教學(xué)難點培養(yǎng)一定的UI圖標(biāo)設(shè)計創(chuàng)新能力和藝術(shù)審美能力。

1、教學(xué)思路：（1）通過相關(guān)知識的講解了解圖標(biāo)的風(fēng)格特點；（2）通過任務(wù)引入引導(dǎo)

學(xué)生了解任務(wù)學(xué)習(xí)的要點；（3）通過設(shè)計理念確認(rèn)設(shè)計的構(gòu)思過程和主導(dǎo)思想；（4）

通過任務(wù)實施的解析快速熟悉UI圖標(biāo)的設(shè)計制作過程；（5）通過項目演練可以拓

展學(xué)生的認(rèn)知和實際應(yīng)用能力。

教學(xué)設(shè)計2、教學(xué)手段：（1）通過對相關(guān)知識的講解了解圖標(biāo)的風(fēng)格特點；（2）通過任務(wù)式案例

的講解掌握不同圖標(biāo)的制作方法和技巧；（3:通過項目演練增強對UI圖標(biāo)設(shè)計的

認(rèn)識。

3、教學(xué)資料及要求：在網(wǎng)上找一些簡單的UI圖標(biāo)進行制作，來加深學(xué)員對知識點的

理解和提高實際應(yīng)用能力。

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

討論問題：1、UI圖標(biāo)常用到那些工具和命令？

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

相關(guān)知識：UI圖標(biāo)的風(fēng)格類型

任務(wù)2.1設(shè)計旅游類App線性圖標(biāo)

2.1.1任務(wù)引入

2.1.2設(shè)計理念

2.1.3任務(wù)知識：Illustrator-變換命令

2.1.4任務(wù)實施

任務(wù)2.2設(shè)計旅游類App面性圖標(biāo)

2.2.1任務(wù)引入

2.2.2設(shè)計理念

2.2.3任務(wù)知識：Photoshop-合并形狀命令、漸變工具、不透明度選預(yù)

2.2.4任務(wù)實施

任務(wù)2.3設(shè)計旅游類App線面圖標(biāo)

2.3.1任務(wù)引入

2.3.2設(shè)計理念

233任務(wù)知識：IHuslralor-屬性面板、擴展外觀命令

2.3.4任務(wù)實施

任務(wù)2.4項目演練——設(shè)計巴商類App線性圖標(biāo)

2.4.1任務(wù)引入

2.4.2設(shè)計理念

任務(wù)2.5項目演練——設(shè)計餐飲類App面性圖標(biāo)

2.5.1任務(wù)引入

252設(shè)計理念

1、掌握線性圖標(biāo)、面性圖標(biāo)、線面圖標(biāo)的風(fēng)格特點;

小結(jié)2、掌握線性圖標(biāo)、面性圖標(biāo)、線面圖標(biāo)的制作方法；

3、培養(yǎng)良好的UI圖標(biāo)設(shè)計勞動習(xí)慣、創(chuàng)新能力和藝術(shù)審美能力。

任務(wù)2.4項目演練一設(shè)計電商類App線性圖標(biāo)

2.4.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件niustrator繪制電商類App標(biāo)簽欄中的“購物車”圖標(biāo),

掌握線性圖標(biāo)的設(shè)計要點與制作方法。

2.4.2設(shè)計理念

使用“屬性”面板進行調(diào)整使圖標(biāo)符合設(shè)計規(guī)范，擴展外觀變成真實圖像。

IOIIOI而□□Q[2PA

ill首頁分類發(fā)現(xiàn)購物車我的

作業(yè)

任務(wù)2.5項目演練——設(shè)計餐飲類App面性圖標(biāo)

2.5.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件IHustratoi?繪制餐飲類App標(biāo)簽欄中的''訂單”圖標(biāo)，掌

握面性圖標(biāo)的設(shè)計要點與制作方法。

2.5.2設(shè)計理念

使用“屬性”面板進行調(diào)整使圖標(biāo)符合設(shè)計規(guī)范，擴展外觀變成真實圖像。

第3講

制作獨特的控件

誤時內(nèi)容授課時間450分鐘課時10

-UI控件設(shè)計

>了解UI控件的基本概念。

>明確UI控件的獲取方法。

>了解UI控件的設(shè)計思路。

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

>掌握UI控件的制作方法。

>培養(yǎng)對UI控件的審美鑒賞能力。

>培養(yǎng)對UI控件的設(shè)計創(chuàng)意能力。

>了解UI控件的設(shè)計思路。

教學(xué)重點

>掌握UI控件的制作方法。

培養(yǎng)對UI控件的自美鑒賞能力。

教學(xué)難點

培養(yǎng)對UI控件的設(shè)計創(chuàng)意能力。

1、教學(xué)思路：（1）通過相關(guān)知識的講解了解UI控件的基本概念和獲取方法；［2）通過任

務(wù)引入引導(dǎo)學(xué)生了解任務(wù)學(xué)習(xí)的要點；（3）通過設(shè)計理念確認(rèn)設(shè)計的構(gòu)思過程和主導(dǎo)

思想；（4）通過任務(wù)知識的解析了解設(shè)計中的軟件功能應(yīng)用；（5）通過任務(wù)實施的解

析快速熟悉U1控件的設(shè)計制作過程：（6）通過項目演練可以拓展學(xué)生的認(rèn)知和實際應(yīng)

教學(xué)設(shè)計用能力。

2、教學(xué)手段：（1）通過對相關(guān)知識的講解了解UI控件設(shè)計基礎(chǔ)；（2）通過任務(wù)式案例的

講解掌握不同UI控件的制作方法和技巧；（3）通過項目演練增強對UI控件的認(rèn)識。

3、教學(xué)資料及要求：在網(wǎng)上找一些簡單的U1控件進行制作，來加深學(xué)員對知識點的理解

和提高實際應(yīng)用能力。

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

討論問題：1、UI控件設(shè)計的設(shè)計網(wǎng)格有哪些？

2、UI控件設(shè)計中常用到哪些工具和命令？

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

相關(guān)知識：UI控件設(shè)計基礎(chǔ)知識

任務(wù)3.1設(shè)計旅游類App按鈕控件

3.1.1任務(wù)引入

3.1.2設(shè)計理念

3.1.3任務(wù)知識：圓角矩形工具、橫排文字工具

3.1.4任務(wù)實施

任務(wù)3.2設(shè)計旅游類App選抒控件

3.2.1任務(wù)引入

3.2.2設(shè)計理念

3.2.3任務(wù)知識：變換命令

3.2.4任務(wù)實施

任務(wù)3.3設(shè)計旅游類App加減控件

3.3.1任務(wù)引入

3.3.2設(shè)計理念

3.3.3任務(wù)知識：置入嵌入對象命令

3.3.4任務(wù)實施

任務(wù)3.4設(shè)計旅游類App分段控件

3.4.1任務(wù)引入

3.4.2設(shè)計理念

3.4.3任務(wù)知識：添加圖層蒙版命令、畫筆工具、減去頂層形狀命令

3.4.4任務(wù)實施

任務(wù)3.5設(shè)計旅游類App頁面控件

3.5.1任務(wù)引入

3.5.2設(shè)計理念

3.5.3任務(wù)知識：直線工具

3.5.4任務(wù)實施

任務(wù)3.6設(shè)計旅游類App反債控件

3.6.1任務(wù)引入

3.6.2設(shè)計理念

3.6.3任務(wù)知識：橢圓工具

3.6.4任務(wù)實施

任務(wù)3.7設(shè)計旅游類App文本框控件

3.7.1任務(wù)引入

3.7.2設(shè)計理念

3.7.3任/知識：字符面板

3.7.4任務(wù)實施

任務(wù)3.8項目演練-設(shè)計電商類App文本框控件

3.8.1任務(wù)引入

3.8.2設(shè)計理念

任務(wù)3.9項目演練-設(shè)計餐飲類App按鈕控件

3.9.1任務(wù)引入

3.9.2設(shè)計理念

1、了解UI控件的基本概念。

2、明確tn控件的獲取方法。

小結(jié)

3、了解UI控件的設(shè)計思路。

4、掌握UI控件的制作方法。

任務(wù)3.8項目演練-設(shè)計電商類App文本框控件

3.8.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制電商類App文本框控件，掌握文本框控件的

設(shè)計要點與制作方法。

3.8.2設(shè)計理念

在設(shè)計過程中，圍繞電商類App文木框控件進行創(chuàng)意.整體呈現(xiàn)出編輯文木，操作高

效的視覺效果。線性文本框的弱化有助于簡化布局。

2)俞入密碼O

密碼

(2)XJGKJ6O

作業(yè)

任務(wù)3.9項目演練-設(shè)計餐飲類App按鈕控件

3.9.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制餐飲類App按鈕控件，掌握按鈕控件的設(shè)計

要點與制作方法。

3.9.2設(shè)計理念

在設(shè)計過程中，圍繞餐飲類App按鈕控件進行創(chuàng)意。圖標(biāo)選灰色和橙色兩種顏色，可

以更好地區(qū)別不同的層級關(guān)系。同時橙色既能明確操作乂能吸引用戶。

同意協(xié)議并登錄

使用其他手機號登錄

第4講

搭建豐富的組件

誤時內(nèi)容授課時間450分鐘課時10

-UI組件設(shè)計

>了解UI控件的基本概念。

>明確UI控件的獲取方法。

>掌握各種組件的設(shè)計思路。

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

>掌握各種組件的制作方法。

>培養(yǎng)對組件的審美鑒賞能力。

>培養(yǎng)對組件的設(shè)計創(chuàng)意能力。

>掌握各種組件的設(shè)計思路。

教學(xué)重點

>掌握各種組件的制作方法。

培養(yǎng)對組件的審美鑒賞能力。

教學(xué)難點

培養(yǎng)對組件的設(shè)計創(chuàng)意能力。

1、教學(xué)思路：（1）通過相關(guān)知識的講解了解UI組件設(shè)計的概念和設(shè)計風(fēng)格；［2）通過任

務(wù)引入引導(dǎo)學(xué)生了解任務(wù)學(xué)習(xí)的要點；（3）通過設(shè)計理念確認(rèn)設(shè)計的構(gòu)思過程和主導(dǎo)

思想；（4）通過任務(wù)知識的解析了解設(shè)計中的軟件功能應(yīng)用；（5）通過任務(wù)實施的解

析快速熟悉U1組件設(shè)計制作過程；（6）通過項目演練可以拓展學(xué)生的認(rèn)知和實際應(yīng)用

教學(xué)設(shè)計能力。

2、教學(xué)手段：（1）通過對相關(guān)知識的講解了解□組件設(shè)計基礎(chǔ)；（2）通過任務(wù)式案例的

講解掌握不同UI組件的制作方法和技巧；（3）通過項目演練增強對組件設(shè)計的認(rèn)識。

3、教學(xué)資料及要求：在網(wǎng)上找一些不同類型的□組件進行制作，來加深學(xué)員對知識點的

理解和提高實際應(yīng)用能力。

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

討論問題：1、UI組件設(shè)計技巧有哪些？

2、UI組件構(gòu)成元素有哪些？

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

相關(guān)知識：UI組件設(shè)計基礎(chǔ)知識

任務(wù)4.1設(shè)計旅游類App導(dǎo)航欄

4.1.1任務(wù)引入

4.1.2設(shè)計理念

4.1.3任務(wù)知識：屬性面板

4.1.4任務(wù)實施

任務(wù)4.2設(shè)計旅游類App標(biāo)簽欄

4.2.1任務(wù)引入

4.2.2設(shè)計理念

4.2.3任務(wù)知識：Wuslrator-矩形工具、鋼筆工具、直接選擇工具

4.2.4任務(wù)實施

任務(wù)4.3設(shè)計旅游類App金剛區(qū)

4.3.1任務(wù)引入

4.3.2設(shè)計理念

4.3.3任務(wù)知識：直接選擇工具、漸變疊加命令

4.3.4任務(wù)實施

任務(wù)4.4設(shè)計旅游類App竟片區(qū)

4.4.1任務(wù)引入

4.4.2設(shè)計理念

4.4.3任務(wù)知識：剪貼蒙版命令、顏色疊加命令

4.4.4任務(wù)實施

任務(wù)4.5項目演練-設(shè)計電商美App標(biāo)簽欄

4.5.1任務(wù)引入

4.5.2設(shè)計理念

任務(wù)4.6項目演練-設(shè)計餐飲類App標(biāo)簽欄

4.6.1任務(wù)引入

4.6.2設(shè)計理念

1、了解UI控件的基本概念;

、件2、明確UI控件的獲取方法；

'一03、掌握各種組件的設(shè)計思路；

4、掌握各種組件的制作方法。

任務(wù)4.5項目演練-設(shè)計電商類App標(biāo)簽欄

4.5.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Illustrator和Photoshop繪制電商類App標(biāo)簽欄，掌握標(biāo)簽欄

的設(shè)計要點與制作方法。

4.5.2設(shè)計理念

在設(shè)計過程中，圍繞電商類App標(biāo)簽欄進行創(chuàng)意。整體設(shè)計以圖標(biāo)+文字的方式進行展

示，擁有較高的識別度，具有操作靈活、指導(dǎo)用戶的特點。白色的背景樣式，使背景與標(biāo)

簽欄區(qū)分明顯。線性（未選中狀態(tài)）-線性（選中狀態(tài)），這種方式下的切換狀態(tài)精致簡潔,

使整體適用于電商類產(chǎn)品。

□O

□□QA

首頁分類發(fā)現(xiàn)購物車我的

作業(yè)任務(wù)4.6項目演練-設(shè)計餐飲類App標(biāo)簽欄

4.6.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Illustrator和Photoshop繪制餐飲類App標(biāo)簽欄，掌握標(biāo)簽欄

的設(shè)計要點與制作方法。

4.6.2設(shè)計理念

在設(shè)計過程中，圍繞餐飲類App標(biāo)簽欄進行創(chuàng)意。整體設(shè)計以圖標(biāo)+文字的方式進行展

示，擁有較高的識別度，具有操作靈活、指導(dǎo)用戶的特點。白色的背景樣式，使背景與標(biāo)

簽欄區(qū)分明顯。面性（未選中狀態(tài)）-面性（選中狀態(tài)），這種方式下的切換狀態(tài)安全厚重,

使整體適用于餐飲類產(chǎn)品。

金CPa

首頁發(fā)現(xiàn)訂單我的

第5講

打造牛.動的頁面

誤時內(nèi)容授課時間720分鐘課時16

-U1頁面設(shè)計

>掌握UI頁面的設(shè)計規(guī)則。

>掌握UI頁面的核心模塊。

>了解UI頁面的設(shè)計思路。

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

>掌握UI頁面的制作方法。

>培養(yǎng)對UI頁面的審美鑒賞能力。

>培養(yǎng)對UI頁面的設(shè)計創(chuàng)意能力。

>掌握UI頁面的設(shè)計規(guī)則。

>掌握UI頁面的核心模塊。

教學(xué)重點

>了解UI頁面的設(shè)計思路。

>掌握UI頁面的制作方法。

培養(yǎng)對UI頁面的百美鑒賞能力。

教學(xué)難點

培養(yǎng)對UI頁面的設(shè)計創(chuàng)意能力。

1、教學(xué)思路：（1）通過相關(guān)知識的講解了解UI頁面的設(shè)計規(guī)則；（2）通過任務(wù)引入

引導(dǎo)學(xué)生了解任務(wù)學(xué)習(xí)的要點；（3）通過設(shè)計理念確認(rèn)設(shè)計的構(gòu)思過程和主導(dǎo)思想；

（4）通過任務(wù)知識的解析了解設(shè)計中的軟件功能應(yīng)用；（5）通過任務(wù)實施的解析

快速熟悉UI頁面的設(shè)計制作過程；（6）通過項目演練可以拓展學(xué)生的認(rèn)知和實際

應(yīng)用能力。

教學(xué)設(shè)計

2、教學(xué)手段：（1）通過對相關(guān)知識的講解了解UI頁面設(shè)計基礎(chǔ)；（2）通過任務(wù)式案

例的講解掌握不同UI頁面的制作方法和技巧；（3）通過項目演練增強對口頁面設(shè)

計的認(rèn)識。

3、教學(xué)資料及要求：在網(wǎng)上找一些不同類型的」I頁面進行制作，來加深學(xué)員對知識

點的理解和提高'實際應(yīng)用能力。

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

討論問題：1、UI頁面的設(shè)計規(guī)則是什么？

2、UI頁面的核心模塊有哪些？

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

相關(guān)知識：UI頁面的風(fēng)格類型

任務(wù)5.1設(shè)計旅游類App閃屏頁

5.1.1任務(wù)引入

5.1.2設(shè)計理念

5.1.3任務(wù)知識：綜合運用Photoshop軟件制作旅游類App閃屏頁

5.1.4任務(wù)實施

任務(wù)5.2設(shè)計旅游類App引導(dǎo)頁

5.2.1任務(wù)引入

5.2.2設(shè)計理念

5.2.3任務(wù)知識：綜合運用Phoioshop軟件制作旅游類App引導(dǎo)頁

5.2.4任務(wù)實施

任務(wù)5.3設(shè)計旅游類App首頁

5.3.1任務(wù)引入

5.3.2設(shè)計理念

5.3.3任務(wù)知識：綜合運用Photoshop軟件制作旅游類App苜頁

5.3.4任務(wù)實施

任務(wù)5.4設(shè)計旅游類App個人中心頁

5.4.1任務(wù)引入

5.4.2設(shè)計理念

5.4.3任務(wù)知識：綜合運用Photoshop軟件制作旅游類App個人中心頁

5.4.4任務(wù)實施

任務(wù)5.5項目演練-設(shè)計旅游類App詳情頁

5.5.1任務(wù)引入

5.5.2設(shè)計理念

任務(wù)5.6項目演練-設(shè)計旅游類App注冊登■錄頁

5.6.1任務(wù)引入

5.6.2設(shè)計理念

任務(wù)5.7項目演練-設(shè)計電商類App頁面

5.7.1任務(wù)引入

5.7.2設(shè)計理念

任務(wù)5.8項目演練■設(shè)計餐飲類App頁面

5.8.1任先引入

5.8.2設(shè)計理念

1、掌握UI頁面的設(shè)計規(guī)則。

2、掌握UI頁面的核心模塊。

小結(jié)

3、了解UI頁面的設(shè)計思路。

4、掌握UI頁面的制作方法。掌握景深的控制。

任務(wù)5.5項目演練-設(shè)計旅游類App詳情頁

5.5.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Photoshop設(shè)計旅游類App詳情頁，掌握詳情頁的設(shè)計要

點與制作方法。

5.5.2設(shè)計理念

在設(shè)計過程中，圍繞主題旅游進行創(chuàng)意“背景為純色和風(fēng)景圖片作為襯托“色彩

選取橘黃色、深黃色和淺灰色分別體現(xiàn)了歡快、熱情和柔和。字體選用蘋方符合設(shè)計

規(guī)范。視覺表現(xiàn)應(yīng)與任務(wù)5.I的設(shè)計風(fēng)格保持一致。整體設(shè)計充滿特色，契合主題。

作業(yè)

任務(wù)5.6項目演練-設(shè)計旅游類App注冊登錄頁

5.6.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Photoshop設(shè)計旅游類App注冊登錄頁，掌握注冊登錄頁

的設(shè)計要點與制作方法.

5.6.2設(shè)計理念

在設(shè)計過程中，圍繞主題旅游進行創(chuàng)意。整體設(shè)計具有清晰的操作流程。以實際

圖片作為背景，能夠增強用戶對產(chǎn)品的期待。色彩選用橙色能夠體現(xiàn)旅游的歡快熱情

并突出重點。字體選用蘋方符合設(shè)計規(guī)范。

<X

錄后更加精彩

氤心?閑船.■?費風(fēng)■?■受?莊城卻.反情

xjgw>@163.com

1

工V*'Y八?.

舌同.IQ

ttidwt*IOMifn^WtSidffW?

?fgMZ5?

@④④

任務(wù)5.7項目演練-設(shè)計電商類App頁面

5.7.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制電商類App頁面，掌握電商類App頁面

的設(shè)計要點與制作方法。

5.7.2設(shè)計理念

任務(wù)5.8項目演練-設(shè)計餐飲類App頁面

5.8.1任務(wù)引入

本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制餐飲類App頁面，掌握餐飲類App頁面

的設(shè)計要點與制作方法。

5.8.2設(shè)計理念

在設(shè)計過程中，圍繞餐飲類App頁面進行創(chuàng)意.整休呈現(xiàn)出具有感染力的視覺效

果。

6I翼道

“

二

二

941

X

歡迎登錄

an重產(chǎn)

■.&188****8888

c?

nr)ueaxue

9528-520?188

1MHl1vat91H9

常用協(xié)建

?Q00

MflBB口*MR

?&

??和■?a?

更多用希

金a￡

第6講

快速輸出UI設(shè)計

誤時內(nèi)容授課時間450分鐘課時10

-UI設(shè)計輸出

>熟悉UI頁面的標(biāo)注內(nèi)容。

>掌握UI頁面切圖的切圖規(guī)則。

》了解UI頁面的常用命名。

>掌握UI頁面的標(biāo)注。

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

>掌握UI頁面的切圖。

>掌握UI切圖的命名。

>培養(yǎng)良好的UI設(shè)計輸出習(xí)慣。

>培養(yǎng)一定的團隊合作能力。

>掌握UI頁面的標(biāo)注。

教學(xué)重點>掌握UI頁面的切圖。

>掌握UI切圖的命名。

培養(yǎng)良好的UI設(shè)計輸出習(xí)慣。

教學(xué)難點

培養(yǎng)一定的團隊合作能力。

1、教學(xué)思路；（1）通過相關(guān)知識的講解了解UI頁面的標(biāo)注內(nèi)容和切圖規(guī)則；（2）通

過任務(wù)引入引導(dǎo)學(xué)生了解任務(wù)學(xué)習(xí)的要點：（3）通過設(shè)計理念確認(rèn)設(shè)計的構(gòu)思過程

和主導(dǎo)思想；（4）通過任務(wù)知識的解析了解設(shè)計中的軟件功能應(yīng)用；（5）通過任務(wù)

實施的解析快速熟悉UI頁面制作過程：（6）通過項目演練可以拓展學(xué)生的認(rèn)知和

實際應(yīng)用能力。

教學(xué)設(shè)計

2、教學(xué)手段：（1）通過對相關(guān)知識的講解了解UI頁面設(shè)計基礎(chǔ)；（2）通過任務(wù)式案

例的講解掌握不同UI頁面的制作方法和技巧；（3）通過項目演練增強對LI頁面的

認(rèn)識。

3、教學(xué)資料及要求：在網(wǎng)上找一些不同類型的JI頁面進行制作，來加深學(xué)員對知識

點的理解和提高實際應(yīng)用能力。

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

討論問題：1、UI頁面的切圖規(guī)則有哪些？

2、UI頁面的常用命名有那些？

內(nèi)容大綱：具體可結(jié)合本項目佗PPT課件進行配合講解。

相關(guān)知識：UI設(shè)計輸出基礎(chǔ)知識

任務(wù)6.1標(biāo)注旅游類App注冊登錄頁

6.1.1任務(wù)引入

6.1.2任務(wù)知識：PxCook

6.1.3任務(wù)實施

任務(wù)6.2制作旅游類App注冊登錄頁切圖

6.2.1任務(wù)引入

6.2.2任務(wù)知識:Cuttennan

6.2.3任務(wù)實施

任務(wù)6.3命名旅游類App注冊登錄頁切圖

6.3.1任務(wù)引入

6.3.2任務(wù)知識：命名規(guī)則

6.3.3任務(wù)實施

任務(wù)6.4項目演練-切圖命名電商類App注冊登錄頁

6.4.1任務(wù)引入

6.4.2任務(wù)實施

任務(wù)6.5項目演練-切圖命名卷飲類App注冊登錄頁

6.5.1任務(wù)引入

6.5.2任務(wù)實施

1、熟悉UI頁面的標(biāo)注內(nèi)容；

2、掌握UI頁面切圖的切圖規(guī)則：

3、了解UI頁面的常用命名；

小結(jié)

4、掌握UI頁面的標(biāo)注；

5、掌握UI頁面的切圖；

6、掌握UI切圖的命名。

任務(wù)6.4項目演練一切圖命名電商類App注冊登錄頁

6.4.1任務(wù)引入

本任務(wù)通過使用PxCook軟件標(biāo)注頁面，使