header_v1.7.40

设计师配色宝典!教你从零开始学配色

1年前发布

原创文章 / 平面 / 书籍
数艺社 原创,如需商业用途或转载请与数艺社联系,谢谢配合。

色彩搭配的原理、方法、心理影响,平面设计、网页设计、APP设计、淘宝店铺设计和家居装饰设计等设计领域的色彩搭配方法与案例


如果说语言是思想交流的工具,文字是文化传播的工具,音乐是表达情感的载体,那么色彩的功能更是显而易见。有专家说“一个婴儿刚用双眼来认识这个世界时,最先辨认的是色彩而不是形状”“远看颜色,近看花,不仅是指距离的远近,还包含着视觉的先后”。在色彩纷呈的世界中,平常似乎是无意识在设计作品中使用的色彩,也都蕴含着丰富的意义,可以给人的身心带来很大的影响。设计师在完成一件设计作品时,需要通过色彩的搭配来表达主题思想和感情,哪怕只是单一的色彩,也可以传递独特的信息与情感。


一、如何快速实现完美配色

1、配色原则

在色彩搭配中,有一些最基本的原则,掌握这些原则可以使画面中的色彩搭配达到事半功倍的效果。

•色彩的搭配要与想表达的内容、气氛相适合、协调。

•不同的色彩会使人产生不同的联想,选择色彩时需要和想要表达的内涵相关联。

•色彩的搭配要依实际决定是使用鲜明的搭配吸引用户,还是使用稳重的搭配树立形象。

•为需要突出的部分赋予特殊的色彩,可以起到画龙点睛的作用。

•白色是使用最为普遍的颜色之一,对于它的使用有很多技巧,其中最为常用的就是留白。留白可以给人遐想的空间,使人心情舒畅、愉快。

•黑色、白色和灰色是万能色彩,可以跟任何颜色进行搭配。


2、如何快速实现完美配色

配色有很多方式方法,比如色彩联想配色、主色调配色和色彩比例配色等。

▶色彩联想配色

在进行配色时,可以试着联想某个物体的色彩,从物体色彩出发。例如想表现出一种清凉舒适的感觉,可以联想到水、植物以及其他有生机和活力的东西,这样在脑海中浮现的代表颜色就有蓝色、绿色、白色,然后可以把这些颜色挑选出来加以运用,如图所示。

undefined

此款家居装修风格属于地中海风格,设计理念是由蓝色产生的凉爽舒适感联想到海洋和天空,进而在设计中应用蓝色的背景墙及淡蓝色的屋顶。

undefined


▶主色调配色

选定色彩时,先确定一个主色调,再配一两个合适的辅助色;如果想要呈现一种沉着、冷静的感觉,应以冷色调当中的蓝色为主,如图所示。

undefined


设计者首先确定了蓝色为主色调,它是有较强扩张力的色彩,再在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的风格构成较明显的影响。

undefined



▶色彩比例配色

同样的配色在面积、比例和位置稍有不同时,带给人们的感觉也会不同,在制作时可以考虑多种配色组合,挑选效果最佳的配色色彩,如图所示。

undefined


界面使用不同比例的紫色和橘黄色作为背景色,这种不同比例的色彩搭配可以给人耳目一新的感受,同时使关注点有了侧重,对于主题的突出非常适用。

undefined



二、色彩搭配的选择标准

如何为自己的作品选择恰当的配色,是很多设计师最为难的地方。色彩搭配时颜色的选择是有规则可循的,作品的不同属性或浏览者的针对性都决定了色彩搭配的方式。


1、根据行为选择配色

通常人们对色彩的印象并不是绝对的,会根据行业的不同产生不同的联想,如提起医院,人们常常在脑海中联想到白色;说到邮局,人们往往会想到绿色。这是从时代与社会中逐渐固定下来的知觉联想,充分利用好对这些职业色彩的印象,在设计时所挑选的颜色便更能引起人们的共鸣,如图 所示。

undefined


健康行业的网页使用高明度的蓝色与白色相搭配,体现出页面的清爽、干净;使用墨绿色作为点缀色,体现出健康的理念。

undefined


TIPS:在选定配色的时候,除了要以主观意识作为基础的出发点,还需要辅以客观的分析方法,如市场调查或消费者调查;在确定颜色之后,还要结合色彩的基本要素对其加以规划,以便将它们更好地应用到设计中。


下表所示为依照行业的特点归纳出来的行业形象色彩表,在多数情况下,关于颜色的选择都可以遵循该表格。

undefined


2、根据商品销售阶段选择配色

色彩堪称世界性语言。在市场日趋成熟、竞争品牌林立的大环境中,要使你的品牌具有明显区别于其他品牌的视觉特性、更富有魅力、能够刺激和指导消费者以及增加消费者对品牌形象的记忆,色彩语言的运用极为重要。

