Esri выпускает дизайн-систему для разработки приложений

Introducing Calcite Design System

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

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

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

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

Дизайн-система Calcite (Кальцит) и сопроводительная документация доступны на https://developers.arcgis.com/calcite-design-system.
Дизайн-система Calcite (Кальцит) и сопроводительная документация доступны на https://developers.arcgis.com/calcite-design-system.

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

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

После выхода в свет бета-версии этой системы все желающие получили доступ для ознакомления с ней и могут попробовать применить ее в своей работе. Всё необходимое вам на начальном этапе вхождения в систему, доступно на сайте разработчиков по адресу https://developers.arcgis.com/calcite-design-system/. Там вы найдете такие ресурсы, как руководства по использованию, передовые методы (что можно и нельзя), правила написания и копирования кодов, документацию по специальным возможностям и справочник по API компонентов. Там же представлены кнопки для конфигурирования компонента, визуализации гибкости его свойств, светлую/темную тему подложки, варианты расположения справа или слева для локализации интерфейса. По мере настройки кнопок и свойств компонента вы можете скопировать код из того, что вы изменили, и вставить его прямо в свое приложение.

Система предлагает более 700 монохромных значков точечных символов для использования на картах.
Система предлагает более 700 монохромных значков точечных символов для использования на картах.

Как и другие подобные современные средства, система дизайна Esri постоянно развивается по мере развития технологии ArcGIS, появления доступных инструментов для веб-разработки и лежащих в их основе технологий. Поскольку Esri в значительной степени зависит от системы проектирования для создания пользовательского опыта для оформления внешнего вида создаваемых продуктов, библиотека компонентов будет продолжать расти и постоянно совершенствоваться.

Новый Map Viewer использует Calcite для компоновки пользовательского интерфейса и компонентов при создании пользовательского интерфейса. Здесь показан один из примеров использования этой системы.
Новый Map Viewer использует Calcite для компоновки пользовательского интерфейса и компонентов при создании пользовательского интерфейса. Здесь показан один из примеров использования этой системы.

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

Это настраиваемое приложение, созданное с помощью Calcite и ArcGIS API for JavaScript. Вы можете распознать те же компоненты, которые используются в новом Map Viewer.
Это настраиваемое приложение, созданное с помощью Calcite и ArcGIS API for JavaScript. Вы можете распознать те же компоненты, которые используются в новом Map Viewer.

Подробнее о возможностях и элементах этой системы, основных принципах ее использования рассказано в статье «Introducing Calcite Design System (beta release)», опубликованной в блоге Esri.