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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
如何构建一个科学有效的色彩体系?
0.0°
2022-02-02 原创文章 经验/观点 举报 1119 2 3 1

色彩是设计中体现品牌与基因的关键因素,如何搭建科学有效的色彩系统,是每个设计师都需要去学习运用的。

什么是色彩?


色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。

人对颜色的感觉不仅仅由光的物理性质所决定,比如人类对颜色的感觉往往受到周围颜色的影响。有时人们也将物质产生不同颜色的物理特性直接称为颜色。

“色彩是我们感知世界的重要媒介,对于信息传达有着重要的作用,能使人们能够更有效的感知设计的意图和内涵,使传达更高效。” 因此构建一个科学有效的色彩体系尤为重要。



常用的配色方式有哪些?

同色系配色

同色系并不特指同一个颜色,它说的是同一个色系里面的两个或多个不同颜色。只要明度、纯度、色相协调,这种搭配就能够体现一种渐变的层次感,有规律感,也更优美。


邻近色配色

色相环中相距60度,或者相隔三个位置以内的两色,为邻近色关系,色相彼此近似,冷暖性质一致,色调统一和谐、感情特性一致。如:红色与黄橙色、蓝色与黄绿色等。


类似色配色

类似色也就是相似色。在色环上90度角内相邻接的色统称为类似色,例如红-红橙-橙、黄-黄绿-绿、青-青紫-紫等均为类似色.类似色由于色相对比不强。


中差色配色

色相环中90度的配色,在视觉上是有很大的配色张力效果,是非常个性化的配色方式。在24色相上作任选一色;与此色相邻之色为邻色。


对比色配色

是指色相环上相距120度到180度之间的两种颜色,不仅能加强色彩的对比,拉开距离感,而且能表现出特殊的视觉对比与平衡效果。


明度对比

明度对比是色彩的明暗程度的对比,也称色彩的黑白度对比。
在心理学中,明度对比亦称明暗对比、亮度对比。物体表面的明度受到其不同背景的明度的影响,使个体产生不同的主观的明度感受的现象。
如,从同一块灰色的纸上剪下两个小正方形,分别放在一张白色和黑色的背景纸上,个体会感觉放在白色背景纸上的小正方形的明度变暗了,而放在黑色背景纸的则变亮了,同时在小正方形与背景相互连接的边界附近,明度对比特别明显。


为什么要构建一个色彩体系?

在设计中,色彩是体现品牌与基因的关键因素,构建科学有效的色彩系统,能有效地帮助产品建立品牌形象,对产品设计具有指导意义。每一个产品,都有自身的文化/价值观,一套统一的色彩,能够帮助用户提高对平台品牌的认知,为平台的发展提供优质高效的设计系统基础。如果一个平台或者项目的配色不统一,则无法帮助平台树立自身品牌感,甚至会给用户一种山寨的感觉,所以构建一个平台专属的色彩体系,是至关重要的。


如何去构建一个科学有效的色彩体系?

通常构建一个色彩体系,需要以品牌色为基础来构建整个色彩体系,如果是个从0-1产品,则需要设计师,通过与业务方进行沟通,结合公司的愿景/产品调性,色彩的心理学等方式,建立情绪板,定出品牌色。

如何通过品牌色去定义整套色彩体系?

1、调取出品牌色的HSB值。

2、调整H值:+-15

调整出24色相环对应的24个色彩,得出明度和饱和度一致性的颜色,假如品牌色为 #108EE9。


3、挑选得出16色相环

删除掉部分过亮或者过暗的色彩,保留16个色彩,对应16色相环


4、16个色彩调整S、B的值,实现整体的视觉统一效果

由于每种色彩在同样的饱和度和亮度的视觉效果是不同的,所以需要设计师对饱和度与亮度进行微调,来达到整体的视觉效果的统一。

我们可以在亮度(S)按-10,-20去加减,也可以在B上面以+-5去调整。


5、通过16个色彩的色盘,来制定一套色板

制定色板,需要用到一个网站:https://cooloes.co/

输入我们的对应的品牌色,就可以快速的得出根据明度递减递增的色板,能够帮助提高制作色板的效率。

这样,我们就得出了一套完整的色彩体系,不管是在UI、还是做海报banner等所有需要用到的色彩,都可以在这一套色彩体系中提取运用,保证产品的色彩统一。

总结

色彩是设计中体现品牌与基因的关键因素,如何搭建科学有效的色彩系统,是每个设计师都需要去学习运用的。
以上内容,是如何搭建一套科学有效的色彩系统的其中一种方法,希望对大家有所帮助,如有不同意见,欢迎指正!

图片版权归原作者所有!


Powered by Froala Editor

更新:2022-02-02

收藏

2人已收藏

  • 5

    作品

  • 4

    粉丝

  • 0

    关注

  • 如何运用情绪板定义视觉风格?
  • 图标/ICON 设计指南
  • 响应式设计应该怎样做?
  • 如何通过品牌符号打造差异化产品?

    猜你喜欢

      2022-02-02 原创文章 经验/观点 举报 1119 2 3 1

      如何构建一个科学有效的色彩体系?

      0.0°

      你确定要举报如何构建一个科学有效的色彩体系?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2022年02月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      2
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录