美文网首页UI设计
设计基础--配色篇

设计基础--配色篇

作者: 神奇的小豆豆 | 来源:发表于2017-10-24 10:15 被阅读0次

最近在重新整理自己的UI设计知识,梳理了整个学习体系。这是平面设计里的第一部分,关于配色。文章是学习笔记,随性,从自己理解的角度分析编写,用词偏向于通俗易懂型。能用简单的话解释清楚为什么要把它复杂化呢?

em~先来点看起来专业的

1.色彩原理

三原色:红  绿  蓝 , 这就是传说中的R(red) G(green) B(blue)。

注:“红黄蓝”是绘画的三原色,主要用于绘画,印刷,是表现在纸上的。 “红绿蓝”是光谱的三原色,主要用于电视、电脑等屏幕成像,是视觉的三原色。

色环

下面我们来看看色彩的三要素:色相(H)、饱和度(S)、明度(B)

视觉色彩三要素模型

色相(H):就是颜色的名称,是颜色区分的主要依据,如色环图中的红色、橙色、黄色等。注意:淡黄色和黄色是同一色相,在色环图中,名称区域内的都是同一色相;黑白灰无色相,因此从这个角度来说黑白灰不是颜色。

饱和度(S):就是颜色的鲜艳程度,即颜色的浓淡,例如:黄色、淡黄色。饱和度越大,颜色就越鲜艳。

明度(B):就是颜色的明暗,也即深浅差别。例如:粉红、大红、深红。

这是PS颜色面板里的色彩三要素分布图


2.配色基础原则:不要超过三种色彩(这里指的是大范围大面积用色)

色环

1.单色调:同种颜色组合,不同明度或不同纯度变化的对比

2.近似色:相邻颜色 ,和谐,有关联

3.互补色:一条直线 ,对比强烈,强调色

4.分裂互补色:互补色的两边,如:蓝色跟红色或黄色就是分裂互补色,对比强烈 ,视觉冲击强

5.原色 间色:共性,和谐。切记使用该配色方案时不可大面积叠加使用,可小面积间隔开使用,如按钮。

3.颜色的味道

我们其实是根据生活中经常出现的事物而惯性去记忆每种颜色的,也会因为这种记忆让我们对颜色有一种味蕾。

4.颜色的气质

不同颜色适合于不同的场景氛围。

红色:热情洋溢、温暖、让人兴奋、激动、紧张,但看久了容易让人产生视觉疲劳。

黄色:活力四射、高傲、张扬,但看久了容易让人产生视觉疲劳。

蓝色:压抑、伤感、专业、科技感。

绿色:健康、生机勃勃、柔顺、平和。

紫色:沉闷、神秘、高贵优雅。

5.颜色的冷暖

颜色的冷暖色调

除了不同色相的冷暖不同外,同一色相也有相对色温,相对冷暖。单色系的相对冷暖一般是运用在场景笼罩着某个事物的身上的高光阴影和反光部分,塑造出物体的立体感。

6.我要的是什么颜色?

知道了上面这些,可是我还是不会配色啊,那我该怎么选择颜色呢?

当自己不清楚用什么颜色时,找找能承载你情感寄托的媒介物,如冬天你会想到梅花,夏天你会想到荷花;

可以通过关键字找到对应的照片,图片,服装,任何可能的东西,只要能表达出你想要的感受,都是可以模仿的对;

他们代替你说出了你想要的感觉,通过对这些媒介物的分析和提取,能找到对应的色彩。

7.用什么颜色来搭配?

引用第2点配色基础原则所述:

不要大范围为大面使用超过三种颜色。

1.单色调:同种颜色,不同明度或不同纯度变化的对比

2.近似色:相邻颜色 ,和谐,有关联

3.互补色:一条直线 ,对比强烈,强调色

4.分裂互补色:互补色的两边,如:蓝色跟红色或黄色就是分裂互补色,对比强烈 ,视觉冲击强

5.原色 间色:共性,和谐。切记使用该配色方案时不可大面积叠加使用,可小面积间隔开使用,如按钮。

8.颜色有了如何搭配?

例:一个活动页面中通常由以下元素组成(五角星代表重要性)

标题(★★★)

产品(★★★★)

副标题(★★)

活动详情(★)

背景图案

对第1重要的:用强烈色相对比(互补色或对比色)+强烈明暗的对比

对第2重要的:用稍弱的色相对比(相近色)+强烈明暗对比

对第3重要的:可以只用明暗对比且无色相差异的颜色

9.配色口诀:近实远虚

设计中的层级

设计跟绘画一样,必须遵循近实远虚的原则,也只有这样设计出来的作品才有层次。近处的渔船,艳丽的人物就是你要突出的东西,后面灰蒙蒙的山水就是你的背景。

成功的配色方案是理智与情感的结合

写了改改了又改,终于完成了第一稿,还有很多不完善的,后面根据经验总结再逐步完善吧~ 大家有什么不同的意见可以相互讨论一下,互相学习,共同进步啊!

相关文章

  • 设计基础--配色篇

    最近在重新整理自己的UI设计知识,梳理了整个学习体系。这是平面设计里的第一部分,关于配色。文章是学习笔记,随性,从...

  • 职场疑惑:30岁的设计师还有机会去应聘面试吗?

    前面讲到了UI设计的配色方案红色篇:《UI设计配色宝典:让设计师重新全面认识色彩系列——红色篇》,@520设计网昨...

  • 设计配色基础

    配色基础认知 对颜色的感觉 尽管不是每个人都懂得应该如何配色,但仍然凭感觉判断一组配色是不是还不错。这就是对颜色的...

  • 色感弱?提升色彩敏感度应该补这些书

    1.七日掌握设计配色基础 这本书分为“配色的准备”和“配色的实践”两大部分。前半部分主要介绍了配色的整体效果和配色...

  • 速读《设计配色基础》

    #一周一书# 从这周开始每周为大家分享一本书,这些书都是自己读过且觉得还不错的,文章中我会尽量精简书的内容,概要精...

  • 《设计配色基础》摘录

    以前一直自认为对色彩感觉良好……看了这本书之后再也不敢吱声了。这里摘录一部分最近可能会用到的常识。 HSB 模式是...

  • 读书

    《写给大家看的设计书》 ★ 《七日掌握设计配色基础》 《演说之禅》和《Slideology》 ★ 《平面设计原理》...

  • PPT设计思路——配色设计

    配色设计之前在《作何做好PPT——配色篇》中也有说到过配色的搭配方式,和配色的原则。所以也会在里按照这个思路去讲解...

  • 你的表格设计还是那么传统?看看有主见的设计师是怎么设计的

    在上一篇文章中,我们以表格为设计基础,从线条、配色、配图等多方面入手,对表格进行了视觉上升级美化。这种设计虽然美观...

  • 《平面设计配色全攻略》

    全书的内容分为两部分:第一部分是平面设计配色的基础知识;第二部分是平面设计配色应用。《平面设计配色全攻略》第二部分...

网友评论

    本文标题:设计基础--配色篇

    本文链接:https://www.haomeiwen.com/subject/vkquuxtx.html