Дизайн екрана ленти новостей мобільного додатка
Лента—це нескінченний список контенту з різнорідними карточками. Проблема майже завжди одна: дизайнер робить один-два типи карточек, а в продакшені їх виявляється сім, і половина виглядає як латка поверх дизайн-системи.
Карточки: типи та стани
До початку дизайну потрібно зафіксувати всі типи постів, які будуть у стрічці. Типовий набір:
- Текстовий пост (короткий / довгий з «Читати далі»)
- Пост з одним зображенням
- Пост з галереєю (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. Skeleton-заглушки під нові карточки поки вони грузяться—опціонально, обговорюється з клієнтом.
Термін—1 день при готовій дизайн-системі. Вартість розраховується індивідуально.