第7章APP图片效果设计

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.主题元素：任务分析引导页的主题元素往往起到告知用