色彩想象力-迷之渐变色

力谱宿云 发布于 2016/10/25 09:58
阅读 209
收藏 0

00-封面图

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

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

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

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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

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

07

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

08

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

09

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

10

结语:

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

 

- END -

本文系Maxleap团队_ux成员:王涛【原创】

MaxLeap技术博客首发:https://blog.maxleap.cn/archives/1201

精彩回顾

浅谈“高逼格”产品视觉设计!

以用户体验为导向的设计表现

欢迎订阅微信公众号:MaxLeap_yidongyanfa

加载中
0
力谱宿云
力谱宿云
上传的图片有些被压缩了,可到原贴中查看原图效果:https://blog.maxleap.cn/archives/1201
0
快速开发师
快速开发师
哟哟哟,不错
返回顶部
顶部