Практическое руководство по значкам приложений для Android: объяснение адаптивных значков (и как правильно их создавать)
Это обычный сюрприз для начинающих Android-разработчиков: вы полируете один квадратный PNG для значка вашего приложения, экспортируете его с аккуратным размером 512x512, и он выглядит идеально в вашем графическом редакторе. Затем вы устанавливаете отладочную сборку на телефон Samsung, и значок внезапно выглядит обрезанным и слегка смещенным от центра, как будто часть логотипа была отрезана. С самим файлом все в порядке. Проблема в том, что одно квадратное изображение никогда не сможет пережить контакт с реальным миром лаунчеров Android, каждый из которых по-своему обрезает, маскирует и меняет форму значков. Если вы еще не столкнулись с этим, то это лишь вопрос времени, поэтому давайте рассмотрим, что происходит под капотом и как сделать все правильно с первого раза.
Почему одного квадратного PNG уже недостаточно
В первые годы существования Android значки приложений были именно такими, как они выглядели: один квадратный PNG (или иногда произвольной формы), который каждая программа запуска отображала как есть. Это работало нормально, пока производители не начали визуально различать свои телефоны, и одним из самых простых мест для этого был главный экран. Samsung хотел закругленные квадраты, некоторые китайские OEM-скины требовали другой обработки углов, а стандартный Android в конечном итоге остановился на кругах. Внезапно один и тот же файл значка стал выглядеть заметно по-другому, а иногда и заметно хуже, в зависимости от того, на каком телефоне он находился.
Ответом Google, представленным в Android 8.0 Oreo, стала адаптивная система значков. Вместо предоставления одной фиксированной формы разработчики предоставляют многослойные изображения, которые сама операционная система маскирует в любую форму, которую предпочитает данная программа запуска. Визуальная идентичность остается неизменной; меняется только внешний силуэт.
Что такое адаптивная иконка?
Адаптивная иконка состоит из двух отдельных слоев, каждый из которых занимает холст размером 108 dp на 108 dp: фонового слоя и слоя переднего плана. Android объединяет их вместе, а затем применяет любую форму маски, которую использует текущая программа запуска, будь то круг, закругленный квадрат, капля или что-то еще. Двухслойная структура — это то, что позволяет Android добавлять тонкие эффекты параллакса и движения, поскольку слои могут сдвигаться независимо, когда вы нажимаете или перетаскиваете значок.
В ресурсах приложения это обычно определяется с помощью XML-файла, такого как mipmap-anydpi-v26/ic_launcher.xml, который просто указывает на рисуемые объекты фона и переднего плана, а не содержит сами пиксельные данные. Традиционный плоский ic_launcher.png по-прежнему используется в качестве запасного варианта для устройств под управлением Android 7.1 или более ранних версий, которые полностью предшествовали адаптивной системе значков.
Почему безопасная зона имеет значение
Вот та часть, которая сбивает людей с толку больше всего. Несмотря на то, что размер холста каждого слоя составляет 108 dp на 108 dp, гарантированно будет видимым только внутренний круг размером 66 x 66 dp, расположенный в центре этого холста, независимо от того, какая форма маски будет применена. Эту внутреннюю область обычно называют безопасной зоной. Все, что находится за его пределами, может быть показано на круглой маске, а затем резко обрезано на более агрессивной закругленной или каплевидной маске, или наоборот.
Это именно та проблема, которая возникает, когда логотип рисуется близко к краям холста, чтобы максимизировать его визуальный размер: он может выглядеть идеально на круглой маске, но обрезаться на квадратной маске Samsung неравномерно. Исправление заключается не в редизайне, а просто в небольшом уменьшении изображения, чтобы значимое содержимое оставалось в безопасной зоне, независимо от того, какая форма в конечном итоге будет применена.
Формы запуска, с которыми вы столкнетесь
| Форма | Где ты это увидишь |
|---|---|
| Круг | Стандартный Android, программа запуска Pixel (давняя версия по умолчанию) |
| Сквиркл (закругленный квадрат) | Samsung One UI и несколько других скинов Android |
| Скругленный квадрат (суперэллипс) | iOS, применяется системой автоматически без контроля со стороны разработчика. |
| Слезинка | Предлагается в качестве выбираемой опции в некоторых версиях программного обеспечения Samsung. |
| Квадрат с мягкими углами | Различные скины лаунчера других производителей |
Практический вывод заключается в том, что вы не можете выбирать, какую из этих форм будет носить ваш значок. Пользователи стандартных лаунчеров Android часто могут даже сами выбрать предпочитаемую форму в меню настроек. Ваш единственный реальный рычаг влияния — убедиться, что само изображение отлично смотрится в любой из этих форм, и именно это гарантирует безопасная зона.
Создание активов: нужные размеры и плотность
| Ковш плотности | Размер значка лаунчера |
|---|---|
| mdpi | 48 х 48 пикселей |
| hdpi | 72 х 72 пикселей |
| xhdpi | 96 х 96 пикселей |
| xxhdpi | 144 х 144 пикселей |
| xxxhdpi | 192 х 192 пикселей |
| Значок листинга Play Маркета | 512 х 512 пикселей |
Если вы также выпускаете приложение для iOS, добавьте еще один набор полностью, поскольку требования к значкам Apple App Store достигают максимального разрешения 1024x1024 и используют совершенно другой, многоуровневый формат без какой-либо прозрачности.
Ручной способ против использования генератора
Вы можете создать каждый из этих размеров вручную в редакторе изображений или с помощью встроенной в Android Studio Image Asset Studio, которая достаточно хорошо справляется с масштабированием плотности и предварительным просмотром масок для одного проекта. Это становится утомительным, когда вы поддерживаете систему дизайна в нескольких приложениях, вам необходимо согласовать экспорт iOS из одного и того же основного изображения или просто нужен быстрый способ перепроверить, как дизайн ведет себя в каждой фигуре, прежде чем приступить к нему.
Сгенерируйте каждый размер из одного главного изображения
Наш Генератор значков приложений берет одно исходное изображение с высоким разрешением и создает полный набор сегментов плотности Android, адаптивную структуру переднего и заднего плана значков, а также размер списка Play Store, и все это за одну загрузку, поэтому вам не придется вручную экспортировать и переименовывать дюжину файлов вручную.
Извлечение значков из существующего APK
Иногда потребность движется в противоположном направлении. Возможно, вы унаследовали проект без исходных файлов дизайна, или вы хотите точно увидеть, как конкурент структурировал свою иконку, прежде чем разрабатывать свою собственную, или вам просто нужно вытащить иконку из встроенного APK, чтобы повторно использовать ее в соответствующем инструменте или маркетинговом активе. Поскольку APK фактически представляет собой структурированный архив, содержащий все ресурсы приложения, его файлы значков запуска физически присутствуют внутри него и могут быть извлечены напрямую, а не восстановлены с нуля.
Наш Экстрактор иконок извлекает именно эти файлы из любого загружаемого вами APK, предоставляя вам необработанные ресурсы значков в любом разрешении, предоставленном исходным разработчиком, что часто является самым быстрым способом восстановить потерянный исходный файл или изучить, как другое приложение решило ту же проблему дизайна.
Распространенные ошибки в использовании значков, которые отмечаются при проверке
- Добавление дополнительных отступов или пользовательского интерфейса Chrome. Эффект тени, границы или закругленных углов, добавленный вручную внутри изображения, конфликтует с собственной маской системы и часто выглядит удвоенным или смещенным.
- Использование чисто белого фона без четких краев. В программах запуска со светлой темой значок может стать почти невидимым на фоне главного экрана.
- Слишком мелкая детализация. Текст и сложные линии, которые выглядят четкими при разрешении 512 пикселей, часто превращаются в нечитаемое пятно при уменьшении до 48 пикселей, и именно так большинство пользователей видят его изо дня в день.
- Несоответствие значка в списке Play Store и значка, который устанавливается. Рецензенты и пользователи замечают, когда эти два значения не совпадают, и это воспринимается как небрежное или, что еще хуже, подозрительное.
- Полностью забывая о устаревшем запасном варианте. Если ваше приложение по-прежнему поддерживает версии Android до 8.0, пропуск плоского резервного варианта PNG может привести к тому, что у этих пользователей будет неработающий или универсальный значок.
Тестируйте свою иконку на разных фигурах перед отправкой
Прежде чем завершить работу над иконкой, стоит предварительно просмотреть ее хотя бы под круглой маской и маской с закругленными углами рядом, а не предполагать, что она будет правильно переведена. Именно по этой причине Image Asset Studio в Android Studio включает предварительный просмотр нескольких форм панели запуска в реальном времени, и требуется всего минута, чтобы обнаружить проблему, которая в противном случае всплыла бы только после публикации, когда пользователь с «неправильной» формой панели запуска сообщает, что что-то выглядит не так.
Ключевые выводы
- Адаптивные значки используют два слоя: фоновый и передний план на холсте с разрешением 108 пикселей, которые система маскирует в разные формы для каждой панели запуска.
- Только внутренняя безопасная зона с разрешением 66 dp гарантированно видна при любой форме маски; храните внутри него значимые произведения искусства.
- Вам по-прежнему понадобится плоский устаревший значок для устройств на Android 7.1 или более ранней версии.
- Генератор может создать любую необходимую плотность и размер списка в Play Store из одного мастер-изображения, экономя значительную часть ручной работы по экспорту.
- Значки можно извлечь непосредственно из существующего APK, если исходные файлы утеряны или вам нужно изучить ресурсы другого приложения.
Часто задаваемые вопросы (FAQ)
Какой фактический размер пикселя требуется для значка на странице Play Store?
512x512 пикселей, 32-битный PNG с альфа-каналом. Это отдельно от размеров значков запуска, включенных в сам APK.
Должен ли фоновый слой моего адаптивного значка быть сплошным?
Не обязательно однотонный цвет, но, как правило, он должен быть непрозрачным и простым, поскольку его можно сдвигать, масштабировать или маскировать способами, которые вы не можете полностью контролировать. Занятый или прозрачный фон обычно выглядит по-разному в разных программах запуска.
Могу ли я повторно использовать адаптивный дизайн значков Android непосредственно для iOS?
Не напрямую. iOS использует одно плоское квадратное изображение с закруглением углов, применяемым системой, а не отдельные слои, поэтому обычно вы экспортируете упрощенную сглаженную версию того же графического изображения для iOS.
Почему мой значок выглядит нормально на телефоне, но размыт в списке Play Store?
Обычно это происходит, когда значок листинга был увеличен из небольшого исходного изображения. Всегда начинайте с основного файла размером не менее 1024x1024 пикселей и экспортируйте каждый необходимый размер меньше этого размера.
Что произойдет, если я пропущу использование устаревшего резервного значка для старых версий Android?
Устройства под управлением Android 7.1 или более ранней версии, которые не поддерживают адаптивные значки, могут вернуться к обычному системному значку или неправильно отобразить значок. Безопасно пропустить, только если минимальная поддерживаемая версия Android вашего приложения — 8.0 или выше.
Для этого вам не нужно знание теории дизайна, достаточно лишь осознавать, что ваша иконка будет изменена способами, которые вы не можете контролировать, в тот момент, когда она покинет ваши руки. Спроектируйте безопасную зону, сохраните устаревший запасной вариант, сгенерируйте все необходимые размеры из одного чистого мастер-файла, и ваш значок будет сохраняться независимо от того, на какой панели запуска он находится.