иконка приложения android размеры
Обновлены требования к дизайну иконок в Play Store
Google ввела новые правила оформления значков приложений для разработчиков, чтобы сделать Play Store лучше для пользователей, пишет Android Police.
С начала апреля разработчики смогут загружать новые иконки в Google Play Console наряду со старыми. С 1 мая Google перестанет принимать к публикации иконки, не соответствующие спецификации. С 24 июня такие иконки будут преобразованы в устаревшие, а все новые значки должны быть в новом формате.
Слева направо: оригинальный значок, новый значок, оригинальный значок в «устаревшем» режиме
Размер значков остаётся прежним — 512 на 512 пикселей, но прозрачный фон Google запретит. В Play Store для Android и Chrome OS будут автоматически скругляться углы и добавляться тени. Радиус закругления будет равен 20 процентам от размера иконки. Изменения не распространяются на другие платформы Google: Wear OS, Android TV и Android Auto, а также на значки APK-файлов.
Это, по словам компании, позволит достичь единообразия интерфейса Google Play и сделать его привлекательнее для пользователей. Подробнее о спецификациях можно прочитать здесь.
Хотите сообщить важную новость? Пишите в Телеграм-бот.
А также подписывайтесь на наш Телеграм-канал.
Размеры иконок для Android приложений
Для того, чтобы согласовать интерфейсы приложений на целом зоопарке устройств, было придумано разбить их по плотности экранов (density).
Ну а точнее — все картинки можно подобрать под конкретную плотность экрана.
Для этого в проекте сразу создаются папки:
В них нужно положить адаптированные изображения.
Сайт гугла дает ценные рекомендации по расчету их размеров.
В своих проектах я часто пользуюсь только разными размерами иконки для запуска (их рекомендуют именовать с префиксом ic_launcher).
То есть вам нужно сделать файлы с одним названием, различные только разрешением, и расположенными по соответствующим папкам.
Вот размеры в пикселях для каждой плотности экрана:
Когда плотность экрана не критична, я создаю папку простую папку drawable и храню все картинки в ней.
Если же плотность экрана критична, то можно высчитать размеры изображения, исходя из соотношения размера базовой картинки к соответствующему коэффициенту экрана.
Во время публикации в маркете (play.google.com), понадобится ещё и иконка 512×512 и картинка для рекламы 1024×500.
Иногда требуется узнать плотность экрана на конечном устройстве пользователя.
Вот код примера получения плотности через getResources().getDisplayMetrics().densityDpi:
Если поставить этот код при создании активности (т.е. в методе OnCreate), мы получим сообщение с плотностью экрана текущего устройства.
А вот таким способом можно получить размер экрана устройства с помощью класса Configuration:
Ширину и высоту дисплея можно получить так:
Обратите внимание на проверку версии апи на устройстве, для версии 13+ размеры получаются по-другому.
Как создать иконки для приложений на Android и iOS
Иконка приложения для Android
1. Разрешение экранов устройств
Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.
Размер и формат иконок запуска приложения (launcher icon) для Android
Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.
Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.
Вы, конечно, помните: любое масштабирование должно сохранять пропорции изображения.
Иконки приложения для публикации на Google Play
Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.
В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения.
Требования к иконке в разделе «Рекомендуемые» :
Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».
Цели иконки приложения
У иконки приложения есть 3 основных цели:
Образцы иконок приложений.
Помогите пользователю найти приложение в Google Play
Правила дизайна иконки для Android
Слишком растянутые в длину иконки, занимающие мало пространства, не привлекают внимания пользователей и плохо сочетаются с различными фонами.
Правильно и неправильно
Детали слишком сложного значка плохо различаются в маленьком размере.
Обрезанный и глянцевый значок проигрывает такому же матовому и целому значку. Изображение не должно быть обрезанным, лучше использовать целое изображение уникальной формы. Избегайте глянца, если представленный объект сделан не из глянцевого материала.
Значок со слишком тонким контуром плохо выделяется среди других значков.
Создавайте иконки с альфа-каналом, иконки не должны занимать все пространство рамки. Тонкая визуальная обработка выделит иконку среди других.
Иконка для приложения на iOS
У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.
Необходимо создать несколько маленьких иконок разных размеров для различных устройств. Маленькая и большая иконки должны соответствовать друг другу, но могут различаться количеством деталей.
Также маленькие иконки нужны для показа:
Если у вас нет маленьких иконок, iOS уменьшит главную иконку приложения для показа в этих директориях.
Правила дизайна иконки для iOS:
Найдите элемент, который передает суть приложения и поместите его в простую, запоминающуюся форму. Аккуратно добавьте детали. Слишком сложные содержание или форма иконки плохо различимы, особенно в уменьшенных размерах.
Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.
Никто не будет анализировать иконку, чтобы понять ее значение.
Без прозрачности, простой фон
Иконка должна быть без прозрачности, фон не загроможден. Простой фон не подавляет другие элементы рядом.
Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.
Без фото, скриншотов и элементов интерфейса
Не включайте в иконку фотографии, скриншоты или элементы интерфейса. Детали на фотографии сложно рассмотреть в маленьком размере. Скриншоты не расскажут о цели приложения. Элементы интерфейса в иконке вводят пользователя в заблуждение.
Без точных копий продуктов Apple
Продукты Apple защищены авторским правом, их нельзя использовать в изображениях и иконках. К тому же, аппаратные проекты от Apple часто обновляются, иконка при этом будет выглядеть устаревшей.
Не помещайте повсюду в интерфейсе иконку приложения
Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет.
Протестируйте иконку на разных обоях
Люди выбирают различные обои для домашних экранов, поэтому вы должны протестировать иконку приложения на различных фонах.
Сохраняйте углы иконки квадратными
Система округляет углы иконки автоматически.
Вот и все! Желаем удачи и много красивых иконок для ваших приложений.
Как правильно подготавливать иконки для разработчика Андроид?
В гайде показано следующее:
Т.е. сама иконка вписывается в квадрат 24х24dp, а потом этот квадрат вписывается в квадрат 48x48dp. И когда я нарезал у меня так и получалось, что для mdpi размер png получался 48x48dp с иконкой 24х24dp внутри него.
Но потом кодер сказал мне, что когда вставил в приложение, иконка оказалась маленькой и сказал, что эти отступы вокруг самой иконки (Touch target) при нарезке делать не нужно.
Прикрепил иконки.
— это то, что я отдал кодеру
— это то, что я должен был ему отдать по его словам
Оценить 1 комментарий
Ознакомьтесь более внимательно с гайдами от гугла. В «Clearance» как раз говорится о том, что размер самой иконки 24dp, а Touch target 48dp. Поэтому от вас требуется иконка 24dp под разные разрешения, а программист уже сам сделает отступы по 12dp со всех сторон:
Вообще, рекомендуется использовать стандартные гугловские иконки, если это возможно. В вашем случае лучше так и сделать. Зайдите на гугловский сайт, либо на materialdesignicons.com и скачайте архив с этой иконкой для разных разрешений. В результате у вас получится 5 папок со всеми нужными иконками, которые вы передадите программисту.
Если же вы не нашли подходящую иконку, то можете обратиться к восхитительному ресурсу. Загружаете свою иконку для максимального расширения (xxxhdpi) размером 96х96 px. На выходе получите 5 иконок, которые уже лежат в нужных папках.
Таким образом, вы предоставите программисту все необходимые иконки на блюдечке с голубой каемочкой, и он не будет вас материть.
И еще, как мне кажется, вы делаете неправильно, когда режете иконку прямо вместе с фоном. Более разумно передавать иконку с прозрачным фоном, а цвет самой иконки сделать белым. Потому что в случае изменения цветовой схемы приложения, придется перерисовывать все иконки (менять их фон или цвет). В коде же можно будет добавить пару строк:
Гид по визуальному оформлению страниц приложений в App Store и Google Play
В рамках ASO стратегии недостаточно просто привлечь пользователей на страницу продукта в App Store или Google Play.
Ваша задача — заинтересовать людей, чтобы они установили приложение. Вы должны максимально оптимизировать все графические элементы на странице приложения, поскольку визуальная составляющая влияет на конверсию в установку.
По данным Storemaven, страница продукта менее чем за 3 секунды должна объяснить, что делает приложение. Именно эти несколько секунд влияют на принятие решения об установке. Чтобы страница вашего приложения в App Store увеличивала конверсию, вам нужно сделать её запоминающейся.
Мы в ASOdesk составили максимально подробную инструкцию о том, каким моментам в визуальном оптимизации нужно уделять внимание, в первую очередь.
Является тем самым первым элементом оформления страницы приложения, на которую обращают внимание пользователи. Она должна выделять ваш продукт на фоне конкурентов и быть запоминающейся. Меняйте иконку, проводите A/B тестирования и выбирайте вариант с наибольшей конверсией.
Каждое приложение имеет набор иконок для главного экрана и более крупную иконку для самого App Store. Иконка также отображается в настройках и результатах поиска.
Для страницы приложения в Google Play необходима иконка высокого разрешения с тем же изображением, что и на значке приложения в Android. При его создании следуйте этим рекомендациям:
У обоих магазинов приложений есть чёткие рекомендации к размерам скриншотов, их допустимому количеству, а также по контенту, который можно размещать. Внимательно прочитайте рекомендации и требования, так вы избежите проблем при прохождении проверки. Рекомендации для Google Play и App Store.
В App Store вы можете разместить до 10 скриншотов на странице приложения для iPhone, iPad, Apple Watch и Apple TV.
Скриншоты должны быть в PNG (не alpha) или JPEG. Более подробные рекомендации App Store Connect documentation.
В Google Play вы можете добавить до 8 скриншотов для каждого поддерживаемого типа устройства: смартфон, планшет (7 и 10 дюймов), Android TV и Wear OS от Google.
Большинство пользователей, скорее всего, не будет просматривать все имеющиеся скриншоты. Так как размер экрана устройства ограничен, сначала пользователь видит только два скриншота. Поэтому главные возможности и преимущества важно отразить на первых двух экранах.
Для приложений в App Store и Google Play чаще используют вертикальные (портретные) скриншоты.
Для iPhonе и Android-игр предпочтительнее делать горизонтальные скриншоты, если сам интерфейс имеет такой формат. Если же интерфейс игры вертикальный, то скриншоты также должны это отражать. Помните, что поведение пользователей двух магазинов могут различаться, и лучше планировать разные наборы скриншотов, один для App Store, а другой для Google Play.
Пример горизонтальных скриншотов в Google Play
Пример горизонтальных скриншотов и видеопревью в App Store
Также вы можете выделиться с горизонтальными скриншотами на фоне конкурентов, с вертикальным вариантом оформления страницы. Всегда экспериментируйте и находите лучшие варианты для представления своего продукта в App Store или Google Play.
Вариативность композиций, используемых издателями при оформлении скриншотов чуть более разнообразна, чем формат скриншотов. Издатели используют: обычный вариант композиции, с простым фоном или фотографиями вместо него; панорамное оформление, которое состоит из скриншотов, связанных единой композицией; вариации обычного оформления с использованием дополнительных визуальных элементов.
В августе дизайн Google Play обновился, обратите внимание на свои скриншоты в новом дизайне. Если вы ранее использовали надписи, то в текущем дизайне на устройстве текст может быть очень маленьким и плохо читаемым.
Важная информация, вынесенная на первые скриншоты, не должна быть простым перечислением функций. Вы должны донести до пользователя, преимущества и ценность приложения.
Если у вас добавились новые функции, то обязательно отразите их на скриншотах и выделите при обновлении приложения. Ваши пользователи должны наглядно увидеть новую функциональность.
Все графические материалы нужно локализовать, опираясь на культурные и языковые особенности каждой страны. Для всей графики необходимо сделать полную адаптацию под местный рынок. Такая адаптация называется культуризацией. Вы не просто переводите тексты и помещаете их на скриншоты, но меняете графические элементы, с учётом особенностей местного рынка.
Это может быть определённая цветовая гамма или фотографии с людьми другой национальности. Возможно, придётся добавить символы или же фотографии людей заменить иллюстрациями. Всё очень сильно зависит от культурных особенностей той страны, в которой вы планируете продвигать свой продукт.
Издатель использует совершенно разные фото изображения для своего приложения, один набор креативов эффективен для китайской аудитории, и уже совершенно другой используется в США.
Если Apple предложит вашему приложение установить обложку страницы продукта, она появится вверху страницы приложения в AppStore.
При создания этого элемента не включайте туда:
Полный список требования для обложки станица в App Store вы найдете здесь.
С релизом iOS 13 в App Store появилась темная тема, теперь некоторые визуальные элементы могут смотреться совсем по-другому чем на светлом фоне. Черные или темные иконки, как и скриншоты, без наличия контрастных элементов могут потеряться на темном фоне.
Видеопревью в App Store и промовидео для Google Play — это дополнительная возможность рассказать аудитории о преимуществах приложения. Наглядно показать, как продукт можно использовать в повседневной жизни.
Добавление видео может значительно повысить конверсию из просмотра страницы в установку. Согласно отчёту SplitMetrics, добавление видео превью в App Store может повысить вовлечение и коэффициент конверсии на 16%, а согласно информации от StoreMaven, наличие видео на странице вашего приложения в магазине может повысить коэффициент конверсию на 20–35%.
Прежде чем разместить видео на странице продукта, мы рекомендуем провести A/B тестирование. Известны случаи, когда наличие видеопревью, наоборот отрицательно повлияло на конверсию в установку.
Обращаем ваше мнение на нюансы, которые могут быть неочевидны, на первый взгляд, особенно если вы ранее не cоздавали видеопревью для App Store:
При планировании продвижения своих продуктов в App Store и Google Play, помните о различиях магазинов. App Store у вас есть возможность добавлять видеопревью, то в Google Play вы можете добавить только ссылку на видео, размещённую в YouTube. При этом на страницу приложения должна быть обязательно добавлена специальная графика.
Специальный баннер для превью — это изображение взятое непосредственно из вашего видео ряд. Баннер будет использоваться в качестве заставки видеопревью. Данная заставка должна привлекать и вовлекать, она будет влиять на конверсию у тех пользователей у которых не воспроизводится «автозапуск» поскольку он отключен в App Store.
Требования к созданию специального баннеры вы найдете здесь.
Всегда рекомендуем тестировать: формат скриншотов, композицию, количество скриншотов и видеопревью.
Чтобы понять, какие скриншоты будут эффективнее всего. Сделайте несколько наборов креативов и проведите A/B тестирование. Скриншоты, которые получат более высокую конверсию используйте для оформления страницы приложения. Конечно, процесс тестирования не такой простой, как кажется, на первый взгляд.
В Google Play можно провести A/B тестирование в Google Play консоли, в iTunes Connect отсутствует такая возможность. Можно использовать такие сторонние инструменты, как SplitMetrics, Storemaven или Asogiraffe. С помощью них вы можете запустить эксперименты и также выделить скриншоты с наибольшей конверсией.
Если у вас нет возможности использовать сторонние сервисы для App Store, вы можете пробовать запускать последовательное тестирование креативов. Такой вариант подойдёт для небольших компаний и разработчиков, которые не боятся ухудшить конверсию в ходе экспериментов. Для больших компаний небольшие колебания в конверсии могут аукнуться снижением органических установок.
App Store и Google Play постоянно меняются, и, в связи с этим обновляются требования к графическим материалам. Вы должны отслеживать эти изменения и, согласно им, менять иконки и скриншоты своего приложения. Изучайте конкурентов и новые веяния в дизайне графических материалов, одни и те же скриншоты приедаются, a глаз пользователя замыливается. Заменив старые скриншоты на свежие, вы можете повысить коэффициент конверсии.
Согласно отчёту Apptentive высокий рейтинг помогает приложению удерживаться в топе категорий и в топе запросов из поиска. Чем выше рейтинг и большее количество оценок, тем больше вероятность, что приложение заметят. Чем больше негативных оценок получит ваше приложение, тем ниже у него будет рейтинг, а чем ниже рейтинг тем ниже конверсия в установку.
В App Store и в Google Play пользователи могут оценить ваше приложение от 1 до 5 звёзд. Рейтинг — один из элементов страницы приложения, который вы видите сразу же после иконки и названия.
На графике видно, что приложения с наименьшей оценкой установят менее 25 процентов респондентов, приложения с оценкой выше 3 звёзд скачают более 50%.
Если вы не отработаете негатив и не сможете удерживать свою оценку достаточно высокой, то все ваши усилия по ASO оптимизацию будут напрасны. Поэтому всегда отслеживайте изменения оценки в Google Play и App Store, особенно важно это делать перед запуском рекламных кампаний.
Многие пользователи не ограничиваются оценкой, и оставляют как положительные, так и гневные отзывы о вашем продукте. Важно отслеживать все эти комментарии и реагировать на них оперативно.
Процесс работы с пользовательскими отзывами можно разделить на несколько этапов:
Мониторинг — это ежедневная работа по отслеживанию всех отзывов в App Store и Google Play. Во-первых, позволяет вам оперативно узнать о проблемах в работе приложениях или сбоях, оперативно отреагировать на них и передать команде разработчиков. Во-вторых, помогает узнать мнение ваших пользователей о продукте. И в-третьих, вовремя отреагировать на негатив и, возможно, исправить оценку приложения.
В данной инструкции описано подробно, на какие этапы можно разбить визуальную ASO оптимизацию для более эффективной работы. Какие факторы вы должны учитывать при работе с визуальными данными страницы приложения в App Store и Google Play.