一、渐变色&互联网
最近大家都知道淘宝2017设计升级了,最明显可见的一点就是,加入了渐变的设计元素,从logo到icon、按钮、背景等。
渐变色几年前已经在设计圈兴起,第一感觉就是很炫很酷,与互联网这种快速发展、多变、炫丽的形象很符合。大多设计师都争相效仿,把渐变色运用在互联网产品的概念设计中。
互联网产品中最普遍的渐变运用是:1、同色相不同明度/纯度的渐变;2、临近色的渐变。
为什么这两种渐变最常见呢?
首先,同一个色相的渐变(如:绿色渐变、红色渐变等)和临近色的渐变(红黄渐变,黄绿渐变,绿蓝渐变等)都不会带来太大的视觉冲击,能柔和地结合在一起,同时又带来变化,比单色多了流动性,使颜色更加生动,但这一份生动不会很扎眼、很刺激。充分地表达了包容性和多样性,与互联网的特征一样。
渐变色和互联网都有着包容性和多样性的特征。
二、渐变色的流动性
刚刚已经提到了渐变色的流动性,它的流动性主要是因为颜色的变化带来的方向感,变化的轨迹会带来运动的视觉效果。
三、渐变色的质感
渐变色除了给颜色变化带了流动性之外,还有多了“质感”,这里的质感包括体积感、材质感。单个颜色本身就可以通过色相、明度、纯度带来一定的材质感和重量感(不同颜色会带来不同材质和重量的联想),但渐变的颜色可以带来的光的变化感,从而形成体积感和质感。
1、体积感:颜色的变化必然带来对比,对比就会出现较亮的颜色和较暗的颜色,亮的颜色会较凸起,暗颜色会压下,就如同一个有体积的东西在光照下,有亮面有背光面/有高光有投影一样。
2、材质感:不同材质的东西对光的反射不一样(形成的高光和反光不一样),就像是不锈钢和石头一样,在同样的有光环境下,不锈钢的高光的大小和亮度都和石头不一样(一个是镜面反射一个是漫反射),所以渐变的颜色可以通过渐变的属性(渐变颜色的色相、明度、纯度、变化的明度纯度差,变化的节奏等),带来各种材质的感觉。
四、介绍一个高颜值渐变网站-WebGradients
一个提供180多种渐变颜色参考的网站,提供的颜色属性都清晰标明,还可以下载成PSD, Sketch, PNG 甚至直接复制成一段 CSS 渐变代码。
网站提供的渐变颜色都很美腻。
它的加载页是这样的:
案例展示:
同样类型的网站还有一个大家都比较熟悉的:UIgradients