Компания SIAMS является крупнейшим российским разработчиком системы панорамной микроскопии и анализаторов для макро- и микроструктурного анализа, является поставщиком оптических микроскопов, также компания занимается установкой и внедрением линий макротравления.

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

Разработка UX-архитектуры и UI-интерфейсов для системы панорамной микроскопии, применяемой в промышленных анализаторах и оптических приборах. Работа включала создание комплексной карты взаимодействий, адаптацию интерфейсов под научные сценарии и соблюдение требований ГОСТ/ISO в дизайне.

🏆 Благодаря новому дизайну компании удалось выпустить новую версию продукта — SIAMS 900, поднять на него цены на 30%, запустить серию новых разработок и на этой базе разработать 2 новые комплектации.

Интерфейс разделён на три основные зоны:

1. Левая панель — список проектов.
2. Центральная зона — главное окно просмотра микроструктуры и создания снимков с возможностью масштабирования и редактирования полученных изображений, а также для работы с изображением с помощью инструментов, расположенных слева.
3. Правая панель — блок с анализами результатов и настройкой оборудования.

Это разделение обеспечивает понятную иерархию информации: от создания и выбора проекта — к наблюдению и анализу.

Интерфейс до редизайна:

Окно «Анализ» разделено на 3 логичные части: настройки, редактирование и результаты, активная вкладка подчёркнута синим цветом, что облегчает навигацию.

Кнопки «Экспресс результат» и «Редактор» вынесены отдельно, их цель понятна и они визуально выделяются.

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

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

Окно «Редактирование» позволяет выделить на анализируемом изображении различные частицы вручную, когда после программного анализа остались недочеты. Пользователю сразу понятно, какие типы включений он может редактировать: оксидные, сульфиды, нитриды и обобщённые включения.

Иконка i с всплывающим текстом — стандартное решение для пояснений без загромождения интерфейса. Подсказка конкретна: «С помощью кисточки и ластика отредактируйте включения" — направляет пользователя к действиям.

Кнопка «Применить» вынесена внизу панели, хорошо заметна и отделена от списка редактируемых элементов.

В окне «Результаты» можно скачать подробный отчет по объектам и измерениям, а также экспортировать полученные данные в приложение AIM (искусственный интеллект) для дальнейшей работы с данными.

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

Окно «Оборудование» позволяет выполнить настройки камеры и опций съемки. В настройках камеры можно выбрать:

• объектив для съемки — x80.0, x10.0, x20.0, x40.0, x50.0
• экспозицию, усиление общее или поканальное, гамму

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

Окно «Выбор масштаба» в интерфейсе SIAMS 800 предоставляет пользователю возможность установить параметры масштаба (пиксель ↔ единица измерения), что критически важно для точных измерений микроструктур.

Ясное предупреждение:

• Сообщение «Внимание! Выбранный масштаб будет применен для всех изображений проекта» выделено цветом и иконкой ⚠️ — оно предотвращает ошибочные действия.
• Оно находится вверху, сразу после заголовка, чтобы пользователь его точно заметил.

Редактируемость единиц измерения: выпадающий список с разнообразием единиц (от пикселя до километра) обеспечивает гибкость и профессиональный уровень контроля. Иконки удаления (мусорные баки) размещены справа от каждой строки и выглядят ненавязчиво, но доступны при необходимости.

Кнопки управления внизу окна:

• «Отмена» и «Применить» оформлены в соответствии с дизайн-гайдом всей системы.
• Основное действие (Применить) выделено синим цветом, вторичное — нейтральным серым, что соответствует приоритету действий.

Окно «Коррекция неравномерности освещения» демонстрирует модуль с важной функцией автоматической оптимизации изображения. Всё окно построено вокруг одной задачи — коррекции освещения. Пользователь не отвлекается на лишние элементы, это обеспечивает концентрацию и эффективность.

Структура интерфейса:

• Верхняя часть — заголовок и кнопка «Запуск»;
• Средняя часть — область визуализации с масштабной линейкой;
• Нижняя часть — настройки: размытие, яркость и управляющие кнопки.

Масштабная линейка: надпись «1000 пикселей» под визуализацией помогает понимать размер обрабатываемой области. Ползунок размытия с числовым значением делает настройку точной и наглядной. Выпадающий список (по умолчанию «Яркость») позволяет переключаться между параметрами, расширяя функциональность без нагромождения.

Кнопки «Отмена» и «Применить» выполнены в традиционной цветовой схеме (вторичное и первичное действие). Это повышает предсказуемость интерфейса. Подпись «Автоматический режим перемещения образца» сразу сообщает пользователю, как будет работать алгоритм — это снижает неопределённость.

При создании нового исследования пользователю предоставляется выбор методик анализа:

• Левая панель — фильтрация по категориям (типовые чекбоксы и радио-кнопки).
• Центральная колонка — список методик с заголовками.
• Правая панель — список шаблонов внутри выбранной методики и кнопки запуска.

Такое разделение облегчает восприятие и поиск: сначала — отбор, затем — выбор, затем — запуск.

Два режима запуска:

• «Выполнить» — быстрый запуск по умолчанию.
• «Настроить и выполнить» — расширенный режим.

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

Функция «Сравнение с эталоном» в системе SIAMS 800 реализует ключевую задачу — сопоставление изображения микроструктуры с эталонными образцами по ГОСТ.

Двухпанельное сравнение:

