Дизайн пустых состояний (Empty States) экранов мобильного приложения
Пустое состояние — это не декоративный экран. Это момент, когда пользователь оказался в тупике: контента нет, и непонятно, что делать дальше. Правильно спроектированный empty state даёт направление. Плохой — просто белый экран или фраза «Ничего не найдено».
Три вида пустых состояний, которые путают
Их важно разделить, потому что у каждого разный CTA и разный тон:
First-time empty — пользователь впервые попал на экран, данных ещё нет. Пример: раздел «Избранное» у нового пользователя. Задача: объяснить, что здесь будет, и показать, как это заполнить. CTA: «Перейти в каталог», «Добавить первый товар».
User-generated empty — пользователь сам что-то сделал и получил пустой результат. Классика: поиск без результатов. Задача: помочь изменить запрос. CTA: «Очистить фильтры», «Попробовать другой запрос».
Error-caused empty — данные есть, но не загрузились из-за ошибки сети или сервера. Это уже ближе к error state (они пересекаются). CTA: «Попробовать ещё раз».
Смешивать эти три типа нельзя — у них разная иллюстрация, разный текст, разная кнопка.
Иллюстрации
Для empty states оптимальны векторные иллюстрации или Lottie-анимации. Размер: не больше 40% высоты экрана, чтобы не доминировало над текстом и кнопкой. Стиль иллюстрации должен соответствовать общему дизайн-языку приложения.
На практике: заказываем набор иллюстраций под все основные экраны разом. Дешевле, чем по одной. SVG-формат для экспорта в React Native через react-native-svg, или в Flutter через flutter_svg, или PDF-вектор для iOS/Android нативки.
Структура компонента
[Иллюстрация/Иконка]
[Заголовок — коротко, что случилось]
[Подзаголовок — что делать]
[CTA Button — конкретное действие]
Кнопка должна быть одна. Два CTA в empty state — это нерешительность в дизайне, которую пользователь ощущает как путаницу.
Высота компонента — не фиксированная, а центрированная по вертикали в доступной зоне экрана (за вычетом navigation bar и tab bar).
Срок — 1 день на полный набор empty states для всех основных экранов приложения. Стоимость индивидуально.