恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
生硬的渐变!我要和你说再见!(上)
0.0°
2019-10-29 原创文章 经验/观点 举报 939 9 3 0

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

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



一、饱和度变化(S)

饱和度(S),即色彩的纯度,取值范围是0~100,为0时灰色,为100时具有最大饱和度。渐变色中饱和度的变化通常是一个高明度色彩饱和度的改变(高明度色彩趋向白色,可以中和低饱和色彩的灰),明度一般在90~100,。


在相同的明度下(高明度90~100),饱和度低的色彩过渡到饱和度高的色彩会产生一种微立体感,低饱和度色彩会给人一种高光的效果。 


Image title


二、明度变化(B)

明度(B)即色彩的明亮度,取值范围是0~100,为0时为纯黑色,为100时为纯白色。渐变中从高明度过渡到低明度也可以产出微立体感。

Image title

明度和饱和度的变化经常结合一起使用,使渐变过度的更加自然。常常会用在渐变图标或是个人中心背景图中等。如下图:

Image title


三、色相变化(H)

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


1.相近色渐变

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

Image title

Image title

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



2.强对比渐变

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

Image title


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

Image title



四、透明度变化

在渐变中加入透明度的变化,常用在叠加渐变中使用。将某一端渐变色的透明度调制0,可以很好的融进背景色中,像一束放射的光线。尤其常用做点缀图形使用,也可用做插图中绘制投影或是营造远端图形的虚化,如下图:

Image title

马蜂窝个人信心黄色背景下,加入了几何图形白色不透明渐变,融合到了背景中;右侧引导页中则通过不透明渐变绘制出了物体的阴影效果。


当你觉得除了渐变总少了些什么时就可以尝试在上面在叠加一层白色或同色相的不透明渐变,可以起到丰富层次的作用。



五、渐变色工具与推荐网站

最后为大家推荐一些渐变色工具和渐变色网站,希望能帮助大家更好地搭配渐变色。


1.sketch插件“Easing Gradient”

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

Image title

有需要的小伙伴可以在Sketch中文网搜索“Easing Gradient”。



2.推荐网站


1)  https://uigradients.com

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


Image title


2)https://webgradients.com

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

Image title


3)https://www.grabient.com

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

Image title


六、划重点

渐变色的配色变化可以从饱和度、明度、色相、透明度四个方面考虑:


· 饱和度和明度变化常常搭配使用;


·色相变化缓和的相近色渐变以及视觉冲击强的强对比渐变;


·透明度变化则常作为背景色上的图形点缀使用,以及绘制投影和远端物体。


本文主要使用的渐变类型集中在线性渐变,下篇文章我将介绍渐变的不同类型,包括线性、径向、角度、描边渐变、任意形状、流体渐变六种类型,我们下篇见啦。


参考引文:

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

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

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



原文链接:http://1t.click/GgR









Powered by Froala Editor

更新:2019-10-29

收藏

9人已收藏

  • 9

    作品

  • 23

    粉丝

  • 5

    关注

  • 2019-2020简历作品集
  • 啥?你说我不懂如何设计消息中心?
  • 移动表单设计中那些令人纠结的细节
  • 勋章设计怎么搞?浅析勋章页面设计细节
相关标签
经验ui渐变

    猜你喜欢

      2019-10-29 原创文章 经验/观点 举报 939 9 3 0

      生硬的渐变!我要和你说再见!(上)

      0.0°

      你确定要举报生硬的渐变!我要和你说再见!(上)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年08月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      9
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录