Дизайн экрана чата мобильного приложения
Чат — технически один из самых сложных экранов для проектирования. Не потому что там много элементов, а потому что он асинхронный, real-time, и работает с контентом непредсказуемого размера. Большинство проблем с UI чата появляются не на этапе дизайна, а на этапе реализации — когда оказывается, что дизайн не учёл все состояния сообщений, и разработчик импровизирует.
Пузыри сообщений: гораздо сложнее, чем кажется
Сообщение пользователя (исходящее) и сообщение собеседника (входящее) — это два разных компонента, хотя визуально похожи. Разные отступы, разные фоны, разное выравнивание.
Типы сообщений, которые нужно проработать в дизайне до начала разработки:
- Текст (короткий однострочный vs длинный многострочный — поведение пузыря разное)
- Изображение одно / галерея (2–4 фото в mosaic layout)
- Голосовое сообщение с waveform и таймером
- Файл (pdf, docx) с иконкой типа и размером
- Системное сообщение («Пользователь вошёл в чат»)
- Сообщение с reply (цитата входящего + текст)
- Удалённое сообщение («Сообщение удалено»)
Каждый тип — отдельный компонент в Figma с вариантами для incoming/outgoing.
Статусы доставки и прочтения
Статусы сообщения под текстом: отправляется (часы), отправлено (одна галочка), доставлено (две галочки серые), прочитано (две галочки синие). Это паттерн WhatsApp/Telegram, пользователь его знает. Отклоняться без причины не стоит.
Интересный момент: время сообщения. Показывать его всегда или только при тапе на сообщение? Telegram показывает всегда справа от последней строки, iMessage — по свайпу влево. Оба подхода валидны, но выбор нужно сделать в дизайне, а не оставлять разработчику.
Строка ввода (Input Bar)
Самый часто переделываемый компонент в чате. Стандартные состояния:
- Пустое поле + иконки действий (прикрепить, микрофон)
- Поле с текстом (кнопка отправки появляется, микрофон исчезает)
- Запись голосового (специальный режим с waveform и кнопкой отмены)
- Reply mode (плашка с цитируемым сообщением над полем ввода)
- Поле заблокировано (readonly mode, например, в архивном чате)
Высота inputBar меняется при многострочном вводе — это нужно явно показать в дизайне. На iOS textView расширяется вверх до maxHeight, потом появляется скролл внутри. На Android Compose BasicTextField с maxLines ведёт себя аналогично.
Прикрепление медиа открывает bottom sheet с доступом к галерее, камере, файлам. Разрешения: NSPhotoLibraryUsageDescription (iOS) и READ_MEDIA_IMAGES (Android 13+) — в дизайне должен быть экран запроса разрешений если они ещё не выданы.
Список чатов (если нужен)
Экран списка диалогов: аватар, имя, последнее сообщение (обрезается в одну строку), время, счётчик непрочитанных. Счётчик непрочитанных — badge с числом, скрывается при нуле. Свайп по ячейке: заглушить уведомления, удалить, закрепить.
Онлайн-статус: зелёная точка на аватаре. Только если в приложении реализован presence (Socket.io, Centrifuge, Firebase Realtime Database, Supabase Realtime). Если нет — не показываем, это вводит пользователя в заблуждение.
Real-time и оффлайн
Дизайн чата должен показывать, что происходит при отсутствии сети. Сообщение отправляется — попадает в очередь (local optimistic update) — появляется в чате со статусом «отправляется» — при восстановлении соединения уходит на сервер. Это не просто красивая иконка часиков, это конкретный UX-паттерн, который нужно показать в дизайне.
Сроки
| Объём | Срок |
|---|---|
| Экран чата, базовые типы сообщений | 1,5–2 дня |
| Чат + список диалогов + голосовые | 2–3 дня |
| Полный мессенджер с каналами/группами | 4–5 дней |
Стоимость рассчитывается индивидуально после анализа ТЗ.