当前位置:首页>>网站制作>>配色方案>>正文

UI设计师应该懂的色彩搭配法则

来源:UI设计教学 作者:UI设计教学 时间:2018-05-10

色彩搭配看似简单,但是想用好色彩却不容易。色彩搭配是每个设计师都应该了解和掌握的一门学问。几乎每个刚进入UI设计行业的新人,心中都会有以下几个疑问:

为什么蓝色会成为UI设计中最常用的色彩?

UI设计的三色搭配原则是什么?

如何在UI设计中正确地运用色彩

本篇文章会根据我从事设计多年的经验和跟一些世界五百强企业首席UI设计师的交流心得进行提炼总结,力求用通俗易懂的术语和例子给大家解决以上困惑,为大家更好地学习UI设计提供一些帮助。

一、为什么蓝色会成为UI设计中最常用的色彩?

毫无疑问,蓝色是UI设计中最重要的颜色,也是使用范围最广、最常用的色彩。在你的手机当中,许多APP都采用了蓝色的LOGO,而它们的UI也大多也将蓝色作为主色调,Facebook、Twitter、Shazam、Safari、支付宝、知乎、Behance均是如此。

从色彩学的角度来分析,主要原因如下:

1、绝大多的用户喜欢这个颜色。有调研指出,绝大多数的人都喜欢蓝色,蓝色被认为是全球范围内最安全的设计用色。

ui色彩搭配法则ˆ™

ui色彩搭配法则ˆ™

2、蓝色与自然相关。清朗的天空和纯净的水,在多数时候都呈现出漂亮的蓝色,它们代表着好天气和健康的水源,这种对自然的亲近深藏在人类的基因当中,外化表现为对蓝色的喜好。

蓝是海洋和天空的色彩,是自然的色彩。

3、蓝色还是UI设计师的通用色彩。从UI设计师的角度上来看,这是一种泛用且实用的色彩。常见的色彩当中,红色、橙色、绿色对于用户都有这强烈的情感影响,其中黄色常用作警告,红色能够唤醒用户的激情,也能够昭示危险,而绿色常常关乎健康、安全,相比于它们,蓝色的泛用性明显更强。

ui色彩搭配法则ˆ™

4、蓝色所传递的情感相对更加抽象,它还能传递出“创新”和“科技”的感觉。所以,当公司采用蓝色LOGO的时候,常常会让人想到技术和创新。

ui色彩搭配法则ˆ™

5、蓝色会让人有安全感,因此许多旅游相关的APP和网站会乐于采用蓝色的UI设计。它隐隐传达出可靠、信任的感觉,对于旅行类的应用和网站,无疑是不错的选择。

ui色彩搭配法则ˆ™

ui色彩搭配法则ˆ™

6、蓝色让产品看起来更加值得信赖。更准确地说,它会让用户更倾向于觉得“这是我要的产品”,当这种感觉和品牌本身的运作和特质结合起来的时候,就能够形成让人信任的品牌性格了。戴尔、IBM、英特尔、AT&T、和 PayPal 都是利用技术来营造品牌的信任感,进而创造出让人日复一日值得信赖的产品。

ui色彩搭配法则ˆ™

蓝色令人沉静,能让人感觉平衡和智慧。许多金融类服务企业也因此选择蓝色作为品牌色。

7、蓝色对于色盲也足够友好。占比最大的红绿色盲群体都能够清晰地分辨出蓝色。

色盲用户眼中的色彩效果

ui色彩搭配法则ˆ™

蓝色是Facebook 的主要色调,因为扎克伯格就是色盲,正如他所说:“于我而言蓝色是我最容易分辨的色彩,所有的蓝色我都能掌控。”

二、UI设计的三色搭配原则是什么?

在UI设计师设计作品时,时常会碰到不知道如何配色。看着大师们的作品配色总是那么舒服,那如何让自己的作品在配色方面更好,让自己有配色的主观意识。

首先我们先来明确几个概念:色轮、色相、基色、同类、类似、邻近、中差、对比、互补色。

色轮,指的人能识别的圆形排列的色相光谱。每一种色相都是一个基色。

