丝路旗下全国CG人才培养基地【股票代码:300556】

  • 24小时免费客服热线
  • 025-6965-8961

当前位置:图文教程>UI设计>移动UI>正文

移动UI设计样式效果-移动UI设计必备的7种样式效果

2017-12-13 10:16 来源: 丝路设计培训 分类: 移动UI
176 作者:移动UI设计样式效

[导读] 随着互联网时代的到来,人们接触到的电子软件越来越多,而支撑这些软件展示的正是UI。读者可通过本书由浅入深地学习UI设计的各类知识,制作出美观且易于操作的UI。 移动UI设计就

随着互联网时代的到来,人们接触到的电子软件越来越多,而支撑这些软件展示的正是UI。读者可通过本书由浅入深地学习UI设计的各类知识,制作出美观且易于操作的UI。

移动UI设计就是将移动通信和UI设计合二为一,结为一体。一个好的移动UI设计不仅能让软件变得有个性、有品位,还能让软件的操作变得舒适、简单、自由,并能充分体现出软件的定位和特点。

 

1.JPEG

 

常用的移动端用户界面

 

(一)移动UI设计的目的和重要性

移动UI设计的目的是让用户理解程序的用途,并快速地操作程序。外观和视觉感不是界面设计的主要目的,界面的主要目的是沟通,通过沟通让用户理解界面程序。

移动UI设计包括美化和交互两个方面。为了让读者直观地了解UI设计的重要性,下面用UI设计前和UI设计后的界面图进行对比分析。

 

2.JPEG

UI设计前                      UI设计后

 

移动UI设计前的界面没有明显的特点。

(1)界面过于简单,界面颜色单调,没有美感。

(2)“登录”按钮没有立体感,像阅读文字。

移动UI设计后的界面有了明显的特点呈现。

(1)界面内容丰富,具有时尚感和立体感。

(2)“登录”按钮使用了渐变效果,并增加其他选项。

(3)增加头像展示,添加其他的登录方式,使操作更方便。

设计后的界面更加舒适和美观,因此对于智能设备来说,移动UI的设计是非常重要的。

(二)必备的7种样式效果

“图层样式”也称“图层效果”,是制作纹理、质感和特效的关键,可以为图层中的图像添加投影、发光、浮雕、光泽、描边等效果,以创建出金属、玻璃、皮革以及具有立体感的特效,经常用于图标质感和界面效果表现上。

 

3.JPEG

 

添加“图层样式”可以采用以下3种方法。

第1种:执行“图层-图层样式”菜单下的子命令,弹出“图层样式”对话框,可以在该对话框中调整相应的参数。

4.JPEG

第2种:单击“图层”面板下的“ 添加图层样式”按钮,在弹出的菜单中选择一种样式即可打开“图层样式”对话框。

5.JPEG

第3种:在“图层”中双击需要添加样式的图层,即可打开“图层样式”对话框,然后在对话框左侧选择需要添加的效果。

1、斜面与浮雕

使用“斜面与浮雕”样式可以为图层添加高光与阴影,使图像产生立体的浮雕效果。

2.斜面与浮雕的应用

执行“图层-图层样式-斜面与浮雕”菜单命令,在弹出的面板中设置参数,完成设置后图像即可添加浮雕效果。

 

 

 

6.JPEG

 

2、描边

“描边”样式可以使用颜色、渐变以及图案来绘制图像的轮廓边缘。

描边的应用

执行“图层>图层样式>描边”菜单命令,在弹出的面板中设置参数,完成设置后图像即可添加描边效果。

 

7.JPEG

 

 

3、内阴影

“内阴影”样式可以在紧靠图层内容的边缘内添加阴影,使图层内容产生凹陷效果。

内阴影的应用

执行“图层-图层样式-内阴影”菜单命令,在弹出的面板中设置参数,完成设置后图像即可添加内阴影效果。

 

8.JPEG

4、渐变叠加

“渐变叠加”样式可以在图层上叠加指定的渐变色。

颜色叠加的应用

执行“图层-图层样式-渐变叠加”菜单命令,在弹出的面板中设置参数,完成设置后图像即可添加渐变叠加效果。

 

10.JPEG

5、图案叠加

“图案叠加”样式可以在图层上叠加指定的图案,并且可以缩放图案、设置图案的不透明度和混合模式。

图案叠加的应用

执行“图层-图层样式-图案叠加” 菜单命令, 在弹出的面板中设置参数,完成设置后图像会替换成新的图案效果。

 

6、外发光

“外发光”样式可以沿图层的边缘向外创建发光效果。

外发光的应用

执行“图层-图层样式-外发光”菜单命令,在弹出的面板中设置参数,完成设置后图像即可添加外发光效果。

 

11.JPEG

 

 

7、投影

“投影”样式可以为图层添加投影效果,使其产生立体感。

投影的应用

执行“图层>图层样式>投影”菜单命令,在弹出的面板中设置参数,完成设置后图像即可添加投影效果。

12.JPEG

 

以上图文摘自《Photoshop 移动UI设计基础与案例教程》

 


版权声明:

本文由丝路设计培训学校的编辑人员所撰写,未经同意严禁转载,否则将严肃追究相关法律责任。文章原始链接:http://silucg.net/uijc/yidongui/article-288.html