Отступы и сетка дашборда: как сделать панель читаемой на телефоне

Почему панель «расползается»

Обычная история: в условной квартире в городе N умный дом растёт постепенно. Сначала датчик температуры, потом реле света, через месяц датчик протечки, к зиме — термостат. Каждую новую плитку добавляют в конец. Через полгода панель напоминает ящик с инструментами: всё есть, ничего не найти. Отступы между плитками разные, потому что настраивались в разное время, а свет в спальне оказывается на третьем экране прокрутки.

Лечится это не новыми плитками, а сеткой.

Шаг отступов

Выберите базовую единицу отступа и стройте всё от неё: внутренний отступ плитки — одна единица, промежуток между плитками — тоже одна, промежуток между группами — две. Когда расстояния кратны одному шагу, глаз считывает структуру без усилий: плитки внутри группы ближе друг к другу, чем к соседним группам.

# условная раскладка: всё кратно одному шагу
spacing:
  step: 8          # базовая единица, px
  tile_padding: 2  # шага внутри плитки
  tile_gap: 2      # шага между плитками
  group_gap: 4     # шага между группами

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

Сетка и размеры плиток

Ограничьте набор размеров: обычная плитка, широкая (в две ячейки) и, если нужно, высокая для графика. Чем меньше вариантов, тем аккуратнее выглядит панель. Широкие плитки отдайте элементам, которым нужна длина: графику показаний, шкалам, списку тревог. Числу или переключателю хватает одной ячейки — о том, как оформить такую плитку, рассказано в материале про числовое значение.

Группировка

По месту

Самый естественный способ для жильцов — по помещениям: кухня, спальня, детская, двор. Человек обычно думает «что у меня на кухне», а не «какие у меня датчики температуры».

По смыслу

Для некоторых задач лучше сквозные группы: «безопасность» (протечка, дым, двери), «климат» (температура и влажность по дому), «энергия». Их удобно выносить на отдельный экран или в верх главного.

Комбинируйте: главная страница — по смыслу (что требует внимания сейчас), дальше — по комнатам.

Заголовки групп

Короткий заголовок над группой экономит подписи на каждой плитке: если группа называется «Кухня», плитке достаточно подписи «Температура». Заголовок отделяйте от плиток тем же шагом, что и группы друг от друга.

Порядок плиток

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

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

Палец, а не курсор

На телефоне элементы управления нажимают пальцем, часто на ходу. Отсюда несколько правил:

• нажимаемая область заметно больше самого значка — рекомендации платформ для мобильных интерфейсов задают минимальный размер цели касания;
• между соседними переключателями есть промежуток, чтобы не включить свет в детской вместо коридора;
• опасные действия (открыть ворота, отключить охрану) не стоят рядом с частыми и требуют подтверждения;
• важное помещается в зону, до которой легко дотянуться большим пальцем.

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

Типографика внутри плитки

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

Выравнивание тоже часть сетки. Если в одной плитке число стоит по центру, а в соседней прижато влево, взгляд спотыкается при каждом переходе. Выберите один вариант для всех плиток одного типа. Длинные подписи переносите на вторую строку или сокращайте — плитка не должна растягиваться по высоте только потому, что у датчика длинное название.

Как перестроить уже готовую панель

Если панель давно разрослась, не обязательно начинать с нуля. Удобный порядок работы:

1. Выпишите все плитки списком и отметьте, кто и как часто ими пользуется.
2. Вынесите служебные показатели на отдельную страницу.
3. Разбейте оставшееся по помещениям и выделите сквозную группу «безопасность».
4. Задайте шаг отступов и пересоберите группы по нему.
5. Неделю поживите с новой раскладкой и спросите жильцов, что они не нашли.

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

Чек-лист сетки

• Один базовый шаг отступов, всё остальное кратно ему.
• Промежуток между группами больше, чем между плитками внутри группы.
• Два-три размера плиток, не больше.
• Главная страница собрана по смыслу, дальше — по помещениям.
• Внутри группы — сначала частое, служебное вынесено отдельно.
• Тревоги выводятся отдельной строкой вверху.
• Цели касания крупные, опасные действия разнесены с частыми.
• Раскладка проверена на реальном телефоне в вертикальной ориентации.

Типичные ошибки

Новые плитки в конец списка. Панель превращается в хронологию покупок, а не в инструмент.

Отступы «на глаз». Чуть разные расстояния создают ощущение небрежности и мешают увидеть группы.

Все плитки широкие. На телефоне это одна бесконечная колонка, где нечем зацепиться взгляду.

Мелкие переключатели вплотную. Промахи пальцем включают не тот прибор — и доверие к панели падает.

Проектирование только на мониторе. На большом экране всё помещается, на телефоне половина нужного оказывается за прокруткой.