{"id":7298,"title":"\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0431\u0435\u0440\u0443\u0442 \u0441 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435","url":"\/redirect?component=advertising&id=7298&url=https:\/\/vc.ru\/finance\/287640-predstavte-chto-vy-dolzhny-vernutsya-na-20-let-nazad-v-proshloe-kakie-sovremennye-tehnologii-zahvatite-s-soboy&placeBit=1&hash=4693aaf51fe37b122309350bd15ef7991e11843fbc9183a8a592e9af3c9af557","isPaidAndBannersEnabled":false}

Как мы искали готовую 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": true, "is_ugc": true, "date": "Mon, 11 Feb 2019 13:18:18 +0300", "is_special": false }
0
13 комментариев
Популярные
По порядку
Написать комментарий...

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

4

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

5

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

1

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

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

0

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

1

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

0

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

1

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

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

2

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

0

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

0

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

2

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

0
Читать все 13 комментариев
Microsoft выпустила веб-версию редактора кода VS Code Статьи редакции

Сервис работает без установки приложения или расширений для браузеров.

Делал дизайн, пока говорил по телефону: история Пола Рэнда, который создал логотипы для IBM и Стива Джобса Статьи редакции

Рисовал антифашистский журнал, работал арт-директором в Esquire и делал рекламу на азбуке Морзе.

Пол Рэнд   monitorbox
Путин объявил «нерабочими» дни с 30 октября по 7 ноября с сохранением зарплаты Статьи редакции

Регионы могут сами установить сроки — начать уже с 23 октября.

М.Видео-Эльдорадо получила две награды престижной HR-премии «Хрустальная пирамида»
Sports.ru снял документальный фильм про «Зенит»-2008

В центре внимания — «золотое поколение» футбольного клуба, завоевавшее Кубок и Суперкубок УЕФА в 2008 году.

Трейлер фильма «Зенит-2008. Победная песня»
«Яндекс.Афиша» уже второй год не может вернуть мне деньги за билет

В феврале 2020 года, когда про коронавирус только начали говорить(и его еще не признали пандемией) я купил билет на концерт IAMX в Санкт-Петербурге, который должен был состояться 3 апреля 2020 года.

В Ozon не хотят отменять заказ и возвращать деньги за недоставленный товар при доставке из-за рубежа
Арт-экология. Уличные тренды и успешные городские проекты

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

Ленд-арт объект "Рогатка желаний" на фестивале ленд-арт в Муслюмово фото: организаторы фестиваля
Сделай сам: умная камера для наблюдения за питомцами

Обучаем нейросеть на котиках.

null