UI界面設(shè)計(jì)與制作 教案 第5章教案

教案編號：5

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

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

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

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

?掌握App的閃屏頁制作

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

?掌握App的首頁制作

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

?掌握App的詳情頁制作

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

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

?App的閃屏頁制作

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

?App的首頁制作

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

?App的詳情頁制作

?App的注冊登錄頁制作

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

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

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

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

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

1.知識講解

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

項(xiàng)目過程：

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

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

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

2.板書

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

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

?掌握App的閃屏頁制作

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

?掌握App的首頁制作

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

?掌握App的詳情頁制作

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

3.課程引入

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

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

5.1閃屏頁

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

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

5.1.1閃屏頁的概念

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

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

關(guān)懷型。

5.1.2閃屏頁的類型

1.品牌推廣型

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

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

螞蟻財(cái)富

AntFortune

為人生更自出

里黑翻D期愿

螞蟻財(cái)富

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

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

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

眼耐福值!

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

立即辦理

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

111點(diǎn)擊參與

<2>百度網(wǎng)盤知乎

發(fā)現(xiàn)更大的世界

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

雙12提前

慶大放燥起來!

5曰開拒,fft千萬紅包雨

十億紅包不止五折

立即搶購。

雙11國慶雙12

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

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

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

QQ音樂

許杷我的歌牽回侏的味

G百慝也出

,X07<?<<y“tainsnow

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

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

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

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

2.頁面尺寸：750px（寬）x1624px（高\(yùn)

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

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

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

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

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

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

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

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

命名為"背景圖"。

蜜

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

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

狗建參考錢13

取向

f定一

O水平(H)

S§(v)展消

S8(P):88像素

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

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

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

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

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

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

9：41.ill令■

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

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

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

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

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

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

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

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

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

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

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

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

軍氨

q蜘-SGT□ft?

正常y栩明度：60%▼

5.2引導(dǎo)頁

引導(dǎo)頁作為ui設(shè)計(jì)中的常用頁面之一，具有操作引導(dǎo)、講解功能的作用。下面分別從概念以

及類型這兩個(gè)方面進(jìn)行引導(dǎo)頁的講解。

5.2.1引導(dǎo)頁的概念

引導(dǎo)頁是用戶在第一次或經(jīng)過更新，打開App看到的一組圖片，通常由3-5頁組成。引導(dǎo)頁

起到了在用戶使用App之前，提前幫助用戶快速了解App的主要功能和特點(diǎn)的作用，可以細(xì)分為

功能說明型以及產(chǎn)品推廣型。

5.2.2引導(dǎo)頁的類型

1.功能說明型

功能說明型引導(dǎo)頁是引導(dǎo)頁中最基礎(chǔ)的，主要對產(chǎn)品的新功能進(jìn)行展示，常用于App重大版

本的更新中。多采用插圖的設(shè)計(jì)形式，達(dá)到短時(shí)間內(nèi)吸引用戶的效果，如圖所示。

出了地鐵騎單車公交顏值“大”不同搜周邊全面升級

騙行加入公交規(guī)劃文字更大更清晰吃喝玩樂一手掌握

迸入地圖

高德地圖App的功能說明型引導(dǎo)頁

2.產(chǎn)品推廣型

產(chǎn)品推廣型引導(dǎo)頁是表達(dá)App的價(jià)值，讓用戶更了解這款A(yù)pp的情懷。多采用與企業(yè)形象和

產(chǎn)品風(fēng)格一致的生動(dòng)化、形象化設(shè)計(jì)形式，讓用戶感到畫面的精美，如圖所示。

京東商城App的產(chǎn)品推廣型引導(dǎo)頁

5.2.3課堂案例——制作旅游類App引導(dǎo)頁

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

1.運(yùn)用軟件Photoshop制作旅游類App引導(dǎo)頁，效果如圖所示。

2.頁面尺寸：750px（寬）xl624px（高\(yùn)

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

