Трамвай «Синара-71233»
UI управления и диагностики
001
Трёхсекционный низкопольный трамвай «Синара-71233» — собственная конструкторская разработка и новинка Группы Синара. Объединяя передовые технические решения и инновации, трамвай создан подразделением группы «Синара – Городской рельсовый транспорт».
О проекте
Системы управления и автономного хода созданы аккредитованной IT-компанией «Алгоритм С» («Синара Алгоритм»)
Разработка подобного трамвая с нуля — это гигантская, многоплановая работа, в которую вовлечено много талантливых людей — уникальных специалистов. Здесь я представлю малую, но при этом немаловажную часть этой большой работы, познакомлю со своей личной зоной ответственности.
Я расскажу о разработке UI интерактивных дисплеев кабины, с помощью которых осуществляется привычный каждому водителю контроль безопасности движения, состояния транспортного средства, считывание диагностических сигналов и сигналов от пассажиров, контроль состояния механизмов, систем, токов, напряжений и узлов. А также управление посредством взаимодействия с тачскрином открытием и закрытием дверей, аппарелей, освещением и световыми приборами, климатом кабины и салона, режимами движения, активации специальных функций.
Наш UI отображается на центральном и правом мониторе из трёх, имеющихся в кабине. Помимо экранов, используемых водителем при движении, предусматриваются экраны и пользовательские сценарии для пусконаладки, внутренние экраны тонких настроек и диагностики.
Обеспечение безопасности всех участников движения, безопасности и комфорта пассажиров и водителя, удобства эксплуатации, техобслуживания и диагностики, гарантия и максимизация заявленного срока службы — приоритетная задача на всех этапах разработки, справедлива и для экранов пользовательского интерфейса.
Потрясающе интересный и вдохновляющий проект! Листайте ниже!
002
Как определить ключевые требования к проекту, принципиально новому, имея на старте минимум материалов и наработок?
Как всё начиналось
Ясно было лишь то, что требуется сделать выразительно, красиво, удобно, не как у всех, но вместе с тем, — чтобы решение не вызывало ступора у водителя непривычностью и неочевидностью.
И что важно — быть готовым в любой момент по обратной связи вносить изменения, правки, дополнения и новый функционал.
При этом какие именно приборы, значения, сигналы, функциональные кнопки должны присутствовать на экранах и на каких именно, по каким сценариям взаимодействовать с водителем и техническим персоналом — понятно было лишь гипотетически.
И что важно — быть готовым в любой момент по обратной связи вносить изменения, правки, дополнения и новый функционал.
При этом какие именно приборы, значения, сигналы, функциональные кнопки должны присутствовать на экранах и на каких именно, по каким сценариям взаимодействовать с водителем и техническим персоналом — понятно было лишь гипотетически.
Было известно, что наша система управления будет задействована на двух из трёх интерактивных дисплеев (центральном и правом), разрешение которых всего лишь 1024 × 768 px.
Существовали рекомендации (которые еще даже не ГОСТы) по цветам, контрастам и размерам шрифтов. Очевидной была и необходимость придерживаться общепринятых условно-графических обозначений ISO для индикации сигналов узлов и устройств.
Существовали рекомендации (которые еще даже не ГОСТы) по цветам, контрастам и размерам шрифтов. Очевидной была и необходимость придерживаться общепринятых условно-графических обозначений ISO для индикации сигналов узлов и устройств.
К началу работ над UI управления и диагностики существовали только лишь 3d-рендеры трамвая и выставочный образец водительской кабины, для дисплеев которой моим коллегой был создан предварительный эскиз компоновки приборов, индикаций и кнопок, некоторые из которых были активны и управляли демонстрационными функциями.
003
Следующий этап предваряло чтение документации, погружение в историю создания, эксплуатации
и управления как трамваев, так и общественного и любого другого транспорта и движущихся механизмов в целом.
и управления как трамваев, так и общественного и любого другого транспорта и движущихся механизмов в целом.
Исследования и поиск
В итоге для отрисовки проекций трамвая и элементов мнемосхем, а также для компоновочного эскизирования было решено использовать один из популярных векторных редакторов.
Для создания дизайн-системы, компонентов и их состояний, финальной сборки UI и пользовательских сценариев — Figma.
В том числе за счёт кроссплатформенности и возможности командной работы on-line.
Для создания дизайн-системы, компонентов и их состояний, финальной сборки UI и пользовательских сценариев — Figma.
В том числе за счёт кроссплатформенности и возможности командной работы on-line.
3
Эскизирование
Карандашом на бумаге, в графических редакторах и даже стилусом на телефоне.
Выбор подходящего для реализации инструментария.
2
Исследования, опросы интервью
Личные наблюдения вживую за работой водителей различных видов транспорта, обзоры специализированных on-line форумов, участие в дискуссиях и обсуждениях.
Опросы водителей общественного транспорта.
Обратная связь от друзей по всему миру на просьбы снять и прислать фото и видеоматериалы работы водителей разных трамваев в городах, где они живут или путешествуют.
И даже интервьюирование водителей китайского автопрома, который славится повсеместной заменой традиционных приборов сенсорными панелями, а также разнообразием и экзотичностью решений.
1
Подбор референсов
Подбор референсов с помощью всех доступных источников и on-line сервисов.
Изучение аналогов, как исторически устоявшихся, так и современных решений конкурентов среди которых изделия: ПК-ТС, УКВЗ, УТМ, Alstom, Škoda, Pesa, CAF, CRRC, Siemens.
004
Следовало учитывать:
01
При всей важности оценки UI водителем, принимать работу, подписывать документы и контракты будут представители властных структур, которых важно впечатлить эстетически.
02
Размеры двух используемых интерактивных тачскрин-экранов с разрешением всего 1024×768 и их положение относительно водителя в кабине, возможность видеть информацию, комфортно дотягиваться до элементов управления, исключая мискликинг.
03
Особенности эксплуатации и требования к безопасности: тряска, засветка, отвлекающие факторы, необходимость следить за движением.
Предстояло определиться с требуемым комплектом приборов и индикаторов, их внешним видом, цветом, компоновкой. Подготовить набор условно графических обозначений. Создать специализированные элементы UI.
И всё это связать очевидными пользовательскими сценариями.
И всё это связать очевидными пользовательскими сценариями.
Отличительная особенность проекта — это ключевое требование создать не просто пользовательский интерфейс для решения разовых задач абстрактного среднестатистического пользователя, к примеру, таких, как он-лайн покупка, вызов такси, онлайн-презентация.
Перед нами стояла необходимость разработать рабочий инструментарий для регулярного и длительного взаимодействия, ориентируясь на водителя общественного транспорта в первую очередь.
Перед нами стояла необходимость разработать рабочий инструментарий для регулярного и длительного взаимодействия, ориентируясь на водителя общественного транспорта в первую очередь.
и постановка задач
Определение проблем
005
И, разумеется, не обошлось без «поиграть со шрифтами» с их доработкой и созданием моноширинных для отображения цифровых значений приборов
Разработаны и реализованы в качестве компонентов стрелочные приборы, индикаторы и их состояния
Более 150 условно-графических обозначений (иконок) отрисованы в единообразном виде: как стандартные ISO, так и специально разработанные с нуля
Подготовлены компоненты кнопок, табов, инпутов прочих элементов UI в различных состояниях
Проработана цветовая схема
Разрабатываемый UI трамвая вовсе не ограничивается двумя экранами водителя. Также необходимы и сервисные экраны настроек разного уровня, тестов, диагностики, сигналов, работы узлов и блоков, разнообразных технических параметров.
Требования юзабилити предусматривают применение консистентных решений, чёткой организации и иерархии элементов UI, визуального однообразия компонентов и внедрения очевидных поведенческих паттернов в сценарии. Для этих целей, параллельно с процессом эскизирования, была создана дизайн-система, основой которой послужили собственные предыдущие наработки для экранов управления других машин компании Синара
Требования юзабилити предусматривают применение консистентных решений, чёткой организации и иерархии элементов UI, визуального однообразия компонентов и внедрения очевидных поведенческих паттернов в сценарии. Для этих целей, параллельно с процессом эскизирования, была создана дизайн-система, основой которой послужили собственные предыдущие наработки для экранов управления других машин компании Синара
Создание дизайн-системы
005
И, разумеется, не обошлось без «поиграть со шрифтами» с их доработкой и созданием моноширинных для отображения цифровых значений приборов
Разработаны и реализованы в качестве компонентов стрелочные приборы, индикаторы и их состояния
Более 150 условно-графических обозначений (иконок) отрисованы в единообразном виде: как стандартные ISO, так и специально разработанные с нуля
Подготовлены компоненты кнопок, табов, инпутов прочих элементов UI в различных состояниях
Проработана цветовая схема
Разрабатываемый UI трамвая вовсе не ограничивается двумя экранами водителя. Также необходимы и сервисные экраны настроек разного уровня, тестов, диагностики, сигналов, работы узлов и блоков, разнообразных технических параметров.
Требования юзабилити предусматривают применение консистентных решений, чёткой организации и иерархии элементов UI, визуального однообразия компонентов и внедрения очевидных поведенческих паттернов в сценарии. Для этих целей, параллельно с процессом эскизирования, была создана дизайн-система, основой которой послужили собственные предыдущие наработки для экранов управления других машин компании Синара
Требования юзабилити предусматривают применение консистентных решений, чёткой организации и иерархии элементов UI, визуального однообразия компонентов и внедрения очевидных поведенческих паттернов в сценарии. Для этих целей, параллельно с процессом эскизирования, была создана дизайн-система, основой которой послужили собственные предыдущие наработки для экранов управления других машин компании Синара
Создание дизайн-системы
006
Безусловно — панель управления трамвая нагружена специфическими приборами и индикаторами.
Тем важнее было обеспечить лёгкую точку входа в UI водителю и обслуживающему персоналу.
Тем важнее было обеспечить лёгкую точку входа в UI водителю и обслуживающему персоналу.
Почему интерфейс управления трамваем обязан выглядеть, как UI станка с ЧПУ, а не как приборная панель транспортного средства?
При изучении аналогов возник важный
вопрос:
вопрос:
Блок приборов центрального экрана — центр притяжения, вовлекающий в свою орбиту все остальные элементы, определяющий стиль и компоновку всего UI. С него и началось создание прототипов, которые, благодаря современному инструментарию, собирать можно быстро и очень наглядно, и на таких рабочих моделях проводить различные тесты: оттачивать функциональность, выявлять проблемные зоны, проверять гипотезы.
Прототипирование
В стремлении выделиться, рождались необычные формы
Апробировались нестандартные приёмы
Применялись непривычные композиционные решения
Возврат к радиальным шкалам с центральной стрелкой представлялся более целесообразным.
Вывод по результатам:
Сложность перспективной кастомизации, в том числе возможности простой смены «скинов». Желание внедрить такую возможность потребует перерисовки и повторной вёрстки ключевых элементов UI фактически с нуля.
Сложность
кастомизации
кастомизации
Важный аспект, озвученный на старте — быть готовым оперативно вносить изменения, дополнять функциональными элементами либо упразднять невостребованные по результатам тестов, пусконаладки, эксплуатации. Сложная и завершённая композиция эстетически и эргономически более выигрышна, но является слишком закрытой моделью, чтобы легко трансформировать в ней что-либо.
Невозможность
масштабирования
масштабирования
«Превратить» даже из прототипа (не говоря уже про статическое изображение) такие решения в программный код, без риска, что где-то что-то не «поплывёт» на экране — довольно трудоёмко.
Трудоёмкость
вёрстки
вёрстки
Прототипы своевременно позволили выявить проблемные точки:
007
В качестве рабочей версии центрального экрана был принят компоновочный вариант с двумя главными радиальными аналоговыми приборами, так, чтобы в целом отличаться от получившей распространение одноприборной схемы и больше походить на автомобильную приборную панель.
Beta
версия
Нашлось место и для обязательной диагностической информации.
Индикаторы дискретных сигналов и числовых значений
токов бортовой сети
токов бортовой сети
Область диагностических сообщений
с возможностью пролистывать поступившие (если их несколько)
и перейти к общему экрану диагностических сообщений
с возможностью пролистывать поступившие (если их несколько)
и перейти к общему экрану диагностических сообщений
Напряжения преобразователей ПТАД,
токи и напряжения АКБ и контактной сети
Положение реверсора
и позиция контроллера водителя
и позиция контроллера водителя
Спидометр и Ваттметр тяги / торможения с интегрированными шкалами значений запаса хода, уровня заряда батареи или токов АКБ / сети
Приборы, сигналы и элементы управления разнесены в соответствии со строгой логикой: на центральном экране — всё, что связано с безопасностью движения, на правом — всё, что обеспечивает комфорт водителя и пассажиров.
Изображение дверей и часть мнемосхемы связаны с кнопками и являются единой активной областью управления открытием / закрытием
Блок кнопок управления отоплением, вентиляцией и кондиционированием разбит на три области и, как наиболее используемый, размещён в нижней части, чтобы у водителя был упор для руки
Мнемосхема трамвая в двух переключаемых проекциях с полной информацией о температуре салона и улицы, состоянии обогревателей, токоприёмника, дверей, песочниц, сигналов от пассажиров, срабатывания стояночных и электромагнитных тормозов
Блок кнопок управления освещением и режимами
...и сценарии взаимодействия с выпадающими меню настроек с помощью тачскрин-дисплея.
Были тщательно проработаны сценарии отработки поступающих сигналов от пассажиров и управления дверьми...
008
Представленные разработки прошли важную проверку первыми лицами государства, области, города, руководителями серьёзных предприятий, коллегами и конкурентами, журналистским сообществом, профильными блогерами, зарубежными гостями и простыми людьми — будущими водителями и пассажирами. Выход в свет — состоялся! И трамвай, и его кабина управления с проработанными интерфейсами тачскрин дисплеев стали интригой выставки и заслуженно вызывали профессиональную гордость у всего нашего коллектива. Вот, посмотрите, как это было и познакомьтесь с некоторыми публикациями об этом знаковом событии.
8 июля 2025 года полностью собранный трамвай Синара 71-233 встречал в Екатеринбурге гостей выставки «Иннопром 2025». Трамвай был впервые представлен целиком, одновременно с этим — был представлен и его UI управления и диагностики. Любой желающий мог сесть в кресло водителя и опробовать удобство и функциональность интерфейса. Работоспособные экраны, а не просто картинка сообщали всему вагону совершенство завершённости.
Наконец-то вживую были проверены гипотезы, окончательно обозначен фокус на доработки, определены необходимые акценты на сильные стороны и удачные решения.
Наконец-то вживую были проверены гипотезы, окончательно обозначен фокус на доработки, определены необходимые акценты на сильные стороны и удачные решения.
Иннопром 2025
Выход в свет:
Панель управления
Иннопром 2025
В кабине водителя
Трамвай Синара 71-233
Доставка на Иннопром 2025
Представленные разработки прошли важную проверку первыми лицами государства, области, города, руководителями серьёзных предприятий, коллегами и конкурентами, журналистским сообществом, профильными блогерами, зарубежными гостями и простыми людьми — будущими водителями и пассажирами. Выход в свет — состоялся! И трамвай, и его кабина управления с проработанными интерфейсами тачскрин дисплеев стали интригой выставки и заслуженно вызывали профессиональную гордость у всего нашего коллектива. Вот, посмотрите, как это было и познакомьтесь с некоторыми публикациями об этом знаковом событии.
009
И по итогу выкристаллизовались финальные требования к интерфейсу: были определены необходимые для отображения сигналы, параметры, значения как для режима пусконаладки, так и для режима эксплуатации. Наибольшим изменениям подвергся центральный экран.
Компоновка изменилась — оставлен лишь один доминирующий прибор спидометра в центре с индикацией уровня заряда батарей, добавлен одометр.
К индикации положения реверсора добавлена синхронизированная шкала индикации реальной позиции ПТАД для выявления расхождений и ошибок.
Добавлены приборы показаний токов бортовой сети для АКБ и БПН, индикация температуры и невязки напряжений ПТАД, значения рекуперации и общего потребления энергии.
Составлена полная экспликация элементов UI и компоновки.
Ежедневно по результатам тестов, проверок, обкатки поступала обратная связь: наблюдения, требования, рекомендации, мнения, пожелания. Все фиксировалось, подвергалось тщательной обработке и анализу.
Летом 2026 наш трамвай из выставочного образца стал превращаться в полноценную рабочую машину —
Начался процесс пусконаладки.
Начался процесс пусконаладки.
Пусконаладка
Добавлены значения общей рекуперации и потребления электроэнергии
Добавлены показания токов бортовой сети АКБ 1,2 и БПН 1,2
Добавлена шкала индикации реальной позиции ПТАД: при несовпадении с положением контроллера - подсвечивает позицию красным
Спидометр с интегрированной шкалой с текущим значением заряда аккумулятора и индикацией состояния батареи размещён в центре, слева и справа от него соответственно показания токов и напряжений преобразователей ПТАД, показания токов бортовой сети, напряжения и токи контактной сети, напряжение АКБ
Центральный экран после доработок в режиме Пусконаладки
Обкатка и начало эксплуатации
71-233 на улицах города
Синара 71-233 на улицах Екатеринбурга
Синара 71-233 на улицах Екатеринбурга
Обкатка трамвая 71-233
Тестирование:
Тест трёхфазного
транзистора
Тест трёхфазного
транзистора
Тестирование:
Тест входов
Тест входов
Экран основных
настроек
настроек
Тестирование:
Автоматический
тест инвертора
Автоматический
тест инвертора
Управление отопительным
и вентиляционным оборудованием
(Таблица)
и вентиляционным оборудованием
(Таблица)
Блоки:
Проверка аппаратов
Проверка аппаратов
Управление отопительным
и вентиляционным оборудованием
(Мнемосхема)
и вентиляционным оборудованием
(Мнемосхема)
Дополнительно для управления настройками UI, диагностики и тонкой настройки обогрева и вентиляции, для работы с диагностическими сообщениями и сигналами, для анализа работы блоков, проведения тестов оборудования, логирования и архивации данных также было разработано около 20-ти сервисных экранов и пользовательских сценариев. Увы, далеко не все из них могут быть опубликованы открыто.
Экраны управления движением, освещением, климатом, посадкой-высадкой пассажиров — это то, что всегда “на поверхности”.
Но наиболее сложное и важное — всегда остаётся “за кадром”.
Но наиболее сложное и важное — всегда остаётся “за кадром”.
010
За кадром
Движение
Пусконаладка
Диагностика
Обучение
Планируется расширить возможности для кастомизации интерфейса: добавить возможность загружать и выбирать темы стилизации приборной панели, добавить настройки цветовых схем, включая повышенную контрастность и ночную для обеспечения максимального комфорта водителя, безопасности движения, повышения юзабилити и сокращения времени на техническое обслуживание.
В дальнейшем предполагается внедрение функций выбора компоновки и отображения актуальных приборов в зависимости от текущего функционального режима:
011
Развитие и перспективы
Варианты упрощённой компоновки в режиме "Движение по городу" без избыточных для данного случая приборов, шкал и сигналов.
Вот как это может быть реализовано:
Варианты альтернативной темы в режиме "Движение по городу" — стилизованный оммаж на тему приборной панели классики Tatra T-3.
012
26.08.2026
Дизайнер отдела микропроцессорных систем управления “Алгоритм-С” (“Синара-Алгоритм”)
Алексей Янковский
Новое и уникальное не рождается в мгновенье по щелчку пальцев. Преодолено и еще предстоит преодолеть множество трудностей.
Представленный результат — лишь малая осязаемая часть огромной общей работы большого увлечённого коллектива, которому я бесконечно благодарен за уникальную возможность участвовать в столь вдохновляющем проекте.
Желая удачной судьбы нашему трамваю, пусть даже это только стартовая ступень, как бы она ни сложилась — я с гордостью осознаю, сколь это значимая веха в одной большой прекрасной общей истории.
Представленный результат — лишь малая осязаемая часть огромной общей работы большого увлечённого коллектива, которому я бесконечно благодарен за уникальную возможность участвовать в столь вдохновляющем проекте.
Желая удачной судьбы нашему трамваю, пусть даже это только стартовая ступень, как бы она ни сложилась — я с гордостью осознаю, сколь это значимая веха в одной большой прекрасной общей истории.
Впечатления
© 2026 Алгоритм С
620014, Свердловская область, г. Екатеринбург, пр-кт Ленина, стр. 8
Привет, я — Алексей Янковский, дизайнер аккредитованной IT компании «Алгоритм-С» («Синара-Алгоритм»). Я занимаюсь созданием технических интерфейсов управления железнодорожной техникой, разрабатываю UI и пользовательские сценарии диагностического ПО.
Данный ресурс посвящён одному из таких кейсов: разработке UI управления и диагностики тачскрин дисплеев кабины трамвая Синара 71-233.
Желаю приятного просмотра!
Желаю приятного просмотра!
Если вы хотите поделиться своим мнением или узнать обо мне больше, добро пожаловать на мой личный веб-сайт:
