界面合集

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

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

关于这个合集

给浅色设置界面用的表单控件。勾选态填的是锈色而不是反转成深色，里面的对勾用最深的纸色调来画——在这个锈色点缀上，白色对勾在22像素时达不到对比度，而那恰恰是一行设置实际用的尺寸。

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

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

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

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

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

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

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

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

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

可复制的署名文字

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