1、YOUR LOGO原創(chuàng)力獨(dú)家文檔教材配套參考答案 課 題: 第3章 App界面設(shè)計(jì)課 時(shí): 16課時(shí)授課類型: 講授+實(shí)訓(xùn)教學(xué)目標(biāo): 了解App的基礎(chǔ)知識(shí) 掌握App的設(shè)計(jì)規(guī)范 認(rèn)識(shí)App常用界面類型教學(xué)重點(diǎn):App的設(shè)計(jì)規(guī)范、App常用界面的設(shè)計(jì)方法教學(xué)難點(diǎn):App常用界面的設(shè)計(jì)方法本章技能點(diǎn)：社交類App-閃屏頁(yè)的繪制方法、社交類App-歡迎頁(yè)的繪制方法、社交類App-首頁(yè)的繪制方法、社交類App-消息列表頁(yè)的繪制方法、社交類App-聊天頁(yè)的繪制方法、社交類App-個(gè)人中心頁(yè)的繪制方法本章教學(xué)技巧：1.知識(shí)講解2.案例實(shí)訓(xùn)教學(xué)過(guò)程：（一）課前準(zhǔn)備1.授課前準(zhǔn)備準(zhǔn)備好教學(xué)用具和教學(xué)設(shè)備2.板

2、書(shū)課題：第3章 App界面設(shè)計(jì)項(xiàng)目目標(biāo)： 了解App的基礎(chǔ)知識(shí) 掌握App的設(shè)計(jì)規(guī)范 認(rèn)識(shí)App常用界面類型3.課程引入通過(guò)“制作侃侃App”案例效果展示引入App界面設(shè)計(jì)的概念 （二）課程內(nèi)容3.1 App基礎(chǔ)知識(shí)本節(jié)介紹App相關(guān)的基礎(chǔ)知識(shí)，包括App的概念、App的流程以及App設(shè)計(jì)的原則。3.1.1 App的概念A(yù)pp是應(yīng)用程序Application的縮寫，一般指智能手機(jī)的第三方應(yīng)用程序，如圖所示。用戶主要從應(yīng)用商店下載App，比較常用的應(yīng)用商店有蘋果的App Store、華為應(yīng)用市場(chǎng)等。應(yīng)用程序的運(yùn)行與系統(tǒng)密不可分，目前市場(chǎng)上，主要的智能手機(jī)操作系統(tǒng)有蘋果公司的iOS和谷歌公司的An

3、droid系統(tǒng)。對(duì)于UI設(shè)計(jì)師而言，要進(jìn)行移動(dòng)界面設(shè)計(jì)工作，需要分別學(xué)習(xí)兩大系統(tǒng)的界面設(shè)計(jì)知識(shí)。由Ron Design Agency創(chuàng)作的App界面3.1.2.App設(shè)計(jì)的流程App設(shè)計(jì)可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、界面測(cè)試、設(shè)計(jì)驗(yàn)證的步驟來(lái)進(jìn)行，如圖所示。App設(shè)計(jì)的流程圖1.分析調(diào)研App的設(shè)計(jì)是根據(jù)品牌的調(diào)性、產(chǎn)品的定位而進(jìn)行的，不同應(yīng)用領(lǐng)域的App，設(shè)計(jì)風(fēng)格也會(huì)有區(qū)別。因此，我們?cè)谠O(shè)計(jì)之前應(yīng)該先分析需求，了解用戶特征，再進(jìn)行相關(guān)競(jìng)品的調(diào)研，明確設(shè)計(jì)方向，如圖所示。 QQ音樂(lè)（左）、網(wǎng)易云音樂(lè)（中）、蝦米音樂(lè)（右），三款雖然同是音樂(lè)App，但產(chǎn)品定位不同，因此設(shè)計(jì)風(fēng)格也

4、有所區(qū)別2.交互設(shè)計(jì)交互設(shè)計(jì)是對(duì)整個(gè)App設(shè)計(jì)進(jìn)行初步構(gòu)思和流程制定的環(huán)節(jié)。一般需要進(jìn)行紙面原型設(shè)計(jì)、架構(gòu)設(shè)計(jì)、流程圖設(shè)計(jì)、線框圖設(shè)計(jì)等具體工作，如圖所示。烏克蘭UI/UX設(shè)計(jì)師Tatiana Lazarenko創(chuàng)作的App交互設(shè)計(jì)3.交互自查交互設(shè)計(jì)完成之后，進(jìn)行交互自查是整個(gè)App設(shè)計(jì)流程非常重要的一個(gè)階段?？梢栽趫?zhí)行界面設(shè)計(jì)之前檢查出是否有遺漏缺失的細(xì)節(jié)問(wèn)題，如下所示。4.界面設(shè)計(jì)原型圖審查通過(guò)之后，就可以進(jìn)入界面的視覺(jué)設(shè)計(jì)階段了，這個(gè)階段的設(shè)計(jì)圖就是產(chǎn)品最終呈現(xiàn)給用戶的界面。界面設(shè)計(jì)要求設(shè)計(jì)規(guī)范，圖片、文字內(nèi)容真實(shí)，并運(yùn)用墨刀、principle等軟件制作成可交互的高保真原型，以便后續(xù)

5、的界面測(cè)試，如圖所示。烏克蘭設(shè)計(jì)師StasAristov、AlyaPrigotska、Thanh Do聯(lián)合創(chuàng)作的App界面5.界面測(cè)試界面測(cè)試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開(kāi)發(fā)人員在此階段共同觀察、記錄。在測(cè)試中可以對(duì)設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整，如圖所示。越南設(shè)計(jì)師Tran Mau Tri Tam進(jìn)行的App細(xì)節(jié)調(diào)整6.設(shè)計(jì)驗(yàn)證設(shè)計(jì)驗(yàn)證是最后一個(gè)階段，是為App進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過(guò)用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗(yàn)證前期的設(shè)計(jì)，并繼續(xù)優(yōu)化，如圖所示。App界面優(yōu)化，由XToken0 x設(shè)計(jì)師創(chuàng)作，圖片來(lái)源于追波網(wǎng)3.1.3 App設(shè)計(jì)的原則在進(jìn)行App設(shè)計(jì)時(shí)，需要

