UI设计界面配色,UI界面设计如何使用色彩

UI设计师是怎么配色的?

①大胆地尝试

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

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

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

②不要被标准禁锢

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

③尝试渐变

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

④干净的组合

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

⑤尝试用颜色作为背景

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

色彩搭配——关于UI颜色选择的6个技巧

用户体验设计涉及许多流程，需要仔细深入地思考才能使界面满足目标受众的需求。即使看起来不太复杂，每一步都需要对细节的深入关注。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我的设计作品（Dribbble）：

本文翻译来自Medium感谢 Tubik Studio

原文链接

ui设计中的色彩方案设计一般确定原则是什么?包含哪些?

1. 色彩术语

色彩术语构成了我们色彩知识的基础。把色彩术语，如色相，色调和阴影，看作是我们可以用来开发独特调色板的工具。

Hue（色相）

色相是色彩的一个技术术语，色相是指母色--没有添加白色或黑色的饱和色。

Tint（淡色；淡性）

当白色加入到一个色相中时，就会产生一个色彩。

Shade（色度）

当黑色加入到一个色相中时，就会产生一个色度。

tone（色调）

当灰色，无论是色调（白色）还是阴影（黑色），都被添加到一个色调中时，就会产生一个色调。

color value（色彩明度）

色彩明度是指颜色的明暗程度，它表示反射光的数量。

Saturation（饱和度）

饱和度是指颜色的亮度和强度，高饱和度的色彩鲜艳夺目，而低饱和度的色彩则暗淡无光。

2. 层次结构

当一个元素的外观与周围环境形成对比时，说明该元素具有较高的重要性。我们可以使用颜色和颜色权重来建立界面中的层次结构。

通过使用颜色的色调，我们可以给元素分配不同的重要性。

如果一个元素比另一个元素更重要，它的视觉权重就应该更高。这样可以方便用户快速浏览页面，区分重要和不重要的信息。

更突出、更大胆的信息是用户的视线会首先被吸引到的，然后他们会转向它下面的辅助信息。

3. 表现力

在令人难忘的时刻展示品牌颜色，以强化您的品牌独特风格。

想想你的品牌颜色就像一盘牛油果吐司上的盐和胡椒粉。盐放多了，就会盖过天然的味道，放少了，就会显得平淡无奇。

当在界面上添加颜色来强化你的品牌时，要考虑好添加的时间和地点。

4. 包容性

设计产品与建造图书馆或学校等公共建筑类似--它需要包容所有人。

网络内容无障碍指南(WCAG)有一些建议，以确保我们界面中的颜色对有运动、听觉和认知障碍的人来说是无障碍的。例如，他们的文字标准要求至少有4.5:1的对比度。

要确保你符合这些标准，请下载Stark，它将检查你的设计是否无障碍。你还可以用他们的插件模拟色盲，并根据需要进行调整。

我们经常试图设计出好看的东西，而忽略了考虑与我们产品互动的不同用户。

随着我作为一个设计师的成熟，我已经接受了所有的各种限制，这些限制会破坏我的完美设计理念。ADA合规性就是这样的制约因素之一。

当我们试图为Dribbble点赞时，我们可以摆脱这种情况，但当我们为真正的人类开发产品时，这不是一个好的做法。

5. 含义

颜色会唤起不同的感觉或情绪，所以通过了解颜色的心理学，我们可以利用与目标受众产生共鸣的品牌颜色。

重要的是要认识到你的受众是谁，记住，不同的文化和地区对颜色的认知是不同的。例如，在西方文化中，白色往往与婚礼联系在一起，而在亚洲文化中，白色被认为是哀悼的颜色。

你对颜色及其含义了解得越多，它的力量就越大。

企业在品牌和营销中，无时无刻不在使用色彩作为影响我们情绪的策略。注意到几乎每家快餐店都会在品牌中使用红色和黄色吗？这是因为红色能引发刺激、食欲、饥饿感，它能吸引人们的注意力--而黄色则能引发快乐和友好的感觉。

6. 限制颜色

通过限制应用程序中颜色的使用，那些确实得到颜色的区域会得到更多的关注，例如文本、图像和按钮等单个元素。

