UX/UI Дизайн интерфейса сервиса

---

iDns - проект разрабатываемый под кураторством компании HUAWEI. Ответственная задача для разработчиков. iDns - разветвленный и достаточно сложный российский сервис, предназначенный для работы инженеров и администраторов, обслуживающих сервера в зоне своей ответственности...

В настоящее время отдельные узлы серверов объединены в группы по подчиненности и географическому расположению оных. т.е. узлы объединены в группы, группы в более крупные кластеры, кластеры соподчинены городам, в которых эти узлы расположены…

Задача разработчиков заключается в том, чтобы создать удобный инструмент, с помощью которого будет легко видеть состояние системы в целом, по группам, а также отдельных ее узлов, оперативно вводить необходимые изменения в настройки, устранять ошибки в работе серверов. Моя же задача в рамках этого проекта сводится к разработке дизайна сервиса. Т.е. сделать сервис наглядным, привлекательным, функциональным и удобным в работе пользователям.

О сервисе и задаче в целом

Расскажу немного о самом сервисе, чтобы дать примерное представление о том как тут все устроено.

Настройка, мониторинг и еще раз настройка – вот что является основной функцией данного сервиса, а для удобства оного создана карточная структура создания новых блоков интерфейса.

Мониторинг осуществляется с помощью диаграмм и графиков, представляющих в наглядной форме всю информацию о состоянии системы. Оператор может самостоятельно настраивать необходимые для отображения на графиках параметры, используя преднастройки и отдельные части формул, подставляя их через библиотеку в код формулы графика, легко и быстро переходить к нужному временному промежутку для более детального изучения оного…

Все проблемные моменты выносятся в верхнюю панель, в которой отображается экстренная информация, требующая внимания оператора. Возникновение тех или иных проблем тем самым получает мгновенный отклик и позволяет переходить к месту возникновения ошибки для ее детального изучения и исправления.

Сложность разработки заключается в том, что нужно компактно и наглядно представить конкретному пользователю всю необходимую для его работы информацию, объем которой чрезвычайно велик, при этом без потери наглядности ее структурировать, сделать легко воспринимаемой, сразу выделить наиболее критичные моменты работы системы.

Короче это интересная, хотя и достаточно объемная задача из области UX/UI дизайна.

Решение задачи дизайнера

По идее, все дальнейшие шаги для специалиста давно известны и предсказуемы.

Создаю дизайн-систему для данного проекта – определяю цветовую гамму, шрифты и прописываю стили для используемых в проекте фирменных цветов и типографику заголовков и текстовых блоков различного уровня и назначения, далее следуя правилам "атомной структуры дизайна" создаю начальные элементы – кнопки, поля, элементы, формируя с их помощью общую визуальную картину которой хочу добиться.

Изначально определяю, что в интерфейсе будет править воздух, пространство, легкость. Для этого использую для дизайна элементов градиенты, тени созданные с помощью векторной отрисовки, которые при переносе в вид кода будут иметь минимальный вес и придадут контенту легкость, воздушность и объемность.

Ибо использовать здесь "плоский" дизайн" - это логично и хорошо, но учитывая, что интерфейс будет по большей части насыщен именно цифровой информацией с обилием таблиц и логов, не хотелось бы видеть его скучным… А применяемый прием позволит придать отображению на экране пользователя более живой вид… Для этой же цели использую несложную анимацию функциональных элементов. Пользователю должно быть приятно и понятно взаимодействовать с интерфейсом.

Для того, чтобы было легко применять дальнейшие правки использую мастер-компоненты, которые задают стиль всему дизайну интерфейса в целом. С помощью созданных в Figma мастер-компонентов в дальнейшем легко можно менять оформление с помощью изменения скинов, базовых компонентов и изменения фирменных цветов сразу во всех макетах…

Поведение элементов прописываю в виде интерактивных компонентов, привожу в систему изменение цвета, прозрачности (которую, по большему счету и не использую во избежание) интерактивных элементов (например, кнопок, манипуляторов) при наведении, клике, активности – все тонкости должны отображаться для всех элементов одинаково, например, если при наведении на кнопку ее цвет меняется, то и на всех других интерактивных элементах при наведении должен отображаться этот эффект таким же способом. Для этого можно использовать простую таблицу в которой перечисляем интерактивные элементы и варианты их состояния и приводим в систему все изменения для них, дабы сделать поведение элементов в целом предсказуемым и наглядным.

