迷之渐变色让你的色彩充满想象力!

分享到:更多 ()

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

Image title

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

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

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

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

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

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

Image title

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

Image title

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

Image title

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

Image title

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

Image title

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

Image title

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

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

Image title

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

Image title

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

Image title

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

Image title

结语:

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


作者信息

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

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

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

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 迷之渐变色让你的色彩充满想象力!

0
分享到:更多 ()