你会注意到，在许多有大量彩色帖子和不可预测内容的应用程序中，如Instagram或Twitter，他们的界面往往非常平淡。这很微妙，但它将焦点从界面上移开，并将其集中在内容上。

7. 状态

颜色可以提供一个应用程序、其组件和元素的状态信息。

颜色是我们在界面中显示状态变化的一种方式。通过淡化按钮的颜色，可以表明按钮已被禁用，或者用红色高亮显示按钮，则表明出现了错误。我们还应该为我们的错误颜色配上错误信息和图标，以确保清晰，并吸引色盲用户。

8. 一致性

界面中的颜色使用应该是一致的，所以即使上下文发生变化，颜色的含义也总是相同的。

如果在我们的品牌中使用红色，那么我们应该避免使用它来通知有关错误状态。我们可以使用黄色等替代颜色来避免混淆。

这是一个很容易解决的问题，所以没有理由避免在我们的品牌中使用红色或黄色。

9. 色彩调色板

我如何获得完美的调色板？

这要从对色彩理论和基本工具的简单理解开始。

第1步--原色和系统色

我喜欢从一个主色开始，我会根据喜好、研究或上面我在#5中分享的颜色含义来确定。

我选择的主色是我的品牌色。

一旦我有了主色，我就需要文字、背景、容器等的颜色。

通常情况下，我会选择一个深色的颜色，用于我的文本，而背景则是浅灰色的颜色。

第二步 - 创建调色板

一旦我为我的用户界面选择了我的基础颜色，我就会把这些颜色放入Google颜色工具（接近底部），以获得该颜色的不同色调和色调。

这并不总是完美的，但这是一种简单的方法，可以生成一个近乎完美的调色板，以后我可以根据需要添加或调整。

如果我需要互补色或测试可访问性，我可以用Google色彩工具来完成所有这些工作。这是一个一站式的服务。

第三步--把所有的东西合在一起

10. 60-30-10 规则

60%是你的主导色，30%是辅助色，10%是重点色。

"这个室内设计规则是一种永恒的装饰技巧，可以帮助你轻松地将一个色彩方案组合起来。60％+30％+10％的比例是为了给色彩带来平衡。这个公式之所以有效，是因为它能创造出一种平衡感，让人们的视线从一个焦点舒适地移动到下一个焦点。”

与我之前提到的技巧类似，比如少用色彩来增加强调和强化品牌，60-30-10是一个粗略的工具，可以确保我们在色彩上不走过场。

我还喜欢从我的界面后退几步，眯起眼睛。模糊的图像会让我更好地了解层次结构，以及我是否使用了过多的颜色。

色彩工具和资源

配色对于设计师来说是一大难题，但是也是设计中至关重要的一环。提升色感对于设计师来说非常重要，但是却不是朝夕之间的事情，运用一些配色网站来解决我们的日常需求可以让我们做出合理的方案。

小编特意整理了一些较为常用的配色网站供大家参考，由于配色的网站很多，以下列举仅作为代表，希望对大家有所帮助。

UI设计中的色彩运用

UI设计中的色彩运用

20世纪90年代，由日本SONY公司推出的智能化移动手持设备T86通^色彩绚丽的屏幕，漂亮的图形按钮以及流畅的操作刷新了用户对人机交互界面的体验。并在行业内引发了设计者对UI设计中风格、图形、色彩、操作体验等等方面的全新思索。经过二十多年的 发展。

UI设计已经成为一门专门性交叉学科，通过对视觉思维、心理学、人体工程学等不同学科的研究，设计者从各个方面不断的改善用户的操作体验。早期的软件界面曾经通过“拟物化”设计（skeuomorphism）试图通过模拟真实物体的质感来让人机交互更趋向于人与现实世界的交互方式而“去虚拟化”；而21世纪以来，随着UI设计中对视觉传达规律的运用，“扁平化”设计（flat）成为更为主流的设计趋势。扁平化设计更为现代主义，通过简洁、单纯的色块的组合与运用帮助用户更好地理解与使用产品本身。

1 UI设计中色彩的功能

色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用，可以归纳为以下几个方面。

