Интерфейс для умного дома: задача со звездочкой
Нажал на плитку - загорелась лампа. Со стороны кажется, что рисовать тут нечего.
Три года мы с коллегой проработали в одной команде, а недавно он пришёл с просьбой. Он разработчик и делает приложение для умного дома: свет, отопление, шторы, сценарии вроде «вечер». Приложение работает на настенной панели, на телефоне и на компьютере. Многое он уже напрограммировал, теперь нужен интерфейс, в котором человек разберётся сразу. Инструкции люди читают далеко не всегда, и я тоже, только иногда.
Начала с дизайн-системы. Это набор деталей и правил: какие бывают кнопки, плитки и ползунки, какого они цвета и размера. Без неё каждый экран получается со своим характером, а нужен один на всех. Взяла у коллеги скриншоты, за несколько дней продумала структуру и собрала интерактивный макет, который можно потрогать. Деталей не хватило - достроила прямо в нём. В Фигме я давно не люблю сидеть: хочется не картинку нарисовать, а увидеть, как оно заработало.
Потом пошёл рабочий стол - главный экран. Он состоит из плиток: маленьких карточек про свет, температуру, шторы. Тут и началось.
Видов плиток двенадцать, размеров шесть, устройств четыре, плюс светлая и тёмная тема. А состояний у каждой - восемь: всё в порядке, данные устарели, выключено, нет связи, нет данных, нет привязки, идёт действие, ошибка.
Вот как это выглядит на деле. Лампа пропала из сети, и плитка докладывает: «нет связи, 14:02». Время нужно, чтобы понять, давно ли это. На маленькой плитке время не влезает, остаётся «нет связи», а название обрезается многоточием. Одна строчка. Её нужно нарисовать на каждом размере и каждом устройстве, и чтобы везде читалась.
Работаю я не одна, мне помогает Клод, нейросеть. Роли у нас такие. Я придумываю, объясняю, что учесть и чего ни в коем случае не делать. Клод делает. Потом всё возвращается ко мне, и я придираюсь: смотрю, так ли вышло, и говорю, что переделать. Придираться - тоже работа, и, кажется, я в ней хороша.
Сейчас мы переносим дизайн-систему в рабочее приложение и параллельно прорабатываем сценарии: как включить свет, настроить отопление, запустить «вечер». Чтобы разобрался любой, даже если инструкцию он открывать не станет.