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

教你玩转平面设计渐变色

新闻来源:优漫教育 日期:2021-07-06
自从信息爆炸以来,用户在使用产品时,面对越来越多的信息,往往容易目眩。为突出内容、减少过分美化对信息的干扰,平面式风格应运而生并流行起来。摒弃过多的元素,区别于强烈简洁的功能界面,扁平化已经成为UI设计的主流风格。
  平面化的风格也有不足之处,如:简洁有余,张力不足。在某些情况下,平面设计可能过于“平坦”,从而影响可用性。假如用户界面过于“平”,可操作的元素将被淹没在类似平面元素的海洋之中,那么今天新的视觉训练将帮助您解决这个问题。


  一、那怎样补救平面设计带来的问题呢?

  在设计上,近扁平的设计只是在扁平样式能够提高可用性的情况下才采用。这不会武断地认定或暗示渐变和投射有害。接近平面的设计利用微小的投影和渐变来创造出空间感、距离感、视觉层次感、视觉线索和边缘效果。所以设计师为了弥补平面化的这一缺陷,重新在色彩上寻找突破。运用渐变技术是最有利的武器之一。

  自2017年以来,UI界面色彩的应用越来越大胆。新版本的淘宝等,抛弃了以前单一的橙色,而采用了较为年轻态的渐变色,主色调,导航条图标采用暖色单色相的渐变。这种渐变通常被用来设计app内导航条图标,入口图标等等。利用单色相位渐变,淘宝APP的整个页面感觉更加通透、生动,不再有呆板和窒息的感觉。


平面设计培训班


  近期的一款游戏APP——纪念碑谷2也是以单色相位的渐变为游戏背景,在让整个画面丰富的同时又不会过于抢夺主体色彩,使画面显得清新而不沉闷。

  用相似颜色的不同颜色,带来强烈的视觉冲击,有一种梦幻的感觉,最早尝试这种风格的是ins,ins拟物风时期的logo一直以来都受到好评,在这个时候,logo的logo,没有简单的把logo用来做背景墙,用来装饰和装饰装饰。其简约风格的UI界面,对用户非常友好,用户只需欣赏到漂亮的图片,然后双击点赞即可。

  近来苹果发布的ios11,也在平面化的基础上做了一些改进,除了使标题更加粗犷,还增加了可点击部分的颜色变化,其中不乏强烈的多色相渐变。图片颜色采用两种或两种以上的渐变手法,多色相渐变在视觉上的表现力会更强一些,给使用师更强的视觉冲击,这类配色在Web、banner设计、插图设计等方面运用较多。但是,新潮的设计师们并不满足于此,他们将渐变设计得更加花哨。而最出色的是今年改版的优酷视频APP。

  这款设计还是比较复杂,不适合做更小的icon。可见,优酷后来将icon改为单色相渐变。不仅仅是图形用户界面设计,色彩的大胆运用也延伸到图形设计。这类使用多用于电商H5页面活动,能极大地调动活动所要营造的气氛,给用户最大的视觉冲击力,最终达到消费目的。

  说到辣么多,那么怎么说上面的一些渐变色如何运用到实际中才能让自己的设计稿显得高大上呢?



  二、直线型渐变。

  本文将变色部分分为A、B、C三部分,对其取色分析。通过以上实例的取色分析可以看出,如何让自己的渐变配色不显得太脏,那么取色的亮度(B)要很高,渐变色中的色值都在90以上。所以亮度的取值非常重要哦!



  三、垂直度渐变+球状渐变。

  因为网页界面面积比较大,在渐变时采用大面积。假如仅仅使用垂直线性渐变是比较单调的,此时我们需要添加球状渐变,增加画面的丰富性。球形渐变的制作非常简单,新建一个图层,选择带有羽化边缘的笔刷样式,在画面上轻轻扫一扫,然后用蒙版盖在前面做的垂直渐变底色上。