Разработка панели управления для проведения операций
Дата
2025
Экспертизы
Аналитика
Проектирование
Дизайн
Разработка панели управления
Тип продукта
Интерфейсы и дашборды
Отрасль
Медицина и здоровье
Клиент
«ПлазмоПром» — российский производитель медицинского оборудования. Один из ключевых продуктов компании — хирургическая установка «Плазморан», предназначенная для лечения острых и хронических ран.
Аппарат «Плазморан»
Оборудование применяется в хирургии, травматологии, дерматологии и других медицинских направлениях. Благодаря мобильности и простоте в эксплуатации «Плазморан» используют как в операционных, так и в полевых условиях. С аппаратом работают в федеральных и региональных больницах, например, в клиниках МВД, РЖД и Минобороны.
Задача
Клиент обратился к нам с запросом на разработку нового интерфейса для медицинской установки «Плазморан». Аппарат используется в полевых условиях и операционных — там, где важны скорость, понятная навигация и легкое управление. В прошлой версии экрана оставались точки роста — интерфейс требовал доработки в части безопасности и читаемости. Это могло создавать риски в экстренных ситуациях.
Заказчик выбрал агентство благодаря нашему опыту в проектах с медицинским оборудованием. Мы уже разрабатывали интерфейсы для панелей управления и цифровых инструментов для врачей.
Систему нужно было адаптировать под специфику панели управления и учесть характеристики экрана: LED с разрешением 1024x768. Также необходимо добавить интеграцию справочной информации, подсказок и обучающих материалов для новых специалистов.
Установка применяется в условиях, когда врач работает в медицинских перчатках. Поэтому интерфейсу важно оставаться читаемым даже во время запотевания экрана, бликов и при разном освещении. Доктор должен работать уверенно и безошибочно в любой ситуации.
Задачи:
- Разработать макеты экранов для всех режимов установки — автообработка, ручное управление, коагуляция и рассечение.
- Упростить навигацию и сократить количество действий.
- Обеспечить безопасность взаимодействия — крупные кнопки, понятные статусы и защита от случайного нажатия.
- Учесть эксплуатацию аппарата в медицинских перчатках и разный уровень освещения.
- Внедрить систему визуальных подсказок и сообщений об ошибках.
- Подготовить анимацию запуска, видеоматериалы и UI Kit.
Решение
Мы разработали минималистичный медицинский интерфейс для установки «Плазморан» и адаптировали его под условия реальной эксплуатации.
Работу начали с фиксации пользовательских сценариев:
- как врач включает установку;
- что происходит при самотестировании — система автоматически проверяет питание, уровень газа, состояние охлаждения и работу плазмотрона;
- каким образом рассчитывается время обработки;
- как интерфейс реагирует на ошибки и что делает в случае сбоя.
Это позволило продумать логику системы и избежать перегрузки экрана.
В интерфейсах для оборудования мы всегда думаем о технической реализации. Предлагаем несколько вариантов дизайна и проверяем, насколько они подходят под конкретную модель установки. Проект шел в связке с инженерами заказчика, которые будут внедрять интерфейс. Это помогло учесть все нюансы еще на этапе проектирования.
Учли требования к размерам кнопок, освещению, читаемости и визуальной иерархии данных. Интерфейс строится вокруг четырех основных режимов работы. Для каждого спроектированы отдельные экраны, состояния запуска, паузы, завершения и подсказки.
Выбор режима работы в обновленном дизайне
Что реализовали:
- Экран самотестирования с пошаговой проверкой всех подсистем: плазмотрон, подача газа, питание и охлаждение. В случае ошибки программа подсвечивает проблемный блок и выводит инструкцию.
- Главное меню с крупными кнопками и возможностью быстро переключаться между режимами.
- Цветные акценты для улучшения навигации и систему плиточных переключателей, которая удобна для врачей.
- Режим автообработки с калькулятором — врач вводит фазу заживления и площадь раны, а система автоматически рассчитывает длительность процедуры.
- Разделили справочную информацию на ситуативную, которая видна экране, и отложенную — в подсказки добавили инструкции, видео и схемы.
- Интерактивные сценарии управления — старт, пауза и стоп, с отложенным запуском и защитой от случайных нажатий.
- Завершающий экран с напоминанием о необходимости выключить подачу газа.
- Motion-графику запуска и UI kit для дальнейшего масштабирования интерфейса.
Аналитика
Собрали вводные данные с помощью специалистов заказчика и инструкций. Зафиксировали все режимы работы установки, специфику эксплуатации в полевых условиях и требования к эргономике. Клиент также прислал свои пожелания и примеры интерфейсов.
Изучили пользовательские сценарии и оформили user flow — маршрут врача от включения устройства до завершения процедуры. В схеме показали ключевые точки входа, подсказки и возвраты. Такая визуализация помогает согласовать логику экранов и сократить число итераций на этапе дизайна.
User flow
Что отразили в структуре:
- Порядок действий врача — от включения установки и прохождения самотестирования до выбора режима, расчета параметров и запуска плазмогенерации.
- Форматы ошибок. Прописали действия при сбоях плазмотрона, охлаждения, подачи газа и питания. Для каждого сценария предусмотрена визуальная индикация и пошаговая инструкция.
- Особенности эксплуатации — работа в перчатках, на улице или при плохом освещении. Учли требования к крупным элементам, контрастности и читаемости.
- Навигация между режимами. Собрали и визуализировали список состояний и режимов. Добавили рекомендации и подсказки по работе с каждым из них.
Результатом аналитического этапа стала структура всех экранов, которая легла в основу интерфейса.
Структура экранов для установки «Плазморан»
Дизайн
На этапе дизайна сфокусировались на двух целях: создать интуитивный и безопасный интерфейс для врачей, а также заложить визуальную систему, которую заказчик сможет самостоятельно использовать для других установок или модернизации «Плазморана».
Дизайн-концепция и презентация решений
Работу начали с подготовки концепции экрана.
Изначально у клиента был запрос на темный минималистичный интерфейс. С учетом условий эксплуатации — полевые операции и возможные блики — такой дизайн мог оказаться непрактичным. Поэтому мы предложили два вида экрана — темный вариант и светлую тему с контрастной типографикой, которая лучше читается при любом освещении.
Интерфейсы медицинского оборудования всегда показываем на объемных макетах. Так заказчик может оценить, как экран смотрится вместе с дизайном установки.
Темная и светлая тема
Для клиента подготовили презентацию: 3D-макеты, состояния элементов и реакции интерфейса на действия. Это позволило показать идеи и перейти к работе с экранами.
Слайды из презентации нашей дизайн-концепции
UI-дизайн и визуальные паттерны
Задача дизайна в этом проекте — совместить медицинские требования с удобством эксплуатации в полевых условиях. В прошлой версии экрана врачи отмечали сложную навигацию и мелкие кнопки. Мы учли обратную связь и предложили другой варианты реализации интерфейса.
Алексей Нибо
Дизайн-директор в Атвинте
Убрали всю вложенность и сделали простой интерфейс: нажал на кнопку — и экран тут же показывает изменения. Больше не нужно переключаться между вкладками меню, чтобы понять, какой режим включен и все ли работает. Одно нажатие — один экран, никакой путаницы.
Обновленный дизайн для аппарата «Плазморан»
Крупные элементы управления для работы в перчатках
Интерфейс рассчитан на работу в перчатках. Все кнопки и интерактивные зоны — увеличенного размера и с большим отступом между элементами, чтобы исключить случайные нажатия.
Алексей Нибо
Дизайн-директор в Атвинте
На стартовом экране мы сделали большие кнопки с короткими надписями, но они были одинаковыми и сливались между собой. Чтобы понять, какой режим активен, нужно было всматриваться в текст и запоминать расположение. Мы предложили добавить в каждую кнопку символ и цвет. Так врач за долю секунды видит нужный режим и сразу запоминает его расположение.
Выбор режима работы
Интуитивные цвета кнопок для быстрой навигации в интерфейсе
Сделали акценты на кнопках основных параметров. Зеленые — положительные действия, красные — критические команды и предупреждения, а синие — это нейтральные функции. Такая система помогает быстрее ориентироваться в интерфейсе и снижает риск ошибки.
Читаемость при плохом освещении в полевых условиях
Использовали контрастную палитру и отказались от бликующих градиентов. Интерфейс одинаково хорошо читается и при ярком освещении, и в условиях низкой видимости.
Числовой ввод в калькуляторе для расчета площади раны
Вместо всплывающей клавиатуры, как на смартфоне, встроили клавиши ввода прямо на экран. Врач сразу видит результат и продолжает работу.
Калькулятор с автоматическим расчетом площади раны
Минималистичный стиль для врачей
Отказались от лишней графики и декоративных элементов, чтобы сохранить актуальность дизайна и не перегружать интерфейс.
Адаптивность экрана для ускорения работы специалистов и новичков
Все рабочие блоки подстраиваются под раскрытие подсказок и ошибок. Это дает врачу полное представление о происходящем, не перегружая интерфейс.
Алексей Нибо
Дизайн-директор в Атвинте
Мы разбили всю информацию на ситуативную и отложенную. Первая — на экране, вторая спрятана в справку. Так опытные врачи работают быстрее, а новички получают нужные объяснения по мере необходимости.
Окна с ошибками и предупреждениями
Интерактивная модель интерфейса
Разработали интерактивный прототип, чтобы показать работу системы:
- Переход к разным режимам и этапам переключения экранов.
- Состояния паузы, стопа и завершения с фиксацией времени, а также возможностью вернуться или начать заново.
- Подсказки при расчете площади раны и визуальные рекомендации во время обработки.
Такой подход помогает клиенту увидеть результат работы, а инженерам корректно настроить дизайн на оборудовании.
UI Kit и масштабируемость
Подготовили UI kit на русском языке с понятными названиями элементов по просьбе клиента, так как внедрять интерфейс будет команда заказчика. В библиотеку компонентов вошли шрифты и цветовая гамма, статичные элементы, состояния кнопок, всплывающие окна и иконки. Это позволит:
- упростить верстку для технической команды клиента;
- вносить изменения, адаптировать и развивать интерфейс.
UI kit для дальнейшего развития системы
Отзыв
ООО «ПлазмоПром»
Команда «Атвинты» быстро погрузилась в проект и предложила визуальные решения, которые помогли переосмыслить интерфейс установки. Особенно хочется отметить инициативность ведущего дизайнера, а также быструю обратную связь со стороны менеджера проекта.
Результат
Наша команда разработала новый интерфейс для хирургической установки «Плазморан» — безопасный и адаптированный под реальные условия работы врачей.
Итоги:
- Унифицированный интерфейс. Макеты покрывают основные режимы работы с учетом всех сценариев, состояний и ошибок.
- Готовый UI Kit для масштабирования. Все компоненты собраны в библиотеку. Интерфейс легко адаптировать под другие модели и режимы работы установки.
- Интерактивные макеты и motion-графика. Визуализация усиливает доверие к продукту, снижает порог входа и облегчает обучение.
- Оптимизация рабочих сценариев. Подсказки, крупные кнопки, продуманная навигация и отложенный старт снижают вероятность ошибок и повышают безопасность.
- Актуальный дизайн. Минимализм, функциональность и читаемость обеспечивают долгий срок жизни интерфейса.
Наш интерфейс экономит время врачей, снижает нагрузку в экстренных ситуациях и делает работу с оборудованием понятной даже для специалистов без технической подготовки.
Услуги из кейса