色彩也是商品更重要的外部特征。产品的销售阶段是指从该产品进入市场到被市场淘汰的整个过程。我们可以根据产品所处不同阶段市场的不同反应和企业所要达到的营销宣传效果,来确定网页的配色方案。

▶商品导入期

处在导入期的产品一般都是刚上市,还未被消费者所熟知。为了加强宣传力度、刺激消费者的感官、增强消费者对产品的记忆度,可以选用艳丽的单一色系作为主色调,以不模糊商品诉求为重点,将产品的特性清晰而直观地诠释给用户,如图所示。

undefined


该商品宣传广告使用浅色渐变色作为背景色,以提高画面整体的明度,并且不影响商品的可辨识度,直观而重点地突出了桌子上的食品;多彩色的搭配能提高浏览者的食欲。

undefined


TIPS:色彩的定位会突出商品的美感,使消费者从产品的外观和色彩上看出商品的特点,使其从色彩中产生相应的联想和感受,从而接受产品。


▶商品拓展期

经过前期的大力宣传,处在拓展期的产品一般已为消费者熟知,市场占有率也开始相对提高,并开始有竞争者出现。为了能够在同化的产品中脱颖而出,这一阶段的网页应该选择比较时尚和鲜艳的颜色作为主色调,如图所示。

undefined


虽然界面主色调用到了黑色,但是搭配了高纯度的绿色和蓝色,使整个页面科技感强,既符合电子商品本身的特性,又可以吸引浏览者的眼球。

undefined


▶商品成熟期

处在成熟期的产品一般已经有了比较稳定的市场占有率,消费者对产品的了解也已经很深刻,并且有了一

定的忠诚感;而此时市场也已经接近饱和,企业通常无法再通过寻找和开发新市场来提高市场占有率。此时企

业宣传的重点应该是维持现有的顾客对品牌的信赖感和忠诚感,所以应该选用与产品概念相同或相符的色彩作

为主色调,如图所示。

undefined


界面使用蓝色作为主色调,围绕着企业形象和色彩进行搭配,强化了企业形象和产品;同时蓝色作为冷色调给人以凉爽的感觉,符合产品理念。

undefined





界面使用橙黄色作为主色调,围绕着企业形象和色彩进行搭配,强化了企业形象和产品;同时橙黄色作为暖色调会勾起人的食欲,符合产品理念。

undefined


▶商品衰退期

市场是残酷的,大多数商品都会经历一个从兴盛到衰退的过程。随着其他商品的更新和更流行的商品出现,消费者对原来的商品不再有新鲜感,该商品的销售量也出现下滑,此时这个商品就进入了衰退期。

当产品处于衰退期时,消费者对产品的忠诚度和新鲜感都会有所降低,他们会开始寻找新产品来满足自己的需求,最终导致产品的市场份额不断下降。这一阶段的主要宣传目标就是保持消费者对产品的新鲜感,因此,需要对产品形象进行改进和强化,如图所示。

undefined


在衰退期,需要对产品形象进行改进和强化。此款海报使用黄色为主色调,搭配黑色和红色,体现出产品的理念,并且创意感十足。

undefined


三、App应用的色彩搭配

在消费者都将注意力集中于手机屏幕的同时,这块屏幕也成为这一轮品牌竞争角逐的焦点。App应用的创意设计与建设开发已成为一个行业的热点,它在移动互联时代以优秀的创意与产品执行力为品牌客户进一步延伸与受众的触点,加强品牌的互动性,尤其是对消费者深度连结的能力。因此App应用的色彩搭配好坏也就成为了设计师在设计时不容忽视的元素。

1、App应用的色彩搭配

设计者在决定App应用的配色前,首先要考虑App的性质、内容、受众目标、表现出来的视觉效果和营造的操作氛围等因素,然后再根据这些因素为App 应用制定合理的配色方案,并严格按照配色方案塑造应用界面中的每个元素。

2、App 应用配色不超过3种

App 应用的配色应不超过3种。也许很多人都会认为这种配色方式就是不要使用超过3种不同的颜色值。其实不然,不超过3种颜色的搭配是指不使用超过3种色相的搭配。在单个色相中,设计者可以运用颜色的明度或饱和度做出色彩的丰富性,但色相的使用不要超过3种。

颜色并不是越简洁越好。图所示为单一颜色和多种色相颜色配色的对比,由此可以看出设计者在使用多种颜色的时候,还需要考虑产品的内容与核心。

undefined


TIPS:单色的设计会使用面显得单调乏味,而整体颜色饱和度过低会导致画面沉闷而不透气。明快的颜色和明暗的色彩搭配能使画面显得层次感丰富而又有朝气。