ui色彩搭配法则ˆ™

根据两种色相相差角度不同又有如下概念:同类:相差15°类似:相差 30° 邻近:相差60° 中差:相差90° 对比:相差120° 互补色:相差180°用户界面设计一般使用通常默认的色板就很适合,但并非所有情况总是如此。因为每种颜色都必须完美地补充其他两种颜色,所以三色相配色,比起双色配色,难度较大,色彩平衡与和谐是关键。

在一些优秀的作品中有着非常棒的三色配色方案,当把这些设计放在一个色轮上,发现所有这些组合都可以分为三类:1.所有三种颜色相邻2.两种颜色相邻,另一种相反3.三种颜色相对关于这样的颜色组合的专业术语:邻近色、互补色、对比色。所以这些组合可以分成3类:类似色、分裂补色、三角对立。

01 类似色配色

ui色彩搭配法则ˆ™

(1) 通过使用色轮上相对接近的三种颜色创建(3种之和<90°)。例如,如果您选择主色为红色,则其余2种可以选取橙色或棕色。大部分类似色之间很和谐,但除了暖红色和粉紫色,把它们配在一起像腐肉鸟的心脏。而所有蓝色,绿色和紫色之间都可以很好地相互配合,只不过有些颜色组合更亮,有些更暗。在此需要注意一点,建议先从大自然的照片中获取灵感,之后再用色轮。因为用鼠标在色轮上随意滑动去选择太难。需要大量时间精力训练才能达到你想要的效果。

ui色彩搭配法则ˆ™

(2)若是选好了类似色的两种颜色,吸取处于他们中间的颜色作为第三种配色。这是找到三色配色的最和谐也是最简单的方法。

ui色彩搭配法则ˆ™

02 分裂补色配色

两种颜色为类比色,第三种颜色与他们形成对比。

一些经验可以提供参考:

如:黄-红粉色,蓝-绿色,绿-紫的对比色非常有用,红色与绿蓝紫色的效果非常好。

ui色彩搭配法则ˆ™

推荐一种便捷的方法:首先,选取你想在设计中使用的两种互补颜色,然后在其中一个颜色旁找到第三种颜色。例如,你想要有黄色和紫色,建议你从紫色的一边添加粉色或蓝色,或从黄色一边添加绿色。使用正确的饱和度和对比度,所有这些颜色都能搭配协调。

ui色彩搭配法则ˆ™

03 三角对立配色

ui色彩搭配法则ˆ™

三角对立是由色相环上相互60°的三种颜色组成。

会有更多样化的配色方案之一,也是最困难的。在此配色方案里有一些和谐的搭配:绿+黄色可以配各种色调的红、粉、紫或蓝色。(老师微信:YIBEIYU520)

设计灵感来自于基本的花卉配色:绿叶、五颜六色的鲜花加上黄色雌蕊。或者,可以从黎明和日落时的天空获取灵感,它有很多不同的丰富多彩的组合:蓝+紫+橙; 红+黄+青等。

ui色彩搭配法则ˆ™

04 从大自然中获取配色

从大自然中提取颜色的简单方法,从自然中找到一些美丽的图片:

ui色彩搭配法则ˆ™

ui色彩搭配法则ˆ™

之后,可以将选好图片上传到Adobe Color CC网站http://color.adobe.com/zh/create/color-wheel/

ui色彩搭配法则ˆ™

这样很方便就把一张图片的颜色提取了出来。

三、如何在UI设计中正确运用色彩

在实际的设计当中,大家要记住60-30-10 的配色原则。也就是:

主色调占60%

辅助色占30%

重点突出颜色占10%

ui色彩搭配法则ˆ™

60%+30%+10% 的比例是为了实现平衡色彩,这个公式之所以起作用,是因为它创造了一种平衡感,让眼睛可以舒服地从一个焦点移动到另一个焦点。难得的是它的使用也非常简单。

上面分享的都是从事设计多年的一些经验和跟行业大咖交流的一些心得总结,希望可以帮助到大家,UI设计除了色彩搭配以外,还有很多需要大家去学习的设计技法