Как мы искали готовую UI-библиотеку, но в итоге создали её сами

Разработка простых интерфейсов для сложных систем

Предыстория

В конце 2017 года у нас в Everpoint сложилась следующая ситуация: есть большой опыт реализации самых разнообразных геоинформационных проектов, есть набор технологических решений для эффективной работы с геоданными, который в различных вариациях используется в back-end разработке на таких проектах, а универсальных интерфейсных решений нет. В итоге каждый проект требовал огромного объема однотипных работ по проектированию и разработке интерфейса. То же самое касалось и нашего основного продукта — геоинформационной платформы EverGIS. Каждое усовершенствование, внедрение новой фичи или кастомизация в интересах внешнего заказчика сулили проектирование новых интерфейсов практически с нуля. Кроме того, накопившиеся доработки и разнородные модули в приложении сделали затруднительной его дальнейшее развитие.

В геоинформационных системах (ГИС) важно использовать в интерфейсе привычные, хорошо продуманные элементы, но при этом позволяющие полноценно работать с их богатым функционалом. Это особенно актуально для геосервисов, ориентированных на широкий круг пользователей (журналистов, экономистов, маркетологов, предпринимателей, студентов и т.д.), а не только на профессиональных картографов и геоаналитиков. О влиянии современных трендов UX-дизайна на картографические сервисы подробнее тут.

В архитектуре и интерфейсе EverGIS мы обнаружили пугающее разнообразие. Многие однотипные компоненты были реализованы несколько раз (и в разных местах по-разному), чего-то явно не хватало. А самые сложные места интерфейса оказались полностью уникальными.

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

Изобретать ли велосипед (спойлер: да)

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

Cамое очевидное решение с точки зрения экономии ресурсов — воспользоваться уже существующими библиотеками (material-ui, antdesign и другие). Не для всех из них есть доступные графические библиотеки, но наличие дизайн-гайдов в большинстве случаев компенсирует эту проблему. Но когда мы попытались подобрать подходящую библиотеку, обнаружилось следующее:

  • Популярные UI-библиотеки предназначены для реализации простых форм и страниц с ограниченным набором UI-паттернов. При проектировании интерфейсов для многофункциональных геоинформационных систем (ГИС) гибкости их уже не хватает.
  • В большинстве библиотек такие понятия, как “карта”, “геометрия” и т.д. не фигурируют вообще. Здесь приходится ориентироваться на существующие ГИС и графические редакторы.

Оказалось, что нет ни одной UI-библиотеки, ориентированной на создание ГИС. Что ж, придется сделать ее самим.

Процесс создания

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

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

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

Исходя из принципов атомарного дизайна, мы начали разработку библиотеки с элементарных вещей — общих принципов дизайн-языка (тут мы даже претендуем на дизайн-систему), цветовых схем, cхем анимации, типографики, простейших управляющих компонентов. Предполагалось, что как только будет накоплен достаточный объем готовых компонентов, они будут внедряться в уже существующее приложение, заменяя старые. Однако, внедрение оказалось довольно трудоемким. Кроме того, началась разработка нового публичного геосервиса — EverGIS Online c новым интерфейсом — и мы решили сосредоточиться на применении новой библиотеки именно к нему. От первоначального плана библиотеке достались широкие возможности настройки и кастомизации.

Окно настроек слоя геоданных: до внедрения новых компонентов
Окно настроек слоя геоданных: после внедрения новых компонентов

Что получилось

Спустя год после начала работы (помимо описанных на начальном этапе правил дизайна) у нас есть: библиотека компонентов в Storybook, состоящая более чем из 50 компонентов разного уровня, подробные описания и примеры использования для каждого компонента и библиотека в Sketch — то есть почти все составляющие дизайн-системы. Работы над библиотекой еще не закончены, она растет и развивается.

Текстовое поле ввода
Поле ввода цвета с цветовой шкалой. Специфический компонент для ГИС
Превью символа с указанием точки привязки. Специфический компонент для ГИС
Различные типы нотификации

UI-библиотека успешно применяется в разработке EverGIS Online и помогает нам создавать удобные и легко настраиваемые интерфейсы. Впрочем, не только библиотека обеспечивает развитие проекта, но и разработка EverGIS Online модифицирует библиотеку. Некоторые компоненты, изначально реализованные в стандартном виде, впоследствии были адаптированы под потребности проекта. Что получилось, скоро можно будет опробовать в EverGIS Online.

Работа с картой в EverGIS Online
Настройка классификации цвета в EverGIS Online
Работа с таблицей и измерения на карте в EverGIS Online

Кроме визуальных результатов в виде библиотеки и приложения мы получили приятные бонусы для рабочего процесса в целом. Создание UI-библиотеки положительно повлияло на производительность проектирования и разработки:

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

улучшил тут все вам

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Martin Johnson

он может быть где угодно, каждый свой ад себе выбирает

Ответить
Развернуть ветку
Ilya Shubenok

С масками соглашусь. По крайней мере, на мобилах их отключаю на своих проектах, ибо "автоподстановка" номера с ними работает криво. На компе — спорно. Мне обычно не сложно набрать полный номер без всяких масок.

Имхо, с паддингами все ок. А вот "саксес" да — лучше выделить зеленым, привычнее и понятнее.

Ответить
Развернуть ветку
Антон Подольский

Использование масок - скорее вопрос конкретного проекта. А самой либе возможность работы с масками определенно не помешает.

Ответить
Развернуть ветку
Компания Everpoint
Автор

Использование масок действительно зависит от проекта. Что касается цвета "саксес", то для своих задач мы выбрали синий. А так основные и акцентные цвета мы вынесли в качестве параметров, их можно легко менять.

Ответить
Развернуть ветку
Martin Johnson
Ответить
Развернуть ветку
Rayan Tvin

Тут не про стандарты конечно) и никто кроме команды не знает, что в проекте понадобится. Но UI который сделали — страх, лучше бы чет готовое заюзали))))

Ответить
Развернуть ветку
Антон Макаров

"В конце 2018 года у нас в Everpoint сложилась следующая ситуация"
"Спустя год после начала работы (помимо описанных на начальном этапе правил дизайна) у нас есть"

Как оно там, в конце 2019?!

Ответить
Развернуть ветку
Компания Everpoint
Автор

Исправили опечатку, спасибо)

Ответить
Развернуть ветку
Георгий Хромченко

А где библиотека то?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Компания Everpoint
Автор

Библиотека пока представляет собой набор компонентов для внутреннего пользования. Процесс её создания ещё не закончен, она растёт и развивается вместе с нашим новым продуктом EverGIS Online. Как только мы его выпустим и, соответственно, протестируем на нём библиотеку, обязательно поделимся)

Ответить
Развернуть ветку
10 комментариев
Раскрывать всегда