5.2 KiB
5.2 KiB
Android UI Checklist — Batch 2 (Telegram Reference)
Дата: 2026-03-09
Источник: 10 скринов Telegram Android (чат, контекстные действия, медиа, поиск/чаты)
P0 — Chat Screen Parity (must-have)
- Top app bar чата: back + avatar + name + status + call + menu, полупрозрачная подложка на фоне обоев.
- Закреплённое сообщение блоком под app bar (2 строки, иконки pin/close, tap для перехода).
- Message composer Telegram-стиля:
- Полупрозрачный rounded input контейнер.
- Иконка emoji слева, поле ввода, скрепка, кнопка отправки/голосового.
- Корректные отступы от nav bar + IME.
- Сообщения вход/выход: плотные пузыри, время и delivery статус внизу справа.
- Reply-preview внутри outgoing bubble (вертикальная полоска, автор, snippet).
- Forwarded header в сообщении ("Переслано от ...") + мини-аватар.
- Поддержка chat wallpaper (обои в фоне, читабельный контраст поверх).
P0 — Voice/Audio Message UI
- Voice bubble: крупная play/pause кнопка, waveform/прогресс, длительность, время сообщения.
- Состояния воспроизведения (play/pause/ended) визуально различимы.
- Outgoing/incoming voice bubble отличаются по цвету/тональности как у text bubbles.
P0 — Message Actions + Reactions
- Long press открывает reaction bar над сообщением (emoji + "expand").
- Контекстное меню действий (reply/save/forward/pin/delete) в floating dark card.
- Режим multi-select:
- Верхняя панель (close/count/actions).
- Нижняя action bar (reply/forward) в виде rounded pills.
- Selected state сообщения с явной подсветкой/overlay.
P1 — Media & Attachment Bubbles
- Media bubble с превью изображения/видео + таймкод для видео.
- File-list bubble (несколько файлов): thumbnail слева, имя/вес/тип справа.
- Audio file bubble (не voice): progress bar + текущая/общая длительность.
- Метаданные поста/канала (просмотры/время/reaction strip) у медиа-сообщений.
P1 — Fullscreen Media Viewer
- Fullscreen header: close + index ("1") + share + delete.
- Поддержка reaction overlay в viewer (как на скрине).
- Свайп между медиа (gallery mode), если в сообщении несколько вложений.
P1 — Chat Header Special Cases
- Баннер "Добавить контакт / Заблокировать" для unknown user.
- Music mini-player строка под app bar (play + title + close).
- Карточка "о пользователе" в истории чата (не в контактах, страна/дата регистрации и т.д.).
P1 — Chat List Screen Parity
- Верхние фильтр-чипы/табы ("Все", "Люди", ...), компактные rounded chips.
- Список чатов:
- Аватар, title, preview, date/time.
- Badge unread справа.
- Иконки delivery/camera/attachments в preview строке.
- Плавающий FAB (compose/new chat) справа снизу.
- Floating bottom navigation с blur/dark container и активным фиолетовым tab.
P2 — Motion & Polish
- Плавная анимация открытия reaction/context menu (scale+fade).
- Плавные переходы pinned bar и composer states.
- Micro-interactions на bubbles/chips/FAB как в Telegram (короткие, не "пружинные").
UI Tokens (из этой пачки)
- Bubble outgoing: светло-фиолетовый (
accentContainer), incoming: тёмно-графитовый (surfaceVariant). - Основной акцент: мягкий фиолетовый (
#9B6BDFдиапазон). - Обязательный контраст текста на обоях через затемнение/blur подложек.
- Радиусы: bubbles ~14-18dp, composer ~22-26dp, cards/menu ~18-20dp.
Definition of Done (Batch 2)
- Chat screen визуально соответствует референсу по структуре (header/pinned/messages/composer).
- Все состояния long-press -> reactions -> context actions -> multi-select работают без наложений.
- Voice/audio/media/file bubbles выглядят и ведут себя ожидаемо.
- Chat list и фильтр-чипы приведены к Telegram-like стилю.
- На устройствах с gesture navigation ничего не перекрывается системными панелями.