{"id":10861,"title":"\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0438\u043b\u043e\u0442 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 PwC Venture Hub","url":"\/redirect?component=advertising&id=10861&url=https:\/\/vc.ru\/promo\/349044-korotko-zapustit-pilot-i-poluchit-novyh-klientov-s-pwc&placeBit=1&hash=4330fcc6373e035951e6ff64a3ae572ba5f30463fe8776204270bbc0bd091c81","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
10 комментариев
Популярные
По порядку
Написать комментарий...
Mikhail Che

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

Ответить
0
Развернуть ветку
Aleksandra

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

Ответить
2
Развернуть ветку
Mikhail Che

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

Ответить
0
Развернуть ветку
Blackburn

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

Ответить
0
Развернуть ветку
Aleksandra

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

Ответить
1
Развернуть ветку
Роман Анисимов

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

Ответить
0
Развернуть ветку
Roman Khegay

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

Ответить
0
Развернуть ветку
Молодой химик

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

Ответить
0
Развернуть ветку
Juan r1m

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

Ответить
0
Развернуть ветку
Анастасия Демина

Подскажите, если готовый макет для стор выкладываешь на платформе ios и появляется ошибка "альфа-канал". В таком случае, как от него в фигме избавляться?

Ответить
0
Развернуть ветку
Читать все 10 комментариев
Субботний самопиар на vc.ru

Делимся в комментах ссылками на свои проекты и скидками для висян!

Пять путешествий до Луны — столько километров ленты в TikTok могли просмотреть пользователи Yota за 2021 год
Эффективность рекламы через YouTube-блогеров для малого бизнеса

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

Аллилуйя: платные комментарии на vc.ru существуют

Не замечали в статьях на vc.ru про крупные банки (да и не только про банки) странные комментарии? Вдруг десятками слетаются любители бренда и начинают его защищать от нападок. Исследую, существует ли рынок платных комментариев для «Виси‎», и уже нашел первые следы.

«Общность условий жизни — вот что необходимо для воспитания нового человека»: почему на заре СССР появились дома-коммуны Статьи редакции

В «машинах для жилья» власти пытались воспитать человека, который бы отбросил личное и сосредоточился на общем деле. Теперь люди объединяются в коливинги, потому что хотят вместе веселиться, развиваться и получать поддержку.

«Инновации — это поле для сражений»

Как фуд-ритейл внедряет новые технологии.

Как пандемия изменила рынок онлайн-страхования

Выяснили и рассказываем, как изменился онлайн-спрос на услуги страхования с начала пандемии.

Статус бота Veles
Вы ВТБ или календарь праздников?

Зачем в мобильном приложении ВТБ каждый день показывают клиентам, какой сегодня день в истории? Нет, я очень уважаю Эйзенштейна, Сезанна и Винни-Пуха, но вам не кажется, что клиенты заходят совсем не за этим?

Сегодня стартовало закрытое бета-тестирование NFT Market на Chives Swap!
«Холакратия, любимые мемчики и прозрачность»: программист о работе в Точке, моделинге и запуске треков на Spotify

Точка — это про людей. Про сотрудников, которые создают удобный банк для бизнеса. Мы запускаем серию интервью с нашей командой, чтобы рассказать, как у нас всё устроено.

null