| Status | Common Name | Type | Tags | Asset Tag | Location | |
|---|---|---|---|---|---|---|
| Alert | London server 4 | Server |
production
testing
+3
Дополнительные теги
sql-cluster
london-dc
pci-dss
|
srv503 | Row 1 / L01 | |
| Offline | Beograd router | Router |
No tags
|
net01 | Unmounted | |
| Active | Moscow KVM Switch | KVM Switch |
production
+1
Дополнительно:
kvm-internal
|
sw0002 | Row 1 / M01 |
Техническая реализация и возможности
Управление объектами (CRUD)
Реализована полноценная симуляция создания сервера. По клику на + Add Object открывается Slide-over панель. Данные из инпутов (Name, Type, Location) мгновенно попадают в начало таблицы через манипуляцию DOM, без перезагрузки страницы.
- • Slide-over Panel (Right)
- • Live DOM Injection
- • Form Validation
Интерактивность и Тултипы
Внедрена система Progressive Disclosure. Тултипы с дополнительными тегами автоматически всплывают при наведении на любую область строки, не перекрывая важные данные. Использован эффект backdrop-blur для Apple-эстетики.
- • Full-row Hover Trigger
- • Z-index Management (900+)
- • Backdrop Blur Effects
Слоистая навигация
Разделение глобального и контекстного меню. Прототип поддерживает переходы между основным реестром и детальным видом сервера (server_view.html). Протестированы варианты с Side-bar и Top-menu.
- • Contextual Navigation
- • Sidebar vs Mega Menu
- • Infrastructure Lab Logic
Массовые операции
Контекстная панель Bulk Action Bar. Она скрыта по умолчанию и плавно выплывает снизу только при выборе хотя бы одного чекбокса, позволяя производить групповое редактирование или удаление.
- • State-driven UI
- • Counting Selected Items
- • Floating Action Bar
Гайд по тестированию прототипа
1. Архитектура навигации (Вариант 1 и 2): Прототип позволяет переключаться между двумя концепциями. Сравните Sidebar (Pro-version) для глубокой иерархии объектов и классический Header-menu. Это исследование того, как инженер быстрее находит нужный Rackspace в условиях высокой плотности данных.
2. Интерактивная таблица:
Наведите на любую строку — сработает групповой триггер тултипа. Нажмите на Common Name для имитации перехода в server_view.html.
3. Создание "на лету": Используйте кнопку + Add Object. Новая запись добавится в текущий список без перезагрузки, сохраняя выбранный вами вариант навигации.
4. Массовые действия: Выберите чекбоксами несколько серверов. Появление нижней панели демонстрирует логику работы с групповыми операциями (Bulk Actions).
Эволюция интерфейса и поиск плотности данных
Финальное решение стало результатом серии экспериментов. Ниже представлены промежуточные этапы проектирования, на которых тестировались гипотезы визуального кодирования и информационной архитектуры.
Избыточный акцент
Проверка гипотезы с ярким цветовым кодированием. Отклонено из-за высокого визуального шума, который мешал быстрому сканированию критических данных.
| Status | Common Name | Type | Tags | Asset Tag | Location | |
|---|---|---|---|---|---|---|
| Alert | London server 4 | Server |
production
testing
+3
|
srv503 | Row 1 / L01 | |
| Offline | Beograd router | Router | — | net01 | Unmounted | |
| Active | Moscow KVM Switch | KVM Switch | production | sw0002 | Row 1 / M01 |
Минимализм
Попытка максимально разгрузить интерфейс. Решение отклонено из-за потери разделителей в таблице, что критично для работы системных инженеров. Также съехала иерархия информации, что замедляло восприятие статуса объектов.
| Status | Common Name | Type | Tags | Asset Tag | Location | |
|---|---|---|---|---|---|---|
| Alert | London Server 4 | Server |
production
testing
+3
|
srv503 | Row 1 / L01 | |
| Offline | Beograd router | Router |
production
testing
+3
|
net01 | Unmounted | |
| Active | Moscow KVM Switch | KVM Switch |
production
|
sw0002 | Row 1 / M01 |
Структурный поиск
Тестирование различных вариантов выравнивания, группировки тегов и работы с акцидентными шрифтами для Asset Tags.
| Status | Common Name | Type | Tags | Asset Tag | Location | |
|---|---|---|---|---|---|---|
| Alert | London server 4 | Server |
production
testing
+3
|
srv503 | Row 1 / L01 |
Как создавался этот интерфейс?
Подробный разбор архитектуры, борьба с когнитивной нагрузкой и 3 неудачные итерации в полноценном Case Study.
Читать полный кейс