Создайте и просмотрите значки ваших приложений

1. Введение

ee9fa08dcd988d4c.png

Последнее обновление: 04.08.22

Начиная с Android 13, пользователи могут использовать тему адаптивных значков запуска. Благодаря этой функции значки приложений в поддерживаемых средствах запуска Android окрашиваются, наследуя цвет выбранных пользователем обоев и других тем.

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

Что вы узнаете

  • Понимание различных типов значков приложений и советы по их дизайну.
  • Как использовать шаблон Figma для запуска Android.
  • Как использовать генератор ресурсов Android Studio.
  • Как просмотреть значок запуска с помощью эмулятора Android Studio.

Предварительные условия

  • Базовые знания Figma.
  • Необязательно: изображение значка приложения (передний план, фон и монохромный).

Что вам понадобится

2. Начните работу

Настраивать

Чтобы начать работу, вам необходимо получить доступ к файлу Figma со значком приложения Android.

Сначала войдите в Figma или создайте учетную запись .

Дубликат из сообщества Figma

Перейдите к файлу шаблона средства запуска Android или найдите шрифты «Миграция на переменные» в сообществе Figma . Нажмите «Получить копию» в правом верхнем углу, чтобы скопировать файл в свои файлы.

35022ce2efffc29c.png

Использование шаблона

Шаблон значка Android состоит из двух страниц:

  • На титульной странице кратко описаны соответствующие концепции и способы использования шаблона.
  • Страница шаблона включает в себя все необходимое для создания необходимых ресурсов, разделенных на три фрейма (Цвет, Форма, Магазин Play).

e0182922e07c80f5.png

Примечание. На левой панели слоев большинство слоев и групп заблокированы; они должны оставаться заблокированными. (Вы сможете размещать произведения искусства в разблокированных группах произведений искусства.)

Но прежде чем мы приступим к созданию ресурсов, давайте посмотрим, что мы будем создавать...

3. Системные значки Android

1b8d4ebe587e89a0.png

Значки запуска

Значки панели запуска или значки приложений выступают в качестве важной части процесса запуска вашего приложения, значки панели запуска появляются на главном экране как точка входа в ваше приложение.

Адаптивная форма

Адаптивный значок, или AdaptiveIconDrawable , может отображаться по-разному в зависимости от индивидуальных возможностей устройства и пользовательских тем. Адаптивные значки в основном используются программой запуска на главном экране, но их также можно использовать в ярлыках, приложении «Настройки», диалоговых окнах общего доступа и на обзорном экране.

8ae89f6ed03eaf57.png

Адаптивный значок может отображать различные формы на разных моделях устройств. Например, на одном OEM-устройстве он может отображать круглую форму, а на другом — прямоугольник. Каждый OEM-производитель устройства должен предоставить маску, которую система использует для отображения всех адаптивных значков одинаковой формы.

Способность адаптироваться к форме также позволяет системе применять различные анимационные эффекты при взаимодействии с пользователем.

Адаптивный цвет

Адаптивные значки теперь могут использовать динамический цвет, что позволяет использовать персонализированные тематические значки приложений.

Если пользователь включил тематические значки приложений (другими словами, включил переключатель «Тематические значки» в настройках системы), и программа запуска поддерживает эту функцию, система использует цвет выбранных пользователем обоев и темы для определения цвета оттенка.

381ea3ee1c973b4c.png

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

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

Наследие

Устаревшие значки должны быть включены для поддержки устройств под управлением более старых версий Android или не поддерживают адаптивные функции (до 8.0).

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

d29acf3d7ec8207c.png

Значки уведомлений

Уведомление — это сообщение, которое Android отображает за пределами пользовательского интерфейса вашего приложения, чтобы предоставить пользователю напоминания, сообщения от других людей или другую своевременную информацию из вашего приложения. Система автоматически отображает уведомления в разных местах и ​​форматах, например, в виде значка в строке состояния, более подробной записи в панели уведомлений, в виде значка на значке приложения и на сопряженных носимых устройствах.