6、遵循iOS和Android系統(tǒng)的規(guī)范，因此可以根據(jù)iOS下的設(shè)計(jì)原則以及Android系統(tǒng)下Material Design語(yǔ)言中的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)。1.iOS設(shè)計(jì)原則iOS系統(tǒng)設(shè)計(jì)有清晰、遵從、深度三大原則。（1）清晰在整個(gè)系統(tǒng)中，文字在各種尺寸上都要清晰易讀，圖標(biāo)精確而清晰，裝飾精巧且恰當(dāng)，令用戶更易理解功能。利用負(fù)空間、顏色、字體、圖形等界面元素巧妙地突出重要內(nèi)容，并傳達(dá)交互性，如圖所示。以色列設(shè)計(jì)師Vlad Tyzun創(chuàng)作的App界面，各元素通過(guò)精心設(shè)計(jì)后，巧妙的突出重要內(nèi)容（2）遵從流暢的動(dòng)畫(huà)和清晰美觀的界面可以幫助用戶理解內(nèi)容并與之互動(dòng)，同時(shí)不干擾到用戶的使用。內(nèi)容一般填滿整個(gè)屏幕，

7、而半透明和模糊效果通常暗示有更多內(nèi)容。最低限度地使用邊框、漸變和陰影可使界面輕盈，同時(shí)確保內(nèi)容明顯，如圖所示。印度設(shè)計(jì)師Abhisek Das創(chuàng)作的App界面。其中位于左側(cè)App界面中橙色漸變銀行卡旁邊的卡采用了半透明效果，暗示用戶可以進(jìn)行滑動(dòng)查看更多內(nèi)容。兩張App界面的漸變、邊框以及陰影都不是很明顯，使界面非常輕盈（3）深度獨(dú)特的視覺(jué)層級(jí)和真實(shí)的動(dòng)畫(huà)效果傳達(dá)層次結(jié)構(gòu)，賦予界面活力，并促進(jìn)用戶理解。令用戶通過(guò)觸摸和探索發(fā)現(xiàn)程序的功能，不僅會(huì)使用戶提高樂(lè)趣，更加方便用戶了解功能，還能使用戶關(guān)注到額外的內(nèi)容。在瀏覽內(nèi)容時(shí)，層級(jí)的過(guò)渡可提供深度感，如圖所示。 烏克蘭設(shè)計(jì)公司Cadabra Stud

8、io創(chuàng)作的App界面2.MaterialDesign設(shè)計(jì)原則Material Design語(yǔ)言有材質(zhì)隱喻、大膽夸張、動(dòng)效表意、靈活、跨平臺(tái)五大原則。（1）材質(zhì)隱喻Material Design的靈感來(lái)自物理世界及其紋理，包括它們?nèi)绾畏瓷涔饩€和投射陰影。它對(duì)材料表面進(jìn)行了重新構(gòu)想，加入了紙張和墨水的特性，如圖所示。材質(zhì)隱喻（2）大膽夸張Material Design以印刷設(shè)計(jì)方法中的排版、網(wǎng)格、空間、比例、顏色和圖像為指導(dǎo)，來(lái)創(chuàng)造視覺(jué)層次、視覺(jué)意義以及視覺(jué)焦點(diǎn)，使用戶沉浸其中，如圖所示。大膽夸張（3）動(dòng)效表意通過(guò)微妙的反饋和平滑的過(guò)渡使動(dòng)效保持連續(xù)性。當(dāng)元素出現(xiàn)在屏幕上時(shí)，它們?cè)诃h(huán)境中轉(zhuǎn)換和重組

9、，相互作用并產(chǎn)生新的變化，如圖所示。動(dòng)效表意（4）靈活Material Design系統(tǒng)旨在實(shí)現(xiàn)品牌表達(dá)。它與自定義代碼庫(kù)集成，允許無(wú)縫實(shí)現(xiàn)組件、插件和設(shè)計(jì)元素，如圖所示。靈活（5）跨平臺(tái)Material Design使用包括Android、iOS、Flutter和Web的共享組件跨平臺(tái)管理，如圖所示。 跨平臺(tái)3.2 App設(shè)計(jì)的規(guī)范App設(shè)計(jì)的規(guī)范分為iOS設(shè)計(jì)規(guī)范和Android設(shè)計(jì)規(guī)范兩部分。3.2.1 iOS設(shè)計(jì)規(guī)范iOS的基礎(chǔ)設(shè)計(jì)規(guī)范包括單位及尺寸、界面結(jié)構(gòu)、布局、字體4個(gè)方面。1.iOS設(shè)計(jì)單位及尺寸（1）相關(guān)單位PPI：像素密度（Pixels Per Inch，PPI）是屏幕分辨

10、率單位，表示的是每英寸所擁有的像素?cái)?shù)量，如圖所示。像素密度越大，畫(huà)面越細(xì)膩。因此，iPhone4與iPhone3GS屏幕尺寸雖然相同，但實(shí)際像素大了一倍，清晰度自然變高。PPI的計(jì)算公式（X、Y分別為橫向、縱向的像素?cái)?shù)）Asset：比例因子。標(biāo)準(zhǔn)分辨率顯示器具有1:1的像素密度，用1x表示，其中一個(gè)像素等于一個(gè)點(diǎn)。高分辨率顯示器具有更高的像素密度，比例因子為2.0或3.0，分別用2x和3x表示，如圖所示。因此，高分辨率顯示器需要具有更多像素的圖像。一個(gè)10px10px的標(biāo)準(zhǔn)分辨率（1x）圖像，該圖像的2x版本為20px20px，3x版本為30px30px邏輯像素和物理像素：邏輯像素（Logic

11、 Point），單位為“點(diǎn)”（points，pt），是根據(jù)內(nèi)容尺寸計(jì)算的單位。iOS開(kāi)發(fā)工程師和使用Sketch軟件設(shè)計(jì)界面的UI設(shè)計(jì)師使用的單位都是pt。物理像素（Physical Pixel），單位“像素”（pixels，px），是按照像素格計(jì)算的單位，也就是移動(dòng)設(shè)備的實(shí)際像素。使用Photoshop軟件設(shè)計(jì)界面的UI設(shè)計(jì)師使用的單位都是px。例如，iPhoneX/XS邏輯像素是375812pt，由于視網(wǎng)膜屏像素密度的增加，即1pt=3px，因此iPhoneX/XS的物理像素是11252436px，如圖所示。邏輯像素與物理像素的轉(zhuǎn)換（2）設(shè)計(jì)尺寸iOS常見(jiàn)的設(shè)備尺寸，如圖下所示。在進(jìn)行界面

