Проектируем Android Adaptive Icons.
Перевод https://medium.com/google-design/designing-adaptive-icons-515af294c783
В первой статье цикла были затронуты основные моменты концепции Android Adaptive Icons:
Теперь поговорим про основные техники дизайна адаптивных иконок.
Основы
Форма и размер
Адаптивные иконки имеют стандартные габариты 108dp*108dp, но область размещения контента ограничивается квадратом 72dp*72dp по центру иконки — 36dp уходят на отступы. К иконке могут применяться различные маски выпуклой формы. Единственное ограничение, накладываемое на кастомную маску: минимальный радиус — 33dp от центра до края.
Таким образом, безопасной зоной, которая гарантированно не будет кадрирована, является круг диаметром 66dp в центре иконки. Именно в этой области рекомендуется размещать значимый графический контент.
Направляющие
Направляющие — это основа сетки, задающей некоторые стандарты пропорций иконок. Для создания адаптивных иконок используются следующие виды направляющих:
- Окружность: диаметром 52dp и 32dp;
- Квадрат: 44dp*44dp, с радиусом закругления углов 4dp;
- Прямоугольник: 52dp*36dp и 36dp*52dp, с радиусом закругления углов 4dp.
Слои
Адаптивные иконки фактически состоят из двух слоёв: фон и передний план. Оба слоя ограничены габаритами 108dp*108dp. Фон должен быть полностью непрозрачным, в то время как изображения на переднем плане могут содержать прозрачность. Слои размещаются друг над другом, перекрывая друг друга.
Разделение элементов на слои, позволяет достигать интересных интересных визуальных эффектов. Тут стоит отметить, что за конечный вид этих эффектов всё же отвечает производитель конкретного устройства или создатель конкретного лаунчера. Пользователи разных устройств, возможно, увидят вашу иконку немного по-разному. Однако, уже сейчас можно сказать, что основными эффектами станут параллакс, пульсирование, смещение и масштабирование.
Вернёмся к размерам: доступные 18dp с каждой стороны, оставшиеся после обрезки иконки из исходного размера 108dp*108dp до 72dp*72dp, используются только в исключительных случаях при анимировании иконки (например, при пульсировании или увеличении её размера).
Проектирование
Раздел гайдлайнов материал-дизайна, затрагивающий нюансы создания обычных иконок, применим и для адаптивных иконок. Всё что касается общей структуры, теней и других моментов остаётся без изменений. Единственное различие в том, что теперь вы можете размещать графические элементы на разных слоях.
В общем случае, оптимальным вариантом будет размещение логотипа приложения на цветном фоне. Такой подход гарантирует, что иконка будет корректно отображаться на любых устройствах. Это лежит на поверхности, хотя технология адаптивных иконок позволяет гораздо больше. Вот лишь несколько приёмов, которые стоит держать в голове:
Обрезка
Форма адаптивных иконок непредсказуема — дизайнеру известны лишь граничные значения. Зная это, стоит держаться подальше от краёв изображения, размещая весь важный контент только в безопасной зоне. В противном случае, ваша иконка может быть весьма неудачно обрезана наложенной на неё маской.
Подчёркнутая многослойность
Многослойность иконки можно подчеркнуть, закрепив один из графических элементов иконки на фоновом слое. В качестве примера можно привести иконку приложения “Калькулятор”: все блоки с символами арифметических операций расположены на переднем плане, кроме блока со знаком “равно” — он привязан к фоновому слою. При раскачивании иконки заметно, что тёмные блоки движутся будто бы поверх зелёного:
Маска на переднем плане
Ещё один любопытный приём — размещение маскирующих элементов на переднем плане. Взгляните на иконку Google Play Store — это просто цветной треугольник на фоне прозрачной заливки.
А теперь взгляните на эту же иконку под другим углом. Цветной элемент станет фоном, а на переднем плане окажется белая рамка, обрезающая фон до нужной фигуры, в данном случае до треугольника:
В состоянии покоя обе иконки будут выглядеть совершенно идентично. Всё изменится, когда иконка придёт в движение. Фон и рамка будут двигаться независимо друг от друга:
Свет и тень
Стоит уделять повышенное внимание расположению световых эффектов и теней, если они присутствуют в композиции вашей иконки. В подавляющем большинстве случаев, такие эффекты стоит размещать на переднем плане: тень должна быть привязана к объекту, отбрасывающему её. Блики, размещённые на переднем плане, создадут эффект игры света, как только иконка придёт в движение.
Избегайте создания бессмысленных эффектов. Если тень отделится от объекта и уедет вместе с фоном — это будет смотреться весьма странно. Световые эффекты не должны отвлекать на себя внимание. Всегда следуйте гайдлайнам материал-дизайна.
Двойное дно
Некоторые элементы могут быть спрятаны на фоновом слое за элементами переднего слоя. Это может стать интересной особенностью вашей иконки, пользователь заметит скрытый элемент только в момент взаимодействия с иконкой.
Ресурсы и инструменты
Здесь можно скачать sketch-файл, который вы можете использовать в качестве шаблона для создания адаптивных иконок. Он выполнен таким образом, что меняя основной элемент, вы будете видеть превью иконки после наложения на неё масок различной формы.
Кроме того, есть и другие полезные инструменты:
- Adapticon — средство предпросмотра адаптивных иконок;
- Шаблон Affinity Designer;
- Пакет шаблонов Bjango теперь включает и адаптивные иконки;
- Шаблон Figma (требуется авторизация).
Adaptive Icon Playground
При разработке адаптивных иконок я понял, при создании действительно удачной иконки важно сконцентрироваться именно на динамике элементов переднего и заднего плана. Проблема в том, что это довольно сложно протестировать и понять, как это будет выглядеть для пользователей в реальных условиях.
Это небольшое приложение может значительно облегчить вам жизнь:
Утилита демонстрирует все установленные на вашем устройстве приложения с адаптивными иконками. При скроллинге рабочей панели на иконках активируется параллакс-эффект, а масштабирование иконки происходит при тапе по ней. Силами утилиты можно настроить амплитуду динамических эффектов и применить к иконкам разноформатные маски, которые будут применяться к иконке на реальных устройствах.
Вы можете скачать APK или посмотреть исходники приложения на Github:
Творите
В этой статье описаны основные приёмы, которые могут помочь вам создать притягательную адаптивную иконку. Тем не менее, пространство для творчества не ограничено этими рамками. Придумывайте новые приёмы и реализуйте их в своих проектах.
В третьей статье цикла речь пойдёт о реализации адаптивных иконок:
