9 欢迎界面设计.pptx

UI界面设计与制作教程;项目引导

同学A：你知道怎么制作一个带有梦幻风格的欢迎界面么？就是那种小清新，有点模糊地感觉的那种样式。

同学B：这个可以在ps中做出来的，运用滤镜这个功能可以实现哦。

同学A：那你能教我么？

同学B：可以的呀，只不过光会使用这个功能不够哦，你还得知道如何设计界面，那个界面中包含哪些内容，你想要设计成什么样的效果等等，只有把这些搞清楚了，再来使用ps绘制，那就相当快啦。

同学A：哦，那你的意思是，我需要先设计出欢迎界面，然后再使用ps完成界面绘制，对吗？

同学B：嗯，是的，先要知道如何设计界面，然后再学会使用软件实现设计效果。

同学A：哦，原来是这样，那我还是好好学习下欢迎界面设计的全过程吧。;任务1欢迎界面设计理论知识;4.1.2欢迎界面设计原则

欢迎界面是APP应用与用户进行亲密接触的第一步，因此在设计欢迎界面的时候应该遵循一定原则。

1、以人为本的原则

2、简洁清晰的原则

3、美观大方的原则

4、把握用户心理的原则

5、启动时间和运动速度的原则;任务2淡雅风格欢迎界面设计

4.2.1淡雅风格欢迎界面设计要点

淡雅风格的欢迎界面通常是为了满足软件专业化、标准化的需求而产生的，在淡雅风格的欢迎界面设计过程中，为了界面的精致、美观和个性化，常常会在界面中添加许多渐变、高光和阴影等效果，这些效果的添加使得应用的欢迎界面显得清新淡雅。;4.2.2淡雅风格欢迎界面制作

1、制作要点：淡雅风格欢迎界面

2、使用工具：ps中的渐变、投影、颜色叠加、图层叠加、描边等。

3、效果图如下：;4、制作步骤

（1）新建画布，尺寸以Iphone6的屏幕为标准，750x1334像素，分辨率为300，颜色模式为RGB，背景为透明。;（2）新建图层，命名为屏幕背景，打开图层样式，设置图层效果。点击渐变叠加，（如图5）其中渐变颜色设置值如下：深色R：227，G:98，B:95；浅色R:243,G:199,B:161，其他设置值如图所示。然后点击内阴影，设置值如图6所示。设置完成之后的效果如图7所示。;（3）新建图层，命名为状态栏，选择矩形选框工具，设置选框样式为固定大小，宽度750像素，高度为40像素，然后创建状态栏的矩形选框。如图8所示。;（5）拖入状态栏的元素，根据屏幕状态栏的位置和尺寸，调整好状态栏元素大小。（如图10）;（6）拖入LOGO图形，调整其在屏幕中的位置。（如图11）然后打开该图层样式，设置图层效果，一共添加3个效果，分别是描边（如图12）、渐变叠加（如图13）、投影（如图14）。其中渐变叠加值设置如下：深色R:50，G:60，B:70；浅色R:255，G:255，B:255。另外，为了图像的美观，设置该图层透明度为50，设置完成之后的效果如图15所示。;（7）拖入LOGO文字元素，按照上面的步骤，设置该图层样式，一共添加3个效果，分别是描边（如图16）、渐变叠加（如图17）、投影（如图18）。最终效果如图19所示。;（8）最后，调整所有图层的位置、大小，以达到美观的效果。另外，为了使整个画面看起来协调一致，更加淡雅，特将状态栏图层隐藏，效果如图20。;（9）最终效果如图21。;谢谢