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

本章介紹：

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

理解UI設計的基本概念任務引入任務知識任務實施1.1.1任務引入

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

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

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

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

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

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

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

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