UI設(shè)計(jì)（項(xiàng)目式全彩微課版）課件全套 項(xiàng)目1-6　走進(jìn)UI設(shè)計(jì)的世界 UI設(shè)計(jì)基礎(chǔ)-快速輸出UI設(shè)計(jì) UI設(shè)計(jì)輸出

本章介紹：

本章對(duì)UI設(shè)計(jì)的基本概念、常用軟件、項(xiàng)目流程以及規(guī)范與規(guī)則進(jìn)行系統(tǒng)講解。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)UI設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，有助于高效便利地進(jìn)行后續(xù)的UI設(shè)計(jì)工作。項(xiàng)目1走進(jìn)UI設(shè)計(jì)的世界—UI設(shè)計(jì)基礎(chǔ)學(xué)習(xí)引導(dǎo)理解UI設(shè)計(jì)的基本概念了解UI設(shè)計(jì)的常用軟件熟悉UI設(shè)計(jì)的項(xiàng)目流程熟悉UI設(shè)計(jì)的軟件操作掌握UI設(shè)計(jì)的規(guī)范與規(guī)則培養(yǎng)對(duì)UI設(shè)計(jì)的基本興趣任務(wù)1.1

理解UI設(shè)計(jì)的基本概念任務(wù)引入任務(wù)知識(shí)任務(wù)實(shí)施1.1.1任務(wù)引入

