UI界面設(shè)計與制作電子教案

教案編號:4課題:第4章UI中的組件設(shè)計課時:12課時授課類型:講授+實訓項目目標:●了解組件的基礎(chǔ)知識●掌握導航欄的制作●掌握標簽欄的制作●掌握金剛區(qū)的制作●掌握瓷片區(qū)的制作項目重點:●導航欄的制作●標簽欄的制作●金剛區(qū)的制作●瓷片區(qū)的制作項目難點:導航欄、標簽欄、金剛區(qū)、瓷片區(qū)的規(guī)則項目技能點：導航欄的制作、標簽欄的制作、金剛區(qū)的制作、瓷片區(qū)的制作項目教學技巧：1.知識講解2.案例實訓項目過程：（一）課前準備1.授課前準備準備好教學用具和教學設(shè)備2.板書課題：第4章UI中的組件設(shè)計項目目標:●了解組件的基礎(chǔ)知識●掌握導航欄的制作●掌握標簽欄的制作●掌握金剛區(qū)的制作●掌握瓷片區(qū)的制作3.課程引入通過課堂案例效果展示引入組件的概念導航欄標簽欄金剛區(qū)瓷片區(qū)（二）課程內(nèi)容組件作為UI設(shè)計中常用控件或元素的集合，具有靈活使用、便于復(fù)用的特點。下面分別從組件的概念及組件的獲取這兩個方面進行控件的基礎(chǔ)講解。4.1.1組件的概念組件是將圖片、圖形、圖標、文字等多個元素進行組合進行更好的信息傳遞，便于用戶進行交互，如圖所示。組件4.1.2組件的獲取組件同控件一樣可以從iOS以及MaterialDesign官方網(wǎng)站進行獲取。UI設(shè)計師通常會在官方組件的基礎(chǔ)之上再進行設(shè)計。導航欄作為UI設(shè)計中的常用組件之一，具有持久顯示、指導用戶的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。4.2.1導航欄的概念導航欄（NavigationBar，Navbar），位于App頂部，狀態(tài)欄下方，提供了位置指示及功能操作。Android中，MaterialDesign稱其為頂部應(yīng)用欄（TopAppBar），如圖所示。iOS導航欄Android頂部應(yīng)用欄4.2.2導航欄的類型1.常規(guī)導航欄標題導航欄：常見于二級詳情界面或?qū)Ш胶唵蔚囊患壗缑?，主要由操作圖標與標題組成，如圖所示。造作新家App搜索框?qū)Ш綑冢涸黾铀阉骺?，去除導航標題，如圖所示。網(wǎng)易新聞AppTab/分段控件導航欄：Tab左右切換頂部導航欄的可選項可以擴展很多，并且可以左右滑動切換。分段控件頂部導航欄一般有2~5個可選項，且不能左右滑動，如圖所示。微博App2.通欄導航欄常用在電商、旅游等界面復(fù)雜或是需要烘托氛圍的界面中，如圖所示。小米有品App3.大標題導航欄簡約大氣，減少視覺噪音，讓內(nèi)容更加突出，如圖所示。愛彼迎App有些APP也會折中使用，在常規(guī)導航欄高度下，放大字號，隱去分割線，使標題看起來更大，如圖所示。字里行間App4.2.3導航欄的規(guī)則1.標題導航欄（1）標題導航欄尺寸iOS標題導航欄寬度：375pt，高度：44pt。Android標題導航欄寬度360dp，高度56dp。（2）標題導航欄文字標題文字尺寸：17～18pt。操作注釋尺寸：16pt。重要提示：文字層級字號對比>2pt（3）標題導航欄圖標圖標設(shè)計尺寸：24pt。如圖所示。標題導航欄尺寸示意圖2.大標題導航欄（1）大標題導航欄尺寸iOS標題導航欄寬度：375pt，高度：96pt。Android標題導航欄寬度360dp，高度128dp。（2）大標題導航欄文字標題文字尺寸：34pt。操作注釋尺寸：32pt。（3）大標題導航欄圖標圖標設(shè)計尺寸：24pt。如圖所示。大標題導航欄尺寸示意圖3.搜索框?qū)Ш綑冢?）搜索框?qū)Ш綑诔叽缢阉骺虺叽纾?75*30pt（2）搜索框?qū)Ш綑谖淖炙阉魑淖殖叽纾?4pt圖標文字尺寸：9pt（3）搜索框?qū)Ш綑趫D標圖標設(shè)計尺寸：24pt、20pt、16pt重要提示：圖標設(shè)計的尺寸規(guī)律為4或8的倍數(shù)（4）搜索框?qū)Ш綑陂g距整體設(shè)計分布：8pt16pt重要提示：分布遵循五分原則等分原則如圖所示。搜索框尺寸示意圖（5）搜索框?qū)Ш綑谛Ч谏谡郑罕苊馀c背景顏色相同，影響閱讀，如圖所示。飛豬App搜索框微投影：凸顯搜索功能，如圖所示。馬蜂窩App4.2.4課堂案例——制作旅游類App導航欄【案例設(shè)計要求】1.運用軟件Photoshop制作導航欄，設(shè)計效果、展示效果如圖所示。2.導航欄尺寸：750px（寬）×88px（高）。3.符合導航欄的設(shè)計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作導航欄。設(shè)計效果圖展示效果圖【案例知識要點】使用圓角矩形工具繪制形狀，使用屬性面板制作彌散投影，使用置入嵌入對象命令置入圖標，使用橫排文字工具輸入文字。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為98像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為淺藍色（126、212、229），如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“圓角矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為34像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（3）按Ctrl+J組合鍵，復(fù)制圖層，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1拷貝”。在屬性欄中將“填充”顏色設(shè)為深綠色（77、105、110）。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。在“屬性”面板中單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（4）在“圖層”控制面板中將“圓角矩形1拷貝”圖層的“不透明度”選項設(shè)為30%，并將其拖曳到“圓角矩形1”圖層的下方，如圖所示，效果如圖所示。（5）使用瀏覽器打開Iconfont-阿里巴巴矢量圖標庫官網(wǎng)，單擊右側(cè)的“快捷登錄”按鈕，如圖所示，在彈出的對話框中選擇登錄方式并登錄，如圖所示。在搜索框中輸入文字“搜索”，如圖所示，并單擊右側(cè)的搜索按鈕，進入圖標頁面。（6）在頁面中將鼠標指針放置在需要下載的圖標上，如圖所示。單擊下方的“下載”按鈕，在彈出的對話框中設(shè)置需要的顏色，如圖所示。單擊“AI下載”按鈕，在彈出的對話框中設(shè)置文件名及下載路徑，如圖所示，單擊“下載”按鈕，下載矢量圖標。（7）在“圖層”控制面板中選中“圓角矩形1”圖層。選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App導航欄>素材>02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“方形網(wǎng)格系統(tǒng)”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（7）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App導航欄>素材>01”文件，單擊“置入”按鈕，將圖標置入到圖像窗口中。將其拖曳到適當?shù)奈恢貌⒄{(diào)整其大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“搜索”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，將圖標置于圖標盒子中，效果如圖所示。（8）單擊“方形網(wǎng)格系統(tǒng)”圖層左側(cè)的眼睛圖標，隱藏圖層，如圖所示。選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設(shè)為淺灰色（193、193、193），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（9）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為34像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（10）按Ctrl+J組合鍵，復(fù)制圖層，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2拷貝”。在屬性欄中將“填充”顏色設(shè)為深綠色（77、105、110）。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。在“屬性”面板中單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（11）在“圖層”控制面板中將“圓角矩形2拷貝”圖層的“不透明度”選項設(shè)為30%，并將其拖曳到“圓角矩形2”圖層的下方，如圖所示，效果如圖所示。（12）在“圖層”控制面板中選中“圓角矩形2”圖層。選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中進行設(shè)置，將“顏色”設(shè)為深灰色（52、52、52），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（13）按住Shift鍵的同時，單擊“圓角矩形1拷貝”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“導航欄”，如圖所示。旅游類App導航欄制作完成。標簽欄作為UI設(shè)計中的常用組件之一，具有指導用戶、操作靈活的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。4.3.1標簽欄的概念標簽欄（tab欄），位于App的底部，提供了位置指示及頁面切換的作用。Android中，MaterialDesign稱其為底部應(yīng)用欄（bottomAppBar），如圖所示。iOS標簽欄Android底部應(yīng)用欄4.3.2標簽欄的類型1.背景樣式（1）白色或淺灰區(qū)分明顯，最常用，如圖所示。叮當快藥App標簽欄（2）黑色或深灰適用于短視頻、工具類型，如圖所示。抖音App標簽欄2.展示方式（1）圖標+文字識別高，多數(shù)App采用的展示方式，如圖所示。微信讀書App標簽欄（2）圖標識別性不高，適用于小眾文藝類，如圖所示?；ò闍pp標簽欄（3）圖標+文字+舵式適用于社區(qū)型App，具有發(fā)布需求，如圖所示。轉(zhuǎn)轉(zhuǎn)App標簽欄（4）文字樣式單一，適用于短視頻類型，如圖所示。小紅書App標簽欄4.3.3標簽欄的規(guī)則1.標簽欄的尺寸iOS標簽欄寬度：375pt，高度：49pt。Android標簽欄寬度：360dp，高度：56dp。通用的圖標設(shè)計尺寸：24pt。FAB（浮動操作按鈕）設(shè)計尺寸：56pt。圖標下文字設(shè)計尺寸：10pt。如圖所示。標簽欄尺寸示意圖2.標簽欄的布局標簽欄個數(shù)在3～5個。屏幕等分：最常用，計算方式，列寬=屏幕寬度/標簽個數(shù)。邊距刪減等分：減去左右兩邊間距，再進行等分。圖標左右間距相等：用于標簽數(shù)量為3個的時候。如圖所示。屏幕等分邊距刪減等分圖標左右間距相等3.標簽欄的圖標（1）標簽欄圖標尺寸通用的圖標設(shè)計尺寸：24pt。不同形狀的圖標會產(chǎn)生不同的視覺重量，為保持視覺平衡，不同形狀的圖標設(shè)計尺寸可參考下圖。方形：寬高18px圓形:直徑20px垂直矩形：高度20px,寬度16px水平矩形：高度16px,寬度20px（2）圖標的切換狀態(tài)線性（未選中狀態(tài)）-面性（選中狀態(tài)），反饋最強烈，最常用，如圖所示。支付寶App面性（未選中狀態(tài)）-面性（選中狀態(tài)），安全厚重，適用于閱讀、工具類產(chǎn)品，如圖所示。網(wǎng)易云課堂App線性（未選中狀態(tài)）-線面（選中狀態(tài)），活潑趣味，適用于年輕化產(chǎn)品，如圖所示。飛豬App線性（未選中狀態(tài)）-線性（選中狀態(tài)），精致簡潔，適用于生活類產(chǎn)品，如圖所示。貝殼找房App（3）圖標的風格樣式線性2px：精致時尚，如圖所示。產(chǎn)品經(jīng)理App底部標簽欄前程無憂App底部標簽欄3px：通用常規(guī)，如圖所示。微信App底部標簽欄一起學App底部標簽欄4px：年輕厚重，如圖所示。好好住App底部標簽欄眾安保險App底部標簽欄面性：穩(wěn)重扎實，運動類、閱讀類，如圖所示。得到App底部標簽欄網(wǎng)易云課堂App底部標簽欄線面：活潑趣味，選中狀態(tài)，如圖所示。愛回收App標簽欄閑魚App標簽欄4.3.4課堂案例——制作旅游類App標簽欄【案例設(shè)計要求】1.運用軟件Illustrator和Photoshop制作標簽欄，設(shè)計效果、展示效果如圖所示。2.標簽欄尺寸：750px（寬）×98px（高）。3.符合標簽欄的設(shè)計規(guī)則?！景咐龑W習目標】學習使用軟件Illustrator和Photoshop制作標簽欄。設(shè)計效果圖展示效果圖【案例知識要點】在Illustrator軟件中，使用矩形工具繪制形狀，使用鋼筆工具添加錨點，使用直接選擇工具調(diào)整錨點到適當?shù)奈恢貌⒅谱鲌A角效果。在Photoshop軟件中，使用矩形工具和屬性面板確定參考線位置，使用置入嵌入對象命令置入圖標，使用橫排文字工具輸入文字。（1）在Illustrator中，按Ctrl+N組合鍵，彈出“新建文檔”對話框，設(shè)置寬度為24px，高度為24px，取向為橫向，顏色模式為RGB，分辨率為72像素/英寸，單擊“創(chuàng)建”按鈕，新建一個文件。（2）選擇“編輯>首選項>常規(guī)”命令，彈出“首選項”對話框，將“鍵盤增量”選項設(shè)為1px，如圖所示。選擇“單位”選項，切換到相應(yīng)面板中進行設(shè)置，如圖所示。（3）選擇“參考線和網(wǎng)格”選項，切換到相應(yīng)的面板，將“網(wǎng)格線間隔”選項設(shè)為1px，如圖所示，單擊“確定”按鈕。（4）選擇“視圖>顯示網(wǎng)格”命令，顯示網(wǎng)格。選擇“視圖>對齊網(wǎng)格”命令，對齊網(wǎng)格。選擇“視圖>對齊像素”命令，對齊像素。（5）選擇“文件>打開”命令，彈出“打開”對話框，選擇云盤中的“Ch04>制作旅游類App標簽欄>素材>02”文件，單擊“打開”按鈕,如圖所示。（6）選擇“選擇”工具，選取網(wǎng)格系統(tǒng)，按Ctrl+C組合鍵，復(fù)制圖形。返回到正在編輯的頁面，按Ctrl+V組合鍵，將其粘貼到制作旅游類App標簽欄頁面中，并拖曳復(fù)制的網(wǎng)格系統(tǒng)到適當?shù)奈恢?，效果如圖所示。（7）選擇“矩形”工具，在頁面中單擊鼠標左鍵，彈出“矩形”對話框，選項的設(shè)置如圖所示。單擊“確定”按鈕，出現(xiàn)一個圓角矩形。設(shè)置描邊色為灰色（153、153、153），填充描邊，并設(shè)置填充色為無，效果如圖所示。（8）選擇“窗口>描邊”命令，彈出“描邊”控制面板，將“粗細”選項設(shè)為1.5px，“對齊描邊”選項設(shè)為“使描邊內(nèi)側(cè)對齊”，其他選項的設(shè)置如圖所示，效果如圖所示。（9）選擇“鋼筆”工具，在矩形上方中間的位置單擊鼠標左鍵，添加一個錨點，在“屬性”控制面板中，設(shè)置“X”選項為12px，“Y”選項為1px，如圖所示，效果如圖所示。選擇“直接選擇”工具，按住Shift鍵的同時，選取需要的錨點，將其垂直向下拖曳7px的位置，效果如圖所示。（10）選擇“鋼筆”工具，在形狀右側(cè)的位置單擊鼠標左鍵，添加一個錨點，在“屬性”控制面板中，設(shè)置“X”選項為24px，“Y”選項為10px，如圖所示，效果如圖所示。選擇“直接選擇”工具，按住Shift鍵的同時，選取需要的錨點，將其水平向右拖曳5px的位置，效果如圖所示。（11）選擇“鋼筆”工具，在形狀左側(cè)的位置單擊鼠標左鍵，添加一個錨點，在“屬性”控制面板中，設(shè)置“X”選項為0px，“Y”選項為10px，如圖所示，效果如圖所示。選擇“直接選擇”工具，按住Shift鍵的同時，選取需要的錨點，將其水平向左拖曳5px的位置，效果如圖所示。（12）選擇“直接選擇”工具，在形狀右側(cè)選取需要的錨點，將其垂直向下拖曳2px的位置，效果如圖所示。按住Shift鍵的同時，選取需要的錨點，將其垂直向下拖曳3px的位置，效果如圖所示。使用相同的方法調(diào)整右側(cè)的錨點，效果如圖所示。（13）選擇“鋼筆”工具，在形狀下方的位置單擊鼠標左鍵，添加一個錨點，在“屬性”控制面板中，設(shè)置“X”選項為10px，“Y”選項為22px，如圖所示，效果如圖所示。使用相同的方法，分別在“X”選項為11px、13px和14px,“Y”選項均為22px的位置添加三個錨點，效果如圖所示。（14）選擇“直接選擇”工具，在形狀下方選取需要的錨點，將其垂直向上拖曳5px的位置，效果如圖所示。選取左側(cè)的錨點，將其水平向右拖曳1px的位置，效果如圖所示。使用相同的方法調(diào)整右側(cè)的錨點，效果如圖所示（15）選取形狀右下角的錨點，如圖所示，顯示邊角點，如圖所示。雙擊邊角點，彈出“邊角”對話框，設(shè)置“半徑”選項為2px，其他選項的設(shè)置如圖所示。單擊“確定”按鈕，效果如圖所示。（16）使用相同的方法調(diào)整左下角的錨點，效果如圖所示。選取形狀頂端的錨點，如圖所示，顯示邊角點，如圖所示。雙擊邊角點，彈出“邊角”對話框，設(shè)置“半徑”選項為1px，其他選項的設(shè)置如圖所示。單擊“確定”按鈕，效果如圖所示。使用相同的方法調(diào)整另外兩個錨點，效果如圖所示。（17）選擇“選擇”工具，選取圖標。在“屬性”控制面板中，單擊“保持寬度與高度比例”按鈕，設(shè)置“高”選項為21px，其他選項的設(shè)置如圖所示。單擊“保持寬度與高度比例”按鈕，設(shè)置“寬”選項為22px，“Y”選項設(shè)為12px，其他選項的設(shè)置如圖所示，效果如圖所示。（18）選擇“畫板”工具，按住Alt+Shift組合鍵的同時，將“畫板1”垂直向下拖曳到適當?shù)奈恢?，如圖所示，在文件中生成新的畫板“畫板2”。選擇“選擇”工具，選取“畫板2”中的圖標，設(shè)置描邊色為橘黃色（255、151、1），效果如圖所示。（19）保持圖形的選取狀態(tài)，按Ctrl+C組合鍵，復(fù)制圖形，按Ctrl+F組合鍵，原位粘貼圖形，設(shè)置填充色為橘黃色（255、151、1），填充圖形，并設(shè)置描邊色為無，效果如圖所示。（20）選擇“窗口>透明度”命令，彈出“透明度”控制面板，將“不透明度”選項設(shè)為30%，其他選項的設(shè)置如圖所示。在圖形上單擊鼠標右鍵，在彈出的快捷菜單中選擇“排列>后移一層”命令，如圖所示，將形狀后移一層，效果如圖所示。（21）使用相同的方法分別繪制其他圖標，效果如圖所示。按住Shift鍵的同時，分別單擊圖標的網(wǎng)格系統(tǒng)，將其同時選取，按Ctrl+3組合鍵，隱藏網(wǎng)格系統(tǒng)，效果如圖所示。按Ctrl+S組合鍵，將文件保存在“Ch04>制作旅游類App標簽欄>素材”的路徑中，命名為“01.ai”。（22）在Photoshop中，按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為98像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（23）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（24）選擇“矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無。在圖像窗口中適當?shù)奈恢美L制矩形，在“圖層”控制面板中生成新的形狀圖層“矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，在面板中進行設(shè)置。在“W：”選項中輸入輸入數(shù)值，如圖所示，按Enter鍵確定操作，如圖所示。去除小數(shù)點后的數(shù)值，保留整數(shù)，如圖所示，效果如圖所示。（25）按Ctrl+R組合鍵，顯示標尺。選擇“視圖>對齊到>全部”命令。在圖像窗口左側(cè)標尺上單擊鼠標并水平向右進行拖曳，在矩形右側(cè)錨點的位置松開鼠標，完成參考線的創(chuàng)建。效果如圖所示。（26）在圖像窗口上方標尺上單擊鼠標并垂直向下進行拖曳，在矩形上方錨點的位置松開鼠標，完成參考線的創(chuàng)建，如圖所示。使用相同的方法，在矩形下方創(chuàng)建一條參考線，效果如圖所示。（27）按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，如圖所示。在圖像窗口左側(cè)標尺上單擊鼠標并水平向右進行拖曳，在矩形中心點的位置松開鼠標，完成參考線的創(chuàng)建，效果如圖所示。（28）選擇“移動”工具，按住Shift鍵的同時，將矩形水平向右移動到適當?shù)奈恢?，使矩形左?cè)貼齊輔助線，如圖所示。使用上述的方法，分別在位于矩形中心和矩形右側(cè)的位置添加兩條垂直輔助線，如圖所示。（29）使用相同的方法，分別添加四條垂直輔助線，如圖所示。選擇“矩形”工具，在“屬性”面板中進行設(shè)置，如圖所示。按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，在圖像窗口左側(cè)標尺上單擊鼠標并水平向右進行拖曳，在矩形中心點的位置松開鼠標，完成參考線的創(chuàng)建，效果如圖所示。按Enter鍵確定操作，在“圖層”控制面板中選中“矩形1”圖層，按Delete鍵將其刪除，效果如圖所示。（30）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App標簽欄>素材>01”文件，單擊“置入”按鈕，彈出“打開為智能對象”對話框，選擇“頁面1”，如圖所示，單擊“確定”按鈕，將圖標置入到圖像窗口中，如圖所示。將其拖曳到適當?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“首頁（未選中）”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（31）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App標簽欄>素材>01”文件，單擊“置入”按鈕，彈出“打開為智能對象”對話框，選擇“頁面2”，如圖所示，單擊“確定”按鈕，將圖標置入到圖像窗口中，并調(diào)整為與“首頁（未選中）”圖標相同的位置與大小，在“圖層”控制面板中生成新的圖層并將其命名為“首頁（已選中）”，如圖所示。（32）單擊“首頁（未選中）”圖層左側(cè)的眼睛圖標，隱藏圖層，如圖所示，效果如圖所示。（33）使用相同的方法分別置入其他需要的圖標并調(diào)整大小，在“屬性”面板中分別設(shè)置圖標位置，在“圖層”控制面板中生成新的圖層并分別將其命名，設(shè)置圖標的顯示與隱藏，如圖所示，效果如圖所示。（34）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（35）選中“背景”圖層。選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設(shè)為橘黃色（255、151、1），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，在“圖層”控制面板中生成新的文字圖層，如圖所示，效果如圖所示。（36）使用相同的方法再次分別輸入文字，在“字符”面板中，將“顏色”設(shè)為灰色（153、153、153），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中分別生成新的文字圖層。（37）在“圖層”控制面板中選中“我的（已選中）”圖層，如圖所示。按住Shift鍵的同時，單擊“首頁”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“標簽欄”，如圖所示。旅游類App標簽欄制作完成。金剛區(qū)作為UI設(shè)計中的常用組件之一，具有展現(xiàn)豐富、設(shè)計精美的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。4.4.1金剛區(qū)的概念金剛區(qū)又稱為快速功能入口，通常是位于搜索框、banner之下，是頁面的核心功能區(qū)域，表現(xiàn)形式為多行排列的宮格區(qū)圖標。具有趣味展示以及業(yè)務(wù)導流的作用，如圖所示。餓了么App喜馬拉雅App支付寶App4.4.2金剛區(qū)的類型1.圖標+文字優(yōu)點：設(shè)計細節(jié)豐富，富有創(chuàng)意。缺點：對文字信息的依賴性強。如圖所示。貝殼App金剛區(qū)2.圖片+文字優(yōu)點：主題明確，具有感染力。缺點：缺乏設(shè)計感。如圖所示。盒馬鮮生App金剛區(qū)3.圖標+圖片+文字優(yōu)點：運營目的強。缺點：視覺不統(tǒng)一。如圖所示。網(wǎng)易考拉海購App金剛區(qū)4.4.3金剛區(qū)的規(guī)則1.金剛區(qū)的尺寸iOS寬度375pt,高度會根據(jù)圖標數(shù)量變化。Android寬度360dp,高度會根據(jù)圖標數(shù)量變化。主圖標尺寸約48pt。幅圖標尺寸約30pt。文字尺寸約11pt。如圖所示。金剛區(qū)尺寸示意圖2.金剛區(qū)的布局（1）數(shù)量金剛區(qū)的圖標根據(jù)米勒法則的7±2規(guī)律，在一行中不超過5個，如圖所示。酷狗音樂App數(shù)量太多，應(yīng)進行分組，分組一般通過業(yè)務(wù)屬性以及使用頻率進行，如圖所示。大眾點評App當業(yè)務(wù)屬性一致，可以運用橫向滾動進行展示，如圖所示。網(wǎng)易云音樂App（2）方法邊距刪減法：減去左右兩邊間距，再進行等分，適用于有底板圖標，如圖所示。邊距刪減法占位等分法：列寬=屏幕寬度/標簽個數(shù)，適用于無底板圖標，如圖所示。占位等分法3.金剛區(qū)的圖標（1）金剛區(qū)圖標尺寸主圖標底板：40～48pt，內(nèi)環(huán)圖標：是底板的0.618（黃金分割比）幅圖標：底板的0.618或0.382（黃金風格比）如圖所示。金剛區(qū)圖標尺寸示意圖（2）金剛區(qū)圖標風格無底板面性圖標：視覺層級針對有底板面性稍弱弱，用于主金剛區(qū)及少數(shù)副金剛區(qū)，如圖所示。貝殼找房App副金剛區(qū)線性圖標：線條較粗，用于功能突出的金融類，如圖所示支付寶App主副金剛區(qū)線面圖標：趣味性App金剛區(qū)，如圖所示。大眾點評App主副金剛區(qū)有底板圓形底板+面性圖標：柔和簡潔，最常用，如圖所示。壹錢包App金剛區(qū)圓形底板+業(yè)務(wù)說明+面性圖標：柔和、識別度高，如圖所示。喜馬拉雅App金剛區(qū)圓形底板+線性圖標：品質(zhì)，精致，使用較少，如圖所示。京東金融App金剛區(qū)圓角矩形底板+面性圖標：嚴謹不失柔和，如圖所示。網(wǎng)易云課堂App金剛區(qū)超橢圓底板+面性圖標：趣味，可愛，如圖所示。鏈家App金剛區(qū)大圓角矩形底板+圖形圖標：節(jié)省空間，適用于副金剛區(qū)為2行，如圖所示。貝殼找房App金剛區(qū)（3）金剛區(qū)圖標配色配色時要考慮色彩情緒，如圖所示。色彩情緒示意圖4.4.4課堂案例——制作旅游類App金剛區(qū)【案例設(shè)計要求】1.運用軟件Photoshop制作金剛區(qū)，設(shè)計效果、展示效果如圖所示。2.金剛區(qū)尺寸：750px（寬）×144px（高）。3.符合金剛區(qū)的設(shè)計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作金剛區(qū)。設(shè)計效果圖展示效果圖【案例知識要點】使用矩形工具和屬性面板確定參考線位置，使用圓角矩形工具和橢圓工具繪制圖標，使用直接選擇工具調(diào)整圖標，使用漸變疊加命令添加效果，使用置入嵌入對象命令置入網(wǎng)格系統(tǒng)從而調(diào)整圖標，使用橫排文字工具輸入文字。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為144像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（3）選擇“矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無。在圖像窗口中適當?shù)奈恢美L制矩形，在“圖層”控制面板中生成新的形狀圖層“矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，在面板中進行設(shè)置。在“W：”選項中輸入輸入數(shù)值，如圖所示，按Enter鍵確定操作，效果如圖所示。去除小數(shù)點后的數(shù)值，保留整數(shù)，如圖所示，效果如圖所示。（4）按Ctrl+R組合鍵，顯示標尺。選擇“視圖>對齊到>全部”命令。在圖像窗口左側(cè)標尺上單擊鼠標并水平向右進行拖曳，在矩形右側(cè)錨點的位置松開鼠標，完成參考線的創(chuàng)建，效果如圖所示。（5）按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，如圖所示。在圖像窗口左側(cè)標尺上單擊鼠標并水平向右進行拖曳，在矩形中心點的位置松開鼠標，完成參考線的創(chuàng)建，效果如圖所示。（6）選擇“移動”工具，按住Shift鍵的同時，將矩形水平向右移動到適當?shù)奈恢?，使矩形左?cè)貼齊輔助線，如圖所示。使用上述的方法，分別在位于矩形中心和矩形右側(cè)的位置添加兩條垂直輔助線，如圖所示。（7）使用相同的方法，分別添加四條垂直輔助線，如圖所示。選擇“矩形”工具，在“屬性”面板中進行設(shè)置，如圖所示。按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，在圖像窗口左側(cè)標尺上單擊鼠標并水平向右進行拖曳，在矩形中心點的位置松開鼠標，完成參考線的創(chuàng)建，效果如圖所示。按Enter鍵確定操作，在“圖層”控制面板中選中“矩形1”圖層，按Delete鍵將其刪除，效果如圖所示。（8）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設(shè)置為4像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（9）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（1、206、149）、100（4、219、64），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（10）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設(shè)置為2像素，在圖像窗口中適當?shù)奈恢美L制圓角矩形，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。在“屬性”面板中進行其他設(shè)置，如圖所示，效果如圖所示。（11）選擇“直接選擇”工具，選中左上角的錨點，按住Shift鍵的同時，將其向右拖曳到適當?shù)奈恢茫Ч鐖D所示。使用相同的方法調(diào)整右上角的錨點，效果如圖所示。（12）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（1、187、55）、100（2、207、59），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（13）在“圖層”控制面板中選中“圓角矩形1”圖層，將其拖曳到“圓角矩形2”圖層的上方，如圖所示，效果如圖所示。（14）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設(shè)置為4像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形3”。在“屬性”面板中進行設(shè)置，將“填充”顏色設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（15）選擇“路徑選擇”工具，按住Alt+Shift組合鍵的同時，將圓角矩形水平向右拖曳至適當?shù)奈恢?，?fù)制圖形。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（16）選擇“橢圓”工具，按住Shift鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（17）選擇“路徑選擇”工具，按住Alt+Shift組合鍵的同時，將圓形水平向右拖曳至適當?shù)奈恢?，?fù)制圖形。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（18）在“圖層”控制面板中將“橢圓1”圖層的“填充”選項設(shè)為0%，如圖所示。（19）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值均設(shè)為白色。設(shè)置兩個位置點的不透明度值為0（60%）、100（20%），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（20）在“圖層”控制面板中，按住Shift鍵的同時，單擊“圓角矩形2”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“火車票”，如圖所示。使用相同的方法分別制作其他圖標，如圖所示，效果如圖所示。（21）運用網(wǎng)格系統(tǒng)選取合適的形狀進行調(diào)整。在“圖層”控制面板中，選中“矩形1”圖層。選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App金剛區(qū)>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“水平矩形網(wǎng)格系統(tǒng)”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（22）選擇“移動”工具，按住Alt+Shift組合鍵的同時，將網(wǎng)格系統(tǒng)水平向右拖曳至適當?shù)奈恢?，?fù)制圖像，在“屬性”面板中進行設(shè)置，如圖所示，在“圖層”控制面板中生成新的形狀圖層“水平矩形網(wǎng)格系統(tǒng)拷貝”。使用相同的方法再次復(fù)制一個圖像，在“屬性”面板中進行設(shè)置，如圖所示，在“圖層”控制面板中生成新的形狀圖層“水平矩形網(wǎng)格系統(tǒng)拷貝2”，效果如圖所示。（23）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App金剛區(qū)>素材>02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“垂直矩形網(wǎng)格系統(tǒng)”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（24）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App金剛區(qū)>素材>03”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“方形網(wǎng)格系統(tǒng)”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（25）按住Shift鍵的同時，單擊“水平矩形網(wǎng)格系統(tǒng)”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“網(wǎng)格系統(tǒng)”，如圖所示。（26）通過觀察可見，“火車票”圖標與其他圖標相對比，易引起視覺不平衡。在“圖層”控制面板中，選中“火車票”圖層組，按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，按住Alt+Shift鍵的同時，拖曳右上角的控制手柄等比例縮小圖標，按Enter鍵確定操作，效果如圖所示。使用相同的方法調(diào)整“門票”圖標，效果如圖所示。（27）在“圖層”控制面板中，單擊“方形網(wǎng)格系統(tǒng)”圖層左側(cè)的眼睛圖標，隱藏圖層，并選中“火車票”圖層組，如圖所示。選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設(shè)為深灰色（52、52、52），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（28）使用相同的方法分別輸入其他文字，制作出如圖所示的效果，在“圖層”控制面板中分別生成新的文字圖層。選中“門票”圖層組，如圖所示。按住Shift鍵的同時，單擊“矩形1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“金剛區(qū)”，如圖所示。旅游類App金剛區(qū)制作完成。瓷片區(qū)作為UI設(shè)計中的常用組件之一，具有排列整齊、展示完整的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。4.5.1瓷片區(qū)的概念瓷片區(qū)即將圖像和文字等元素通過特定排列的形式，組成一個完整的模塊進行展示，因其視覺外觀看上去就像一塊塊瓷片貼在版面上，故稱為“瓷片區(qū)”。常用于電商、平臺以及泛娛樂類App，是流量的入口，如圖所示。淘寶App閑魚App京東金融App4.5.2瓷片區(qū)的類型1.實物圖片優(yōu)點：高識別、代入感強、可復(fù)用，設(shè)計效率較高。缺點：對圖片素材要求較高。使用場景：對實物圖有較大需求的產(chǎn)品類型，例如外賣類、電商類、旅行類產(chǎn)品。如圖所示。金剛區(qū)作為UI設(shè)計中的常用組件之一，具有展現(xiàn)豐富、設(shè)計精美的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。淘寶App閑魚App美團外賣App2.插畫插圖優(yōu)點：可以高度概括瓷片區(qū)的運營含義，精美的插圖有助于提升產(chǎn)品的細節(jié)品質(zhì)和趣味。缺點：一對一，難以復(fù)用，比較耗時。使用場景：虛擬產(chǎn)品、金融產(chǎn)品，對風格有明顯要求。如圖所示。京東金融App小米金融App廣發(fā)銀行App4.5.3瓷片區(qū)的規(guī)則1.瓷片區(qū)的布局（1）整齊布局大小一致，富有韻律，如圖所示。瓷片區(qū)整齊布局示意圖（2）靈活布局對瓷片進行合并變形等處理，區(qū)分主次，如圖所示。瓷片區(qū)靈活布局示意圖2.瓷片區(qū)的排版（1）對角線排版呈對角線結(jié)構(gòu)布局，一行顯示2～3塊瓷片，適用于文字的信息較多，如圖所示。對角線結(jié)構(gòu)布局示意圖（2）左右排版呈左右結(jié)構(gòu)布局，一行顯示1塊或2塊瓷片，瓷片呈狹長矩形，適用于配圖為插畫或圖標時候。左右結(jié)構(gòu)布局示意圖（3）上下排版呈上下結(jié)構(gòu)布局，一行顯示不少于3塊瓷片，瓷片呈瘦高矩形，適用于界面的功能入口較多時。上下結(jié)構(gòu)布局示意圖3.瓷片區(qū)的文字主文案字號建議在15到18pt。副文案字號建議在11和13pt。標簽文字字號建議在11pt，按鈕高度：18pt，上下間距4pt，左右間距6pt。運用大小、粗細、顏色打造文字層級，文字大小差2pt。瓷片區(qū)文字示意圖4.瓷片區(qū)的圖片（1）配圖質(zhì)量高質(zhì)量、符合產(chǎn)品調(diào)性。背景簡潔、摳圖邊緣要干凈。顏色、飽和度、明度統(tǒng)一。如圖所示。一條App（2）配圖規(guī)范統(tǒng)一圖片或插圖的尺寸和視覺面積。保證圖片之間的差異性。提煉關(guān)鍵文案信息。瓷片區(qū)配圖規(guī)范示意圖5.瓷片區(qū)的背景（1）白色背景畫面整潔干凈，如圖所示。淘寶App（2）純色背景背景色盡可能跟圖片或插圖的主色調(diào)鄰近，如圖所示。廣發(fā)銀行App（3）漸變背景使用插圖主色調(diào)進行漸變設(shè)計，如圖所示。小米金融App4.5.4課堂案例——制作旅游類App瓷片區(qū)【案例設(shè)計要求】1.運用軟件Photoshop制作瓷片區(qū)，效果如圖所示。2.排版布局：靈活布局。3.符合瓷片區(qū)的設(shè)計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作瓷片區(qū)。效果圖【案例知識要點】使用圓角矩形工具、矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令和顏色疊加命令添加效果，使用橫排文字工具輸入文字。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為360像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（3）選擇“圓角矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為12像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（4）按Ctrl+J組合鍵，復(fù)制圖層，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1拷貝”，單擊圖層左側(cè)的眼睛圖標，隱藏圖層，并選中“圓角矩形1”圖層，如圖所示。（5）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App瓷片區(qū)>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中。將其拖曳到適當?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“圖片1”。按Alt+Ctrl+G組合鍵，為“圖片1”圖層創(chuàng)建剪貼蒙版，效果如圖所示。（6）在“圖層”控制面板中選中“圓角矩形1拷貝”圖層，單擊圖層左側(cè)的空白圖標，顯示圖層。單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（1、206、149）、100（4、219、64），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。設(shè)置“圓角矩形1拷貝”圖層的“不透明度”選項為35%，效果如圖所示。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版。（7）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（8）選擇“矩形”工具，在屬性欄中將“填充”顏色設(shè)為橘黃色（254、186、2），“描邊”顏色設(shè)為無。在圖像窗口中適當?shù)奈恢美L制矩形，在“圖層”控制面板中生成新的形狀圖層“矩形1”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（9）選擇“直接選擇”工具，選中右下角的錨點，按住Shift鍵的同時，將其向左拖曳到適當?shù)奈恢?，效果如圖所示。使用相同的方法再次繪制一個矩形并調(diào)整錨點，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“矩形2”。（10）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設(shè)置為16像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。在屬性欄中將“填充”顏色設(shè)為深藍色（1、139、241），在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（11）選擇“橢圓”工具，按住Shift鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。在屬性欄中將“填充”顏色設(shè)為白色，在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（12）在Iconfont-阿里巴巴矢量圖標庫官網(wǎng)中下載需要的圖標，選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch04>制作旅游類App瓷片區(qū)>素材>02”文件，單擊“置入”按鈕，將圖標置入到圖像窗口中。將其拖曳到適當?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“位置”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（13）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“顏色疊加”命令，彈出對話框，設(shè)置“疊加”顏色為深藍色（1、139、241），單擊“確定”按鈕。返回到“顏色疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（14）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中進行設(shè)置，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（15）使用相同的方法再次輸入文字，在“字符”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。按住Shift鍵的同時，單擊“圓角矩形1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“旅游度假”，如圖所示。（16）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，分別在364像素和386像素的位置新建垂直參考線，設(shè)置如圖所示，分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（17）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為12像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（18）按Ctrl+J組合鍵，復(fù)制圖層，在“圖層”控制面板中生成新的形狀圖層“圓角矩形3拷貝”，單擊圖層左側(cè)的眼睛圖標，隱藏圖層，并選中“圓角矩形3”圖層，如圖所示。（19）選擇“文件>置入嵌入對象”命令，彈出