UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

Post 5 of 1006

之前,小编和大家分享了同色系和邻近色的搭配技巧,本期我们将继续往UI设计配色方案探讨,说说色彩差异较大的对比搭配技巧及其特点。

相关阅读:

《单色搭配同样玩出多种花样?分享最适合新手的UI设计配色方案》

《分享最适合新手的UI设计配色方案:邻近色让界面色彩更协调丰富》

————

什么是对比色?色相环上相距120度到180度之间的颜色,我们称之为对比色,其中“黄-红-蓝”和“橙-紫-绿”是最典型的对比色。

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

由于对比色在色相环上的相距较远,色彩差异比较大,因而往往能给网站带来丰富的视觉层次和强烈的视觉层级。但在实际网页设计操作中,由于对比色的色彩差异较大,如果搭配上把控不好,容易产生刺眼、杂乱的感觉。

因此,我们可以通过以下方式进行色彩调和:

① 控制好画面的色彩比例

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

色彩比例越接近,冲击感越强,如果想让画面更有冲击力,可以使对比色之间的比例更加接近,但同时也比较难掌控。

因此,我们可以选出一种颜色作为主色调,另一种作为辅助色或点缀色,既能保证画面的统一性,又能具有鲜明的色彩对比视觉效果。

② 降低明度、饱和度,调和其对抗性

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

在保持色相不变的基础上,改变对比色的明度和纯度,这样即可保留对比色的搭配特点,同时又可降低过强的视觉刺激感。

③ 加入黑白灰缓冲其强烈的对抗性

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

黑白灰是万能的调和色,若想降低画面的视觉刺激感,除了降低色相的明度和纯度,还可添加白色使画面更加透亮;添加黑色让画面更沉稳;以及使用灰色保持中性态度。

【分享对比色的色彩搭配方案】

• • • 黄色和红色 • • •

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

红色和黄色同位暖色系,并且在色环上都拥有邻近色的共有色(橙色)。虽然红色和黄色的属性相似,但黄色明度高而红色明度,所以红配黄技能搭配统一又能很强的对比效果。

• • • 红色和蓝色 • • •

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

红色是色环上最暖的颜色,蓝色是最冷的颜色,红蓝搭配能形成了强烈的对抗性,具有强烈的视觉冲击力。

• • • 蓝色和黄色 • • •

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

蓝色明度较低会让整个界面显得低调沉闷,若加入明度很高的黄色,会形成非常高的对比性,让整个视觉效果产生鲜明的冲击力。

• • • 绿色和橙色 • • •

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

绿色和橙色的搭配,能让人联想起“橙子园”,因此这两者颜色搭配一起能让画面洋溢着大自然的气息,给人自然清新、朝气活力的感觉。

• • • 橙色和紫色 • • •

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

橙色和紫色的对比效果比较强烈,能相互突出各自的色彩特性,让画面变得更加活跃醒目。明亮温暖的橙色搭配暗调偏冷的紫色,还能很好地让画面达到平衡。

• • • 紫色和绿色 • • •

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

紫色神秘而又成熟,绿色则代表希望和活力,两者搭配一起能营造出比较梦幻的效果。

【分享对比色的色彩搭配案例】

网站设计案例一:Martin Wren

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

虽然黑色按钮设计更适合整体网站设计,然而橙色CTA按钮却更容易吸引用户的注意力,有利于促进转换率。

网站设计案例二:Teletrack Plus

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

尽管登录页面有设备模型和功能列表的元素,然而高饱和度黄色的小按钮与蓝色背景的对比度较高,反而更加引人注目。

网站设计案例三:El Passion

UI设计配色方案进阶版:对比色让界面视觉层级更加强烈

UI设计配色方案

尽管绿色能营造出一种宁静、自然的氛围,然而绿色按钮的确足够有吸引力能成为整个页面的焦点,这大概与背景图像和简短文本信息所凸显的结果。

总的来说,对比色的确能提升整个网站的活力,但同时需要注意的地方也有很多,一旦用处效果很可能会有适得其反的效果。

This article was written by admin

MENU
網頁設計公司