180 lines
12 KiB
Markdown
180 lines
12 KiB
Markdown
# UI/UX Roadmap
|
||
|
||
## Цель
|
||
|
||
Сделать RMM-интерфейс удобным для оператора, который обслуживает роутеры, но не обязан знать OpenWrt, UCI и внутренние команды агента.
|
||
|
||
Главный экран должен за несколько секунд отвечать на три вопроса:
|
||
|
||
1. Какие роутеры требуют внимания?
|
||
2. Что именно не работает?
|
||
3. Какое безопасное действие можно выполнить?
|
||
|
||
Скриншоты Netcraze используются как ориентир по плотности, навигации и представлению данных, без копирования бренда и интерфейса один в один.
|
||
|
||
## Роли
|
||
|
||
### Оператор
|
||
|
||
- Видит состояние объектов, клиентов, сети и предупреждений.
|
||
- Запускает готовые диагностики и безопасные операции.
|
||
- Открывает удаленный доступ и LuCI.
|
||
- Не работает с raw JSON, UCI-командами и техническими параметрами туннеля.
|
||
|
||
### Эксперт
|
||
|
||
- Имеет доступ ко всем существующим низкоуровневым функциям.
|
||
- Просматривает raw inventory, историю команд и аудит.
|
||
- Выполняет произвольные команды, UCI-операции и управление пакетами.
|
||
|
||
На первом этапе экспертный режим будет отдельным разделом интерфейса. Разграничение прав можно добавить позже.
|
||
|
||
## Принципы интерфейса
|
||
|
||
- Плотный рабочий интерфейс без маркетинговых блоков и декоративных карточек.
|
||
- Единая навигация и предсказуемые вкладки.
|
||
- Статусы читаются по тексту и цвету: норма, внимание, ошибка, недоступен.
|
||
- Основные действия доступны сразу, редкие и опасные спрятаны в меню.
|
||
- Одна глобальная кнопка обновления вместо кнопок обновления в каждом блоке.
|
||
- Автообновление данных с понятным временем последнего контакта.
|
||
- Русские операторские названия; технические термины остаются в экспертном режиме.
|
||
- Любая опасная операция требует подтверждения и объясняет последствия.
|
||
- Ошибки показывают понятное описание; request ID доступен в раскрываемых деталях.
|
||
|
||
## Целевая структура
|
||
|
||
### 1. Объекты
|
||
|
||
Первый экран после входа: полноширинная таблица всех роутеров.
|
||
|
||
Основные колонки:
|
||
|
||
- Статус.
|
||
- Имя объекта.
|
||
- Модель и группа.
|
||
- WAN / интернет.
|
||
- Клиенты.
|
||
- Проблемы.
|
||
- Последний контакт.
|
||
|
||
Доступные действия:
|
||
|
||
- Поиск.
|
||
- Фильтры по статусу, группе и проблемам.
|
||
- Открытие объекта кликом по строке.
|
||
- Массовые действия появляются только после выбора объектов.
|
||
|
||
### 2. Карточка объекта
|
||
|
||
Верхняя часть содержит имя, статус, последний контакт и основные действия.
|
||
|
||
Вкладки:
|
||
|
||
- **Обзор** — здоровье роутера, предупреждения, основные метрики и графики.
|
||
- **Клиенты** — единый список DHCP- и Wi-Fi-клиентов.
|
||
- **Сеть** — WAN, интерфейсы, Wi-Fi, маршруты и счетчики.
|
||
- **Операции** — диагностика, удаленный доступ, обновления и безопасные настройки.
|
||
- **Сведения** — модель, прошивка, группа, теги и идентификаторы.
|
||
- **Эксперт** — raw inventory, команды, UCI, пакеты, история и аудит.
|
||
|
||
## Что меняем в текущем UI
|
||
|
||
| Сейчас | После редизайна |
|
||
| --- | --- |
|
||
| Список устройств в узкой боковой панели | Полноширинная таблица объектов |
|
||
| Длинная страница со всеми функциями | Карточка объекта с вкладками |
|
||
| Много кнопок Reload / Refresh | Автообновление и одна глобальная кнопка |
|
||
| Raw Inventory на обзорной странице | Раздел «Эксперт» |
|
||
| Выбор произвольной команды на обзорной странице | Раздел «Эксперт» |
|
||
| Пять отдельных кнопок диагностики | Единый сценарий «Запустить диагностику» |
|
||
| Raw UCI и множество кнопок | Пошаговое применение безопасных настроек; raw UCI в «Эксперт» |
|
||
| Preview и Stage как отдельные действия | Сценарий «Проверить изменения → Применить» |
|
||
| Технические поля SSH-туннеля | Выбор длительности и кнопки «Открыть LuCI» / «Скопировать SSH» |
|
||
| Редактирование группы и тегов в обзоре | Вкладка «Сведения» |
|
||
| Все статусы истории команд отдельными кнопками | Основные фильтры и меню дополнительных фильтров |
|
||
| Опасные действия рядом с обычными | Отдельное меню с подтверждением |
|
||
|
||
## Этапы реализации
|
||
|
||
### Этап 0. UX-аудит и фундамент
|
||
|
||
- Сопоставить каждый текущий элемент с действием: оставить, перенести, объединить или скрыть.
|
||
- Зафиксировать операторские названия и статусы.
|
||
- Подготовить общий layout, компоненты статусов, кнопок, таблиц и уведомлений.
|
||
- Определить адаптивное поведение для desktop и mobile.
|
||
|
||
### Этап 1. Навигация и список объектов
|
||
|
||
- Добавить постоянную навигацию по основным разделам.
|
||
- Перенести список роутеров в плотную таблицу.
|
||
- Добавить поиск, фильтры и сортировку.
|
||
- Показывать проблемы и последний контакт непосредственно в строке объекта.
|
||
- Показывать массовые действия только после выбора строк.
|
||
|
||
### Этап 2. Обзор объекта
|
||
|
||
- Добавить верхнюю панель объекта и вкладки.
|
||
- Собрать компактную строку состояния.
|
||
- Показать WAN, загрузку, память, uptime, клиентов и предупреждения.
|
||
- Добавить основные графики за выбранный период.
|
||
- Оставить только главные действия: LuCI, диагностика и меню операций.
|
||
|
||
### Этап 3. Клиенты и сеть
|
||
|
||
- Объединить DHCP leases и Wi-Fi stations в таблицу клиентов.
|
||
- Добавить поиск и фильтры клиентов.
|
||
- Создать отдельный экран интерфейсов и подключений.
|
||
- Показать понятные состояния WAN, LAN и Wi-Fi.
|
||
|
||
### Этап 4. Операторские операции
|
||
|
||
- Сделать пошаговую диагностику с прогрессом и итогом.
|
||
- Упростить создание удаленной сессии.
|
||
- Добавить безопасные формы настроек вместо raw UCI.
|
||
- Представить обновления и пакеты как понятные операции.
|
||
- Показывать ход, результат и рекомендации после операции.
|
||
|
||
### Этап 5. Экспертный режим
|
||
|
||
- Перенести существующие технические возможности без потери функциональности.
|
||
- Разместить raw inventory, команды, UCI, пакеты, историю и аудит.
|
||
- Отделить опасные операции и добавить явные подтверждения.
|
||
- Подготовить интерфейс к будущему разграничению прав.
|
||
|
||
### Этап 6. Состояния и полировка
|
||
|
||
- Добавить skeleton, empty, loading, offline и error states.
|
||
- Добавить toast-уведомления и единый стиль подтверждений.
|
||
- Проверить навигацию клавиатурой и фокус.
|
||
- Проверить таблицы, переносы текста и отсутствие наложений.
|
||
- Проверить desktop, tablet и mobile.
|
||
|
||
### Этап 7. Недостающие данные API
|
||
|
||
- Нормализовать запись клиента из DHCP и Wi-Fi.
|
||
- Нормализовать состояние интерфейсов и подключений.
|
||
- Подготовить временные ряды для графиков.
|
||
- Добавить операторские операции поверх сырых команд.
|
||
- При необходимости добавить серверную пагинацию, поиск и сортировку.
|
||
|
||
## Приоритет первой итерации
|
||
|
||
1. Новый layout и полноширинный список объектов.
|
||
2. Карточка объекта с вкладками.
|
||
3. Новый обзор объекта.
|
||
4. Упрощенный удаленный доступ и LuCI.
|
||
5. Перенос технических функций в «Эксперт».
|
||
|
||
## Критерии готовности
|
||
|
||
- Оператор за 10 секунд понимает, какие объекты требуют внимания.
|
||
- Состояние объекта понятно без просмотра JSON и истории команд.
|
||
- LuCI открывается не более чем за два клика.
|
||
- Диагностика запускается не более чем за три клика.
|
||
- В обычном режиме нет raw UCI, произвольных команд и параметров туннеля.
|
||
- Опасные операции всегда требуют явного подтверждения.
|
||
- Интерфейс корректно работает на ширине 1366, 1920 и на мобильном экране.
|
||
- Нет случайного горизонтального скролла, наложений и обрезанного текста.
|
||
- Ошибки API отображаются понятно и позволяют раскрыть технические детали.
|
||
|