Дизайн Компания Everpoint
2 717

Как мы искали готовую 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тало меньше недопонимания. Основные элементы и механики зафиксированы, обсуждений и уточнений требуют только самые сложные конструкции.

#Everpoint #геомаркетинг #ux #картография #ГИС #веб_дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "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": 26, "favorites": 61, "is_advertisement": false, "subsite_label": "design", "id": 58149, "is_wide": false, "is_ugc": true, "date": "Mon, 11 Feb 2019 13:18:18 +0300" }
{ "id": 58149, "author_id": 210116, "diff_limit": 1000, "urls": {"diff":"\/comments\/58149\/get","add":"\/comments\/58149\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/58149"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

13 комментариев 13 комм.

Популярные

По порядку

Написать комментарий...
5

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

Ответить
4

Схерали лейбл должен быть по краю?

Ответить
1

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

Ответить
0

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

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
2

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

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

Ответить
0

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

Ответить
0

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

Ответить
2

Какая библиотека в час ночи?

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }