欢迎来到 UI/UX 设计的迷人世界，在这里，色彩拥有着迷、引导和沟通的力量。在这个综合模块中，我们将深入研究定义 UI 颜色的复杂性。

那么，让我们一起踏上这多彩的旅程吧！

→ 基本颜色系统中有三种类型的颜色：

1. 品牌颜色
2. 中性色（灰色）
3. 语义学

让我们深入研究它们中的每一个。

品牌颜色：反映您的品牌形象

当想到一个品牌时，通常会想到它的颜色。品牌颜色有两种基本类型：

1. 品牌主色：这种颜色在品牌调色板中占主导地位，出现在所有品牌组件中约 60-70% 中。它是品牌的形象，是用户与您的身份相关联的色调。想象一下象征着活力和激情的大胆红色。
2. 强调品牌颜色：其余组件采用这种颜色以提供对比度和平衡。它是为您的设计增添活力和深度的配角。想象一下欢快的黄色，给你的界面带来温暖。

中性色（灰色）：设计的基础

中性色、灰度色调是您的设计得以蓬勃发展的画布。它们包括黑色、灰色和白色，营造出和谐的背景。这些色调提供简单性和可读性，使其成为主屏幕和背景的理想选择。

• 黑色： #000000
• 各种灰色：从较深的色调到较浅的色调，这些构成了您设计的支柱。
• 白色： #FFFFFF

语义：用颜色进行交流

颜色在传达信息中起着至关重要的作用。语义颜色承载意义并引导用户：

1. 红色：警惕的颜色，表示错误、警告和潜在危险。它吸引了人们的注意，鼓励用户谨慎行事。
2. 绿色：肯定和成功的颜色，代表确认和积极行动。这是进步和成就的阴影。
3. 黄色：此颜色表示小心，代表警告和潜在危险。它提示用户小心谨慎。

了解 RGB、HSL 和 HSLA 颜色模型

色样：将其视为构成调色板的颜色集合。想象一下从这个系列中选择一种颜色 - 这就是您的色样！这就像从一盒蜡笔中选择一种颜色。色样有四个关键部分：

1. RGB HEXCODE：这是一个特殊的代码，就像颜色的 ID。例如，#ODFF42。
2. 名称：就像您为宠物命名一样，颜色也可以有名称。例如，紫红色蓝色。
3. HSL（色调 - 饱和度 - 亮度）：就像用特殊的单词描述颜色一样。色调是颜色在色轮上的位置。想象一下，将方向盘从 0 度旋转到 180 度——它会改变颜色！饱和度指的是颜色的强度。如果是100%，则颜色明亮；如果是100%，则颜色明亮。当 0% 时，它有点灰色。亮度是指颜色看起来有多明亮。最大为白色，降低为黑色。

HSLA(133,100% , 52% ,1)

• 这个'a'表示alpha（不透明度），如果alpha为10%，则表示不透明度为10%。

4.深色主题代币：$brand-primary

• 这基本上是一个约定。

5. RGB（红、绿、蓝）：将它们想象成颜色配方的成分。以不同的量混合这三种成分会产生不同的颜色。

6. HSL（色相、饱和度、亮度）：想象一个带有颜色的轮子。当您围绕它从 0 度移动到 180 度时，颜色会发生变化。即使完成完整旋转（360 度），您仍然会得到相同的颜色。饱和度就像颜色的“功率”——全功率使其明亮，无功率使其有点灰色。亮度是指颜色看起来有多亮或多暗。例如，如果我们将红色的亮度调至最大，它将变成白色，而如果我们将其亮度调至最低，它将显示为黑色。

了解 RGB 十六进制代码

十六进制代码是颜色的语言。诸如 #12AB4A 之类的十六进制代码可以被解构为其 RGB 分量：

• 对于 ex- 让我们采用十六进制代码 # 12AB4A
• 十六进制代码的前两个字符代表红色。（12代表RED的值，它不是12，这是两个不同的值1和2）。
• 第三个和第四个字符代表绿色。（AB 是绿色的值）。
• 最后两个字符代表蓝色（4A 是蓝色的值）。

了解十六进制表示法

十六进制表示法就像颜色的特殊代码，使用数字和字母的混合。我们不说“10”，而是使用“A”。这很有帮助，因为我们只有两个字符的空间，这样我们就可以显示更大的数字。

• 0 到 F：有 16 个可能的值。我们使用 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。
• A-10、B-11、C-12：字母代表数字。例如“A”表示 10，“B”表示 11，“C”表示 12，依此类推。

从十六进制代码中选择颜色阴影：让我们以#4A1242 为例。下面是我们如何解码它：

• 红色：它是 4 和 A 的混合，意思是 4 和 10。所以，它有点红。
• 蓝色：它是 1 和 2 的混合，有点蓝色。
• 绿色：它是 4 和 2 的混合，所以它也有点绿色。

从这些颜色“成分”中，我们可以看出红色是最突出的，因此色调将以红色为主。借助十六进制表示法，就拥有了为设计解锁色彩世界的钥匙！

决定你的灰色

• 灰色调也称为中性色，起着基础作用。
• 每个调色板都包含两种核心灰色：白色和黑色。

->黑色：表示为#000000

->白色：表示为#FFFFFF

• 创建白色涉及将红色、绿色和蓝色最大化到其最高值（16 或 F）。
• 快速技巧：要发现灰色，请确保所有 RGB 分量相等。例如，121212 显示为灰色，而 421212 稍微偏向红色。
• 了解 HSLA：“HSLA”包括 alpha（不透明度）：hsla(0 , 12 , 45 , 100%)

->色调：0

->饱和度：12

->亮度：45

->不透明度：100%

• 丰富的颜色命名工具：

->在www.color-name.com查找颜色名称。

->在chir.ag/projects/name-that-c ​​olor 探索颜色识别。

• 在 Figma 中管理灰色：

->始终使用 HSL 定义灰度。

->避免改变不透明度；不建议复印降低不透明度的黑色。

->黑色和白色是必不可少的组成部分。

-> 命名灰色存在多种方法。

-> 饱和度为 0% 时，任何颜色都会变成灰色。

• 当掌握了设计中灰色的理念时，就能够为创作增添一丝微妙的美感。这可以帮助创建与颜色搭配良好的背景，使的内容脱颖而出并闪闪发光。

决定你的语义颜色

选择语义颜色时，请考虑对比度以提高可读性。确保文本在背景颜色的衬托下仍易于阅读。“CONTRAST”插件等工具可以帮助您实现最佳的可读性。

在 Figma 中命名你的颜色样式

色彩组织至关重要：

• 斜线约定：用斜线命名颜色有助于保持顺序和一致性。
• “STYLER”插件：利用此插件可确保您的颜色样式在整个项目中保持一致。
• “SORTER”插件：使用此工具可以轻松对图层进行排序。它有助于维护结构化的层层次结构。

在 Figma 中组织你的颜色

效率和一致性是关键：

• 基础文件：创建包含调色板的基础 Figma 文件。然后可以在多个项目之间共享和引用该文件。
• 库集成：启用此基础文件作为其他项目中的库以实现无缝集成。

重要的学习资源

利用这些资源扩展您的设计知识：

• www.designsystems.com
• www.designsystemsforfigma.com

 

总而言之，选择 UI 颜色可能看起来很详细，但也很令人兴奋。您选择的每种颜色都有其目的和感觉。从品牌到含义，UI 颜色就像一个丰富多彩的工具箱。有了本指南，就可以进入 UI/UX 设计世界了。

 

 

 

 

 

原文链接：
https://uxplanet.org/13-tips-for-improving-landing-page-design-849801372da4




作者：sarthak