UI设计师教你配色技巧

每当我看到一个漂亮，优雅并且简洁美观的界面，就会忍不住保存下来。现在，我已经收集了100多个美不胜收的UI 界面。在一次次观摩，欣赏和学习后，我发现这些界面有很多共同点。可究竟是什么让我对它们一见钟情呢？现在我找到了答案，是色彩。

本文中，结合自身经历，我总结了一些UI 设计配色技巧。虽然它们不能像魔术一样让你摇身一变成为最优秀的UI设计师，但是我保证，这些为你量身打造的UI 设计配色技巧，定会让你受益匪浅。

1.色彩的魔力

色彩是会说话的，甚至可以像语言一样强大。回想以下，每当你初见一个网站或产品，给你留下第一印象的是什么呢？是视觉外观，而视觉外观很大程度上是取决于色彩运用。

那么，在UI设计中，色彩究竟可以做些什么？

1）反映品牌的内涵和品质

颜色可以为品牌设定基调。 CCICOLOR的一项研究表明，用户在评估一款在线商品时，只需花费短短90秒，而判断的依据高达62％至90％将取决于配色方案。

2）实现更佳的用户体验

色彩的有效运用能提升整体美感，提供更优的阅读体验，创造清晰和谐的风格。

3）影响购买决策

根据Kissmetrics的说法，产品的视觉外观是影响消费者购买决策的首要因素。此外，QuickSprout的研究也表明，90％的产品评估都与颜色有关。Neil Patel曾写到，“颜色在你购买特定产品的原因中占据85％的分量”。正因如此，颜色已成为当今重要的营销手段之一。

2.色彩的基本概念

色彩被长久的文化生活赋予了很多约定俗成的含义和寓意。每种色彩都形成了自己独特的语言和象征。解读色彩的语言，请看下表：

3.UI 设计配色技巧

1）色彩使用也讲究“天时地利人和”

存在即合理，没有哪一个色彩本身就是丑陋和不具备美感的，只能说，如果我们错误的使用了色彩，那么它的美一旦被破坏，就只剩下丑陋和别扭了。

想象一下，如果麦当劳大叔使用比较沉闷的灰色和黑色而不是明快的黄色和红色，你还对他们的炸鸡充满饥肠辘辘的感觉吗？女人喜欢穿着黑色礼服搭配鲜艳口红参加派对，为什么？因为这样会让她们看起来性感迷人。

不同的颜色传达不同的含义和感觉。如何明智地进行选取和搭配呢？这里请注意5点：选取合适的颜色，运用于合适的设计场景，注意时间变化，关注目标用户，明确想要达到的目的。

这里请认真查看上图，明确颜色的意义。但如果你非要冒险追求独一无二的设计，那么祝您好运。

2）留心蓝色

为什么专门谈蓝色？蓝色不是海洋天空的专属色，蓝色也是UI 设计的青睐色。

看看你常用的一些比较有名的APP或者网站，比如Facebook，Safari以及办公软件等等。有什么发现呢？是的，它们的界面都是蓝色，各种层次的蓝色。

有研究表明，蓝色是唯一一种让女性和男性都钟爱的颜色。蓝色几乎无处不在，大自然中，各网站的UI界面，服饰衣物等，蓝色随处可见。包括我此刻写入文章的Microsoft Word，界面也是蓝色的。

蓝色无疑是一种安全的颜色，它能最大程度上获得用户的信任并被广泛接受，蓝色可以说是UI配色中的典型例子。如果你的UI界面没有更好的选择，请用蓝色。

3）背景色和元素之间的色彩变化技巧

看看以下的界面：

这里暂且不谈这又是关于蓝色的UI界面，让我们专注于它的色彩变化。主题颜色是蓝色，其他元素是较暗的蓝色和更明亮的蓝色。整体看上去，各层次的颜色平衡和谐且又脉络清晰。

怎么做到自然而又极具美感的色彩变化？

