Дизайн экрана уведомлений мобильного приложения
Экран уведомлений внутри приложения — это не то же самое, что push-уведомления. Это история всего, что произошло и требует внимания пользователя: лайки, комментарии, заказы, системные сообщения. Плохо спроектированный экран превращается в свалку, где непонятно, что прочитано, что нет, и что вообще нужно сделать.
Типы уведомлений и их иерархия
Первый вопрос при проектировании — сколько типов уведомлений и разные ли они визуально. Обычно есть три категории:
- Социальные (лайк, комментарий, подписчик, упоминание)
- Транзакционные (статус заказа, оплата, доставка)
- Системные (обновление приложения, требуется действие, истёк срок)
Транзакционные и системные требуют явного визуального отличия от социальных — они несут другой вес. Цвет иконки категории, или размер, или компоновка — решается в дизайне заранее.
Прочитанные / непрочитанные
Непрочитанное уведомление визуально отличается: чаще всего фоновый цвет строки (subtle tint) + синяя точка слева. После прочтения (при тапе или при фокусировании экрана) строка переходит в neutral состояние. Это должно быть показано в компоненте через variants: unread и read.
Массовая отметка «Прочитать все» — кнопка или menu item в правом верхнем углу. Без подтверждения, действие обратимо только через refresh.
Группировка
Если уведомлений много, нужна группировка по времени: «Сегодня», «Вчера», «На этой неделе», «Раньше». Sticky section headers при скролле — проектируется явно, потому что UICollectionView и Compose LazyColumn ведут себя по-разному без явной конфигурации.
Группировка однотипных уведомлений («12 человек лайкнули вашу публикацию») — опционально, но значительно улучшает читаемость ленты.
Пустое состояние
Если уведомлений нет вообще — пустое состояние с иллюстрацией и понятным заголовком, не просто белый экран. Если включены не все категории уведомлений — ссылка на настройки.
Срок — 1 день. Оценка уточняется после анализа требований.