UI界面设计 ·

UI设计色彩搭配攻略——紫色篇

紫色是由温暖的红色和冷静的蓝色化合而成,它比红色更柔和,比蓝色更温暖,它和绿色一样也是中性色,处于冷暖之间游离不定的状态。不同亮度的紫色所给人的感受也是不同的,幽暗深邃的紫色显得高贵神秘,明度较高的紫色显得浪漫优雅,因此可以根据所结合的色彩创建不同的情感基调。

 

 

1.紫色情感与联想

人们对色彩的联想,虽然会因为各种原因而存在差异,但是,却也有相当程度的共性。设计师在应用某种色彩之前,要充分理解和掌握这种色彩的情感意象以及它在特定环境下带给人们的联想与象征。

 

高贵、奢华>

一直以来,紫色都与高贵、典雅等特质联系在一起。在我国传统文化里,紫色是尊贵的颜色,如北京故宫又称为“紫禁城”,亦有所谓“紫气东来”;在西方古代,紫色象征权利,是为国王和贵族官员所专用的。因此紫色非常适合用于表达奢侈品的高端奢华感。

 

神秘、性感>

紫色带有暗色的特质,与生俱来的神秘、梦幻气质,很适合运用在体现性感、妩媚的产品定位的设计里。

 

浪漫、优雅>

浅色系紫色,让人联想起女性形象的优雅与温柔,营造出浪漫唯美的氛围。

 

 

2.紫色+中性色

紫+黑>

紫色和黑色都给人奢华高端感,所以两者搭配更显得雍容华贵。

 

紫+灰>

灰色的优雅加上紫色系冷艳,更显优雅、唯美。

 

紫+白>

紫色加白色,可使紫色略显沉闷的特征消失,变得淡雅、柔美。

 

 

3.紫+彩色

紫+蓝>

紫色和蓝色为邻近色,明度也很接近,对比比较柔和,神秘梦幻的紫色搭配上和科技感十足的蓝色,显得十分前卫时尚。

 

紫+红>

紫色另外一个方向的邻近色是红色,这组搭配是高彩度,但明度较低的色彩搭配,最好适度提高色彩的明度来增加对比,或者搭配高明度的色彩来增加画面上的层次感。

 

紫+绿>

绿紫色是对比色,色相对比比较强烈,但明度很相近,可以适当提高明度或饱和度来增加对比。因为绿色是属于大自然的颜色,所以绿紫搭配显得轻松有活力。

 

紫+橙>

紫色和橙色为对比色,对比比较强烈,明亮的橙色做为副色在暗调的紫色背景上可以使画面变得活跃醒目。

 

紫+黄>

紫色和黄色是互补色,不论是色相和明度差异都非常大,因此黄色与紫色的搭配容易产生相当强烈的视觉强度。

 

 

4.实战演示

接下来通过实战演示让大家加深理解,掌握紫色系搭配规律。

这是一则关于运动的海报文字资料:

首先寻找配图,选用一张运动员奔跑的图片,背景使用暗紫色。

深入刻画主体:

1、加入光线素材增加动感;

2、绘制浅紫色圆形色块增加画面的层次感和形式感;

3、穿插英文字母丰富主体细节。

最后加入文案,设计完成:

第一个方案使用紫色为主色调,

使画面具有一种神秘梦幻感。

 

紫+黑

加入黑色后,更显高端大气,

也把运动很酷的气质体现了出来。

关键词:高端、酷

紫+灰

加上优雅的灰色后,多了分浪漫、唯美。

关键词:浪漫、唯美

紫+白

紫色加白色,可使紫色略显沉闷的特征消失,变得淡雅、柔美。

关键词:淡雅、柔美

紫+蓝

蓝色具有理性、安静的属性,加入蓝色后原稿少了份动感,多了一份宁静。

关键词:科技、安静

紫+红

红色是最热情的颜色,加入红色后画面显得更加热情时尚。

关键词:时尚、热情

紫+绿

绿色是属于大自然的颜色,加入绿色后画面显得轻松有活力。

关键词:轻松、活力

紫+橙

紫色和橙色对比比较强烈,橙色做为副色在紫色背景上可以增加画面的活跃感。

关键词:活泼、朝气

紫+黄

紫色和黄色是互补色,不管是色相或明度差异都非常大,黄色与紫色的搭配产生相当强烈的视觉冲击力。

关键词:鲜明、醒目

 

 

5.结语

紫色处于冷暖之间游离不定的状态,因此可以根据所结合的色彩创建不同的情感基调。紫色与生俱来的神秘、梦幻、高贵等气质,如能恰倒好处的运用, 对于增强设计冲击力和表现力、体现设计主题、升华设计内涵有很大的帮助。

 

 

 

 

作者公众号:艺海拾贝Design