Satellite

Подробнее о процессе

Откуда появилась идея демо

Для выставки компании нужен был способ показать свои технические возможности на понятном примере.

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

Так появилась идея собрать отдельное демо, где результат расчётов можно увидеть на глобусе и карте.

Формат выставки сразу задавал ограничения. У человека есть несколько минут у стенда, он впервые видит продукт и заранее ничего о нём не знает. Поэтому демо должно было быстро объяснять само себя.

Кто будет смотреть демо

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

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

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

Моя роль

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

Я отвечала за то, как всё это будет работать и выглядеть в интерфейсе.

В моей зоне ответственности были:

• UX/UI всех экранов
• логика взаимодействия внутри экранов
• поведение панелей и объектов при выборе
• визуальное представление аппаратов, орбит и зон
• состояния и ошибки
• пересечения объектов и зон покрытия
• адаптация дизайн-системы под карту и глобус
• сверка решений с frontend-разработчицей и упрощение того, что не успевали или не могли реализовать в текущем виде
• сопровождение дизайна во время разработки

В проекте работали аналитик, математик, frontend-разработчица и я. Из-за разного контекста мы иногда по-разному понимали одни и те же сущности и состояния.

Во время проектирования я много уточняла логику с аналитиком и математиком, чтобы такие расхождения не доезжали до готового интерфейса.

Аналоги

Пользовательских данных у проекта не было, поэтому на старте я изучила существующие решения с похожей механикой, в том числе 3D Satellite Tracker и KeepTrack.

Я смотрела, как в них устроены глобус, отображение аппаратов, траекторий и большого количества объектов.

У профессиональных решений высокая плотность информации. На экране одновременно находятся десятки объектов, орбиты, подписи и дополнительные данные.

Для нашего демо такой подход не подходил. На выставке человеку нужно было быстро понять, на что он смотрит.

Поэтому я сформулировала для себя несколько правил:

• не перегружать глобус объектами и подписями
• держать выбранный аппарат главным объектом на экране
• показывать связанные с ним траекторию и зону
• технические параметры хранить рядом, но не выводить их на первый план

Ключевые решения

1. Глобус

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

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

Поэтому поверхность упростили. Оставили узнаваемые контуры материков и минимум деталей.

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

2. Траектории и движение аппаратов

Движение было одной из самых важных частей демо. Оно позволяло сразу показать, что положение аппарата меняется во времени и связано с рассчитанной траекторией.

Я отдельно прорабатывала визуализацию орбиты, положение аппарата относительно поверхности и поведение объекта во время движения вокруг глобуса.

Изначально графики здесь было больше. По ходу разработки часть эффектов пришлось убрать из-за производительности и сроков.

3. Пересечение объектов

В демо планировалось около десяти аппаратов. Даже при таком количестве метки на глобусе периодически оказываются рядом или накладываются друг на друга. То же самое происходит с зонами покрытия.

Я отдельно проработала эти состояния.

При пересечении метки должны были оставаться различимыми и доступными для выбора. Для зон было важно сохранить понимание, к какому аппарату относится каждая из них.

Эти случаи я учитывала сразу в макетах, потому что при реальном движении объектов они возникают регулярно.

4. Ограничения разработки

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

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

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

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

Например, метки городов и объектов в финальной версии стали ярко-жёлтыми. Решение довольно простое, зато метка остаётся заметной на разных участках глобуса. Более аккуратную систему для них мы сделать уже не успели.

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

Что вошло в демо

В финальной версии можно было:

• смотреть положение и траекторию аппаратов на глобусе
• переключаться между глобусом и картой
• находить аппарат по названию или идентификатору
• открывать карточку объекта с дополнительными данными
• включать зоны покрытия
• выбирать точку на Земле и смотреть доступные для неё аппараты
• отображать запретные и специальные зоны
• видеть изменение состояния аппарата при пересечении с ограниченной областью
• выбирать дату и время и смотреть состояние системы в нужный момент

Для этих сценариев я проработала состояния выбора, предпросмотра, пересечений, отображения нескольких объектов и переходов между режимами.

Результат

За четыре месяца команда собрала рабочее демо и представила его на выставке «Связь» 7–10 апреля 2026 года.

Большая часть запланированных сценариев вошла в финальную версию. Демо работало на стенде и было доступно посетителям выставки.

Рабочее демо: satellite.vidau.org

По умолчанию оно открывается без аппаратов. Их нужно добавить через поиск.