---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-02-23
publishYear: 2024
name: Hyperus
title: Дизайн интерфейса системы управления IT-инфраструктурой
excerpt: Проанализировали существующую систему, создали новую архитектуру интерфейса и переработали ключевые экраны.
context: |
[ООО «Гиперус»](https://hyperus.ru/) — компания, которая разрабатывает и внедряет решения для управления IT-инфраструктурой. Их флагманский продукт — одноимённая система для автоматизации мониторинга, администрирования и поддержки серверов и облачных сред.
isNew: true
logo:
src: ~/assets/images/portfolio/hyperus/logo.svg
alt: Hyperus • Логотип
link: https://hyperus.ru/
image: ~/assets/images/portfolio/hyperus/main.png
imageAlt: Собака Павлова • Hyperus • Дизайн интерфейса системы управления IT-инфраструктурой
thumbnail:
src: ~/assets/images/portfolio/cards/hyperus.svg
alt: Собака Павлова • Hyperus • Дизайн интерфейса системы управления IT-инфраструктурой
tags:
- it
- ux-audit
- ui-redesign
- prof
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-аудит](/services/ux-audit) и [UI-редизайн](ui-redesign), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-audit
- collection: services
page: ui-redesign
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: dipol
- collection: portfolio
page: elma
- collection: portfolio
page: geonaft
- collection: portfolio
page: fastvps
- collection: portfolio
page: edms
- collection: portfolio
page: amber
outcome:
title: Некоторые цифры
numbers:
- title: Переработали
number: 5 разделов
text: Обновили дизайн, добавили новую функциональность
- title: Отрисовали
number: 17 подразделов
text: User-flow создания сущностей и карточки самих сущностей
- title: Для дашборда
number: 85 макетов
text: В разных состояниях, при взаимодействии с разными элементами
text2: В разделе «Дашборд» отрисовали работу с таймлайном, добавление виджетов, изменение размеров и т.д. — для двух пользовательских ролей отдельно.
result:
- src: ~/assets/images/portfolio/figma.svg
text: Макеты интерфейса
link: "https://www.figma.com/design/2r5xLkYrvfGOLULDZmvPpv/HYPERUS--Case-?node-id=72-210535"
budget: "> 2 500 000 ₽"
time: "5 месяцев"
review:
text: |
Год назад мы поставили перед «Собакой Павлова» амбициозную задачу — превратить управление сложной IT-инфраструктурой предприятия из «полёта вслепую» в интуитивно понятный «космический корабль». И они совершили невозможное.
Команда не просто проектировала интерфейс — они глубоко погрузились в специфику нашей отрасли, разобрали сотни пользовательских сценариев и создали UI/UX-решения, которые упростили работу с комплексными системами, минимизировали риск ошибок операторов и превратили рутинные процессы в логичные последовательности действий
Особенно впечатлил подход: каждый элемент интерфейса проходил проверку на «тест космонавта» — будет ли понятен в стрессовой ситуации? Не вызовет ли двусмысленности? Не приведёт ли к критическим решениям?
Результат превзошёл ожидания: там, где раньше требовались часы обучения, теперь достаточно интуитивного понимания. Не просто удобный интерфейс — продуманная система управления enterprise-уровня.
*Благодарим команду за профессионализм, терпение к бесконечным правкам и умение переводить сложное на язык простых решений. Готовы к новым «космическим миссиям» вместе!*
person: Филатов Павел,
position: CPO, Гиперус
director: "Проект потребовал глубокой погруженности в специфику бизнеса и существующих процессов."
metadata:
canonical: https://sobakapav.ru/portfolio/hyperus
title: Дизайн интерфейса системы управления IT-инфраструктурой
description: "Провели анализ существующей системы, создали новую архитектуру интерфейса и переработали ключевые экраны."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/hyperus/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Нюансы и особенности](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задача
Упростить управление ИТ-инфраструктурой, сократив время на рутинные операции (развёртывание, мониторинг, устранение неполадок) за счёт интуитивного интерфейса, сокращающего когнитивную нагрузку на администраторов.
<a href="/images/portfolio/hyperus/1.png" target="_blank"></a>
<em>Дашборд. Вариант 1</em>
## <a name="anchor2" />Дизайн-задача
Создать понятный, логичный и адаптированный под задачи пользователей интерфейс. Для этого нужно было:
1. **Проанализировать существующий интерфейс и выявить основные проблемы** — перегруженность, навигационные тупики, неинформативные экраны.
2. **Разработать новую информационную архитектуру** — оптимизировать структуру разделов, перераспределить функциональные блоки и выстроить понятную навигацию.
3. **Адаптировать интерфейс под Ant Design** — использовать компоненты библиотеки для унификации элементов, ускорения разработки и визуальной целостности.
4. **Учесть разные пользовательские роли** — обеспечить администраторам, операторам, руководителя отделов и т.д. удобный доступ к нужным инструментам .
5. **Снизить когнитивную нагрузку** — упростить восприятие интерфейса, сократить путь к действию, улучшить читаемость данных.
<a href="/images/portfolio/hyperus/2.png" target="_blank"></a>
<em>Дашборд. Вариант 2</em>
## <a name="anchor3" />Результат
### Что получилось
Мы обновили интерфейсы и действующих разделов, и тех, что ещё в разработке. Новый дизайн ускоряет выполнение задач, снижает нагрузку на поддержку и упрощает адаптацию новых пользователей.
<a href="/images/portfolio/hyperus/3.png" target="_blank"></a>
<em>Дашборд. Добавление виджета</em>
### Финансовый эффект
Экономия рабочего времени — за счёт улучшенной навигации и оптимизированных сценариев. Точные цифры пока не получили, но уже знаем, что сотрудники тратят меньше времени на выполнение рутинных задач.
<a href="/images/portfolio/hyperus/4.png" target="_blank"></a>
<em>Список доменов</em>
### Артефакты:
- Бизнес-требования.
- Список пользовательских сценариев, основных интерфейсных сущностей и фокусов.
- [Информационно-архитектурная карта интерфейса](https://www.figma.com/design/2r5xLkYrvfGOLULDZmvPpv/HYPERUS--Case-?node-id=3003-27268).
- Поэтапный план работ по редизайну интерфейса, разбитый на 3-4 части, примерно одинаковые по объемы и связанные по смыслу.
- Детальные списки сценариев с отклонениями (по каждой части интерфейса).
- [Макеты интерфейсов](https://www.figma.com/design/2r5xLkYrvfGOLULDZmvPpv/HYPERUS--Case-?node-id=72-210535).
- Библиотека используемых компонентов (Ui-kit).
- Описание логики работы системы.
<a href="/images/portfolio/hyperus/5.png" target="_blank"></a>
<em>Список проектов</em>
### Дополнительно
Помимо макетов интерфейсов продукта, заказчик получил дополнительную пользу: проработанные состояния типовых таблиц, варианты действий с ними, а также описание логики работы фильтров для каждого раздела. Эти материалы стали основой для унификации поведения и повысили согласованность интерфейса.
## <a name="anchor4" /> Нюансы и особенности процесса
Сэкономили время заказчика за счёт экспертизы в команде: один из специалистов хорошо разбирается в сетевых протоколах и работе с базами данных. Это позволило быстро понять контекст, выявить проблемные зоны и приступить к проектированию без длительного погружения и интервью.
<a href="/images/portfolio/hyperus/6.png" target="_blank"></a>
<em>Инстанс, карточка</em>
Поскольку система большая, описывать все пользовательские сценарии сразу было бы слишком трудоемко.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Поэтому команда пошла от обратного — начала проектирование, опираясь на сущности в каждом разделе и те действия, которые пользователи могут с ними совершать: создание, редактирование, удаление и т.п. Такой подход позволил двигаться быстрее и не терять фокус на реальной логике продукта.
<a href="/images/portfolio/hyperus/7.png" target="_blank"></a>
<em>Создание инстанса</em>
Работали напрямую с разработчиками и пользователями, получали обратную связь сразу, без посредников. Сформировав концепты страниц, мы могли тут же свериться с заказчиком и выбрать, какие из них будут реализованы. Это ускорило процесс согласований и проектирования.
<a href="/images/portfolio/hyperus/8.png" target="_blank"></a>
<em>Создание инстанса, базовая конфигурация</em>
<a href="/images/portfolio/hyperus/9.png" target="_blank"></a>
<em>Создание инстанса, конфигурация сети</em>
## <a name="anchor5" />