Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
В этом руководстве содержатся рекомендации по пользовательскому интерфейсу (UX) для разработчиков, создав интерфейс пользовательского интерфейса на основе MCP в Microsoft 365 Copilot. В ней рассматриваются шаблоны для создания собственных, согласованных и ориентированных на задачи взаимодействий, которые плавно интегрируются в поток общения в Copilot.
Принципы пользовательского интерфейса
Создание отличного агента Copilot с широкими возможностями пользовательского интерфейса на основе MCP означает предоставление сфокусированного, общения, который кажется родным для Copilot. Агенты Copilot должны чувствовать себя полезными расширениями беседы, всплывая правильное действие в нужное время, а не полные приложения перестроены внутри Copilot.
Предоставление ценности для беседы
- Агент должен предоставлять большее значение внутри Copilot, чем в качестве автономного пользовательского интерфейса.
- Используйте естественный язык, контекст потоков и многоэтапное взаимодействие, чтобы обеспечить рабочие процессы, которые были бы сложными или неэффективными в традиционной модели навигации.
- Проектирование интерфейсов, которые используют преимущества беседы, а не реплицируют существующие потоки.
Извлечение возможностей и не репликация интерфейсов
Избегайте переноса полного интерфейса приложения в Copilot. Вместо этого определите высокоценные атомарные возможности, которые можно предоставить в качестве инструментов. Каждая возможность должна:
- Требовать только минимально необходимые входные данные.
- Возвращает структурированные и надежные выходные данные.
- Включите модель для уверенного определения следующего шага.
Дизайн, чтобы чувствовать себя родным для Copilot
- Используйте систему проектирования, компоненты и шаблоны взаимодействия Copilot, чтобы обеспечить беспроблемный и предсказуемый интерфейс.
- Согласованность снижает когнитивную нагрузку, повышает предсказуемость и сводит к минимуму потребность пользователей в изучении новых моделей взаимодействия.
Сохранение человеческого контроля
Доверие является основой для внедрения на предприятии. Пользователи должны оставаться конечными лицами, принимающими решения, особенно если действия влияют на корпоративные данные. Предоставить:
- Четкое представление о действиях агента
- Явные подтверждения конфиденциальных операций
- Прозрачные результаты создания, изменения или обновления
Плотность масштабирования с намерением
Адаптируйте визуальный объект пользовательского интерфейса к непосредственным нуждам пользователя.
- Используйте встроенное мини-приложение для кратких сводные данные и действия высокого уровня.
- Используйте расширенное представление для задач, в которых пользователю требуется большая недвижимость для работы вместе с чатом.
Области чата
Области чата — это основной способ взаимодействия пользователей с агентами, созданными с помощью пакета SDK для приложений Copilot, определяющим, как приложение отображается и ведет себя в беседе Copilot.
При проектировании для Copilot следуйте следующим основным принципам:
- Беседа в первую очередь: Чат остается основной моделью взаимодействия.
- Прогрессивная сложность: Запустите упрощенный режим. Развертывайте только при необходимости.
- Сохранение контекста: Пользователи не должны терять контекст беседы.
- Clarity вместо дублирования: текст пользовательского интерфейса приложения и модели должен дополнять друг друга, а не повторять содержимое.
В настоящее время Copilot поддерживает две основные области чата. Каждая поверхность служит определенной цели и должна выбираться на основе сложности и глубины взаимодействия.
- Все приложения должны поддерживать встроенный режим, в котором встроенные мини-приложения отображаются перед созданным ответом модели.
- Параллельный режим — это необязательная поверхность, которую можно использовать при необходимости более широких взаимодействий.
Встроенный режим
Встроенный режим — это область чата в беседе по умолчанию в Copilot. Встроенный не мини-приложение. Он улучшает беседу, не заменяет его.
Когда следует использовать встроенный режим
Встроенный вариант рекомендуется для:
- Предварительные версии (документы, изображения, черновики)
- Подтверждения
- Простые действия
- Быстрые запросы на принятие решений
Встроенные интерфейсы должны оставаться краткими и идеально вписываться в одну прокрутку ответа.
Макет встроенного режима
- Заголовок агента: Определяет агент ответа и устанавливает контекст.
- Встроенное мини-приложение: Используется для отображения структурированного содержимого, предварительных просмотров или элементов управления действиями.
- Ответ модели: После мини-приложения отображается короткое сообщение, созданное моделью, в которое предлагается изменения, дальнейшие действия и связанные действия.
Встроенное мини-приложение
Встроенные мини-приложения отображаются непосредственно в потоке чата, что позволяет пользователям просматривать информацию и выполнять действия, не выходя из беседы. Они предоставляют быстрые подтверждения, простые действия или визуальные материалы.
- Название: Включите заголовок, если карта основан на документе или содержит элементы с родительским элементом
- Развернуть в параллельном представлении: Используйте для открытия параллельного режима, если карта содержит широкие возможности мультимедиа или интерактивности.
- Действия: Ограничьте двумя действиями, размещенными в нижней части карта. Действия должны выполняться как в беседе, так и в вызове средства.
Рекомендации по взаимодействию
- Сохраняйте фокус на взаимодействии: Избегайте многоэтапных потоков, вложенной навигации или глубокой конфигурации. Если задача требует итерации, сравнения или расширенного редактирования, перейдите к параллельному.
- Показывать сводки, а не системы: Встроенные отображаются предварительные версии, а не полные приложения. Избегайте внутренней прокрутки, разбиения на страницы, вкладок, фильтров или многоуровневой группировки.
- Сделать состояние явным: Встроенные взаимодействия должны предоставлять четкие системные отзывы, такие как состояние загрузки, отключенное состояние, подтверждение успеха, состояние ошибки с параметром восстановления. Никогда не доверяйте только текст модели для передачи состояния системы.
- Сохранить поток беседы: Мини-приложение должно удобно разместиться в одной прокрутке ответа. Он не должен доминировать в окне просмотра. Он должен дополнять отклик модели, а не конкурировать с ним.
Параллельный режим (необязательно)
Параллельный режим предоставляет расширенную иммерсивную рабочую область, которая отображается рядом с беседой. Он предназначен для более широких рабочих процессов, которые не могут быть эффективно доставлены в встроенной поверхности. В отличие от встроенного режима, оптимизированного для упрощенного взаимодействия, параллельный режим создает выделенную рабочую область для более глубокого взаимодействия с сохранением контекста беседы.
Параллельный режим является необязательным и должен использоваться намеренно.
Когда следует использовать параллельный режим
Используйте параллельный режим, когда интерфейс требует следующего:
- Многофакторное редактирование или настройка
- Итеративные рабочие процессы с постоянным состоянием
- Сложные визуальные макеты (таблицы, холсты, панели мониторинга)
- Расширенные задачи проверки или сравнения
- Полнофункциональная разработка (разработка документов, редактирование макета, структурированные входные данные)
- Взаимодействие на уровне рабочей области за пределами одной прокрутки
- Если задача может быть выполнена в кратком и однозаворочном взаимодействии, используйте вместо этого встроенный режим.
Параллельный макет
- Панель беседы: Чат Copilot, который остается основным источником намерения и управления.
- Chiclet карта. Если режим параллельной работы активен, исходное встроенное мини-приложение сворачивается в компактный карта беседы, сохраняя контекст с развернутой рабочей областью.
- Заголовок параллельной панели: Отображает удостоверение агента (значок и имя) и включает параметр передачи для полного приложения.
- Рабочая область приложения: Большая поверхность, отображаемая MCP для редактирования, просмотра и управления структурированным содержимым. Это контекстная рабочая область в Copilot, а не автономная оболочка приложения.
- Контекстные элементы управления: Элементы управления для конкретных задач в рабочей области (например, средства редактирования, форматирование, масштабирование, экспорт).
Рекомендации по взаимодействию
- Сохраните контекстную рабочую область: Параллельный режим предоставляет специализированную рабочую область для конкретных задач, а не полную оболочку приложения. Избегайте глобальной навигации, систем с несколькими вкладками, панелей параметров или несвязанных функций. Если интерфейс похож на весь продукт SaaS, он превышает область.
- Сохраните чат в качестве основного: Беседа остается источником намерения и управления. Пользователи должны иметь возможность продолжать общение в чате, пока открыт параллельный режим, задавать уточняющие вопросы в середине задачи и просматривать рассуждения Copilot вместе с рабочей областью.
- Область действия активной задачи: Параллельный режим должен поддерживать один согласованный рабочий процесс. Избегайте переключения между несвязанными сущностями и запуска вложенных интерфейсов. Если требуется несколько рабочих процессов, разделите их на отдельные поверхности или действия.
- Сделать состояние явным: Встроенные взаимодействия должны предоставлять четкие системные отзывы, такие как состояние загрузки, отключенное состояние, подтверждение успеха, состояние ошибки с параметром восстановления. Никогда не доверяйте только текст модели для передачи состояния системы.
- Поддерживайте прогрессивную эскалацию: Параллельный режим следует ввести намеренно. По умолчанию не следует выполнять параллельное выполнение простых предварительных просмотров или быстрых подтверждений.
Лучшие методики
✅ Сохранение потока беседы
Оставьте встроенные мини-приложения упрощенными и ориентированными на действия. Поддержка до двух основных действий (например, "Утвердить", "Изменить", "Скачать"). Если задача требует глубокой навигации, многофакторных рабочих процессов или интенсивной настройки, перейдите в параллельный режим.
✅ Использование компонентов Fluent для встроенной настройки
Встроенный опыт должен чувствовать себя как естественное продолжение Copilot. Используйте компоненты, интервалы, типографику и маркеры Fluent 2 , выровненные copilot, чтобы обеспечить визуальную согласованность и согласованность взаимодействия.
✅ Предоставление обработки состояния мини-приложения
Мини-приложения должны предоставлять четкие системные отзывы, такие как состояние загрузки, состояние отключения, подтверждение успешного выполнения и состояние ошибки с параметром восстановления.
❌ Не используйте мини-приложение, чтобы выглядеть как полное приложение
Встроенный режим должен выглядеть как естественное расширение чата, а не целое приложение, встроенное в него.
❌ Не дублируйте функции Copilot в мини-приложении
Избегайте повторного воссоздания возможностей чата (ввод запросов, предложения, сводки по рассуждениям, элементы управления повторными попытками) внутри мини-приложения. Дублирование создает путаницу, визуальный шум и фрагментированные модели взаимодействия.
❌ Избегайте глубокой навигации в мини-приложениях
Мини-приложения не должны содержать несколько вкладок или более глубокую навигацию. Рассмотрите возможность разделения этих карточек на отдельные карточки или действия инструментов.
❌ Избегайте больших макетов с большим количеством прокрутки
Встроенные мини-приложения должны быть краткими и наглядными. Избегайте вертикальной прокрутки в мини-приложении. Высота должна иметь размер мини-приложения, а не размер приложения. Если содержимое требует прокрутки, сложных таблиц или подробного редактирования, перейдите в параллельный режим.
❌ Не дублируйте содержимое в тексте модели и мини-приложении
Не повторяйте одни и те же сведения как в мини-приложении, так и в сообщении модели.
Рекомендации по визуальному проектированию
Визуальная согласованность и согласованность взаимодействия имеют решающее значение для взаимодействия с пользователем Copilot. Ожидается, что приложения будут соответствовать системе проектирования Fluent, чтобы пользователи пользовались предсказуемым поведением, знакомыми элементами управления и согласованными взаимодействиями между приложениями. Такая согласованность помогает пользователям формировать доверие, уверенно перемещаться между рабочими процессами и безопасно выполнять действия в нескольких приложениях в Copilot.
Рекомендации по теме Fluent Copilot
Создавайте красивые и согласованные возможности Майкрософт с помощью комплектов пользовательского интерфейса Fluent 2. Встроенные в Figma комплекты пользовательского интерфейса Fluent 2 содержат ресурсы проектирования, которые сопоставляются с библиотеками кода. Это означает беспроблемную передачу от проектирования к разработке.
Цвет
Кнопка
Шрифтовое оформление
Radius
Интервал
Глобальная заполнение карта приложения должна составлять 24 пикселя.