本任務(wù)通過(guò)掌握UI設(shè)計(jì)的相關(guān)概念了解UI設(shè)計(jì)，并通過(guò)到花瓣網(wǎng)調(diào)研UI設(shè)計(jì)的實(shí)際應(yīng)用，進(jìn)一步理解UI設(shè)計(jì)的基本概念。1.1.2任務(wù)知識(shí)：UI設(shè)計(jì)的基本概念UI即UserInterface（用戶界面）的簡(jiǎn)稱，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。優(yōu)秀的UI設(shè)計(jì)不僅要保證界面的美觀，更要保證交互設(shè)計(jì)（InteractionDesign，IxD）的可用性及用戶體驗(yàn)（UserExperience，UE/UX）的友好度。1.1.3任務(wù)實(shí)施（1）啟動(dòng)瀏覽器，打開(kāi)花瓣網(wǎng)官網(wǎng)，單擊右側(cè)的“登錄/注冊(cè)”按鈕，在彈出的對(duì)話框中選擇登錄方式并登錄。1.1.3任務(wù)實(shí)施（2）在搜索框中輸入關(guān)鍵詞“UI設(shè)計(jì)”，按Enter鍵，進(jìn)入搜索頁(yè)面。（3）單擊頁(yè)面上方的“畫(huà)板”選項(xiàng)，發(fā)現(xiàn)與UI設(shè)計(jì)相關(guān)的有圖標(biāo)設(shè)計(jì)、App界面設(shè)計(jì)以及網(wǎng)頁(yè)設(shè)計(jì)等畫(huà)板。選擇其中的“APP界面”畫(huà)板，單擊“關(guān)注”按鈕，收藏該畫(huà)板。也可以根據(jù)調(diào)研需要關(guān)注收藏其他UI設(shè)計(jì)相關(guān)的畫(huà)板。1.1.3任務(wù)實(shí)施（4）單擊收藏的“APP界面”畫(huà)板，進(jìn)入該畫(huà)板，通過(guò)調(diào)研賞析該畫(huà)板中UI設(shè)計(jì)的實(shí)際應(yīng)用案例，更好地理解UI設(shè)計(jì)的基本概念。使用上述方法，調(diào)研賞析其他UI設(shè)計(jì)相關(guān)的畫(huà)板，進(jìn)一步理解UI設(shè)計(jì)。任務(wù)1.2了解UI設(shè)計(jì)的常用軟件任務(wù)引入任務(wù)知識(shí)任務(wù)實(shí)施1.2.1任務(wù)引入本任務(wù)通過(guò)了解UI設(shè)計(jì)的常用軟件來(lái)熟悉UI設(shè)計(jì)的具體內(nèi)容，并通過(guò)到各軟件相關(guān)官網(wǎng)調(diào)研了解軟件輔助UI設(shè)計(jì)的功能、技術(shù)和實(shí)現(xiàn)效果。1.2.2任務(wù)知識(shí)：UI設(shè)計(jì)的常用軟件根據(jù)軟件的專業(yè)性、市場(chǎng)的認(rèn)可度及用戶的使用量等因素可以將UI設(shè)計(jì)的常用軟件總結(jié)為界面設(shè)計(jì)、動(dòng)效設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、3D渲染、思維導(dǎo)圖以及交互原型這六類，建議初學(xué)者先掌握Photoshop（簡(jiǎn)稱PS）和Illustrator（簡(jiǎn)稱AI），有條件購(gòu)買蘋(píng)果電腦的話還要掌握Sketch和Figma。1.2.3任務(wù)實(shí)施（1）以軟件Photoshop為例。Photoshop是Adobe公司旗下的圖像處理軟件，因此，啟動(dòng)瀏覽器，打開(kāi)Adobe公司中國(guó)官網(wǎng)，單擊“創(chuàng)意和設(shè)計(jì)”按鈕，在展開(kāi)的選項(xiàng)中選擇“Photoshop”選項(xiàng)，跳轉(zhuǎn)到Photoshop相關(guān)網(wǎng)頁(yè)。1.2.3任務(wù)實(shí)施（2）在此頁(yè)面中有著Photoshop軟件的相關(guān)功能介紹和具體操作方法，能夠更好地了解Photoshop軟件，使用上述方法，了解Illustrator、Sketch和Figma等其他UI設(shè)計(jì)常用軟件的相關(guān)功能、技術(shù)和實(shí)現(xiàn)效果。任務(wù)1.3熟悉UI設(shè)計(jì)的項(xiàng)目流程任務(wù)引入任務(wù)知識(shí)任務(wù)實(shí)施1.3.1任務(wù)引入本任務(wù)通過(guò)到UI中國(guó)調(diào)研、賞析UI設(shè)計(jì)中的完整項(xiàng)目，熟悉UI設(shè)計(jì)的項(xiàng)目流程。1.3.2任務(wù)知識(shí)：UI設(shè)計(jì)的項(xiàng)目流程針對(duì)整個(gè)產(chǎn)品的設(shè)計(jì)流程而言，UI設(shè)計(jì)僅是其中的一部分。一個(gè)產(chǎn)品從啟動(dòng)到上線，會(huì)經(jīng)歷多個(gè)環(huán)節(jié)、由多個(gè)角色共同協(xié)作完成。每個(gè)角色基本都會(huì)有對(duì)應(yīng)的1個(gè)或多個(gè)環(huán)節(jié)。1.3.3任務(wù)實(shí)施（1）啟動(dòng)瀏覽器，打開(kāi)UI中國(guó)官網(wǎng)，單擊右側(cè)的“登錄/注冊(cè)”按鈕，在彈出的對(duì)話框中選擇登錄方式并登錄。1.3.3任務(wù)實(shí)施（2）單擊左側(cè)的“發(fā)現(xiàn)”按鈕，在彈出的菜單中選擇“作品”選項(xiàng)，進(jìn)入作品頁(yè)面。1.3.3任務(wù)實(shí)施（3）單擊頁(yè)面左上角的“全部分類”選項(xiàng)，選擇“App”選項(xiàng)，出現(xiàn)了大量App項(xiàng)目。點(diǎn)擊進(jìn)入其中一個(gè)項(xiàng)目，可以查看到該項(xiàng)目的完整設(shè)計(jì)過(guò)程，通過(guò)調(diào)研賞析該App項(xiàng)目，可以熟悉UI設(shè)計(jì)的項(xiàng)目流程。使用上述方法，調(diào)研賞析其他UI設(shè)計(jì)項(xiàng)目，進(jìn)一步熟悉UI設(shè)計(jì)的項(xiàng)目流程。任務(wù)1.4掌握UI設(shè)計(jì)規(guī)范與規(guī)則任務(wù)引入任務(wù)知識(shí)任務(wù)實(shí)施1.4.1任務(wù)引入本任務(wù)通過(guò)掌握設(shè)計(jì)單位、設(shè)計(jì)尺寸、適配方案、設(shè)計(jì)結(jié)構(gòu)、間距規(guī)范、文字規(guī)范、圖標(biāo)尺寸以及圖片比例掌握UI設(shè)計(jì)規(guī)范與規(guī)則，并通過(guò)到優(yōu)設(shè)網(wǎng)收集、閱讀UI設(shè)計(jì)規(guī)范相關(guān)的文章，進(jìn)一步掌握UI設(shè)計(jì)的規(guī)范與規(guī)則。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則UI設(shè)計(jì)的基礎(chǔ)規(guī)范與規(guī)則可以令設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)更加事半功倍。下面主要介紹單位、尺寸、適配、結(jié)構(gòu)、間距、文字圖標(biāo)以及圖片的基礎(chǔ)規(guī)范與規(guī)則。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則1.單位介紹（1）DPI和PPIPPI：像素密度（PixelsPerInch，PPI）是屏幕分辨率單位，表示的是每英寸所擁有的像素?cái)?shù)量，通常代表蘋(píng)果手機(jī)。DPI：網(wǎng)點(diǎn)密度（DotsPerInch，DPI）是打印分辨率單位，表示每英寸打印的點(diǎn)數(shù)，通常代表安卓手機(jī)。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則1.單位介紹（2）px、pt、dp、sppx：像素（pixels，px）是物理像素（PhysicalPixel）的單位，屬于相對(duì)單位，會(huì)因?yàn)槠聊幌袼孛芏茸兓兓?。運(yùn)用Photoshop軟件進(jìn)行UI設(shè)計(jì)時(shí)使用的單位,運(yùn)用此單位需要兼容不同分辨率的界面。pt：點(diǎn)（points，pt）是邏輯像素（LogicPoint）的單位，屬于絕對(duì)單位，不會(huì)因?yàn)槠聊幌袼孛芏茸兓兓?。iOS開(kāi)發(fā)及運(yùn)用Sketch軟件進(jìn)行UI設(shè)計(jì)使用的單位。dp：獨(dú)立密度像素（Density-independentPixels，dp），是安卓設(shè)備上的基本單位，用于非文字單位，等同于蘋(píng)果設(shè)備上的pt。sp：獨(dú)立縮放像素（Scale-independentPixels，sp），是Android設(shè)備上的字體單位。用戶可以根據(jù)自己需求調(diào)整字體尺寸，當(dāng)文字尺寸是“正常”狀態(tài)時(shí)，1sp=1dp。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則2.設(shè)計(jì)尺寸iOS常見(jiàn)的設(shè)備尺寸在進(jìn)行界面設(shè)計(jì)時(shí)，為了適配大部分尺寸，推薦以iPhoneX/Xs/11pro為基準(zhǔn)。如果使用Photoshop就創(chuàng)建750px×1624px尺寸的畫(huà)布，如果使用Sketch就建立375pt×812pt尺寸的畫(huà)布。Android常見(jiàn)的設(shè)備尺寸，在進(jìn)行界面設(shè)計(jì)時(shí)，如果想要一稿適配Android和iOS，就使用Photoshop新建720px×1280px尺寸的畫(huà)布。如果根據(jù)MaterialDesign新規(guī)范單獨(dú)設(shè)計(jì)Android設(shè)計(jì)稿，就使用Photoshop新建1080px×1920px尺寸的畫(huà)布。無(wú)論哪種需求，使用Sketch只建立360dp×640dp尺寸的畫(huà)布即可。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則3.適配方案一套App界面設(shè)計(jì)數(shù)量通常在80～150頁(yè)。由于Photoshop是使用px單位進(jìn)行UI設(shè)計(jì)，因此在適配時(shí)還需要額外設(shè)計(jì)出其他機(jī)型的頁(yè)面。而Sketch、XD、Figma等軟件是使用pt單位進(jìn)行UI設(shè)計(jì)，因此在適配時(shí)無(wú)需額外設(shè)計(jì)。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則4.設(shè)計(jì)結(jié)構(gòu)在iOS系統(tǒng)中，界面通常由狀態(tài)欄、導(dǎo)航欄、安全涉及區(qū)以及標(biāo)簽欄組成。自全面屏上市，界面較之前還多了虛擬主頁(yè)鍵。Android和iOS一樣，只是叫法不同。在Android中，界面通常由狀態(tài)欄、頂部應(yīng)用欄、安全設(shè)計(jì)區(qū)、底部應(yīng)用欄以及虛擬導(dǎo)航欄組成。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則5.間距規(guī)范在App間距中，8倍數(shù)和10倍數(shù)的尺寸常被使用，例如在iOS中以@2x為基準(zhǔn),常見(jiàn)的邊距有20px、24px、30px、32px、40px及50px。而4倍數(shù)的尺寸則可以用于較親密的元素之間。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則6.文字規(guī)范系統(tǒng)字體（1）iOS系統(tǒng)舊金山字體：舊金山字體是非襯線字體，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText（文本模式）適用與小于19pt的文字，SFUIDisplay（展示模式）適用于大于20pt的文字。紐約字體：紐約字體是襯線字體，旨在補(bǔ)充舊金山字體。對(duì)于小于20pt的文本使用小號(hào)，對(duì)于20到35pt之間的文本使用中號(hào)，對(duì)于36到53pt之間的文本使用大號(hào)，對(duì)于54pt或更大的文本使用特大號(hào)。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則6.文字規(guī)范系統(tǒng)字體（2）Android系統(tǒng)Roboto：在Android系統(tǒng)中，英文使用的是Roboto字體，該字體共有6個(gè)字重。思源黑體：在Android系統(tǒng)中，中文使用的是思遠(yuǎn)黑體字體，又稱為“SourceHanSans”或“Noto”，共有7個(gè)字重。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則6.文字規(guī)范字體尺寸蘋(píng)果和MaterialDesign提供的字號(hào)參考并不完全適用于中文，因?yàn)橄嗤痔?hào)下，中文比西文大。如iOS官方規(guī)范正文為17pt，但使用中文時(shí)14pt和12pt更加合適。為了區(qū)分標(biāo)題和正文，字體大小差異至少保持在2pt及以上。行高西文通常為1.3～1.5倍，中文采用1.5～2倍。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則7.圖標(biāo)尺寸（1）應(yīng)用圖標(biāo)概念：應(yīng)用圖標(biāo)即產(chǎn)品圖標(biāo)，是品牌和產(chǎn)品的視覺(jué)表達(dá)，主要出現(xiàn)在主屏幕上。尺寸：應(yīng)用圖標(biāo)的設(shè)計(jì)尺寸可以采用1024px，并根據(jù)iOS官方模版進(jìn)行規(guī)范，正確的圖標(biāo)設(shè)計(jì)稿應(yīng)是直角矩形不帶圓角的，iOS會(huì)自動(dòng)應(yīng)用一個(gè)圓角遮罩將圖標(biāo)的4個(gè)角遮住。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則7.圖標(biāo)尺寸（2）功能圖標(biāo)概念：功能圖標(biāo)即系統(tǒng)圖標(biāo)，是通過(guò)簡(jiǎn)潔現(xiàn)代的圖形表達(dá)一些常見(jiàn)功能，主要應(yīng)用于界面中的導(dǎo)航欄、工具欄以及標(biāo)簽欄等模塊。尺寸：創(chuàng)建功能圖標(biāo)時(shí)，可以參考MaterialDesign設(shè)計(jì)語(yǔ)言，以24dp尺寸為基準(zhǔn)。圖標(biāo)應(yīng)該留出一定的邊距，保證不同面積的圖標(biāo)有協(xié)調(diào)一致的視覺(jué)效果。1.4.2任務(wù)知識(shí)：UI設(shè)計(jì)規(guī)范與規(guī)則8.圖片比例圖片通常需要按照固定比例進(jìn)行設(shè)計(jì)，并應(yīng)用于特定環(huán)境，如1:1尺寸的圖片通常會(huì)作為頭像使用。以下為整理好的圖片常用比例及特定應(yīng)用，以便大家進(jìn)行后續(xù)設(shè)計(jì)。1.4.3任務(wù)實(shí)施（1）啟動(dòng)瀏覽器，打開(kāi)優(yōu)設(shè)網(wǎng)官網(wǎng)，在搜索框中輸入關(guān)鍵詞“UI規(guī)范”，單擊右側(cè)的搜索按鈕或按Enter鍵，進(jìn)入檢索頁(yè)面，選擇“文章”這一類別，即可檢索到有關(guān)UI規(guī)范的大量文章。1.4.3任務(wù)實(shí)施（2）單擊這些文章，進(jìn)入文章的詳細(xì)信息頁(yè)面，通過(guò)閱讀這些UI設(shè)計(jì)規(guī)范相關(guān)的文章，熟悉掌握UI設(shè)計(jì)的規(guī)范與規(guī)則。本章介紹：

