配色也有潜在规则?丨UIMAX设计思...

  • 经验类型经验/观点原作者:麦克优艾

  • 经验属性好文转载
  • 经验版权不使用原创授权
786 0 3 2019-10-22

色感太差?不会选颜色?有了色卡都不知道怎么操作?


为了掌握配色,很多同学都会去学习专门的配色教程,或者书籍还有网站的参考。像是互补色,邻近色,这些名词大家都不会很陌生。可即便是知道这些色彩知识,当我们实际运用的时候,却还是会遇到很多问题。


一个好的配色并不仅仅是那些拥有设计天赋的人才能掌握的,通过一些公式化的配色技巧也能让大家在搭配色彩的时候可以心中有色,不至于没有头绪。


在配色的时候只需要简单的增加、减少、色相、饱和度、亮度的数值就可以轻松掌握。


色彩模式 – 了解HSB


首先现在的设计基本在屏幕上完成工作,该开始学习软件的时候,都知道设置正确的色彩模式。比如RGB和CMYK:RGB称为色光三原色,而CMYK称为印刷的四原色。

上面的两个色彩模式都是基于屏幕和印刷的,现在做配色的时候我建议大家选择更贴近人类感官的方式HSB(HSV)。


HSV分别表示的是色相 Hue、饱和度 Saturation、亮度 Brightness。


巧用HSB数值变换


当你在HSB模式下进行同类色配色时,首先要确定一个色相(H),接下来就只需要对后两项数值进行加减就很快能完成。


举个栗子。比如在下面这台电脑,在确定了紫色的色相值为270,其他的数值在这个值的基础上变化。


(图片摘自Dribble)


然后根据图片来看具体的数值变化:


从上图可以看出第一张图基础色的饱和度是24亮度是96。然后我们修改后两位数值也发现:


同色相变深时,饱和增加亮度减少;


同色相变浅时,饱和减小亮度增加。


看到这里,对HSB的基本操作也有了相应的了解。


但是在实际操作中,这些像是在翻字典。有没有更简单的方式,或许翻翻下面的内容,也许会有一些头绪。


用图层模式快速调整透明度打破配色方案。


图层叠加大家都了解,这里就不再介绍了。那如何将图层叠加的方法传送到配色方案里呢?


首先,最简单粗暴的方法就是在确定一个颜色后,把它复制出N分。在纯黑和纯白的纸上,做不透明变化。



相较于HSB调整透明度这个方法,尤其是对色彩的调整一脸懵的同学,由深到浅的一个直观视觉感受,上去就是不透明度调整的操作,快速达到自己想要的效果。


后来研究了配色口诀:近实远虚。最早接触这个词,是在高中接受专业培训,是色彩老师每天唠叨的一个词。


老师:“暗部太亮,把前后距离拉开。”

“后面景物要简化,勾勒一个大概的轮廓就可以了。”

“眼睛要深,头发要深,投影要虚。”


配色和绘画也是一样的,它也必须遵守近实远虚的原则(走梵高路线的同学请绕行)。近处的渔船,艳丽的人物就是你的产品,后面灰蒙蒙的山水,就是你的背景。在掌握了像这样概念之间的联系后,慢慢引向大版面的设计,一步步提高难度。


好多同学找不到配色的技巧,其实配色不需要技巧。先感性--再理性,不要一开始就考虑太多理论化的东西,理论化的指引是后期慢慢调整优化的。


配色方法


配色主要分为单色、渐变色和多色。单色和渐变色的配色稍微简单一些,主要讲一下多色的配色方法。多色的配色一般可拆解为主色、辅助色和强调色。


主色:一般作为背景存在,占比60%,决定了整个画面的基调;


辅助色:一般为主体的色彩,占比30%,常作为主色的对比色;


强调色:在主色和辅助色以外起强调作用,可以说是视觉焦点。有时只有两种色彩搭配的时候,辅助色也可作为强调色。


配色方案一般由5个左右的色彩组成,在这5种色彩中,通常2-3个颜色属于同色系。

(图片摘自Dribble)


配色方案常见的方法有两种,一种是直接找别人分享的配色方案。将配色方案运用到自己的设计中,例如百度搜索“配色方案”就会出现很多例子。


另外一种就是选择一张精致的摄影作品或者绘画作品进行吸色,再处理。


常用的配色工具和网站介绍


1、coolors.cn 刚打开网页时,会随机生成一个配色方案,按空格键也可进行随机切换,如果觉得某个色彩符合,就可以点击锁定按钮,将此色锁定。


2、kuler:可以在网页端使用,也有桌面本地版本。使用也很简单,只需要移动端上有取色点,便直接生产配色方案,同时在Ps里应用里看其他大神分享在kuler里的配色方案。


3、Reeoo:颜色分类与检索提供一些App,网页、平面、书籍,icon等设计的精彩案例。


4、Dribbble:网站多一些国外设计师的概念作品,但每个作品都有自己的配色色板,可根据自己的喜好来完成一个配色方案。


总结一下


配色方法不止这几种,每个同学心里都应该有一块色板,数值也不需要去刻意的调整,会显得呆板。不同情况调整的数值也不一样。而在实际运用的过程,配色方案只是让颜色更和谐,对于色调和色系的变化,这种方法当然是不够用的。


优秀的设计不能局限于此,在研究和审视自己的同时。扎实的基础,强烈敏锐的感受能力,对作品美学鉴定能力,设计构想表达能力都缺一不可。


每个同学的设计感受也不同,相对于生搬硬套的摸索,反而加入更理性化的内容,才是我们想要的设计吧。


实用 UI 设计技巧分享 ↓ (点击免费观看~)


软件基础-PS系统资料

http://www.makeru.com.cn/course/786.html?s=96806


UI编程系统资料

http://www.makeru.com.cn/course/details/2093.html?s=96806


超干货!90分钟教你做出高水准网站banner广告

http://www.makeru.com.cn/live/5623_1972.html?s=96806



UI学习交流群:700842555 想要和志同道合的朋友一起学习UI,大家互相分享自己的学习资料和作品,欢迎感兴趣的朋友共同学习,共同进步


附件有更多相关学习资料,感兴趣的小伙伴可以自行下载观看呦~~ 



Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票