【案例學(xué)習(xí)目標(biāo)】學(xué)習(xí)使用軟件Photoshop制作旅游類App引導(dǎo)頁。

9：41MT-9:41M爭■9：41分■

XXX

說走就走，一個(gè)背包和一顆旅途的風(fēng)景美不勝收

是人生最華美的奢侈！勇敢的心，你準(zhǔn)備好了嗎!那么，出發(fā)吧！

■行.日ajaaii*.mea.

■UKiMteflA

開始

效果圖

【案例知識要點(diǎn)】使用置入嵌入對象命令置入圖像和圖標(biāo)，使用漸變疊加命令和顏色疊加命令

添加效果，使用橫排文字工具輸入文字。

1.制作美食到家App引導(dǎo)頁1

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

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

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

制作旅游類App＞制作旅游類App引導(dǎo)頁I＞素材＞01"文件，單擊"置入"按鈕，將圖片置

入到圖像窗口中，拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，效果如圖所示，在“圖層"

控制面板中生成新的圖層并將其命名為"背景圖"。

(3)單擊"圖層"控制面板下方的“創(chuàng)建新圖層"按鈕Q,在"圖層"控制面板生成新的圖

層"圖層1\將前景色設(shè)為黑色，按Alt+Delete組合鍵，為“圖層1"填充前景色，如圖所示。

(4)單擊"圖層"控制面板下方的"添加圖層樣式"按鈕*在彈出的菜單中選擇"漸變疊

加"命令，彈出對話框，單擊"漸變”選項(xiàng)右側(cè)的“點(diǎn)按可編輯漸變"按鈕■■一彈出"漸

變編輯器”對話框，在"位置"選項(xiàng)中分別輸入。、10。兩個(gè)位置點(diǎn)，分別設(shè)置兩個(gè)位置點(diǎn)顏色的

RGB值均設(shè)為黑色。設(shè)置兩個(gè)位置點(diǎn)的不透明度值為0(30%1100(0%),如圖所示,單擊“確

定"按鈕。返回到"漸變疊加”對話框，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定"按鈕，效果如圖

所示。

(5)選擇"視圖>新建參考線版面"命令，彈出"新建參考線版面"對話框，設(shè)置如圖所

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

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

制作旅游類App>制作旅游類App弓|導(dǎo)頁I>素材>02"文件，單擊"置入"按鈕，將圖片置

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

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

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

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

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

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

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

9:41.*1（令-

(9)選擇"文件＞置入嵌入對象"命令，彈出"置入嵌入的對象"對話框。選擇云盤中的"ChO5＞

制作旅游類App＞制作旅游類App引導(dǎo)頁1＞素材＞03"文件，單擊"置入"按鈕，將圖標(biāo)置

入到圖像窗口中，拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，效果如圖所示，在“圖層"

控制面板中生成新的圖層并將其命名為“關(guān)閉"。

9：41.ill令■

X

(10)按Ctrl+G組合鍵，群組圖層并將其命名為“導(dǎo)航欄"，如圖所示。選擇“橫排文字"工

具T.,在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇"窗口＞字符"命令，彈出面板，將"顏

色"設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層"控制

面板中生成新的文字圖層。

匿福

Q班.SQT□(9?

題y穆BHJg：wo%*

豌：E3/中自合填充：100%-

0>0號航欄

便7

1噩1

°

同口0.d0前

(11)使用相同的方法，再次在適當(dāng)?shù)奈恢梅謩e輸入需要的文字并選取文字，在"字符"面板

中，將"顏色"設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在"圖

層”控制面板中分別生成新的文字圖層。

(12)按Ctrl+O組合鍵，打開云盤中的"Ch03>制作旅游類App頁面控件.psd"文件，在

“圖層"控制面板中，選中"頁面控件"圖層組。選擇"移動(dòng)"工具中.,將選取的圖層組拖曳到

新建的圖像窗口中適當(dāng)?shù)奈恢?，如圖所示，效果如圖所示。

