界面合集
Aqua 面板套件 — 单框面板与按钮
玻璃青绿的界面素材18个:单框九宫格面板、提示框、标题条、分隔线、标签片与十二个直角按钮状态。

关于这个合集
不带模糊着色器的玻璃。每个面的上半部分比下半部分亮一档,中间以一条一像素的硬线分开,这是"这是一块光泽板"最省的说法,也是唯一能挺过1x导出的说法。青绿够深,因此冰蓝的点缀看起来是被点亮的而不是被涂上去的。
两块nine-slice面板——一块单框窗口框,圆角24 px;一块内凹的内框,圆角16 px——几乎覆盖菜单需要的所有方框:对话框、背包网格、列表底、提示框和数值面板。只有一圈连续的边框,面板就安静到足以放在密集文字之后。两者都能干净地拉伸到任意尺寸,因为四角从不缩放,中央是平涂填充。
面板之上是十二张直角按钮素材:常态、悬停、按下与禁用,每种都画了三遍——标准的128×40长条、正方形的直角图标按钮,以及用于工具栏和行内操作的紧凑按钮。三个尺寸是分开的文件而不是一张缩放图,因为画法依赖尺寸:在40px上算出的倒角,到小尺寸是重新计算而不是缩小。按下态把面下沉两像素并去掉顶部高光,而不只是压暗——正是这一点让按钮感觉是被按下了,而不是换了个颜色。
四个小件补上了菜单在面板之间需要的东西:带尖角的提示框、贴在面板上沿的标题条、中间带记号的分区线,以及用于计数和状态的标签片。它们都不是换个尺寸的窗口面板——九宫格本来就能拉到任意大小,所以另存一份不同宽度的文件只是凑数,不是组件。
所有东西都提供两份。SVG源文件就是这套套件当初绘制所用的文件——打开它们,改掉六个深青绿色调或那一个冰蓝点缀,再导出一次即可。PNG导出是平面的、透明的,并已按1x、2x与4x预先缩放,面向想要位图的引擎,没有预乘alpha,也没有溢出精灵图边界的烤死阴影。
怎么用
- 在Unity中导入PNG,把Texture Type设为Sprite(2D and UI),边框在窗口面板设为24, 24, 24, 24,按钮设为12, 12, 12, 12;再把界面组件的Image Type设为Sliced。
- 在Godot 4中用NinePatchRect,把补丁边距设成同样的数字;或者直接把SVG拖进去,让Godot按导入选项里的倍率栅格化。
- 在Unreal中以Texture2D导入,创建Draw As设为Box的Slate Brush,边距按纹理尺寸的比例填写——96 px的面板填0.25,128 px的按钮填0.09375。
- 界面倍率不是整数时,请用2x或4x的PNG,而不要放大1x;或者把SVG源交给引擎,让它按最终尺寸栅格化。
- 光泽的分界位于内高的46%处,是一条一像素的硬线而不是渐变——即便把nine-slice纵向拉伸,分界仍停在顶行结束的位置,因此面板在任何高度都保持玻璃的读法。
许可
可复制的署名文字
"Aqua 面板套件 — 单框面板与按钮" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/aqua-panel-ui-kit































