Ищем разработчика, который без ума от JavaScript и клёвых анимаций

Как мы искали готовую 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тало меньше недопонимания. Основные элементы и механики зафиксированы, обсуждений и уточнений требуют только самые сложные конструкции.
{ "author_name": "Компания Everpoint", "author_type": "self", "tags": ["\u043a\u0430\u0440\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f","\u0433\u0438\u0441","\u0433\u0435\u043e\u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433","\u0432\u0435\u0431_\u0434\u0438\u0437\u0430\u0439\u043d","ux","everpoint"], "comments": 13, "likes": 27, "favorites": 65, "is_advertisement": false, "subsite_label": "design", "id": 58149, "is_wide": false, "is_ugc": true, "date": "Mon, 11 Feb 2019 13:18:18 +0300", "is_special": false }
Объявление на vc.ru
0
13 комментариев
Популярные
По порядку
Написать комментарий...
4

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

Ответить
5

Комментарий удален по просьбе пользователя

Ответить
1

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

Ответить
0

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

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
2

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

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

Ответить
0

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

Ответить
0

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

Ответить
2

Комментарий удален по просьбе пользователя

Ответить
0

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

Ответить

Комментарии

null