a7fad196a542c189.png

Магазин произведений искусства

Вы можете использовать графическое изображение, снимки экрана, краткое описание и видеоролики, чтобы выделить и продвигать свое приложение в Google Play и других рекламных каналах Google.

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

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

Чтобы опубликовать страницу в магазине, вам необходимо предоставить квадратный значок приложения размером 512x512 пикселей. Если вы используете шаблон значка приложения Android, он предоставляется при экспорте с использованием изображения «Адаптивная форма».

4. Лучшие практики проектирования

Значки панели запуска запускают ваше приложение для пользователя. Как вход в ваше приложение, они должны быть узнаваемыми и читаемыми. Вот несколько рекомендаций по обеспечению этих качеств значка запуска.

Делайте произведения искусства простыми. Избегайте нескольких слоев, множества эффектов и текста. Эти детали будут потеряны или их будет трудно увидеть при небольших размерах. 6295287d18a6dc89.png

Избегайте сложных форм. Сюда входят логотипы. Если возможно, используйте упрощенный логотип или рассмотрите символы, которые пользователи связывают с вашим приложением. Читабельная и четкая форма помогает пользователям легко распознавать ваше приложение в разных контекстах (адаптивный цвет и уведомления). 3084a344b34b47f0.png

Используйте сетку. Воспользуйтесь сеткой или ключевыми линиями, чтобы гарантировать, что изображения на переднем плане будут работать при обрезке, включая изображения без полей. e99f2fabd60e52d9.png

Учитывайте контраст . Для адаптивной формы и устаревших значков убедитесь, что передний и задний план значков имеют четкий контраст. Избегайте использования тяжелых теней, которые можно принять за тень системы. bd62aae6d5414f2e.png

Храните произведения искусства в безопасных зонах. Сохраняйте размеры ресурсов переднего плана в пределах 72x72 пикселей (если только вы не используете полный вырез). Оставьте фон размером 108x108 пикселей . Примечание. Рамка изображения шаблона значка имеет размер более 72x72 пикселей, что позволяет создавать изображения значков. Размер ресурсов будет изменен в соответствии со спецификациями. 78c8a6d59f9320bc.png

Векторный формат. Попробуйте использовать изображения в векторном формате (например, файлы SVG, AI, PDF и EPS) вместо растрового формата (например, файлы PNG, JPG и GIF). Это гарантирует, что ваши изображения будут совместимы с новыми функциями и их будет легче редактировать. 4c6aae783bb5e415.png

5. Адаптивный цвет и значки уведомлений.

Теперь ваша очередь создавать свои собственные системные значки Android.

  1. Найдите файл Figma со значками приложений Android .
  2. В файле найдите рамку адаптивного цвета . Посмотрите на левую панель слоев и найдите «Адаптивный цвет» > «Компоненты» > «Искусство» > «Область изображения значка» > «Тематическое изображение значка» <добавьте свой значок . Если у вас есть готовый монохромный значок, скопируйте его сюда, чтобы заменить образец значка дроида, и перейдите к шагу 6. 4249cd4ed81cc44b.png
  3. Если у вас нет монохромного значка, начните с логотипа или значка, связанного с вашим приложением. Ознакомьтесь с советами по дизайну, чтобы обновить значок. Сначала упрощаем и избегаем сложных форм. Например, здесь иллюстрации, используемые в приложении, упрощены за счет менее сложных форм листьев. Тени и детали линий моделируются с помощью пустого пространства. 2c92cd6e441e7396.png
  4. Теперь обновите размер, используя сетку ключевых линий . Здесь мы установили размер на «Масштаб» и убедились, что изображение находится в безопасной зоне переднего плана. Шаблон настроен на 4-кратное увеличение изображения и автоматически изменяет размер при экспорте, поэтому вы можете создавать свои значки в большем масштабе. 606367689d303633.png
  5. Файл настроен для работы с Material Theme Builder , чтобы облегчить предварительный просмотр динамического цвета. Подключите стиль цвета значка переднего плана к On-surface-variant . f4a805802fc9b2f7.png
  6. Теперь, открыв Конструктор тем материалов с панели плагинов, вы можете либо перетасовать исходный цвет, либо добавить изображение, чтобы обновить цвета, используя извлеченный исходный цвет. b3a28c64e5488762.png
  7. Как это будет выглядеть в разных разрешениях или на главном экране? Шаблон настроен таким образом, что графические изображения, помещенные в рамки графических изображений, отображаются в различных контекстах предварительного просмотра.
  8. Система использует монохромный значок в качестве уведомления и отображает его в предварительном просмотре.

