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

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

  • Статья

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

Принцип работы

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

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

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

Цели

Цели, которых можно достичь с помощью адаптивных карточек:

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

Для разработчиков карточек

Адаптивные карточки — отличный вариант для разработчиков:

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

Для владельцев интерфейсов

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

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

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

Адаптивная карточки создаются на базе ряда основных принципов, которые помогают вести разработку в соответствии с графиком.

Семантика вместо точности до пикселя

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

Авторы карточек отвечают за контент, а ведущее приложение — за интерфейс

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

Просто, но выразительно

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

На основе принципов простоты и выразительности в Markdown реализовано простое и согласованное описание содержимого документов. Мы надеемся, что адаптивные карточки также станут простым средством описания содержимого, обеспечивающим достаточную выразительность.

Если есть сомнения, лучше повременить

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

Семинар Build 2019

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

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