本章針對(duì)UI設(shè)計(jì)中常用的線性圖標(biāo)、面性圖標(biāo)以及線面圖標(biāo)進(jìn)行系統(tǒng)的知識(shí)講解與實(shí)操演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)圖標(biāo)設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握繪制圖標(biāo)的規(guī)范和方法，為接下來(lái)的UI設(shè)計(jì)打下基礎(chǔ)。項(xiàng)目2設(shè)計(jì)趣味的圖標(biāo)—UI圖標(biāo)設(shè)計(jì)學(xué)習(xí)引導(dǎo)掌握線性圖標(biāo)的風(fēng)格特點(diǎn)掌握面性圖標(biāo)的風(fēng)格特點(diǎn)掌握線面圖標(biāo)的風(fēng)格特點(diǎn)掌握線性圖標(biāo)的制作方法掌握面性圖標(biāo)的制作方法掌握線面圖標(biāo)的制作方法培養(yǎng)良好的UI圖標(biāo)設(shè)計(jì)勞動(dòng)習(xí)慣培養(yǎng)一定的UI圖標(biāo)設(shè)計(jì)創(chuàng)新能力和藝術(shù)審美能力任務(wù)2.1

設(shè)計(jì)旅游類App線性圖標(biāo)任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施2.1.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制旅游類App標(biāo)簽欄中的“行程”圖標(biāo)，掌握線性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.1.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App標(biāo)簽欄中的“行程”圖標(biāo)進(jìn)行創(chuàng)意。圖形選用“日歷”作為核心創(chuàng)作元素，形象地表達(dá)行程之意。未點(diǎn)擊狀態(tài)采用形象簡(jiǎn)潔、設(shè)計(jì)輕盈的線性圖標(biāo)，呈現(xiàn)出干凈的視覺(jué)效果。點(diǎn)擊狀態(tài)通過(guò)調(diào)整未點(diǎn)擊狀態(tài)的線性圖標(biāo)，轉(zhuǎn)變?yōu)樯鷦?dòng)趣味、俏皮可愛(ài)的線面圖標(biāo)。色彩選灰色和橙色兩種顏色，可以更好地區(qū)別不同的顯示狀態(tài)。同時(shí)橙色能夠體現(xiàn)旅游的歡快熱情，契合主題。2.1.3任務(wù)知識(shí)：Illustrator-變換命令熟練掌握“屬性”面板調(diào)整基礎(chǔ)圖形，運(yùn)用“變換”命令進(jìn)行快速?gòu)?fù)制，通過(guò)“擴(kuò)展外觀”命令變成真實(shí)圖像。2.1.4任務(wù)實(shí)施任務(wù)2.2設(shè)計(jì)旅游類App面性圖標(biāo)任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施2.2.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App金剛區(qū)中的“酒店”圖標(biāo)，掌握面性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.2.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App金剛區(qū)中的“酒店”圖標(biāo)進(jìn)行創(chuàng)意。圖形選用“高樓”作為核心創(chuàng)作元素，形象地表達(dá)酒店之意。整體采用形象飽滿、視覺(jué)突出的面性圖標(biāo)，幫助用戶快速進(jìn)行圖標(biāo)的位置定位。色彩選用紅橙漸變，能夠體現(xiàn)入住酒店的溫暖。2.2.3任務(wù)知識(shí)熟練掌握“圓角矩形”工具、“屬性”面板和“合并形狀“命令繪制基礎(chǔ)圖形，運(yùn)用“漸變”工具為圖標(biāo)添加顏色漸變，通過(guò)“不透明度”選項(xiàng)的設(shè)置調(diào)整圖標(biāo)不透明度。2.2.4任務(wù)實(shí)施任務(wù)2.3設(shè)計(jì)旅游類App線面圖標(biāo)任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施2.3.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制旅游類App標(biāo)簽欄中“攻略”圖標(biāo)，掌握線面圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.3.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App標(biāo)簽欄中的“攻略”圖標(biāo)進(jìn)行創(chuàng)意。圖形選用“星球”作為核心創(chuàng)作元素，形象地表達(dá)旅游攻略之意。點(diǎn)擊狀態(tài)采用生動(dòng)趣味、俏皮可愛(ài)的線面圖標(biāo)。未點(diǎn)擊狀態(tài)通過(guò)調(diào)整點(diǎn)擊狀態(tài)的線面圖標(biāo)，轉(zhuǎn)變?yōu)樾蜗蠛?jiǎn)潔、設(shè)計(jì)輕盈的線性圖標(biāo)。色彩選灰色和橙色兩種顏色，可以更好地區(qū)別不同的顯示狀態(tài)。同時(shí)橙色能夠體現(xiàn)旅游的歡快熱情，契合主題。2.3.3任務(wù)知識(shí)：Illustrator-屬性面板、擴(kuò)展外觀命令熟練掌握“屬性”面板調(diào)整基礎(chǔ)圖形，通過(guò)“擴(kuò)展外觀”命令變成真實(shí)圖像。2.3.4任務(wù)實(shí)施任務(wù)2.4項(xiàng)目演練——設(shè)計(jì)電商類App線性圖標(biāo)任務(wù)引入設(shè)計(jì)理念2.4.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制電商類App標(biāo)簽欄中的“購(gòu)物車”圖標(biāo)，掌握線性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.4.2設(shè)計(jì)理念使用“屬性”面板進(jìn)行調(diào)整使圖標(biāo)符合設(shè)計(jì)規(guī)范，擴(kuò)展外觀變成真實(shí)圖像。任務(wù)2.5項(xiàng)目演練——設(shè)計(jì)餐飲類App面性圖標(biāo)任務(wù)引入設(shè)計(jì)理念2.5.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制餐飲類App標(biāo)簽欄中的“訂單”圖標(biāo)，掌握面性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。2.5.2設(shè)計(jì)理念使用“屬性”面板進(jìn)行調(diào)整使圖標(biāo)符合設(shè)計(jì)規(guī)范，擴(kuò)展外觀變成真實(shí)圖像。本章介紹：

