Рекомендации по визуальной обратной связи

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

Важные API: Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Recommendations

• Попробуйте ограничить изменения шаблона элемента управления непосредственно связанными с вашим намерением разработки, так как обширные изменения могут повлиять на производительность и специальные возможности как элемента управления, так и приложения.
  • Дополнительные сведения о настройке свойств элемента управления, включая свойства визуального состояния, см. в стилях XAML .
  • Дополнительные сведения о внесении изменений в шаблон элемента управления см. в классе UserControl
  • Попробуйте создать собственный пользовательский шаблонный элемент управления, если необходимо внести значительные изменения в шаблон элемента управления. Пример пользовательского шаблона элемента управления см. в примере пользовательского элемента управления "Изменить".
• Не используйте визуализации сенсорного ввода в ситуациях, когда они могут препятствовать использованию приложения. Дополнительные сведения см. в разделе ShowGestureFeedback.
• Не отображайте отзывы, если это абсолютно необходимо. Оставьте пользовательский интерфейс чистым и не загроможденным, не отображая визуальные отзывы, если вы не добавляете значение, которое недоступно в другом месте.
• Не изменяйте поведение визуальной обратной связи встроенных жестов Windows, так как это может создать несогласованный и запутанный пользовательский интерфейс.

Дополнительные рекомендации по использованию

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

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

Это важно

Мы не рекомендуем изменять поведение взаимодействия встроенных жестов.

Отзывы на разных устройствах

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

Используйте ShowGestureFeedback , чтобы задать поведение обратной связи для жестов платформы.

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

Ниже приведены некоторые примеры встроенных визуализаций контактов в Windows.

Визуализация сенсорного ввода	Визуализация мыши или сенсорной панели	Визуализация пера	Визуализация клавиатуры

Визуальные элементы с фокусом высокой видимости

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

Для 10-футового интерфейса, типичного для использования Xbox и телевизора, Windows поддерживает Reveal focus, световой эффект, который анимирует границы фокусируемых элементов, таких как кнопка, когда они получают фокус через геймпад или ввод клавиатуры.

Цветовая символика и настройка

Свойства границы

Существует две части визуальных элементов фокуса высокой видимости: основная граница и вторичная граница. Основная граница толщиной 2px проходит вокруг за пределами вторичной границы. Вторичная граница толщиной 1px располагается по внутренней стороне основной границы.

Чтобы изменить толщину типа границы (основной или вторичной), используйте FocusVisualPrimaryThickness или FocusVisualSecondaryThickness соответственно:

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

Поле является свойством типа "Толщина", поэтому поле можно настроить только на определенных сторонах элемента управления. См. ниже:

Поле — это пространство между внешними границами элемента управления и началом фокусной визуализации вторичной границы. Отступ по умолчанию — 1px от границ элемента управления. Вы можете изменить этот отступ для каждого элемента управления, изменив свойство FocusVisualMargin :

<Slider Width="200" FocusVisualMargin="-5"/>

Отрицательное поле будет толкать границу от центра элемента управления, и положительное поле будет перемещать границу ближе к центру элемента управления.

Чтобы отключить визуальные элементы фокуса на элементе управления полностью, просто отключите UseSystemFocusVisuals:

<Slider Width="200" UseSystemFocusVisuals="False"/>

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

Свойства цвета

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

Чтобы фокусировать визуальные элементы фирменной символики на уровне приложения, переопределите системные кисти:

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

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

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

Связанные статьи

Для конструкторов

• Рекомендации по панорамированию

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

• Пользовательские взаимодействия

Samples

• Базовый пример входных данных
• Пример ввода с низкой задержкой
• Пример режима взаимодействия пользователя
• Пример визуальных элементов фокуса

Архивные примеры

• Входные данные: пример событий ввода пользователей XAML
• Входные данные: пример возможностей устройств
• Входные данные: пример тестирования касания
• Пример прокрутки, сдвига и масштабирования XAML
• Входные данные: пример упрощенного рукописного ввода
• Ввод: пример жестов Windows 8
• Входные данные: пример манипуляций и жестов
• Пример ввода сенсорного ввода DirectX