94e264c7bc7a881a.png

6. Адаптивная форма и устаревшие значки.

Теперь мы создадим адаптивную форму и устаревшие значки, чтобы обеспечить широкую поддержку значка.

  1. В файле найдите рамку «Форма» . Посмотрите на левую панель слоев и найдите фон значка < добавьте свой значок *. Если у вас есть готовый значок, скопируйте его сюда, чтобы заменить образец значка bugdroid, и перейдите к шагу 5.* Если у вас нет значка, начните с логотипа или значка, связанного с вашим приложением, или повторно используйте монохромный значок. 4249cd4ed81cc44b.png
  2. Обновите значок переднего плана, учитывая рекомендации по использованию значков. Здесь я вернул исходные цвета иллюстрации, но сохранил минимум деталей. 245853d7421f0f41.png
  3. Теперь обновите размер, используя сетку ключевых линий . Здесь мы установили размер на «Масштаб» и убедились, что изображение находится в безопасной зоне переднего плана. 8e877043477b5fff.png
  4. Значки приложений адаптивной формы также могут иметь четкий фон. Это позволяет безопасно обрезать слои значка и обеспечивать тонкие эффекты движения при взаимодействии. Вы также можете использовать и определить сплошной цвет фона в Android Studio. 2e3513c3cf827f52.png
  5. Предварительный просмотр обновляется, чтобы показать, как передний план и фон выглядят вместе, на главном экране, в различных обрезанных фигурах и в виде устаревшего значка.

e933e6a6dba859a6.png

Форму, используемую для обрезки, можно обновить в предварительном просмотре главного экрана, выбрав значки и изменив параметр варианта формы. a4cf54ad48dbcd02.png

7. Экспорт

Отлично, вы обновили шаблон значками приложений! Давайте экспортируем их для реализации..

  1. Убедитесь, что на холсте ничего не выбрано.
  2. Перейдите в меню Figma > Файл > Экспорт ( Shift + Cmd + E ).
  3. В меню экспорта подтвердите экспорт. Это приведет к загрузке ресурсов из шаблона.

f510263d7cf38b80.png

Что входит в экспорт?

Экспортированные ресурсы содержат все необходимые файлы для реализации значка вашего приложения, как показано ниже.

  • Figma экспортирует монохромный значок переднего плана для адаптивного цвета в виде файла SVG, а также передний план и фон для значков адаптивной формы.
  • Figma также предоставляет устаревшие значки в различных каталогах MIP-карт, организованных по разрешению.

f98accd8c1ce99fc.png

Вот и все! Ваша иконка готова к отправке в разработку.

Альтернативно, если вы хотите просмотреть свои значки в Android Studio и преобразовать эти SVG в окончательный формат ресурсов, перейдите к следующему шагу.

8. Используйте Image Asset Studio

Начало работы с Android Studio

1c70e1d460e8be34.png

  1. Загрузите и установите Android Studio..
  2. Запустите Android-студию.

