Редактор мозаик видео
О проекте
Сервис, позволяющий:
  • Создавать и настраивать мозаики (раскладки) видеопотоков с камер видеонаблюдения;
  • Хранить мозаики в виде дерева соответствующего иерархии производств;
  • Создавать и настраивать видеопотоки.

Пользователи:
Администраторы, диспетчеры, мастера, начальники цехов
Моя роль
  • Сбор и анализ требований;
  • Проработка и отрисовка страниц сервиса;
  • Разработка интуитивно понятной навигации, чтобы пользователи могли легко просматривать и редактировать данные;
  • Обеспечение корректного отображения интерфейса на десктопных экранах различной ширины: от 1280px до 1920px по ширине;
  • Согласование макетов;
  • Передача макетов разработчикам;
  • Дизайн-ревью.
Проблемы и решения
Проблема
Редактор мозаик должен быть гибким: должна быть возможность делать горизонтальные и вертикальные ячейки видео и максимально использовать пространство, должна быть возможность делать одни ячейки крупнее других. Мозаика не должна выглядеть хаотично.
Решение
Каждую ячейку можно растянуть на соседние ячейки,
тем самым объединив их области. Таким образом можно создавать как горизонтальные, так и вертикальные ячейки.
Проблема
Должна быть возможность быстрого просмотра и привязки непривязанных мозаик к существующим страницам.
Решение
Немодальное окно со списком непривязанных мозаик. Мозаики добавляются на страницы с помощью Drag-and-drop.
Проблема
Дерево с иерархией производств может иметь много уровней, нужна быстрая и удобная навигация и комфортный просмотр уровней.
Решение
Для быстрой навигации добавлен поиск по вхождению и кнопка разворачивания/сворачивания дерева. Так же возможно навигироваться в правой области с таблицей проваливаясь внутрь папок и страниц. Имеются хлебные крошки для быстрого возврата на нужный уровень. Для комфортного просмотра дерева добавлена возможность растягивать панель с деревом по ширине.
Проблема
При большом количестве ячеек на небольших экранах элементы внутри ячейки (название камеры, кнопки, текст) могут наезжать друг на друга.
Решение
Ограничение названия камеры одной строкой, далее оно обрезается. Так же есть возможность скрыть правую панель со свойствами и списком камер, что увеличивает область работы с ячейками и соответственно увеличивает сами ячейки.
Темная тема
Для быстрого переключения на темную тему используются переменные цветов заложенные в дизайн-системе.
Затрачено на дизайн
80+ часов
Спроектировано
120+ фреймов
обсудить проект
Я открыт для сотрудничества. Давайте обсудим ваши идеи!