Трамвай «Синара-71233»
UI управления и диагностики

001
Трёхсекционный низкопольный трамвай «Синара-71233» — собственная конструкторская разработка и новинка Группы Синара. Объединяя передовые технические решения и инновации, трамвай создан подразделением группы «Синара – Городской рельсовый транспорт».

О проекте

Системы управления и автономного хода созданы аккредитованной IT-компанией «Алгоритм С» («Синара Алгоритм»)
Разработка подобного трамвая с нуля — это гигантская, многоплановая работа, в которую вовлечено много талантливых людей — уникальных специалистов. Но здесь я представлю малую, но при этом немаловажную часть этой большой работы, познакомлю со своей личной зоной ответственности.
Я расскажу о разработке UI интерактивных дисплеев кабины, с помощью которых осуществляется привычный каждому водителю контроль безопасности движения, состояния транспортного средства, считывание диагностических сигналов и сигналов от пассажиров, контроль состояния механизмов, систем, токов, напряжений и узлов. А так же управление посредством взаимодействия с тачскрином открытием и закрытием дверей, аппарелей, освещением и световыми приборами, климатом кабины и салона, режимами движения, активации специальных функций.
Наш UI отображается на центральном и правом мониторе из трёх, имеющихся в кабине. Помимо экранов, используемых водителем при движении, предусматриваются экраны и пользовательские сценарии для пусконаладки, внутренние экраны тонких настроек и диагностики.
Обеспечение безопасности всех участников движения, безопасности и комфорта пассажиров и водителя, удобства эксплуатации, техобслуживания и диагностики, гарантия и максимизация заявленного срока службы — приоритетная задача на всех этапах разработки, справедлива и для экранов пользовательского интерфейса.
Потрясающе интересный и вдохновляющий проект! Листайте ниже!
002
Как определить ключевые требования к проекту, принципиально новому, имея на старте минимум материалов и наработок?

Как всё начиналось

Ясно было лишь то, что требуется сделать выразительно, красиво, удобно, ни как у всех, но вместе с тем, — чтобы решение не вызывало ступора у водителя непривычностью и неочевидностью.
И что важно — быть готовым в любой момент по обратной связи вносить изменения, правки, дополнения и новый функционал.
При этом какие именно приборы, значения, сигналы, функциональные кнопки должны присутствовать на экранах и на каких именно, по каким сценариям взаимодействовать с водителем и техническим персоналом — понятно было лишь гипотетически.
Было известно, что наша система управления будет задействована на двух из трёх интерактивных дисплеев (центральном и правом), разрешение которых всего лишь 1024 × 768 px.
Существовали рекомендации (которые еще даже не ГОСТы) по цветам, контрастам и размерам шрифтов. Очевидной была и необходимость придерживаться общепринятых условно-графических обозначений ISO для индикации сигналов узлов и устройств.
К началу работ над UI управления и диагностики существовали только лишь 3d-рендеры трамвая и выставочный образец водительской кабины, для дисплеев которой моим коллегой был создан предварительный эскиз компоновки приборов, индикаций и кнопок, некоторые из которых были активны и управляли демонстрационными функциями.
003
Следующий этап предваряло чтение документации, погружение в историю создания, эксплуатации
и управления как трамваев, так и общественного и любого другого транспорта и движущихся механизмов в целом.

Исследования и поиск

В итоге для отрисовки проекций трамвая и элементов мнемосхем, а так же для компоновочного эскизирования было решено использовать один из популярных векторных редакторов.
Для создания дизайн-системы, компонентов и их состояний, финальной сборки 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, визуального однообразия компонентов и внедрения очевидных поведенческих паттернов в сценарии. Для этих целей, параллельно с процессом эскизирования была создана дизайн-система, основой которой послужили собственные предыдущие наработки для экранов управления других машин компании Синара

Создание дизайн-системы