發(fā)縣

q熠j..HGT□(5?

穿透v穆明度：100%v

齷：工/中甘自填充：100%▼

O>□頁面控件

oTox

OT要么讀書、?-路上一

?T說走/走…幃侈I

△.口a口Q曲

(13)選擇“橫排文字”工具T.,在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在"字符"面

板中，將"顏色"設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確定操作，在“圖層"控制面

板中生成新的文字圖層。在“圖層”控制面板中將其“不透明度”選項(xiàng)設(shè)為50%,如圖所示，效果如

圖所示。

正常y不透明度：50%7

豌：臼/中40100%y

革方v,中等v

JO「T103

30點(diǎn)（自幼）-

l-.J

0E311v

V/&A?g形狀2拷貝

100%Tt100%

A年。點(diǎn)魏：||.中維2

TlTTT

?g開綴1

云丁憚%

-%2內(nèi)口a口Q前

(16)選擇"文件＞置入嵌入對象"命令，彈出"置入嵌入的對象"對話框。選擇云盤中的

"Ch05＞制作旅游類App＞制作旅游類App引導(dǎo)頁1＞素材＞04"文件，單擊"置入"按鈕，

將圖標(biāo)置入到圖像窗口中,拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在"圖層"控制

面板中生成新的圖層并將其命名為"上一頁"。設(shè)置圖層的"不透明度”選項(xiàng)為50%,如圖所示。

使用相同的方法置入"05"文件，拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在"圖層"

控制面板中生成新的圖層并將其命名為"下一頁"，如圖所示，效果如圖所示。

(17)按住shin鍵的同時(shí)，單擊"說走就走，…的奢侈r(nóng)文字圖層，將需要的圖層同時(shí)選取。

按Ctrl+G組合鍵,群組圖層并將其命名為“內(nèi)容區(qū)"，如圖所示。

Q翹vH0T□S)?

躺“襁明峰100%v；

豌：E3/小甘。埴充：100%"

O＞□內(nèi)杏區(qū)

O＞□哪把

Og1燧把向?■

??圖層】僅「

包口Q口?電

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

"ChO5>制作旅游類App>制作旅游類App弓|導(dǎo)頁】>素材〉06"文件，單擊"置入"按鈕，

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

生成新的圖層并將其命名為"HomeIndicator^,如圖所示,效果如圖所示。

(19)^Ctrl+S組合鍵，彈出"另存為"對話框，將其命名為"制作旅游類App引導(dǎo)頁1",

保存為psd格式。單擊“保存"按鈕，彈出"Photoshop格式選項(xiàng)"對話框，單擊"確定"按鈕，

將文件保存。

2.制作美食到家App引導(dǎo)頁2

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

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

(2)在"制作旅游類App引導(dǎo)頁V圖像窗口中,選中"HomeIndicator"圖層,按住Shift鍵

的同時(shí)，單擊“背景圖"圖層，將需要的圖層同時(shí)選取，如圖所示。單擊鼠標(biāo)右鍵，在彈出的菜單

中選擇"復(fù)制圖層"命令，在彈出的對話框中進(jìn)行設(shè)置，如圖所示，單擊“確定"按鈕，效果如圖

標(biāo)

(3)在"圖層"控制面板中選中"背景圖"圖層，按Delete鍵將其刪除。選擇"文件＞置入

嵌入對象"命令，彈出"置入嵌入的對象"對話框。選擇云盤中的"ChO5＞制作旅游類App＞制

作旅游類App引導(dǎo)頁2＞素材＞01"文件，單擊"置入"按鈕，將圖片置入到圖像窗口中，將其

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

景圖"，如圖所示,效果如圖所示。展開“內(nèi)容區(qū)"圖層組，選中“說走就走，…的奢侈r(nóng)文字圖