Постепенно двигаясь от простого к сложному, создаю все более функционально сложные элементы будущего интерфейса – использую кнопки и пр. для создания сначала полей инпутов, дропов и пр., формирую шапки и наполнение таблиц, карточек и прочего. Разумеется, приходится не раз возвращаться и править элементы, что-то изменяя, уточняя, добиваясь визуального единства всей дизайн-системы в целом. Коллеги программисты и инженеры, работающие со мной в одной команде, помогают, бо мы постоянно на связи друг с другом, обсуждаем, что и как лучше будет сделать. Некоторые блоки переделываем полностью, по мере наступления ясности и новых идей в оформлении и реализации интерфейса сервиса. Работать с этими профессионалами легко и приятно.

Как бы заключение…

Пользуясь сервисом пользователи сами выбирают вид, структуру и прочие настройки своего интерфейса, т.е. у каждого оператора могут быть разные нужные ему преднастройки для мониторинга и управления системой своих серверов. Получается, что нужна определенная универсальность решения для каждого возможного варианта, при этом она не должна спорить с общим концептом сервиса в целом.

Как швейцарский нож с большим количеством лезвий. Взяв его в руки, вы сами вправе решать какие лезвия необходимо использовать для решения вашей задачи в данный момент, при этом в руках вы держите универсальный инструмент, заключенный в компактную и удобную оболочку.

Впрочем, не вижу смысла здесь перечислять все достоинства и недостатки созданной системы, работа над ней бо еще не закончена… В настоящее время продолжается проектирование и разработка + оптимизация сервиса, после утверждения проекта он перейдет в фазу тестирования для выявления и устранения недочетов работы сервера в реальном цифровом поле…

Здесь представляю в качестве рабочего проекта и демонстрации собственного подхода к проектированию сложносочиненного интерфейса.

Разработка дизайн-системы интерфейса. Иллюстрация 1. Оформление технических страниц

Разработка дизайн-системы интерфейса. Иллюстрация 2. Стили и типографика

Разработка дизайн-системы интерфейса. Иллюстрация 3. Дизайн всплывающих сообщений

Разработка дизайн-системы интерфейса. Иллюстрация 4. Дизайн модальных окон

Разработка дизайн-системы интерфейса. Иллюстрация 5. Управление навигацией сервиса

Разработка дизайн-системы интерфейса. Иллюстрация 6. Решение дизайна системы мониторинга

Разработка дизайн-системы интерфейса. Иллюстрация 7. Дизайн страницы настройки системы

Разработка дизайн-системы интерфейса. Иллюстрация 8. Изменение настроек сервера

Разработка дизайн-системы интерфейса. Иллюстрация 9. Отображение работы серверов

Разработка дизайн-системы интерфейса. Иллюстрация 10. Настройка новых элементов мониторинга

Разработка дизайн-системы интерфейса. Иллюстрация 11. Табличные данные параметров

Разработка дизайн-системы интерфейса. Иллюстрация 12. Настройка графика отображения параметров сервера

Разработка дизайн-системы интерфейса. Иллюстрация 13. Техническая страница мониторинга в отсутствии данных

Разработка дизайн-системы интерфейса. Иллюстрация 14. Настройка вывода ошибок и предупреждений для узла

Разработка дизайн-системы интерфейса. Иллюстрация 15. Вариант с выводом массива предупреждений

Разработка дизайн-системы интерфейса. Иллюстрация 16. Страница узла с табами его настроек и параметров

Разработка дизайн-системы интерфейса. Иллюстрация 17. Визард пошаговой настройки узла

Разработка дизайн-системы интерфейса. Иллюстрация 18. Визард пошаговой настройки узла

Разработка дизайн-системы интерфейса. Иллюстрация 19. Дизайн страницы журнала логов

Разработка дизайн-системы интерфейса. Иллюстрация 20. Интерфейс модального окна настройки отображаемых параметров

Разработка дизайн-системы интерфейса. Иллюстрация 21. Технические страницы настройки узла

---

Просмотров: