合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师。首先,UI设计中的色彩是最直接性的“语言”。它能够在第一时间内吸引观众的注意力,使观者的“眼睛”得到放松或者警惕。其次,色彩是最为引人注目的视觉因素。
掌握色彩在设计界面中的运用是一名优秀UI设计师必须掌握的技能,下面介绍一些在UI设计中,实用的色彩搭配方案。色彩在视觉传达中的作用非常的重要,在UI设计中也同样如此,一个好的UI色彩搭配方案可以起到:
•显示界面的整体架构
•明确视觉层级关系
•营造界面整体风格,甚至增加转化。
色彩平衡在设计中至关重要,因为用户第一眼看到网站或应用时,颜色具有很大的影响力,设计师的色彩方案就显得尤为重要。
1. UI设计单色搭配
单色搭配永远是一个经典的选择,基于一种颜色进行设计,以色调和饱和度区分层次。
2. 相邻颜色搭配
选择色轮上相邻的颜色。这种类型的配色方案用于不需要对比度的设计,包括web或banner的背景。
3. 高对比搭配
选择色轮上对立面的颜色混合。该方案与相邻色和单色相反,旨在形成高对比度。例如:蓝色背景上的橙色按钮非常吸睛。
4. 协调对比搭配
这个方案与上一个方案类似,但是它采用了更多的颜色。例如:如果选择蓝色,则需要取其对立面中相邻的2个其他颜色(即黄色和红色)。这里的对比度不如【高对比方案】那么强烈,但它允许使用多种颜色。
5. 三色搭配
当设计需要更多的颜色时,可以尝试三色方案,它基于色轮上等距的三种不同颜色。为了画面的平衡,建议使用一种颜色作为主导,另一种作为辅助。
6. 四分色搭配
四分色配色方案适合有经验的设计师,因为它是最难平衡的,它采用色轮的四种互补颜色。如果将所选颜色上的点连接起来,会形成矩形,这种方案很难平衡色彩。
7. 主色调、辅助色、点缀色搭配
•主色调
主题色即界面中偏向的颜色,比如京东的主题色就是红色,淘宝的主题色就是橙色。主界面到底应该选择什么样的色彩搭配呢?下面就来介绍几种方法:
第一种方法:根据企业VI来确定UI界面的主题色。
通常一家企业的VI代表企业的文化或者行业属性,比如中国银行的VI主题色为红色,红色在金融行业代表涨的意思。同时红色也是中国人比较喜欢的颜色,所以以前做的一个中国银行的项目用的就是红色。
第二种方法:根据用户人群来确定UI界面的主题色。
通常男生比较喜欢金属质感的黑色、灰色、蓝色系。女生喜欢的梦幻甜美色系、糖果色系。小朋友比较喜欢明度、纯度比较鲜艳的颜色。这些案例其实就在我们身边,平时可以多去收集或者观察包装盒。根据不同用户人群去分类分析,你会从中得到很多启发。一个精准的色彩搭配方案已经成为用户体验中最重要的部分之一。
第三种方法:根据行业特征来确定主题色。
比如科技型公司大多喜欢使用蓝色,金融类公司大多使用红色,奢侈品公司大多使用金色和黑色。
•主题色
一般应用在界面比较强调的地方,比如标题、价格、按钮、导航等。主色用量基本占据全部用色的25%,基本决定了整个界面的视觉风格。
•辅助色
辅助色起到辅助主色的作用,又叫背景色,它在全部用色中约占据75%。
用与主题色同色系的色彩作为辅助色可以呈现柔和、整体、统一的视觉效果。而用主题色的邻近色作为辅助色可以让界面有丰富的变化,产生活泼感。用主色调的对比色作为辅助色可以让主色更为突出,通常情况下辅色为白色或者灰色比较多。
•点缀色
点缀色占全部色彩方案的5%左右,主要起提醒的作用。应用在鼠标悬停,选中状态,强调部分。点缀色要与界面整体色调相区别,一般在明度、饱和度上要有明显差异,一般会用明度或饱和度高的颜色。
除了色彩搭配的协调以外,还需要根据你所设计的题材和用户的需求,挑选更加契合主题的色彩搭配。做出符合产品特性的色彩搭配方案,才是一个好的UI设计色彩搭配方案。一个产品的色彩,也是可以增加产品的转化率的。