Dynamic Island и Live Activity

Сегодня хочу поговорить про основные моменты, которые стоит учитывать при проектировании таких прикольных штук, как Dynamic Island и Live Activity.

Dynamic Island — это интерактивная область в верхней части экрана iPhone (начиная с iPhone 14 Pro), которая пришла на смену привычной «моноброви». Она динамически меняет размер и форму, отображая уведомления, текущие процессы и элементы управления: музыку, таймеры, звонки и т. д.
Пользователь может взаимодействовать с ней — нажимать или удерживать для быстрого доступа к функциям приложения.

Самый частый и, пожалуй, самый удобный кейс — миниатюра того, что у вас сейчас играет в Spotify, Яндекс Музыке или где там еще вы музыку слушаете

Что учесть

Dynamic Island может быть в нескольких состояниях:

Compact — маленькая «таблетка»

Minimal — таблетка + кружок, когда отображаются две активности одновременно (пока редко видел вживую)

Expanded — при удерживании Compact превращается в расширенное состояние, где пользователь может совершать действия. Например:
в Compact при прослушивании музыки мы видим только обложку трека и анимированные звуковые волны, а в Expanded — можем переключать треки, ставить на паузу и управлять воспроизведением.

Важно помнить, что внутри области Dynamic Island физически находятся фронтальная камера и датчики. Поэтому ничего к поверх них не рисуем и всегда учитываем safe-зоны.

Live Activity — это виджеты реального времени, которые отображаются на экране блокировки и внутри Dynamic Island. Они показывают актуальную информацию о происходящих событиях: доставка еды, поездка на такси, спортивные матчи и другие процессы, которые важно отслеживать здесь и сейчас.
Обновляются автоматически, без необходимости открывать приложение.

Самые известные примеры лично для меня — Самокат, Ozon и Додо.

Что учесть

1) Live Activity — это про «прямо сейчас»
Он должен показывать актуальные данные и регулярно обновляться. Анимации здесь очень помогают — они улучшают считываемость и ощущение «живого» процесса.

2) Ограничение по времени.
У Live Activity есть свой жизненный цикл — он не может отображаться дольше 8 часов. В идеале — 15–30 минут.
Поэтому сюда не закладываются долгоиграющие события вроде таймера до следующего Нового года 🙂

Узнать подробнее про проектирование Dynamic Island и Live Activities можно в этом гайде 📱
Также посмотрете видос с живыми примерами 📱
И бонус — рабочие макеты от Додо 🦤 с этими островками

Проектировали ли вы когда-нибудь такие штуки и для каких задач?
Поделитесь своими инсайтами 👇

💬 Тултип