如何快速掌握正确的UI配色方案？6种技巧不容错过！

以下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

原文地址

用户体验设计涉及很多流程，需要足够的深思熟虑才能设计出符合用户需求的UI界面。虽然听起来不太复杂，但每个细节都需要设计师反复推敲。

 

用户界面创建过程中耗时最长的阶段便是颜色选择，设计师往往可能要花上几个小时才能挑选到合适的颜色。在本文中，我们将介绍六个实用的配色技巧，帮助设计师为界面选择最适合的颜色，并使选择过程更加轻松，更高效！

 

技巧1：掌握60-30-10原则

 

这一原则或者说技巧源于室内设计，因此经常被用于装饰房屋。这个技巧很简单：为了达到平衡的配色效果，所使用的颜色应以6：3：1的比例进行配色。占据最大比例的为主色，30%为辅助色，10%为装饰色，帮助提高整体亮度。

 

这样的配色比例被认为是令人愉悦的，从视觉感知上来讲，它带给用户一个舒适的色彩层次。掌握恰当的配色比例可以帮助设计师成功地组合颜色，避免了将用户界面变得光怪陆离。

 

技巧2：巧用色彩对比

 

色彩对比几乎是所有视觉构图中的关键部分。它赋予了每个UI元素独特性，并使其引人注目。需要注意的是：用户界面中来自相同色系的色彩对比度较低，无法达到吸引用户注意力的效果。此外，在这种用户界面上复制的文本内容辨认度较低，这使得设置产品交互也十分困难。

 

设计师硬根据所要实现的目标来控制色彩对比度的高低。例如，如果你需要用户注意到某个特定的界面元素，则最好使用像蓝色和红色这样高度对比的颜色。CTA按钮设计就常常使用高对比度的颜色。

 

但是，将UI作为一个整体来说，高对比度的颜色可能并不总是奏效。如果文本内容和背景颜色之间的差异太大，则很难读取或扫描文本。这就是为什么建议设计师采用温和的色彩对比，并只在某些特定元素上应用高对比度的颜色。通过在不同的设备上进行用户测试，可以帮助设计人员确保其配色方案的有效性。

提示3：考虑颜色的心理学

 

正如我们在前几篇文章中提到的，心理学是一种为设计工作流程的提供助力的研究之一。其中，色彩心理学就属于这种心理学的一个分支，它主要研究色彩对人类情绪和行为的影响。研究表明，我们的大脑会对不同的颜色做出多种反应，但我们通常都忽略了这些感知。当人的眼睛感知到一种颜色时，我们的大脑会向内分泌系统发出信号，释放出对应情绪的荷尔蒙，从而让我们产生不同的情绪和感受。

 

每种颜色对我们的感知都有其独特的影响力，了解用户对于颜色可能产生的反应可以帮助设计师传递正确的信息，并引导用户做出预期的行为。以下是一个颜色含义的列表可供参考。

红色，它既象征着爱情，自信，激情，也象征着愤怒。

橙色，这是一种充满活力和温暖的色彩，能带给人兴奋的感觉。

黄色，这是一种象征幸福，阳光，欢乐和温暖的颜色。

绿色，一种最接近大自然的色彩，给人平静和清新的感觉。

蓝色，它通常用于代表一些企业形象，给人沉静，可靠的感觉。

紫色，这是一种神秘又高贵的颜色，一直与贵族和财富有着密切联系。

黑色，它通常与悲剧和死亡联系在一起，象征着神秘。它同时符合传统的和现代的审美。

白色，这种颜色象征着纯洁和天真，也带给人纯粹和清晰的感觉。

 

另外，设计师需要记住，每个人的视觉感知都是独特的。除了年龄和性别等因素对色彩偏好有很大的影响，文化差异也是其中一个重要因素，因此了解受众的特征至关重要。

提示4：重视色彩的文化差异

 

总所周知，每种文化都有自己的传统和信仰，文化差异对于色彩的选择也有很大的影响。在不同国家对于同一种颜色可能有完全相反的含义。例如，在欧洲国家，白色象征纯洁，常用于婚礼。而在许多亚洲国家，这种颜色意味着死亡和悲伤。因此，不正确的色彩选择可能会导致用户对产品产生致命的误解。通过了解色彩不同的文化特点，设计师们能够大大降低产品被误解的风险。

 

提示5：促使色彩协调

 

色彩协调是UI设计师努力的重要目标。为了让用户感到舒适和满意，设计师试图将平衡引入用户界面设计。色彩的协调是指设计中色彩的排列，以最吸引人的、最有效的方式来吸引用户的感觉。协调的颜色有助于网站或应用程序的良好的第一印象。

 

经过多年的探索，设计师们区分了一些基本的配色方案，使其色彩运用更加有效。以下是一些基础的配色方案：

 

单色，单色配色是基于一种颜色，选择其不同的色调进行色彩组合。

 

类似色，该配色方案应用于色轮上彼此相邻的颜色。

 

互补色，它是在色轮上彼此相对放置的颜色组合方案，旨在产生色彩的高对比度。

 

拆分互补色， 这个配色方案的工作原理类似于互补色，但是不同的是采用了更多的颜色。例如，如果你选择了蓝色，配色则需要组合两个与其相反颜色（橙色）相邻的其他颜色（黄色和红色）。

 

三元色，它基于色轮上等距的三种不同的颜色。专业人士建议使用一种颜色作为主色调，其他两种色彩用来提亮。

 

双色互补，这种配色方案采用了两对互补色组合。如果连接这四种颜色在色轮上的位置，就会形成一个矩形。

 

提示6：从大自然中获取灵感

 

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

 

那么，你为什么不试图从中获取一些想法呢？去美丽的大自然里散散步，你一定会找到灵感！

 

 

数码产品的成功在很大程度上取决于设计师为其用户界面所选择的颜色，正确的颜色给用户带来极大的舒适感。设计师通过运用合适的配色方案，就能使用户迅速明白产品的设计思想，引导他们执行适当的操作。

作者：Tubik Studio

地址：https://uxplanet.org/color-matters-6-tips-on-choosing-ui-colors-260f56197a7b

 

学习工具，但不受限于某种工具。Mockplus做原型，更快更简单，现在下载Mockplus，免费体验畅快的原型设计之旅。