12、設(shè)計(jì)時(shí)，為了一稿適配多種尺寸，都是以iPhone6/6s/7/8為基準(zhǔn)的。如果使用Photoshop就創(chuàng)建7501334px尺寸的畫(huà)布，如果使用Sketch就建立375667pt尺寸的畫(huà)布。iOS常見(jiàn)設(shè)備的尺寸iOS設(shè)計(jì)標(biāo)準(zhǔn)尺寸2.iOS界面結(jié)構(gòu)iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成，其結(jié)構(gòu)如圖和圖所示。iOS手機(jī)端界面結(jié)構(gòu)圖 圖片來(lái)源于520設(shè)計(jì)網(wǎng)iOS iPad界面結(jié)構(gòu)圖，圖片來(lái)源于520設(shè)計(jì)網(wǎng)3.iOS布局（1）網(wǎng)格系統(tǒng)網(wǎng)格系統(tǒng)（Grid Systems），又稱為柵格系統(tǒng)，是利用一系列垂直和水平的參考線，將頁(yè)面分割成若干個(gè)有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進(jìn)行頁(yè)面布局設(shè)計(jì)的方式，

13、能使布局規(guī)范、簡(jiǎn)潔、有秩序，如圖所示。網(wǎng)格系統(tǒng)（2）組成元素網(wǎng)格系統(tǒng)由列、水槽以及邊距3個(gè)元素組成，如圖所示。列是內(nèi)容放置的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。組成元素（列、水槽、邊距）（3）網(wǎng)格的運(yùn)用單元格：iOS的最小點(diǎn)擊區(qū)域是44pt，即88px（2x）。因此，在適用性方面，能被整除的偶數(shù)4和8作為iOS最小單元格比較合適。其中4px容易將頁(yè)面切割細(xì)碎，所以比較推薦使用8px，如圖所示。單元格列：列的數(shù)量有4、6、8、10、12、24這幾種情況。其中4列通常在2等分的簡(jiǎn)潔頁(yè)面時(shí)使用，6、12和24基本滿足所有等分情況，然而24列將頁(yè)面切割太碎

14、，如圖3-27所示，因此實(shí)際使用還是以12列和6列為主。 列的使用水槽：水槽、邊距以及橫向間距的寬度可以依照最小單元格8px為增量進(jìn)行統(tǒng)一設(shè)置，如24、32、40。其中32px（16pt2x）最為常用，如圖所示。水槽邊距：邊距的寬度也可以與水槽有所區(qū)別。在iOS中以2x為基準(zhǔn)，常見(jiàn)的邊距有20px、24px、30px、32px、40px以及50px。邊距的選擇應(yīng)結(jié)合產(chǎn)品本身的氣質(zhì)，其中30px是最為舒適的邊距，也是絕大多數(shù)App首選的邊距，如圖所示。iOS中的“設(shè)置”及“通用”頁(yè)面都采用了30px的邊距4.iOS字體（1）系統(tǒng)字體iOS英文使用的是San Francisco （SF）字體，其中

15、SF字體有SF UI Text（文本模式）和SF UI Display（展示模式）兩種尺寸。SF UI Text適用于小于等于19pt的文字，SF UI Display適用于大于等于20pt的文字。中文使用的是蘋方字體，共有6個(gè)字重，如圖所示。iOS系統(tǒng)字體 （2）字號(hào)大小iOS設(shè)計(jì)時(shí)要注意字號(hào)的大小，下所示。蘋果官網(wǎng)的建議全部是針對(duì)英文SF字體而言的，中文字體需要UI設(shè)計(jì)師靈活運(yùn)用，以最終呈現(xiàn)效果的實(shí)用性和美觀度為基準(zhǔn)進(jìn)行調(diào)整。其中10pt（2x為20px）是手機(jī)上顯示的最小字體，一般位于標(biāo)簽欄的圖標(biāo)底部。為了區(qū)分標(biāo)題和正文，字體大小差異至少保持在4px(2pt2x)，正文的合適行間距在1.

16、52倍之間。基于2x即iPhone6/7/8App界面中的字號(hào)3.2.2 Android設(shè)計(jì)規(guī)范Android系統(tǒng)基礎(chǔ)規(guī)范也包括設(shè)計(jì)尺寸及單位、界面結(jié)構(gòu)、布局、字體4個(gè)方面。1.Android設(shè)計(jì)尺寸及單位（1）相關(guān)單位DPI：網(wǎng)點(diǎn)密度（Dot Per inch，DPI）是打印分辨率的單位，表示每英寸打印的點(diǎn)數(shù)。在移動(dòng)設(shè)備上等同于PPI，表示的是每英寸所擁有的像素?cái)?shù)量。通常PPI代表蘋果手機(jī)，DPI代表安卓手機(jī)。獨(dú)立密度像素與獨(dú)立縮放像素：獨(dú)立密度像素（Density-independent pixels，dp）是安卓設(shè)備上的基本單位，等同于蘋果設(shè)備上的pt。Android開(kāi)發(fā)工程師使用的單位

17、是dp，所以UI設(shè)計(jì)師進(jìn)行標(biāo)注時(shí)應(yīng)將px轉(zhuǎn)化成dp，公式為dpppi/160 = px。當(dāng)設(shè)備的DPI值是320時(shí)，通過(guò)公式可得出1dp=2px，如圖所示（類似iPhone6/7/8的高清屏）。dp與px的轉(zhuǎn)換獨(dú)立縮放像素（Scale-independent Pixel，sp）是Android設(shè)備上的字體單位。Android平臺(tái)允許用戶自定義文字大?。ㄐ　⒄?、大、超大等），當(dāng)文字尺寸是“正?！睜顟B(tài)時(shí)，1sp=1dp，如圖所示。而當(dāng)文字尺寸是“大”或“超大”時(shí)，1sp1dp。UI設(shè)計(jì)師進(jìn)行Android界面的設(shè)計(jì)時(shí)，標(biāo)記字體的單位選用sp。（2）設(shè)計(jì)尺寸Android常見(jiàn)的設(shè)備尺寸，如下所示。

