Scott
Карточка полезна, когда человеку нужно просмотреть набор связанных элементов, а затем решить, открыть, сохранить, сравнить или использовать один из них. Это не повод помещать любой контент в скруглённый прямоугольник. Хорошая карточка задаёт элементу понятную идентичность, предсказуемый порядок чтения и одно очевидное следующее действие.
Когда вы проектируете компоненты карточек в Pixso, сначала определите иерархию контента и адаптивные состояния, а уже затем полируйте тени и радиусы. Карточка должна объяснять себя даже при отсутствии изображения, переносе заголовка на две строки или недоступном действии.
Начните с решения, которое поддерживает карточка
Сформулируйте назначение карточки одним предложением: «Помочь читателю сравнить шаблоны», «дать коллеге открыть файл» или «показать, требует ли задача внимания». Если в предложении несколько несвязанных задач, разделите паттерн. Контентная карточка, выбираемый результат и плитка панели могут использовать одну поверхность, но у них разные правила взаимодействия.
Постройте читаемую иерархию
Задайте устойчивый маршрут взгляда: сначала идентичность, затем полезный контекст, в конце действие. В карточке могут быть изображение или иконка, короткий заголовок, одна поясняющая строка, метаданные (например, владелец или дата) и одно главное действие. Не делайте жирным каждую строку: вес шрифта и интервалы должны показывать, что необходимо для выбора, а что лишь помогает.
- Идентичность: используйте заголовок, который отличает элемент от соседних.
- Контекст: добавляйте только метаданные, меняющие решение: статус, формат или дату обновления.
- Действие: явно показывайте следующий шаг. Не делайте всю поверхность кликабельной без состояния фокуса или наведения, объясняющего такое поведение.
Выберите подходящий паттерн карточки
Компактная строка подходит для быстрого сравнения большого числа элементов. Медийная карточка уместна, когда изображение несёт смысл, а не просто отодвигает заголовок ниже первого экрана. Статусная карточка нужна, когда главный ответ — состояние или динамика. Действующая карточка оправдана, когда действие и есть причина существования элемента. Если нужен длинный рассказ, ведите на подробный экран, а не уменьшайте кегль до размера абзаца.
| Паттерн | Лучше всего подходит | На что обратить внимание |
|---|---|---|
| Компактная строка | Просмотр и сравнение | Плотные метаданные скрывают заголовок. |
| Медийная карточка | Визуальные примеры и шаблоны | Изображения без полезного alt или с жёсткой обрезкой. |
| Статусная карточка | Прогресс, владелец и риск | Статус передан только цветом или устарел. |
| Карточка действия | Один сфокусированный следующий шаг | Несколько конкурирующих кнопок. |
Проектируйте для реального разброса контента
Проверьте короткий заголовок, заголовок в две строки, отсутствие метаданных, длинную локализованную подпись и не загрузившееся изображение. Ограничивайте высоту заголовка только если обрезка не искажает смысл; в остальных случаях увеличивайте карточку или переносите полный текст в подробности. Подписи действий должны быть понятны вне карточки: «Открыть проект» надёжнее, чем «Просмотр».
Явно задайте адаптивные состояния
На широком экране сетка показывает несколько карточек. На узком сначала уменьшайте число колонок, а не читаемость. Сохраняйте идентичность и главное действие, второстепенные метаданные скрывайте или переносите. Если карточка превращается в горизонтальную строку, сохраняйте порядок чтения и область нажатия. На каждой контрольной ширине проверяйте фокус клавиатуры, сенсорные цели и имена для скринридера: визуальная сетка сама по себе не является адаптивной спецификацией.
Моделируйте загрузку, пустое состояние и ошибку
Карточке, которая появляется только после успешного запроса, всё равно нужен план для остальных исходов. Состояние загрузки сохраняет примерную форму, но не выдаёт контент за готовый. Пустое состояние объясняет отсутствие и предлагает полезный следующий шаг. Состояние ошибки называет сбой и позволяет повторить запрос, не теряя соседний контекст. Храните эти состояния в одном наборе компонентов, чтобы рассматривать их частью паттерна, а не добавлять в конце.
Оставьте одно главное действие
Карточки часто перегружаются, потому что в них одновременно показывают все возможные операции. Выберите одно главное действие, а редкие перенесите в ясно названное меню дополнительных действий. Если сама карточка является ссылкой, без веской причины не вкладывайте в неё несколько ссылок: вложенные цели сложнее предсказать с клавиатурой и на сенсорном экране. Для опасных действий показывайте последствие и возможность отмены.
Проверьте паттерн до повторного использования
Перед добавлением карточки на новую страницу сравните задачу, плотность контента, состояния и адаптивное поведение с существующим компонентом. Общий компонент должен облегчать повторяющееся решение, а не заставлять несвязанный контент помещаться в один шаблон. Зафиксируйте анатомию и состояния взаимодействия в Pixso, соедините ключевые экраны в прототип и поделитесь им с командой до разработки.
