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

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

Как часто вы меняете скриншоты в App Store или загружаете новое приложение в Google Play? Мне приходится сталкиваться с задачей подобного рода не чаще, чем раз в полугодие. За это время знания о процессе стираются и приходится вспоминать всё заново — гуглить статьи, переделывать множество макетов...

В один прекрасный день я решила — хватит это терпеть! Я собрала в одной статье всю необходимую краткую информацию и ссылки на официальные источники, а также подготовила шаблон. Эти артефакты помогут вам быстро и практически безболезненно подготовить нужный графический контент для публикации вашего приложения в App Store, Google Play или Huawei AppGallery.

Шаблон можно загрузить для Figma или Sketch.

В каждом шаблоне есть 3 блока — App Store, Google Play и Huawei AppGallery, где собраны шаблоны для подготовки графического контента — скринов и иконок приложений. Все элементы уже нарезаны под требуемые платформой размеры. Вам останется разместить свой контент и скачать, нажав одну кнопку.

Добавлю довольно банальную вещь — мир IT развивается очень быстро. Материалы в этой статье актуальны на конец 2020 года. Также будут приведены ссылки на первоисточники. С ними вы сможете ознакомиться, чтобы дополнительно убедиться в актуальности используемой вами информации.

Начнём.

Саша, дизайнер e-Legion

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.

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

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

Ответить

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

2
Ответить

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

Ответить

Вам нужно подготовить квадратную иконку

1
Ответить

Выкладка – это сильно, конечно

Ответить

Мы используем в проектах cordova-res
Нужно чуток после доделывать, но инструмент полезный.

Ответить

В вебе очень много разнообразных инструментов на вкус и цвет для такого, смысл скачивать npm пакет?

Ответить