EverGIS UI

Библиотека UI-компонентов, заточенная под нужды геоинформационных систем

Компания Everpoint специализируется на создании продуктов для работы с пространственными данными (далее ГИС - ГеоИнформационныеСистемы). До 2018 года процесс разработки продуктов для каждого из заказчиков был максимально индивидуальным. Это касалось в том числе создания интерфейса: под каждый проект заново проектировались и разрабатывались все элементы интерфейса, при этом в сложных и "долгоиграющих" проектах за счет их постоянного развития даже могли встречаться дубликаты однотипных компонентов, которые выглядят и ведут себя по-разному.

Задачи:

В первую очередь я исследовал потребности компании в интерфейсных решениях и доступные UI-библиотеки.
Основные выводы были такими:

Было решено разработать собственную UI-библиотеку.

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

Параллельно с проектированием компонентов я рисовал набор иконок. Как и в случае с компонентами, специфика ГИС требует большого количества кастомных иконок для обозначения действий, присущих только ГИС. Так что использование готовых сетов иконок не имело смысла.

Геоинформационные системы имеют ряд особенностей, требующих специализированных UI-компонентов и конструкций

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

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

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

Библиотека не только улучшила внешний вид продуктов компании и повысила консистентность их дизайна, но и усовершенствовала рабочий процесс:

• Основные UI-паттерны больше не нужно изобретать заново, они уже зафиксированы в виде готовых компонентов
• Часть работы можно отдать на аутсорс. Готовая библиотека и правила ее использования минимизируют риск получить нежизнеспособный в рамках проекта фрагмент
• Между дизайнерами и разработчиками cтало меньше недопонимания. Основные элементы и механики зафиксированы, обсуждений и уточнений требуют только самые сложные конструкции