只是一个简单的黄金法则：通过降低亮度和增加饱和度可以使色彩变得更深；通过增加亮度和降低饱和度来使色彩变得更浅。

4）色彩组合的黄金比例——（6：3：1）规则

在设计时，色彩组合必不可免。组合颜色很容易，但组合后如何避免色彩混乱和累赘？如何既能够不显得单调又展示设计感？

记住二个原则：

第一个：6：3：1规则

60％+ 30％+ 10％的比例是为了平衡颜色。这个公式能创造出一种平衡的感觉，并能提供更佳的用户体验，可以让用户的实现从一个点舒缓的移动到另一个点。

第二个：最多3个原色

这个规则与黄金（6：3：1）规则相匹配。这是避免混乱并保持平衡的最佳办法。

5）颜色组合和互补

提供和谐的配色方案时，需要注意些什么？在这个过程中需要考虑以下方面：

第一，色调

您可以在色环上生成单个“色度”的许多变体。通过添加白色，黑色和灰色来生成不同的色调。

实现平衡色调，最简单的方案是单色（单色）方案。

第二，对比

颜色的不同对比可以唤起不同的情感反应。色轮上相对的两种颜色可以提供最高的对比度，比如黑色和白色。强烈的对比度可以让人集中精力，并且产生紧张的心情; 柔和的对比度则适用于轻松、休闲的UI设计。

注意：对比的使用不要过火，这样容易使用户产生困扰。

6）黑白色搭配不过时

黑色是所有中性色中最强的，而白色是最常用的背景颜色。黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。黑白色的搭配主要用于网站UI界面。

7）从自然和艺术中获得灵感

自然与艺术是灵感的主要源泉。抬头看看天空，你会发现蓝色发挥到淋淋尽致的经典模样。从大自然中获得的配色灵感可以使您的设计更加切合用户的审美，非常自然，不带刻意的痕迹。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。

8）颜色心理学 – 避免性别误区

或许天生如此，女人不喜欢灰色，橙色和棕色。她们钟爱蓝色，紫色和绿色。而男人不喜欢紫色，橙色和棕色。男人喜欢蓝色，绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩。如果你把运动类App的界面使用了女性色彩，结果可想而知。

还有一个误区，人们以为粉色是女性的喜爱，但结果也许会让你大跌眼镜。

4.工具和模板

这里我总结了一些有助于UI配色的工具和模板，希望对您有所帮助：

1）Coolors.co

Coolors.co是挑选颜色的好工具。只需锁定所选颜色并按空格即可生成调色板，还提供了锁定部分色卡再次生成颜色的功能。包括HEX、HSB、RGB、CMYK等四种色彩模式。

2）Mockplus

Mockplus是一款非常方便的UI / UX设计工具，其启动页面加入了配色精美的示例项目和模板，可直接导入桌面客户端。其编辑器中，可对组件进行多样的色彩设置和编辑，内部也包含完整的颜色选择器，支持导入图片和GIF，如果您是要在原型设计过程中产出精美的UI 界面，Mockplus能满足您的需求。

3）Paletton

Paletton有点类似于Kuler，但又不仅限于5个色调。当您已经拥有原色并想要使用其他色调时，Paletton将会是您很好的选择，它可以创建协同色彩组合工作，是强大的UI调色板。

4）Check my Color

Check my Color是一款可以用于检查所有DOM元素的前景和背景颜色组合的工具，也是一款能够检查不同网页自己的颜色亮度和对比度差异的工具。

5）Chinaz

该网站提供了丰富的配色资源，包括在线调色板，网页常用色彩，web安全色以及网页颜色选择器，会使您UI 配色的一个很好的帮助。建议对色彩运用比较初级的设计师可以做一个参考。

注意：可用性是关键

创建华丽的UI界面永远不是最终的目标。提供卓越的用户体验，为用户的生活增添快乐和幸福才是我们设计的目的。因此，在UI 设计配色上，每位UI设计师应该记住，界面应该是符合高度实用和并且清晰明了的。