UI设计的色彩搭配都有什么

①大胆地尝试

如今，设计师在颜色搭配和选择的时候有很多辅助软件。其中很多软件可以提供大量的现成颜色组合可以选择，还可以查找很多别的设计师的例子。设计师就可以在不断的尝试中找到不同的搭配。

然而，设计师要跳出这些已有的搭配和组合，要用自己的热情设计和创造新事物。

当然这不意味着一开始就要尝试革命性的新设计，保持头脑清醒，放飞创造力。不要害怕进行大胆的尝试。

②不要被标准禁锢

对于新的客户来说，你得主要竞争力就是作品，可以肯定的是，你可以决定你得作品想要表达什么。如果你只想展示的风格的一面，例如，你想让客户笑，想让他严肃，那么这一条并不适合你。然而实践证明，当你提供各种不同配色的作品时，他们可选性更多，成功率也更大。

③尝试渐变

2018年开始的新趋势，更多的应用渐变，可以加强颜色的感染力。但是必须提到的是，很多设计更喜欢避免渐变色。然而，现在渐变色已经越来越有潜力，合理的应用在设计中，反而可以为颜色的选择中加分。

④干净的组合

无论在什么组合中，颜色都应该感觉干净。即使是特别大胆的创新和尝试，都不应该在屏幕和页面上留下污垢。清晰度提高了可用性和可读性，并使所有的颜色都尽可能的发挥自己的影响力。

⑤尝试用颜色作为背景

用颜色来呈现作品，也需要用颜色来衬托作品。通常，设计师们会把经理更多的放在作品本身上，而减轻了对背景的关注。然而，更多的时候背景可以成为另一个活跃主题的要素，可以使作品看起来更富有表现力。不要错过尝试的机会，也许这个选择是正确的。

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

存在即合理，没有哪一个色彩本身就是丑陋和不具备美感的，只能说，如果我们错误的使用了色彩，那么它的美一旦被破坏，就只剩下丑陋和别扭了。想象一下，如果麦当劳大叔使用比较沉闷的灰色和黑色而不是明快的黄色和红色，你还对他们的炸鸡充满饥肠辘辘的感觉吗?

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

2.留心蓝色

为什么专门谈蓝色?蓝色不是海洋天空的专属色，蓝色也是UI 设计的青睐色。其实，并不是只有白色设计才叫简洁，蓝色也可以达到简洁的效果。看看你常用的一些比较有名的APP或者网站，比如Facebook，Safari以及办公软件等等。有什么发现呢?是的，它们的界面都是蓝色，各种层次的蓝色。

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

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

怎么做到自然而又极具美感的色彩变化?只是一个简单的黄金法则：通过降低亮度和增加饱和度可以使色彩变得更深通过增加亮度和降低饱和度来使色彩变得更浅。这里还有一个需要注意的点，明亮色彩的运用固然重要，但你也需要了解，UI设计中使用明亮色彩的利与弊。

4.色彩组合的黄金比例——(6：3：1)规则

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

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

第二个：最多3个原色。这个规则与黄金(6：3：1)规则相匹配。这是避免混乱并保持平衡的最佳办法。

以上就是青藤小编关于UI 设计配色技巧的相关分享，希望对大家有所帮助，如果您想要了解更多相关内容，欢迎大家及时在本平台进行查看哦!

颜色选择是用户界面创建过程中一个耗时的重要阶段。设计师有时需要花几个小时选择正确的颜色。在本文中，我们将介绍六个有用的技巧，帮助设计师为UI选择强有力的颜色，并使此过程更轻松，更高效。

这种规则或技术来自室内设计，因此常用于房屋装饰。这个想法很简单。为了使构图达到平衡，颜色应该以60％-30％-10％的比例组合。最大的比重应该是主色调，次要颜色占三分之一，剩余10％的颜色用于帮助强调和点缀。

这样的比例被认为是可以令人眼感到愉悦的，因为它能够使用户逐渐感知所有的视觉元素。了解了适当的颜色比例，设计师可以成功地将颜色搭配起来，而不会产生使界面多彩混乱的风险。

色彩对比是任何视觉构图的关键部分。它为每个UI元素带来了独立性，并使所有这些元素都引人注目。仅明暗度不同的相同色系颜色的用户界面很难吸引用户的注意。而且，在这个UI中复制内容看起来难以辨认，这使得与产品的交互几乎不可能。

设计师根据它应该完成的目标来控制对比度的等级。例如，如果您需要用户特别注意特定的用户界面元素，最好使用两种高对比度的颜色，例如蓝色和红色。CTA按钮（Call to Action用户行为号召）设计通常使用高对比度的颜色设计。

