唐老鸭

渐变,在设计的应用当中经常会看到,那么如何用好渐变为自己的设计锦上添花呢?下面来看看渐变有哪些类型以及实际应用?

无论是做界面还是画插图,我们总是离不开渐变色。界面背景色太平?加个渐变吧;想要突出光影?加个渐变吧。渐变色主要有配色和类型两个要素,我们今天就先看看渐变的配色。下一期会讲渐变的类型及一些实操。

渐变色主要可以从四个方面考虑,分别是饱和度变化、明度变化、色相变化以及透明度的变化。

 

饱和度变化(S)

饱和度(S),即色彩的纯度,取值范围是0~100,为0时灰色,为100时具有最大饱和度。渐变色中饱和度的变化通常是一个高明度色彩饱和度的改变(高明度色彩趋向白色,可以中和低饱和色彩的灰),明度一般在90~100,。在相同的明度下(高明度90~100),饱和度低的色彩过渡到饱和度高的色彩会产生一种微立体感,低饱和度色彩会给人一种高光的效果。

明度变化(B)

明度(B)即色彩的明亮度,取值范围是0~100,为0时为纯黑色,为100时为纯白色。渐变中从高明度过渡到低明度也可以产出微立体感。
明度和饱和度的变化经常结合一起使用,使渐变过度的更加自然。常常会用在渐变图标或是个人中心背景图中等。如下图:

色相变化(H)

色相(H)的取值范围是0~360°,常见的配色方案有相近色渐变与强对比渐变,相近色渐变更加缓和,强对比渐变则视觉冲击很强。

1.相近色渐变

相近色渐变,色彩的色相值相差15°~60°左右(包括同类色、邻近色),色环上夹角为锐角,明度和饱和度数值基本保持一致。这种渐变是UI界面设计中最常见的,一些以渐变色作为主题色的APP常用的就是相近色渐变,如下图:

相邻的颜色形成渐变色能保持相同的冷暖基调,比如淘宝的橙红和橙黄同属暖色系;开言英语的绿色和湖蓝同属冷色系。

 

2.强对比渐变

强对比色渐变,色彩的取值范围可相差90°~180°左右(包括中差色、对比色、互补色),基本是一个色值靠近冷色系,一个色值靠近暖色系,颜色跨度大,色环上夹角基本是钝角,有极大的视觉冲击力,常常用在运营活动H5界面、引导页等强视觉的渐变处。如下图:

强对比渐变配合角度的不同能形成非常强的色彩冲击,最近流行的镭射风格和流体渐变就是在强对比色的基础上,再将不同的色块随意、流动的改变,如下图:

透明度变化

在渐变中加入透明度的变化,常用在叠加渐变中使用。将某一端渐变色的透明度调制0,可以很好的融进背景色中,像一束放射的光线。尤其常用做点缀图形使用,也可用做插图中绘制投影或是营造远端图形的虚化,如下图:
马蜂窝个人信心黄色背景下,加入了几何图形白色不透明渐变,融合到了背景中;右侧引导页中则通过不透明渐变绘制出了物体的阴影效果。当你觉得除了渐变总少了些什么时就可以尝试在上面在叠加一层白色或同色相的不透明渐变,可以起到丰富层次的作用。
渐变色工具与推荐网站
最后为大家推荐一些渐变色工具和渐变色网站,希望能帮助大家更好地搭配渐变色。

1.sketch插件“Easing Gradient”

这个渐变工可设置渐变类型、色彩空间、步调及控制曲线,使渐变更加柔和多变,还可以拷贝CSS样式给开发小哥哥。

有需要的小伙伴可以在消息中回复“sketch渐变插件”。

 

2.推荐网站

1)  https://uigradients.com

这个网站,渐变色全屏铺满整个界面,左右点击即可切换渐变色配色方案。可以下载jpg,可以旋转上下左右四个角度查看,还可以查看渐变的css样式。

2)https://webgradients.com

这个网站的渐变色有近180个方案,配色也比较好看。

3)https://www.grabient.com

最后推荐一个网站,这个网站的渐变配色不太多,但是可以直接在上面进行颜色增减、角度、比列的调整。

划重点

渐变色的配色变化可以从饱和度、明度、色相、透明度四个方面考虑:· 饱和度和明度变化常常搭配使用;·色相变化缓和的相近色渐变以及视觉冲击强的强对比渐变;·透明度变化则常作为背景色上的图形点缀使用,以及绘制投影和远端物体。本文主要使用的渐变类型集中在线性渐变,下篇文章我将介绍渐变的不同类型,包括线性、径向、角度、描边渐变、任意形状、流体渐变六种类型,我们下期见啦。

 

参考引文:

hsb百度百科http://1t.click/5Zf

《渐变质感技法:渐变配色之对比用色》http://1t.click/5Zk

《超实用!高手的 Ai 兵器谱之「渐变知识」全方位解析(上)》http://1t.click/5Zn

 

原文地址:海盐社(公众号)

作者:人类君

转载请注明:学UI网 » 生硬的渐变!我要和你说再见!(上)

登录收藏
 
你可能喜欢的:
苹果Google微软魔鬼般的配色设计技巧,你肯定没注意苹果Google微软魔鬼般的配色设计技巧,你肯定没注意
色彩 | 你需要get的配色小技巧~色彩 | 你需要get的配色小技巧~
[译文] 如何设计图表色彩[译文] 如何设计图表色彩
所谓配色达人,就是一次出48个方案所谓配色达人,就是一次出48个方案
配色套路太多记不住,那就记住Google这个配色套路太多记不住,那就记住Google这个
一篇吃透 Dark Mode ,搞定“暗黑/深色”适配一篇吃透 Dark Mode ,搞定“暗黑/深色”适配
配色基础技巧配色基础技巧
别以为,色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇别以为,色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇
色彩难把控?这些配色知识可助你一臂之力……色彩难把控?这些配色知识可助你一臂之力……
【海平面】迷人的色彩神经科学——以及它对设计的意义【海平面】迷人的色彩神经科学——以及它对设计的意义