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

本章介紹：

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

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

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

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

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

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

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

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

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

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