但是，从UI的整体构成来说，高水平的色彩对比可能并不总是奏效。如果复制内容和背景颜色对比太强烈，则很难阅读或扫描文本。这就是为什么设计师被建议创造一个温和的对比度等级，并应用高对比度的颜色来突出显示元素。各种设备上的用户测试可帮助设计人员确保其解决方案的有效性。

正如我们在前文提到的，心理学是帮助设计工作流程的基础研究之一。有一种心理学分支表明颜色对人类情绪和行为的影响，称为色彩心理学。它表明我们的大脑对颜色有反应，而我们通常不会注意到它。当人眼看到一种颜色时，我们的大脑向内分泌系统发出信号，释放对心情和情感负责的激素。

每种颜色对我们的想法都有其自身的影响，并且可能的反应可以帮助设计师传递正确的信息并呼吁用户做出预期的行动。以下是颜色含义的简短列表。

它同时具有好与坏的象征，象征着爱情，自信，激情和愤怒等。

充满活力和温暖的色彩带来兴奋的感觉。

这是幸福，阳光，欢乐和温暖的颜色。

自然的色彩带来平静和焕然新生的感觉。

它通常代表一些企业形象，也可能与距离和悲伤有关。

长期与皇室和财富有关。这也是一种神秘和魔力的颜色。

它与悲剧和死亡联系在一起，意味着神秘。它可以同时是传统的和现代的。

颜色意味着纯洁无瑕，以及整体性和清晰度。

另外，设计师需要记住，视觉感受对每个人来说都是非常独特的。年龄和性别等因素对色彩偏好有很大影响，因此了解目标受众的特征至关重要。您可以在我们之前的文章中找到颜色含义和偏好的详细说明。

每种文化都有自己的传统和信仰，所以在选择颜色之前，你需要确保它们会被解读成你想表达的含义。事实是有时一种颜色在不同国家可能有完全相反的意思。例如，在欧洲国家，白色代表纯度，常用于婚礼，而在许多亚洲国家，这种颜色意味着死亡和悲伤。错误的使用可能会导致对产品可能致命的误解。通过承认文化色彩感知的特点，设计师可以减少被误解的风险。

和谐是UI设计努力的目标。为了让用户感到高兴和舒适，设计人员尝试将平衡带入用户界面设计。色彩和谐是关于设计中色彩以最有吸引力和最有效的方式用于用户感知的方式。和谐的颜色有助于网站或应用程序获得良好的第一印象。

经过多年的搜索，设计师们区分了有效运作的基本配色方案。让我们看看他们是什么。

色彩和谐基于一种颜色的各种色调和明暗关系。

该方案应用在色轮上彼此相邻的颜色。

它是在色轮上彼此相对放置的颜色混合，旨在产生高对比度。

这个方案与前一个方案类似，但是它采用了更多的颜色。例如，如果您选择蓝色，则需要取两个与其补色相邻的其他颜色，例如黄色和红色。

它基于色轮上等距的三种不同颜色。专业人士建议使用一种颜色作为主导色，其他作为点缀色。

四色配色方案采用了四种互补配对的色轮颜色。如果连接所选颜色的点，它们将形成矩形。

大自然母亲是世界上最好的艺术家和设计师。我们在自然环境中看到的色彩组合总是接近完美。人们喜欢看日落和黎明，秋天的森林和冬天的山脉，因为它们充满了自然的色彩组合。

那么，你为什么不尝试借用一些想法呢？去散散步或搜索美丽的大自然的照片，你一定会找到灵感。

数码产品的成功在很大程度上取决于用户界面的颜色。正确的颜色会使用户在产品的使用中感到舒适。仅仅通过使用适当的颜色，设计师可以将人们置于思维的框架中以驱使他们采取相应的行动。所以在设计中，请明智地做出你的选择。

我的设计作品（Dribbble）： https://dribbble.com/exciting

本文翻译来自Medium感谢 Tubik Studio

原文链接

在视觉艺术中，有时被艺术家注入到创作中的颜色能成这个作品的灵魂。其实颜色就是一种力量。它可以在转息之间改变图片的基调。它可以增强，减轻，突出，说服，呼吁等等。颜色和文字也可以相互辅助，并使他们更有力量。它可以在没有任何文字的情况下传达出自己的感情。成为设计师手里的一大武器。这就是为什么在UI设计领域里，颜色是关键的因素之一。

那很多设计师不知道在设计产品是如何选择颜色，我们先来看看优秀的配色案例，再简单的分享一下配色的方法吧。

今天我们就来看看Ludmila的设计理念和作品。

