Фирменный стиль в мобильном приложении: иконки и сплэш-скрины
Логотип и иконка: почему это разные задачи дизайна
Логотип решает задачу узнавания бренда в статике — на упаковке, в шапке сайта, в подписи письма. Иконка решает задачу навигации в динамике: пользователь ищет её взглядом среди множества похожих квадратов и должен найти за 1-2 секунды. Это разные пользовательские сценарии, и переносить решение из одного в другое буквально — ошибка.
Практическое правило адаптации: возьмите фирменный знак и уберите всё, что не читается при масштабировании до 29×29 px (минимальный размер на iOS). Если остаётся вменяемый силуэт — это кандидат на иконку. Если остаётся нечитаемое пятно — нужен отдельный символ, построенный на том же цвете и геометрии, что и основной бренд-знак, но без деталей: без вписанного текста, без тонких линий, без полупрозрачных слоёв.
iOS и Android: два разных технических языка одной иконки
Здесь и начинаются реальные сложности фирменного стиля в приложении — платформы физически по-разному обрабатывают графику, и один макет нельзя механически растянуть на обе.
| Параметр | iOS | Android |
|---|---|---|
| Формат исходника | 1024×1024 PNG, без прозрачности, цельный фон | Адаптивная иконка: два слоя — foreground 108×108dp и background |
| Форма | Квадрат — маску, скругление и тень система добавляет автоматически | Система сама формирует форму (круг, капля, квадрат) в зависимости от оболочки телефона |
| Размер в сторе | 1024×1024 px в App Store | 512×512 px в Google Play |
| Реакция на тему | Фиксированный вид | С Android 13 система может подстраивать цвет иконки под обои пользователя (Material You) |
Главная ошибка на этом этапе — добавлять вручную скругления углов или тень под iOS-иконку. Apple делает это автоматически на уровне системы, и дублирование даёт визуальный артефакт: двойную тень, неровный край. На Android обратная проблема: если foreground-слой не оставляет достаточных полей (safe zone 66×66 dp, примерно 61% от площади 108×108 dp), при смене формы маски логотип обрежется по краям на некоторых оболочках.
Как согласовать оба требования без потери фирменного стиля
Рабочий подход — не рисовать «иконку для iOS» и «иконку для Android» отдельно, а сделать один мастер-символ на прозрачном фоне с достаточными полями, а затем собрать под него два техпакета: заливку под квадрат для iOS и разделение на foreground/background для Android. Цвет фона в обоих случаях должен быть фирменным — это единственный элемент, который остаётся визуально стабильным независимо от маски.
Сплэш-скрин: заставка бренда или снимок интерфейса
Здесь распространено заблуждение, которое стоит закрыть отдельно: сплэш-скрин — не место для эффектной анимации логотипа. Apple прямо формулирует требование: launch screen должен выглядеть как первый экран приложения, а не как отдельная брендовая заставка. Цель — создать иллюзию мгновенного запуска: пока приложение грузится, пользователь видит статичный слепок интерфейса (шапку, цвет фона, иногда упрощённый скелетон контента), а не крутящийся логотип на белом фоне.
Это не значит, что фирменный стиль исчезает со сплэш-скрина — наоборот, он проявляется через цвет фона, форму шапки, типографику заголовка, которые совпадают с тем, что пользователь увидит секундой позже. Разница в подходах:
| Подход | Что видит пользователь | Риск |
|---|---|---|
| Брендовая заставка с анимацией лого | Статичный или анимированный логотип 2-3 секунды | Ощущение долгой загрузки, разрыв между заставкой и реальным интерфейсом |
| Снимок первого экрана (рекомендация Apple) | Упрощённая копия реального UI с фирменными цветами и формами | Требует синхронизации макета сплэша с реальной версткой при каждом редизайне |
Дизайн-система: как документировать иконки и сплэши для разработчиков
Большинство брендбуков останавливаются на цветах и типографике, оставляя иконки и сплэш-скрины на откуп разработчику «по наитию». Это создаёт разрыв между дизайном и реализацией — типичная причина, почему фирменный стиль в приложении «расползается» после первого крупного обновления.
В гайдлайн для разработчиков стоит включать не картинки, а системные правила:
- Мастер-файл символа в векторе с обозначенными safe zone для iOS и Android отдельно;
- Таблицу соответствия размеров: от 1024×1024 (сторы) до 20×20 (уведомления, iOS);
- Правило построения foreground/background слоёв для адаптивной иконки Android с указанием допустимого сдвига при смене маски;
- Макет сплэш-скрина, привязанный к реальной верстке первого экрана, с версионностью — при изменении дизайна главного экрана сплэш обновляется синхронно;
- Цветовые токены фона иконки и сплэша, совпадающие с основной палитрой бренда, а не подбираемые «на глаз» под конкретный релиз.
Ошибки, из-за которых приложение отклоняют или теряет загрузки
Часть ошибок — чисто технические и ведут к отклонению при модерации, часть — стилистические и просто снижают конверсию в установку.
- Текстовые бейджи на иконке («Top», «Sale», числовой рейтинг со звёздами) — прямое основание для отказа в Google Play и App Store;
- Название бренда мелким текстом внутри иконки — при масштабировании до 29-40 px превращается в нечитаемое пятно;
- Ручное добавление тени и скругления на iOS-иконке — конфликтует с автоматической маской системы;
- Недостаточные поля у foreground-слоя на Android — логотип обрезается при смене формы маски на разных оболочках;
- Анимированная брендовая заставка вместо снимка интерфейса на сплэше iOS — не запрещена формально, но создаёт ощущение медленного запуска и не соответствует гайдлайну Apple;
- Разный визуальный стиль иконки и внутреннего UI — пользователь после установки не узнаёт бренд, с которым только что взаимодействовал в сторе.
Проверка гипотез: A/B-тестирование иконки в сторах
Фирменный стиль иконки не обязательно угадывать интуитивно — обе платформы дают инструменты проверки. В Google Play это Store Listing Experiments, в App Store — Product Page Optimization. Практика показывает, что аудитории платформ реагируют по-разному: вариант иконки, повышающий конверсию в App Store, может проседать в Google Play, и наоборот. Поэтому единый фирменный знак — это база, но финальное решение по контрастности фона, насыщенности цвета или углу символа стоит проверять раздельно для каждой платформы, а не переносить победивший вариант автоматически.
Практическое правило адаптации: возьмите фирменный знак и уберите всё, что не читается при масштабировании до 29×29 px (минимальный размер на iOS). Если остаётся вменяемый силуэт — это кандидат на иконку. Если остаётся нечитаемое пятно — нужен отдельный символ, построенный на том же цвете и геометрии, что и основной бренд-знак, но без деталей: без вписанного текста, без тонких линий, без полупрозрачных слоёв.
iOS и Android: два разных технических языка одной иконки
Здесь и начинаются реальные сложности фирменного стиля в приложении — платформы физически по-разному обрабатывают графику, и один макет нельзя механически растянуть на обе.
| Параметр | iOS | Android |
|---|---|---|
| Формат исходника | 1024×1024 PNG, без прозрачности, цельный фон | Адаптивная иконка: два слоя — foreground 108×108dp и background |
| Форма | Квадрат — маску, скругление и тень система добавляет автоматически | Система сама формирует форму (круг, капля, квадрат) в зависимости от оболочки телефона |
| Размер в сторе | 1024×1024 px в App Store | 512×512 px в Google Play |
| Реакция на тему | Фиксированный вид | С Android 13 система может подстраивать цвет иконки под обои пользователя (Material You) |
Главная ошибка на этом этапе — добавлять вручную скругления углов или тень под iOS-иконку. Apple делает это автоматически на уровне системы, и дублирование даёт визуальный артефакт: двойную тень, неровный край. На Android обратная проблема: если foreground-слой не оставляет достаточных полей (safe zone 66×66 dp, примерно 61% от площади 108×108 dp), при смене формы маски логотип обрежется по краям на некоторых оболочках.
Как согласовать оба требования без потери фирменного стиля
Рабочий подход — не рисовать «иконку для iOS» и «иконку для Android» отдельно, а сделать один мастер-символ на прозрачном фоне с достаточными полями, а затем собрать под него два техпакета: заливку под квадрат для iOS и разделение на foreground/background для Android. Цвет фона в обоих случаях должен быть фирменным — это единственный элемент, который остаётся визуально стабильным независимо от маски.
Сплэш-скрин: заставка бренда или снимок интерфейса
Здесь распространено заблуждение, которое стоит закрыть отдельно: сплэш-скрин — не место для эффектной анимации логотипа. Apple прямо формулирует требование: launch screen должен выглядеть как первый экран приложения, а не как отдельная брендовая заставка. Цель — создать иллюзию мгновенного запуска: пока приложение грузится, пользователь видит статичный слепок интерфейса (шапку, цвет фона, иногда упрощённый скелетон контента), а не крутящийся логотип на белом фоне.
Это не значит, что фирменный стиль исчезает со сплэш-скрина — наоборот, он проявляется через цвет фона, форму шапки, типографику заголовка, которые совпадают с тем, что пользователь увидит секундой позже. Разница в подходах:
| Подход | Что видит пользователь | Риск |
|---|---|---|
| Брендовая заставка с анимацией лого | Статичный или анимированный логотип 2-3 секунды | Ощущение долгой загрузки, разрыв между заставкой и реальным интерфейсом |
| Снимок первого экрана (рекомендация Apple) | Упрощённая копия реального UI с фирменными цветами и формами | Требует синхронизации макета сплэша с реальной версткой при каждом редизайне |
Дизайн-система: как документировать иконки и сплэши для разработчиков
Большинство брендбуков останавливаются на цветах и типографике, оставляя иконки и сплэш-скрины на откуп разработчику «по наитию». Это создаёт разрыв между дизайном и реализацией — типичная причина, почему фирменный стиль в приложении «расползается» после первого крупного обновления.
В гайдлайн для разработчиков стоит включать не картинки, а системные правила:
- Мастер-файл символа в векторе с обозначенными safe zone для iOS и Android отдельно;
- Таблицу соответствия размеров: от 1024×1024 (сторы) до 20×20 (уведомления, iOS);
- Правило построения foreground/background слоёв для адаптивной иконки Android с указанием допустимого сдвига при смене маски;
- Макет сплэш-скрина, привязанный к реальной верстке первого экрана, с версионностью — при изменении дизайна главного экрана сплэш обновляется синхронно;
- Цветовые токены фона иконки и сплэша, совпадающие с основной палитрой бренда, а не подбираемые «на глаз» под конкретный релиз.
Ошибки, из-за которых приложение отклоняют или теряет загрузки
Часть ошибок — чисто технические и ведут к отклонению при модерации, часть — стилистические и просто снижают конверсию в установку.
- Текстовые бейджи на иконке («Top», «Sale», числовой рейтинг со звёздами) — прямое основание для отказа в Google Play и App Store;
- Название бренда мелким текстом внутри иконки — при масштабировании до 29-40 px превращается в нечитаемое пятно;
- Ручное добавление тени и скругления на iOS-иконке — конфликтует с автоматической маской системы;
- Недостаточные поля у foreground-слоя на Android — логотип обрезается при смене формы маски на разных оболочках;
- Анимированная брендовая заставка вместо снимка интерфейса на сплэше iOS — не запрещена формально, но создаёт ощущение медленного запуска и не соответствует гайдлайну Apple;
- Разный визуальный стиль иконки и внутреннего UI — пользователь после установки не узнаёт бренд, с которым только что взаимодействовал в сторе.
Проверка гипотез: A/B-тестирование иконки в сторах
Фирменный стиль иконки не обязательно угадывать интуитивно — обе платформы дают инструменты проверки. В Google Play это Store Listing Experiments, в App Store — Product Page Optimization. Практика показывает, что аудитории платформ реагируют по-разному: вариант иконки, повышающий конверсию в App Store, может проседать в Google Play, и наоборот. Поэтому единый фирменный знак — это база, но финальное решение по контрастности фона, насыщенности цвета или углу символа стоит проверять раздельно для каждой платформы, а не переносить победивший вариант автоматически.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
