Перейти к содержимому

SkiMobile · действующее руководство по бренду и стандартам сети.

Визуальная система

Графика и иконки

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 скрывайте от скринридера, у кнопок без текста задавайте доступное имя.