какой размер иконки приложения андроид
Размеры иконок для Android приложений
Для того, чтобы согласовать интерфейсы приложений на целом зоопарке устройств, было придумано разбить их по плотности экранов (density).
Ну а точнее — все картинки можно подобрать под конкретную плотность экрана.
Для этого в проекте сразу создаются папки:
В них нужно положить адаптированные изображения.
Сайт гугла дает ценные рекомендации по расчету их размеров.
В своих проектах я часто пользуюсь только разными размерами иконки для запуска (их рекомендуют именовать с префиксом ic_launcher).
То есть вам нужно сделать файлы с одним названием, различные только разрешением, и расположенными по соответствующим папкам.
Вот размеры в пикселях для каждой плотности экрана:
Когда плотность экрана не критична, я создаю папку простую папку drawable и храню все картинки в ней.
Если же плотность экрана критична, то можно высчитать размеры изображения, исходя из соотношения размера базовой картинки к соответствующему коэффициенту экрана.
Во время публикации в маркете (play.google.com), понадобится ещё и иконка 512×512 и картинка для рекламы 1024×500.
Иногда требуется узнать плотность экрана на конечном устройстве пользователя.
Вот код примера получения плотности через getResources().getDisplayMetrics().densityDpi:
Если поставить этот код при создании активности (т.е. в методе OnCreate), мы получим сообщение с плотностью экрана текущего устройства.
А вот таким способом можно получить размер экрана устройства с помощью класса Configuration:
Ширину и высоту дисплея можно получить так:
Обратите внимание на проверку версии апи на устройстве, для версии 13+ размеры получаются по-другому.
Гид по визуальному оформлению страниц приложений в 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.
Как правильно подготавливать иконки для разработчика Андроид?
В гайде показано следующее:
Т.е. сама иконка вписывается в квадрат 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 иконок, которые уже лежат в нужных папках.
Таким образом, вы предоставите программисту все необходимые иконки на блюдечке с голубой каемочкой, и он не будет вас материть.
И еще, как мне кажется, вы делаете неправильно, когда режете иконку прямо вместе с фоном. Более разумно передавать иконку с прозрачным фоном, а цвет самой иконки сделать белым. Потому что в случае изменения цветовой схемы приложения, придется перерисовывать все иконки (менять их фон или цвет). В коде же можно будет добавить пару строк:
Обновлены требования к дизайну иконок в 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 и сделать его привлекательнее для пользователей. Подробнее о спецификациях можно прочитать здесь.
Хотите сообщить важную новость? Пишите в Телеграм-бот.
А также подписывайтесь на наш Телеграм-канал.
Как создать креативную иконку для мобильного приложения
Обновлено 18 марта, 2020
У каждого жителя США на смартфоне установлено больше сотни программ, и это число с каждым годом только растет. Чтобы вырваться вперед в конкурентной борьбе за пользователя, создайте уникальную иконку приложения, которая улучшит опыт взаимодействия с брендом. Как это сделать, расскажем в статье.
Что такое значок приложения
Небольшое изображение, которое пользователи видят в меню телефона, — это один из важных элементов айдентики. Иконка помогает выделиться, запомнить бренд и раскрыть суть вашего уникального предложения.
По статистике 70% мобильных приложений загружаются после поиска в App Store или Google Play (остальные — в результате рекламных кампаний, промо в соцсетях, обзоров и т.д.). Поэтому ваша задача — создать дизайн, который мгновенно привлечет внимание и вызовет желание узнать, что стоит за визуальным образом.
Технические характеристики иконок для Android и iOS
Существует два основных типа иконок — для систем Android и iOS. Хотя на первый взгляд они очень похожи, но отличаются множеством технических нюансов, которые стоит учитывать при разработке.
Топ-пять аспектов дизайна иконок
21% миллениалов удаляют мобильное приложение, если им не нравится, как иконка выглядит на экране. Поэтому важно продумать не только функциональность, но и эстетическую составляющую.
1. Простота
Лаконичность — это ключ к удачному дизайну. Вот какие нюансы нужно учесть:
2. Цвет
Этот элемент брендинга может стать решающим при выборе приложения. Рассказываем, как правильно подобрать цветовую гамму:
3. Согласованность
Визуальный символ приложения должен соответствовать его содержанию. Гармоничный образ помогает воспринимать продукт как единое целое и вызывает более сильную эмоциональную привязанность.
4. Лишние элементы
Длинные надписи и фотографии — ненужные элементы на маленьком значке. Они рассеивают внимание пользователей и затрудняют восприятие.
5. Уникальность
Ваша иконка будет постоянно конкурировать с тысячами других за внимание пользователя. Поэтому важно отстроиться от конкурентов, чтобы дизайн был уникальным и вызывал эмоциональную привязанность.
Бонусные советы:
Три способа создать иконку
В зависимости от опыта и бюджета вы можете за несколько минут разработать значок онлайн, потратить время на дизайн в профессиональных редакторах или отдать работу на аутсорс.
1. Графические редакторы. Подойдет пользователям, у которых есть опыт работы в Photoshop или Illustrator. Плюс этого способа в том, что вы получите уникальный результат даже при нулевом бюджете.
2. Онлайн-сервисы:
Мечтаете о собственном лого?
Введите название компании в поле ниже и наш генератор предложит вам лучшие дизайны!
3. Дизайнер. Если вам недостает опыта, но вы готовы выделить бюджет на брендинг, наймите графического дизайнера, который специализируется на иконках приложений: обратитесь на биржи (Upwork, Fiverr), попросите рекомендаций у знакомых или поищите в соцсетях.
Заключение
Подытожим самые важные моменты, о которых стоит помнить при разработке значка мобильного приложения.
Обновлено 18 марта, 2020
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.