UI设计,ps入门教程:一起来给扁平化按钮加细节!

2017-04-25

在设计的工作中,很多时候会听到老师、资深设计师或客户说,这设计稿感觉很粗糙,这设计稿感觉不够高大上,这设计稿没有细节!往往这时新手设计师是不知道怎么在原有的设计稿上进行修改的,加多了怕画蛇添足,不加又没有细节,那么细节是什么呢?我们可以做哪些地方的调整,在哪些地方给细节呢,这篇文章会教你从重点入手,对app页面进行细节的把控处理。



先说下设计细节具体是什么。其实这是一个很模糊的概念,一个好的设计肯定是有细节的,这个细节除了基本的对齐、一致、每个像素的划分、页面的工整,还有图标的一致性、页面用色是否和谐、前后关系层次的区分、重点的突出、纹理的搭配得当,光源的合理、页面整体的协调等等等等这些都是细节的范畴,也就是说,一个页面,当这些都及格了,加上重点元素细节的刻画,作品的分数一定不会差。



那么大家在刻画细节之前,一定要思考,什么地方应该加细节什么地方应该去弱化。什么地方该强调?最强调的地方一定是这个页面焦点,那么我们就应该在这个地方去增添一些细节,通过一些有趣的元素,颜色,块面来引导视觉的投向。



通常在ui界面里,眼部热区首先是banner图,通过优质的图片和广告语去吸引用户的关注,但是我们应该知道ui界面和传统的平面比,不仅仅只是推广宣传,ui界面是有交互的!一个页面除了给用户看的banner、图标、列表、数据,更重要的是按钮。按钮承载了这个app的交互行为引导,或跳转或切换,它都理应属于这个页面的重点,那么在如今扁平化盛行的页面里,我们应该怎么去增加按钮的细节呢?首先请大家一定要戒骄戒躁,很多新人设计师会说,现在的app按钮不就是拉一个矩形框或者一个圆吗,或者在ai画一些符合app气质的icon拖到页面用就可以了,错,一个简单的矩形按钮我们也是可以给它添加细节的。那接下来就以一个具体的案例去具体讲述下什么是设计的细节,以及在设计的过程中如何去把设计的细节做好。



那么我们先来看一个页面:这个页面的排版已经非常规范了,文字的对齐和层级关系都做的不错,页面的引导方向也很明确,设计师在简洁的页面上通过用大面积的绿色来吸引用户去点击“Message”这个按钮,这是一个简单的圆角矩形,我们可以给这个设计框加一点修饰,让它看起来更加丰富有趣.



图片1


1.png

下面我们来给按钮加上一些细节来看看效果

 

方案A:


找到“圆角矩形”按钮,找到这个图层:鼠标右键-图层样式-投影。

为了增强投影的细腻感,这里“距离”和“大小”给的非常小,不透明度降低,微弱投影。



图片2


2.png

“方案A”属于最常见的投影样式,我们在有图标和列表的App页面经常可以看到。接下来我们来看看“方案B”,今年最夯的弥漫式投影。它的特点是通透性强,让页面更富有空间感,但是值得注意的是此类投影不宜贯穿整个App页面使用,否则会让人感觉非常“腻”。

 


方案B: (有很多种做法,这里介绍两种;我比较懒,常用用法一)



用法一:


找到“圆角矩形”按钮,找到这个图层:鼠标右键-图层样式-投影。

所谓的“弥漫式”其实就是投影面积非常大,在这里“距离”和“大小”都给的比较大;为增强投影的融入感,颜色选用了相似的绿色来作环境色。



图片3

3.png

蓝桥UI设计培训成就您的互联网之路!

上一篇:PS入门教程--拟物立体卡通形象设计教程

下一篇:PS入门—底部导航PS设计指南