Счётчик уведомлений в мобильном приложении: как оформить бейдж

Бейдж со счётчиком помогает быстро заметить новые события, но крошечный кружок легко превращается в источник путаницы: цифра обрезается, скачет при каждом обновлении или обещает больше, чем приложение действительно может показать. Чтобы счётчик был полезным, заранее определите, что именно он считает, где заканчивается точность и как значение читается без цвета и формы. Ниже — практический порядок проектирования бейджа для вкладки, списка или значка приложения.

Один и тот же красный кружок может сообщать о непрочитанных сообщениях, новых задачах, ошибках синхронизации или всех событиях сразу. Если продукт не определил смысл числа, визуальное оформление не спасёт: пользователь увидит «7», но не поймёт, нужно ли открыть экран сейчас и что там его ждёт. Запишите значение счётчика в спецификации компонента одним предложением: «Показывает количество непрочитанных сообщений в выбранной папке» или «Показывает число задач, требующих действия».

Не складывайте в один бейдж несвязанные причины. Непрочитанное сообщение и критическая ошибка имеют разную срочность, поэтому им могут понадобиться отдельные состояния или отдельные точки входа. Если продукт всё же показывает общий счёт, подпись экрана должна раскрывать состав, например «Новые события», а внутри пользователь должен видеть, как разделяются сообщения, обновления и задачи.

Чем больше значение, тем шире бейдж. На узком экране это может сдвинуть соседнюю подпись или сделать вкладку визуально тяжёлой. До макета решите, после какого порога число заменяется сокращением вроде «99+». Это правило является продуктовым решением: оно зависит от того, нужна ли пользователю точная сумма или достаточно понять, что накопилось много событий. Не ставьте знак «+» автоматически только потому, что так устроен знакомый пример интерфейса.

Проверьте три разных случая: значение около порога, само пороговое значение и значение выше него. Например, при пороге 99 отдельно проверьте 98, 99 и 100. Уточните в команде, означает ли «99+» девяносто девять или больше, и одинаково ли понимают это число дизайнер, разработчик и редактор. Если точность важна, например при непрочитанных заявках, вместо округлённого бейджа используйте более просторное место со счётчиком и ясной подписью.

Для числа важны не только кегль и насыщенность начертания. Цифры должны удерживать центр оптически, не касаться края и не менять заметно ширину компонента при обновлении. Если доступен шрифт с табличными цифрами, сравните его со стандартными пропорциональными цифрами: в первом случае каждый знак занимает одинаковую ширину, поэтому значение вроде «18» визуально стабильнее при замене на «19». Проверьте, что нужная функция действительно доступна в используемом файле и рендерере; если нет — сделайте устойчивую ширину контейнера другим способом.

Одна цифра часто оказывается не по центру, если круг построен как фиксированное поле, а две цифры уже требуют овала. Задайте минимальную высоту и внутренние боковые отступы, затем проверьте однозначное и многозначное значения. Не растягивайте кружок до капсулы с одинаковым радиусом по углам: для длинного текста и числа нужна овальная форма, где цифры остаются на оптической оси. Подберите кегль так, чтобы цифра различалась с первого взгляда, но не занимала весь внутренний просвет.

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

Не меняйте положение значка при увеличении числа. Сценарий «8» → «12» полезно посмотреть покадрово: если бейдж расширяется симметрично от центра и отъезжает от иконки, интерфейс может казаться дерганым. Можно закрепить один край овала и увеличивать его в сторону свободного пространства. Важно, чтобы при каждом обновлении неподвижными оставались сама пиктограмма и текст соседнего элемента.

Ноль — не всегда повод показывать бейдж «0»: это может выглядеть как ошибка или пустой результат. Для обычного количества непрочитанного чаще яснее отсутствие индикатора, но этот выбор зависит от функции. Если ноль сам по себе нужен, например в статистическом разделе, используйте обычный текстовый счётчик внутри строки, а не тревожный яркий кружок. Состояние «данные ещё не загружены» тоже должно отличаться от нуля: пустое место или нейтральный индикатор загрузки не дают ложного утверждения о количестве.

