Разработка мобильного приложения «умный дом» для компании Cubic.ai
Cubic.ai, ранее известный как Cubic Robotics — проект приложения «умный дом» для голосового управления лампочками, термостатами, датчиками дыма и другими умными устройствами. В отличие от конкурентов, Cubic.ai управляет устройствами конкурирующих брендов, а также имеет удобный интерфейс.
![](g-dots.gif)
Для Cubic.ai на протяжении 4 месяцев создавался и поддерживался интерфейс приложения-ассистента.
В ходе работ над проектом было пройдено чудовищное количество вариантов дизайна. Несколько десятков черновых экранов приложения лежат в Sketch-файлах. Только некоторые из них пошли в релиз.
![](drafts/all.jpg)
![](drafts/cubic-draft-1.jpg)
Главный экран приложения — парк устройств, разбитых по комнатам.
![](phone5.jpg)
Каждое устройство имеет собственную иконку, которая может менять статус. Например, термостаты Nest могут нагревать или охлаждать воздух в квартире. Термостат в режиме обогрева обозначен оранжевым цветом, в режиме охлаждения — синим.
![](icons4.jpg)
Термостаты других фирм также детектируют пересушенный и переохлажденный воздух. Для всех состояний необходимы понятные иконки.
![](icons5.jpg)
Некоторые устройства могут иметь целый спектр состояний. Например, датчики дыма и угарного газа имеют 3 степени опасности для каждого вида угрозы.
![](icons1.jpg)
Приложение поддерживает десятки разных устройств. У каждого устройства несколько состояний. Для Cubic.ai нарисован целый комплект иконок.
Главная сложность дизайна пиктограмм — в унификации цветового и графического кодирования. Одно устройство может показывать несколько параметров. Например, термостаты показывают температуру, влажность воздуха и уровень угарного газа. У каждого параметра 4 уровня опасности. Как уместить все на одной иконке? Поиски ответа шли очень долго.
![](drafts/icons-fire.jpg)
![](icons2.jpg)
Поскольку запомнить все состояния человеку не под силу, для приложения разработана панель состояний Dashboard.
Перед тем как дизайн дэшборда был закончен, было нарисовано и отвергнуто около десятка вариантов интерфейса.
![](drafts/dash-all.jpg)
Сначала раздел хотели сделать с совершенно другим дизайном, который бы выделялся из остального приложения. Постепенно эта идея была отвергнута, а от цветового кодирования остался только главный смысл — отображение уровня опасности.
![](drafts/dash.jpg)
В «Дэшборде» состояние квартиры выводится в понятном виде с подсказками, например, что делать при задымлении или наводнении.
![](phone1.jpg)
Cubic.ai уведомляет пользователей звуком, если датчики не в норме. Панель состояний окрашивается в красный цвет.
![](swap-3.png)
![](swap-4.png)
Для управления устройствами разработан набор интерфейсов. Команде было предложено несколько вариантов каждого интерфейса.
Интерфейсы управления устройствами также хотелось выделить из остального дизайна.
![](drafts/thermostat-all.jpg)
Команда настояла на классическом варианте.
![](drafts/thermostat.jpg)
Как и с лампочками.
![](drafts/bulbs.jpg)
![](swap-1.png)
![](swap-2.png)
Несмотря на продуманный ручной интерфейс, главная функция приложения — голосовое управление.
![](g-voice.gif)
Кубик в приложении — живой помощник. На него можно нажать и попросить выключить свет, сделать в комнате потеплее и спросить, заперта ли дверь. Кубик отлично распознает речь и общается с пользователем живыми фразами.
Для Cubic.ai предложен интерфейс будущего ассистента, который будет встраиваться в систему и вызываться по нажатию кнопки Home на телефоне.
![](phone3.jpg)
В приложение также внедрен магазин умных устройств. Можно заказать недостающую новинку из мира Internet of Things прямо с Amazon.
Дизайн магазина отличается от остального приложения. Для него выбран белый фон, ведь фотографии товаров всегда на белом фоне.
![](drafts/buy.jpg)
По этой же причине нельзя предлагать товары прямо на домашнем экране.
![](drafts/buy-2.jpg)
![](swap-5.png)
![](swap-6.png)