Как мы переосмыслили каждый элемент панели управления
В первой части я рассказал о стратегических решениях при редизайне ispmanager: почему мы решили переделывать продукт и как создавали дизайн-систему с нуля.
Сегодня — о конкретных UX/UI решениях. Покажу, как мы переосмыслили каждый элемент интерфейса, сохранив функциональность и добавив современности, а также расскажу об инновации — персонализации через цветовую модель OKLCH. 
Иллюстрация 1: Новый интерфейс. Форма авторизации
UX-решения: баланс доступности и функциональности
Основная сложность заключалась в сохранении количества видимой информации на экране. Увеличение размеров компонентов для улучшения доступности неизбежно снижает информационную плотность интерфейса.
Пользователи обязательно отметили бы это в негативных отзывах, поэтому потребовались нестандартные решения. Там, где простая оптимизация пространства не помогала, появлялись новые функции.
Вкладки
Проблемы старого решения
При увеличении количества вкладок часть скрывалась, появлялась горизонтальная прокрутка. Пользователи:
- Теряли понимание открытых страниц
- Не могли быстро идентифицировать активную вкладку из-за небольшого размера
- Жаловались на захламление таб-бара
- Просили возможность массового закрытия вкладок
Новое решение
При заполнении таб-бара вкладки сжимаются до минимальной ширины, а при её достижении часть перемещается в выпадающий список с возможностью массового закрытия.
Визуальные улучшения:
- Увеличенный размер с четким разделением групп
- Активная вкладка визуально интегрирована со страницей
- Каждая вкладка получила уникальную иконку, соответствующую разделам меню
Иллюстрация 2: Вкладки
Основное меню
Меню в развернутом виде претерпело только косметические изменения. Основные UX-улучшения касаются компактного режима.
Старые проблемы свернутого меню:
- Требовалось наводить курсор на каждую иконку для понимания структуры
Новые решения:
- Умное раскрытие: При наведении курсора меню раскрывается полностью
- Защита от случайных срабатываний: Добавлена задержка и «мертвая зона» между меню и контентом
- Поиск: При использовании меню остается открытым до клика по найденному разделу
- Мобильная адаптация: На мобильных устройствах меню полностью скрыто и активируется кликом
Семантическое улучшение: Иконка бургера заменена на кнопку — это точнее отражает функциональность.
Иллюстрация 3: Поведение меню в разных состояниях
Боковая панель быстрого доступа
Новая боковая панель для кнопок, ранее расположенных в хедере справа от таб-бара. Это решение:
- Увеличило пространство для вкладок
- Заложило основу для будущих функций быстрого доступа
Иллюстрация 4: Боковая панель с открытым диспетчером загрузок
Адаптивные таблицы и списки
Списки претерпели наиболее серьезные изменения — полностью новый дизайн и значительные UX-улучшения.
Иллюстрация 5: Новый список
Обновленный хедер списков
- В дочерних списках кнопка «Назад» перемещена из тулбара к заголовку
- Кнопки действий («Закрепить», «Добавить в избранное») объединены в выпадающий список (кебаб-меню)
- Кнопка «Настройки списка» перемещена из таблицы в хедер
- Поиск по списку компактно интегрирован в тулбар
- Кнопка настройки фильтров теперь рядом с поиском
Сохранение информационной плотности
Проблема: Таблице хотелось дать больше воздуха для легкого считывания, но это уменьшало количество отображаемых данных.
Решение: Переключатель плотности отображения в правом верхнем углу, позволяющий выбирать между комфортным и компактным режимами.
Иллюстрация 6: Компактный вид таблицы
Мобильная адаптивность
При достижении минимальной ширины ячеек таблица трансформируется в раскрывающиеся блоки:
- Изначально в свернутом состоянии
- Видимы только чекбоксы, заголовки, тоглы, кнопка контекстного меню
Данные отображаются списком внутри каждого блока
Иллюстрация 7: Трансформация таблицы
- Модернизированный дашборд
- Карточки быстрых действий
- Увеличено количество карточек с добавлением горизонтальной прокрутки
- Ранее часть карточек скрывалась в выпадающем списке
- Обновленные виджеты
- Полностью новый дизайн всех виджетов
- Больше разнообразия и адаптивности
Усилена визуальная иерархия ссылок, кнопок и вкладок
Иллюстрация 8: Новый дашборд
Переработанные формы
В формах изменения касались в основном UI и добавления адаптивности при сохранении привычного UX.
Исключение — форма создания сайтов:
- Блок сводной информации перемещен из левой части в правую
- Теперь выполняет функцию навигации
Добавлена адаптивность для списков внутри форм
Иллюстрация 9: Форма создания сайта
Обновленный файловый менеджер
Ключевые изменения касаются UX навигации: хлебных крошек, копирования пути, редактора пути, избранных каталогов и кнопки возврата.
Хлебные крошки:
- Ранее были оторваны от таблицы и находились над тулбаром
Теперь часть хедера таблицы и образуют единое целое со списком
Кнопка возврата:
- Раньше выглядела как строка таблицы, создавая неудобство
Сейчас логично размещена в хедере рядом с хлебными крошками
Иллюстрация 10: Переработанный файловый менеджер
Обновленный раздел модулей
Функциональных изменений практически не было. Визуальные улучшения:
- Кнопки «Удалить» и «Настройки» стали более выразительными
- Переместились в один ряд с кнопками «Установить» и «Купить»
Улучшена визуальная иерархия
Иллюстрация 11: Обновленные раздел «Модули»
Раздел «Все разделы»
- Изменения коснулись исключительно визуальной части:
- Раздел пересобран из компонентов основного меню
Поддерживается единообразие визуального языка по всему интерфейсу
Иллюстрация 12: Обновленные раздел «Все разделы»
Персонализация через OKLCH
Ключевое нововведение: в ispmanager появилась персонализация по цвету. Пользователи могут менять оттенок и насыщенность цвета в настройках темы, при этом показатели контрастности не проседают. Это стало возможным благодаря использованию новой цветовой модели OKLCH. В сравнении с другими моделями, она:
- Обеспечивает более предсказуемое управление цветом
Поддерживает стабильную контрастность при изменении параметров
Нюанс: Если пользователь использует устаревший браузер, модель не работает. В таких случаях:
- Блокируем возможность изменения цвета в настройках
Предлагаем обновить браузер
Иллюстрация 13: Примеры персонализации — разные цветовые схемы и настройки темы
Иллюстрация 14: Дашборд. Темная тема
Заключение
Сложно делать выводы, когда проект еще не завершен. После релиза планирую третью часть о результатах юзабилити тестов, о том, как изменились метрики и что говорят пользователи о новом интерфейсе.
А пока — делитесь опытом в комментариях. Сталкивались с похожими вызовами? Как решали проблему сохранения информационной плотности при увеличении размеров элементов?