在App 应用界面设计中,色彩是设计中的重中之重,能否正确和完整地用色彩表现出产品的气质至关重要。单一的色相、丰富的明度和饱和度能使界面看起来有层次感和丰富性,而精简的颜色处理起来也会很容易统一

和把控。在用色时,颜色越少越好,但要保证能够正确地展现出需要表现的功能和元素,如图所示。

undefined


为了区分更多的内容区域这里运用了3 种颜色,但颜色的过度导致页面分割凌乱,红色在页面中就是多余的,功能分割相对也是多余的。可以用两种颜色时候,就不要用到3 种颜色;可以用一种颜色的时候,就不要用两种颜色。

undefined


四、音乐App的色彩搭配

我们对音乐的渴求一刻都不曾减少现在无论上班途中、休息时还是工作中,我们总习惯享受一下听觉的盛宴,毫不夸张地说,音乐已成为了我们生活的一部分。有很多热情澎湃的设计师也在努力地为音乐的移动端创造一个富有创意的、吸引人的精致界面。这里我们要制作一款质感十足的音乐App 软件界面,通过其独特的质感给浏览者爱不释手的感觉。

1、设计思路

音乐App 的应用界面通常包括启动界面、注册界面、播放界面、播放列表界面和菜单界面等。通常App的界面配色有着高度的一致性,并且多数界面根据App 图标的颜色进行配色。作为音乐App 应用,适用人群非常广泛,因此在设计时最好设计多款色彩,以便适用于不同的人群,由于篇幅有限,这里我们只制作某音乐App 的一个播放器界面,图所示为该App 应用的其他界面。

undefined


2、颜色选取

根据之前对音乐App 色彩的分析,此处采用深蓝色作为主色调,用红色作为强调色,这两种对比色的搭配使浏览者耳目一新,如下表所示。

undefined

将深蓝色与补色或分离互补色相搭配,会呈现出一幅整体色调较为统一并且有强烈对比的画面,这里的红色和深蓝色的搭配就是应用了此种效果。


3、素材选取

由于制作的是音乐App 应用界面,因此在素材方面需要收集专辑图、歌手写真、唱片图等,如图所示。

undefined


4、文本配色

对于音乐App 而言,并不需要突出过多的文字,因此在文本配色方面采用了明度配色方式,通过改变文本颜色的明度与背景色区分,在需要强调的地方,如标题、歌曲名和状态栏等处的文字采用白色字体,如下表所示。

undefined


5、页面布局

为了保证用户在平板电脑和手机端都可以正常预览并且适应该应用,因此界面采用了竖版排列,如左图所示。

此款音乐App 播放界面采用常规布局方法,按照人们的阅读习惯,从上到下依次放置专辑图、歌曲名称、进度条和播放按钮等,如图右图所示。

undefined


6、配色原则

首先为界面添加从黑色到深蓝色的渐变配色,这是为了使界面不单调,同时使界面拥有质感;由于是音乐App 界面设计,因此在背景中添加了专辑的照片,经过处理后与背景相融合,如图所示。

undefined


渐变通过有规律性的变化,给人很强的节奏感和审美情趣。背景中的人物素材采用了柔光和半透明化处理,这样可使其与背景更加贴合。

undefined


界面的顶部制作遵循iOS 的制作规范,将需要重点突出的内容填充为白色,在按钮处采用了明度不同的配色方法,采用了蓝色作为按钮的配色,如图所示。

undefined

在音乐App 界面中,需要突出的是手机状态栏和歌曲名称等内容;对于不需要重点突出的菜单按钮等可以采用强调效果不明显的明度配色,这样使整体界面看起来层次分明。


接下来制作歌曲图片及名称部分,将这部分安排在页面的上半部分,这是因为人们的阅读习惯是从上到下,安排在这里可以使浏览者以最快的速度看到歌曲名称及歌曲的配图,如图所示。

undefined


TIPS:多数音乐App 会将图片部分设定为圆形,主要有以下几点原因:其一,方形太过于单调;其二,使大脑可较轻易地处理圆形内的信息,减少认知的压力;其三,相较于方形,圆形更柔性、有机、安全、耐看、现代与友善,也更能与他人进行情感交流;其四,更有聚焦的感觉;其五,大多照片的四周都是无意义的背景或信息,圆形可以将其切除;其六,方形的对角线比边缘还长,使用户的目光易延伸出去,而圆形半径长皆一致,使用户可花更少时间在理解内容上,眼球也不需要移动。


接下来是进度条以及播放按钮的绘制,这里将需要突出的内容以红色呈现,将需要强调的歌曲时间及已播时间以白色文本显示,并添加其他相应的内容,最终的界面效果如图所示。

undefined


作为一款音乐App 界面,整体界面应以简洁为主,同时要保证界面的一致性。此款App 界面运用蓝色与红色的对比色搭配,不仅突出了重点,又使界面并不显突兀。

undefined



19

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功