一篇文搞定配色，UI界面配色方法终极指南！

静电说：在UI设计的环节中，我们首先要对产品进行立项，然后进行产品调研，绘制低保真原型图，进行交互设计，随后设计师接手开始进行品牌塑造和高保真UI界面的设计工作。在这个过程中，配色是其中最重要的一环之一，也是很多设计师毕竟难以驾驭的环节，颜色不是脏了，就是不符合设计风格，用户不喜欢，要么就是存在色差，无法准确还原颜色。

要培养对颜色的敏感度，你必须要了解色彩的原理。在这个基础上去感悟，久而久之，色彩会在你手中变的游刃有余。下面这篇终极色彩指南非常值得一看~让我们不妨再系统梳理一下你的配色技巧吧！要用好颜色，软件和硬件两块，一个都不能少。

颜色属性要知道颜色是如何工作的，我们需要知道它们有什么属性。颜色具有三个属性。有区分独特颜色种类的色相（hue）、区分原色深浅的饱和度（saturation）、区分明暗的明度（Brightness）。这三个属性用于创建各种视觉效果。首先，形状主要以亮度构成，颜色根据元素的功能进行分类。一般来说，我倾向于使用黑白和一种强调色。有时不止一种颜色用于不同的功能但重要的信息。

颜色模型在使用Sketch或 figma 时，您经常会看到这些名词。什么是 RGB，什么是 HEX？如何在数字环境中表达颜色？设计中使用的颜色，电脑处理的颜色，显示器显示的颜色，都因规格而异。色彩空间是指用于管理在此数字环境中表达的色彩的标准。在数码产品中，颜色主要是RGB、HSL、HSB等，工作时主要使用HEX和RGB。

RGBA（红、绿、蓝、透明度）：这是一种通过将光红、绿、蓝三基色与表示透明度相结合来表现各种颜色的基本方法。HSV/HSB（色相、饱和度、值或亮度）：这是一种直观且易于处理的颜色属性）。HEX：从RGB转换为十六进制的代码，与其他元素相比具有可以一次复制粘贴的优点，是一种通用的颜色值，在各种环境中都易于输入。

所有程序都使用 HSB 来选择颜色并使用 Hex 显示它们。当您想使颜色变暗时，在设计时要方便得多，因为当您看到 HSB 的情况时，HSB 可以更直观地处理颜色属性，您可以减少 B 而不是通过混合红色、绿色和蓝色来变暗的 RGBA。但是在开发的时候，每个属性打个逗号打个逗号比较麻烦，所以我倾向于使用HEX，打码最少，容易区分。

主色和辅色

我倾向于严格和限制性地使用颜色，因为在数字产品 UI 中滥用颜色会干扰内容导航。我们定义了颜色层次结构来管理标准。服务中使用的颜色服务基本使用原色、二次色和黑白（Black, White）。根据服务的性质，我们可能会决定更多不同的颜色组合。服务中使用的原色在很大程度上遵循品牌的图形惯例。

主色：需要颜色的最常用的颜色辅色：使用主色时使用的颜色，需要与其他元素区分开来。黑白：主要用于背景和文字，最亮和最暗的颜色

颜色层级（重要性）

既然已经决定了产品中要使用的颜色类型，在页面上使用颜色时，请遵循信息的重要性。基本骨架由黑色和白色组成，使用主和辅色强调功能或必须知道的信息等重要元素。在这种情况下，当认知或行为是特殊情况下的重要因素时，与其他信息不同，使用适合含义的颜色。它突出了重要的最终行为要素和必须验证的信息。

色彩占比

在决定使用哪些颜色之后，您需要决定使用什么比例。由于颜色是一种强烈的刺激物，因此您应该通过对所有元素使用颜色来避免眼睛疲劳。最舒适和可接受的比例可以利用室内使用的 60-30-10 规则。背景颜色使用 60% 和 30% 分配，10% 分配给要强调的元素或面向文本的服务。考虑总量分配背景色后，在10%以内一点一点地添加点色来调整颜色比例。正如室内空间设计因目的而变化一样，色彩匹配也适用于空间。

