Выкладываем мобильное приложение: шаблоны и гайдлайны для дизайнера
Как часто вы меняете скриншоты в App Store или загружаете новое приложение в Google Play? Мне приходится сталкиваться с задачей подобного рода не чаще, чем раз в полугодие. За это время знания о процессе стираются и приходится вспоминать всё заново — гуглить статьи, переделывать множество макетов...
В один прекрасный день я решила — хватит это терпеть! Я собрала в одной статье всю необходимую краткую информацию и ссылки на официальные источники, а также подготовила шаблон. Эти артефакты помогут вам быстро и практически безболезненно подготовить нужный графический контент для публикации вашего приложения в App Store, Google Play или Huawei AppGallery.
Шаблон можно загрузить для Figma или Sketch.
В каждом шаблоне есть 3 блока — App Store, Google Play и Huawei AppGallery, где собраны шаблоны для подготовки графического контента — скринов и иконок приложений. Все элементы уже нарезаны под требуемые платформой размеры. Вам останется разместить свой контент и скачать, нажав одну кнопку.
Добавлю довольно банальную вещь — мир IT развивается очень быстро. Материалы в этой статье актуальны на конец 2020 года. Также будут приведены ссылки на первоисточники. С ними вы сможете ознакомиться, чтобы дополнительно убедиться в актуальности используемой вами информации.
Начнём.
App Store
Иконки
Иконки для приложения должны отвечать следующим требованиям:
- отсутствует заданный корнер-радиус (углы не скругляются),
- отсутствуют слои с прозрачностью,
- слои слиты (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.
Google Play
Иконки
Иконка приложения должна отвечать следующим требованиям:
- размер 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).
Huawei AppGallery
Иконки
Иконка приложения должна отвечать следующим требованиям:
- размер 216 x 216 px,
- формат png или webp,
- отсутствуют скругления (полный квадрат).
Шаблон для иконки вы сможете найти в файле.
Скрины и другие графические материалы
Для приложения следует загрузить как минимум 3 скриншота. Максимально допустимое количество не ограничено, но в этом вопросе не стоит перегибать палку.
Рекомендации к формату скринов:
- размер 450 х 800 px,
- соотношение сторон 9 : 16,
- формат jpeg, jpg, png.
Подробнее с информацией по загрузке можно ознакомиться в руководстве для разработчиков.
Также существует Руководство по проверке приложений, в котором информация несколько отличается от приведенной в статье по ссылке выше. Поэтому перед публикацией стоит дополнительно проконсультироваться у разработчиков или представителей Huawei.
Шаблоны для Sketch и Figma доступны на Google Drive.