如何快速掌握正确的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

地址：uxplanet.org/color-matte…

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