对比

如果颜色模糊，眼睛需要集中注意力才能看到细微差别，因此最好使对比度尽可能强。如果你处于必须模糊区分颜色的情况下，你需要考虑元素是否真的足以通过颜色来区分它们。如果您决定以不同的方式表达一种颜色，则需要提供足够的对比度以使该颜色与其他颜色明显区分开来。考虑背景颜色和与其他元素的相对关系调整颜色。颜色对比度遵循WCAG划分的等级，主要以AA级为标准。A（最少）——3:1    AA - 4.5:1     AAA — 7:1

静电说：我们在这里为大家提供了一个颜色对比检查器，请关注我们的公众号后，在聊天窗口回复“对比”，获取检查器吧！

颜色搭配

即使您已经决定要经常使用哪种颜色，有时您也需要不同的颜色。在这种情况下，您需要根据色轮选择与主色相匹配的颜色。所有元素主要用单一颜色表示，虽然是与主色相似的概念，但在需要区分时使用类似颜色，补色用于用户需要比任何其他元素更清楚地识别的信息。

单色：重要信息使用主色，灰色区域使用与主色相同的色调。邻近色：类似的概念，但在需要区分时使用类比。补色：当需要比其他元素更强烈地强调时使用。

明暗对比

如果难以用一种原色区分信息，则使用浅色和深色。此时，定义了比主色浅的颜色和比主色深的颜色，按照自然界的颜色变化规律，按照亮度-饱和度-色调的顺序变换颜色。

加深颜色：基于 RGB 的色调，增加饱和度并降低亮度。淡化颜色：基于 CMY 色调，降低饱和度并增加亮度。背景颜色

因为颜色是相对的，所以它们的属性会根据它们周围的颜色而变化。在设计深色模式时，背景颜色是反转的，所以不要使用相同的颜色，而是为每个主题使用合适的颜色。

色差颜色一般会在显示屏幕上表现为RGB色（红，绿和蓝）或者是LSB/L（色相，饱和度和亮度）下图就是一个典型的色彩空间图。它代表了一个显示设备（或者配置文件希望这个显示设备）能显示多少颜色数。

如果你把一种颜色从一种色彩空间转成另一个色彩空间，实际上，这个色彩空间会尽可能的适配你要的颜色，让他们尽可能的在同一个位置（由于色彩空间的改变，其实转化后的颜色并不能完全一致）。也就是说这个RGB的数值会根据这个色彩空间的定义而做出改变。如果你原先所使用的这个颜色刚好位于这个色彩空间的边缘位置，改变后的色彩空间会让你的颜色呈现更真实或者失真。

设计师绝大部分作品都在网络端传输，选择sRGB这样标准的色彩配置文件可以帮助我们解决一部分的问题。另外，显示器的色域色准也是很容易被广大设计师忽略的一个要点。

这就是很多设计师觉得在不同设备上，同一张图片，同一种配色却显示的颜色不一样的最重要的原因。显示器对于设计稿颜色的影响

对于UI设计师来说，选择一台显示色准更好的显示器，可以尽可能真实的还原颜色本身的观感，让你用最标准的感受去做设计，去配色。这样可以保证设计稿和手机上观看的效果尽可能的一致。此外，显示器是否是标准色域覆盖（99-100%）也很重要，色域越广，显示器显示的颜色数量越多，但是色彩的呈现却不会越准确。例如99%sRGB一定比80%sRGB要好，但是130%sRGB就会导致过饱和的情况发生。

同理，低端手机的屏幕的显示效果也相对于使用较好显示屏的手机显示的颜色差。我们在测试的时候，需要保证在显示颜色较准确的设备上进行设计和查看，确保你所见的，所设计的颜色就是你想要的，而且在这些设备上是准确的。

