Дизайн приложения для умного дома: редизайн главного экрана, до и после

У главного экрана приложения для умного дома одна задача: показать, в какой вы комнате, и дать изменить то, что включено, одним касанием. В первом черновике ниже есть все элементы управления, но это восемь одинаковых строк с крошечными строками статуса, комнаты спрятаны в подчёркнутом тексте, а сцены свалены в конец в виде шести мелких кнопок. Он выглядит как страница настроек, поэтому пользоваться им похоже на конфигурирование, а не на жизнь.

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

Весь экран, до и после

Черновик джуна

Исправлено

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

Справа экран по порядку отвечает на два вопроса: где я и что включено. Фото показывает комнату, а не рекламу приложения. Состояние передаётся цветом, поэтому пользователь считывает сетку с первого взгляда.

Что изменилось, в цифрах

Правка 1: сначала комната, потом что включено

До

После

Шапка с иконкой меню, My Home, плюсом, настройками и колокольчиком с красной точкой, полосой погоды 18°C Cloudy, Indoor 22°C, Humidity 44%, Power 3.2 kWh, шестью подчёркнутыми ссылками на комнаты и фото-баннером Haven, против крупного жирного Living Room с подписью 22° · 3 светильника включено поверх фото комнаты, с плюсом и меню из трёх точек.

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

Исправление даёт экрану тему. «Living Room» становится заголовком, а одна строка под ним содержит два факта, которые люди проверяют: температуру и число включённых светильников. Три светильника это Floor Lamp, Ceiling Light и Shelf Light, которые включены в черновике, так что ничего не выдумано. Погода, влажность и потребление открываются из трёх точек, а колокольчик и шестерёнка переезжают в Профиль.

Это паттерн Apple Home: название комнаты с её живым состоянием сверху.

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

Правка 2: простые вкладки комнат со свайпом

До

После

Шесть подчёркнутых ссылок в ряд: Living Room, Bedroom, Kitchen, Bath, Garage, Office, против жирного белого Living Room и серых Bedroom, Kitchen и Bathroom, уходящих за правый край.

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

Простые вкладки решают обе проблемы. Выбранная комната белая, остальные серые, так что текущая единственная яркая. Ряд намеренно уходит за правый край: это показывает, что его можно свайпать, и позволяет списку расти дальше шести комнат без нового макета. Bathroom и Office на расстоянии одного свайпа, а Garage открывается из точек.

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

Правка 3: плитки вместо строк

До

После

Восемь одинаковых строк с иконкой, названием, серой строкой статуса вроде On, 80%, Warm White и маленьким янтарным или серым переключателем справа, против широких скруглённых плиток в две колонки: Floor Lamp и Thermostat белые с янтарными иконками, TV и Speaker тёмные с белыми иконками, а Ceiling Light и Blinds начинаются ниже.

Строки обходятся дороже всего. Каждая требует найти строку в 9 px, прочитать «On | 80% | Warm White», а затем найти переключатель 30 x 18 и попасть в него. Восемь таких строк это колонка текста, где ничто не отделяет включённые устройства от выключенных.

Плитка это кнопка. Вся плитка является целью касания, название 14, состояние 12, а роль переключателя выполняет цвет: белая с янтарной иконкой значит «включено», тёмная с белой иконкой значит «выключено». Пользователь оценивает восемь устройств одним взглядом и видит, что в первых рядах включены два. Плитки к тому же уходят под плавающую панель вкладок, что подсказывает: список продолжается.

Ничего не потеряно. Ceiling Light, Shelf Light, Blinds и Air Purifier из черновика лежат за «All 8» в разделе Accessories, так что каждое устройство по-прежнему доступно.

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

Правка 4: настоящие пилюли сцен

До

После

Маленькая подпись SCENES над шестью одинаковыми серыми кнопками заглавными буквами: Movie, Sleep, Away, Morning, Party, Reading, против ряда скруглённых пилюль с иконками: Movie подсвечена белым, Sleep и Away тёмные, следующая уходит за край.

Сцены лучшая часть приложения для умного дома, ведь одно касание меняет всю комнату. В черновике они лежат внизу, под восемью строками, шесть одинаковых серых кнопок. Они похожи на форму, и ни одна не показывает, какая сцена активна.

Исправление поднимает сцены наверх, прямо под вкладки комнат, и даёт каждой иконку. Их высота 44, так что они удобны для большого пальца, а активная сцена подсвечена белым. Party прячется в свайпе пилюль, а Reading есть во вкладке Scenes.

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

Мелкие правки

• Все функции остались. Ceiling Light, Shelf Light, Blinds и Air Purifier лежат за All 8. Погода, влажность и потребление открываются из точек в шапке. Колокольчик и шестерёнка переехали в Профиль, где теперь точка-бейдж.
• Ровные отступы. В черновике 14 px слева и 12 px справа. В исправленном экране один отступ с обеих сторон.
• Один акцент. Янтарный есть только на иконках включённых плиток и в активной вкладке. В черновике он на каждом переключателе и нескольких иконках.
• Плоский затемняющий слой. Один чёрный слой 52% поверх фото, без градиента и свечения, так что лампа читается, а книги уходят в тень.
• Меньше вкладок. Четыре вкладки на плавающей панели 62 px вместо пяти вкладок с вперемешку залитыми и контурными иконками.
• Шкала шрифтов. Текст идёт от 12 до 34 pt, подписи вкладок 10 pt, вместо 9 to 15 px в черновике.

Проверьте свой экран умного дома

Скачайте файл Figma

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

Бесплатный файл Figma

Редизайн экрана умного дома, до и после

Оба экрана и каждая часть как компонент Figma. Бесплатно, только просмотр, скопируйте в свои черновики.

Открыть в Figma

FAQ

Как проектировать главный экран приложения для умного дома?

Начните с названия комнаты и одной строки живого состояния, например «22° · 3 светильника включено». Показывайте устройства плитками в две колонки, где цвет значит «включено», поместите сцены в пилюли ближе к верху, а погоду и настройки уберите в меню.

Что использовать для устройств в приложении умного дома: плитки или списки?

Плитки, для главного экрана. Вся плитка это цель касания, а цвет показывает состояние с первого взгляда. Список хорош для длинного экрана настроек или истории.

Как показать, что устройство включено в приложении умного дома?

Самой плиткой: белая карточка с янтарной иконкой для включённого и тёмная карточка с белой иконкой для выключенного, чтобы никому не приходилось читать строку статуса или искать маленький переключатель.

Где разместить сцены в приложении умного дома?

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

Сколько вкладок нужно приложению умного дома?

Четырёх хватит: Home, Scenes, Automations и Profile. Комнаты живут в свайпаемых вкладках на главном экране.

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

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

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение Haven и его устройства выдуманы. Цифры согласованы: на обоих экранах включены три светильника, Floor Lamp на 80%, а термостат выставлен на 22°.
• Изученный паттерн: Apple Home, с названием комнаты и её состоянием сверху, плитками для аксессуаров и сценами в виде пилюль. Размеры текста следуют iOS (от 12 до 34 pt, подписи вкладок 10 pt).
• Иконки из Phosphor (MIT). Фото с Pexels: Yusuf P и Jan Vee.
• Впервые опубликовано как карусель в App Brainy.