本章對(duì)按鈕控件、選擇控件、加減控件、分段控件、頁(yè)面控件、反饋控件以及文本框控件等常用控件的基礎(chǔ)知識(shí)及設(shè)計(jì)規(guī)則進(jìn)行系統(tǒng)講解與實(shí)操。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)控件設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握繪制控件的規(guī)范和方法，為接下來(lái)的組件設(shè)計(jì)打下基礎(chǔ)。項(xiàng)目3制作獨(dú)特的控件—UI控件設(shè)計(jì)學(xué)習(xí)引導(dǎo)了解UI控件的基本概念明確UI控件的獲取方法了解UI控件的設(shè)計(jì)思路掌握UI控件的制作方法培養(yǎng)對(duì)UI控件的審美鑒賞能力培養(yǎng)對(duì)UI控件的設(shè)計(jì)創(chuàng)意能力任務(wù)3.1

設(shè)計(jì)旅游類App按鈕控件任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施3.1.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App按鈕控件，掌握按鈕控件的設(shè)計(jì)要點(diǎn)與制作方法。3.1.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App按鈕控件進(jìn)行創(chuàng)意。整體采用形象飽滿的面性按鈕，令整體視覺(jué)更加突出。橙色既能明確操作又能吸引用戶。3.1.3任務(wù)知識(shí)：圓角矩形工具、橫排文字工具熟練掌握“圓角矩形”工具、“橫排文字”工具的使用。3.1.4任務(wù)實(shí)施任務(wù)3.2設(shè)計(jì)旅游類App選擇控件任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施3.2.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App選擇控件，掌握按鈕控件的設(shè)計(jì)要點(diǎn)與制作方法。3.2.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App選擇控件進(jìn)行創(chuàng)意。圖形選用“對(duì)號(hào)”作為核心創(chuàng)作元素，形象地表達(dá)允許用戶選擇選項(xiàng)之意。整體設(shè)計(jì)符合預(yù)期、一目了然。橙色既能明確操作又能吸引用戶。3.2.3任務(wù)知識(shí)：變換命令熟練掌握“圓角矩形”工具，“橢圓”工具和“合并形狀”命令繪制基礎(chǔ)圖形，運(yùn)用“變換”命令將圖標(biāo)旋轉(zhuǎn)。3.2.4任務(wù)實(shí)施任務(wù)3.3設(shè)計(jì)旅游類App加減控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.3.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App加減控件，掌握加減控件的設(shè)計(jì)要點(diǎn)與制作方法。3.3.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App加減控件進(jìn)行創(chuàng)意。整體采用形象簡(jiǎn)潔、設(shè)計(jì)輕盈的線性圖標(biāo)，呈現(xiàn)出簡(jiǎn)潔高效、操作方便的視覺(jué)效果。圖標(biāo)選灰色和橙色兩種顏色，可以更好地區(qū)別不同的顯示狀態(tài)。同時(shí)橙色既能明確操作又能吸引用戶。3.3.3任務(wù)知識(shí)：置入嵌入對(duì)象命令通過(guò)“橫排文字”工具輸入文字，運(yùn)用“置入嵌入對(duì)象”命令置入圖標(biāo)，熟練掌握“直線”工具的使用。3.3.4任務(wù)實(shí)施任務(wù)3.4設(shè)計(jì)旅游類App分段控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.4.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App分段控件，掌握分段控件的設(shè)計(jì)要點(diǎn)與制作方法。3.4.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App分段控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出內(nèi)容豐富、選項(xiàng)同行的視覺(jué)效果。兩種文字大小，可以更好地區(qū)別當(dāng)前組與其他組。橙色既能明確操作又能強(qiáng)調(diào)當(dāng)前內(nèi)容。3.4.3任務(wù)知識(shí)熟練掌握“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制形狀，使用“橫排文字”工具輸入文字，使用“添加圖層蒙版”命令和“畫(huà)筆”工具修飾文字，使用“減去頂層形狀”命令修飾形狀。3.4.4任務(wù)實(shí)施任務(wù)3.5設(shè)計(jì)旅游類App頁(yè)面控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.5.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator繪制餐飲類App標(biāo)簽欄中的“訂單”圖標(biāo)，掌握面性圖標(biāo)的設(shè)計(jì)要點(diǎn)與制作方法。3.5.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App頁(yè)面控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出小巧便利、狀態(tài)明確的視覺(jué)效果。它以一系列線段的形式出現(xiàn)，表示可用頁(yè)面的打開(kāi)順序，其中實(shí)線表示當(dāng)前頁(yè)面。3.5.3任務(wù)知識(shí)：直線工具使用“直線”工具繪制形狀，運(yùn)用“置入嵌入對(duì)象”命令置入圖標(biāo)，通過(guò)“橫排文字”工具輸入文字。3.5.4任務(wù)實(shí)施任務(wù)3.6設(shè)計(jì)旅游類App反饋控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.6.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App反饋控件，掌握反饋控件的設(shè)計(jì)要點(diǎn)與制作方法。3.6.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App反饋控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出吸引用戶、狀態(tài)明確的視覺(jué)效果。紅色既能吸引消費(fèi)者的注意又能重點(diǎn)強(qiáng)調(diào)內(nèi)容。3.6.3任務(wù)知識(shí)：橢圓工具使用“橢圓”工具繪制形狀，使用“橫排文字”工具輸入文字。3.6.4任務(wù)實(shí)施任務(wù)3.7設(shè)計(jì)旅游類App文本框控件任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施3.7.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App文本框控件，掌握文本框控件的設(shè)計(jì)要點(diǎn)與制作方法。3.7.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App文本框控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出編輯文本、操作高效的視覺(jué)效果。線性文本框的弱化有助于簡(jiǎn)化布局。3.7.3任務(wù)知識(shí)：字符面板使用“橫排文字”工具輸入文字，使用字符面板調(diào)整文字間距及位置，使用“直線”工具繪制形狀。3.7.4任務(wù)實(shí)施任務(wù)3.8項(xiàng)目演練-設(shè)計(jì)電商類App文本框控件任務(wù)引入設(shè)計(jì)理念3.8.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制電商類App文本框控件，掌握文本框控件的設(shè)計(jì)要點(diǎn)與制作方法。3.8.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞電商類App文本框控件進(jìn)行創(chuàng)意。整體呈現(xiàn)出編輯文本、操作高效的視覺(jué)效果。線性文本框的弱化有助于簡(jiǎn)化布局。任務(wù)3.9項(xiàng)目演練-設(shè)計(jì)餐飲類App按鈕控件任務(wù)引入設(shè)計(jì)理念3.9.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制餐飲類App按鈕控件，掌握按鈕控件的設(shè)計(jì)要點(diǎn)與制作方法。3.9.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞餐飲類App按鈕控件進(jìn)行創(chuàng)意。圖標(biāo)選灰色和橙色兩種顏色，可以更好地區(qū)別不同的層級(jí)關(guān)系。同時(shí)橙色既能明確操作又能吸引用戶。本章介紹：

