Оставьте одну тему на карту
Определите, что нужно знать пользователям, прежде чем принять решение об открытии карты.
Карта Система дизайна
Соберите информацию и действия в одном удобном для сканирования блоке.
Содержание чек-листа
Прогресс проверки
01
Структура и значение
Сравните информацию и представление в контексте использования.
02
Взаимодействие и удобство использования
Попробуйте выполнить операцию, измените статус и продолжайте работу.
Прогресс автоматически сохраняется в этом браузере.
РЕКОМЕНДАЦИИ
Как проверять
ПРИМЕРЫ
Примеры использования
Оставьте одну тему на карту
В карточке курса перед кнопкой «Просмотреть курс» указано название, уровень и продолжительность.
Варианты и сценарии использования
Разделение карточек
Отделяйте карточки от страницы обводкой или фоном и применяйте одинаковые правила к одному типу содержимого.
Проверьте карточку на светлом и тёмном фоне: границы должны быть заметны без тени.
Пример Карточка документа имеет ясную обводку и заголовок-ссылку.
Отступы внутри карточки
Группируйте изображение, заголовок, описание и действия отступами, отражающими связь между ними.
Проверьте заголовок в две строки и отсутствие изображения: отступы не должны создавать бессмысленные пустоты.
Пример Между изображением и заголовком 12px; описание ближе к заголовку, чем к нижней кнопке карточки.
Скругление и обрезка содержимого
Используйте общую шкалу радиусов и обрезайте изображение по углам контейнера.
Разместите изображение у края карточки и включите фокус: изображение не выходит за скругления, а обводка фокуса не обрезается.
Пример У верхнего изображения скруглены только верхние углы; фон нижней области продолжает фон карточки.