18、在進(jìn)行界面設(shè)計(jì)時(shí)，如果想要一稿適配Android和iOS，就使用Photoshop新建7201280px尺寸的畫(huà)布。如果根據(jù)Material Design新規(guī)范單獨(dú)設(shè)計(jì)Android設(shè)計(jì)稿，就使用Photoshop新建10801920px尺寸的畫(huà)布。無(wú)論哪種需求，使用Sketch只建立360640dp尺寸的畫(huà)布即可。 Android常見(jiàn)的設(shè)備尺寸Android設(shè)計(jì)標(biāo)準(zhǔn)尺寸2.Android界面結(jié)構(gòu)Android界面主要由狀態(tài)欄、導(dǎo)航欄、頂部應(yīng)用欄組成，其結(jié)構(gòu)如圖所示。Android界面結(jié)構(gòu)3.Android布局在iOS的設(shè)計(jì)規(guī)范中，我們已經(jīng)剖析了網(wǎng)格系統(tǒng)及其組成元素，因此在Android布局中

19、不再贅述，直接進(jìn)行Android中網(wǎng)格的布局。單元格：Android的最小點(diǎn)擊區(qū)域是48dp，如圖所示，因此能被整除的偶數(shù)4和8作為Android最小單元格比較合適。單元格所有組件都與移動(dòng)設(shè)備的8dp網(wǎng)格對(duì)齊，如圖所示。移動(dòng)設(shè)備的8dp網(wǎng)格圖標(biāo)、文字和組件中的某些元素可以與4dp網(wǎng)格對(duì)齊，如圖所示。與4dp網(wǎng)格對(duì)齊列：列的數(shù)量在手機(jī)設(shè)備上推薦4列，平板電腦上推薦8列，如圖所示。 列的數(shù)量，手機(jī)設(shè)備（左） 平板電腦（右） 水槽：水槽和邊距的寬度在手機(jī)設(shè)備上推薦16dp，平板電腦上推薦24dp，如圖所示。手機(jī)設(shè)備、平板電腦水槽和邊距的寬度邊距：邊距的寬度可以和水槽統(tǒng)一。另外邊距可以根據(jù)產(chǎn)品的設(shè)計(jì)要

20、求，和水槽不同，如圖所示。當(dāng)Android中邊距的寬度和水槽不同時(shí)，其寬度的設(shè)置具體可以參考iOS布局中邊距的寬度。邊距的寬度4.Android字體規(guī)范（1）系統(tǒng)字體Android英文使用的是Roboto字體，共有6個(gè)字重。中文使用的是思源黑體，又稱為“Source Han Sans”或“Noto”，共有7個(gè)字重，如圖所示。思源黑體（2）字號(hào)大小Android設(shè)計(jì)時(shí)要注意字號(hào)的大小，如下所示。Android系統(tǒng)App的字體建議Android各元素以7201280px為基準(zhǔn)設(shè)計(jì)，可以與iOS對(duì)應(yīng)，其常見(jiàn)的字號(hào)大小為24px、26px、28px、30px、32px、34px，36px等，最小字號(hào)為

21、20px，如圖所示。 Android（左）與iOS（右）對(duì)應(yīng)界面3.3 App常用界面類型界面設(shè)計(jì)是產(chǎn)品用戶體驗(yàn)里非常重要的一環(huán)。在App中，常用界面類型為閃屏頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、個(gè)人中心頁(yè)、詳情頁(yè)以及注冊(cè)登錄頁(yè)。3.3.1 閃屏頁(yè)閃屏頁(yè)又稱為“啟動(dòng)頁(yè)”，是用戶點(diǎn)擊App應(yīng)用圖標(biāo)后，預(yù)先加載的一張圖片。閃屏頁(yè)承載了用戶對(duì)App的第一印象，是情感化設(shè)計(jì)的重要組成部分，其設(shè)計(jì)類型可以細(xì)分為品牌推廣型、活動(dòng)廣告型、節(jié)日關(guān)懷型等。1.品牌推廣型品牌推廣型閃屏頁(yè)是為表現(xiàn)產(chǎn)品品牌而設(shè)定的。基本采用“產(chǎn)品logo+產(chǎn)品名稱+宣傳語(yǔ)”的簡(jiǎn)潔化設(shè)計(jì)形式，如圖所示。1號(hào)店（左）閑魚(yú)（右）的品牌推廣型閃屏頁(yè)2.活動(dòng)廣

22、告型活動(dòng)廣告型閃屏頁(yè)是為推廣活動(dòng)或廣告而設(shè)定的，通常將推廣的內(nèi)容直接設(shè)計(jì)在閃屏頁(yè)內(nèi)。多采用插畫(huà)和海報(bào)的設(shè)計(jì)形式，常用暖色營(yíng)造熱鬧的氛圍，如圖所示。百度網(wǎng)盤（左）百度瀏覽器（中）知乎（右）的活動(dòng)廣告型閃屏頁(yè)“雙11”（左）國(guó)慶（中）“雙12”（右）的活動(dòng)廣告型閃屏頁(yè)3.節(jié)日關(guān)懷型節(jié)日關(guān)懷型閃屏頁(yè)是為營(yíng)造節(jié)假日氛圍，同時(shí)凸顯產(chǎn)品品牌而設(shè)定的。多采用“產(chǎn)品logo+內(nèi)容插畫(huà)”的設(shè)計(jì)形式，使用戶感受到節(jié)日的關(guān)懷與祝福，如圖所示。閑魚(yú)（左）口袋兼職（右）的節(jié)日關(guān)懷型閃屏頁(yè)QQ音樂(lè)（左）QQ瀏覽器（右）的節(jié)日關(guān)懷型閃屏頁(yè)3.3.2 引導(dǎo)頁(yè)引導(dǎo)頁(yè)是用戶第一次打開(kāi)或經(jīng)過(guò)更新后打開(kāi)App看到的一組圖片，通常由3