Android Studio предложит вам варианты запуска нового проекта или выбора существующих проектов.

  1. Выберите новый проект на данный момент. Следующие экраны помогут вам настроить новый проект. c3a666acd93b7b07.png
  2. Выберите любой шаблон из стартовых шаблонов, поскольку мы будем рассматривать только значки запуска. b4feedbfae851843.png
  3. После этого назовите свой новый проект и выберите «Готово» . Создание нового проекта займет несколько минут.

Используйте Image Asset Studio

Теперь мы можем добавить ваши значки в проект с помощью полезного инструмента Asset Studio.

  1. Чтобы получить доступ к этому инструменту, выберите меню «Файл» > «Создать» > «Ресурс изображения» . 5d379aab7d1bab51.png
  2. Когда откроется Image Asset Studio, добавьте слой переднего плана, выбрав значок папки в поле «Путь» . Выберите экспортированный файл SVG как drawable-anydpi/ic_launcher.svg. 4864e066f02b8ad.png
  3. Откройте вкладку «Фоновый слой» и аналогичным образом выберите экспортированный фоновый слой. Альтернативно выберите «Тип актива: Цвет», чтобы вместо этого иметь сплошной цвет фона панели запуска. 6cdc173881a1fda3.png
  4. Вернитесь на слой переднего плана и дважды проверьте, находится ли изображение в безопасной зоне. Измените размер значка так, чтобы он выглядел лучше всего. b0beca093edf54f2.png
  5. Когда закончите, нажмите «Далее» , после чего появится вопрос, где должны располагаться значки в вашем проекте (оставьте значение по умолчанию или переключитесь на «Основное»). Затем нажмите «Готово» . Вы сможете найти свои ресурсы запуска в разделе res > drawable. Двойной щелчок откроет предварительный просмотр окончательного векторного рисунка.

6c780144c7204425.png

  1. Скопируйте и вставьте ресурс монохромного слоя вручную в res/drawable или res/drawable-v24 или вручную импортируйте монохромный слой, щелкнув правой кнопкой мыши папку res и выбрав «Создать» > «Векторный ресурс» .
  2. В res/mipmap-anydpi-v26/ic_launcher.xml и res/mipmap-anydpi-v26/ic_launcher_round.xml добавьте или измените существующий android:monochrome="path/to/monochrome/asset , чтобы он указывал на правильный монохромный ресурс.

9. Предварительный просмотр и ресурсы

Предварительный просмотр в эмуляторе

Мы сделали это, чтобы добавить их в проект приложения, что позволит нам предварительно просмотреть их на реальном устройстве или в эмуляторе! Давайте посмотрим, как наши иконки будут выглядеть в реальности.

По умолчанию у вас должен быть настроен эмулятор, но если нет, создайте виртуальное устройство Android . Нажмите зеленую кнопку воспроизведения . Это приведет к сборке проекта и открытию эмулятора.

Конечные активы

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

Ресурсы представляют собой ресурсы в приложении Android, и их можно найти, открыв панель «Ресурсы» (обычно слева). Откройте приложение и найдите папку Res . Щелкните правой кнопкой мыши, чтобы открыть меню, и выберите «Открыть в Finder» (на Mac). Откроется окно Finder . При желании вы можете сэкономить время на разработку и контроль качества, преобразовав и протестировав остальные ресурсы вашего приложения, используя аналогичный процесс. Если вы преобразовали остальные ресурсы вашего приложения, эту папку можно будет предоставить разработчикам.

7a22d780b86d9713.png

10. Поздравления

Отличная работа, вы узнали о значках системы Android, необходимых для создания приложения Android, разработали свои собственные значки, изучили ресурс шаблонов значков и, возможно, пошли дальше, погрузившись в Android Studio для предварительного просмотра и преобразования ресурсов для производства!

Если у вас есть вопросы, задавайте их нам в любое время, используя @MaterialDesign в Твиттере .

Оставайтесь с нами, чтобы увидеть больше материалов и руководств по дизайну на youtube.com/MaterialDesign.