色彩想象力-迷之渐变色

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
25701 16 485 2016-10-25

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

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

全部评论:16

  • lucis

    2017-11-17 09:53

    @Halo_茜: 有下载地址吗?想用到现在做的网站上

  • V_ce

    2016-11-19 16:22

    @Halo_茜: 666

  • 洛海傾城

    2016-11-03 16:31

    @阿DU_: 我是一枚设计师,可是我不会写代码怎么办

  • 阿DU_

    2016-10-28 18:24

    @Menty: 是前端用canvas标签实现的,很强大的一个功能标签。

  • QuasarPan

    2016-10-28 10:59

    @Halo_茜: 太感谢了!

  • Halo_茜

    2016-10-28 10:27

    粒子效果http://www.jq22.com/demo/jquery-3d-150106224358/

  • freeshi

    2016-10-28 09:46

    我也想请教图一的波浪点,觉得好棒!!可是是怎么做的呢?请大神指教

  • rryooo

    2016-10-28 09:40

    求例子2网页的链接

  • Menty

    2016-10-28 09:18

    我也想请教波浪点,真的好看有创意,怎么做到的呀

  • UI望帆

    2016-10-28 08:24

    去波浪点的网页看了下,其实不是静态图,真的是在波动啊!!觉得应该是前端代码实现的

  • dupan886

    2016-10-27 17:13

    @白方迟: 同问,

  • 白方迟

    2016-10-27 15:38

    @CC桑: 我也想问这个问题。。求大神教

  • Hicy

    2016-10-27 14:21

    @CC桑: 哥哥,你学会了以后教教我

  • CC桑

    2016-10-27 13:58

    那个。。。。想问下 就是图一里面的圆点波浪是怎么做的 求教

  • 勺柄烫手

    2016-10-27 11:14

    渐变渐变,渐变

  • 咕咕是一只画风清奇的猫

    2016-10-25 14:38

    果然加了渐变色 呆板的扁平也能逼格爆表

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票