23、5頁(yè)組成。引導(dǎo)頁(yè)起到了在用戶使用App之前，提前幫助用戶快速了解App的主要功能和特點(diǎn)的作用，可以細(xì)分為功能說(shuō)明型、產(chǎn)品推廣型、搞笑賣萌型。1.功能說(shuō)明型功能說(shuō)明型引導(dǎo)頁(yè)是引導(dǎo)頁(yè)中最基礎(chǔ)的一種，主要對(duì)產(chǎn)品的新功能進(jìn)行展示，常用于App重大版本的更新中。多采用插圖的設(shè)計(jì)形式，達(dá)到短時(shí)間內(nèi)吸引用戶的效果，如圖所示。高德地圖App的功能說(shuō)明型引導(dǎo)頁(yè)2.產(chǎn)品推廣型產(chǎn)品推廣型引導(dǎo)頁(yè)是要表達(dá)App的價(jià)值，讓用戶更了解這款A(yù)pp的情懷。多采用與企業(yè)形象和產(chǎn)品風(fēng)格一致的生動(dòng)化、形象化的設(shè)計(jì)形式，讓用戶感到畫(huà)面的精美，如圖所示。京東商城App的產(chǎn)品推廣型引導(dǎo)頁(yè)3.搞笑賣萌型搞笑賣萌型引導(dǎo)頁(yè)是引導(dǎo)頁(yè)中設(shè)計(jì)難度較高

24、的，主要站在用戶的角度介紹App的特點(diǎn)。多采用擬人的夸張?jiān)O(shè)計(jì)形象及豐富的交互動(dòng)畫(huà)，讓用戶身臨其境，如圖所示。搞笑賣萌型引導(dǎo)頁(yè)3.3.3 首頁(yè)首頁(yè)又稱為“起始頁(yè)”，是用戶使用App的第一頁(yè)。首頁(yè)承擔(dān)著流量分發(fā)的作用，是展現(xiàn)產(chǎn)品氣質(zhì)的關(guān)鍵頁(yè)面，可以細(xì)分為列表型、網(wǎng)格型、卡片型、綜合型。1.列表型列表型首頁(yè)是在頁(yè)面上將同級(jí)別的模塊進(jìn)行分類展示，常用于以數(shù)據(jù)展示、文字閱讀等為主的App。采用單一的設(shè)計(jì)形式，方便用戶瀏覽，如圖所示。 英國(guó)設(shè)計(jì)師George Gliddon創(chuàng)作（左）今日頭條（中）由俄羅斯設(shè)計(jì)師Alexander Zaytsev創(chuàng)作（右）的列表型首頁(yè)2.網(wǎng)格型網(wǎng)格型首頁(yè)是在頁(yè)面上將重要的功

25、能以矩形模塊的形式進(jìn)行展示，常用于工具類App。采用的統(tǒng)一矩形模塊的設(shè)計(jì)形式，刺激用戶點(diǎn)擊，如圖所示。天天P圖（左）Word（中）墨刀（右）的網(wǎng)格型首頁(yè)3.卡片型卡片型首頁(yè)是在頁(yè)面上將圖片、文字、控件放置于同一張卡片中，再將卡片進(jìn)行分類展示，常用于數(shù)據(jù)展示、文字閱讀、工具使用等類型的App。采用的統(tǒng)一的卡片設(shè)計(jì)形式，不僅讓用戶一目了然，更能加強(qiáng)產(chǎn)品內(nèi)容的點(diǎn)擊欲望，如圖所示。SaturnCube團(tuán)隊(duì)創(chuàng)作（左）微信讀書(shū)（中）翻譯大全（右）的卡片型首頁(yè)4.綜合型綜合型首頁(yè)是由搜索欄、Banner、金剛區(qū)、瓷片區(qū)以及標(biāo)簽欄等組成的頁(yè)面，運(yùn)用范圍較廣，常用于電商類、教育類、旅游類等方面。采用豐富的設(shè)計(jì)形

26、式，能滿足用戶的需求，如圖所示。 1號(hào)店（左）途牛旅游（中）翻譯大全（右）的綜合型首頁(yè)3.3.4 個(gè)人中心頁(yè)個(gè)人中心頁(yè)是展示個(gè)人信息的頁(yè)面，主要由頭像和信息內(nèi)容組成。個(gè)人中心頁(yè)有時(shí)也會(huì)以抽屜打開(kāi)的形式出現(xiàn)，如圖所示。淘寶（左）閑魚(yú)（右）的個(gè)人中心頁(yè)3.3.5 詳情頁(yè)詳情頁(yè)是展示App產(chǎn)品詳細(xì)信息，用于用戶產(chǎn)生消費(fèi)的頁(yè)面。頁(yè)面內(nèi)容較豐富，以圖文信息為主，如圖所示。京東商城（左）途牛（中）36Kr（右）的詳情頁(yè)3.3.6 注冊(cè)登錄頁(yè)注冊(cè)登錄頁(yè)是電商類、社交類等功能豐富型App的必要頁(yè)面。頁(yè)面設(shè)計(jì)直觀簡(jiǎn)潔，并且提供第三方賬號(hào)登錄，國(guó)內(nèi)常見(jiàn)的第三方賬號(hào)有微博、微信、QQ等，國(guó)外常見(jiàn)的第三方賬號(hào)有Fac

27、ebook、Twitter等，如圖所示。Done（左）智聯(lián)招聘（中）36Kr（右）注冊(cè)登錄頁(yè)3.4 課堂案例制作侃侃App【案例學(xué)習(xí)目標(biāo)】學(xué)習(xí)使用不同的繪制工具繪制圖形，使用圖層樣式添加特殊效果，并應(yīng)用移動(dòng)工具移動(dòng)裝飾圖片來(lái)制作App界面?！景咐R(shí)要點(diǎn)】使用橢圓工具和圓角矩形工具繪制圖形，使用描邊和漸變疊加命令為圖形添加效果，使用剪貼蒙版命令為圖片添加蒙版，使用橫排文字工具輸入文字，效果如圖所示。【效果所在位置】云盤/Ch03/效果/制作侃侃App。 1制作侃侃App閃屏頁(yè)（1）按Ctrl+N組合鍵，新建一個(gè)文件，寬度為750像素，高度為1334像素，分辨率為72像素/英寸，背景內(nèi)容為白色，

