Дизайн екрана чату мобільного додатка
Чат—технічно один з найскладніших екранів для проектування. Не тому що там багато елементів, а тому що він асинхронний, 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 днів |
Вартість розраховується індивідуально після аналізу ТЗ.