美文网首页设计产品运营商业模式UI设计学习
渐变使用指南,如何创造令人难忘的渐变

渐变使用指南,如何创造令人难忘的渐变

作者: dd0cdfcb3986 | 来源:发表于2019-05-28 15:09 被阅读0次

在很长一段时间中,在设计中使用渐变是一大禁忌,老师在教学中总是告诉学生不要使用渐变,因为渐变色很难在印刷品中显示。但是现在,渐变已经成为一种流行趋势,我们打开

dribbble 和 behance,可以看到很多使用渐变的设计作品,在本文中,我们就来谈谈渐变的使用技巧。

相比纯色设计,渐变有哪些好处

在 2014 年以后,UI 设计的风格开始从拟物化转到扁平化,谷歌发布了 Material Design,苹果发布了 iOS 7,设计师们开始尝试用扁平的纯色做设计。但是纯色的设计有一个弊端,就是可以使用的颜色很少,设计师的创意受到了束缚,同质化比较严重。

2014 年非常流行的纯色长投影设计,当时的渐变设计很少

在扁平化设计流行多年以后,纯色慢慢不能满足设计师的需求了,大家开始使用渐变,相比纯色而言,渐变主要有两大好处:

看完文章的你,想要一些AE、ps学习资料或者有不懂的都可以找我咨询,加我建立的UI学习q群:927910296,进群可以找我领取相应的笔刷素材大礼包,还可以跟群里的其他设计大佬和学习者一起交流学习,获取更多其他软件学习资料。 想学UI设计的小白或者零基础都可以领取到学习资料ps笔刷神器+ps和AE软件

1.渐变可以创造更有表现力的画面,获得更多的创作自由。

通过将两种或多种颜色混合,渐变为无限的可能性打开了大门,设计师可以创造出更个性和令人难忘的视觉设计。

Ghani Pradita 设计的网页使用了丰富的渐变,多彩的画面有很强的感染力

2.渐变可以引导用户视线。

设计师通过一些技巧,在使用渐变的时候可以将用户的目光巧妙地引导到视觉焦点上,吸引用户的注意力。

Mixpanel 使用渐变来突出显示插图,由深到浅的渐变背景将用户的注意力引导到插图上

3.突出的渐变可以成为画面中的视觉中心。

尤其是在黑色的背景中,使用渐变经常能达到令人惊讶的效果,它能模拟光在黑暗中的效果,成为画面的视觉中心。

黑暗中的渐变经常能做出非常棒的光感,成为视觉中心

使用渐变的一些技巧

1.不要使用对比很强的颜色

不是所有的颜色都能很好得组合在一起。如果使用互补色组成渐变,对比度太强,通常情况下效果都很脏。

这是红色和绿色在一起时的效果,作为互补色它们组成的渐变效果很差

使用相近的颜色创造的渐变很和谐,下图为使用青色蓝色和紫色创造的渐变。

2.上浅下深的渐变可以模拟物体

经过力力的观察,上浅下深的渐变可以模拟现实生活中物体被光照射的景象(比如卡片)

在一些理财应用中,经常用上浅下深的渐变来模拟卡片

3.上深下浅的渐变适合做背景

生活是设计的导师,不知道大家仔细观察过天空没有,天空的颜色从上到下一般是从深蓝色过度到浅蓝色的,天空在我们的生活中一直扮演了背景的角色,因此在设计中设计师也经常用上深下浅的渐变作为背景,可以很好得引导用户的视线向下看。

天空的渐变

在 UI 设计中,背景经常使用上深下浅的渐变,就像天空一样,把用户的目光引导到下方的内容中

4.高级的渐变必须有色相的变化

即使是很微妙的渐变,比如从深蓝过度到浅蓝,也不能无脑得选取同一个蓝色。我们观察上一幅图片,在背景从深蓝往下变浅时,色相也从蓝色过度到了紫色。这是一个非常重要的技巧,同一个色相下的渐变变化太平淡了,即使是最微小的渐变,也一定要有一些色相的变化。

相关文章

  • 渐变使用指南,如何创造令人难忘的渐变

    在很长一段时间中,在设计中使用渐变是一大禁忌,老师在教学中总是告诉学生不要使用渐变,因为渐变色很难在印刷品中显示。...

  • 渐变渐变

    再熟悉的东西,一段时间不去做,就会渐渐地对他变得陌生。 对陌生的东西,大多数数的时候,人们选择的是拒绝而不是接纳,...

  • CSS小课堂之可重复渐变

    CSS repeating-linear-gradient方法 创造一个可重复的渐变。它接受和普通线性渐变相同的属...

  • CSS3新特性初识

    渐变 转换(又称变形) 过渡 多列 动画 复杂选择器 渐变 线性渐变 径向渐变 重复渐变(线性-径向渐变) 转换 ...

  • 渐变色简单实现

    关于实现渐变色的解答,渐变分为线性渐变和径向渐变。 一、 线性渐变(Linear Gradients)- 向下/向...

  • 线性渐变

    线性渐变 linear-gradient 渐变分4种 线性渐变 径向渐变 重复线性渐变 重复径向渐变重点学习线性渐...

  • IOS 绘制 之渐变

    分为线性渐变和径向渐变一 创建颜色空间二 创建渐变三 设置裁剪区域四 绘制渐变五 释放对象 线性渐变 径向渐变

  • photo shop零基础5

    六,渐变工具 工具栏中选择渐变工具,然后单击选项栏中的渐变色条右侧的下拉条,可以应用线性渐变、径向渐变、角度渐变、...

  • 如何导入Mac版ps渐变?Mac版photoshop渐变怎么导入

    ps渐变工具是非常好用的工具,网络上也有些非常好看的渐变工具,但是Mac操作系统如何将渐变工具加载到photosh...

  • 如何导入photoshop渐变插件素材?Mac版Ps渐变导入教程

    ps渐变工具是非常好用的工具,网络上也有些非常好看的渐变工具,但是Mac操作系统如何将渐变工具加载到Photosh...

网友评论

    本文标题:渐变使用指南,如何创造令人难忘的渐变

    本文链接:https://www.haomeiwen.com/subject/btddtctx.html