本章對(duì)導(dǎo)航欄、標(biāo)簽欄、金剛區(qū)件以及瓷片區(qū)等常用組件的基礎(chǔ)知識(shí)及設(shè)計(jì)規(guī)則進(jìn)行系統(tǒng)講解與實(shí)操。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)組件設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握繪制租件的規(guī)范和方法，為接下來(lái)的界面設(shè)計(jì)打下基礎(chǔ)。項(xiàng)目4搭建豐富的組件—UI組件設(shè)計(jì)學(xué)習(xí)引導(dǎo)了解UI控件的基本概念明確UI控件的獲取方法掌握各種組件的設(shè)計(jì)思路掌握各種組件的制作方法培養(yǎng)對(duì)組件的審美鑒賞能力培養(yǎng)對(duì)組件的設(shè)計(jì)創(chuàng)意能力任務(wù)4.1設(shè)計(jì)旅游類App導(dǎo)航欄任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施4.1.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App導(dǎo)航欄，掌握導(dǎo)航欄的設(shè)計(jì)要點(diǎn)與制作方法。4.1.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App導(dǎo)航欄進(jìn)行創(chuàng)意。整體設(shè)計(jì)具有持久顯示、指導(dǎo)用戶的特點(diǎn)。適用于界面復(fù)雜或是需要烘托氛圍的界面中。4.1.3任務(wù)知識(shí)：屬性面板使用“圓角矩形”工具繪制形狀，使用“屬性”面板制作彌散投影，使用“置入嵌入對(duì)象”命令置入圖標(biāo)，使用“橫排文字”工具輸入文字。4.1.4任務(wù)實(shí)施任務(wù)4.2設(shè)計(jì)旅游類App標(biāo)簽欄任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施4.2.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator和Photoshop繪制旅游類App標(biāo)簽欄，掌握標(biāo)簽欄的設(shè)計(jì)要點(diǎn)與制作方法。4.2.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App標(biāo)簽欄進(jìn)行創(chuàng)意。整體設(shè)計(jì)以圖標(biāo)+文字的方式進(jìn)行展示，擁有較高的識(shí)別度，具有操作靈活、指導(dǎo)用戶的特點(diǎn)。白色的背景樣式，使背景與標(biāo)簽欄區(qū)分明顯。線性（未選中狀態(tài)）-線面（選中狀態(tài)），這種方式下的切換狀態(tài)活潑趣味，使整體趨于年輕化。4.2.3任務(wù)知識(shí)在Illustrator軟件中，使用“矩形”工具繪制形狀，使用“鋼筆”工具添加錨點(diǎn)，使用“直接選擇”工具調(diào)整錨點(diǎn)到適當(dāng)?shù)奈恢貌⒅谱鲌A角效果。在Photoshop軟件中，使用“矩形”工具和“屬性”面板確定參考線位置，使用“置入嵌入對(duì)象”命令置入圖標(biāo)，使用“橫排文字”工具輸入文字。4.2.4任務(wù)實(shí)施任務(wù)4.3設(shè)計(jì)旅游類App金剛區(qū)任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施4.3.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App金剛區(qū)，掌握金剛區(qū)的設(shè)計(jì)要點(diǎn)與制作方法。4.3.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App金剛區(qū)進(jìn)行創(chuàng)意。整體設(shè)計(jì)以圖標(biāo)+文字的方式進(jìn)行展示，擁有著設(shè)計(jì)細(xì)節(jié)豐富，富有創(chuàng)意等優(yōu)勢(shì)。具有展現(xiàn)豐富、設(shè)計(jì)精美的特點(diǎn)。不同的圖標(biāo)顏色，表達(dá)了不一樣的色彩情緒。4.3.3任務(wù)知識(shí)：直接選擇工具、漸變疊加命令使用“矩形”工具和“屬性”面板確定參考線位置，使用“圓角矩形”工具和“橢圓”工具繪制圖標(biāo)，使用“直接選擇”工具調(diào)整圖標(biāo)，使用“漸變疊加”命令添加效果，使用“置入嵌入對(duì)象”命令置入網(wǎng)格系統(tǒng)從而調(diào)整圖標(biāo)，使用“橫排文字”工具輸入文字。4.3.4任務(wù)實(shí)施任務(wù)4.4設(shè)計(jì)旅游類App瓷片區(qū)任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施4.4.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop繪制旅游類App瓷片區(qū)，掌握瓷片區(qū)的設(shè)計(jì)要點(diǎn)與制作方法。4.4.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App瓷片區(qū)進(jìn)行創(chuàng)意。整體設(shè)計(jì)以實(shí)物圖片的方式進(jìn)行展示，擁有著高識(shí)別、代入感強(qiáng)、可復(fù)用，設(shè)計(jì)效率較高等優(yōu)勢(shì)。靈活布局具有區(qū)分主次的特點(diǎn)。4.4.3任務(wù)知識(shí)：剪貼蒙版命令、顏色疊加命令使用“圓角矩形”工具、“矩形”工具和“橢圓”工具繪制形狀，使用“置入嵌入對(duì)象”命令置入圖片和圖標(biāo)，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域，使用“漸變疊加”命令和“顏色疊加”命令添加效果，使用“橫排文字”工具輸入文字。4.4.4任務(wù)實(shí)施任務(wù)4.5項(xiàng)目演練-設(shè)計(jì)電商類App標(biāo)簽欄任務(wù)引入設(shè)計(jì)理念4.5.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator和Photoshop繪制電商類App標(biāo)簽欄，掌握標(biāo)簽欄的設(shè)計(jì)要點(diǎn)與制作方法。4.5.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞電商類App標(biāo)簽欄進(jìn)行創(chuàng)意。整體設(shè)計(jì)以圖標(biāo)+文字的方式進(jìn)行展示，擁有較高的識(shí)別度，具有操作靈活、指導(dǎo)用戶的特點(diǎn)。白色的背景樣式，使背景與標(biāo)簽欄區(qū)分明顯。線性（未選中狀態(tài)）-線性（選中狀態(tài)），這種方式下的切換狀態(tài)精致簡(jiǎn)潔，使整體適用于電商類產(chǎn)品。任務(wù)4.6項(xiàng)目演練-設(shè)計(jì)餐飲類App標(biāo)簽欄任務(wù)引入設(shè)計(jì)理念4.6.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Illustrator和Photoshop繪制餐飲類App標(biāo)簽欄，掌握標(biāo)簽欄的設(shè)計(jì)要點(diǎn)與制作方法。4.6.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞餐飲類App標(biāo)簽欄進(jìn)行創(chuàng)意。整體設(shè)計(jì)以圖標(biāo)+文字的方式進(jìn)行展示，擁有較高的識(shí)別度，具有操作靈活、指導(dǎo)用戶的特點(diǎn)。白色的背景樣式，使背景與標(biāo)簽欄區(qū)分明顯。面性（未選中狀態(tài)）-面性（選中狀態(tài)），這種方式下的切換狀態(tài)安全厚重，使整體適用于餐飲類產(chǎn)品。本章介紹：