28、如圖3-64所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框。選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App閃屏頁(yè) 01”文件，單擊“置入”按鈕，按Enter鍵確認(rèn)操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“底圖”。（3）按Ctrl+T組合鍵，在圖片周圍出現(xiàn)變換框，拖曳右上角的控制手柄，調(diào)整圖片的大小及其位置，按Enter鍵確認(rèn)操作，如圖所示。（4）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在40像素的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。

29、（5）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App閃屏頁(yè) 02”文件。單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢茫?按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態(tài)欄”。（6）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口 字符”命令，彈出面板，將“顏色”設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示。 （7）選擇“橢圓”工具，在屬性欄的“選擇工具模式”選項(xiàng)中選擇“形狀”，將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)

30、為無(wú)。按住Shift鍵的同時(shí)，在圖像窗口中適當(dāng)?shù)奈恢美L制圓形，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。（8）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“描邊”命令，彈出對(duì)話框，在“填充類型”選項(xiàng)的下拉列表中選擇“漸變”選項(xiàng)，單擊“漸變”選項(xiàng)右側(cè)的“點(diǎn)按可編輯漸變”按鈕，彈出“漸變編輯器”對(duì)話框，在“位置”選項(xiàng)中分別輸入0、100兩個(gè)位置點(diǎn)，分別設(shè)置兩個(gè)位置點(diǎn)顏色的RGB值為0（254、72、49）、100（255、130、18），如圖所示，單擊“確定”按鈕。返回到“描邊”對(duì)話框，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。 （9）將“橢

31、圓1”圖層拖曳到“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕上進(jìn)行復(fù)制，生成新的形狀圖層“橢圓1 拷貝”。按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，按住Alt+Shift組合鍵的同時(shí)，拖曳右上角的控制手柄等比例縮小圖形，按Enter鍵確定操作。在“圖層”控制面板中，雙擊“橢圓1 拷貝”圖層的縮覽圖，在彈出的對(duì)話框中，將顏色設(shè)為黑色，單擊“確定”按鈕。刪除“橢圓1 拷貝”圖層的圖層樣式，效果如圖所示。（10）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App閃屏頁(yè) 03”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳

32、到適當(dāng)?shù)奈恢貌⒄{(diào)整其大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“人物1”。按Alt+Ctrl+G組合鍵，為“人物1”圖層創(chuàng)建剪貼蒙版，效果如圖所示。（11）按住Shift鍵的同時(shí)，選中“橢圓 1”圖層，按Ctrl+G組合鍵，群組圖層并將其命名為“頭像1”，如圖所示。（12）將“頭像1”圖層組拖曳到“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕上進(jìn)行復(fù)制，生成新的圖層組“頭像1 拷貝”，將其命名為“頭像2”，如圖所示。按Ctrl+T組合鍵，在圖片周圍出現(xiàn)變換框。選擇“移動(dòng)”工具，在圖像窗口中將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確認(rèn)操作，效果如圖所示。 （13）

33、展開(kāi)“頭像2”圖層組，選中“人物1”圖層，按Delete鍵，刪除該圖層。選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App閃屏頁(yè) 04”文件。單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整其大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“人物2”。按Alt+Ctrl+G組合鍵，為“人物2”圖層創(chuàng)建剪貼蒙版，效果如圖所示。（14）雙擊“橢圓 1”圖層的“描邊”圖層樣式，彈出“圖層樣式”對(duì)話框，選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。 （15）折疊“頭像2”圖層組中

34、的圖層。選擇“橢圓”工具，在屬性欄中將“填充”顏色設(shè)為白色，按住Shift鍵的同時(shí)，在圖像窗口中拖曳鼠標(biāo)繪制圓形，效果如圖所示。（16）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App閃屏頁(yè) 08”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整其大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“人物3”。（17）按Alt+Ctrl+G組合鍵，為“人物3”圖層創(chuàng)建剪貼蒙版，效果如圖所示。使用相同的方法制作其他圖形和圖片，效果如圖所示。在“圖層”控制面板中，選中“人物7”

35、圖層，按住Shift鍵的同時(shí)，單擊“橢圓 2”圖層，將需要的圖層同時(shí)選取。按Ctrl+G組合鍵，群組圖層并將其命名為“更多頭像”，如圖所示。 （18）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示。使用相同方法輸入其他文字，設(shè)置如圖所示，效果如圖所示。在“圖層”控制面板中分別生成新的文字圖層。侃侃App閃屏頁(yè)制作完成。 2制作侃侃App歡迎頁(yè)（1）按Ctrl+N組合鍵，新建一個(gè)文件，寬度為750像素，高度為1334像素，分辨率為72像素/英寸，背景內(nèi)容為白色，如圖所示，單擊“創(chuàng)建”按

36、鈕，完成文檔新建。（2）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App歡迎頁(yè) 01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整其大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“底圖”。 （3）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在40像素的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。 （4）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制

37、作侃侃App 制作侃侃App歡迎頁(yè) 02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將圖片拖曳到圖像窗口中適當(dāng)?shù)奈恢茫碋nter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態(tài)欄”。（5）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，效果如圖所示。用相同的方法再次輸入文字，設(shè)置如圖所示，效果如圖所示，在“圖層”控制面板中分別生成新的文字圖層。 （6）選擇“圓角矩形”工具，在屬性欄的“選擇工具模式”選項(xiàng)中選擇“形狀”，將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無(wú)，“半徑”選項(xiàng)設(shè)置為10像

38、素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層 “圓角矩形1”。選擇“窗口 屬性”命令，彈出“屬性”面板，設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示。 （7）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對(duì)話框，單擊“漸變”選項(xiàng)右側(cè)的“點(diǎn)按可編輯漸變”按鈕，彈出“漸變編輯器”對(duì)話框。在“位置”選項(xiàng)中分別輸入0、100兩個(gè)位置點(diǎn)，分別設(shè)置兩個(gè)位置點(diǎn)顏色的RGB值為0（255、134、16）、100（254、44、60），如圖所示。單擊“確定”按鈕，返回到“漸變疊加”對(duì)話框，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效

