Паки интерфейса
Candy Навигационный набор
15 компонентов навигации и ввода (мультяшный) для интерфейсов в режиме светлый — тёплый кремовый, акцент розовая жвачка. SVG и прозрачный PNG в 1x/2x/4x.

Об этом паке
Candy Навигационный набор — набор из 15 компонентов навигации и ввода, нарисованных в стиле мультяшный, где толстый чистый контур охватывает глянцевое лицо с единственным бликом. В него входят активные и неактивные вкладки, дорожка полосы прокрутки, её ползунок и две стрелки, выпадающий список в закрытом и открытом состоянии со своим меню, текстовые поля в покое и в фокусе, а также круглые кнопки закрыть, назад, плюс и минус.
Большинство бесплатных наборов интерфейса останавливаются на панелях и кнопках, а значит первый же экран настроек, который вы соберёте, — это момент, когда вы начинаете рисовать свою графику. Здесь всё остальное: детали, которые меню действительно нужны, прежде чем оно заработает.
Глянец — раздел с жёстким краем на 44% высоты, а не мягкий градиент: плавное затухание читается как стекло, жёсткий раздел читается как рисунок. Смещённая тень сплошная, а не размытая, по той же причине.
Внутри этого стиля перед вами прочтение Candy: интерфейс в режиме светлый на палитре тёплый кремовый с акцентами розовая жвачка, построенный вокруг двух концентрических рамок, полностью скруглённых кнопок-пилюль в 168x56, полос с полосами, разделённых на 6 сегментов, и заливных иконок на сетке 32px. Именно эти размеры объясняют, почему два семейства могут делить художественный стиль и при этом не быть взаимозаменяемыми: стиль решает, как рисуется край, а числа решают, для чего интерфейс нужен.
Текстовое поле в фокусе утолщает свой контур, а не просто меняет цвет, потому что кольцо фокуса, состоящее только из оттенка, исчезает в режиме высокого контраста и уносит с собой навигацию с клавиатуры. Активная вкладка сливается с поверхностью под ней, а не просто светлеет, и именно это заставляет её читаться как соединённую.
Каждый спрайт поставляется как редактируемый SVG и как прозрачный PNG в 1x, 2x и 4x, так что PNG можно закинуть прямо в движок или открыть вектор и поменять цвет. Нарисовано в тех же размерах, что и остальное семейство Candy, а значит этот набор и набор панелей Candy совпадают без масштабирования любого из них. Хорошо подходит для аниме-игр и игр мультяшный.
Загрузка
Прямая ссылка · без регистрации · без страницы ожиданияПолный комплект — исходники SVG, экспорт PNG в 1x/2x/4x, лицензия и readme
| Файл | Формат | Вес | Загрузка |
|---|---|---|---|
| Полный комплект — исходники SVG, экспорт PNG в 1x/2x/4x, лицензия и readme | ZIP | 75 kB | Получить → |
| Вкладка навигации, активная, мультяшный, редактируемый SVG | SVG | 1.1 kB | Получить → |
Как использовать
- Применяйте nine-slice к дорожке полосы прокрутки только по вертикали; ползунок — отдельный спрайт, поэтому его размер можно задавать по доле контента, не растягивая насечки хвата.
- Выпадающий список — спрайт, отдельный от закрытого элемента: рисуйте его на слое выше всего остального, иначе он обрежется внутри панели, которой принадлежит.
- Используйте круглые кнопки плюс и минус как пару шага того же размера, что и кнопка закрытия, чтобы строка настроек держала единый ритм.
Лицензия
Creative Commons «С указанием авторства» 4.0 — Бесплатно для коммерческого использования. Указание авторства обязательно. Полные условия · Что это значит на практике
"Candy Навигационный набор" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/candy-navigation-kit