1）显示界面的整体架构

一个UI界面总是借助图形化的外观直接作用于客户的视觉系统。用户接触一个UI界面，看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏，按钮等构成元素，并显示出UI界面的逻辑架构。

2）明确视觉层级关系

UI设计中不同的内容属于不同的层级关系，如菜单于菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系，还可以通过色彩间的强对比突出关键内容。

3）营造界面整体风格

UI界面虽然是个复杂的视觉图形系统，但通过主色调、辅助色、装饰色之间的对比调和关系会呈现出明显的风格倾向。用不同的色系或者同色系色彩之间的对比与调和关系，可以塑造出不同的界面风格。如适合男生的金属质感的黑色、灰色、蓝色系，女生喜欢的梦幻甜美色系、糖果色系。界面风格定位于品质已经成为用户体验中最重要的部分之一。

4）基于人体工程学的色彩运用。

由于色温会影响到光源显示的颜色，大于 6500K 就会偏冷（白蓝），小于 6500K 就会偏暖（黄红）。而蓝光大量存在于电脑显示器、荧光灯、手机、数码产品、显示屏、LED等光线中，由于蓝光是一种高能量的短波光线，因而会较为严重的伤害视力。基于人体工程学保护视力考虑，苹果手机Iphone7和iphone7plus手机背光显示设计了Night Shift 的屏幕去蓝光保护功能，开启后会在晚间自动将屏幕显示调成暖黄色调，减少视觉疲劳。

此外，UI界面中，考虑到电子设备的显示特点。背景色要与图标色彩之间至少有5.38以上的对比差，才能够易于区分。而在此差值范围内的配色则会因为过于接近而在显示环境中对辨认造成困扰。

还有一些特殊人群，如红绿色盲人群，由于特殊视觉需求而需要进行特别的配色设计。

2 UI色彩设计方案

在进行UI设计时，要通过对产品及用户体验的分析确定明确的色彩搭配反感，形成“标准色彩规范”，在这个基础上再进行具体界面、线框、图标等细节设计。标准色彩规范中要规定出最主要主色、辅助色、装饰色的色号，方便设计师的设计稿的色彩统一。

1）主色调

主色用量基本占据全部用色的75%，基本决定了整个界面的视觉风格。主色选择要符合产品本身的气质、诉求和色彩心理学规律，可在主色的基础上通过明度与纯度的变化衍生出同色系色调作为主色调范围。

根据色彩在视觉中的能量值，一般主色倾向于选择饱和度高、明度低的色彩，往往会在在同一界面中占据较大的面积或明显的凸现于背景。

2）辅助色

辅助色起到辅助主色的作用，在全部用色中约占据20%。用与主色同色系色彩作为辅助色可以呈现柔和、整体、统一的视觉效果；而用主色邻近色作为辅助色可以让界面有丰富的变化，产生活泼感；用主色调对比色作为辅助色可以让主色更为突出。

3）装饰色