39、果如圖所示。 （8）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。 （9）將“圓角矩形1”圖層拖曳到“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕上進(jìn)行復(fù)制，生成新的形狀圖層“圓角矩形1 拷貝”。選擇“移動(dòng)”工具，按住Shift鍵的同時(shí)，將其向下拖曳到適當(dāng)?shù)奈恢?。刪除“圓角矩形1 拷貝”圖層的圖層樣式，效果如圖所示。（10）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，按En

40、ter鍵確認(rèn)操作，效果如圖所示。使用相同方法輸入其他文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示。（11）按CtrlO組合鍵，打開(kāi)云盤中的“Ch03 素材 制作侃侃App 制作侃侃App歡迎頁(yè) 03”文件，選擇“移動(dòng)”工具，將“QQ”圖形拖曳到圖像窗口中適當(dāng)?shù)奈恢貌⒄{(diào)整其大小，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“QQ”。 使用相同的方法拖曳其他圖形到適當(dāng)?shù)奈恢谩ＰЧ鐖D所示。侃侃App歡迎頁(yè)制作完成。 3制作侃侃App首頁(yè)（1）按Ctrl+N組合鍵，新建一個(gè)文件，寬度為750像素，高度為4054像素，分辨率為72像素/

41、英寸，背景內(nèi)容為白色，如圖所示，單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在40像素的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建。（3） 選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App首頁(yè) 01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當(dāng)?shù)奈恢茫碋nter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態(tài)欄”。（4）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在128像素（距離上

42、方參考線88像素）的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。用相同的方法，在32像素的位置新建一條垂直參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建。 （5）用相同的方法，在375像素（頁(yè)面中心位置）和718像素（距離右側(cè)32像素）的位置新建兩條垂直參考線，效果如圖所示。（6）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示，在“圖層”控制面板生成新的文字圖層。 （7）按CtrlO組合鍵，打開(kāi)云盤中的“Ch03 素材 制作侃侃A

43、pp 制作侃侃App首頁(yè) 02”文件。選擇“移動(dòng)”工具，將“編輯”圖形拖曳到圖像窗口中適當(dāng)?shù)奈恢貌⒄{(diào)整其大小，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“編輯”。在“圖層”控制面板中，按住Shift鍵的同時(shí)，單擊“發(fā)現(xiàn)”圖層，將需要的圖層同時(shí)選取。按Ctrl+G組合鍵，群組圖層并將其命名為“導(dǎo)航欄”，如圖所示。 （8）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在168像素（距離上方參考線40像素）的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。用相同的方法，在416像素（距離上方參考線248像素）的位置新建一條水平參考線，效果如圖

44、所示。 （9）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“半徑”選項(xiàng)設(shè)置為26像素，在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。（10）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“投影”命令，彈出對(duì)話框。將陰影顏色設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（11）選擇“橢圓”工具，按住Shift鍵的同時(shí)，在圖像窗口中適當(dāng)?shù)奈恢美L制圓形，效果如圖所示。在屬性欄中將“填充”顏色設(shè)為黑色，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。（12）按Ctrl+J組合鍵，復(fù)制圖層，在“圖

45、層”控制面板中生成新的形狀圖層并將其命名為“橢圓2”。選擇“移動(dòng)”工具，按住Shift鍵的同時(shí)，將其拖曳到適當(dāng)?shù)奈恢茫鐖D所示。單擊圖層左側(cè)的眼睛圖標(biāo)，隱藏該圖層，并選中“橢圓1”圖層。（13）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App首頁(yè) 03”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“頭像1”。按Alt+Ctrl+G組合鍵，為“頭像1”圖層創(chuàng)建剪貼蒙版，效果如圖所示。 （14）選擇“橫排文字”工具，在適當(dāng)

46、的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設(shè)為淺藍(lán)色（132、144、166），其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。 （15）選中“橢圓2”圖層，單擊圖層左側(cè)的空白圖標(biāo)，顯示該圖層，效果如圖所示。（16）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對(duì)話框。單擊“漸變”選項(xiàng)右側(cè)的“點(diǎn)按可編輯漸變”按鈕，彈出“漸變編輯器”對(duì)話框，在“位置”選項(xiàng)中分別輸入0、100兩個(gè)位置點(diǎn)，分別設(shè)置兩個(gè)位置點(diǎn)顏色的RGB值為0（255、134、16）、100（254、44、60），如圖所示

47、，單擊“確定”按鈕。返回到“漸變疊加”對(duì)話框，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（17）在“02”圖像窗口中選中“相機(jī)”圖層，選擇“移動(dòng)”工具，將其拖曳到圖像窗口中適當(dāng)?shù)奈恢貌⒄{(diào)整大小，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“相機(jī)”。（18）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。 （19）按住Shift鍵的同時(shí)，單擊“橢圓 2”圖層，將需要的圖層同時(shí)選取。按Ctrl+G組合鍵，群組圖層并將其命名為“照片

48、”，如圖所示。使用相同的方法制作“想法”和“位置”圖層組，效果如圖所示。按住Shift鍵的同時(shí)，單擊“圓角矩形1”圖層，將需要的圖層同時(shí)選取，群組圖層并將其命名為“發(fā)表”，如圖所示。 （20）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在446像素（距離上方參考線30像素）的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。用相同的方法，在1526像素的位置新建一條水平參考線，如圖所示。 （21）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“半徑”選項(xiàng)設(shè)置為26像素，在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，效果如圖所示，在“圖層”控制面

49、板中生成新的形狀圖層 “圓角矩形2”。單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“投影”命令，彈出對(duì)話框，將陰影顏色設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。 （22）選擇“橢圓”工具，按住Shift鍵的同時(shí)，在圖像窗口中拖曳鼠標(biāo)繪制圓形。在屬性欄中將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無(wú)，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“橢圓5”。單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，單擊“漸變”選項(xiàng)右側(cè)的“點(diǎn)按可編輯漸變”按鈕，彈出“漸變編輯器”對(duì)話框，在“位置”選項(xiàng)中分別輸入0、100兩個(gè)位

50、置點(diǎn)，分別設(shè)置兩個(gè)位置點(diǎn)顏色的RGB值為0（255、134、16）、100（254、44、60），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對(duì)話框，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（23）選擇“橢圓”工具，按住Shift鍵的同時(shí)，在圖像窗口中拖曳鼠標(biāo)繪制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓6”。在屬性欄中將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無(wú)，效果如圖所示。（24）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App首頁(yè) 04”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖

51、曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“頭像2”。按Alt+Ctrl+G組合鍵，為“頭像2”圖層創(chuàng)建剪貼蒙版，效果如圖所示。 （25）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示。使用相同的方法輸入其他文字，在“字符”面板中，將“顏色”設(shè)為淺藍(lán)色（162、169、183），其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示。使用相同的方法輸入其他文字，效果如圖3-164所示，在“圖層”控制面板中分別生成

52、新的文字圖層。（26）在“02”圖像窗口中分別選中“定位”和“更多”圖層，選擇“移動(dòng)”工具，將其拖曳到圖像窗口中適當(dāng)?shù)奈恢貌⒄{(diào)整大小，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“定位”和“更多”。在“圖層”控制面板中，選中“更多”圖層，按住Shift鍵的同時(shí)，單擊“橢圓5”圖層，將需要的圖層同時(shí)選取。按Ctrl+G組合鍵，群組圖層并將其命名為“更多”，如圖所示。 （27）選擇“矩形”工具，在屬性欄的“選擇工具模式”選項(xiàng)中選擇“形狀”，將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無(wú)。在圖像窗口中適當(dāng)?shù)奈恢美L制矩形，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“矩形1”。（28）選擇“文

