Четыре состояния, без которых интерфейс разваливается

Макет обычно рисуют в одном состоянии: данные есть, они красивые, их ровно столько, сколько влезает в экран. Реальность выглядит иначе — и на ней продукт разваливается.

Пусто

Первое, что видит новый человек. Пустой экран со словом «Нет данных» — это тупик. Пустое состояние должно объяснять, что здесь появится, и давать ровно одно действие.

Загрузка

Спиннер посреди экрана говорит «жди», но не говорит «сколько». Если операция дольше секунды, покажите, что происходит: «Читаем страницу», «Считаем смету».

Результат

Тот самый экран из макета. Проверьте его на границах: один элемент, сто элементов, элемент с названием на двести знаков.

Ошибка

Сообщение об ошибке — это инструкция: что случилось и что делать. «Что-то пошло не так» не помогает. «Не удалось прочитать страницу: сайт закрыт от роботов» — помогает.

Порядок работы

Опишите все четыре состояния текстом до вёрстки. Это десять минут, которые экономят день переделок.

Рядом по теме: Псевдокод для вайбкодинга, ТЗ на Telegram-бота: bot-spec.md для агента, ТЗ на онбординг: путь до первого результата, статья «Что такое вайбкодинг» и Свой клон: как выбрать сервис и собрать первый экран (бесплатно).

Что дальше

Как применить четыре состояния к первому продукту, разобрано в Одна сильная функция за вечер. Когда экраны собраны, проверьте их на телефоне — Почини вёрстку на телефоне и не устрой редизайн. А если хотите пройти путь от идеи до работающего экрана по готовой системе, курс Первый экран ведёт по шести шагам — 990 ₽.