Проектирование интерфейсного конструктора для платформы 4IT
Немного истории
24 июня 2019 года, я стал сотрудником софтверной компании-разработчика решений для автоматизации внутренних бизнес процессов в «Роснефть» в роли Lead Product Designer. Перед компанией стояли амбициозные цели по пересмотру уже созданных программных решений и объединению их в единую модульную платформу под названием «4IT». Под потребности заказчика, модули могли принимать различные конфигурации и настройки.
Моя задача состояла в Дизайн-лидировании всех проектировочных производственных процессов и создании системы консистентных интерфейсных паттернов, применяемых во всех модулях платформы 4IT.
ПАО НК «Роснефть» было основным заказчиком и инвестором разработки платформы «4IT», но также были планы по выпуску коробочной версии для продажи другим участникам рынка.
«4IT» — молодой продукт и организационно компания напоминала стартап с минимальным уровнем бюрократии и большой свободой действий. Созданием платформы занимался производственный департамент, внутри которого люди делились на команды и работали по Agile спринтами. Каждая команда отвечала за свой микросервис.
Задачи
Возглавить проектирование новой платформы 4IT
•
Нужно было изучить интерфейсное наследие компании, понять какие дизайн-активы есть в распоряжении и сформулировать UX/UI принципы, по которым будет развиваться новая платформа.
•
Все предстоящие работы требовалось описать и спланировать.
Решить вопрос быстрого масштабирования
Сроки разработки первой версии платформы ставились сжатые. Поэтому следовало автоматизировать рутинные операции и подготовить шаблоны, которые бы позволили обеспечить высокую скорость проектирования и наладить бесперебойную поставку дизайн-артефактов, отвечающих высоким стандартам качества. С решением таких задач хорошо помогают интерфейсные конструкторы, которые в среде BigTech называют дизайн-системами.
Автоматизировать создание новых цветовых тем интерфейсов под брендинг заказчика
Одним из требований к интерфейсам платформы было гибкое изменение цветовой схемы. На старте нужны были две цветовые темы. Первая, основанная на фирменных цветах из бренд-бука «Роснефть», а вторая — «4IT», которая имела маркетинговое значение, так как для свободной продажи требовалось наличие базовой фирменной оболочки для демонстраций ключевых функций платформы.
2. Аудит legacy-интерфейсов
Когда я присоединился к проекту «4IT», уже существовали две запущенные рабочие системы и одна в состоянии прототипа. Релизные системы работали в закрытом контуре заказчика и имели обширную пользовательскую базу: СУЗ (Система Управления заявками), ITSM (IT Service Management). Прототип — CMDB (Configuration Management Database). СУЗ функционировал на старом интерфейсном движке c очень низкой производительностью. При взаимодействии с СУЗ ощущалась очень медленная обратная связь и общая визуальная перегруженность интерфейса.
CMDB — свежее решение построенное на современном фреймворке Angular + Google Material Design. CMDB работает быстро, но местами встречаются странные интерфейсные паттерны. Чувствуется, что интерфейс CMDB — дело рук программистов и аналитиков.
Для обоих систем характерна очень высокая плотность данных и обилие табличных представлений. При формировании гайдлайнов нужно будет учитывать эти параметры как критичные.
Пример legacy-интерфейса модуля платформы — СУЗ (система управления заявками)
Пример legacy-интерфейса модуля платформы — CMDB (Configuration Management Data Base)
Поскольку технологический стек для атомарных компонентов уже был задан в прототипе модуля CMDB (Angular + Google Material Design), то для оптимизации и ускорения всех работ, было решено оставить его как базу, но модифицировать элементы, которые бы позволили добавить уникальности на фоне стандартных визуальных решений фреймворка. Усилия следовало потратить на цветовую гамму, компоновочные решения таблиц, шаблоны лейаутов.
Аудит дизайн-ресурсов компании выявил наличие брендбука, в котором были описаны базовые визуальные константы фирменного стиля: цвета и элементы сопроводительной графики. Эту информацию можно было использовать как основу для создания цветовых палитр для интерфейсов.
Первые грубые наброски основных экранов дали представление о том, как фирменные цвета могут быть интерпретированы и интегрированы в UI‑оболочку платформы. В эскизах были заложены прото-принципы для: распределения цветовых масс, управления акцентами, конструкции навигации и разделения на функциональные зоны. Ниже приведены примеры черновиков для: панели авторизации, стартовых страниц модулей/разделов.
Панель авторизации
Стартовая страница модуля СУЗ
Стартовая страница модуля CMDB
Стартовая страница портала, объединяющего все модули платформы
Наброски на основе бренд-цветов из фирменного стиля
Перед тем как формировать детальные карты цветовых токенов, следовало проверить как брендовые цвета реагируют на осветление и затемнение. На этом этапе сформировалось представление о том, какие оттенки более применимы для использования в интерфейсе.
Например, жёлтые оттенки не стоило затемнять методом смещения по цветовому пространству в тёмную область, так как это давало грязные тона. Интерфейс с такой палитрой воспринимается тусклым, невзрачным, неприятным. Лучший эффект достигается смещением жёлтого по тональной шкале в красное.
При попытке использовать механистический подход задания шагов градации, выяснилось, что оттенки (в цветовой модели HSL), с одинаковыми значениями Saturation и Lightness, но с разным смещением по Hue, воспринимаются не одинаково осветлёнными или затемнёнными.
Известно, что человеческий глаз различает больше градаций светлых оттенков чем тёмных. Этот эффект иллюстрирует тестовая серая шкала, в которой шаг градации равен 9 единицам Lightness. В оттенках 1 и 2 разница заметна, а в тёмных 10 и 11 — нет. Требуется нелинейно осветлять/затемнять тон ближе к границам шкалы.
Черновик палитры для темы Rosneft
Черновик палитры для базовой темы 4IT
Наброски на основе бренд-цветов из фирменного стиля
Перед тем как формировать детальные карты цветовых токенов, следовало проверить как брендовые цвета реагируют на осветление и затемнение. На этом этапе сформировалось представление о том, какие оттенки более применимы для использования в интерфейсе.
Например, жёлтые оттенки не стоило затемнять методом смещения по цветовому пространству в тёмную область, так как это давало грязные тона. Интерфейс с такой палитрой воспринимается тусклым, невзрачным, неприятным. Лучший эффект достигается смещением жёлтого по тональной шкале в красное.
При попытке использовать механистический подход задания шагов градации, выяснилось, что оттенки (в цветовой модели HSL), с одинаковыми значениями Saturation и Lightness, но с разным смещением по Hue, воспринимаются не одинаково осветлёнными или затемнёнными.
Известно, что человеческий глаз различает больше градаций светлых оттенков чем тёмных. Этот эффект иллюстрирует тестовая серая шкала, в которой шаг градации равен 9 единицам Lightness. В оттенках 1 и 2 разница заметна, а в тёмных 10 и 11 — нет. Требуется нелинейно осветлять/затемнять тон ближе к границам шкалы.
Черновик палитры для темы Rosneft
Черновик палитры для базовой темы 4IT