本章對(duì)閃屏頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、個(gè)人中心頁(yè)、詳情頁(yè)以及注冊(cè)登錄頁(yè)等常用頁(yè)面的基礎(chǔ)知識(shí)及繪制方法進(jìn)行系統(tǒng)講解與演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)UI頁(yè)面設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，并快速掌握繪制UI中常用頁(yè)面的規(guī)范和方法。項(xiàng)目5打造生動(dòng)的頁(yè)面—UI頁(yè)面設(shè)計(jì)學(xué)習(xí)引導(dǎo)掌握UI頁(yè)面的設(shè)計(jì)規(guī)則掌握UI頁(yè)面的核心模塊了解UI頁(yè)面的設(shè)計(jì)思路掌握UI頁(yè)面的制作方法培養(yǎng)對(duì)UI頁(yè)面的審美鑒賞能力培養(yǎng)對(duì)UI頁(yè)面的設(shè)計(jì)創(chuàng)意能力任務(wù)5.1

設(shè)計(jì)旅游類App閃屏頁(yè)任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施5.1.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop設(shè)計(jì)旅游類App閃屏頁(yè)，掌握閃屏頁(yè)的設(shè)計(jì)要點(diǎn)與制作方法。5.1.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App閃屏頁(yè)進(jìn)行創(chuàng)意。整體設(shè)計(jì)具有突出產(chǎn)品、展示營(yíng)銷的作用。以實(shí)際圖片作為背景，能夠增強(qiáng)用戶對(duì)產(chǎn)品的期待?！爱a(chǎn)品logo+產(chǎn)品名稱+產(chǎn)品”的簡(jiǎn)潔化設(shè)計(jì)形式，使視覺(jué)更加舒適，突出重點(diǎn)。5.1.3任務(wù)知識(shí)使用“置入嵌入對(duì)象”命令置入圖像，使用“顏色疊加”命令添加效果。5.1.4任務(wù)實(shí)施任務(wù)5.2設(shè)計(jì)旅游類App引導(dǎo)頁(yè)任務(wù)引入任務(wù)知識(shí)設(shè)計(jì)理念任務(wù)實(shí)施5.2.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop設(shè)計(jì)旅游類App引導(dǎo)頁(yè)，掌握引導(dǎo)頁(yè)的設(shè)計(jì)要點(diǎn)與制作方法。5.2.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞旅游類App引導(dǎo)頁(yè)進(jìn)行創(chuàng)意。整體設(shè)計(jì)具有操作引導(dǎo)、講解功能的作用。背景采用了與旅游類相關(guān)的風(fēng)景圖片，符合旅游類APP的品牌調(diào)性，同時(shí)能夠增強(qiáng)用戶對(duì)產(chǎn)品的期待，讓用戶更了解這款A(yù)PP的情懷。視覺(jué)表現(xiàn)應(yīng)與任務(wù)5.1的設(shè)計(jì)風(fēng)格保持一致。5.2.3任務(wù)知識(shí)使用“置入嵌入對(duì)象”命令置入圖像和圖標(biāo)，使用“漸變疊加”命令和“顏色疊加”命令添加效果，使用“橫排文字”工具輸入文字。5.2.4任務(wù)實(shí)施任務(wù)5.3設(shè)計(jì)旅游類App首頁(yè)任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施5.3.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop設(shè)計(jì)旅游類App首頁(yè)，掌握首頁(yè)的設(shè)計(jì)要點(diǎn)與制作方法。5.3.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞主題旅游進(jìn)行創(chuàng)意。背景為純色和風(fēng)景圖片作為襯托。多種色彩呈現(xiàn)了豐富的設(shè)計(jì)形式。字體選用蘋(píng)方和方正蘭亭大黑起到了呼應(yīng)主題的作用。頁(yè)面是由搜索欄、Banner、金剛區(qū)、瓷片區(qū)以及標(biāo)簽欄等組成的綜合性頁(yè)面，能夠滿足用戶的多種需求。視覺(jué)表現(xiàn)應(yīng)與任務(wù)5.1的設(shè)計(jì)風(fēng)格保持一致。整體設(shè)計(jì)充滿特色，契合主題。5.3.3任務(wù)知識(shí)使用“圓角矩形”工具、“矩形”工具和“橢圓”工具繪制形狀，使用“置入嵌入對(duì)象”命令置入圖片和圖標(biāo)，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域，使用“漸變疊加”命令添加效果，使用“屬性”面板制作彌散投影，使用“橫排文字”工具輸入文字。5.3.4任務(wù)實(shí)施任務(wù)5.4設(shè)計(jì)旅游類App個(gè)人中心頁(yè)任務(wù)引入設(shè)計(jì)理念任務(wù)知識(shí)任務(wù)實(shí)施5.4.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop設(shè)計(jì)旅游類App個(gè)人中心頁(yè)，掌握個(gè)人中心頁(yè)的設(shè)計(jì)要點(diǎn)與制作方法。5.4.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞主題旅游進(jìn)行創(chuàng)意。背景為純色和風(fēng)景圖片作為襯托。色彩選取橘黃色、深黃色和淺灰色分別體現(xiàn)了歡快、熱情和柔和。字體選用蘋(píng)方符合設(shè)計(jì)規(guī)范。視覺(jué)表現(xiàn)應(yīng)與任務(wù)5.1的設(shè)計(jì)風(fēng)格保持一致。整體設(shè)計(jì)充滿特色，契合主題。5.4.3任務(wù)知識(shí)使用“圓角矩形”工具、“矩形”工具、“橢圓”工具和“直線”工具繪制形狀，使用“置入嵌入對(duì)象”命令置入圖片和圖標(biāo)，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域，使用“漸變疊加”命令添加效果，使用“屬性”面板制作彌散投影，使用“橫排文字”工具輸入文字。5.4.4任務(wù)實(shí)施任務(wù)5.5項(xiàng)目演練-設(shè)計(jì)旅游類App詳情頁(yè)任務(wù)引入設(shè)計(jì)理念5.5.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop設(shè)計(jì)旅游類App詳情頁(yè)，掌握詳情頁(yè)的設(shè)計(jì)要點(diǎn)與制作方法。5.5.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞主題旅游進(jìn)行創(chuàng)意。背景為純色和風(fēng)景圖片作為襯托。色彩選取橘黃色、深黃色和淺灰色分別體現(xiàn)了歡快、熱情和柔和。字體選用蘋(píng)方符合設(shè)計(jì)規(guī)范。視覺(jué)表現(xiàn)應(yīng)與任務(wù)5.1的設(shè)計(jì)風(fēng)格保持一致。整體設(shè)計(jì)充滿特色，契合主題。任務(wù)5.6項(xiàng)目演練-設(shè)計(jì)旅游類App注冊(cè)登錄頁(yè)任務(wù)引入設(shè)計(jì)理念5.6.1任務(wù)引入本任務(wù)通過(guò)學(xué)習(xí)使用軟件Photoshop設(shè)計(jì)旅游類App注冊(cè)登錄頁(yè)，掌握注冊(cè)登錄頁(yè)的設(shè)計(jì)要點(diǎn)與制作方法。5.6.2設(shè)計(jì)理念在設(shè)計(jì)過(guò)程中，圍繞主題旅游進(jìn)行創(chuàng)意。整體設(shè)計(jì)具有清晰的操作流程。以實(shí)際圖片作為背景，能夠增強(qiáng)用戶對(duì)產(chǎn)品的期待。色彩選用橙色能夠體現(xiàn)旅游的歡快熱情并突出重點(diǎn)。字體選用蘋(píng)方符合設(shè)計(jì)規(guī)范。視覺(jué)表現(xiàn)應(yīng)與任務(wù)5.1的設(shè)計(jì)風(fēng)格保持一致。任務(wù)5.7項(xiàng)目演練-設(shè)計(jì)電商類App頁(yè)面任務(wù)引入設(shè)計(jì)理念5.7.1任務(wù)引入