Иконки и splash экраны для мобильных

Иконки — один из ключевых элементов визуальной идентификации мобильного приложения. В экосистеме Quasar настройка и генерация иконок автоматизирована, но требует соблюдения определённых требований к исходным файлам.

Требования к исходной иконке

Для корректной генерации необходимо подготовить базовый файл:

  • Формат: PNG
  • Размер: минимум 1024×1024 пикселя
  • Фон: непрозрачный (особенно важно для Android)
  • Без лишних отступов по краям
  • Центрированная композиция

Рекомендуется использовать квадратное изображение с безопасными полями, чтобы система могла корректно обрезать и масштабировать иконку под разные устройства.

Генерация иконок в Quasar

Quasar CLI предоставляет встроенный инструмент для генерации иконок:

quasar icongenie generate -i ./src/statics/icon.png

Команда:

  • создаёт набор иконок для Android и iOS
  • автоматически размещает их в нужных каталогах проекта
  • учитывает требования платформ

Основные параметры команды

  • -i — путь к исходной иконке
  • -m — указание режима (cordova, capacitor, pwa)
  • -b — цвет фона (если требуется)

Пример генерации только для мобильных платформ:

quasar icongenie generate -i ./icon.png -m capacitor,cordova

Структура сгенерированных иконок

После выполнения команды создаются директории:

Для Android

/src-capacitor/android/app/src/main/res/

Содержит папки:

  • mipmap-mdpi
  • mipmap-hdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi
  • mipmap-xxxhdpi

Каждая папка соответствует плотности пикселей устройства.

Для iOS

/src-capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/

Содержит:

  • иконки разных размеров
  • JSON-конфигурацию для Xcode

Адаптивные иконки Android

Современные версии Android используют Adaptive Icons, состоящие из двух слоёв:

  • foreground (основное изображение)
  • background (фон)

Quasar автоматически генерирует адаптивные иконки, если исходное изображение соответствует требованиям.

Особенности:

  • система может изменять форму (круг, квадрат, скруглённый)
  • важно избегать важных элементов по краям
  • желательно использовать прозрачный фон для foreground

Настройка иконок вручную

Иногда требуется ручная корректировка:

Android

Файл:

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

Позволяет:

  • изменить слои иконки
  • задать кастомные изображения

iOS

Файл:

Assets.xcassets/AppIcon.appiconset/Contents.json

Используется для:

  • привязки конкретных размеров
  • настройки отображения в Xcode

Splash Screen: назначение и особенности

Splash Screen — экран загрузки, отображаемый при запуске приложения.

Функции:

  • скрытие времени инициализации
  • демонстрация бренда
  • улучшение пользовательского восприятия

Генерация splash экранов

Quasar также предоставляет инструмент генерации:

quasar icongenie generate -i ./splash.png -m capacitor,cordova -f splash

Требования к изображению

  • Размер: минимум 2732×2732
  • Центрированное содержимое
  • Большие отступы по краям
  • Формат: PNG

Конфигурация splash в Capacitor

Файл конфигурации:

capacitor.config.js

Пример:

export default {
  plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      backgroundColor: "#ffffff",
      showSpinner: false,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999",
      splashFullScreen: true,
      splashImmersive: true
    }
  }
}

Ключевые параметры:

  • launchShowDuration — длительность отображения
  • backgroundColor — цвет фона
  • showSpinner — индикатор загрузки
  • splashFullScreen — полноэкранный режим

Конфигурация splash в Cordova

Файл:

config.xml

Пример:

<platform name="android">
  <preference name="SplashScreenDelay" value="3000" />
  <preference name="FadeSplashScreenDuration" value="500" />
</platform>

Работа со splash в Android 12+

Начиная с Android 12 система использует встроенный Splash Screen API.

Особенности:

  • системный splash отображается автоматически
  • кастомизация ограничена
  • используется иконка приложения и фон

Настройка

Файл:

android/app/src/main/res/values/themes.xml

Пример:

<style name="Theme.App.Splash" parent="Theme.SplashScreen">
  <item name="windowSplashScreenBackground">#ffffff</item>
  <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher</item>
</style>

Оптимизация отображения splash

Рекомендации

  • минимизировать время загрузки приложения
  • не перегружать splash деталями
  • использовать простой дизайн
  • избегать текста (локализация усложняется)

Частые ошибки

  • слишком маленькое изображение
  • важные элементы у краёв
  • прозрачный фон там, где он не нужен
  • несоответствие размеров платформам

Интеграция с жизненным циклом приложения

Splash экран может управляться программно:

Capacitor

import { SplashScreen } from '@capacitor/splash-screen'

SplashScreen.hide()

Позволяет:

  • скрыть splash вручную
  • синхронизировать с загрузкой данных

Поддержка тёмной темы

Для современных приложений важно учитывать dark mode.

Подходы:

  • генерация альтернативных splash экранов
  • динамическая смена фона
  • использование нейтральных цветов

Тестирование и проверка

Android

  • эмуляторы разных DPI
  • реальные устройства
  • проверка адаптивных иконок

iOS

  • Xcode Simulator
  • TestFlight
  • проверка safe area

Автоматизация через CI/CD

Генерацию иконок и splash экранов можно встроить в pipeline:

quasar icongenie generate -i ./assets/icon.png
quasar icongenie generate -i ./assets/splash.png -f splash

Преимущества:

  • консистентность ресурсов
  • отсутствие ручных ошибок
  • ускорение сборки

Практические рекомендации по дизайну

Иконки

  • простота формы
  • контрастные цвета
  • узнаваемость в маленьком размере
  • отсутствие мелких деталей

Splash

  • соответствие стилю приложения
  • минимализм
  • центрированная композиция
  • быстрый визуальный отклик

Связь с PWA и Web

Quasar использует единый подход:

  • те же исходные изображения
  • генерация для разных платформ
  • централизованное управление

Это позволяет поддерживать единый бренд независимо от платформы.

Влияние на пользовательский опыт

Качественные иконки и splash экран:

  • повышают доверие к приложению
  • улучшают первое впечатление
  • делают продукт визуально завершённым

Ошибки в этих элементах сразу заметны и снижают общее восприятие качества приложения.

Оглавление