Дизайн экрана ленты новостей мобильного приложения
Лента — это бесконечный список контента с разнородными карточками. Проблема почти всегда одна: дизайнер делает один-два типа карточек, а в продакшене их оказывается семь, и половина выглядит как заплатка поверх дизайн-системы.
Карточки: типы и состояния
До начала дизайна нужно зафиксировать все типы постов, которые будут в ленте. Типичный набор:
- Текстовый пост (короткий / длинный с «Читать далее»)
- Пост с одним изображением
- Пост с галереей (horizontal scroll или mosaic)
- Пост с видео (thumbnail + duration overlay + кнопка play)
- Репост / shared post (вложенная карточка)
- Pinned-пост (прикреплённое сообщение)
- Рекламный блок (если есть, с пометкой «Реклама»)
Каждый тип требует чёткой спецификации по максимальному количеству строк текста и поведению при обрезании. lineLimit(3) в SwiftUI или maxLines = 3 в Compose с TextOverflow.Ellipsis — это решение должно быть явным в дизайне.
Плашка автора и метаданные
Шапка карточки: аватар (с fallback на инициалы при ошибке загрузки), имя, дата/время публикации, кнопка «Подписаться» (если не подписан) или три точки (меню: скрыть, пожаловаться). Верификация автора — иконка галочки, цвет и тип которой часто меняются по ходу проекта. Делаем через Component Property в Figma, а не хардкодим.
Панель действий под карточкой: лайк, комментарий, репост, поделиться. Анимация лайка — отдельный момент. Instagram-паттерн (scale + color burst) реализуется через Lottie или Rive; в дизайне показываем starting state и end state, анимационный файл подготавливаем отдельно.
Pull-to-refresh и подгрузка
Pull-to-refresh — системный компонент (UIRefreshControl на iOS, SwipeRefreshLayout / PullRefreshIndicator в Compose), кастомизировать его нужно минимально. Цвет спиннера под систему — и достаточно.
Подгрузка следующей страницы (infinite scroll): индикатор загрузки в конце списка. Не «полный экран спиннер», а маленький компонент высотой 48–56pt. Скелетон-заглушки под новые карточки пока они грузятся — опционально, обсуждается с клиентом.
Срок — 1 день при готовой дизайн-системе. Стоимость рассчитывается индивидуально.