界面合集
Neon 面板套件 — 角标面板与按钮
高对比霓虹的角标nine-slice面板、内凹列表框与四态倒角按钮,SVG与PNG 1x/2x/4x。

关于这个合集
一套建立在切角与开放框上的科幻主机套件。任何地方都没有连续的边框——四个角标标出范围,其余敞开,而正是这一点让HUD读作覆在世界之上的叠层,而不是遮住世界的一扇窗。剩下的交给倒角:在圆角半径读作手机应用的地方,倒角读作加工过的金属。
两块nine-slice面板——一块四角带角标的窗口框,圆角16 px;一块内凹的内框,圆角12 px——几乎覆盖菜单需要的所有方框:对话框、背包网格、列表底、提示框和数值面板。完全没有连续的边框——四个角标标出范围,其余部分敞开,因此面板框住内容却不把它关进盒子里。两者都能干净地拉伸到任意尺寸,因为四角从不缩放,中央是平涂填充。
面板之上是四种倒角按钮状态:常态、悬停、按下与禁用。它们画在同一块144×36的基底上,圆角10 px,因此你只要在一个按钮控件上换纹理,就能拿到整套交互循环,而不用挪动任何一个矩形。按下态会把面下沉两个像素并去掉顶部高光,而不是只是变暗,正是这一点让按钮有被按下的手感,而不只是被换了颜色。
所有东西都提供两份。SVG源文件就是这套套件当初绘制所用的文件——打开它们,改掉六个深空蓝色调或那一个青点缀,再导出一次即可。PNG导出是平面的、透明的,并已按1x、2x与4x预先缩放,面向想要位图的引擎,没有预乘alpha,也没有溢出精灵图边界的烤死阴影。
怎么用
- 在Unity中导入PNG,把Texture Type设为Sprite(2D and UI),边框在窗口面板设为16, 16, 16, 16,按钮设为10, 10, 10, 10;再把界面组件的Image Type设为Sliced。
- 在Godot 4中用NinePatchRect,把补丁边距设成同样的数字;或者直接把SVG拖进去,让Godot按导入选项里的倍率栅格化。
- 在Unreal中以Texture2D导入,创建Draw As设为Box的Slate Brush,边距按纹理尺寸的比例填写——112 px的面板填0.14286,144 px的按钮填0.06944。
- 界面倍率不是整数时,请用2x或4x的PNG,而不要放大1x;或者把SVG源交给引擎,让它按最终尺寸栅格化。
- 角标是唯一的边框,所以面板背后需要一块能读得清的底——在明亮天空之上,请在下面垫一块40%的黑色板,而不是把角标加粗。
许可
可复制的署名文字
"Neon 面板套件 — 角标面板与按钮" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/neon-panel-ui-kit


