На примере карточек блюд разбираемся, какой подход выбрать: блочный или строчный, как работать с данными, куда деть кнопку и т. д. Соберём минусы и плюсы каждого подхода.

Виды карточек

Есть несколько основных приёмов для оформления карточек. Каркасные — когда карточка представлена в виде самостоятельного блока с чёткими контурами. Бескаркасные — когда форма карточки не выражена явно, а формируется за счёт содержимого. Ещё карточки могут быть горизонтальными и вертикальными. Мы разберём вертикальные, так как они применяются чаще в клиентских продуктах.

Предположим, нам нужно сверстать карточки блюд для меню ресторана. Стандартный набор данных такой: фотография, название, описание, цена, кнопка покупки и кнопки количества. Опционально может быть скидка, вес, калорийность, лайк и доп. отметки.

При прямом сравнении кажется, что каркасная вёрстка лучше: форма блока удерживает содержимое внутри, она контрастнее на фоне, фотография на белом выглядит лучше. В то время как строчная — разваливается.

Каркасная/блочная вёрстка

Одна из отличительных особенностей такой вёрстки — блоки одинаковой высоты, которые выкладываются рядами или используются в слайдере. Такие карточки используются повсеместно, и мы к ним привыкли.

Но что, если содержимое карточек не всегда предсказуемо? Например, название может быть в одну или три строки. Описание может быть длинным, коротким или вовсе отсутствовать. У каких-то блюд есть вес и калорийность, а у каких-то нет. Хоть форма и удерживает содержимое карточки, но появляются большие дыры, так как блочная вёрстка предполагает общую высоту карточек в ряде.

Чтобы победить эту проблему, часто устанавливают ограничение на длину заголовков и описания. Всё, что выходит за ограничение, скрывается за троеточием. Также часто цену и кнопку объединяют вместе.

Такой подход решает проблему частично:

• Сокращаются разрывы между контентом и кнопкой.

• Важная часть заголовков может скрываться. Например, если две одинаковые пиццы, но разного размера.

• Сложно выделить скидку и показать две цены.

• Описание перестаёт быть полезным, так как не даёт полной картины о блюде. Например, если я не люблю лук.

• Если добавить блюдо в корзину, то появляются кнопки изменения количества, и цена скрывается.

Уберём краткое описание совсем, так как оно не помогает. Вынесем обратно цену из кнопки, а саму кнопку сделаем меньше. Вес блюда перенесём к цене, так как цена и вес блюда связаны. А вот калорийность, хоть и важна для определённой части людей, не заслуживает отдельной строки.

В общем, неплохо. Проверим на прочность и добавим доп. состояния: покажем скидку, покажем кнопки изменения количества, добавим доп. отметку блюда

Если посмотреть на карточку со скидкой и кнопками количества, видно, что они не уместятся на одном уровне. На самом деле это не проблема: кнопки количества появляются после добавления в корзину на 1–2 секунды поверх цены, а затем переходят в индикатор количества.

Посмотрим в минимальном размере на телефоне.

По стилистике карточки можно подтянуть и смягчить контраст. Но в целом конфигурация получается компромиссной. Всё из-за того, что каркасные карточки требуют выравнивания блоков по высоте в одном ряду. А элементы внутри карточки следует располагать по правилу «якорей». Всё это делает компоновку не самой гибкой. То и дело во что-то упираешься.

Если резюмировать, то каркасная вёрстка:

• Подходит, когда содержимое карточек предсказуемо.

• Хорошо подходит для использования на сложных фонах.

• Конфигурация карточек не гибкая.

• Использует меньше полезной площади за счёт внутреннего воздуха и внешних отступов между друг другом.

Подобные решения используют: Бургер Кинг, Перекрёсток, Биг Гик.

Бескаркасная/строчная вёрстка

При такой вёрстке очертания блока карточки создаются за счёт её содержимого.

Если расположить карточки в несколько рядов — сразу всё становится ещё хуже. Карточки не только разваливаются, но и появляются незапланированные связи между кнопкой верхней карточки и фотографией нижней карточки.

Чтобы сократить дыры в карточках, можно придвинуть кнопку к контенту. Но в этом случае начинает страдать ритм рядов.

При таком подходе следует подойти с другой стороны. Так как вёрстка карточки идёт потоком сверху вниз, следует классифицировать данные сперва по их объёму. Например: фотографии одного размера, цена примерно одной длины, кнопка добавления одинаковая. А вот название и описание могут быть разными. Вес и калорийность могут быть, а могут отсутствовать.

Переместим цену вверх. Сразу становится видно — более последовательное начало карточки.

Кнопка всё ещё задаёт вертикальный ритм и сбивает его. Сделаем её меньше и перенесём ближе к цене. Так как цена короткая по длине, она освобождает правую сторону.

После переноса кнопки ритм стал сильно лучше. Я намеренно поднял кнопку на границу фотографии. Из-за того, что фотографии могут быть разные: белые, чёрные, цветные — кнопка будет лучше считываться.

Даже несмотря на значительную разницу в длине заголовка и описания — карточки выглядят естественно, и глаз не спотыкается. Как и в прошлых карточках — сокращать описание нет смысла, поэтому уберём его. Название пока оставим полным.

Уберём калорийность, а вес добавим к названию блюда.

Проверим на прочность и добавим доп. состояния: покажем скидку, покажем кнопки изменения количества, добавим доп. отметку блюда.

Посмотрим в минимальном размере на телефоне.

Даже несмотря на то, что края некоторых карточек получаются рваными — бескаркасные карточки выигрывают. Теория близости помогает человеку соотнести данные по каждой карточке и без явного выделения блока. За счёт полного названия карточки более информативны. Но если хочется, заголовки можно подрезать — и станет чуть лучше.

Резюмируя строчную вёрстку:

• Подходит, когда содержимое карточек непредсказуемо.

• Карточки более информативные.

• Более гибкая настройка. Данные можно наращивать строками.

• Используют больше полезной площади за счёт отсутствия воздуха внутри.

• Может не подходить для использования на сложных фонах.

Такие решения используют: Grab, Яндекс Маркет, Лавка, Doordash.

Универсальное решение

Универсальное решение заключается в том, чтобы найти общий подход использования карточек: в плитке, в слайдере, выделенные и т. д. Для этого нужно в первую очередь отталкиваться от данных, а уже потом искать приёмы для их компоновки.

Например, последние карточки можно сделать каркасными, если нужно их вписать в отдельный самостоятельный слайдер. Или выделить одну в плитке.

Выводы

Сегодня используется множество разных вариантов карточек товаров. Выбор конкретной компоновки зависит прежде всего от задачи и доступных данных. Главное — правильно определить, что именно нужно показать человеку, и что можно опустить. Только так можно получить действительно хороший результат.

Отдельно про кнопку «Купить»

Многие глобальные сервисы делают кнопку «Купить» небольшой с иконкой внутри или вовсе убирают её. В рунете же обычно кнопка «Купить» — большая, расположенная снизу с текстом внутри. Думаю, это связано с консерватизмом, и мы придём к более компактным решениям позже. Как обычно ?