虚幻的UI设计中有关“颜色”的规律总结

利用可见光的不同颜色来区分目标的类型，一直是业界常用的UI技巧，很大程度上能减少字符和图标的使用，让人一目了然。虚幻引擎IDE的UI界面似乎把颜色利用到了极致，在虚幻引擎中至少出现了5个子系统用到了颜色标识，确实挺夸张的。

• 可见光本身的“顺序”

• 空间直角坐标系XYZ轴的颜色分配

• 不同Asset资源类型的颜色分配

• 数据类型的不同颜色

• 蓝图节点的不同颜色

• 场景与评论框的颜色标记

---

可见光本身的“顺序”

因为人眼的3种视锥细胞按占比排序分为红、绿、蓝，屏幕上其他的颜色都是这3种基色的组合而成，所以红绿蓝RGB三基色的顺序被UI设计首先采纳，尤其是红色一般作为最简单基本的“类型”。三种颜色用完后会优先考虑黑白灰，然后会选择光谱上的中间颜色（黄、青、紫），最后才轮到其他颜色。

所以存在一个奇怪规律：红绿蓝 > 黑白灰 > 黄青紫 > 其他。

---

空间直角坐标系XYZ轴的颜色分配

由于虚幻引擎采用的是左手坐标系，所以3个坐标轴的顺序是：

1. X轴：红色

2. Y轴：绿色

3. Z轴：蓝色

XYZ分别对应了RGB，简单好记。

---

不同Asset资源类型的颜色分配

根据虚幻asset静态资源的引用逻辑，static mesh可以引用material，material可以引用texture，从内而外的顺序就是：

1. texture纹理：红色

2. material材质：绿色

3. mesh网格体：蓝色

这三种最常用的资源正好对应着RGB的顺序。

比如下面这个引用视图，每个tile底部的颜色条暗示了它的类型：

但是UE中所有的资源类型远不止这几个，总共有：↓↓↓

---

数据类型的不同颜色

UE蓝图中，不同的数据类型，无论是基本类型还是引用类型，都用了不同的表视图区分，其中最简单的bool类型就是红色。

• 红色：BOOL变量

• 青色：Integer整型变量

• 绿色：Float浮点型变量

• 洋红：字符串变量

• 粉色：文本

• 金色：Vector矢量

• 紫色：旋转体数据

• 橙色：Transform偏移矩阵

• 蓝色：Object对象

同类型数据类型引脚之间的连线也是该颜色。

---

蓝图节点的不同颜色

蓝图中3种类型的函数占用了RGB三个颜色：

1. 事件：红色

2. 纯函数：绿色

3. 主函数：蓝色

事件函数几乎是所有并发线程的起点，也是蓝图中最常见的入口，没有输入只有输出，用红色标识。

纯函数一般是只读的函数，且没有可执行的引脚，一般作为蓝图的“分支”，用绿色标识。

主函数就是每个线程的主体函数流了，通常有输入和输出引脚，是蓝图的“主干”，用蓝色标识。

当然，节点类型不只是函数，这里总结了一下所有的节点颜色：

• 红：事件起点

• 绿：纯函数

• 蓝：函数

• 紫：构造函数

• 灰：流程控制、宏

• 青：类型转换

• 黑：坍缩的节点

• 无：运算符

---

场景与评论框的颜色标记

在比较大的项目中，通常会创建许多level，它们会用不用的颜色来标识，这样在viewport中比较容易区分，而这个颜色标识是可以自己定义的。同理，蓝图评论框也是可以自定义颜色标识的：

 

<完>

---

虚幻引擎相关文章推荐：

• 虚幻引擎——场景动态加载

• UE4编辑器如何生成和共享插件

• 虚幻引擎中的节流与防抖