Поделиться через


Обзор адаптивных карточек

Замечание

Вы создаете сценарии Copilot, Teams или Outlook с помощью адаптивных карточек? Посетите Документационный центр по Adaptive Card, новый единый ресурс для всех ваших потребностей в адаптивных картах! У него есть все ресурсы, которые вы ищете, включая полную документацию для многих новых функций, таких как адаптивный макет, значок, значок, карусель, диаграммы и многое другое!

Адаптивные карточки — это открытый формат обмена карточками, позволяющий разработчикам обмениваться контентом пользовательского интерфейса общим и согласованным способом.

Совершенно новый способ доставки пользовательского интерфейса: адаптивные карточки — это не зависящие от платформы фрагменты пользовательского интерфейса, созданные в ФОРМАТЕ JSON, которые приложения и службы могут открыто обмениваться. При доставке в определенное приложение JSON преобразуется в собственный пользовательский интерфейс, который автоматически адаптируется к его окружающей среде. Он помогает разрабатывать и интегрировать легковесный пользовательский интерфейс для всех основных платформ и фреймворков.

Адаптивные карточки создаются для:

Встречайте пользователей, где они находятся

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

Интеграция с существующими приложениями:

  • Адаптивные карточки Teams: как цифровой концентратор для многих современных работников Teams предлагает несколько точек расширяемости для интеграции приложений. Агент общения с помощью адаптивных карточек может значительно упростить бизнес-рабочие процессы на веб-сайте или через другие каналы.
  • Сообщения с возможностью действий в Outlook: Электронная почта уже давно является важнейшим инструментом для информационного работника, и теперь вы можете доставлять содержимое, на которое можно сразу реагировать, непосредственно в папку "Входящие".
  • Временная шкала Windows: помогите пользователям возобновить свои действия на любом устройстве.

Откройте ваши приложения для расширяемости

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

Установка пакетов SDK для отрисовки >

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

Создавайте карточки где угодно

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

Установка пакета SDK конструктора >

Создание, совместное использование и обнаружение повторно используемых шаблонов

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

Создание повторно используемых шаблонов карточек >

  • Интеграция с расширенными конструкторами: примеры данных позволяют предварительно просмотреть шаблон, не выходя из конструктора.
  • Упрощение рабочих процессов разработки: создайте шаблон в конструкторе, используйте его без служб, а затем вставьте его прямо в конструктор, чтобы внести изменения.
  • Обнаружение и предоставление общего доступа к шаблонам с помощью службы REST: служба шаблонов находит шаблон для данных и даже заполняет его.
  • Мы хотим услышать от вас: у нас еще нет даты выпуска для этой предварительной версии, но мы ждем, чтобы узнать от вас.

Как они работают

Авторы карточек описывают свое содержимое как простой объект JSON. Затем содержимое можно отрисовывать внутри хост-приложения, автоматически адаптируясь к его внешнему виду и стилю.

Например, Contoso Bot может создавать адаптивную карточку через Bot Framework, а при доставке в Skype она будет выглядеть и чувствовать себя как карточка Skype. Когда эта же полезная нагрузка отправляется в Microsoft Teams, она будет напоминать Microsoft Teams. По мере того как всё больше хост-приложений начинают поддерживать адаптивные карточки, тот же самый payload будет автоматически интегрироваться в этих приложениях, оставаясь при этом полностью естественным для них.

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

Цели

Цели адаптивных карточек:

  • Переносимая — для любого приложения, устройства и фреймворка пользовательского интерфейса
  • Open — библиотеки и схемы являются открытым исходным кодом и общими
  • Низкая стоимость — легко определить, легко использовать
  • Expressive — нацелен на создание нишевого контента, который разработчики хотят реализовать
  • Чисто декларативный — код не нужен или разрешен
  • Автоматически стилизованы — по руководствам пользовательского интерфейса и фирменного стиля ведущего приложения

Для авторов карточек

Адаптивные карточки отлично подходят для авторов карт:

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

Для владельцев опыта

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

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

Основные принципы проектирования

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

Семантика вместо пиксельного совершенства

Мы стремились насколько это возможно к семантическим значениям и концепциям, в отличие от идеально точного пиксельного макета. Примеры семантического выражения отображаются в цветах, размерах и в таких элементах, как FactSet и ImageSet. Все это позволяет хост-приложению принимать более обоснованные решения о реальных элементах интерфейса и восприятии.

Авторы карточек владеют содержимым, хост-приложение определяет внешний вид и взаимодействие

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

Держите его простым, но экспрессивным

Мы хотим, чтобы адаптивные карточки были выразительными и универсальными, но мы не хотим создавать фреймворк пользовательского интерфейса. Цель состоит в том, чтобы создать промежуточный слой, который будет "достаточно выразительным", насколько Markdown выразителен для документов.

Акцентируя внимание на том, чтобы сохранить его простым и экспрессивным, Markdown создал простое и согласованное описание содержимого документа. Таким же образом, мы считаем, что адаптивные карточки могут создавать простые, экспрессивные средства описания содержимого карточки.

Если сомневаетесь, оставьте это в стороне

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