• Левая панель — реальный образец, правая — эталон.
• Это классический паттерн side-by-side сравнения, который: интуитивен, снижает когнитивную нагрузку, позволяет сосредоточиться на деталях.

Сохранение масштаба: на обеих панелях присутствует шкала (300 мкм), что критически важно при визуальном сравнении. Снизу указан точный масштаб и координаты.

Есть навигационные стрелки и кнопка «Выбрать» для подтверждения эталона. Панель с миниатюрами снизу позволяет быстро переключаться между снимками.

Контекстное отображение методики:

• Справа показан список эталонов ГОСТа с разным масштабом (например, ГОСТ 5639–82 и шкалы x100, x25, x200 и т. д.).
• Раскрывающиеся списки (аккордеоны) позволяют избежать перегрузки экрана.

Ручная сшибка панорамы решает задачу формирования панорамного изображения из фрагментов микроструктур.

• Левая часть — область визуальной сборки, фокус на изображение.
• Правая часть — панель управления (сканирование, фокус, координаты, параметры).
• Вверху — блок запуска/остановки сшивки, внизу — настройки сохранения.

Изображение с вставляемыми фрагментами видно сразу, пользователь может «перетаскивать» или выравнивать вручную. Миникарта в правом верхнем углу помогает ориентироваться при масштабах.

Крупные стрелки с подписью «Стол» и «Фокус» дают чёткое разделение осей. Координаты XYZ редактируемые — это важно для точной работы.

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

Экран «Настройка стилей» позволяет задавать визуальные параметры отображения графических слоёв и аннотаций на микроструктурных изображениях. Это инструмент, ориентированный на продвинутых пользователей и администраторов.

Навигация по меню:

• Левая панель с блоками (Пользователи, Журналы, Инструменты и т. д.) организована в виде древовидного списка с категорией, а активный пункт «Настройка стилей» выделен цветом.
• Привычный макет администратора (навигация слева, действия справа).

Основное внимание сфокусировано на визуальной карте аннотаций, где пользователь может видеть область анализа, работать с метками, отрезками, линиями, полигонами, ориентироваться с помощью мини-карты в углу.

Панель инструментов:

• Кнопки в плавающей панели под левой иконкой инструмента рисования обеспечивают быстрый доступ к типам объектов.
• Подсказки при наведении (tooltips) — особенно важны в техническом интерфейсе.
• Иконки унифицированы по стилю и отличаются друг от друга по смыслу.

Контроль над всей группой: кнопка «Скрыть все слои» и действия над каждым слоем позволяют гибко настраивать отображение объектов. Кнопки «Экспортировать YOLO» и «Загрузить слой» демонстрируют расширенные возможности работы с машинным обучением или кастомными разметками.

Отображение слоя:
Полная система параметров визуализации - предоставлены все ключевые настройки отображения: гамма, контраст, яркость, цветовые каналы (RGB), сглаживание, резкость, смещения по осям X/Y. Это даёт пользователю почти лабораторный контроль над отображением слоёв.

У каждого параметра есть и слайдер, и числовое значение, что даёт и быструю настройку, и точную коррекцию вручную. Миникарта и фоновый контекст остаются доступными: окно наложено, но не перекрывает критически важные элементы интерфейса, что позволяет «настраивать вживую».

Редактор конфигурации — это модуль для настройки визуальных параметров слоёв (геометрии, вспомогательной геометрии, текстовых аннотаций). Он выполнен в виде компактного, модального окна с вкладками.

Структура вкладок:

• Вкладки: Геометрия / Вспомогательная геометрия / Текстовое поле — чётко отражают суть редактируемых объектов.
• Переключение вкладок мгновенное, вкладка выделена цветом (синий), что удобно для пользователя.

Интерфейс AIM для модуля для обучения нейросетевых моделей внутри платформы SIAMS подходит как для базовых, так и экспертных пользователей.

Интерфейс разделён на 3 ключевые зоны:

• Слева — список моделей;
• Центр — детали выбранной модели;
• Справа — результаты обучения (таблица и графики).

Такое распределение информации создаёт естественный поток: выбор → настройка → результаты.

Поддержка полного жизненного цикла модели:

• Функциональность охватывает:
• создание и импорт модели;
• запуск обучения;
• повторное обучение;
• экспорт;
• просмотр метрик.

Это делает интерфейс самодостаточным — все действия можно совершить, не покидая страницу.

Прозрачность обучения:

• Таблица и графики справа дают чёткое представление о ходе обучения: сколько длилось, сколько эпох, точность и потери.
• Графики аннотированы, поддерживают масштабирование и панорамирование (иконки справа от заголовков).

Интерфейс песочницы AIM — это рабочее пространство для работы с изображениями и разметками внутри выбранной модели. Оно обеспечивает полный цикл взаимодействия с обучающей выборкой.

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

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

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

Работа над интерфейсами SIAMS стала для меня не просто задачей по редизайну — это был глубокий опыт погружения в специализированную научно-инженерную среду. Я переработала ключевые интерфейсные модули системы панорамной микроскопии и анализа макро- и микроструктур: от онлайн-микроскопа и ручной сшивки изображений до конфигураторов стилей, управления слоями и интерфейсов обучения нейросетей.

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

Особое внимание я уделила визуальной иерархии, доступности ключевых функций, управлению состояниями и точечной обратной связи. Каждый экран — это результат баланса между высокой функциональной плотностью и лёгким, тактильным пользовательским восприятием.

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