在应用或者网站工作的设计师，颜色的选择和组合是最初设计的主要部分。当被问到这条道路上有什么锦囊妙计的时候，Ludmila说，她将从事任何创作的过程中基本上是从四个主要组成部分中成功的：良好的心情，传递积极情绪和感情的欲望，灵感，和你对设计的热爱。这四点是促使人们迈出设计第一步的基石。再经过深入的知识或者艺术的搜索和准备，就可以换来惊人的效果。

1、大胆的尝试

如今，设计师在颜色搭配和选择的时候有很多辅助软件。其中很多软件可以提供大量的现成颜色组合可以选择，还可以查找很多别的设计师的例子。设计师就可以在不断的尝试中找到不同的搭配。

然而，设计师要跳出这些已有的搭配和组合，要用自己的热情设计和创造新事物。当然这不意味着一开始就要尝试革命性的新设计，保持头脑清醒，放飞创造力。不要害怕进行大胆的尝试。

2、不要被标准禁锢

对于新的客户来说，你得主要竞争力就是作品，可以肯定的是，你可以决定你得作品想要表达什么。如果你只想展示的风格的一面，例如，你想让客户笑，想让他严肃，那么这一条并不适合你。然而实践证明，当你提供各种不同配色的作品时，他们可选性更多，成功率也更大。

3、尝试渐变

2018年开始的趋势，更多的应用渐变，可以加强颜色的感染力。但是必须提到的是，很多设计更喜欢避免渐变色。然而，现在渐变色已经越来越有潜力，合理的应用在设计中，反而可以为颜色的选择中加分。

4、尝试干净的组合

无论在什么组合中，颜色都应该感觉干净。即使是特别大胆的创新和尝试，都不应该在屏幕和页面上留下污垢。清晰度提高了可用性和可读性，并使所有的颜色都尽可能的发挥自己的影响力。

5、尝试用颜色作为背景

用颜色来呈现作品，也需要用颜色来衬托作品。通常，设计师们会把精力更多的放在作品本身上，而减轻了对背景的关注。然而，更多的时候背景可以成为另一个活跃主题的要素，可以使作品看起来更富有表现力。不要错过尝试的机会，也许这个选择是正确的。

6、用黑白模式选颜色

应用程序有的时候不仅仅是为了传输视觉信息，而且要能够与产品进行简单和成功的交互。检查设计方案的有效性最好的方法就是通过黑白外观来测试。观察黑白模式下的作品，会更快的发现什么元素是更引人注目。这不会减小颜色对设计的影响，相反能能好的发现无效的颜色组合，发现更多潜在问题，也可以让设计师更关注色盲用户的体验感。

7、从艺术中获取灵感

获得灵感并将灵感转化为设计的最好方法就是观察艺术。经典艺术，现在艺术，数字艺术。水彩画，油画，炭画，水粉画。任何一种艺术都能吸引设计师的共鸣。艺术在颜色的选择和应用的角度都非常有效，当然也都特别有创意。在你喜欢和欣赏的艺术家的作品中寻找灵感是非常有帮助的。获得灵感，并尝想象你在设计的作品就是一件艺术品，结果不仅对客户，甚至最你自己的提升都是惊人的。

8、关注细节

美国设计师查尔斯·埃姆斯说：“细节不是细节，他们在设计”。这是在应用程序或网站的UI设计与工作的关键法则，特别是当设计师选择组合调色板时。没有透彻的分析和关注，什么设计都有可能前功尽弃。颜色是将所有的细节展现出来的高效方法之一。颜色阴影和暗部也是加强视觉元素层次和机构的有效途径。

9、可用性是关键要素

设计一个UI不仅仅是平面设计，设计UI也是为用户提供可以方便快捷而且让生活更加幸福的产品的过程。因此，从UI中的颜色选择和用法的角度来看，设计师始终都要铭记，界面应该是使用性强并且清晰干净的。颜色选择的所有细节都应该为这个大前提来服务。使用颜色来改进和加快导航，使用类别颜色编码，提供颜色标记，这些方面都是可以使设计变得更加有效，用户体验更高，而这些都是颜色的力量。

所以，颜色不仅是伟大的设计工具和技巧，也是强大的灵感来源。通过实验和实践来训练设计师对颜色的认知，可以使大家更好，更准确的完成更多客户的要求，并更加有动力，在设计的道路上走得更远。

Asos是用的黑色与白色加绿色的CTA。这是有原因的。

红色：激情、爱、危险

蓝色：冷静、负责任的、安全的

黑色：神秘、优雅、邪恶

白色：纯洁、沉默、洁净

绿色：新的、清新、自然如果你想要了解更多查看这个列表——颜色文化。灰度优先灰度优先早在设计之前我们就喜欢摆弄颜色和色调，但你很快就会意识到你已经花了3个小时在调整原色…虽然这真的很诱人，但你应该学会避免这种态度。强迫自己关注间距和布局的元素。这会节省你很多时间。这种约束生产效率是非常高的。其次，它看起来需要不无聊。尝试用不同的音调让它好看起来。

