0:0, перерыв, отменён: как один компонент показывает разные состояния матча

Макет показывает «0:0» — но это не начало матча. Это отсутствие данных. Без визуального маркера состояния пользователь читает счёт неправильно. Один компонент, пять статусов, одна задача: сделать разницу очевидной без пояснительного текста.

До старта

Состояние scheduled — стартовая точка компонента. Счёт скрыт или заменён на тире. Время отображается как точка старта, а не как прошедший тайм. Apple HIG для Live Activities рекомендует компактное представление предстоящих событий через чёткий временной маркер и минимальный набор данных.

С одной стороны, пустое поле счёта выглядит чисто. С другой стороны, пользователь не понимает: матч ещё не начался или данные не загрузились. Разрешение — визуальный сигнал ожидания. Приглушённая типографика, иконка календаря или метка «Старт в 21:00».

Нулевой счёт до игры и нулевой счёт на пятой минуте — разные смыслы. Первый требует скрытия цифр. Второй — их явного показа. Без разделения этих состояний компонент создаёт двусмысленность.

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

Плотность данных в scheduled минимальна. Компонент не конкурирует за внимание с live-матчами. Это корректное поведение: предстоящее событие менее приоритетно, чем текущее.

Идёт игра

Состояние live меняет иерархию внутри компонента. Счёт становится главным элементом. Время матча — вторичным, но обязательным. Пульсирующий индикатор или точка сигнализируют об обновлениях в реальном времени.

С одной стороны, динамичный индикатор привлекает внимание. С другой стороны, на плотной ленте матчей постоянная анимация создаёт визуальный шум. Решение — ограничить анимацию первым появлением или изменением счёта.

Типографика счёта в live-состоянии увеличивается относительно scheduled. Контраст веса шрифта между командами и счётом растёт. Клубная айдентика в интерфейсе поддерживается через цвета команд, но не заменяет структурные различия между состояниями.

Время в live отображается как текущий тайм: «45'» вместо «21:00». Формат зависит от вида спорта, но принцип един — показывать прогресс, а не точку на часах. Apple HIG для Live Activities фиксирует этот паттерн как стандартный для динамических данных.

Размер компонента в live может увеличиваться. С одной стороны, это нарушает сетку. С другой стороны, изменение размера — дополнительный сигнал состояния. Компромисс — изменение внутреннего отступа без изменения внешней рамки.

Пауза

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

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

Типографика счёта в halftime остаётся на уровне live. Снижается только динамика: индикатор убран, анимация остановлена. Метка «Перерыв» занимает позицию индикатора или размещается рядом со временем.

Альтернативное объяснение: перерыв — это часть live, а не отдельное состояние. Допустимо для внутренних систем, но не для пользовательского интерфейса. Пользователь не должен гадать, обновляются ли данные прямо сейчас.

Матч завершён или не состоялся

Состояния finished и postponed визуально противоположны, но структурно похожи. Оба означают остановку обновлений. Разница — в причинах и интерпретации.

Finished: счёт финальный, типографика стабильна, индикатор live снят. Допустимо небольшое снижение контраста относительно live-состояния — сигнал завершённости. Метка «Завершён» необязательна, если контекст понятен из ленты.

Postponed: счёт недействителен. Визуальное решение — перечёркивание, замена на тире или явная метка «Перенесён». Без этого компонент выглядит как финальный результат с нулевым счётом.

Спортивная инфографика, которую можно прочитать без цвета — обязательный принцип для состояний postponed и finished. Цветовая маркировка не должна быть единственным различителем. Перечёркивание, метка, изменение веса — альтернативные каналы передачи информации.

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

Scheduled: счёт скрыт, время — точка старта, низкий контраст. Live: счёт активен, время — тайм, индикатор обновления. Halftime: счёт зафиксирован, индикатор снят, метка перерыва. Finished: счёт финальный, стабильная типографика, снижение контраста. Postponed: счёт аннулирован, перечёркивание или метка, максимальное визуальное отличие от finished.

Каждое состояние имеет уникальную подпись при переводе в монохром. Это проверочный критерий для дизайн-системы.

Первая ошибка — reliance на цвет как единственный маркер. Пользователь с нарушенным цветовым восприятием не различит live и postponed, если разница только в зелёной и красной точке.

Вторая ошибка — одинаковая типографика для scheduled и finished с нулевым счётом. Оба состояния показывают «0:0», но смысл противоположный. Без исходного макета нельзя оценить масштаб проблемы, но на малом экране эффект усиливается.

Третья ошибка — отсутствие переходных состояний. Компонент перескакивает из scheduled в live без визуальной подготовки. Пользователь теряет контекст.

Четвёртая ошибка — избыточная анимация в halftime. Состояние паузы не должно имитировать активность. Это создаёт ложные ожидания.

Подробнее о структуре компонента — в материале про дизайн live score карточки.

Первое. Каждое состояние имеет уникальную комбинацию «счёт + индикатор + метка». Ни одно состояние не повторяет другую комбинацию.

Второе. Нулевой счёт никогда не появляется без контекста состояния. Пустые данные и реальный ноль визуально разделены.

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

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

Проверка компонента в системе

В интерфейсе из материала «0:0, перерыв, отменён: как один компонент показывает разные состояния матча» элементы «Идёт игра» и «Пауза» конкурируют за одно и то же внимание. Если оба получают одинаковый визуальный вес, пользователь медленнее считывает главный спортивный сигнал. Поэтому сначала определяется приоритет данных, затем размер, контраст и положение компонента, а декоративные признаки подстраиваются под эту иерархию. Вопрос «Как избежать двусмысленности нулевого счёта и отсутствия данных?» здесь решается через скорость чтения и устойчивость макета на самом тесном экране.

Раздел «Пауза» полезно сопоставить с «До старта» именно как две части одной дизайн-системы. Для темы «0:0, перерыв, отменён: как один компонент показывает разные состояния матча» хороший результат означает, что изменение одного компонента не разрушает соседний: длинное имя не выталкивает счёт, новый статус не маскирует время, а фирменный цвет не становится единственным носителем смысла. Такая проверка сильнее красивого desktop-макета, потому что показывает поведение компонента при реальных ограничениях.

Когда «0:0, перерыв, отменён: как один компонент показывает разные состояния матча» переносится между широким экраном и телефоном, «До старта» нельзя просто уменьшить вместе с «Идёт игра». У компонентов разные задачи и разные минимальные размеры для чтения. Один может уйти во второй уровень, другой должен остаться видимым постоянно. Поэтому ответ на «Как избежать двусмысленности нулевого счёта и отсутствия данных?» начинается с определения обязательного сигнала, после чего второстепенные подписи, иконки и декоративные элементы сокращаются без потери смысла.

Для спортивной графики пара «Идёт игра» и «Пауза» задаёт полезный стресс-тест. В статье «0:0, перерыв, отменён: как один компонент показывает разные состояния матча» макет должен сохранять смысл при длинных фамилиях, локализации, увеличенном шрифте, отсутствии цвета и узкой ширине. Если компонент работает только в идеальном примере, это демонстрация, а не система. Вопрос «Какие состояния нужно проектировать заранее?» поэтому связан не с украшением, а с тем, какую информацию пользователь сможет распознать первой и без дополнительного объяснения.