界面合集

Charcoal 控件 — 复选框、开关与滑块

石板粉笔的八个界面控件：复选框、单选钮、开关与滑块，开与关分别以不同的形状画出。SVG与透明PNG。

关于这个合集

目录里最大的28px控件。抖动的轮廓需要空间，抖动才读作一只手而不是渲染故障，而在20px下它就只是看着像渲染器坏了。

这一套涵盖设置界面真正需要的四个控件：复选框、单选钮、开关，以及一个滑钮独立的滑块。每个带状态的控件都把两种状态各自成文件，基底为28×28——开关是56×28，滑块轨道宽224 px，可以nine-slice到任意长度。

开与关是用不同的形状而不是不同的颜色画出来的。未勾选是一个空的凹槽，勾选是一块带切口对勾的实心面。这很重要，因为设置界面恰恰是玩家最可能开着色盲模式、灰度着色器或重度染色后处理的地方——一个只靠色相来读的状态，在这三种情况下都会消失。

滑块是以轨道加滑钮的形式提供的，而不是一整张精灵图。一体式滑块每换一个数值就得重画；分成两件，你只要拉伸填充、移动滑钮，而这正是任何界面工具包本来就期待的做法。滑钮上有一道中央刻痕，好让它的角度和位置在小尺寸下依然可读。

全部以可编辑的SVG提供，并附1x、2x与4x的平面透明PNG，用与Charcoal系列其余部分相同的六个烟灰色调绘制。

直接链接 · 无需注册 · 没有等待页

全套 — 8个SVG源文件、1x/2x/4x的PNG导出、许可与readme

这个合集包含的文件
文件	格式	体积	下载
全套 — 8个SVG源文件、1x/2x/4x的PNG导出、许可与readme	ZIP	63 kB	获取 →
开关（开启态），可编辑SVG	SVG	469 B	获取 →
滑块轨道，可编辑SVG	SVG	1.3 kB	获取 →

开与关请整体替换纹理，而不是给同一张精灵图上色；两种状态形状不同，只靠上色复现不出来。
滑块轨道可做nine-slice，两端各留9 px；拉伸中段，任何宽度下圆润的两端都保持完好。
在Unity中把两个文件分别接到Toggle组件的Background与Checkmark；若想只用一张图，也可以在onValueChanged回调里换精灵图。
让滑钮以填充边缘为中心：它宽24 px，因此从填充右缘往回移半个宽度，它就压在数值上而不是数值之后。

知识共享署名 4.0 — 商业用途也免费。需要署名。完整条款 · 实际是什么意思

可复制的署名文字

"Charcoal 控件 — 复选框、开关与滑块" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/charcoal-ui-controls