远离纯灰度和黑色我曾经学到最重要的一个颜色技巧是避免使用没有饱和度的灰色。在现实生活中，纯灰色几乎从不存在。这同样适用于黑色。

最深的颜色不是# 000，而是# 0a0a10记得给你的颜色加一些饱和度。潜意识里会看起来更自然、熟悉。

字体不是越多越好，也不是越个性越有设计感，尽量选择简单的字体，即便是简单的放大或加粗也能很好突出主题。

02、稍加英文，稍装逼格

在做设计时，我建议大家可以稍微添加英文元素，毕竟现在都与国际接轨。而且英文与中文的字体结构也不一样，在设计中确实有不一样的视觉效果。

03、适当添加线条，提高精致感

线具有装饰感，适当的点缀线条就能提升整体画面的层次感，即使添加细细的长线或短线，也会带来版面的精致感。

04、颜色不选多，纯色更高档

配色难?不妨大面积使用纯色，纯色更容易把握、更容易达到效果，当然也不要出现五彩斑斓的场景。

05、经典配色，黑白灰

黑白灰在配色上显得很安全，也不容易出差错，这种配色非常简洁大气给人一种高档神秘、沉稳大方的感觉。

即便整个画面背景只有黑色，但是通过大面积的留白，档次“咚咚咚”就上去了，很多设计师都热衷于这种配色。

06、少用烂图，多用好图

多采用高质量的图片，其实已经很显格调了，图片是否高质量，一般从清晰度、构图、光线等方面去看，当然还有图片后期的处理。

07、格调感，少不了留白

多做减法，去掉没有实际意义的元素，利用“空”的区域突显主体，体现“白”的高大上档次。

08、除了设计，还有工艺和材质

对于做书籍、包装、宣传物料等设计来说，善用工艺和材质可以让你的设计发挥到极致，能快速地提升成品的质感，甚至还能弥补设计上的不足。

这个网站提供了多种主流 UI 配色方案，有明度和饱和度的对比，点击色块就可以直接复制颜色，非常方便。

2.Colorhunt

这是一个非常简洁，但非常好用的配色网站，你可以自己创造并分享喜欢的色彩搭配，也可以在这里查看大师们常用的配色方案，还可以给喜欢的配色点赞。

3.LOL Colors

这是一个非常简洁，但非常好用的配色网站，设计师可们可以在这里找到很多色彩组合，把鼠标移动到不同颜色的水滴上会提示色彩代码(Hex Code)的颜色值。

4.WebGradients

这个网站收录了非常多的渐变色彩，大概有 180 种，都非常的美观。点击一下就色彩就可以大图预览，喜欢的话可以下载 png 图片，很方便。这些渐变色作为PPT的背景非常合适。

5.Uigradients

以分享美丽渐变色彩为主的分享站，里面接近上百种渐变配色方案，设计师可根据自己风格来选择搭配。

6.adobe color cc

这款是 Adobe 官方出品的配色工具，里面有很多配色的模式，比如单色系，三元色，互补色等，它可以通过不同色彩规则来提供配色参考。

希望对你有帮助～

想要系统的学习可以考虑报一个网络直播课，推荐CGWANG的网络课。老师讲得细，上完还可以回看，还有同类型录播课可以免费学（赠送终身VIP）。

自制能力相对较弱的话，建议还是去好点的培训机构，实力和规模在国内排名前几的大机构，推荐行业龙头：王氏教育。

王氏教育全国直营校区面授课程试听【复制后面链接在浏览器也可打开】： www.cgwang.com/course/yxuicoursemobile/?zdhhr-11y17r-138864782877067685

在“游戏界面设计，游戏图标设计”领域的培训机构里，【王氏教育】是国内的老大，且没有加盟分校，都是总部直营的连锁校区。跟很多其它同类型大机构不一样的是：王氏教育每个校区都是实体面授，老师是手把手教，而且有专门的班主任从早盯到晚，爆肝式的学习模式，提升会很快，特别适合基础差的学生。

大家可以先把【绘学霸】APP下载到自己手机，方便碎片时间学习——绘学霸APP下载：www.huixueba.com.cn/Scripts/download.html

如果你觉得0基础学UI设计比较吃力，可以报一家UI学习班，UI课程都是从基础的知识学起，循序渐进，使学员逐步掌握UI设计技能。一般学习在1-2W不等，可以根据自己的实际需求去实地看一下，先去试听之后，再选择比较适合自己的，希望能给你带去帮助。