Визуальная система
Графика и иконки
SkiMobile Icons 1.0: 143 пиктограммы, акцентные цвета, пять состояний движения, SVG и прозрачные PNG. Каталог, поиск и готовые наборы.
Библиотека иконок
Загружаем библиотеку иконок…
Один язык для всех сценариев
SkiMobile Icons 1.0 — единая библиотека из 143 символов. 11 групп: снаряжение, курорт и погода, услуги и сеть, бронирование и оплата, кабинет и общение, навигация, действия, медиа и файлы, настройки, состояния, бренд и документы. Один символ сохраняет значение на всех экранах и носителях.
15 собственных пиктограмм передают специфику SkiMobile: лыжи, сноуборд, два вида ботинок, шлем, маска, палки, куртка, брюки, перчатки, комплект, крепления, склон, обслуживание и сушка. Универсальные символы используют геометрию Lucide. Иконка обозначает категорию или действие; фотография показывает конкретное снаряжение.
Геометрия, размеры и размещение
Мастер — сетка 24 × 24, толщина контура 1,75, округлые окончания и соединения, без заливки и объёмных эффектов. Геометрия масштабируется пропорционально. Основные размеры интерфейса: 16 px рядом с метаданными, 20 px в строках, 24 px в кнопках, 32–48 px в карточках услуг. Размер и толщина одинаковы у соседних символов.
Отступ до подписи — 8 px, внутри компактной строки — 6 px. Символ оптически выравнивается с текстом; кнопка резервирует место до появления иконки. Иконку не растягивают по одной оси, не обрезают и не помещают поверх пёстрого изображения без спокойной подложки.
Акцент и семантический цвет
Контур с акцентом: основной рисунок использует цвет текста, смысловая деталь — выбранный акцент. Голубой используется по умолчанию; доступны бирюзовый, фиолетовый, зелёный и янтарный. Для одноцветного нанесения и плотных интерфейсов выбирайте монохромную версию. Светлая и тёмная версии содержат отдельные значения для своего фона.
Красный обозначает ошибки, опасные и критичные действия. Успех — зелёный, предупреждение — янтарный. Семантические символы сохраняют эти цвета при любом пользовательском акценте. Цвет всегда сопровождается формой и понятной подписью; критичность не передаётся одним оттенком. Цвета самого логотипа остаются неизменными.
Появление, цикл, отклик и исчезновение
Статичное состояние — полный читаемый символ. Появление — 0,48 с: контур раскрывается, масштаб мягко возвращается к 100%, деталь набирает акцент. Исчезновение — 0,28 с: прозрачность уменьшается, символ продолжает направление скольжения и заканчивается пустым кадром. Отклик — 0,56 с, один короткий жест после действия.
Цикл — 3,2 с, бесшовный. Символ дышит до 101,5%; смысловая деталь выполняет небольшой подъём, сдвиг или поворот, акцент плавно смягчается и возвращается. Для индикатора ожидания используется вращение. Одновременно движется только выбранный образец; каталог остаётся спокойным и читаемым.
В рабочих экранах иконки дают короткий отклик при наведении, клавиатурном фокусе и нажатии. Постоянное движение используется для понятного состояния процесса или отдельного управляемого образца. Цикл имеет паузу, останавливается вне экрана и в скрытой вкладке; ручная пауза сохраняется. Звук не используется.
Доступность и управление
Область нажатия — минимум 44 × 44 px даже при символе 16 px. Важные действия сопровождаются видимым текстом. Кнопка только с иконкой имеет доступное название; декоративный символ скрыт от скринридера. Выбранное состояние обозначается также рамкой и aria-pressed, фокус — заметным контуром.
Настройка «Меньше» и системное уменьшение движения показывают статичный символ; системная настройка имеет приоритет. В библиотеке сохраняются ручная перемотка, шаг по кадрам и скачивания. Повышенный контраст усиливает интерфейс, принудительные системные цвета заменяют акцент цветом текста. Не используйте мигание и вращение для предупреждений.
Файлы, наборы и исходники
SVG — прозрачный вектор со статичным рисунком или автономной анимацией, без внешних зависимостей. PNG — статичный RGBA-файл: 16, 20, 24, 32, 48, 64, 128, 256 или 512 px. PNG создаётся по выбранным цвету, теме и размеру; поверхность предпросмотра в файл не входит. Для печати выбирайте статичный одноцветный SVG и сохраняйте пропорции.
Полный комплект и 11 наборов по категориям содержат все SVG-варианты, инструкцию RU/EN и сведения о происхождении. Отдельный компактный пакет включает векторную геометрию, таймлайн, каталог и SVG-sprite. Ссылка на выбор сохраняет иконку, состояние, цвет, тему, формат, размер и язык страницы.
Собственные пиктограммы и движение созданы для SkiMobile. Геометрия Lucide распространяется по ISC; унаследованная геометрия Feather — по MIT. Лицензионные уведомления включены в экспортированные SVG и архивы. При изменении геометрии или таймлайна выпускайте новую версию набора и сохраняйте прежние адреса файлов.
Иллюстрации и паттерны
Горная линия строится из простого контура с округлыми соединениями. Используйте глубокий синий и голубой, одну толщину и большое свободное поле. Паттерны размещайте по краям носителя; под текстом оставляйте ровную поверхность.
Для каждого изображения сохраняйте SVG-мастер, цветовую версию и сведения об использовании. Не смешивайте контурные и объёмные иконки в одном интерфейсе.
Проверка
Проверяйте читаемость в натуральном размере, обе темы, семантический цвет, клавиатурный фокус и уменьшение движения. Появление заканчивается статичным мастером, исчезновение — пустым кадром, начало и конец цикла совпадают. Используйте актуальные файлы библиотеки; не подменяйте смысл случайным похожим символом.
Выбор пиктограммы по смыслу
Действия используют общеупотребимые символы: телефон — связь, точка — место, доставка — получение. Спортивные пиктограммы обозначают категорию; они не подтверждают наличие конкретной модели или безопасность оборудования.
Для указателей внутри точки сочетайте стрелку и слово. На малом размере выбирайте статичный вариант без вторичных деталей; в печати проверяйте одноцветную версию. Декоративные SVG скрывайте от скринридера, у кнопок без текста задавайте доступное имя.