在之前，静电购入了 明基PD2705U这款显示器，那么咱们结合这台显示器，来看看这台显示器与其它显示器的参数和软件测试数据。接下来进行一些测试，看看同一张图片在不同显示器，不同移动设备的显示效果。

明基PD系列号称是设计师专用显示器，拥有标准的99%sRGB色域覆盖，了解后知道明基PD系列每台显示器都经过了严格的出厂校色，拿到手以后看到出厂校色，不用二次校色就能放心使用。还对屏幕做了均匀性管控，也就是将屏幕分为25块区域，对每块区域进行单独校色，让亮度色彩能够均匀显示。动画设计、CAD/CAM模式、双色彩、暗房等模式满足设计师们的需要。PD2705U还带外接控制器，对于需要调整参数设置的设计师们来说真是太好用了。

我们分别使用同一份设计稿放置在不同的屏幕上进行展示(显示器全部设置为出厂模式，不进行任何设置)，然后以iPhone 12 Pro进行摄屏。

用来显示icon图标，我们可以明显感受到两台显示器的颜色差异。PD2705U的颜色更自然，下图的另一台显示器则整体偏蓝色，虽然饱和度很高，但是感觉就像加了味精一样，这是很多显示器的弊病，虽然很讨好普通用户的眼球，但是对于设计师来说，则意味着颜色失真。

PD2705U显示效果（上图）

某老显示器效果（上图）来看看UI界面的效果，静电准备了一些UIkit素材，放在两个屏幕上分别对比一下。特别选择了颜色更加丰富的界面素材，上图是明基PD2705U，下图是6年前买的普通显示器。我们发现，在色彩层次的呈现上，PD2705U层次更为丰富，注意观察渐变的表现方式，我们可以有更明显的感官。

PD2705U显示效果（上图）

某老显示器效果（上图）

UI界面的表达上，PD2705U会更亮一些，而下方的颜色则会偏暗。这也更贴合iPhone等中高端手机对于颜色的呈现。

PD2705U显示效果（上图）

某老显示器效果（上图）

灰色也是设计师比较在意的一方面，低端显示器在显示不同灰度的时候，有时候甚至无法准确的显示，因为灰阶的多与少也是反映一块显示器品质的重要参数。我们在Figma中拉一个从黑色到白色的大渐变，可以看一下，哪一块显示器过渡更加柔和呢？PD2705U对于灰色的过渡明显比之前的显示器好非常多。

PD2705U显示效果（上图）

某老显示器效果（上图）

灰色卡片相信各位UI设计师一定印象深刻，灰色的展示效果决定了显示器的效果，在PD2705U上，比白色深了一度的灰色呈现出更浅的效果，而下方的老显示器上，灰色则展示的更深一些（因为这个显示器可能无法展示出那么浅的灰色）。很多时候，UI界面的灰色是设计师非常在意的点，可见更专业的显示器对于灰度的显示更加到位，这台PD2705U表现很不错。

PD2705U显示效果（上图）

某老显示器效果（上图）

最后大家再来看看潘通色的表现吧！相对来说，PD2705U的颜色比下方老显示器的颜色显示略深。甚至是没有下方那么艳丽，但这确实是色彩原本的样子。看惯了加太多“特效”的显示效果，不少设计师可能需要适应一下。

原图截图效果（上图）

PD2705U显示效果（上图）

某老显示器效果（上图）

以上就是各位设计师搞定颜色的N种方法哦，要使用颜色，一定要用更好的介质，更好的显示器去呈现颜色，认知到真实的颜色，这样颜色才能为你所用，设计出更漂亮的UI界面。抛开技能层面，明基的设计师专用显示器PD2705系列，非常适合各位设计师购买使用，并且还有独家用户福利，标配Pantone Connect高级会员一年使用权。一个更合适的价格，拥有更好的品质和实用性，还有更好的颜色效果，何乐而不为呢？

↓↓长按二维码加静电老师咨询↓↓

纯小班教学 新一期开始报名啦

🔥报名送价值199元正版Eagle软件🔥2022年最后一期课程