Контекст
Раздел «Список МКД» переезжает из старого интерфейса С-300 в новый «Диспетчер». Фронт новый, бэк прежний. Модель данных трогать нельзя, можно менять только то, как с ней работают.
Раздел огромный: дома, помещения, жильцы, счётчики, показания, начисления, квитанции, тарифы. Всё это жило в трёх слоях вложенности, и найти нужное состояние было отдельной задачей.
Экранов сотни, и ошибка в нарезке умножается на каждый из них. Поэтому я начал не с макетов, а с разбора.
Задача
Понять, из чего раздел состоит на самом деле, и предложить структуру, по которой его можно спроектировать и разработать.
Результат
Проектная документация на весь раздел: шесть кластеров с зонами ответственности, карта, дерево сценариев в собственной нотации, два дашборда и описание к каждому экрану. По этому пакету разработка может начинать без повторного проектирования.
Приоритеты компании сместились, и в план этого года раздел не попал. Пакет готов к передаче, когда раздел вернётся в работу.
Разбор на элементы: три подхода, два неудачных
Структуру собирал не в Figma, а в Obsidian. Здесь нужно было видеть связи между сущностями, а не раскладку экранов.
Как это было
Попытка 1: теги. Удобно, пока не выяснилось, что их не раскрасить по цветам без серьёзного костыля. Граф превратился в кашу, в которой ничего не читалось.
Попытка 2: страницы вместо тегов. Странице можно задать цвет, и каждый узел наконец разделился на сущности, данные и действия. Стало видно, из чего всё состоит, но не что эти узлы объединяет.
Попытка 3: кластеры. Отдельные узлы, которые притягивают страницы вокруг себя. Они и стали шестью блоками.
Шесть кластеров
Весь раздел уложился в шесть блоков. У каждого своя зона ответственности и понятный вход.
- 1Дом и инфраструктура. Физика дома: этажи, подъезды, стояки, лифты, квартирограмма.
- 2Помещения и жильцы. Квартиры и нежилые помещения, комнаты, жильцы, лицевые счета.
- 3Счётчики и показания. Общедомовые и квартирные приборы учёта, ввод показаний, поверки, контроль аномалий.
- 4Начисления и финансы. Начисления, оплаты, задолженность, пени, перерасчёты, расщепление платежей.
- 5Квитанции. Формирование и печать платёжных документов, шаблоны, реквизиты.
- 6Настройки расчётов. Тарифы, нормативы, коэффициенты, правила расчёта пени.
Принцип нарезки
Резал по цели пользователя, а не по модели данных. Кластер «Начисления и финансы» существует не потому, что в базе есть такая таблица. Он нужен, потому что человек приходит с задачей: посмотреть долги и решить, что с ними делать.
Каждый кластер можно разрабатывать и тестировать почти независимо, а с остальными его связывают общие данные и навигация. Это не схема для презентации, а границы модулей для разработки.
Карта, сценарии и нотация
Вместо одной большой схемы собрал два артефакта. Они отвечают на разные вопросы, поэтому не смешиваются.
Из чего это состоит
- 1Карта раздела. Показывает, что вообще есть и как оно вложено: от списка домов до карточки конкретного жильца.
- 2Дерево сценариев. Показывает, как человек туда попадает. Узлы здесь не страницы, а вопросы: «Какая главная цель?», «Какой нужен счётчик?», «По всем лицевым счетам или по одному?»
- 3Нотация NiNode. Читается сверху вниз. Упёрся в вопрос, и всё, что справа от него, это ответы. Дальше по той же логике.
Что это дало
В классической схеме каждую ветку пришлось бы рисовать отдельной цепочкой экранов. Здесь ветки не дублируются: кадров примерно на 40% меньше, а вложенность и описания живут в одном артефакте.
Дашборд: кластеры стали экраном
Кластеры со схемы превратились в два дашборда: сводку по дому и сводку по квартире. Каждый блок на экране — это кластер со своим текущим состоянием: характеристики дома, начисления за месяц, общедомовые счётчики, показания ОДПУ и ИПУ со статусами. Из любого блока можно сразу провалиться внутрь.
Зачем
Это снимает исходную боль. Чтобы узнать, сдали ли жильцы показания, больше не нужно спускаться на три уровня вложенности: ответ виден на первом экране.
Что дальше
По описаниям экранов разработка стартует без дополнительного проектирования. Когда раздел вернётся в план, начинать с нуля не придётся.
Какой итог?
На больших разделах макеты не первый шаг. Время на разбор структуры окупается, потому что ошибка в нарезке потом тиражируется на сотни экранов.
Кроме того, документация должна работать без автора. Карта, сценарии и описания собраны так, чтобы команда могла взять их и начать, даже если меня нет рядом.
Как это выглядит в интерфейсе
Три ключевых экрана, в которые превратилась структура: список домов, сводка по дому и сводка по квартире.
