February 20

Дизайн иконки приложения

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

Минимализм всё ещё в тренде, поэтому не перегружайте иконку лишними деталями.

Мелкий текст тяжело читать, и его использование создаст проблемы в случае локализации, если, к примеру, приложение выйдет на китайский рынок. При этом вы можете использовать первую букву из названия компании, как это делают Tumblr или Pinterest:

Логотипы Tumblr и Pinterest

Не используйте фотографии! Использование фотографий в иконках приложений давно стало дурным тоном. Чтобы изображение хорошо смотрелось на любых устройствах, оно должно быть в формате SVG.

Создание иконки в Figma

На главной странице выберите Design.

Увеличьте масштаб до 400% (можете воспользоваться сочетанием Ctrl +) и нарисуйте квадрат 110*110, нажав клавишу R и удерживая Shift.

Зафиксируйте соотношение сторон (Lock aspect ratio, кнопка справа).

В слоях (Layers) вы увидите Rectangle 1. Переименуйте его в ic_launcher_background и зафиксируйте (Toggle layer locking).

Задайте цвет фона (Fill). В нашем случае задний фон будет однотонным. Но вы можете использовать и градиент.

Добавьте логотип на передний план.

Если у вас нет готового логотипа, вы можете воспользоваться Resources (нажмите комбинацию клавиш Shift + I). Здесь можно найти простые SVG-иконки.

Resources

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

Выделите ic_launcher_foreground и ic_launcher_background одновременно, удерживая Shift, кликните правой кнопкой мыши и создайте фрейм (или нажмите Ctrl + Alt + G). Можете назвать его Launcher.

Поместим единорога в центр фрейма.

Выравниваем по горизонатли и по вертикали.

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

Единорог не должен выходить за рамки круга.

Наконец, экспортируйте иконку в формате SVG.

Если ваш фон однотонный, экспортировать его для Android Studio не нужно, просто скопируйте шестнадцатеричный код цвета (в нашем случае это #B4E1FF).

О том, как поменять иконку вашего Android-приложения, в другой статье.