Дизайн-кейс · 2026

Vigilo. Спокойный интерфейс для тревожных данных

Мобильное приложение, которое переводит новости о 239 странах в одну понятную цифру — и объясняет, что она значит для вашей поездки.

Роль
Продуктовый дизайн, UX-письмо, дизайн-система
Платформы
iOS · Android · Web
Объём
35 экранов × 2 темы × 2 платформы
Срок
3 недели
01 · Проблема

Информации об опасности много. Понимания — ноль

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

Мы проинтервьюировали 18 человек — туристов, релокантов и тех, кто летает в командировки. Три вещи повторялись у всех.

14/18
Не понимают, насколько «опасно»
«Пишут „нестабильная обстановка“. Это что — не ехать? Или просто не ходить на митинги?»
Ольга, отпуск с детьми
11/18
Тревогу запускает семейный чат
«Мама переслала видео. Я полчаса гуглила, оказалось — 2019 год.»
Марина, дизайнер
16/18
Не знают срочный номер
«В Грузии 112? В Таиланде? Я честно не знаю. Надеюсь, не пригодится.»
Тимур, фотограф
02 · Принцип

Цвет — только сигнал. Всё остальное молчит

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

1
Спокойно
0–27
2
Внимание
28–39
3
Осторожно
40–59
4
Опасно
60–84
5
Критично
85+
Одна карточка — одна мысль
Никаких композитных блоков. Если нужно два вывода — две карточки.
Красный только для SOS
Экстренный красный совпадает с уровнем 4 намеренно: он значит «действуй сейчас».
Источник рядом с фактом
Индекс без источников — просто число. Всегда показываем откуда и когда.
Спокойный голос
Без восклицаний даже на уровне 5. Факты, район, время, действие.
03 · Главная

Сначала — где вы. Потом — куда едете

Главная построена вокруг двух вопросов, которые человек задаёт себе на самом деле: «здесь спокойно?» и «а там, куда я лечу?». Первая карточка — текущая локация с индексом, динамикой за сутки и срочным номером страны, в которой вы физически стоите. Вторая — ближайшая поездка с прогнозом.

Отслеживаемые страны, лента «сегодня в мире» и помощник — ниже. Ничего не мигает: живёт только точка «вы здесь».

Индекс в кольце
Срочный номер по геолокации
Меню — жидкое стекло
04 · Страна

Одна страница отвечает на «ехать или нет» за десять секунд

Фото-шапка с уровнем, восемь категорий угроз в сетке, карта по районам, новости за сегодня, архив за 12 месяцев и — только в конце — покупка отчёта. Порядок принципиальный: сначала бесплатное понимание, потом предложение. Курорт спокоен, а столица нет — видно с первого экрана.

Кольцо вместо маскота
Пробовали персонажа, меняющего эмоции по уровню. Отказались: он развлекал, а не информировал. Кольцо с цифрой читается за секунду.
Карта — события, а не подложка
Реальная карта отвлекает деталями. На схеме — только места, где за неделю происходили подтверждённые события.
Гостевой просмотр
Ссылка на страну открывает всё бесплатное без регистрации. Архив и отчёт — за стеклом с одним действием.
05 · Помощник

Не чат-бот, а проверка слухов

Самый частый триггер тревоги — пересланное сообщение в семейном чате. Поэтому главный сценарий помощника — не «спросить что угодно», а вставить слух и получить вердикт: правда, частично, слух. С цветом уровня и списком источников. Ответ — карточка, а не поток текста.

Второй сценарий — «безопасен ли район ночью». Ответ с часами и улицами, а не «будьте осторожны».

06 · Отчёт

Документ, который хочется читать

Отчёт — платный продукт, и он должен выглядеть своих денег. Редакционная вёрстка: нумерованные разделы, крупные цитаты-выводы, карта районов, прогноз на 30 дней с областью доверия, контакты. Тот же дизайн-язык, что в приложении, но с воздухом журнала.

Сохраняется офлайн. Срочный номер в конце — не абстрактный, а той страны, где человек стоит сейчас.

07 · Поездка и SOS

Календарь, который показывает риск по дням

При создании поездки под каждой датой — точка цвета прогноза. Выбор дат перестаёт быть лотереей. Экран поездки собирает маршрут, чек-лист и доверенных контактов. SOS — единственный экран, где красный доминирует: огромный номер, звонок одним тапом, «Я в порядке» с геопозицией, фразы на местном языке. Работает без сети.

08 · Состояния

Ошибка никогда не отключает SOS

Приложение про безопасность обязано работать, когда всё ломается. Пустые состояния объясняют пользу одним предложением и дают одно действие. Ошибки говорят, что показываем вместо данных и когда обновимся. Полный отказ сервиса ведёт на срочную помощь. Скелетоны, офлайн-баннер, гостевой просмотр по ссылке — всё спроектировано, не «потом».

09 · Две платформы

Один смысл, два родных языка

iOS: Onest, тонкие обводки, плавающее меню из жидкого стекла поверх контента. Android: Material 3 Expressive — Manrope, тональные поверхности без обводок, кнопки-пилюли, навигационная панель с индикатором. Шкала риска, структура экранов и тексты — общие. Пользователь, сменивший телефон, не переучивается.

iOS
Android
10 · Система

Мало правил, но жёстких

Две темы на семи токенах каждая. Четыре радиуса. Семь типографических стилей. Пять компонентов, из которых собрано всё. Голос — три правила. Полная система с токенами и примерами — отдельным документом.

Фон · светлая
#F4F3EF
тёплый, не белый
Фон · тёмная
#0B0E13
почти чёрный с синевой
Акцент
#0E9C90 / #3ED3C3
действие и покупка
Шрифт
Onest
кириллица, 400–800
Радиусы
18 · 24 · 28 · 999
кнопка · карточка · лист · пилюля
Сетка
4px · поля 18
зазор 12–14, паддинг 16–18
Голос
Спокойно, без восклицаний
Даже критичный уровень описываем фактами.
«Не планируйте поездку. Если вы уже в стране — знайте ближайшее укрытие.»
Голос
Что это значит для вас
Каждое событие сопровождается выводом: район, время, действие.
«Обходите места, где собираются люди, и не снимайте вблизи полиции.»
Голос
Источник рядом с фактом
Откуда данные и когда обновлены — всегда видно.
«JAMnews · 2 источника · 13 сентября» под каждой строкой.
11 · Результат

Что сдано и чему научились

35
экранов, каждый в двух темах и на двух платформах
12
состояний: пусто, ошибки, офлайн, гость, загрузка
7
токенов на тему — вся палитра
0
декоративных иконок и градиентов
Убирать — сложнее, чем добавлять
Маскот, реальная карта, «искры» ИИ — всё это выглядело хорошо по отдельности и мешало вместе. Каждое удаление делало продукт честнее.
Состояния — это продукт
Половина доверия к приложению про безопасность рождается в момент, когда нет сети. Спроектировать это первым, а не последним.
Спокойствие — дизайн-решение
Не тон голоса и не палитра отдельно, а система: что кричит, что молчит, и почему. Когда кричит только уровень — ему верят.
Посмотреть вживую
Все экраны интерактивны — можно пройти приложение целиком.
Открыть приложениеОткрыть в TelegramМетодология индексаНа главную