Карточки, списки и состояния интерфейса

Карточка — самый частый компонент веба. А ещё интерфейс — это не один экран «всё хорошо», а минимум четыре: загрузка, данные, пусто, ошибка.

«Дизайн — это не про идеальный случай. Дизайн — это про все остальные случаи».

Карточка группирует связанную информацию (картинка, заголовок, описание, действие) в один кликабельный блок. Главная её боль — выравнивание: если описания разной длины, кнопки «скачут» по высоте. Современное решение — subgrid: дочерние элементы карточек выравниваются по общим линиям сетки.

  ВЫРАВНИВАНИЕ КАРТОЧЕК (subgrid)
  -------------------------------
  БЕЗ subgrid:            С subgrid:
  +------+ +------+       +------+ +------+
  |[img] | |[img] |       |[img] | |[img] |
  |Загол | |Длинный|      |Загол | |Длинный|
  |[Buy] | |загол  |      |      | |загол  |
  +------+ |[Buy]  |      |[Buy] | |[Buy]  |  <- ровно
          +------+        +------+ +------+

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.card {
  display: grid;
  grid-template-rows: subgrid;  /* кнопки в ряд выровнены */
  grid-row: span 3;
  border-radius: 12px;
  padding: 16px;
}

Четыре состояния

Любой список данных живёт в одном из состояний. Спроектировать надо все:

Скелетон лучше спиннера: он показывает структуру будущего контента, и переход к данным ощущается плавнее.

Разбор глубже: дизайн всех состояний, а не идеального экрана

Главный сдвиг мышления при переходе от «рисую экраны» к «проектирую интерфейс» — осознание, что экран существует не в одном, а в нескольких состояниях. Список товаров — это не один экран «вот три товара». Это: момент загрузки (данные ещё едут), нормальное состояние (данные есть), пустое состояние (товаров нет), состояние ошибки (сервер не ответил). Новичок рисует только второе и считает работу законченной. Профессионал понимает, что остальные три состояния пользователь увидит в реальности — и если их не спроектировать, он увидит белый экран или техническую ошибку.

Пустое состояние — недооценённая возможность. Неопытный дизайнер оставляет пустой список просто пустым, и пользователь думает, что сайт сломался. Зрелый дизайнер превращает пустоту в подсказку: дружелюбный текст («Здесь пока ничего нет») плюс действие («Создать первый проект»). Так пустое состояние не пугает, а ведёт пользователя дальше. Состояние ошибки тоже проектируют человечно: не «Error 500», а «Не удалось загрузить» плюс кнопка «Повторить» — пользователь получает не тупик, а выход. А состояние загрузки лучше показывать скелетоном — серым контуром будущего контента — а не крутящимся спиннером: скелетон сообщает «контент вот такой формы уже едет», и переход к данным ощущается плавнее.

Выравнивание карточек — давняя боль, которую современный CSS наконец решил элегантно. Когда у карточек в ряду описания разной длины, их внутренние элементы (заголовок, текст, кнопка) «скачут» по высоте, и кнопки оказываются на разных уровнях — ряд выглядит неряшливо. Свойство subgrid позволяет внутренним элементам всех карточек выравниваться по общим горизонтальным линиям родительской сетки: все заголовки на одной высоте, все кнопки на одной линии, независимо от длины текста. Это превращает «приблизительно ровный» ряд карточек в идеально выровненный без хитростей и фиксированных высот.

Как делают ПЛОХО

Рисуют только «идеальный» экран с тремя ровными карточками. Пустой список — белый экран («сайт сломался?»). Ошибка — никак. Загрузка — крутилка по центру. Карточки с разными текстами — кнопки вразнобой.

Как делают ХОРОШО

Проектируют все четыре состояния. Пусто — объясняют и предлагают действие. Ошибка — что и почему + «Повторить». Загрузка — скелетон. Карточки выровнены через subgrid, кнопки на одной линии.

Чек-лист

• Спроектированы состояния: загрузка, данные, пусто, ошибка.
• Пустое состояние объясняет и предлагает действие.
• Ошибка показывает причину и даёт «Повторить».
• Загрузка — скелетон, а не голый спиннер.
• Карточки в ряду выровнены (subgrid).

Итог. Карточки выравнивают через subgrid, а интерфейс проектируют во всех четырёх состояниях. «Пусто» и «ошибка» — не баги, а часть дизайна.