層，如圖所示。

(4)選擇“橫排文字"工具T.,選取文字并修改文字，效果如圖所示使用相同的方法修改

其他文字，效果如圖所示。

一個(gè)背包和一顆一個(gè)背包和一顆

勇敢的心，你準(zhǔn)備好了嗎!勇敢的心，你準(zhǔn)備好了嗎!

9(行不在于絳點(diǎn).西量在■途中的人對事正有郵蹩

黃后的0匕皿11色

02—

(5)在“圖層"控制面板中展開"頁面控件"圖層組，選中"形狀1"圖層，選擇“直線''工具

/.,在屬性欄中將"H"選項(xiàng)設(shè)為1像素，并調(diào)整形狀位置，如圖所示。在“圖層”控制面板中將

其“不透明度”選項(xiàng)設(shè)為50%,效果如圖所示。

02——-03<>■02—03<>

(6)選中"形狀2"圖層，在屬性欄中將"H"選項(xiàng)設(shè)為2像素，并調(diào)整形狀位置，如圖所示。

在“圖層”控制面板中將其"不透明度”選項(xiàng)設(shè)為100%,效果如圖所示。選中"上一頁"圖層，在

“圖層”控制面板中將其“不透明度”選項(xiàng)設(shè)為100%,效果如圖所示，并折爵"內(nèi)容區(qū)"圖層組。

02-----03<>■02-----03<>■02-----03<>

(7)按Ctrl+S組合鍵，彈出"另存為"對話框，將其命名為"制作旅游類App引導(dǎo)頁2”,保

存為psd格式。單擊“保存"按鈕，彈出"Photoshop格式選項(xiàng)"對話框，單擊"確定"按鈕，將

文件保存。

3.制作美食到家App引導(dǎo)頁3

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

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

(2)在"制作旅游類App引導(dǎo)頁2"圖像窗口中，選中"HomeIndicator1'圖層，按住Shift鍵

的同時(shí)，單擊“背景圖"圖層，將需要的圖層同時(shí)選取，如圖所示。單擊鼠標(biāo)右鍵，在彈出的菜單

中選擇"復(fù)制圖層"命令，在彈出的對話框中進(jìn)行設(shè)置，如圖所示，單擊“確定"按鈕，效果如圖

幅。

國隹

Q翅Q9T□Si?

正常y不蹣度：60%“

順：ES/*口：8就：100%v

ogHomeIndicator

o＞□內(nèi)各區(qū)

O＞n□就代

?龐蹬…

圖層1fx7

背星圖

.H翳自

oo啟口a口B曲

(3)在“圖層"控制面板中選中“背景圖"圖層，按Delete鍵將其刪除。選擇"文件＞置入

嵌入對象"命令，彈出"置入嵌入的對象"對話框。選擇云盤中的"Ch05＞制作旅游類App＞制

作旅游類App引導(dǎo)頁3＞素材＞01"文件，單擊"置入"按鈕，將圖片置入到圖像窗口中，將其

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

景圖"，如圖所示，效果如圖所示。展開"內(nèi)容區(qū)”圖層組，選中"T背包…好了嗎!”文字圖層,

如圖所示。

堂量

X

q蛭-國。T口分.

正常?不透明度：100%V

一個(gè)背包和一顆鱷

勇敢的心，你準(zhǔn)備好了嗎!q理O0T口(51?

an+n?9a.

■MnvirKSA正常7不透明度：100%y

崛：氏/中耳命填充：100%v|

OT02

0T旅行不在…憶和景色

O[T]一個(gè)背包…好了嗎！

?>□號睫

加，口a口B曲

(4)選擇“橫排文字"工具T.,選取文字并修改文字，效果如圖所示.使用相同的方法修改

其他文字，效果如圖所示。

旅途的風(fēng)景美不勝收

那么，出發(fā)吧！

旅行不在乎經(jīng)點(diǎn)，而是在■途中的人和事還蒲都黨

薨好的記憶如量色

(5)在“圖層"控制面板中展開“頁面控件"圖層組，選中"形狀2"圖層，選擇“直線”工具

,在屬性欄中將“H”選項(xiàng)設(shè)為1像素，并調(diào)整形狀位置，如圖所示。在“圖層”控制面板中將

其“不透明度”選項(xiàng)設(shè)為50%,效果如圖所示。

(6)選中"形狀2拷貝”圖層，在屬性欄中將"H"選項(xiàng)設(shè)為2像素，并調(diào)整形狀位置，如圖

所示。在“圖層’控制面板中將其“不透明度”選項(xiàng)設(shè)為100%,效果如圖所示。選中"下一頁"圖

層，在“圖層”控制面板中將其"不透明度”選項(xiàng)設(shè)為50%,效果如圖所示，并折疊“內(nèi)容區(qū)"圖層

組。

(7)在“圖層"控制面板中選中“內(nèi)容區(qū)”圖層組。選擇"視圖>新建參考線"命令，彈出

"新建參考線”對話框，設(shè)置如圖所示。單擊“確定"按鈕，完成參考線的創(chuàng)建，效果如圖所示。

新建參考茂

取向

;確原)

O水平(H)

垂直(V)取消

位蚩(P):1458像學(xué)

(8)選擇〃圓角矩形〃工具Q,在屬性欄的〃選擇工具模式"選項(xiàng)中選擇〃形狀",將〃填

充"顏色設(shè)為橘黃色(255、151、1)，〃描邊"顏色設(shè)為無，〃半徑”選項(xiàng)設(shè)置為24像素。在圖像

窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在〃圖層〃控制面板中生成新的形狀圖層〃圓角矩形選擇

"窗口＞屬性"命令，彈出"屬性"面板，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。

(9)選擇“橫排文字"工具T.,在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在"字符"面板

中，將"顏色"設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確定操作，如圖所示，在“圖層"

控制面板中生成新的文字圖層。

“X

字若=

蘋方-中等V

d（自珈

陽6。v

,100%

酗||

T*TxTT

/了1”達(dá)

▼3a平滑v

(10)在“圖層"控制面板中，按住Shift鍵的同時(shí)，單擊"圓角矩形1"圖層，將需要的圖層

同時(shí)選取。按Ctrl+G組合鍵，群組圖層并將其命名為"開始"，如圖所示。

?X

Q妞DGT□S)?

髓v不翻度：I。。％y

?。骸?中n。wo%H

OmHomeIndicator

0>□w

o>□內(nèi)容區(qū)

0>□導(dǎo)睫

o曾I碇…

阿口a口?曲

(11)按Ctrl+S組合鍵，彈出"另存為"對話框，將其命名為"制作旅游類App引導(dǎo)頁3",

保存為psd格式。單擊"保存"按鈕,彈出"Photoshop格式選項(xiàng)"對話框,單擊"確定"按鈕,

將文件保存。旅游類App引導(dǎo)頁制作完成。

5.3首頁

首頁作為ui設(shè)計(jì)中的常用頁面之一，具有流量分發(fā)、行為轉(zhuǎn)化的作用。下面分別從概念以及

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

5.3.1首頁的概念

首頁又稱為“起始頁"，是用戶使用App的第一頁。首頁承擔(dān)著流量分發(fā)的作用，是展現(xiàn)產(chǎn)品

氣質(zhì)的關(guān)鍵頁面，可以細(xì)分為列表型、網(wǎng)格型、卡片型、綜合型。

5.3.2首頁的類型

1.列表型

列表型首頁是在頁面上將同級別的模塊進(jìn)行分類展示，常用于表現(xiàn)數(shù)據(jù)展示、文字閱讀等方

面。采用單一的設(shè)計(jì)形式，方便用戶瀏覽，如圖所示。

加0.

?■(

①收取中…+

■收件箱

Q星標(biāo)卷件

0附件收釐

應(yīng)用

■通訊錄

Q費(fèi)卡

Q在線文檔

0J企業(yè)值值KOAEMfiiS?

o更多應(yīng)用?>

文怦安

耶郵件

□注福精

<已發(fā)送

F已■!除

■垃圾桁12>

QQ郵箱

2.網(wǎng)格型

網(wǎng)格型首頁是在頁面上將重要的功能以矩形模塊的形式進(jìn)行展示，常用于工具類等方面。采

用的統(tǒng)T巨形模塊的設(shè)計(jì)形式，刺激用戶點(diǎn)擊，如圖所示。

16：14“1個(gè)?

項(xiàng)目

當(dāng)劇歸檔歷作

C3E3附

M?racopy!今條Copy1

冬⑥

AntDesigniAntO?sign!g.1

支付Ml■訊SiO分析｛

W幺。

?HMUaa

墨刀

3.卡片型

卡片型首頁是在頁面上將圖片、文字、控件放置于同一張卡片中，再將卡片進(jìn)行分類展示，

常用于表現(xiàn)數(shù)據(jù)展示、文字閱讀、工具使用等方面。采用的統(tǒng)一的卡片設(shè)計(jì)形式，不僅讓用戶一

目了然，更能加強(qiáng)產(chǎn)品內(nèi)容的點(diǎn)擊欲望，如圖所示。

18：24

書?

變例炳：

惕相聯(lián)《品汐傳》隔著小說更NI影！

更備免費(fèi)好書11不停＞

a

微信讀書App

4.綜合型

綜合型首頁是由搜索欄、Banner.金剛區(qū)、瓷片區(qū)以及標(biāo)簽欄等組成的頁面，運(yùn)用范圍較廣，

常用于電商類、教育類、旅游類等方面。采用豐富的設(shè)計(jì)形式，滿足用戶的需求，如圖所示。

(F??(TO

1QCB兄俱中心<J>8KKSASHBOMt

ooooo

mnttIM中O?9KA

A8§@￡

■■untacwsmi<a

1號店App途牛旅游App

5.3.3課堂案例-制作旅游類App首頁

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

1.運(yùn)用軟件Photoshop制作旅游類App首頁，效果如圖所示。

2.頁面尺寸：750px（寬）x2086px（高\(yùn)

3.設(shè)計(jì)一款綜合型首頁，并體現(xiàn)出行業(yè)風(fēng)格.

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

效果圖

【案例知識要點(diǎn)】使用圓角矩形工具、矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令

置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用

屬性面板制作彌散投影，使用橫排文字工具輸入文字。

1.制作Banner、狀態(tài)欄、導(dǎo)航欄和滑動(dòng)軸

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

素，分辨率設(shè)為72像素硬寸，背景內(nèi)容設(shè)為淺灰色（249、249、249）,如圖所示。單擊“創(chuàng)建"

按鈕，完成文檔新建。

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

單擊“確定"按鈕，完成參考線的創(chuàng)建。

(3)選擇“圓角矩形”工具O.,在屬性欄的“選擇工具模式”選項(xiàng)中選擇"形狀"，將"填

充"顏色設(shè)為黑色，"描邊"顏色設(shè)為無，"半徑”選項(xiàng)設(shè)置為40像素。在圖像窗口中適當(dāng)?shù)奈恢?/p>

繪制圓角矩形，如圖所示，在“圖層"控制面板中生成新的形狀圖層"圓角矩形1"。選擇"窗口>

屬性"命令，彈出"屬性"面板，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。

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

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

圖像窗口中并拖曳到適當(dāng)?shù)奈恢茫碋nter鍵確定操作，如圖所示，在“圖層"控制面板中生成新

的圖層并將其命名為"底圖"。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。

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

制作旅游類App＞制作旅游類App首頁＞素材＞02"文件，單擊"置入"按鈕，將圖片置入到

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

的圖層并將其命名為"樹二

(6)單擊"圖層"控制面板下方的"添加圖層樣式"按鈕必，在彈出的菜單中選擇"描邊"

命令，彈出對話框，設(shè)置描邊顏色為白色，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定"按鈕。按

Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。

(7)使用相同的方法，置入云盤中的"Ch05＞制作旅游類App＞制作旅游類App首頁＞素

材＞03"文件，將其拖曳到適當(dāng)?shù)奈恢貌⑻砑用柽呅ЧЧ鐖D所示，在“圖層"控制面板中

生成新的圖層并將其命名為“熱氣球"。

(8)選擇“橫排文字”工具T.,在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇"窗口＞字

符"命令，彈出面板，將"顏色"設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確定操作，在

"圖層"控制面板中生成新的文字圖層。選中文字"6",在"字符"面板中進(jìn)行設(shè)置，如圖所示,

效果如圖所示。

漢儀太極體尚V漢儀太極體筒V

莖

點(diǎn)4

b:值

72o國

。

v/JAT

loXo)%賽-

lT點(diǎn)

o.cri?:

AITT工

TT

丁

￡伏處與出了1"%17TIN53匕

vaa無

(9)按Ctrl+J組合鍵，復(fù)制文字圖層，在“圖層"控制面板中生成新的文字圖層"景點(diǎn)6折

起拷貝、選擇"橫排文字”工具T.,刪除不需要的文字，并調(diào)整文字位置，如圖所示。在"圖

層"控制面板中，將圖層的“填充"選項(xiàng)設(shè)為0%,如圖所示。

為該圖層添加描邊樣式，如圖所示，效果如圖所示。

(10)選擇"圓角矩形”工具O.,在屬性欄中將"填充"顏色設(shè)為白色，"描邊"顏色設(shè)為無，

"半徑"選項(xiàng)設(shè)置為4像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在"圖層"控制面板中生成

新的形狀圖層"圓角矩形2"。在"屬性"面板中進(jìn)行設(shè)置，如圖所示，按Enter鍵確定操作，效

果如圖所示。

(11)單擊"圖層"控制面板下方的"添加圖層樣式"按鈕先，在彈出的菜單中選擇"漸變疊

加"命令，彈出對話框，單擊"漸變”選項(xiàng)右側(cè)的“點(diǎn)按可編輯漸變"按鈕■■,,彈出"漸

變編輯器”對話框，在"位置"選項(xiàng)中分別輸入0、100兩個(gè)位置點(diǎn)，分別設(shè)置兩個(gè)位置點(diǎn)顏色的

RGB值為0(255、137、51\100(250、175、137),如圖所示，單擊"確定"按鈕。返回到"漸

變疊加"對話框，其他選項(xiàng)的設(shè)置如圖所示.切換到“描邊"選項(xiàng)卡中，設(shè)置"描邊"顏色為淡黃

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

(12)選擇“橫排文字”工具T.,在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在"字符"面

板中，將"顏色"設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確定操作，在“圖層"控制面

板中生成新的文字圖層。選中文字"299",在"字符"面板中進(jìn)行設(shè)置，如圖所示，效果如圖所

(13)選擇"鋼筆"工具M(jìn),在屬性欄中將"填充"顏色設(shè)為無，“描邊”顏色設(shè)為白色，“粗

細(xì)”選項(xiàng)設(shè)為1像素，在適當(dāng)?shù)奈恢美L制一條不規(guī)則曲線，在“圖層”控制面板中生成新的形狀圖層

“形狀1”，如圖所示。使用相同的方法繪制多條曲線，效果如圖所示。

(14)按住Shift鍵的同時(shí)，單擊"形狀1"圖層，將需要的圖層組同時(shí)選取。按Ctrl+G組合

鍵，群組圖層組并將其命名為“裝飾"，如圖所示。按住S