Разработка мобильного приложения «умный дом» для компании Cubic.ai

Cubic.ai, ранее известный как Cubic Robotics — проект приложения «умный дом» для голосового управления лампочками, термостатами, датчиками дыма и другими умными устройствами. В отличие от конкурентов, Cubic.ai управляет устройствами конкурирующих брендов, а также имеет удобный интерфейс.

Для Cubic.ai на протяжении 4 месяцев создавался и поддерживался интерфейс приложения-ассистента.

В ходе работ над проектом было пройдено чудовищное количество вариантов дизайна. Несколько десятков черновых экранов приложения лежат в Sketch-файлах. Только некоторые из них пошли в релиз.

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

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

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

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

Приложение поддерживает десятки разных устройств. У каждого устройства несколько состояний. Для Cubic.ai нарисован целый комплект иконок.

Главная сложность дизайна пиктограмм — в унификации цветового и графического кодирования. Одно устройство может показывать несколько параметров. Например, термостаты показывают температуру, влажность воздуха и уровень угарного газа. У каждого параметра 4 уровня опасности. Как уместить все на одной иконке? Поиски ответа шли очень долго.

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

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

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

В «Дэшборде» состояние квартиры выводится в понятном виде с подсказками, например, что делать при задымлении или наводнении.

Cubic.ai уведомляет пользователей звуком, если датчики не в норме. Панель состояний окрашивается в красный цвет.

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

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

Команда настояла на классическом варианте.

Как и с лампочками.

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

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

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

В приложение также внедрен магазин умных устройств. Можно заказать недостающую новинку из мира Internet of Things прямо с Amazon.

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

По этой же причине нельзя предлагать товары прямо на домашнем экране.

Cubic Butler for Smart Home
Январь 2017

Смотрите также:

Разработка мобильного приложения «Дом Кино: Второй экран»

Вторая версия службы доставки «Сити Курьер»

Проектирование интерфейса робота телеприсутствия