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

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

可见光本身的“顺序”

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

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

扫描二维码关注公众号，回复： 11793199 查看本文章

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

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

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

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

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

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

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

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

数据类型的不同颜色

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

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

蓝图节点的不同颜色

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

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

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

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

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

场景颜色标记（level color）

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

<完>

虚幻引擎相关文章推荐：