Интерфейс приложения визуальной LowCode среды разработки12.03.2025 13:01

ЗаказчикКомпания Диполь года занимается комплексным оснащением и переоснащением предприятий радиоэлектроники и машиностроения, научно-производственным консалтингом и повышением эффективности производстваЗадачаОбновить дизайн существующего решения, которое используется внутри компании

Компания  Диполь  с 1992 года занимается комплексным оснащением и переоснащением предприятий радиоэлектроники и машиностроения, научно-производственного консалтинга и повышения эффективности производства.

Компания пришла к нам с командой для работы с интерфейсом настольного приложения.

Business-задача

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

a45af9964f20c71356008baeac4efddd.png

Авторизация

Design-задача

Обновить дизайн существующего решения, которое используется внутри компании:

  • провести анализ существующего решения;
  • продумать UX- и UI-решения;
  • создавать детальные макеты интерфейса в дизайне;
  • создать единый дополнительный компонент с описаниями.

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

7c19d63f493aa9340edd302621ea1458.png

Схема измерения

Результат

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

8811c61722d6ec166080958fab166fea.png

Главное окно

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

83a87d18ab6ebd0f187a8a442f67e65b.png

Блок выделения на панели

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

057ac1a78d01b86861790c144eb3b722.png

Работа с проектами

Также заказчик получил дополнительные компоненты и удобную смену цветовых схем (светлая/темная).

1f7cfc8a50632e1990d3fcd1998856d7.png

f43ada936758aa7625d18b3d1b4fe057.png

Extra-use

Чтобы заказчику, как будут работать части приложения, отображать некоторые действия пользователя на экране. Например, работы с панелями «Свойства» и «Инструменты», работы с частью экрана, на которой создана схема для проектирования и внедрения системы (canvas).

aab62c8e81c1d9b456323c59c859dff4.png

Панель «Свойства»

0475b6ba8d3f068322e150bfbd7a4b5e.png

Панель «Инструменты»

e652df612404abc32afc95ec479722a8.png

Панель «Инструменты», поток пользователя «поиск»

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

e18d59f8041febfadebaecb95ce9af5b.png

Канвас

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

9a5b9ffc771ce5573d8924226b483d45.png

Логика «Поиск по канвасу». Наведите курсор на поиск

41aed55df0610c42e117d627c2635cb5.png

Логика «Поиск по канвасу». По клику раскрывается поиск

979b6a1ab38be884375d839575ec423c.png

Логика «Поиск по канвасу». Искомое на лето полученной инверсией

Нюансы и особенности

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

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

По ходу работы некоторые требования изменились, потому что приложение изменилось само собой. Поэтому мы разбили все задачи по четырем категориям приоритетности: «необходимо» (обязательно), «должно иметь» (желательно), «можно иметь» (возможно) и «не иметь» (не будет). Это обеспечивает контроль передачи новых задач в работе и позволяет избежать бесконечного разрастания проекта.

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

9e13c09f0b8f906647fe70b776c717f6.png

Создание проекта

Некоторые цифры

Отрисовали 8 пользовательских потоков для детализации работ с определенными проявлениями Создали 3 темы темную, светлую и дополнительный цвет по выбору клиента Спроектировали 6 панелей программы  

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

Перейти на сайт

Полный текст статьи читайте на CMS Magazine