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


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

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

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

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

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

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

Цели

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сессия Build 2019

Следующий сеанс на конференции Microsoft Build демонстрирует адаптивные карточки в различных вариантах использования.

[!ВИДЕО [https://www.youtube.com/embed/wT1yFr_j6IM]