020-29815005
预约专线时间:09:00-23:59

【UI设计培训】:如何提升平面作品设计层次感?

新闻来源:本站 日期:2022-01-18
而什么是层次感?把画面中的各个元素合理的、清晰的、有节奏的组合在一起,使整个画面看起来更加的舒适、愉悦和协调。是不是感觉很深奥?好吧,换句简单的话来说就是——不多、不少,看起来舒服正好!优漫教育小编介绍的这篇文章分为2个章节,而每个章节都有若干细分的知…

  在我们做设计的时候,很多同学可能都会遇到一种情况,客户或需求方看完设计稿后一边摸着下巴一边说:“我总感觉少了点什么……你再改改。”或者说:“太平了”、“有点单调”其实这些都是缺乏层次的表现。


【UI设计培训】:如何提升平面作品设计层次感?


 而什么是层次感?


  把画面中的各个元素合理的、清晰的、有节奏的组合在一起,使整个画面看起来更加的舒适、愉悦和协调。是不是感觉很深奥?好吧,换句简单的话来说就是——不多、不少,看起来舒服正好!

  优漫教育小编介绍的这篇文章分为2个章节,而每个章节都有若干细分的知识点,希望能帮到大家!

  一.画面的层次

 1.使用点、线、面来分割画面

  点、线、面是设计中最基本的设计元素,学过平面构成的同学应该都有些了解,连点成线、连线成面、而面缩小到一定程度就是点。而面的边界就是线,线的宽度增加和点扩散到一定的面积也就成为面。

  我们下面来举个例子。

  上图就基本可以把点、线、面的所有变化全部概括。下面我们来分析一下。

  红圈里的十字元素可以看作为“点”做为整体画面中的装饰元素出现。要注意的是所谓的“点”并不只是圆形的哦。任何在画面中尺寸和面积相对最小的元素都可以看做成“点”。而画面中的小圆点既可以看做“点”,也可以看作“面”。所以连点成面也是没错的。

  黄色圈里的线大家认为是什么?我认为它并不是线而是点。为什么呢?因为无论从它在画面中的占比还是所起到的作用来看,它都属于点的属性。而线在哪?在绿色块和红色块的交界处。还有色块的边界处。而这正说明了“线”的一个重要的用途——分割。画面中的“线”把整个画面分割成了4个大小不一的区域,这种分割让画面更加有趣味性也更加有层次感。

  而线分割出来的4个区域也就是元素“面”。

  这个图例不仅说明了点线面的几个重要的特征,也证明了点线面并不会因为它的形状而固定的,而是会不断变化的。

  最后总结一下点线面的一些特点:

  点:是最有装饰性的元素,因此大多情况下在画面中起到装饰作用。线:除了装饰作用外还起到对画面的分割、元素的穿插和对视觉引导的作用。面:往往起到稳定画面和承载重要信息的作用。

  另外要注意的是:点线面是组合使用的,想想看没有面的衬托又怎么能显示出点和线的特征呢?

  通过这些设计案例我们可以分析并总结出,有效的利用点线面的组合可设计出层次丰富的作品。而我们要如何做呢?——置换临摹。借鉴好的设计作品的点线面的构成元素再加以利用和创新。

  2.留白

  留白是我们设计中很常用的手法,留白除了让画面整洁、干净和透气外,更是对“面”的更深刻的理解和使用。现在用的非常广泛的极简设计就是在留白的处理上用的比较好的一种设计类型。

  我们这里再说一下留白对层次的影响,先看几个设计案例。

  上面的几个设计作品的共同特点就是有大量的设计留白,并且在留白的同时对画面的层次进行了处理,例如留白与主图之间的大小对比,标题与补充性文字之间的对比。

  将上图分成背景层,留白层,主体模特层,标题文案层和功能文案层。从这里我们就能看出这幅设计的层次是如何设计的了。大家也不妨把自己喜欢的设计这样分层解构,来研究一下设计的层次。

 3.在摄影中找层次

  现在的设计中,摄影图片的使用也是越来越多了,尤其是质量高的摄影作品往往能最大限度的提高设计的品质。但是这是为什么大家想过吗?其中一个原因是摄影中也存在着层次。

  这个耳机大家熟悉吧,这就是用摄影的方式来做的,并且其中近景、中景、远景三个层次全都有。不仅看起来画面非常细腻丰富,而且也品质感十足。

  但是如果图片层次少怎么办?很简单,我们可以使用文字来做为图案元素来增加画面层次。

 二.色彩的层次

 1.颜色的对比

  使用对比色和反差大的颜色来设计也是增加层次感的一个常用方法,因为有非常强烈的颜色对比,画面的冲击力会非常强烈,给人们的视觉观感也会更加刺激。

  黑黄对比是非常经典配色方案,虽然只有两个颜色,但是通过画面中的文案和图片的组合也会显得非常丰富,在这种极简的配色中更加需要对点线面的合理运用,否则会显得有些单调。

  从上面的设计来看,设计师在用黑黄配色的时候又用了黄色的对比色——蓝色,这样既可以让画面的颜色更加丰富不会单调,又会让画面中的一些重要元素凸显出来,起到强调作用。

  黄蓝配色和红绿配色也是经常用到的经典配色,上面两个案例可以看到,黄蓝配色多用饱和度比较高,这样显得年轻时尚有科技感,而另一个设计是红绿蓝的配色,饱和度较低,显得更加复古和深沉。

 2.渐变色的流行

  渐变色已经流行了几年,今年淘宝的手机app也是以渐变色来设计的,可见渐变色的使用范围也是越来越大了。而渐变色本身就具有层次丰富的特点,因此,使用渐变色加上合理的点线面元素的搭配会在具有冲击力的同时最大限度的丰富画面的层次。

  在我们日常的设计中渐变色的使用还是需要更加精心的选择颜色的色值,一般来说会选择同色渐变、邻近色渐变和对比色渐变。而渐变的颜色数量也不宜超过2种。2种以上的渐变色就需要非常强的控色能力来驾驭了  

  以上就是优漫教育小编为大家介绍的“UI设计培训】:如何提升平面作品设计层次感?”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解 !