Разделите как минимум состояния: скрыт при нуле, показан при небольшом значении, сокращён при переполнении и обновляется. Убедитесь, что исчезновение бейджа не оставляет рядом случайный отступ. Если число доступно только после синхронизации, не показывайте старое значение как новое: поясните временный статус соответствующим состоянием приложения.

Цвет может выделить срочное событие, но не должен быть единственным способом сообщить количество. В контексте вкладки рядом должны оставаться читаемая подпись и понятная иконка. Убедитесь, что число различимо в светлой и тёмной теме и не теряется при снижении контраста экрана. Если бейдж означает непрочитанное, это должно быть понятно из названия раздела или дополнительного описания, а не только из оттенка и положения точки.

Для экранного диктора важен смысл компонента, а не только нарисованные цифры. Проверяйте озвучивание в составе родительского элемента: пользователь должен узнать название вкладки и количество новых элементов без повторения одной и той же информации. Если визуально показано «99+», текстовое описание может объяснять, что количество превышает предел отображения. Не добавляйте одно и то же число и в подпись, и отдельный доступный элемент, если экранный диктор прочитает дубликаты.

В русском интерфейсе слово рядом с числом может менять форму: «1 сообщение», «2 сообщения», «5 сообщений». Сам бейдж лучше держать компактным числом, а полную фразу показывать в подписи, подсказке или на экране раздела. Если локализация требует других цифр или символов, ширина и центрирование могут измениться. Проверьте не только ASCII-цифры, но и выбранный локальный набор знаков, знак плюса и соседнюю подпись на устройствах и платформах, которые поддерживает продукт.

Пример: у вкладки «Входящие» есть бейдж со значением 12. При открытии раздела заголовок может уточнить «12 непрочитанных», а список отдельно группирует личные сообщения и системные события. Бейдж не обязан вместить весь текст и не должен самостоятельно объяснять его природу. Если пользователь переключил папку, измените число вместе с контекстом, иначе один маленький индикатор будет восприниматься как глобальный счёт.

Счётчик полезен лишь тогда, когда переход приводит к содержимому, которое соответствует обещанию бейджа. Если он считает непрочитанные сообщения, откройте раздел и проверьте, что нужные сообщения действительно отмечены как новые; если число сбрасывается при простом открытии, убедитесь, что это ожидаемое поведение, а не потеря данных. Для нескольких папок решите, показывает ли вкладка сумму по всем папкам или только по текущей. После нажатия на общий бейдж пользователь должен сразу видеть, как это число распределено между источниками. Проверяйте и обратный путь: прочтение одного элемента должно уменьшить счёт предсказуемо, а переход приложения в фоновый режим не должен возвращать старое число без объяснения.

Когда точное значение не меняет следующий шаг пользователя, а важен сам факт большого количества новых элементов. Если нужна точная сумма для контроля очереди, платежей или задач, покажите её в просторном текстовом месте и сохраните бейдж как краткий сигнал.

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

У цифр может быть разная ширина, поэтому переход, например, с 11 на 18 меняет композицию внутри овала. Табличные цифры уменьшают эту разницу; также помогают фиксированная высота, достаточные отступы и правило расширять бейдж от закреплённого края.

Нет: цвет может стать неразличимым при особенностях зрения, теме оформления или условиях экрана. Подпись вкладки, число и озвучиваемое описание должны вместе объяснять, что изменилось и где посмотреть детали.

Проверяйте озвучивание в составе вкладки или родительского элемента. Пользователь должен услышать название раздела и значение без лишнего повторения цифр; отдельное описание полезно, если одного визуального числа недостаточно для понимания смысла.

Только если различаются назначение, уровень срочности и действия, а состояния явно заданы. Когда ошибки требуют немедленной реакции, смешивание их с непрочитанными событиями скрывает важный сигнал; заведите отдельный тип индикатора или отдельный раздел.

Спроектируйте счётчик как связку из понятного смысла, ограничения точности, устойчивой цифровой формы и доступного описания. Проверьте его на реальных соседних элементах и при обновлении значения, а не только в отдельном макете. Если вы разрабатываете собственный визуальный стиль, попробуйте создать кириллический шрифт на Fontgenerator и испытайте его на цифрах и коротких подписях мобильного интерфейса: https://fontgenerator.ru/.