53、件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App首頁(yè) 05”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“照片1”。按Alt+Ctrl+G組合鍵，為“照片1”圖層創(chuàng)建剪貼蒙版，效果如圖所示。 （29）使用相同的方法制作其他圖片，效果如圖所示。用上述方法群組圖層，并將其命名為“照片”。在“02”圖像窗口中選中“喜歡”圖層，選擇“移動(dòng)”工具，將其拖曳到圖像窗口中適當(dāng)?shù)奈恢貌⒄{(diào)整大小，效果如圖所示，在“圖層”控制面板中

54、生成新的形狀圖層“喜歡”。 （30）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。 （31）使用相同的方法，將需要的形狀圖層拖曳到適當(dāng)?shù)奈恢貌⑤斎胛淖郑Ч鐖D所示。在“圖層”控制面板中，按住Shift鍵的同時(shí)，單擊“喜歡”圖層，將需要的圖層同時(shí)選取。按Ctrl+G組合鍵，群組圖層并將其命名為“評(píng)論欄”。 按住Shift鍵的同時(shí)，單擊“圓角矩形2”圖層，將需要的圖層同時(shí)選取。按Ctrl+G組合鍵，群組圖層并將其命名為“韓笑”。如圖所示。 （32

55、）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在1556像素（距離上方參考線30像素）的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。用相同的方法，在2256像素（距離上方參考線700像素）的位置新建一條水平參考線，效果如圖所示。（33）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“半徑”選項(xiàng)設(shè)置為26像素，在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形3”。單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“投影”命令，彈出對(duì)話框，將陰影顏色設(shè)為黑色，其他選項(xiàng)的

56、設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。 （34）用上述的方法制作圖片、文字和形狀，效果如圖所示。選擇“矩形”工具，在圖像窗口中適當(dāng)?shù)奈恢美L制矩形，在屬性欄中將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無(wú)，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“矩形6”。 （35）選擇“文件 置入嵌入對(duì)象”命令，彈出“置入嵌入的對(duì)象”對(duì)話框，選擇云盤中的“Ch03 素材 制作侃侃App 制作侃侃App首頁(yè) 11”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整其大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“視頻”。按Alt+Ctrl+G組合

57、鍵，為“視頻”圖層創(chuàng)建剪貼蒙版，效果如圖所示。（36）使用上述的方法拖曳需要的形狀到適當(dāng)?shù)奈恢貌⑤斎胛淖?，效果如圖所示。用上述方法群組圖層并將其命名為“李一然”，如圖所示。 （37）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在2286像素（距離上方參考線30像素）的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。用相同的方法，在3106像素（距離上方參考線820像素）的位置新建一條水平參考線，效果如圖所示。 （38）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無(wú)，“半徑”選項(xiàng)設(shè)置為26像素，在圖像窗口中適當(dāng)?shù)奈恢?/p>

58、繪制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形4”，效果如圖所示。單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“投影”命令，彈出對(duì)話框，將陰影顏色設(shè)為黑色，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。 （39）用上述的方法制作圖片、文字和形狀，效果如圖所示。選擇“矩形”工具，在屬性欄中將“填充”顏色設(shè)為黑色，在圖像窗口中適當(dāng)?shù)奈恢美L制矩形，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“矩形7”。 （40）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對(duì)話框，單擊“漸變”選項(xiàng)右側(cè)的“點(diǎn)按可編輯漸變”按

59、鈕，彈出“漸變編輯器”對(duì)話框，在“位置”選項(xiàng)中分別輸入0、100兩個(gè)位置點(diǎn)，分別設(shè)置兩個(gè)位置點(diǎn)顏色的RGB值為0（255、134、16）、100（254、44、60），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對(duì)話框，其他選項(xiàng)的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。 （41）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項(xiàng)的設(shè)置如圖所示，按Enter鍵確認(rèn)操作，在“圖層”控制面板中生成新的文字圖層，效果如圖所示。 （42）使用相同的方法拖曳需要的形狀到適當(dāng)?shù)奈恢貌⑤斎胛淖?，效果如圖所示。用上述方法群組圖層并將其命名為“張小斐

60、”，如圖所示。 （43）選擇“視圖 新建參考線”命令，彈出“新建參考線”對(duì)話框，在3136像素（距離上方參考線30像素）的位置新建一條水平參考線，設(shè)置如圖所示，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。 （44）使用相同的方法拖曳需要的形狀到適當(dāng)?shù)奈恢貌⑤斎胛淖郑Ч鐖D所示。用上述方法群組圖層并將其命名為“張明”，如圖所示。 （45）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，在距離上方圓角矩形30像素的位置繪制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形6”。在“屬性”面板中設(shè)置參數(shù)，如圖所示，按Enter鍵確認(rèn)操作，效果如圖所示。 （46）單擊“圖層”控制