全国咨询热线:400-009-1906

UI设计关于扁平化设计的做法

  一些UI设计关于扁平化设计的做法,这里主要偏视觉侧。

  1.去掉特效

  先来看一组对比图片

  

UI设计关于扁平化设计的做法

 

  同样是镜头的设计,在扁平化中去祛除了渐变,阴影,质感,等各种修饰手法,仅用简单的形体来表达,显的干净利落。

  做减法,这第一步应该是最容易的。

  2.简化提取

  首先我们来看看做简化和提取的一个典型例子

  毕加索画的牛

  

UI设计关于扁平化设计的做法

 

  一头牛从最初的写实到最后仅仅只用几根线条来表示,整个简化的过程也经历了好几个步骤,当然这里对设计师观察和提炼能力要求很高,要充分了解对象物的本质,懂得巧妙的取舍,用极简的要素,在没有更多特效装饰的情况下表达清楚内容,在界线与轮廓的高对比下,表现出物体的美感。

  3.巧用色彩

  在扁平化设计中,色彩运用的是否到位,无疑是这种设计风格中很重要的一个环节,看很多作品,在色彩上更多的强调更亮 、 更鲜艳。

  

UI设计关于扁平化设计的做法

 

  在以往的设计中,大多数情况下设计一个作品更专注在两三种颜色之间,而扁平化设计的色彩往往在6到8种。

  以下收集了一些颜色使用频率比较高的,蓝,绿色,裸色(粉色),杏,灰色,紫色

  这里除了颜色的搭配还有一点就是,在很多时候扁平化的视觉设计中,是很少有线条出现的,更多是用色块来表现各种关系。(怎么用色块表现,这里应该也可以有一个专门的分享)

  

UI设计关于扁平化设计的做法

 

  

UI设计关于扁平化设计的做法

 

  当然也有一些是走复古风,同色系,和低饱和度⋯⋯等等的

  重要的是各种调调放在一起看起来要和谐

  

UI设计关于扁平化设计的做法

 

  4.排版很重要

  由于在扁平化设计中采用的都是极简的元素,所以,排版就显的尤为重要。

  首先是字体:在扁平化设计风格种,字体的设计显的很重要,一种新奇的字体用来作为设计元素会发挥极其重要的作用,但是要小心,不能因为字体太新奇,而影响到了信息的传达。字体更多时候采用的是无衬线 (sans serif)字体类型

  

UI设计关于扁平化设计的做法

 

  

UI设计关于扁平化设计的做法

 

  其次是大图

  一张好看的图片能吸引大家注意力和点击的欲望,在加上适当的排版,再配合扁平界面,瞬间设计感倍增,上档次了有木有

  

UI设计关于扁平化设计的做法

 

  再来是半透明

  使用这些设计方式最大的好处就是创造对比,可以让设计师通过色块,图片上的大字体或者多种颜色层次来创造视觉焦急,传说中的大气应该有这样一种效果,哈哈

  这种效果如果运用得当的话,效果会非常震撼,但是使用这种效果必须谨慎,因为这种效果很难处理得当,有一些原则需要掌握:

  只有图片和文字都可以读时,半透明效果才有意义,在决定半透明位置的时候,你要知道遮挡了什么内容,这些遮挡是否合理透明度的使用错误会影响到整体的设计效果和阅读性,出于可读性考虑不要在对比强烈的图片上放置半透明元素(比如黑白对比或互补色)不要同时运用过多半透明效果

  

UI设计关于扁平化设计的做法

 

  

UI设计关于扁平化设计的做法

 

  5.其他风格和细节

  谁说扁平化就是单色平涂,扁平化也可以有其他风格和细节,我们来看看装饰画风格

  

UI设计关于扁平化设计的做法

 

  立体感

  谁说扁平化设计就是色块堆积,来看看扁平化也可以有细节

  色块间的变化呈现出凹凸感

  

UI设计关于扁平化设计的做法

 

  光感,长投影和阴影/高光

  

UI设计关于扁平化设计的做法

 

  

UI设计关于扁平化设计的做法

 

  动感

  看下面的例子,当时钟在转动的时候,画面下方的图标(汉堡/饮料等)也有一个相应的动态表现,饮料也能看上去象是在杯子里晃动。

  

UI设计关于扁平化设计的做法

 

  其实还有很多⋯⋯

  小结

  做好扁平化设计,并不是简单的去掉拟物设计的各种修饰效果,需要设计师更多的去观察,提炼。可以从古今中外的各种艺术表现形式上找到共同点并加以运用。

  扁平化设计也不是简单的单色平涂,它可以有很多细节,也可以作出质感和动感,这需要设计师们耐心的去发现。

  感谢阅读完本文章,文本部分内容由小编转载自网络,版权归原作者所有,如有侵权请联系我们进行删除。