渐变色是指某个物体的颜色从明到暗，或由深转浅，或是从一个色彩缓慢过渡到另一个色彩，充满变幻无穷的神秘浪漫气息的颜色。

色彩带给了我们不同的感受和情绪，渐变色则带给了我们更多的想象空间。

合理的使用渐变色可以吸引用户视觉焦点、渲染氛围、提升美感、传递情绪等，而想运用好渐变色，需要有更好的色感，在色彩搭配和透明度上多下功夫。

纯粹的渐变色使得色彩更生动缓和，不单调，可以丰富整体设计感，却又不会增加视觉负担，用户可以浏览到更舒适的设计而不会觉得沉重。同时一些更精美的图形，现实中的照片等，如果配合低透明度的渐变色，则可以更好的增强图片本身的氛围，或者解决某些图片本身的视觉缺陷，甚至可以为图片带来耳目一新的感觉。

一、纯渐变色作为背景的应用：

01.蓝绿渐变作为背景，商务、沉稳、安全的蓝色和新颖、生机的绿色相结合，耳目一新，轻快的渐变色再配合波动的粒子效果，更加凸显文案“重新定义应用开发”的概念。

02.相对低饱和度的紫色到橙黄色的渐变作为太空背景，不过分抢眼，区别于真实的太空情形，紫色的神秘和橙黄色憧憬更加增加了画面的趣味性和想象力

03.大面积的白色，超简约优雅的风格，此刻清新素雅的蓝绿渐变色块充当了一部分素材效果，同时可以很好的吸引浏览者，引导之视觉焦点到页面中间的内容，配合时尚的衬线字体以及整体的排版效果，简单的视觉，设计氛围却更接近完美。

04.轻缓的明度渐变背景，融合人物肤色，打破纯扁平的单调感，没有多余的其他元素，整体品质感倍增。

05.同样轻缓的同色系的渐变背景，使得原本多色彩的列表不再单调，且更舒适新颖。

06.红色和橙黄色的暖色系渐变，让背景更细腻，舒服，简约的内容和精美的时钟设计让整个画面舒适自然又不缺亮点。

二、低透明度的渐变色作为遮罩层的应用：

07.背景传递的喜悦氛围，而高饱和度的蓝色透明渐变使用增强了这个氛围，同时可以让整个画面的设计气息更浓，而图片本身的多元素内容，被遮罩之后，部分元素弱化，使得页面内的信息展示更为清晰。

08.低饱和度的渐变色可以弥补图片本身不具备的色彩氛围，可以丰富设计感，同样可以更好呈现左侧文案，而右侧无文字内容，视觉自然落到渐变色背后的主图上。

09.作用在人物上的渐变，让人物和背景渐变更切合，整体时尚的气息更浓，配合亮白的文字，干净舒适，内容突出！

10.不同的状态需求和内容时不同的透明度处理，既可以保留图片所传递的更自然贴切的信息，又能规避图片过于明显的抢眼效果，青紫色的渐变增强了画面的时尚香艳的氛围。

结语：

不同的色彩有不同的情感传递，而什么时候选择更适合的色彩渐变，需要考虑到当前的主题内容是什么，而不同的尝试和探索或许也会有更多意想不到的效果，本文列举了一些不同情形下的渐变色使用，但篇幅有限，也欢迎有兴趣的小伙伴更多的补充和更好的建议，谢谢！

作者信息

本文由MaxLeap团队_ux组成员：  王涛【原创】

王涛，Ui设计师，2015年度中国十佳网页设计师，五年半设计生涯。不局限于某种设计风格，热爱探索不同设计风潮。MaxLeap UX团队成员之一，负责MaxLeap产品全案设计！

原文链接：https://blog.maxleap.cn/archives/1201