Date 2025-10-23 17:25:48
往期回顾：
如今，受国内激烈的市场竞争的限制，C 为了争夺用户的注意力，终端产品的界面设计越来越复杂，颜色也越来越丰富（花哨）。极简主义风格只存在于少数头部产品和工具产品中。
阅读文章 >
学习 UI 虽然配色不能绕过过去平面配色的各种知识点、概念和技巧，但 UI 设计原则上也是一种平面设计，但配色差异很大，不能直接复制平面配色的逻辑。
平面和 UI 配色差异主要由以下三点组成：
静态和动态不同颜色模式不同品牌输出目标不同第一点，也是最重要的一点，就是平面设计对象是“静止”的，设计制作后固定。而且 UI 设计对象是 “动态” 是的，内容和界面本身都会经常被修改和改变。
静态设计的稳定性意味着设计意图可以实施，个性化易于塑造。动态设计意味着不确定性。在线内容的变化或产品迭代将直接破坏原始设计，导致设计意图的流产。
第二点是颜色显示模式的差异。平面设计需要染色或印刷才能进入现实世界。（CMYK），这些产品的颜色只有在光线折射后才能进入人眼。而且 UI 设计的颜色是由屏幕本身发光呈现的（RGB），直接进入人眼。
自发光和折射光的颜色外观非常不同，这取决于它们的物理特性（暂时不扩展）。最直观的区别之一是屏幕发光会“耀眼”，让人感到不舒服和过度疲劳。例如，荧光颜色系统或大面积对比颜色。
自发光的生理影响决定了 UI 为了满足可用性，应排除部分颜色，以大大缩小配色范围。因此，平面上有句话说，没有丑陋的颜色，只有不匹配的颜色不适合 UI 配色。
第三点是品牌输出目标的差异。传统品牌的色彩体系更注重品牌概念和价值观的表达，通过统一应用商店、包装、材料和服务，不知不觉地塑造用户对品牌的理解和定位。
互联网产品影响用户的主要渠道是手机或显示器上的小屏幕，在这个小屏幕上与成千上万的其他产品竞争。因此，互联网产品在品牌建设上非常“强硬”
平面和 UI 色彩搭配的逻辑差异，自然会导致不同的实践方式，需要单独学习。还有许多 UI 设计师一直在学习配色知识，但还是做不好 UI 配色的原因，因为这是两个不同的系统。
在建立 UI 在配色系统中，第一步通常是品牌颜色。品牌色彩的建立包括两种情况。一是设计的产品是一个完整的品牌，建立了自己的产品 VI 另一种情况是，完全独立的新产品需要重新创建。
原则上 UI 还应使用原制品牌的配色 VI 但前面也说过平面用色和屏幕用色差别很大，所以 UI 颜色可以在原有的基础上进行调整，例如 MUJI、宜家。
如果你仔细研究了成功的独立产品配色，你会发现主色基本上在饱和度明度面板的右上角。
这种设置的基础是使主色能够更加明亮。一方面，它可以吸引用户在屏幕上的注意力，灌输品牌认知，另一方面，明亮的颜色在屏幕上更舒适和谐，客观地决定了一些“虚弱”的颜色不应该作为产品的主要颜色。
遵循这一规律，主色的选择是先确定色相类型，然后在明度和饱和度面板的右上角选择具体的颜色。
除了主色，品牌辅助色的定义也遵循同样的原则。但是，如果不是品牌， VI 在定义辅助颜色本身的情况下，不建议新产品定义辅助颜色，因为它很容易稀释主色的重量，不能带来太多的帮助。
除了品牌色，最重要的色彩定义是中性色。在我自己的设计过程中，我甚至在定义品牌色之前定义中性色。
中性色是由黑白灰组成的多种颜色，通过灰度值（HSB 的 B 值)的高低形成了一个表现强弱的等级阶梯。通常是一个 UI 在产品中使用不少于 5 以上中性色满足信息对比的需要。
为了方便记忆，我们会 B 值使用 5 定义倍数，例如 10、20、40、60、80、90 等。
中性色的定义并不难，只要不同层次的颜色有足够的差异，至于需要多少层次的颜色，就要根据具体项目的需要来决定。
还有两个中性色定义的细节，一个是尽量避免使用纯黑色（B 值 0)，因为纯黑在 OLED 屏幕处于完全不发光的状态，因此会与周围的颜色产生很大的对比，难以控制。
第二个细节是，成熟项目中的中性色往往不是纯灰色，而是添加轻微的色相（主要是蓝色色相），使中性色的应用不那么僵硬和无聊。
添加色相的中性颜色会提供非常微妙的潜在影响，但用户不需要感知这些颜色使用色相，因此通常只添加很少的色相值。颜色越浅，色相值越弱，不易被感知。相反，可添加的色相值范围越强。/p>
因此，在明度、饱和度面板中，中性色的配色逻辑可以遵循以下曲线：
之后，制定功能色的配色逻辑。在定义之前，最好完成项目主界面内容和原型的构建。可以预测项目中包含哪些具体信息、元素和模块需要使用非品牌色和中性色来表示。
例如，上述金融软件包含涨跌的迹象。电子商务购物应用程序包括价格和折扣。一个普通的社区应用程序包括收藏、拇指和会员。
当主色不适合填充这些内容时，应选择新的颜色作为功能色填充。功能色的选择也是最简单的部分，因为功能色的目标通常非常明确，它们也可以从主色的选择区域中产生。
进入装饰色彩的环节，不在色彩规范定义的色彩范围内，进入“看菜下菜”阶段。
装饰颜色的应用首先面临的是装饰图标的颜色，如快速入口、瓷区的装饰图标，通常使用其他颜色来提高界面颜色的丰富性。
在此类图标的配色中，没有固定的配色规则可以遵循，只能根据感觉进行匹配。然而，幸运的是，装饰图标的颜色也类似于主要颜色的颜色选择。事实上，选择范围很小。如果你直接在这个范围内选择颜色，你可以很快得到预期的结果。
总结一些在线成熟产品的快速入口配色，你会发现用色其实很固定:
除图标外，第二种装饰颜色是操作场景，如节日主题或特殊页面。对于它们的设计，可以理解为定义新的主色和辅助色，以及如何适合它们。
虽然他们的应用程序可能与产品的主色相冲突，但运营内容的权重往往高于项目的配色要求。因此，只要在线项目中添加运营设计，界面颜色就会开始“鸡飞狗跳”。
在作品集项目的设计中，有必要确定装饰颜色的应用目标，即通过更多的颜色来增加设计的丰富性，因此尽量从非主色系统中选择，以避免使用与主色相似的颜色。
最后，在填写内容图片时使用的颜色。这里也有两种情况，即页面中内容的比例。
如果比例太大，比如占据半屏以上的广告图和商品图，填充的内容一定会直接影响整个页面的色彩感。
因此，在这种情况下，建议使用背景颜色相对单一的图片，这将比填充混乱和复杂的图片更有效。当然，内容的颜色不能与主要颜色完全一致，也不能与主要颜色产生不协调感，这需要设计师自己判断。
然后是普通内容的颜色，如商品列表中的商品图、动态列表中的动态图、新闻列表中的封面等。尺寸不大，但通常有很多。
这些内容图的色彩倾向太强会使设计结果看起来非常“故意”，或者颜色搭配非常混乱，所以许多设计草案是飞机草案的原因是图片使用太故意，不能呈现界面应有的状态。
这种内容图的填充应与前一种情况相反，即削弱颜色的存在感。尽量使用没有高饱和度或白色背景图，这样它们就可以更好地融入整个界面，而不会成为界面的负担。
根据这些总结的原则，我们可以回到颜色识别面板进行总结。首先，明度和饱和度区域用水平和垂直的“井”字，确定一般颜色，然后选择特定颜色的区域通常集中在右上角，背景集中在左上角，中性颜色集中在左上角。
UI 与平面相比，配色非常简单，因为配色对象是固定的，每个配色对象的选择范围也非常广泛 “固定”。配色是萝卜和坑分配的合适颜色。只要积累一定的案例分析和实践经验，就能快速掌握。
而 UI 所谓的配色品牌调性远不如平面复杂。我们需要做的是将不同于类似产品的颜色与用户记忆的颜色结合起来！
后面还有一个案例的实际演示，计划做得更完整，所以放在下一篇文章中再次显示。目前，颜色匹配输出越多，越觉得应该作为一个完整的知识库进行编辑，很难系统地放置许多零碎的颜色知识点。
所以你转发和喜欢的越多，你就越能鼓励我们完成这项复杂的工作。
欢迎关注作者微信微信官方账号:「超人电话亭」
