Модальное окно — интерфейсный элемент, появляющийся поверх основного контента. Он содержит в себе информацию, которая требует внимания пользователя, поэтому временно блокирует взаимодействие с остальной частью интерфейса, фокус для выполнения задачи или принятие решения.
Модальные окна применяются для действий, требующих подтверждения, детального просмотра контента или заполнения форм без перехода на новую страницу. Этот паттерн эффективен для концентрации внимания пользователя, однако, его необходимо применять с осторожностью, чтобы не нарушить интуитивное взаимодействие.
Базовые элементы карточки
Типичная структура карточки включает: изображение (40-50% высоты), заголовок (10-15%), основной текст (25-30%) и кнопки действий (10-15%). Эти пропорции могут изменяться в зависимости от контекста.
Типы карточек
Карточки бывают разных типов: информационные, товарные, медиа-карточки, карточки с действиями. Каждый тип имеет свои особенности в компоновке и пропорциях.
Система отступов
Отступы внутри карточки (примерно в 16-24px) помогают создать пространство между элементами, а внешние отступы (8-16px) обеспечивают эстетически приятное визуальное разделение карточек в сетке.
Интерактивные состояния
Чаще всего, карточки реагируют на действия пользователя через подсветку или изменение масштаба, а плавные анимации делают взаимодействие естественным и не раздражающим. Это особенно важно, так как карточек может быть много, поэтому дерганные анимации будут раздражать пользователей и испортят впечатление от всего сайта.
Переходные состояния
Важно следить за тем, чтобы загрузка изображений происходила прогрессивно, обеспечивая комфортное восприятие.
Действия внутри карточки
Кнопки и ссылки могут быть встроены или наложены на карточку. Важно, чтобы их состояния (наведение и нажатие) не конфликтовали с общими взаимодействиями карточки.
Модальные окна должны адаптироваться под различные размеры экрана, сохраняя функциональность и удобство использования.
Мобильная версия
На мобильных экранах карточки должны занимать почти всю ширину экрана, а их высота адаптироваться под контент, при этом сохраняя удобство чтения и касания.
Планшетная версия
На планшетах карточки размещаются в две-три колонки. Их пропорции стоит скорректировать, чтобы сбалансировать информативность и компактность.
Десктопная версия
На больших экранах используется более сложная сетка с карточками разных размеров, карточки могут стоять как ровно, так и в шахматном порядке. Сетку можно сделать интерактивной, добавив пользователю возможность отредактировать количество колонок, масштаб, отступы и т. д.
