火星网校
轻松理解的色彩搭配技巧，一起来学习吧！
发布时间：2024-08-17 18:49:17 浏览量：112次
最近在读一本《写给大家看的设计书》，里面有一节是关于颜色的讨论，比较通俗易懂，所以将此节的一些关键知识点记录下来，并结合自己的经验给大家做个颜色搭配的总结，供大家作为参考。
1 色轮
要想在界面中搭配出好看的界面颜色，首先，我们得有一个颜料库，供我们进行颜色的选择，接下来就看下面的内容，看看如何创建我们的颜料库。
基础三原色轮
1.2 三间色
然后在三原色的基础上，混合相邻的两种颜色，就得到新的三种颜色。我们称之为三间色。
三间色轮
如果我们继续来填充中间的白色部分，就会得到下图中的6种颜色
现在我们已经有了12种颜色，这在前端界面设计的颜色选择中，就已经基本够用了。
那么，有了这个色轮后，应该如何去搭配好看的颜色呢，我们继续往下看。
2 颜色关系
2.1 互补
色轮上相对（即完全对立）的颜色为互补色。由于它们如此对立，所以我们在做界面设计，最佳搭配是 ，一种作为主色，另一种用于强调。主色意味着界面的主题颜色，强调意味着某些按钮或强调性的文字，可以选取互补色，让用户能够第一眼就注意到你想表达的东西。
互补色1
互补色2
2.2 三色组
彼此等距的三种颜色通常会形成一个让人愉悦的三色组。红色、黄色和蓝色就是一种极其流行的颜色组合，儿童产品通常都采用这种组合。所有三色组中的三种颜色都有基础色使其相互连接，因此看上去非常协调。
三色组
2.3 分裂互补三色组
另一种形式的三色组称为分裂互补三色组。从色轮的一边选择一种颜色，再在色轮上找出它对面的互补色，不过并不直接使用这个互补色，而是使用该互补色两侧的颜色。这样得到的组合会有一种更为细致的颜色边界。
分裂互补三色组
2.4 类似色
类似色组合由色轮上彼此相邻的颜色组成。不论组合两种颜色还是三种颜色，它们都有相同的基础色，这就形成了一个协调的组合。使用类似色，不会像互补色那样有明显的强调特征，但是它会给人一种干净整洁的效果。
类似色1
类似色2
3 暗色和亮色
到目前为止，我们使用的基本色轮只涉及纯“色调”，也就是纯色。还可以向不同色调增加黑色或白色，这样能大幅扩展这个色轮，相应地丰富我们的选择。
- 纯色就是色调。
- 向色调增加黑色就构成一个暗色。
- 向色调增加白色就构成一个亮色。
暗色与亮色
3.1 单色
单色组合由一种色调及其相应的多种亮色和暗色组成。
比如，色调是黑色，然后将不同的亮暗色混合到黑色当中，就可以得到下图中的效果
单色
3.2 注意色质
色质是指某种颜色的特定明暗度、深浅度或色调
某些颜色放在一起是不合适的，也就是说他们的色质比较接近。
色质
3.3 暖色和冷色
关于冷暖色，大家都比较熟悉了，某些颜色看起来让人觉得比较暖和，有些则会感觉到比较冷。
比如红色，黄色是暖色，蓝色紫色是冷色。
4 总结
对于颜色的选择
- 颜料库：就用创建好的12色轮；
- 选择主题色；
- 选择好一个色调，作为产品的主题色；
- 整体上可以尽可能多的使用类似色以区分不同的功能及菜单；
- 在有描述性的大段文本时，可以使用单色+亮暗色组合来让整个文章有更好的可读性。
- 使用互补色，可以强调出你想让人注意到的东西，但整个界面不宜过多，否则会让人产生混乱的感觉；
- 注意色质的差别，应避免使用色质相近的颜色放在一起；
- 注意冷暖色对主题色选择的影响。暖色趋向于“活跃”，冷色趋向于“安静”，所以，一般会使用冷色作为背景或主题色，而暖色作为局部或强调。我们比较常见的主题色比如是蓝色或绿色，这些都是冷色，而红色或黄色作为主题色的产品就比较少，它们经常会作为一些警告颜色而出现。
不过，最终颜色的选择还是要看产品的定位和受众，以上只是个人总结出的经验，比如如果是儿童产品，那可能颜色越丰富，对比性越强效果越好。
好了，以上就是颜色分享的所有内容了，以下是我做的Qt客户端开发实战，有兴趣的同学可以参考了解一下。
这是我的视频课程，感兴趣的点击咨询学习吧！
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