005
И разумеется не обошлось без «поиграть со шрифтами» с их доработкой и созданием моноширинных для отображения цифровых значений приборов
Разработаны и реализованы в качестве компонентов стрелочные приборы, индикаторы и их состояния
Более 150 условно-графических обозначений (иконок) отрисованы в единообразном виде: как стандартные ISO, так и специально разработанные с нуля
Подготовлены компоненты кнопок, табов, инпутов прочих элементов UI в различных состояниях
Проработана цветовая схема
Разрабатываемый UI трамвая вовсе не ограничивается двумя экранами водителя. Так же необходимы и сервисные экраны настроек разного уровня, тестов, диагностики, сигналов, работы узлов и блоков, разнообразных технических параметров.
Требования юзабилити предусматривают применение консистентных решений, чёткой организации и иерархии элементов UI, визуального однообразия компонентов и внедрения очевидных поведенческих паттернов в сценарии. Для этих целей, параллельно с процессом эскизирования была создана дизайн-система, основой которой послужили собственные предыдущие наработки для экранов управления других машин компании Синара

Создание дизайн-системы

006
Безусловно — панель управления трамвая нагружена специфическими приборами и индикаторами.
Тем важнее было обеспечить лёгкую точку входа в UI водителю и обслуживающему персоналу.

Почему интерфейс управления трамваем обязан выглядеть, как UI станка с ЧПУ, а не как приборная панель транспортного средства?

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

Прототипирование

В стремлении выделиться, рождались необычные формы
Апробировались нестандартные приёмы
Применялись непривычные композиционные решения
Возврат к радиальным шкалам с центральной стрелкой представлялся более целесообразным.
Вывод по результатам:
Сложность перспективной кастомизации, в том числе возможности простой смены «скинов». Желание внедрить такую возможность потребует перерисовки и повторной вёрстки ключевых элементов UI фактически с нуля.
Сложность
кастомизации
Важный аспект, озвученный на старте — быть готовым оперативно вносить изменения, дополнять функциональными элементами, либо упразднять невостребованные по результатам тестов, пусконаладки, эксплуатации. Сложная и завершённая композиция эстетически и эргономически  более выигрышна, но является слишком закрытой моделью, чтобы легко трансформировать в ней что-либо.
Невозможность
масштабирования
«Превратить» даже из прототипа (не говоря уже про статическое изображение) такие решения в программный код, без риска, что где-то что-то не «поплывёт» на экране — довольно трудоёмко.
Трудоёмкость
вёрстки
Прототипы своевременно позволили выявить проблемные точки:
007
В качестве рабочей версии центрального экрана был принят компоновочный вариант с двумя главными радиальными аналоговыми приборами, так, чтобы в целом отличаться от получившей распространение одноприборной схемы и больше походить на автомобильную приборную панель.

Beta
версия

