教案編號(hào)：5

課題：第5章UI中的頁(yè)面設(shè)計(jì)

課時(shí)：16課時(shí)

授課類型：講授+實(shí)訓(xùn)

項(xiàng)目目標(biāo)：

?掌握App的閃屏頁(yè)制作

?掌握App的引導(dǎo)頁(yè)制作

?掌握App的首頁(yè)制作

?掌握App的個(gè)人中心頁(yè)制作

?掌握App的詳情頁(yè)制作

?掌握App的注冊(cè)登錄頁(yè)制作

項(xiàng)目重點(diǎn)：

?App的閃屏頁(yè)制作

?App的引導(dǎo)頁(yè)制作

?App的首頁(yè)制作

?App的個(gè)人中心頁(yè)制作

?App的詳情頁(yè)制作

?App的注冊(cè)登錄頁(yè)制作

項(xiàng)目難點(diǎn)：

App閃屏頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、個(gè)人中心頁(yè)、詳情頁(yè)、注冊(cè)登錄頁(yè)的制作方法

項(xiàng)目技能點(diǎn)：

App閃屏頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、個(gè)人中心頁(yè)、詳情頁(yè)、注冊(cè)登錄頁(yè)的制作

項(xiàng)目教學(xué)技巧：

1.知識(shí)講解

2.案例實(shí)訓(xùn)

項(xiàng)目過(guò)程:

（一）課前準(zhǔn)備

1.授課前準(zhǔn)備

準(zhǔn)備好教學(xué)川具和教學(xué)設(shè)備

2.板書

課題：第5章UI中的頁(yè)面設(shè)計(jì)

項(xiàng)目目標(biāo)：

?掌握App的閃屏頁(yè)制作

?掌握App的引導(dǎo)頁(yè)制作

?掌握App的首頁(yè)制作

?掌握App的個(gè)人中心頁(yè)制作

?掌握App的詳情頁(yè)制作

?掌握App的注冊(cè)登錄頁(yè)制作

3.課程引入

通過(guò)課堂案例效果展示介紹App各頁(yè)面

閃屏頁(yè)引導(dǎo)頁(yè)

首頁(yè)個(gè)人中心頁(yè)洋情頁(yè)登錄頁(yè)

（二）課程內(nèi)容

5.1閃屏頁(yè)

閃屏頁(yè)作為UI設(shè)計(jì)中的常用頁(yè)面之一,具有突出產(chǎn)品、展示營(yíng)銷的作用。下面分別從概念以

及類型這兩個(gè)方面進(jìn)行閃屏頁(yè)的講解。

5.1.1閃屏頁(yè)的概念

閃屏頁(yè)又稱為"啟動(dòng)頁(yè)"，是用戶點(diǎn)擊App圖標(biāo)后，預(yù)先加載的一張圖片。閃屏頁(yè)承載了用戶

對(duì)App的第一印象，是情感化設(shè)計(jì)的重要組成部分，可以細(xì)分為品牌推廣型、活動(dòng)廣告型、節(jié)日

關(guān)懷型。

5.1.2閃屏頁(yè)的類型

1.品牌推廣型

品牌推廣型閃屏頁(yè)是為表現(xiàn)產(chǎn)品品牌而設(shè)定?；静捎?產(chǎn)品1。即+產(chǎn)品名稱+產(chǎn)品"的簡(jiǎn)潔

化設(shè)計(jì)形式，如圖所示。

1號(hào)店閑魚螞蟻財(cái)富

2.活動(dòng)廣告型

活動(dòng)廣告型閃屏頁(yè)是為推廣活動(dòng)或廣告而設(shè)定，通常將推廣的內(nèi)容直接設(shè)計(jì)在閃屏頁(yè)內(nèi)。多

采用插畫以及暖色的設(shè)計(jì)形式，用以營(yíng)造熱鬧的氛圍，如圖所示。

限時(shí)福利！

在線解壓券更費(fèi)送!

立即辦理

免費(fèi)領(lǐng)取

點(diǎn)擊參與>

<2>百度同盤知乎

百度網(wǎng)盤百度瀏覽器知乎

1249

雙12提前

11.11慶大放價(jià)燥起來(lái)!

\分曰開(kāi)坦/千萬(wàn)紅包

貨5折限時(shí)秒）

十億紅包不止五折

立即搶購(gòu)。0元開(kāi)搶）

雙11國(guó)慶雙12

3.節(jié)日關(guān)懷型

節(jié)日關(guān)懷型閃屏頁(yè)是為營(yíng)造節(jié)假日氛圍同時(shí)凸顯產(chǎn)品品牌而設(shè)定的。多采用"產(chǎn)品1。驗(yàn)+內(nèi)容

插畫”的設(shè)計(jì)形式，使用戶感受到節(jié)日的關(guān)懷與祝福，如圖所示。

百度錢包QQ音樂(lè)Q。瀏覽器

5.1.3課堂案例一制作旅游類App閃屏頁(yè)

【案例設(shè)計(jì)要求】

