SmartNest.
Умный дом, который наконец успокаивает. Один спокойный взгляд вместо стены переключателей.
Концепт · 25 экранов · живой прототип
→ состояние
- Что
- iOS-приложение умного дома: один спокойный взгляд вместо стены переключателей.
- Зачем
- Приложения для дома строят вокруг устройств, а не вокруг того, как живут люди.
- Моя роль
- Продуктовый дизайнер: аудит, модель, система и сборка 25 экранов и UI-кита.
- Результат
- 25 экранов · 6 примитивов · 3 недели
Большинство приложений для дома построены вокруг устройств. SmartNest построен вокруг того, как вы на самом деле живёте.
Одна спокойная система. Двадцать пять экранов.
Каждый экран собран из одних и тех же шести примитивов.
Приложения для дома заставляют трудиться ради контроля, который должны давать даром.
Переключатели повсюду.
Дом превращается в панель настроек.
Бренд, а не комната.
Приложения группируют по производителю.
Состояние не считывается.
Замок вообще закрыт?
Читать историю целиком
Перегруз — переключатели повсюду. Каждое устройство требует свою строку. Главный экран превращается в панель настроек, и чтобы понять контекст, приходится листать.
Не та модель — бренд, а не комната. Дом устроен по комнатам и привычным сценариям, а не по производителям. Но большинство приложений до сих пор группирует всё по бренду или типу устройства.
Нечитаемо — состояние не считывается. Мелкие иконки, одинаковые силуэты карточек. Приходится вглядываться, чтобы понять, закрыт ли замок и работает ли кондиционер.
В большинстве приложений для умного дома чувствуешь себя системным администратором: списки переключателей, деревья модальных окон, одинаковые карточки. Настоящая проблема в том, что они построены вокруг устройств, а не вокруг того, как вы на самом деле живёте.
Три недели. Четыре шага.
Детальный прототип, а не питч-дек.
Читать историю целиком
Аудит, модель, система, сборка. Ограничение — 25 экранов и одна дизайн-система; цель — детальный прототип, а не питч-дек. SmartNest — концепт iOS-приложения для умного дома, где один спокойный взгляд важнее стены переключателей: 25 экранов продакшн-уровня, компактная, но смелая визуальная система и встроенный тур с подсказками.
- Дни 1–3 · Аудит. Разобрал 6 референсных приложений — Google Home, Apple Home, SmartThings, Aqara, Hue, Nest — и разложил их информационную иерархию.
- Дни 4–6 · Модель. Зафиксировал ментальную модель: дом → комната → устройство → состояние. Энергия и безопасность получили собственные разделы верхнего уровня.
- Дни 7–11 · Система. Светлый кремовый + лайм + чёрный. Один шрифт. Шесть базовых компонентов. Крупные цифры, мягкие карточки, живые фотографии как акцент.
- Дни 12–21 · Сборка. 25 экранов на React с инлайновыми SVG-иллюстрациями. Пустые состояния и онбординг-тур, чтобы система ощущалась обжитой.
Дашборд, который читается с одного взгляда.
- СейчасАктивная комната — в чёрной главной карточке
- ВживуюПлитки комнат показывают живое состояние
- СпокойноКремовый с лаймом не утомляют глаз
Читать историю целиком
Одна контрастная карточка отдана самой используемой комнате. Под ней — четыре равноценные плитки комнат, которые сами говорят, что происходит: температура, сколько горит света, что играет, — без единого нажатия. Сейчас: активная комната в чёрной главной карточке. Вживую: плитки показывают живое состояние, а не статичные подписи. Спокойно: кремовый с лаймом не утомляют глаз.
Крупные цифры. Крупные зоны касания. Цифры, которые стоит показывать.
Дуга в 220 пикселей, которую видно через всю комнату. Энергия: одно число, один лаймовый столбик.
Тяни дугу.
Цвет = режим.
Разница с прошлой неделей.
Стоимость в долларах.
Читать историю целиком
Термостат. Это не ползунок, спрятанный в списке, а дуга в 220 пикселей с температурой, которую можно прочитать через всю комнату. Режимы Eco и Auto — переключатель-пилюля, а не дерево настроек. Просто: тянешь дугу — без двойных тапов и модальных окон. С ходу: цвет кодирует режим (охлаждение / обогрев / выкл.). Умно: активный сценарий виден прямо здесь.
Энергия. Энергия показана одним числом, одним чипом тренда и одним лаймовым столбиком, который всегда указывает на сегодня. Короткая разбивка по устройствам ведёт к действию, а не к стене чеков. Ясно: главное число + разница с прошлой неделей. Действие: кВт·ч по каждому устройству с настройкой по тапу. Честно: стоимость в долларах, а не абстракции.
Тихо по умолчанию. Громко, когда это важно.
Одна строка статуса, четыре живые камеры. Тревоги получают розовый акцент — больше он нигде не используется.
Читать историю целиком
Статус — одна строка. Под ней сетка 2×2 из живых камер. События в журнале с отметкой времени, без геймификации. Тревоги берут розовый акцент — больше нигде в приложении он не встречается, — поэтому считываются мгновенно.
- Спокойно — пилюля статуса, а не красная сирена.
- Вживую — 4 камеры одним взглядом.
- Легко просмотреть — журнал событий с цветовым кодом иконок.
Самые дружелюбные экраны в приложении.
Шесть иллюстраций вместо «здесь пока ничего нет».
Читать историю целиком
Шесть нарисованных вручную иллюстраций заменяют стандартный серый текст «здесь ничего нет». Они объясняют, чего не хватает, подсказывают следующий шаг и сохраняют голос бренда, даже когда показывать нечего. Всё — инлайновый SVG в цветах бренда; каждая иллюстрация предлагает следующее действие; пастельные подложки повторяют палитру комнат.
Тур из четырёх шагов, а не стена из буллетов.
По одному элементу за раз, поверх настоящей главной.
Читать историю целиком
Подсказки затемняют главный экран и подсвечивают по одному элементу. Одна чёрная всплывашка объясняет, что это, а полоса прогресса показывает, где вы сейчас. Тур можно пропустить и пройти заново.
- Фокус — один элемент на шаг.
- Контекст — тур идёт поверх настоящей главной, а не стоковых картинок.
- Контроль — пропуск на каждом шаге, повтор из профиля.
Шаги: первый запуск («Ваш дом, идеально настроенный»), дашборд, быстрые действия, комнаты, таб-бар.
«Каждый лишний переключатель стоит доверия. Спокойствие даёт система, которая решает, что важно, ещё до того, как вы коснулись экрана».
Остальной дом.
Один акцент, точный, как скальпель.
Единственное, что будит взгляд.
Цифры — крупно.
Фотография — это фактура.
Читать историю целиком
«Лайм — единственное, что будит взгляд». Один акцент, точный, как скальпель. Он отмечает активную комнату, следующее действие — единственное на экране, на что стоит посмотреть дважды. Если раскидать его везде, он теряет смысл.
Цифры — крупно. Температура. Энергия. Время. Самое важное значение получает самый крупный кегль — без тесноты и без центровки по умолчанию. Моноширинные цифры, чтобы ничего не прыгало, пока вы смотрите.
Фотография — это фактура. Настоящие фото комнат в мягко скруглённых карточках, вокруг — кремовый интерфейс. Дом выглядит как дом, а не как пульт управления.
Тихая система, шесть примитивов.
Всё остальное — их комбинации.
штрих 1,5 · 24 px
Спецификации шрифтов и компонентов
- Дисплейный — 80 / 600 / −0.045em
- Заголовок H1 — 48 / 600 / −0.035em
- Раздел H2 — 28 / 600 / −0.02em
- Основной крупный — 18 / 600 / 1.5
- Основной обычный — 14 / 500 / 1.55
- Надзаголовок — 11 / 700 / 1.4px
Один шрифт, четыре акцентных оттенка, шесть базовых компонентов — всё остальное в приложении собрано из их комбинаций. Спецификации настроены под iPhone (390 pt), но чисто масштабируются на планшет. Библиотека иконок: 20 иконок, штрих 1,5, 24 px.
Компоненты: кнопки (основная, акцентная, прозрачная), переключатели и слайдеры, сегменты (День / Неделя / Месяц, Охлаждение / Обогрев / Выкл.), бейджи статуса (В сети, Ожидание, Тревога, Офлайн, +12%, −4%), поля ввода («Поиск устройств…»), карточка устройства (Прикроватная лампа · Спальня · яркость 60%). Собрано как интерактивный прототип на React.
Посмотрите вживую.
Живой прототип работает прямо в браузере.