Нашлось место и для обязательной диагностической информации.
Индикаторы дискретных сигналов и числовых значений
токов бортовой сети
Область диагностических сообщений
с возможностью пролистывать поступившие (если их несколько)
и перейти к общему экрану диагностических сообщений
Напряжения преобразователей ПТАД,
токи и напряжения АКБ и контактной сети
Положение реверсора
и позиция контроллера водителя
Спидометр и Ваттметр тяги / торможения с интегрированными шкалами значений запаса хода, уровня заряда батареи или токов АКБ / сети
Приборы, сигналы и элементы управления разнесены в соответствии со строгой логикой: на центральном экране — всё, что связано с безопасностью движения, на правом — всё, что обеспечивает комфорт водителя и пассажиров.
Изображение дверей и часть мнемосхемы связаны с кнопками и являются единой активной областью управления открытием / закрытием
Блок кнопок управления отоплением вентиляцией и кондиционированием разбит на три области и, как наиболее используемый размещён в нижней части, чтобы у водителя был упор для руки
Мнемосхема трамвая в двух переключаемых проекциях с полной информацией о температуре салона и улицы, состоянии обогревателей, токоприёмника, дверей, песочниц, сигналов от пассажиров, срабатывания стояночных и электромагнитных тормозов
Блок кнопок управления освещением и режимами
...и сценарии взаимодействия с выпадающими меню настроек с помощью тачскрин-дисплея.
Были тщательно проработаны сценарии отработки поступающих сигналов от пассажиров и управления дверьми...
008
Представленные разработки прошли важную проверку первыми лицами государства, области, города. Руководителями серьёзных предприятий, коллегами и конкурентами, журналистским сообществом, профильными блогерами, зарубежными гостями и простыми людьми — будущими водителями и пассажирами. Выход в свет — состоялся! И трамвай и его кабина управления с проработанными интерфейсами тачскрин дисплеев стали интригой выставки и заслуженно вызывали профессиональную гордость у всего нашего коллектива. Вот, посмотрите как это было и познакомьтесь с некоторыми публикациями о этом знаковом событии.
8 июля 2025 года полностью собранный трамвай Синара 71-233 встречал в Екатеринбурге гостей выставки «Иннопром 2025». Трамвай был впервые представлен целиком, одновременно с этим — был представлен и его UI управления и диагностики. Любой желающий мог сесть в кресло водителя и опробовать его удобство и функциональность. Работоспособные экраны, а не просто картинка сообщали всему вагону совершенство завершённости.
Наконец-то вживую были проверены гипотезы, окончательно обозначен фокус на доработки, определены необходимые акценты на сильные стороны и удачные решения.

Иннопром 2025

Выход в свет:

Панель управления
Иннопром 2025
В кабине водителя
Трамвай Синара 71-233
Доставка на Иннопром 2025
Представленные разработки прошли важную проверку первыми лицами государства, области, города. Руководителями серьёзных предприятий, коллегами и конкурентами, журналистским сообществом, профильными блогерами, зарубежными гостями и простыми людьми — будущими водителями и пассажирами. Выход в свет — состоялся! И трамвай и его кабина управления с проработанными интерфейсами тачскрин дисплеев стали интригой выставки и заслуженно вызывали профессиональную гордость у всего нашего коллектива. Вот, посмотрите как это было и познакомьтесь с некоторыми публикациями о этом знаковом событии.
009
И по итогу выкристаллизовались финальные требования к интерфейсу: были определены необходимые для отображения сигналы, параметры, значения как для режима пусконаладки, так и для режима эксплуатации. Наибольшим изменениям подвергся центральный экран.
Компоновка изменилась — оставлен лишь один доминирующий прибор спидометра в центре с индикацией уровня заряда батарей, добавлен одометр.
К индикации положения реверсора добавлена синхронизированная шкала индикации реальной позиции ПТАД для выявления расхождений и ошибок.
Добавлены приборы показаний токов бортовой сети для АКБ и БПН, индикация температуры и невязки напряжений ПТАД, значения рекуперации и общего потребления энергии.
Составлена полная экспликация элементов UI и компоновки.
Ежедневно по результатам тестов, проверок, обкатки поступала обратная связь: наблюдения, требования, рекомендации, мнения, пожелания. Все фиксировалось, подвергалось тщательной обработке и анализу.
Летом 2006 из наш трамвай из выставочного образца стал превращаться в полноценную рабочую машину —
Начался процесс пусконаладки.

Пусконаладка

Приборы, сигналы и элементы управления разнесены в соответствии со строгой логикой: на центральном экране — всё, что связано с безопасностью движения, на правом — всё, что обеспечивает комфорт водителя и пассажиров.
Изображение дверей и часть мнемосхемы связаны с кнопками и являются единой активной областью управления открытием / закрытием
Блок кнопок управления отоплением вентиляцией и кондиционированием разбит на три области и, как наиболее используемый размещён в нижней части, чтобы у водителя был упор для руки
Мнемосхема трамвая в двух переключаемых проекциях с полной информацией о температуре салона и улицы, состоянии обогревателей, токоприёмника, дверей, песочниц, сигналов от пассажиров, срабатывания стояночных и электромагнитных тормозов
Блок кнопок управления освещением и режимами
Made on
Tilda