移動(dòng)端UI設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)教程 項(xiàng)目三 APP啟動(dòng)頁(yè)、引導(dǎo)頁(yè)設(shè)計(jì)-任務(wù)二 引導(dǎo)頁(yè)設(shè)計(jì)

項(xiàng)目三APP啟動(dòng)頁(yè)、引導(dǎo)頁(yè)設(shè)計(jì)任務(wù)二引導(dǎo)頁(yè)設(shè)計(jì)任務(wù)說(shuō)明：

該任務(wù)主要針對(duì)APP啟動(dòng)頁(yè)、引導(dǎo)頁(yè)中的引導(dǎo)頁(yè)設(shè)計(jì)的內(nèi)容進(jìn)行講解，對(duì)引導(dǎo)頁(yè)的概念、引導(dǎo)頁(yè)的表現(xiàn)形式、色階曲線的應(yīng)用、色相飽和度、色彩平衡調(diào)整、漸變樣式與應(yīng)用等內(nèi)容進(jìn)行知識(shí)性的導(dǎo)入，并通過(guò)具體的任務(wù)實(shí)現(xiàn)過(guò)程進(jìn)行實(shí)操性演練。知識(shí)導(dǎo)入：1、引導(dǎo)頁(yè)的概念：

引導(dǎo)頁(yè)，顧名思義是用來(lái)引導(dǎo)用戶學(xué)習(xí)app用法或了解app的作用的頁(yè)面，其核心在于”引導(dǎo)“。比如，在功能引導(dǎo)頁(yè)和操作引導(dǎo)頁(yè)的設(shè)計(jì)上就需要考慮設(shè)計(jì)目的，是產(chǎn)品的功能需求還是頁(yè)面的樣式需求。知識(shí)導(dǎo)入：2、引導(dǎo)頁(yè)的表現(xiàn)形式：

引導(dǎo)頁(yè)的表現(xiàn)形式可以分為五種：功能產(chǎn)品展示法，文字與APP的UI界面相結(jié)合，文案與插圖組合相結(jié)合，APP上下滑動(dòng)與路線、軌跡相結(jié)合，APP動(dòng)態(tài)效果與音樂(lè)、視頻融合。2、引導(dǎo)頁(yè)的表現(xiàn)形式：（1）功能展示法：圖標(biāo)與重點(diǎn)文字相結(jié)合

圖標(biāo)與重點(diǎn)文字相結(jié)合2、引導(dǎo)頁(yè)的表現(xiàn)形式：（2）文字與APP的UI界面相結(jié)合

這種類型的引導(dǎo)頁(yè)是最常用的方式之一，簡(jiǎn)短的文字配上功能界面，主要運(yùn)用在功能介紹類和使用說(shuō)明類引導(dǎo)頁(yè)中。這種方式能較直接地傳達(dá)產(chǎn)品的信息，缺點(diǎn)是有點(diǎn)千篇一律。過(guò)于模式化。2、引導(dǎo)頁(yè)的表現(xiàn)形式：（3）文案與插圖組合相結(jié)合

該類型的引導(dǎo)頁(yè)是最常用的方式之一，插圖繪制得一般都比較具象，多以卡通人物、場(chǎng)景、照片等方式為主，用于表達(dá)文字內(nèi)容。由于其有強(qiáng)烈的視覺(jué)沖擊力，所以常被設(shè)計(jì)師采用。2、引導(dǎo)頁(yè)的表現(xiàn)形式：（4）APP上下滑動(dòng)與路線、軌跡相結(jié)合

這種類型的引導(dǎo)也多用于旅游類APP中使用。例如：馬蜂窩的旅游攻略APP。2、引導(dǎo)頁(yè)的表現(xiàn)形式：（5）APP動(dòng)態(tài)效果與音樂(lè)、視頻相融合

除了靜態(tài)的引導(dǎo)頁(yè)展示之外，也可以為引導(dǎo)頁(yè)設(shè)計(jì)動(dòng)圖，比如頁(yè)面間的切換，當(dāng)前頁(yè)面的動(dòng)態(tài)效果圖等。3、色階曲線的應(yīng)用：（1）色階

色階有輸入、輸出色階選項(xiàng)。有顏色通道，可以針對(duì)圖片分別對(duì)其中的RBG通道、紅色通道、綠色通道和藍(lán)色通道單獨(dú)調(diào)整。色階只與圖像的亮度有光，最亮的是白色，最暗的是黑色。色階調(diào)整的范圍在0—255之間，只能整體調(diào)整，不可以局部調(diào)整。它的快捷鍵是【Ctrl+M】。3、色階曲線的應(yīng)用：（2）曲線

曲線有輸入、輸出色階選項(xiàng)。有顏色通道，可以針對(duì)圖片分別對(duì)其中的RBG通道、紅色通道、綠色通道和藍(lán)色通道單獨(dú)調(diào)整。曲線則可以調(diào)整0—255范圍內(nèi)的某一段色階。單擊一次色階對(duì)話框上的曲線，可以增加曲線點(diǎn)，單擊兩次則是取消曲線點(diǎn)。通過(guò)調(diào)整曲線點(diǎn)，從而調(diào)整畫(huà)面的色階。曲線的快捷鍵是【Ctrl+L】。4、色相飽和度、色彩平衡調(diào)整：（1）色相飽和度：

色相：調(diào)整對(duì)應(yīng)角度值來(lái)改變色相，范圍在-180—180度之間，正好是360度，一個(gè)色環(huán)。

飽和度：調(diào)整色彩的鮮艷程度，范圍是-100—100之間，當(dāng)數(shù)值設(shè)置為-100時(shí)，為灰色，沒(méi)有飽和度，也就沒(méi)有色相了。

明度：調(diào)整亮度，范圍是-100—100之間，當(dāng)數(shù)值設(shè)置為100時(shí)，為白色。4、色相飽和度、色彩平衡調(diào)整：（1）色相飽和度：

4、色相飽和度、色彩平衡調(diào)整：（2）色彩平衡

色彩平衡是調(diào)色工具中比較重要的一個(gè)工具。通過(guò)對(duì)圖像的色彩平衡的調(diào)節(jié)，可以校正圖像的偏色、飽和度過(guò)度和飽和度不足的情況，也可以根據(jù)自己的喜好和需求，調(diào)整色彩平衡，以便達(dá)到更好的效果。色彩平衡的快捷鍵是【Ctrl+B】。4、色相飽和度、色彩平衡調(diào)整：（2）色彩平衡

5、漸變樣式與應(yīng)用：

在PS軟件中，漸變樣式主要是用來(lái)為圖像填充漸變色。使用這個(gè)工具可以創(chuàng)造出兩種以上的顏色的漸變效果。漸變方式既可以選定系統(tǒng)自帶的，也可以自