Проект интерфейса создавался для автоматики на платформе Weintek по заказу ООО «ЭКА». Требовалось разработать дизайн и логику взаимодействия интерфейса с пользователем для управления системой вентиляции частного дома.

Краткое содержание ТЗ

Экраны состояния систем.

• Предусмотреть несколько экранов на которых будет краткая информация о всех системах. Отдельный экран для приточных и несколько экранов для вытяжных. На каждом экране предусмотреть кнопки перехода, на другие экраны краткого состояния систем:
• Экран приточной системы с увлажнителем;
• Экран приточной системы без увлажнителя;
• Экран приточно-вытяжной системы;
• Журнал аварий;
• Использовать стандартный элемент Weintek;

Предусмотреть журналы для:

– каждой приточной системы (кнопка перехода на мнемосхеме системы);

– всех вытяжных систем (кнопка перехода на мнемосхеме с краткой информацией по вытяжкам).

Прототипы экранов

После изучения ТЗ и приложенных к нему схем, были разработаны прототипы для каждого экрана. Здесь я покажу только три экрана.

Рис 1. Главный экран с текущими значениями параметров систем

Рис 2. Прототип экрана системы ПВ1

Рис 3. Прототип экрана системы П1

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

Дизайн

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

Рис 4. Дизайн главного экрана

Рис 5. Дизайн экрана приточной системы

Рис 6. Дизайн экрана приточных систем

Интеграция в среду разработки Weintek

Среда разработки у Weintek — довольно гибкий инструмент, он позволяет реализовать практически любое кастомное решение, но есть ньюансы, которые приходится решать дополнительным программированием. Интеграция выполнена при помощи SVG формата, то есть все элементы дизайна были сохранены, как отдельные SVG иконки, и из них создана своя библиотека для данного проекта.

UX/UI Kit

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

Рис 7. UX/UI Kit

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