Представляем дизайн-систему Camunda

Фото: mibro (Pixabay) — https://pixabay.com/photos/motorsport-helmet-4505168/

Источник: Camunda•

Представляем дизайн-систему Camunda

В Camunda 8.10 появилась новая дизайн-система, которая обеспечивает единую основу для наших продуктов. Боковая панель и «хлебные крошки» помогают не терять контекст вашей работы, а доступность заложена в основу с самого начала. Доступно в SaaS и Self-Managed.

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

Начиная с Camunda 8.10, мы представляем новую систему дизайна, которая обеспечивает общую основу для наших продуктов.

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

Доступно как в SaaS, так и в Self-Managed.

Навигация, которая сохраняет контекст вашей работы

Бизнес-команды и разработчики работают в одном интерфейсе. Моделирование, эксплуатация и мониторинг используют единую модель навигации, поэтому те, кто проектирует процесс, также могут видеть, как он выполняется.

Боковая панель изменяется в зависимости от вашего местоположения, поэтому на ней всегда отображается то, что актуально для вашей текущей работы:

  • В масштабах всей организации. Переход к вашим рабочим пространствам, окружениям и общим ресурсам.
  • Внутри рабочего пространства. Просмотр проектов, настроек и окружений этого рабочего пространства.
  • Окружения и их приложения. Для каждого окружения перечисляются его приложения, такие как Operate и Tasklist, поэтому вы можете открыть нужное прямо оттуда.
  • Пространство для работы. Сворачивайте боковую панель, когда вам нужно больше места, например при моделировании процесса.

Путь навигации («хлебные крошки») в заголовке показывает, где вы находитесь:

  • Ваш путь с первого взгляда. Просмотр вашего рабочего пространства, проекта и файла в верхней части страницы.
  • Переход на уровень выше. Выберите любую часть пути, чтобы вернуться к ней, например из файла к его проекту.
  • Быстрое переключение. Переключайтесь на другое рабочее пространство или проект прямо из «хлебных крошек».

Доступность с самого начала

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

Именно поэтому доступность является частью системы дизайна и применяется во всей Camunda:

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

Доступность — это часть процесса проектирования и создания новых функций, и мы тестируем ее в рабочих процессах, которые люди используют каждый день.

Используйте систему дизайна в своих приложениях

Создаете решения на базе API Camunda? Система дизайна является общедоступной — @camunda/design-system в npm, под лицензией Apache 2.0, задокументирована в Storybook. Адаптируйте интерфейс под своих пользователей, сохраняя при этом привычные стили и паттерны Camunda.

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

Что дальше

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

Изучите пакет , ознакомьтесь с или посетите репозиторий на GitHub, чтобы следить за ходом работы и внести свой вклад.

О чём эта статья