Это небольшое дополнение к статье https://habr.com/ru/articles/949534/ . Если вы её не читали, то лучше начать с неё, будет понятна предыстория и как развивалась концепция взаимодействия с пользователем и AQ. А мы пойдем по классикам):

Статья принадлежит Liberiam и должна была публиковаться одновременно с моими, но к сожалению, она ждет модерацию в песочнице https://habr.com/ru/sandbox/258638/ как новый автор. По этому публикую я, что бы не нарушать последовательность подачи материала.

Потребность (Needs)

Основная потребность — это контролировать уровень содержания СО2 и других вредных примесей в окружающей нас атмосфере. В сети достаточно много верифицированных исследований о том, как влияет концентрация СО2 во вдыхаемом нами воздухе на работоспособность, здоровье и развитие у детей. Довольно часто плохое самочувствие связано с тем, что вы находитесь в плохо проветриваемом помещении. Конечно, речь не только о СО2, мы постараемся контролировать все основные показатели: CO2, pm2.5, pm10, VOC, NOX, Атмосферное давление, Влажность, Температура.

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

Отсюда и рождается основная потребность иметь перед собой постоянные показатели (AQ), и, если есть такая возможность, проводить проветривание по необходимости и автоматически. Такую возможность дает нам система умного дома, проще говоря, мы можем открывать окно или включать вентиляцию, когда это необходимо и там где это необходимо. Например, в отдельной комнате, а не в офисе/квартире в целом, что позволит экономить на энергии (отопление, вентиляция).

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

И косвенные, это психологическое спокойствие от того, что эти процессы под контролем и мы можем не переживать за своё и здоровье своих близких. )

Идея (Ideation)

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

Например, один из вариантов на рынке — это устройство с большим дисплеем и выводом кучи показателей, средне-мелкими цифрами. Представляете себя периодически подбегающим к экрану посмотреть, что там сейчас не так?! Нет, у вас должна быть возможность, бросив быстрый взгляд, если вы этого захотели, понять все ли в порядке и что конкретно в порядке или нет, в рамках работы нашего устройства. Отсюда и рождается концепция.

Концепция (Discovery)

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

У нас будут три зоны качества воздуха для трех основных показателей.

Зеленая зона — это идеальный воздух.

Оранжевая зона — это терпимый вариант, не причиняющий дискомфорта.

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

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

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

Функциональность (Features)

Более подробно функциональность описана в статье https://habr.com/ru/articles/949534/

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

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

В какой зоне по каждому из трех основных показателей сейчас находится AQ: Индикация состояния по трем основным зонам. Два основных условия, «видно и понятно издалека», в случае необходимости/желания, «подошел, уточнил» или «открыл приложение, увидел детали», статистику и прочее.

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

Приведу простой пример такого алгоритма. Устройство перешло в режим красной зоны по одному из показателей качества воздуха. При этом наружный воздух чист и прекрасен (также получаем данные с наружного датчика AQ). Как действие, включаем вентиляцию/открываем окно в комнате, пока устройство в помещении не перейдет в зеленую или оранжевую зону (в зависимости от настроек, выбранных пользователем). После чего закрываем окно/выключаем вентиляцию в конкретной комнате.

Дизайн (Industrial Design)

Дизайн устройства и индикации.

Начнем с основного, как нам показывать эти три зоны!? Достаточно просто, мы свернем их в трубочки и засунем… сделаем их светящимися цветными дисками. Примерно так:

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

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

И мы понемногу подходим к дизайну дисплеев.

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

Ссылка на интерактивную версию https://stiamon77.github.io/aqstqa.drawio.html

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

Так как у нас есть Danger zone, мы добавляем дополнительную световую индикацию и анимацию на дисплее.

Индикация (цвет дисков) плавно переходит от границы к границе зоны (градиент). Так будет интуитивно понятно состояние и эстетически будет приятнее выглядеть.

И несколько увеличенных картинок из схемы:

И несколько увеличенных картинок из схемы:

Картинки загрузки

Анимация ошибки

Анимация опасной зоны

Дисплеи по крупнее

С дизайном настольного исполнения всё достаточно просто:

И ещё рендеры

Дизайн интерфейсов.

На данный момент, за дизайн интерфейса отвечает умный дом, на примере Home Assistant

Большая картинка

Наша задача, только отправить необходимые показатели сенсоров, настройки в умный дом.

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

Остальное пока в разработке. ) Надеюсь скоро вернутся с новостями по этому проекту.

Основная статья https://habr.com/ru/articles/949534/