教案編號：5

課題：第5章UI中的頁面設計

課時：16課時

授課類型：講授+實訓

項目目標：

?掌握App的閃屏頁制作

?掌握App的引導頁制作

?掌握App的首頁制作

?掌握App的個人中心頁制作

?掌握App的詳情頁制作

?掌握App的注冊登錄頁制作

項目重點：

?App的閃屏頁制作

?App的引導頁制作

?App的首頁制作

?App的個人中心頁制作

?App的詳情頁制作

?App的注冊登錄頁制作

項目難點：

App閃屏頁、引導頁、首頁、個人中心頁、詳情頁、注冊登錄頁的制作方法

項目技能點：

App閃屏頁、引導頁、首頁、個人中心頁、詳情頁、注冊登錄頁的制作

項目教學技巧：

1.知識講解

2.案例實訓

項目過程:

（一）課前準備

1.授課前準備

準備好教學川具和教學設備

2.板書

課題：第5章UI中的頁面設計

項目目標：

?掌握App的閃屏頁制作

?掌握App的引導頁制作

?掌握App的首頁制作

?掌握App的個人中心頁制作

?掌握App的詳情頁制作

?掌握App的注冊登錄頁制作

3.課程引入

通過課堂案例效果展示介紹App各頁面

閃屏頁引導頁

首頁個人中心頁洋情頁登錄頁

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

5.1閃屏頁

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

及類型這兩個方面進行閃屏頁的講解。

5.1.1閃屏頁的概念

閃屏頁又稱為"啟動頁"，是用戶點擊App圖標后，預先加載的一張圖片。閃屏頁承載了用戶

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

關(guān)懷型。

5.1.2閃屏頁的類型

1.品牌推廣型

品牌推廣型閃屏頁是為表現(xiàn)產(chǎn)品品牌而設定。基本采用"產(chǎn)品1。即+產(chǎn)品名稱+產(chǎn)品"的簡潔

化設計形式，如圖所示。

1號店閑魚螞蟻財富

2.活動廣告型

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

采用插畫以及暖色的設計形式，用以營造熱鬧的氛圍，如圖所示。

限時福利！

在線解壓券更費送!

立即辦理

免費領(lǐng)取

點擊參與>

<2>百度同盤知乎

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

1249

雙12提前

11.11慶大放價燥起來!

\分曰開坦/千萬紅包

貨5折限時秒）

十億紅包不止五折

立即搶購。0元開搶）

雙11國慶雙12

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

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

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

百度錢包QQ音樂Q。瀏覽器

5.1.3課堂案例一制作旅游類App閃屏頁

【案例設計要求】

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

2.頁面尺寸：750px（寬）xI624px（高1

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

【案例學習目標】學習使用軟件Photoshop制作旅游類App閃屏頁。

效果圖

【案例知識要點】使用置入嵌入對象命令置入圖像，使用顏色疊加命令添加效果。

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

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

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

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

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

命名為"背景圖"。

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

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

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

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

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

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

到圖像窗口中，將其拖曳到適當?shù)奈恢茫碋nler鍵確定操作,效果如圖所示，在“圖層"控制面

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

9:41.illW*■

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

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

框，其他選項的設置如圖所示，單擊“確定"按鈕，效果如圖所示。

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

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

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

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

進行設置，如圖所示，效果如圖所示。

&

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

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

到圖像窗口中，將其拖曳到適當?shù)奈恢茫碋nter鍵確定操作，在"圖層"控制面板中生成新的圖

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

▼

0%

度：6

不酶

二

正常

▼

100%

ft：

flO

rs

4*

：E3/

能旋

二

⑤

二

la二

a

_

_

引導頁

5.2

念以

別從概

面分

用。下

的作

功能

、講解

引導

操作

，具有

之一

頁面

常用

中的

i設計

作為u

引導頁

解。

頁的講

引導

進行

方面

兩個

型這

及類

念

的概

導頁

.1引

5.2

引導頁

成。

5頁組

由3-

，通常

圖片

的一組

p看到

開Ap

新，打

過更

或經(jīng)

一次

在第

用戶

頁是

引導

為

以細分

用，可

的作

特點

能和

要功

p的主

解Ap

速了

戶快

助用

前幫

前，提

App之

使用

用戶

了在

起到

。

廣型

品推

及產(chǎn)

型以

說明

功能

型

的類

導頁

.2引

5.2

明型

能說

1.功

版

p重大

于Ap

，常用

展示

進行

功能

的新

產(chǎn)品

要對

的，主

基礎(chǔ)

中最

導頁

是引

導頁

型引

說明

功能

示。