На странице матча дата, счёт и ссылка на протокол не должны спорить за внимание. Болельщику нужно сразу понять, что произошло, а уже потом искать подробности. Визуальная иерархия помогает выстроить этот порядок: размер текста, расположение блоков, отступы и цвет показывают, куда смотреть сначала.
Одна и та же страница нужна читателю в разное время: за минуту до встречи, по ходу игры и после финального свистка. В каждом случае главный вопрос меняется. Удобный дизайн даёт быстрый ответ, не заставляя пролистывать всё подряд, но оставляет место и для контекста.
Сначала порядок сведений, затем оформление
Иерархия начинается не с выбора крупного шрифта. Сначала редактору и дизайнеру нужно договориться, какая информация главная. Для завершившегося матча это обычно участники, итоговый счёт, статус и дата. Для предстоящего — время начала, место и сведения о доступе для зрителей. Если обе страницы собраны по одному шаблону, он должен учитывать смену статуса, а не держать пустую ячейку под результат.
Помогает простой приём: выписать элементы страницы без оформления — заголовок, статус, основные данные, краткое объяснение, подробный текст, статистику, фотографии, источники, дату обновления. Затем сгруппировать их по вопросам читателя. Иначе самым заметным рискует стать не важный элемент, а тот, который проще выделить цветом.
Три уровня, которые помогают читать
- Первый уровень — суть. Событие, участники, статус, результат или время начала: что случилось либо что предстоит.
- Второй уровень — объяснение. Короткий итог, решающий эпизод, особенности формата или значение события.
- Третий уровень — детали. Статистика, хронология, составы, методика подсчёта и ссылки на связанные материалы сайта.
Подробности при этом не нужно прятать. Читатель быстро получает ответ на главный вопрос и, если хочет, идёт дальше. Скажем, число бросков по воротам мало что говорит без названий команд и периода игры. Подпись может быть скромнее цифры, но должна стоять рядом и легко читаться.
Чем создаётся визуальная иерархия
Размер и начертание текста
Заголовок должен заметно отличаться от основного текста. Но если всё на странице крупное и жирное, выделять уже нечего. Обычно хватает нескольких текстовых уровней: заголовка материала, названий разделов, подзаголовков, основного текста и подписей. В абзацах жирным лучше отмечать опорные слова, а не целые предложения.
Со спортивными цифрами нужна особая аккуратность. Крупный счёт без статуса легко принять за окончательный, хотя матч ещё идёт. Рядом должно быть ясно написано: «матч завершён», «идёт второй тайм» или «начало позже». В расписании международного турнира часовой пояс тоже лучше указывать рядом со временем, а не прятать в сноске.
Положение и свободное пространство
Элемент у начала страницы обычно замечают раньше. Если статус матча оказался под большим баннером или галереей, яркая заливка вряд ли вернёт ему нужное место в порядке чтения. Отступы показывают связи: название команды и её счёт должны восприниматься как одна группа, пояснение к статистике — находиться возле таблицы.
Свободное пространство нужно не ради пустоты. Оно отделяет одну мысль от другой. Когда заголовок дальше от своего вводного абзаца, чем тот — от соседней карточки, глаз может ошибочно объединить чужие элементы. На телефоне это особенно заметно: колонки превращаются в длинную вертикальную ленту.
Цвет и контраст
Цвет помогает обозначить статус, но не должен объяснять его в одиночку. Красный и зелёный индикаторы без слов могут быть непонятны людям с особенностями цветовосприятия; при слабом контрасте цветные цифры трудно различить. Подписи «перенесён», «завершён», «обновляется» передают смысл яснее оттенка. Контраст текста и фона стоит проверять и в светлой, и в тёмной теме, если доступны обе.
Цвета команд хороши как акцент, но не всякий фирменный оттенок годится для текста. Светло-жёлтое название на белом фоне почти исчезнет. Лучше оставить такой цвет для полосы, рамки или небольшого знака, а названия набрать хорошо различимым текстом.
Страница до матча, во время и после него
До начала встречи на первом экране важны дата, время, место и информация о том, подтверждена ли программа. Во время игры — текущий статус и обновления с указанием момента, к которому они относятся. После финального свистка — окончательный счёт и короткое объяснение, как он сложился. Это три состояния одной информационной структуры, а не три разных дизайна.
Если данные на странице обновляются с задержкой, время последнего обновления нужно показывать у каждого такого блока. Табло уже может отражать новый эпизод, а текстовый разбор — ещё описывать предыдущий. Называть это «прямым эфиром» не стоит, если страницу редактируют вручную и не сразу. Точный статус полезнее видимости скорости.
В большом турнире важно не смешивать результат матча с положением команды в соревновании. Одна победа не всегда объясняет место в группе: на него могут влиять другие встречи и регламент. Таблице, особенно если она стоит на видном месте, нужны подписи о стадии турнира и актуальности данных. Иерархия помогает быстро увидеть главное, но не заменяет проверку фактов.
Где акценты особенно легко расставить неверно
На длинной странице за внимание борются фотографии, кнопки, карточки соседних публикаций и встроенная статистика. По отдельности они полезны, вместе могут заглушить главное. Ошибки проще замечать, если спрашивать, какую задачу выполняет элемент, а не нравится ли его оформление.
- Крупная фотография вытесняет итог. Эмоциональный кадр уместен, но на мобильном экране результат или статус не должны теряться под ним.
- Все кнопки выглядят одинаково. Протокол, галерея и справка решают разные задачи. Это должно быть понятно по подписям и степени заметности.
- Важное написано мелким серым текстом. Дата обновления, пометка о предварительных данных и источник статистики — не декоративные сноски.
- Подзаголовки обещают больше, чем дают. За словами «Главный момент встречи» должен следовать рассказ именно об этом моменте.
- Карточки не различаются по статусу. Анонс и отчёт о завершившейся игре не стоит различать только по дате внизу.
В аналитическом материале центр внимания может сместиться со счёта на объяснение. Если речь о расположении игроков и смене схемы по ходу встречи, читателю разбора ролей в футбольных схемах 4-3-3 и 4-4-2 полезнее ясное разделение позиций и функций, чем крупная плашка с названием схемы.
Мобильный экран и доступность
На широком экране счёт, составы и статистика могут стоять рядом. На телефоне они идут друг под другом, поэтому порядок блоков в структуре страницы становится особенно важен. Если подробная таблица появляется раньше заголовка с итогом, иерархия перевернулась. Проверять нужно не только уменьшенный макет, но и последовательность чтения при прокрутке.
Страница должна оставаться понятной и тем, кто пользуется вспомогательными технологиями. Семантические заголовки помогают переходить между разделами, а названия кнопок должны объяснять действие: «Открыть протокол матча» яснее нескольких одинаковых «Подробнее». Графику с изменением счёта нужно текстовое объяснение ключевого момента; изображению — подпись со значимой информацией, если её нет в основном тексте.
Движение тоже не стоит делать единственным сигналом. Мигающее уведомление может отвлечь от результата и мешать чтению. Если анимация сообщает об изменении счёта, сообщение должно остаться в тексте и после того, как эффект закончится: читатель мог открыть вкладку позже.
Как проверить иерархию без догадок
Первый тест — убрать цвета и фотографии. Если в чёрно-белом виде трудно найти заголовок, статус или понять, к какому матчу относится блок, цвет лишь маскировал проблему. Второй — открыть страницу на телефоне и без прокрутки либо с минимальной прокруткой найти ответ на главный вопрос: итог для отчёта, время и место для анонса. Третий — проверить, понятны ли дата и цифры без чтения всей статьи.
Попросите человека, который не работал над макетом, выполнить конкретную задачу: найти время начала, понять, окончательный ли счёт, или отыскать разбор спорного эпизода. Замечайте не только результат, но и места, где его внимание перехватывает посторонний блок. Потом меняйте по одному признаку — порядок, подпись, размер или отступ. Так будет видно, что помогло.
Перед публикацией отчёта проверьте на телефоне связку «заголовок — окончательный счёт — дата матча». Если между ними вклинилась карточка другой встречи, перенесите её ниже: иначе читателю придётся выяснять, к какому событию относится результат.
