专栏名称: 超人的电话亭
只分享有价值的设计经验。
今天看啥  ›  专栏  ›  超人的电话亭

全网最系统 | UI中的配色逻辑解析

超人的电话亭  · 公众号  · 设计  · 2024-12-03 22:43
    

主要观点总结

本文主要介绍了UI配色的进一步解释,包括平面和UI配色的差异、品牌色的选择、中性色的选择、功能色的配色逻辑、装饰色的配色逻辑、内容色的配色逻辑等关键点。

关键观点总结

关键观点1: 平面和UI配色的差异

包括静态和动态的差异、色彩模式的差异、品牌输出目标差异。平面配色主要是静态的,而UI配色则是动态的;平面色彩由真实世界的染色或印刷决定,而UI色彩则由屏幕发光呈现。

关键观点2: 品牌色的选择

在建立UI配色系统时,首先确定品牌色。品牌色的选择通常基于品牌VI系统或新产品的需求。UI用色可以在原有基础上调整,同时要注意主色的选择原则。

关键观点3: 中性色的选择

中性色是由黑白灰组成,用于信息对比性的需要。为了避免纯黑在屏幕上的不良视觉效果,应避免使用纯黑色作为中性色。同时,成熟项目的中性色可能会加入轻微的色相以增加其应用的多样性。

关键观点4: 功能色的配色逻辑

功能色的选择基于项目中的特定信息和要素。这些颜色用于表示特定的功能或信息,如金融软件的涨跌示意、电商购物应用的价格和优惠等。

关键观点5: 装饰色的配色逻辑

装饰色用于增加界面的色彩丰富性。装饰图标的配色没有固定规律,但选择范围相对较小。对于节日主题或专题页面,可以针对独立页面定义新的主色和辅助色。

关键观点6: 内容色的配色逻辑

内容色的选择取决于内容在页面中的占比。对于占据较大空间的内容配图,建议使用背景色单一的图片。对于普通内容,尽量使用没有高饱和度或白色的背景图,使其更好地融入整个界面。


文章预览

在上一篇分享中,我们对 UI 配色的模式和内容做了简单的介绍。今天紧接上一篇,对 UI 的配色做进一步的解释。 上篇文章链接: UI基础 | 用最直白易懂的方法讲配色 UI选色逻辑 - 基本说明 上一节介绍了 UI 配色的五个对象,而这一节中,我们就要针对它们的配色进行更细致的解说。 平面和 UI 配色的差异 学习 UI 配色,就绕不过去平面配色的各类知识点、概念、技法,虽然 UI 设计原则上也是平面设计的一种,但在配色上却有很大的差异,不能直接照搬平面配色的逻辑。 平面和 UI 配色的差异主要由下面三点组成: 静态和动态的差异 色彩模式的差异 品牌输出目标差异 第一点,也是最重要的一点,就是平面设计的对象是“静止”的,在设计被制作出来后就被固定。而 UI 设计的对象是 “动态” 的,不管是内容还是界面本身都会经常发生修改变化。 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览