Илья Николаев, дизайнер сайтов на тильде, заказать сайт на тильде

Иерархия девайсов

Наивысшее звено. Набор настроек для применения к группе.

Профиль

Может состоять как из 1 контроллера и светильников в связке с ним, так и из нескольких контроллеров. Ее настройки применяются ко всем девайсах внутри группы.

Группа

Некий Project Manager в мире света. Объединяет несколько светильников и транслирует их сигнал на главный пульт. Отвечает за выполнением светильниками приказа пульта.

Контроллер

Самый маленький юнит. Может управляться самостоятельно. По факту просто лампочка с модулем для приема и отправки сигнала до контроллера.

Светильник

Шаг — 1. Техническая архитектура.

Портреты юзеров

Как правило, люди 55−65 лет, работающие в охране от безысходности, ведь в другие места их не берут. Свою должность воспринимают как легкую работу, где практически ничего не надо делать.

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

Шаг — 1. Пользователи.

Люди 30−45 лет. Занимаются установкой оборудования и его настройкой. Тот человек, который при первом пуске будет объединять девайсы и задавать им профиля.

Аватар требует максимально простого и понятного интерфейса, где UX главенствует над UI.

Охранник

Монтажник

Информац. архитектура

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

Шаг — 3. Проектирование архитектуры.

Модуль

Функционал

Задача пользователя

Примечание

Детектинг ошибок

В системе предусмотрены 2 условных значка: круг и квадрат. Круг означает светильник, а квадрат — контроллер.

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

Группа целей — 1. Мгновенные цели.

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

Слайд 1

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

Слайд 2

При клике на адрес в списке откроется карточка этого устройства на вкладке «Ошибки».

Слайд 3

Концепция управления

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

Группа целей — 2. Управление светильником.

—

Локальная смена яркости освещения

—

Просмотр группы и профиля, к которому привязан девайс

—

Настройка устройства

—

Просмотр характеристик девайса

—

Просмотр графика отклонения светильника за последние сутки

—

Просмотр ошибок

Вкладка «Управление»

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

Часть — 1. Управление светильником.

Вкладка «Профиль»

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

Часть — 2. Действия с профилем.

Вкладка «Настройки»

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

Часть — 3. Настройки светильника.

Вкладка «Ошибки»

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

Часть — 4. Ошибки и ворнинги.

Концепция групп

Раздел вынесен отдельным пунктом в меню. Эта часть интерфейса отвечает за решение следующих пользовательских целей:

Группа целей — 3. Управление группами.

—

Создать группу

—

Удалить группу

—

Редактировать девайсы в группе

—

Переименовать группу

—

Управление яркостью локально

—

Смена профиля

—

Просмотр ошибок

Главный список

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

Часть — 1. Списки.

Вкладка «Управление»

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

Часть — 2. Локальное управление.

Вкладка «Устройства в группе»

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

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

Часть — 3. Управление устройствами в группе.

Любимая фича проекта

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

Обратите внимание на кнопку «Выделить область». С ее помощью можно карандашом выделить участок карты и сразу же внести все устройства разом (слайд 2).

Часть — 4. Карта устройств.

Вкладка «Профиль»

Такой же график с учетом отклонения за сутки, как и у светильника, только здесь уже можно изменить действующий профиль.

Часть — 5. Привязанный профиль.

Вкладка «Ошибки»

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

Часть — 4. Ошибки.

Концепция профилей

Раздел вынесен отдельным пунктом в меню. Эта часть интерфейса отвечает за решение следующих пользовательских целей:

Группа целей — 4. Управление профилями.

—

Создать профиль

—

Удалить профиль

—

Редактирование привязанных групп

—

Переименовать профиль

—

Редактирование интервалов профиля

Главный список

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

Часть — 1. Списки.

Вкладка «Настройки профиля»

Можно задать имя профиля и отредактировать его интервалы. Как только интервал будет отредактирован, изменение отобразится на графике профиля.

Часть — 2. Управление интервалами.

Вкладка «Привязанные группы»

Все выбранные группы выносятся в самых верх.

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

Часть — 3. Управление группами.

Компоненты

Создал компоненты и их состояниями на основе Material UI 2. Всю типографику добавил в глобальные стили. Для удобства восприятия собрал их в UI-кит.

Заключение. Дизайн-система.

Плюшки для разработчиков

Разработчики не отличают дефолтные иконки фреймворка от ваших кастомных, поэтому вы должны им помочь. Я всегда подписываю кастомную иконку как iconName_custom. Это позволяет кодеру сразу понять, может ли он импортировать иконку из библиотеки Material UI.

Если иконка дефолтная, то в описании компонента я оставлю код для ее импорта, чтобы программист не искал в библиотеке, а мог просто скопировать из фигмы.

Иконка находится во фрейме 24*24, размер иконки регулируется только отступом от края фрейма. Это само собой разумеющееся.

Заключение. Дизайн-система.

На этом все. Ниже контакты, тут другой проект

Telegram

Телефон

Почта