Трамвай «Синара-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 фактически с нуля.
Сложность
кастомизации
кастомизации
Важный аспект, озвученный на старте — быть готовым оперативно вносить изменения, дополнять функциональными элементами, либо упразднять невостребованные по результатам тестов, пусконаладки, эксплуатации. Сложная и завершённая композиция эстетически и эргономически более выигрышна, но является слишком закрытой моделью, чтобы легко трансформировать в ней что-либо.
Невозможность
масштабирования
масштабирования
«Превратить» даже из прототипа (не говоря уже про статическое изображение) такие решения в программный код, без риска, что где-то что-то не «поплывёт» на экране — довольно трудоёмко.
Трудоёмкость
вёрстки
вёрстки
Прототипы своевременно позволили выявить проблемные точки:
Flexibility
This method allows us to achieve success in problems of all levels.
Experience
Each member of our team has at least 5 years of legal experience.
Support
Our managers are always ready to answer your questions.
Presents
We like to make people happy. We give special gifts for our clients' birthdays.
Efficiency
We care about our clients' time. Just give us a call, and we will help you with all the questions.
Personal response depends on the viewer’s individual thoughts and values. This might be sometimes in conflict with cultural values. Also when a viewer has viewed an image from a personal perspective, it is then hard to change the viewer’s perception of the image, even though the image can be seen in other ways.
An image’s view can arise from the history of the use of media. Some images are viewed differently due to the use of different (new) media throughout times. For example: The result of using the computer to edit images (e.g. Photoshop) is quite different when comparing images that are made and edited by hand.
The cultural perspective involves the identity of symbols. The uses of words that are related to the image, the use of heroes in the image, etc. are the symbolization of the image. The cultural perspective can also be seen as the semiotic perspective.
Personal response depends on the viewer’s individual thoughts and values. This might be sometimes in conflict with cultural values. Also when a viewer has viewed an image from a personal perspective, it is then hard to change the viewer’s perception of the image, even though the image can be seen in other ways.
An image’s view can arise from the history of the use of media. Some images are viewed differently due to the use of different (new) media throughout times. For example: The result of using the computer to edit images (e.g. Photoshop) is quite different when comparing images that are made and edited by hand.
The cultural perspective involves the identity of symbols. The uses of words that are related to the image, the use of heroes in the image, etc. are the symbolization of the image. The cultural perspective can also be seen as the semiotic perspective.
