取色新姿势

很多情况下我们比较难确定使用什么样的色彩,如何来确定色彩,所以我想着重讲下前面两个原则:色相同频和色调同频。

由于自己在做色彩搭配的时候经常出现问题,自己的色彩敏感度不是很强,所以就经常研究色彩在设计中的应用。色彩的理论非常多,我也不细说了。最近在做UI设计颜色规范的时候,遇到了些问题,然后从我们的视觉设计师荔枝同学那学到了一个很好的方法,今天就把方法分享给大家。

 

什么是同频色?

同频色,这个叫法我是听高高手的梁景红老师讲述的。她把同频色的应用总结如下:

  1. 色相倾向一致的色彩同频(色相相同)
  2. 色调一致的色彩同频(8种色调相同)
  3. 组合神似的色彩同频(固定色彩组合,不固定色彩造型)
  4. 组合形式的色彩同频(固定色彩组合,固定造型)
  5. 同频呼应(同频色彩之间的呼应感知)
  6. 增加或减少色彩层次(画面丰富性管理)

89d4598b10f30000002129085c78.jpg

 

如何确定同频色?

前面也讲过同频色的一些应用法则,结合自己的工作,很多情况下我们比较难确定使用什么样的色彩,如何来确定色彩,所以我想着重讲下前面两个原则:色相同频和色调同频

色彩设计的常规方法如图:

65b7598b111700000021298024d0.jpg

我们在设计一款app或者是一个平面作品时,在做色彩设计的时候我们需要首先确定主色。主色通常是根据我们的设计主题、企业色、用户群等各个因素来确定的,主色确定好后我们才能更有效的进行后面的色彩设计。

搭配色都是根据设计的需要,围绕着主色进行设计。我们可能会经常使用各种色彩搭配的网站,我这里就可以给大家列一大波。

这么多色彩网站推荐给大家,大家可以各取所需。

那么,推荐大家这么多网站,问题又来了:“我该如何应用呢”,感觉还是一头雾水。有的人可能就直接拿上面的颜色来用,最后设计出来的就不忍直视了。比如:链家app的主色为#00AE66(不要问下面为什么是#00AE68,有的颜色是展示不出来的),那我根据这个颜色来确定辅助色,然而根据这样配出来的很多颜色是不应该直接拿来用的。

d9ea598b114fa8012156034c1266.jpg

 

色相相同

当我们确定好主色和其他搭配色时,我们需要对这些颜色进行延展,通常会使用色相相同的同频色彩,用来表示不同的层级和状态,尤其是在UI设计中经常用到,比如app中文字的颜色。在app中,我们会经常用到3种不同明度的颜色,为了提高应用间的一致性,分为原色、深色、浅色。

c58b598b1180a8012156032e8fb1.jpg

如上图,谷歌material design中,通常用500来表示原色的值,用700来表示深色,100来表示浅色。深色一般使用在点击状态、背景、状态栏等,浅色经常是用来表示不可用状态等。具体的大家可以多去看谷歌的设计规则http://wiki.jikexueyuan.com/project/material-design/style/color.html(在这里想问下大家,是否知道谷歌的500,700,100这个颜色的规则具体是怎么来的,自己尝试过很多方法,都无法百分百还原)

说实话,我一直都没有弄懂谷歌的那套色彩规则,所以自己在做设计的时候就采用另外的方式来确定色彩。我经常使用的使用的方法是:

  1. 在原色的基础上叠加带有不透明度的黑色、白色。叠加黑色,来选择深色;叠加白色,来选择浅色
  2. 直接调节色相的明度。如果在sketch中,我们可以把色值表示方式从RGB切换到HSB模式,用来调节色彩的明度。

b023598b119c000000212906ec13.jpg

上图就是以#00AE66为示例,向左依次叠加10%#ffffff、20%#ffffff,最后到白色;向右依次叠加10%#000000、20%#000000,最后到黑色。通过这种方式来提取我们的深色和浅色,而并不是把这些色彩都用了。(图中是以10的间隔来做的,你可以按照其他的间隔来做,比如5、15、20等,这只是一种取色方式,你具体取什么色值,那就结合你自己的项目)

 

色调相同

前面我们聊了色相相同的情况下,如何确定色彩。但在设计中,我们会接触到各种各样的色彩,当要采用多彩色来进行设计的时候,我们可能就不知所措了。在进行app、网页或者其他平面设计的时候,我们会首先定出主色,然后根据主色来进行其他辅助色的选择,可能这个时候我们就会去找各种配色网站(如上面给出的网站),通过互补搭配、三角搭配、矩形搭配等各种搭配方式来选择色彩。但是,这种取色法,很多情况下是不能直接拿来用的。

522a598b11d8a801215603eb9aba.jpg

我们采用矩形配色的方式,确定了其他三种色彩(如上图),这个色彩需要对他们进行微调,因为色彩本身的明度是不相同的。(如下图)

dc50598b120100000021294d065a.jpg

我们通过ps,在最顶层加一个黑白调整图层,然后以主色的灰度为基准,其他颜色调整HSB中的饱和度、明度,让其他色块在视觉上与主色机制保持一致。请参照下面的图片

17ea598b121a0000002129c037ee.jpg

902e598b122f00000021293f9511.jpg

 

说了这么多,那我们同频色彩主要用在哪些地方呢?

信息类别一致时,使用同频色。常见的有网页分类或者app入口等分类。

5862598b12600000002129cb97dd.jpg

7647598b1274000000212966cb95.jpg

 

原文地址:站酷

作者:Luyeelin

 


 

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码