{"id":8721,"title":"\u0427\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u0440\u044b\u0431\u044c\u0435\u0439 \u0447\u0435\u0448\u0443\u0438","url":"\/redirect?component=advertising&id=8721&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-krossovki-iz-chaynogo-griba&placeBit=1&hash=3f7bfd5e764a97a666a0f91fc9e9278a2147bac49abdacebb6449b781d4d5ca0","isPaidAndBannersEnabled":false}
Дизайн
e-legion

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

Как часто вы меняете скриншоты в 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.

0
9 комментариев
Популярные
По порядку
Написать комментарий...

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

0

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

2

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

0

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

0

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

1

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

0

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

0
Парадный каякер

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

0

спс, в закладки!

0
Читать все 9 комментариев
Новые гарантии для одиноких родителей

Государственная Дума РФ 9 ноября 2021 года приняла в третьем чтении закон, предоставляющий дополнительные гарантии отдельным категориям работников, имеющих несовершеннолетних дней, и вносящий поправки в Трудовой Кодекс РФ.

«Яндекс.Маркет» добавил услугу установки бытовой техники в день получения покупки Статьи редакции

Пока функция доступна в Москве и Нижнем Новгороде.

Что такое digital nomad виза и как ее получить?

Одним из плюсов жизни цифрового кочевника (digital nomad) является возможность попасть в страны, закрытые для всех туристов во время пандемии. Ещё digital nomad виза, которую иногда также называют визой удаленного работника, дает право проживать и работать в определенной стране на протяжении большого периода времени. В статье мы расскажем о ее…

Бизнесменам разрешат перевести личные фонды в российские офшоры

Согласно проекту поправок Минэкономразвития РФ к закону "О международных компаниях и международных фондах" министерство планирует разрешить бизнесменам регистрировать в так называемых русских офшорах - специальных административных районах (САР) в Калининграде и Владивостоке - личные фонды и трасты.

Невидимый убийца: как воздух в вашем офисе делает вас глупее

Важное исследование, которое должно заставить все компании пересмотреть свои офисы.

Российско-швейцарская WayRay представила свой первый прототип электромобиля с AR-остеклением Статьи редакции

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

WayRay Holograktor WayRay
Сервис «Кухня на районе» отменил бесплатную доставку еды Статьи редакции

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

Омикрон проверит работоспособность стратегии покупки акций на спадах

Появление варианта омикрон позволит вновь проверить работоспособность стратегии покупки на спадах, которая в этом году пока сбоев не давала.

Минэнерго включило в правила для субсидий на зарядные станции медленную зарядку и четыре выхода для электромобилей Статьи редакции

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

Мысли создателя FastAPI Себастьяна Рамиреса из интервью Evrone

Себастьян Рамирез — энтузиаст open source, создатель таких популярных инструментов, как FastAPI, Typer и SQLModel. В интервью он поделился мнением о собственных проектах, образовании для разработчиков и собственной популярности в Twitter. Полный текст доступен по ссылке.

null