I.產(chǎn)品名稱：游兒，運(yùn)用軟件Photoshop制作旅游類App閃屏頁(yè)，效果如圖所示。

2.頁(yè)面尺寸：750px（寬）xI624px（高1

3.體現(xiàn)出行業(yè)風(fēng)格。

【案例學(xué)習(xí)目標(biāo)】學(xué)習(xí)使用軟件Photoshop制作旅游類App閃屏頁(yè)。

效果圖

【案例知識(shí)要點(diǎn)】使用置入嵌入對(duì)象命令置入圖像，使用顏色疊加命令添加效果。

(I)按Ctrl+N組合鍵，彈出"新建文檔”對(duì)話框，將寬度設(shè)為750像素，高度設(shè)為1624像

素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建"按鈕，完成文檔新建。

(2施擇"文件>置入嵌入對(duì)象"命令，彈出"置入嵌入的對(duì)象"對(duì)話框。選擇云盤中的"Ch05>

制作旅游類App>制作旅游類App閃屏頁(yè)>素材>01"文件，單擊"置入"按鈕，將圖片置入

到圖像窗口中，按Enter鍵確定操作，效果如圖所示，在“圖層"控制面板中生成新的圖層并將其

命名為"背景圖"。

(3)選擇"視圖>新建參考線"命令，彈出"新建參考線”對(duì)話框，設(shè)置如圖所示。單擊“確

定"按鈕，完成參考線的創(chuàng)建，效果如圖所示。

(4)選擇"視圖>新建參考線版面"命令，彈出"敏參考線版面”對(duì)話框,設(shè)置如圖所示。

單擊"確定"按鈕，完成參考線的創(chuàng)建，效果如圖所示。

(5施擇"文件>置入嵌入對(duì)象"命令，彈出"置入嵌入的對(duì)象”對(duì)話框。選擇云盤中的"ChO5>

制作旅游類App>制作旅游類App閃屏頁(yè)>素材>02"文件，單擊"置入"按鈕，將圖片置入

到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enler鍵確定操作,效果如圖所示，在“圖層"控制面

板中生成新的圖層并將其命名為"狀態(tài)欄二

9:41.illW*■

(6)單擊"圖層"控制面板下方的“添加圖層樣式"按鈕名，在彈出的菜單中選擇"顏色疊

加"命令，彈出對(duì)話框，設(shè)置"疊加"顏色為白色，單擊"確定"按鈕。返回到"顏色疊加”對(duì)話

框，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定"按鈕，效果如圖所示。

(7越擇"文件>置入嵌入對(duì)象”命令，彈出"置入嵌入的對(duì)象"對(duì)話框。選擇云盤中的"ChO5>

制作旅游類App>制作旅游類App閃屏頁(yè)>素材>03"文件，單擊"置入"按鈕，將圖片置入

到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enier鍵確定操作，在“圖層”控制面板中

生成新的圖層并將其命名為"Logo"。選擇"窗口>屬性"命令，彈出"屬性"面板，在面板中

進(jìn)行設(shè)置，如圖所示，效果如圖所示。

&

(8潢擇"文件>置入嵌入對(duì)象"命令，彈出"置入嵌入的對(duì)象”對(duì)話框。選擇云盤中的"Ch05>

制作旅游類App>制作旅游類App閃屏頁(yè)>素材>04"文件，單擊"置入"按鈕，將圖片置入

到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，在"圖層"控制面板中生成新的圖

層并將其命名為"HomeIndicator"。將其"不透明度”選項(xiàng)設(shè)為60%,如圖所示，效果如圖所示。

▼

0%

度：6

不酶

二

正常

▼

100%

ft：

flO

rs

4*

：E3/

能旋

二

⑤

二

la二

a

_

_

引導(dǎo)頁(yè)

5.2

念以

別從概

面分

用。下

的作

功能

、講解

引導(dǎo)

操作

，具有

之一

頁(yè)面

常用

中的

i設(shè)計(jì)

作為u

引導(dǎo)頁(yè)

解。

頁(yè)的講

引導(dǎo)

進(jìn)行

方面

兩個(gè)

型這

及類

念

的概

導(dǎo)頁(yè)

.1引

5.2

引導(dǎo)頁(yè)

成。

5頁(yè)組

由3-

，通常

圖片

的一組

p看到

開(kāi)Ap

新，打

過(guò)更

或經(jīng)

一次

在第

用戶

頁(yè)是

引導(dǎo)

為

以細(xì)分

用，可

的作

特點(diǎn)

能和

要功

p的主

解Ap

速了

戶快

助用

前幫

前，提

App之

使用

用戶

了在

起到

。

廣型

品推

及產(chǎn)

型以

說(shuō)明

功能

型

的類

導(dǎo)頁(yè)

.2引

5.2

明型

能說(shuō)

1.功

版

p重大

于Ap

，常用

展示

進(jìn)行

功能

的新

產(chǎn)品

要對(duì)

的，主

基礎(chǔ)

中最

導(dǎo)頁(yè)

是引

導(dǎo)頁(yè)

型引

說(shuō)明

功能

示。