1. Введение
Последнее обновление: 08.04.22
Начиная с Android 13, пользователи могут изменять цвет адаптивных значков лаунчера. Благодаря этой функции значки приложений в поддерживаемых лаунчерах Android окрашиваются в соответствии с цветом выбранных пользователем обоев и других тем.
С легкостью создавайте все необходимые системные ресурсы для вашего Android-приложения, включая новые адаптивные цветные значки.
Что вы узнаете
- Понимание различных типов иконок приложений и советы по их разработке.
- Как использовать шаблон Figma для Android-лаунчера.
- Как использовать генератор ресурсов Android Studio.
- Как предварительно просмотреть значок запуска приложения с помощью эмулятора Android Studio.
Предварительные требования
- Базовые знания Figma.
- Дополнительно: графическое оформление значка приложения (передний план, задний план и монохромное изображение).
Что вам понадобится
- Аккаунт Figma
- Файл Figma DesignLab
- Дополнительно: ПК с предустановленной программой Android Studio.
2. Начните
Настраивать
Для начала вам необходимо получить доступ к файлу Figma с иконкой приложения Android.
Сначала войдите в Figma или создайте учетную запись .
Дубликат из сообщества Figma
Перейдите к файлу шаблона лаунчера Android или найдите в сообществе Figma статью «Переход на вариативные шрифты». Нажмите «Получить копию» в правом верхнем углу, чтобы скопировать файл в свою папку.
Используя шаблон
Шаблон значка Android состоит из двух страниц:
- На титульном листе кратко изложены основные понятия и порядок использования шаблона.
- На странице шаблона есть все необходимое для создания необходимых элементов, разделенных на три части (Цвет, Форма, Play Store).
Примечание: В левой панели слоев большинство слоев и групп заблокированы; они должны оставаться заблокированными. (Вы сможете размещать изображения внутри разблокированных групп изображений.)
Но прежде чем мы перейдем к созданию активов, давайте посмотрим, что именно мы будем создавать...
3. Системные значки Android
значки запуска
Значки запуска, или значки приложений, играют важную роль в процессе запуска вашего приложения; значки запуска отображаются на главном экране в качестве точки входа в приложение.
Адаптивная форма
Адаптивная иконка, или AdaptiveIconDrawable , может отображаться по-разному в зависимости от возможностей конкретного устройства и пользовательской темы оформления. Адаптивные иконки в основном используются в панели запуска на главном экране, но также могут использоваться в ярлыках, приложении «Настройки», диалоговых окнах общего доступа и на экране обзора.
Адаптивная иконка может отображать различные формы на разных моделях устройств. Например, на одном устройстве от производителя она может отображаться в виде круга, а на другом — в виде скругленного квадрата. Каждый производитель устройств должен предоставить маску, которую система использует для отображения всех адаптивных иконок с одинаковой формой.
Способность адаптироваться к форме также позволяет системе применять различные анимационные эффекты при взаимодействии с пользователем.
Адаптивный цвет
Теперь адаптивные значки могут использовать динамический цвет, что позволяет создавать персонализированные тематические значки приложений.
Если пользователь включил тематические значки приложений (то есть активировал переключатель «Тематические значки» в системных настройках), и лаунчер поддерживает эту функцию, система использует цветовую гамму выбранных пользователем обоев и темы для определения оттенка.
Подобно иконкам, которые адаптируются к форме, адаптивные цветовые иконки состоят из переднего и заднего плана; достаточно предоставить только монохромный элемент иконки переднего плана, система позаботится о фоне и цвете, используя извлеченную цветовую схему.
Вы также можете использовать ту же монохромную иконку в качестве значка уведомления.
Наследие
Для поддержки устройств, работающих под управлением более старых версий Android или не поддерживающих адаптивные функции (версии до 8.0), следует добавить устаревшие значки.
Они не будут иметь фоновых и передних планов и могут иметь произвольную форму. Если вы используете предоставленный шаблон, окончательное изображение адаптивной формы будет экспортировано в необходимых размерах для вашей старой иконки.
Значки уведомлений
Уведомление — это сообщение, которое Android отображает вне пользовательского интерфейса вашего приложения, чтобы предоставить пользователю напоминания, сообщения от других людей или другую актуальную информацию от вашего приложения. Система отображает уведомления в разных местах и форматах, например, в виде значка в строке состояния, более подробной записи в панели уведомлений, в виде значка на значке приложения, а также автоматически на сопряженных носимых устройствах.
Магазин произведений искусства
Для продвижения своего приложения в Google Play и других рекламных каналах Google вы можете использовать графическое изображение, скриншоты, краткое описание и видеоролики.
Значок приложения не заменяет значок запуска приложения, но должен быть более качественным и с более высоким разрешением.
Подобно значку запуска, графические элементы могут занимать все пространство ресурсов, или же вы можете проектировать и размещать элементы графики, такие как логотипы, на сетке ключевых линий.
Для публикации в магазине приложений необходимо предоставить квадратную иконку приложения размером 512x512 пикселей. Если вы используете шаблон иконки приложения Android, иконка предоставляется при экспорте с помощью адаптивного графического элемента.
4. Передовые методы проектирования
Значки запуска приложения открываются для пользователя. Как точка входа в приложение, они должны быть узнаваемыми и читаемыми. Вот несколько рекомендаций по обеспечению этих качеств для ваших значков запуска.
Придерживайтесь простоты в оформлении. Избегайте множества слоев, эффектов и текста. Эти детали будут потеряны или их будет трудно разглядеть при малых размерах. 
Избегайте сложных форм. Это касается и логотипов. По возможности используйте упрощенный логотип или рассмотрите символику, которая ассоциируется у пользователей с вашим приложением. Читаемая и четкая форма помогает создать единство, чтобы пользователи могли легко узнавать ваше приложение в разных контекстах (адаптивный цвет и уведомления). 
Используйте сетку. Воспользуйтесь сеткой или контурными линиями, чтобы обеспечить корректное отображение изображения переднего плана при обрезке, включая иллюстрации, занимающие всю ширину страницы. 
Учитывайте контраст . Для значков адаптивной формы и устаревших значков убедитесь, что передний и задний планы значков имеют читаемый контраст. Избегайте использования сильных теней, которые можно принять за системные тени. 
Размещайте изображения в безопасных зонах. Размер элементов переднего плана не должен превышать 72x72 пикселя (если только вы не используете заливку по всей площади). Размер фоновых изображений должен составлять 108x108 пикселей . Примечание: рамка для изображения в шаблоне иконки больше, чем 72x72 пикселя, чтобы вы могли создавать собственные изображения иконок. Размеры элементов будут изменены в соответствии с техническими требованиями. 
Векторный формат. Старайтесь использовать изображения в векторном формате (например, SVG, AI, PDF и EPS), а не в растровом (например, PNG, JPG и GIF). Это обеспечит совместимость ваших изображений с новыми функциями и упростит их редактирование. 
5. Адаптивный цвет и значки уведомлений.
Теперь ваша очередь создавать собственные системные значки Android.
- Найдите файл Figma с иконками Android-приложения .
- Внутри файла найдите рамку «Адаптивный цвет» . В левой панели слоев найдите «Адаптивный цвет» > «Компоненты» > «Изображения» > «Область изображений иконок» > «Тематические изображения иконок» < добавьте свою иконку . Если у вас уже есть монохромная иконка, скопируйте ее сюда, чтобы заменить пример иконки Bugdroid, и перейдите к шагу 6.
- Если у вас нет монохромной иконки, начните с логотипа или иконки, связанной с вашим приложением. Воспользуйтесь советами по дизайну, чтобы обновить свою иконку. Начните с упрощения и избегания сложных форм. Например, здесь иллюстрации, используемые в приложении, упрощены с помощью менее сложных форм листьев. Тени и детали линий имитируются с помощью пустого пространства.
- Теперь обновите размеры, используя сетку ключевых линий . Здесь мы установили параметр « Масштабирование» и убедились, что изображение находится в пределах безопасной зоны переднего плана. Шаблон настроен на увеличение изображения в 4 раза и автоматически изменяет размер при экспорте, поэтому вы можете создавать свои иконки в большем масштабе.
- Файл настроен для работы с Material Theme Builder и позволяет предварительно просматривать динамические цвета. Свяжите стиль цвета значка переднего плана с On-surface-variant .
- Теперь, открыв Material Theme Builder из панели плагинов, вы можете либо изменить исходный цвет, либо добавить изображение, чтобы обновить цвета, используя извлеченный исходный цвет.
- Как это будет выглядеть при разных разрешениях или на главном экране? Шаблон настроен таким образом, что изображения, помещенные в рамки для изображений, отображаются в различных контекстах предварительного просмотра.
- Система использует монохромный значок в качестве уведомления и отображает его в предварительном просмотре в таком виде.
6. Адаптивная форма и устаревшие значки.
Теперь мы создадим адаптивную форму и устаревшие значки, чтобы обеспечить широкую поддержку значка.
- Внутри файла найдите « Рамка фигуры ». В левой панели слоев найдите «Фон значка» < добавьте свой значок *. Если у вас уже есть готовый значок, скопируйте его сюда, чтобы заменить пример значка Bugdroid, и перейдите к шагу 5.* Если у вас нет значка, начните с логотипа или значка, связанного с вашим приложением, или используйте монохромный значок.
- Обновите иконку переднего плана, учитывая лучшие практики создания иконок. Здесь я вернул оригинальные цвета иллюстрации, но свел детали к минимуму.
- Теперь обновите размеры, используя сетку ключевых линий . Здесь мы установили параметр « Масштабировать» и убедились, что изображение находится в пределах безопасной зоны переднего плана.
- Адаптивные иконки приложений также могут иметь отдельный фон. Это позволяет безопасно обрезать слои иконки и создавать едва заметные эффекты движения при взаимодействии. В Android Studio также можно использовать и задать сплошной цвет фона.
- В предварительных просмотрах отображается, как вместе выглядят передний и задний планы, на главном экране, в различных обрезанных формах, а также в виде старой иконки.
Форму, используемую для обрезки, можно изменить в окне предварительного просмотра на главном экране, выбрав значки и изменив параметр «Вариант формы». 
7. Экспорт
Отлично, вы обновили шаблон, добавив значки вашего приложения! Давайте экспортируем их для внедрения.
- Убедитесь, что на холсте ничего не выделено.
- Перейдите в меню Figma > Файл > Экспорт ( Shift + Cmd + E ).
- В меню экспорта подтвердите экспорт. Это загрузит ресурсы из шаблона.
Что входит в состав экспорта?
Экспортированные ресурсы содержат все необходимые файлы для реализации значка вашего приложения, а именно:
- Figma экспортирует монохромную иконку переднего плана для адаптивной цветовой схемы в файл SVG, а также иконки переднего и заднего плана для адаптивных иконок формы.
- Figma также предоставляет устаревшие иконки в различных каталогах мипмапов, организованных по разрешению.
Вот и всё! Ваша иконка готова к отправке в разработку.
В качестве альтернативы, если вы хотите предварительно просмотреть свои значки в Android Studio и преобразовать эти SVG-файлы в окончательный формат, перейдите к следующему шагу.
8. Используйте Image Asset Studio.
Начните работу с Android Studio.
- Скачайте и установите Android Studio.
- Запустите Android Studio.
В Android Studio вам будет предложено начать новый проект или выбрать существующие.
- Выберите пока новый проект. Следующие экраны помогут вам настроить новый проект.
- Выберите любой шаблон из стартовых шаблонов, поскольку мы рассмотрим только значки запуска.
- После этого дайте название новому проекту и нажмите «Завершить» . Создание нового проекта займет несколько минут.
Используйте ImageAsset Studio
Теперь мы можем добавить ваши иконки в проект, используя удобный инструмент — Asset Studio.
- Чтобы получить доступ к этому инструменту, выберите в меню «Файл» > «Создать» > «Ресурс изображения» .
- После открытия Image Asset Studio добавьте слой переднего плана, выбрав значок папки в поле «Путь» . Выберите экспортированный SVG-файл как drawable-anydpi/ic_launcher.svg
- Выберите вкладку «Фоновый слой» и аналогично выберите экспортированный фоновый слой. В качестве альтернативы выберите «Тип ресурса: Цвет», чтобы получить сплошной цветной фон панели запуска.
- Вернитесь к основному слою и убедитесь, что изображение находится в безопасной зоне. Измените размер значка так, чтобы он выглядел наиболее привлекательно.
- После завершения нажмите «Далее». Система спросит, куда следует разместить значки в вашем проекте (оставьте значение по умолчанию или переключитесь на «Главный»). Затем нажмите «Готово» . Вы сможете найти ресурсы для запуска приложения в папке res > drawable. Двойной щелчок откроет предварительный просмотр готовых векторных изображений.
- Скопируйте и вставьте монохромный слой вручную в папку res/drawable или res/drawable-v24 , либо импортируйте монохромный слой вручную, щелкнув правой кнопкой мыши по папке res и выбрав New > Vector Asset .
- В файлах res/mipmap-anydpi-v26/ic_launcher.xml и res/mipmap-anydpi-v26/ic_launcher_round.xml добавьте или измените существующее значение android:monochrome="path/to/monochrome/asset" , чтобы оно указывало на правильный монохромный ресурс.
9. Предварительный просмотр и ресурсы
Предварительный просмотр в эмуляторе
Мы сделали это, чтобы добавить их в проект приложения, что позволит нам предварительно просмотреть их на реальном устройстве или эмуляторе! Давайте посмотрим, как будут выглядеть наши иконки в реальности.
Эмулятор должен быть настроен по умолчанию, но если нет, создайте виртуальное устройство Android . Нажмите зеленую кнопку воспроизведения . Это соберет проект и откроет эмулятор.
Конечные активы
Отлично, вы смогли проверить, как будет выглядеть ваш значок запуска на устройстве с помощью эмулятора, и добавили его в проект приложения. Таким образом, вы преобразовали его в окончательный вариант для использования в производстве! Но где же он?
Ресурсы приложения Android хранятся в папке Resources (обычно слева). Найдите папку Res внутри приложения. Щелкните правой кнопкой мыши, чтобы открыть меню, и выберите «Открыть в Finder» (на Mac). Откроется окно Finder . При желании вы можете сэкономить время разработчиков и тестировщиков, преобразовав и протестировав остальные ресурсы приложения аналогичным образом. Если вы преобразовали остальные ресурсы приложения, то эту папку можно будет использовать для совместной работы с разработчиками.
10. Поздравляем!
Отличная работа! Вы изучили системные значки Android, необходимые для создания Android-приложений, разработали собственные значки, ознакомились с ресурсами шаблонов значков и, возможно, даже продвинулись дальше, изучив Android Studio для предварительного просмотра и преобразования ресурсов для производства!
Если у вас возникнут вопросы, не стесняйтесь задавать их нам в любое время, используя @MaterialDesign в Твиттере .
Следите за обновлениями и новыми обучающими материалами по дизайну на youtube.com/MaterialDesign