Выкладываем мобильное приложение: шаблоны и гайдлайны для дизайнера

Как часто вы меняете скриншоты в App Store или загружаете новое приложение в Google Play? Мне приходится сталкиваться с задачей подобного рода не чаще, чем раз в полугодие. За это время знания о процессе стираются и приходится вспоминать всё заново — гуглить статьи, переделывать множество макетов...
В один прекрасный день я решила — хватит это терпеть! Я собрала в одной статье всю необходимую краткую информацию и ссылки на официальные источники, а также подготовила шаблон. Эти артефакты помогут вам быстро и практически безболезненно подготовить нужный графический контент для публикации вашего приложения в App Store, Google Play или Huawei AppGallery.
Шаблон можно загрузить для Figma или Sketch.
В каждом шаблоне есть 3 блока — App Store, Google Play и Huawei AppGallery, где собраны шаблоны для подготовки графического контента — скринов и иконок приложений. Все элементы уже нарезаны под требуемые платформой размеры. Вам останется разместить свой контент и скачать, нажав одну кнопку.
Добавлю довольно банальную вещь — мир IT развивается очень быстро. Материалы в этой статье актуальны на конец 2020 года. Также будут приведены ссылки на первоисточники. С ними вы сможете ознакомиться, чтобы дополнительно убедиться в актуальности используемой вами информации.
Начнём.
Саша, дизайнер e-Legion

Иконки для приложения должны отвечать следующим требованиям:

отсутствует заданный корнер-радиус (углы не скругляются),
отсутствуют слои с прозрачностью,
слои слиты (flatten),
формат png.

В Human Interface Guidelines есть раздел App Icon, где можно ознакомиться с более подробной информацией о требованиях к иконкам.

Разместите иконку вашего приложения в шаблоне.

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

И загрузите пак иконок для iPhone, iPad или обоих устройств сразу.

Для приложения следует загрузить как минимум 1 скриншот. Максимально допустимое количество — 10.

Для iPhone обязательны скриншоты в двух размерах: для девайсов 6.5 дюймов (1284 x 2778 px) — с «чёлкой» и 5.5 дюймов (1242 x 2208 px) — без «чёлки». Для остальных девайсов скрины уменьшаются автоматически.

Для iPad обязательный размер один — 12.9 дюймов (2048 x 2732 px). Он обязателен для загрузки для iPad Pro 2 поколения и для iPad Pro 3 и 4 поколений. Скриншоты для остальных девайсов уменьшаются автоматически.

Подробнее о требованиях к скринам для iPhone и iPad, а также Mac, Apple TV и Apple Watch можно ознакомиться в разделе Screenshot Specifications сайта App Store Connect Help. Также там вы найдете информацию о размерах скриншотов для каждого размера девайсов, если вдруг они вам понадобятся.

Вы можете добавить не только скриншоты, но и видео, чтобы лучше рассказать о своем приложении. С требованиями можно ознакомиться в разделе App preview specifications сайта App Store Connect Help.

Иконка приложения должна отвечать следующим требованиям:

размер 512 x 512 px,
формат png,
отсутствуют скругления (полный квадрат),
отсутствуют тени.

На сайте developer.android.com можно подробнее ознакомиться с требованиями к иконке приложения. Шаблон иконки вы сможете найти в файле. Или загрузить его с сайта.

Для приложения следует загрузить как минимум 2 скриншота. Максимально допустимое количество — 8.

Для Android нет строгих правил по необходимым размерам скриншотов. Рекомендуется загружать изображения:

не менее 320 px,
не более 3840 px,
отношение длинной стороны к короткой не более 2:1.

Мы с коллегами из e-Legion обычно используем скрины размером 1920 x 1080 px.

Для Android помимо скринов нужно подготовить дополнительные изображения.

— Значок с высоким разрешением (в дополнение к иконке приложения):

формат png,
размер 512 х 512 px.

— Картинка для описания (рекламное изображение, отражающее суть приложения):

формат png или jpeg,
размер 1024 х 500 px.

— Баннер для телевизора (отображается только на Android TV, но система может требовать данное изображение, даже если ваше приложение не поддерживает подобные устройства):

формат png или jpeg,
размер 1280 х 720 px.

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

Подробнее о требованиях к изображениям можно почитать на сайте support.google.com. Также там вы сможете найти требования к круговым панорамам (такой контент необходимо подготовить, если вы хотите опубликовать приложение для Daydream).

Иконка приложения должна отвечать следующим требованиям:

размер 216 x 216 px,
формат png или webp,
отсутствуют скругления (полный квадрат).

Шаблон для иконки вы сможете найти в файле.

Для приложения следует загрузить как минимум 3 скриншота. Максимально допустимое количество не ограничено, но в этом вопросе не стоит перегибать палку.

Рекомендации к формату скринов:

размер 450 х 800 px,
соотношение сторон 9 : 16,
формат jpeg, jpg, png.

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

Также существует Руководство по проверке приложений, в котором информация несколько отличается от приведенной в статье по ссылке выше. Поэтому перед публикацией стоит дополнительно проконсультироваться у разработчиков или представителей Huawei.

Шаблоны для Sketch и Figma доступны на Google Drive.

10 комментариев

Mikhail Che

17.12.2020

хм, а что значит отсутствуют скругления? такое нельзя?

Ответить

Aleksandra

Загружаемая иконка должна иметь квадратную форму (с углами 90 градусов).
То есть даже если ваше лого имеет какую-то форму, отличную от квадрата (картинка в левом столбце), то вы все равно должны разместить его на квадрате (2 картинки в среднем столбце).
В вашем случае я бы подготовила белый квадрат и разместила на нем фигуры.