欢迎加入QQ讨论群258996829
麦子学院 头像
苹果6袋
6
麦子学院

Ui设计学习色彩搭配详解

发布时间:2017-08-04 18:08  回复:0  查看:2690   最后回复:2017-08-04 18:08  

UI设计配色是UI学习中非常基础也非常重要的部分,好的配色方案能让你的作品更有质感,更能满足用户的需求,这里为大家介绍一下UI设计的最佳三色方案,认真学习一下吧。

  一、音乐与色彩

  当你听音乐时你觉得什么? 我有一个很有视觉的想象力,所以我经常不禁要画出颜色,形状,物体,甚至是景观。

Ui设计学习色彩搭配详解



我想与你分享一个关于一个音乐播放器的想法,根据播放的歌曲或作品,改变颜色。 如你所知,大多数音乐播放器只是选择专辑封面,并在播放专辑中的歌曲时按照其颜色托盘。

  一方面,我觉得这很无聊。 另一方面,歌曲并不总是具有与封面艺术或专辑剩余部分相同的主题。

  我认为,如果歌曲的封面颜色根据音乐的速度或速度变慢或是什么类型而改变,这将是一个好主意。 但是,这个音乐播放器怎么开发?

  首先,它应该有一些模式或算法,以获得良好的颜色组合。 其次,色彩参数(色调,值,饱和度)应遵循音乐参数(节奏,旋律,动力/表达,和声)。


Ui设计学习色彩搭配详解

Ui设计学习色彩搭配详解

二、如何找到最佳三色计划?

  我经历了数百幅自然图片,试图为我的音乐播放器找到一个配色方案。 这是漫长而艰苦的工作,但现在我有很多新的伟大的颜色组合,我从来没有使用过。

  通常情况下,天然托盘可以很好地用于UI设计,但并不总是如此。 自然有许多阴影,大胆的颜色更适合吸引你的注意力。

  另一件要记住的是,尽管将两种颜色融合在一起很容易,但添加三分之一可以让每一种颜色更加复杂,因为每种颜色必须完美地补充其他两种颜色。 平衡是和谐的关键。


Ui设计学习色彩搭配详解


我发现一些非常好的三色计划,我试图理解为什么它适合这样好,而其他人不工作。 我把这些设计放在一个色轮上,发现所有这些组合都可以分为三类:所有三种颜色彼此相邻,两种颜色相邻,另一种是相反的,三种颜色彼此相对, 色轮 我将在一本关于颜色理论的书中发现的颜色组合使用经典术语:类比,分裂互补和三元组。

  1、类似的


Ui设计学习色彩搭配详解


最简单的组合是类似的方法。它是通过使用在色轮上彼此相对靠近的三种颜色来创建的。角度之和小于90度。例如,如果您想要以主色为红色,则可以添加橙色或棕色。除了温暖的红色和冷粉红色或紫色之外,大部分颜色彼此相邻配合在一起。

  非常漂亮的颜色自己,但把它们放在一起,看起来像一个腐肉鸟的内脏。蓝色,绿色和紫色的所有色调相互之间的效果非常好,尽管一些颜色可以更加结合,一些更暗。我建议您先从自然照片中吸取灵感,然后再使用色轮。

  只使用色轮来挑选颜色,就像在无限二维平面上找到一个圆形的一维针。即使具有重要的艺术才能和长时间观察自然色彩,您需要很多经验才能指出色轮,并获得您想要的。实践帮助很多。


Ui设计学习色彩搭配详解


2、使用渐变

  如果您已经有两种颜色,可以通过拆分两种颜色来找到第三种颜色。 在我看来,这是找到三色方案的最好和最简单的方法。

  如果两个颜色在色轮上彼此相邻,则这种渐变可以起作用,如果这些颜色是相反的颜色,则不能总是创建良好的渐变。 但如果是类似的颜色,它总是看起来不错。


Ui设计学习色彩搭配详解


  2、拆分互补

Ui设计学习色彩搭配详解

两种颜色彼此相邻,第三种颜色与色轮相反。 角度之和小于180度。 有一些模式有助于您如何选择:黄色对于红紫色,蓝绿色,绿松石紫色,红色的作品真的很好用于绿蓝紫色。 这些只是几个例子。 可能性延伸到人类感知的边缘。

  许多颜色很好地配合在一起。 有一种方法可以轻松创建拆分互补方案。 首先,您将在设计中拿起两个相反的大胆颜色,然后在其中一个旁边找到第三个颜色。

  例如,你想要有黄色和紫色,我建议您从紫色侧添加粉红色或蓝色,或从黄色侧添加绿色。 如果您使用正确的饱和度和对比度,所有这些颜色都可以很好地融合在一起。


Ui设计学习色彩搭配详解

 3、三原色


Ui设计学习色彩搭配详解

三色方案由色轮上彼此相对的三种颜色组成。 这是更多样化的配色方案之一,也是最困难的。 很难找到一个很好的组合。 这里有一些自然的图案:绿色和黄色都很好,所有的色调都是红色,粉色,紫色和蓝色。

  它是基本的花组合:绿叶,五颜六色的鲜花和黄色的雌蕊。 正如你所看到的,它真的很好地在一起工作。 另一个伟大的灵感来源可以是黎明和日落时的天空。 它有很多不同的丰富多彩的组合:蓝色,紫色,橙色红,黄,绿松石等。


Ui设计学习色彩搭配详解

4、受到自然的启发

  我使用自然色调调色板作为我的设计,因为它具有最好的颜色组合,这对你的眼睛真的很好。

  颜色不仅仅是红色,绿色和蓝色的数字,我们可以把它放在一台电脑里,并得到结果。 事实上,使用颜色选择器找到正确的颜色真的很难。

  自然的照片永远是我工作灵感的重要来源,它帮助我学习了很多颜色如何配合在一起。 我认为,如果他们只是关闭他们的颜色选择器并打开景观,植物,花朵和天空的照片,每个人都会更容易找到很好的色彩组合。

  另外我想和大家分享一下如何从大自然的图片中挑选颜色。例如,您发现自然界中你想要用于颜色托盘的美丽图片:


Ui设计学习色彩搭配详解

  下一步,您可以将此图片添加到Adobe Color CC或自己拾取颜色:


Ui设计学习色彩搭配详解

从概念到实物


Ui设计学习色彩搭配详解

大自然的色彩有千万种,也是我们设计工作者用色的源泉。如何将自然的色彩合理的用在我们的设计中?这不仅需要理论上的支撑,同时也需要设计师们的鬼斧神工。

 

 

来源:ui中国

您还未登录,请先登录

热门帖子

最新帖子