Паки интерфейса
Paper Элементы управления — флажок, переключатель и ползунок
Восемь элементов управления в светлый пергамент: флажок, радиокнопка, переключатель и ползунок, каждое состояние вкл./выкл. нарисовано другой формой. SVG и PNG.

Об этом паке
Элементы формы для светлого экрана настроек. Отмеченное состояние заливается ржавчиной, а не инвертируется в тёмное, и галочка внутри нарисована самым тёмным тоном бумаги — белая галочка на этом акценте не проходит по контрасту на 22 пикселях, а это ровно тот размер, который использует строка настроек.
Набор покрывает четыре элемента, которые экрану настроек действительно нужны: флажок, радиокнопка, переключатель и ползунок с отдельной рукояткой. Каждый элемент с состояниями несёт оба состояния в собственном файле, на базе 22×22 — переключатель 44×22, а дорожка ползунка шириной 176 px, чтобы её можно было нарезать nine-slice на любую длину.
Включено и выключено нарисованы разными формами, а не разными цветами. Неотмеченный флажок — пустая выемка; отмеченный — заполненная поверхность с вырезанной галочкой. Это важно, потому что экран настроек — ровно то место, где игрок с наибольшей вероятностью включил режим для дальтоников, шейдер градаций серого или сильно тонированный постпроцесс, — а состояние, читаемое только по оттенку, исчезает под всеми тремя.
Ползунок поставляется дорожкой и рукояткой, а не одним спрайтом. Анимировать цельный ползунок значит перерисовывать его на каждое значение; с двумя частями вы растягиваете заливку и двигаете рукоятку — ровно то, чего любой UI-тулкит и так ждёт. У рукоятки есть центральная насечка, чтобы её поворот и положение оставались читаемыми в малых размерах.
Всё включено как редактируемый SVG и как прозрачный PNG плоский в 1x, 2x и 4x, нарисованное теми же шестью тонами тёплая бумага, что и остальное семейство Paper.
Загрузка
Прямая ссылка · без регистрации · без страницы ожиданияПолный комплект — 8 исходников SVG, экспорт PNG в 1x/2x/4x, лицензия и readme
| Файл | Формат | Вес | Загрузка |
|---|---|---|---|
| Полный комплект — 8 исходников SVG, экспорт PNG в 1x/2x/4x, лицензия и readme | ZIP | 45 kB | Получить → |
| Переключатель (включённое состояние), редактируемый SVG | SVG | 415 B | Получить → |
| Дорожка ползунка, редактируемый SVG | SVG | 442 B | Получить → |
Как использовать
- Подменяйте всю текстуру между файлами включено и выключено вместо тонирования одного спрайта; состояния различаются формой, и один тон их не воспроизведёт.
- Дорожка ползунка принимает nine-slice с концом 7 px с каждой стороны — растяните середину, и скруглённые концы останутся нетронутыми на любой ширине.
- В Unity подключите два файла к графике Background и Checkmark компонента Toggle либо меняйте спрайт в обработчике onValueChanged, если хотите обойтись одним изображением.
- Центрируйте рукоятку на краю заливки: её ширина 19 px, поэтому сместите её на половину этого от правого края заливки, чтобы она сидела на значении, а не за ним.
- Галочка нарисована самым тёмным тоном палитры, а не белым, потому что белая галочка на ржавом акценте не проходит по контрасту в этом размере, а тёмная проходит с запасом.
Лицензия
Creative Commons «С указанием авторства» 4.0 — Бесплатно для коммерческого использования. Указание авторства обязательно. Полные условия · Что это значит на практике
"Paper Элементы управления — флажок, переключатель и ползунок" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-ui-controls