占全部色彩方案的5%的装饰色起到点缀、提醒的作用。并界面增加个性化、富于趣味的视觉元素。装饰色要与界面整体色调相区别，一般在明度、饱和度上要有明显差异，一般会用明度或饱和度高的`颜色。

3 UI设计中对色彩三要素的运用

色相、明度、饱和度是色彩的三要素，对这三个色彩要素的理解和运用体现在UI设计中整个色彩方案中。

色相是色彩的首要特征，是不同色彩相区分的重要因素。色相也是色彩搭配中进行色彩对比的主要因素。对主色色相的选择往往决定了一个UI界面的整体风格与气质，或奔放活泼，或冷静深沉，或淡雅清新，或浓郁艳丽。其他辅助色则起到对比或调和的作用。因而一个UI界面的主色选择要符合产品本身的特质。以手机APP为例，淘宝、百度外卖、大众点评等许多电商类APP常常用容易让人兴奋、热烈的红色、橙色作为主色调；而主打探索与求知的“知乎”APP则使用理性、冷静的蓝色作为主色。

色彩的明度是色彩的明亮程度，是对色彩进行调和的主要因素。同色相色彩的明度变化可以在同色系中呈现一种调和统一的变化关系，协调而具有层次感。常常用于配合主色进行图标、菜单、导航等设计。明度变和也会带来色彩性格上的差异，明度升高会让色彩变得明亮、呈现清凉感；而明度降低则会让色彩变得暗淡，呈现温暖感。

饱和度是指色彩的鲜艳程度，也是色彩进行调和的主要因素。饱和度的改变同样会让色彩呈现从浓烈活泼到安静深沉等不同的“色彩性格”。此外饱和度的改变还会让色彩呈现不同的质感，如金属的不透明、坚硬、光泽感；糖果色的清新甜美感等等。

4 UI设计中的色彩心理学运用

色彩具有非常强的联想性。不同的色彩会在味觉、空间、冷暖、情绪等不同方面引发人们不同的综合感受。UI界面在主色调的选择中往往会利用人们对于色彩的联想习惯突出产品的定位。仍以ios系统手机APP为例；以介绍美食菜谱的“香哈”APP，主色采用最容易诱发食欲的红、橙色系；而具有丰富中国民俗传统的万年历APP则采用了充满中国传统文化涵义的中国红作为主色并配合这一气质采用篆书字体作为文字标识。

综上所述，由于色彩的重要性，对色彩的理解和驾驭对整个UI界面的设计产生着巨大的影响。

;

UI设计的颜色搭配方式！

色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用，一个好的UI色彩提案可以起到：

1）显示界面的整体架构

2）明确视觉层级关系

3）营造界面整体风格，甚至增加转化

UI色彩搭配方案

单色搭配

基于一种颜色，以色调和饱和度区分层次。

单色永远是一个经典且安全的配色方案。

相邻颜色搭配

选择色轮上相邻的颜色。

这种类型的配色方案用于不需要对比度的设计，包括web或banner的背景。

高对比搭配

选择色轮上对立面的颜色混合，提高对比度。

例如：蓝色背景上的橙色按钮非常吸睛。

协调对比搭配

这个方案与上一个方案类似，但是它采用了更多的颜色。

例如：如果选择蓝色，则需要取其对立面中，相邻的2个其他颜色（即黄色和红色）。

这里的对比度不如【高对比方案】那么强烈，但它允许使用多种颜色。

三色搭配

当设计需要更多的颜色时，可以尝试三色方案。

为了画面的平衡，建议使用一种颜色作为主导，另一种作为辅助。

想学习更多UI设计相关知识，从软件开始，附赠教程点击（UI设计）获取

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

色彩的角色一般区分为主色、配色、背景色、融合色、强调色这五种类型。设计中的三原色就是我们常说的RGB（红、绿、蓝），每种颜色代表了不同的含义，运用在设计作品中也能给人不同的心情。

暖色界面设计

红色、橙色、黄色等给人一种阳光、向上、温暖、热烈感受。

冷色界面设计

绿色、蓝色等给人一种坚毅、寒冷、平静、理智、高端感受

色彩运用应该注意哪些问题？

整体风格要统一

在设计界面中，应该要先确定一个主要颜色，主色调确认之后对界面的整个风格起到主导的作用。所以在做设计的同时主色调很重要，其他的配色在主色的基准上进行搭配，这样可以使界面风格更加简洁、统一。

合理运用对比色

运用对比色也能为设计增光添彩，运用色彩对比的优点是能够使画面生动、高端。

排版要有重点配色

重点色主要运用在焦点图、按钮、图标，或者其他比较重要的元素，让它成为页面的焦点。主要强调界面在比较重要的元素。它不适合运用在主色和背景色面积较大的色块。

注意整体色彩的平衡

色彩平衡主要是指界面中运用多种颜色，这些颜色有深浅、强弱的对比。运用这种方法的优点是能够强化空间感和活跃感。这种搭配方法适合使用同类颜色，不宜采用对比色。

ps:在设计中最好不要使用超过三种以上颜色，颜色过多显得杂乱无章，颜色的搭配同样要遵循对比的原则。颜色从纯度，明度，色相上进行对比，明暗对比，深浅对比，冷暖对比等。颜色的对比很容易激发视觉上的冲击。