1、第7章 APP圖片效果設計 圖片效果設計技巧 音樂播放界面設計 UI APP引導頁設計2 2 熟悉圖片效果的設計技巧，能夠制作效果精美的圖片。 掌握不同APP界面設計技巧，能夠保證界面和圖片風格上的統一。學習目標 目錄【任務15】：音樂播放界面設計7.27.2【任務16】:APP引導頁設計7.37.37.17.1圖片效果設計技巧 本章將通過“音樂播放界面設計”、“登錄界面設計”兩個案例，詳細講解APP中圖片效果設計技巧。章節概要在APP界面設計中，對圖片進行設計處理，可以使圖片的色彩、形狀、風格保持統一，呈現出更絢麗的效果。5 5 7.1 圖片效果設計技巧在進行圖片效果處理時，掌握常用的設計技

2、巧有助于提高工作效率，準確高效的完成工作任務。在APP界面設計中，常用的圖像處理效果包括鏡面效果、倒影效果、折角效果、邊框效果、毛玻璃效果等具體介紹如下。6 6 1、鏡面效果7.1 圖片效果設計技巧鏡面效果是在圖片上加上一層白色到透明色線性漸變的半透明圖形，使圖片呈現猶如鏡子反光一樣的效果。鏡面效果可以使圖片更具有質感。7 7 2、倒影效果7.1 圖片效果設計技巧倒影效果是在圖片的對立面制作一個和圖片本身對稱的半透明影像，添加倒影效果可以讓圖片更具有空間感。8 8 3、折角效果7.1 圖片效果設計技巧折角效果是將圖片的邊角通過形狀、色彩以及簡單的光影變化制作出的效果。添加折角效果可以讓圖片具有

3、立體感。9 9 4、邊框效果7.1 圖片效果設計技巧邊框效果是指在圖片四周添加一些淺色線條或陰影，使圖片更加突出，讓界面排列變得整齊、精美富有個性和藝術。1010 5、毛玻璃效果7.1 圖片效果設計技巧毛玻璃效果是指將背景進行模糊處理，從而和前面的內容形成對比反差的一種效果1111 7.2 【任務15】：音樂播放界面設計現如今音樂APP軟件已逐漸成為人們聽音樂的主要平臺。通過音樂APP軟件，可以隨時隨地讓用戶盡享音樂所帶來的無窮魅力。然而隨著音樂APP軟件的增多，其市場競爭越來越激烈，軟件開發者也更加注重友好美觀的界面設計，以此來吸引更多的用戶。1212 7.2 【任務15】：音樂播放界面設計

4、本次任務是依據iPhone 7界面的分辨率設計一個音樂播放界面，要求界面具備播放、切換歌曲等基本功能，通過新穎的設計形式、簡單清新的設計風格來傳遞音樂氛圍。最終效果任務描述通過本任務的學習，讀者可以掌握毛玻璃圖片效果以及音樂播放界面的基本設計技巧。1313 7.2 【任務15】：音樂播放界面設計1.設計尺寸和風格：根據任務描述，本次任務可以采用iPhone 7界面的分辨率（7501334像素）進行設計。界面可以采用iOS扁平化的設計風格。任務分析1414 7.2 【任務15】：音樂播放界面設計2.界面功能模塊：任務分析1）狀態欄：一般不需繪制，運用現有素材即可。2）播放界面：通常音樂播放界面主

5、要包括背景、播放進度、播放模式、播放控制按鈕以及底部的標簽式導航。3）背景：可以運用處理成毛玻璃效果的圖片作為背景。4）播放進度：可以設計為鐘表指針的模式，用色彩表示已播放部分，用黑白表示未播放部分。1515 7.2 【任務15】：音樂播放界面設計2.界面功能模塊：任務分析5）播放模式、播放控制按鈕：可以將圖標設計為簡單的線條圖形，同時在設計中要注意圖標的尺寸。本任務以iPhone7界面中工具圖標尺寸4444像素作為音樂界面圖標的基本尺寸。6）標簽式導航：為了統一設計風格，底部的標簽式導航同樣可以延續線條圖形的設計樣式。在iPhone7界面中，標簽欄中導航的圖標大小為5050像素。1616 7

6、.2 【任務15】：音樂播放界面設計1717 7.3 【任務16】:APP引導頁設計當第一次打開一款APP的時候常常會看到設計精美的引導頁。在APP頁面中，引導頁是指用戶使用APP產品時，能提前告知用戶產品功能、特點與熱門資訊的頁面。在APP設計中，一個精美的引導頁能夠極大地提高用戶體驗。1818 7.3 【任務16】:APP引導頁設計本次任務是依據iPhone 7界面的分辨率設計一個音樂播放的引導界面，要求引導頁能夠傳遞音樂下載、好友K歌、消息發送、音樂收藏等APP功能，界面設計簡潔新穎、能夠直接有效的傳遞信息。最終效果任務描述通過本任務的學習，讀者可以掌握引導頁的設計技巧。1919 7.3 【任務16】:APP引導頁設計1.設計尺寸和風格：本次任務同樣采用7501334像素的界面尺寸以及iOS扁平化的設計風格進行設計。任務分析2020 7.3 【任務16】:APP引導頁設計2.界面背景：任務分析可以采用毛玻璃效果的圖片作為界面的背景。同時可以將界面背景的色調設置為紫色，突出音樂的優雅和神秘。2121 7.3 【任務16】:APP引導頁設計3.主題元素：任務分析引導頁的主題元素往往起到告知用