Реакция на взаимодействия с пользователем (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
Узнайте о платформе взаимодействия с пользователем, в том числе источниках ввода (сенсорный экран, сенсорная панель, мышь, перо, клавиатура), режимах (сенсорная клавиатура, колесико мыши, стирающая кнопка пера и т. д.), а также типах взаимодействия с пользователем, поддерживаемых в Windows, приложениях Магазина Windows и приложениях Магазина Windows Phone.
Обновления в Windows 8.1: В Windows 8.1 введен ряд обновлений и улучшений в API ввода с помощью указателя. Подробнее см. в разделе Изменения API для Windows 8.1.
Мы разъясняем, как основные функциональные возможности ввода и взаимодействия предоставляются бесплатно со встроенными элементами управления языковых платформ (приложения на JavaScript, приложения на C++, C# или Visual Basic, а также приложения на C++ с DirectX), как совместно использовать шаблоны взаимодействия на разных языковых платформах и как настраивать взаимодействие с пользователем.
С помощью руководств, рекомендаций и примеров мы покажем вам, как в полной мере использовать возможности взаимодействия в Windows для разработки приложений с интуитивно понятным и привлекательным пользовательским интерфейсом, обеспечивающим эффект погружения.
Совет Информация в этом разделе относится к разработке приложений на JavaScript.
О разработке приложений на C++, C# или Visual Basic можно узнать из раздела Реакция на взаимодействие с пользователем (XAML).
О разработке приложений на C++ с DirectX можно узнать из раздела Реакция на взаимодействие с пользователем (DirectX и C++).
Предварительные требования: Если вы начинающий разработчик приложений на JavaScript, изучите следующие разделы, чтобы получить представление об описываемых здесь технологиях.
Создание первого приложения Магазина Windows на JavaScript
Схема создания приложений Магазина Windows на JavaScript
Дополнительные сведения о событиях см. в разделах Краткое руководство: добавление элементов управления HTML и обработка событий и Захват событий и восходящая маршрутизация событий с помощью событий DOM
Компоненты приложения от начала до конца: Дополнительные сведения об этой функциональности см. в нашей серии Компоненты приложения от начала до конца.
Взаимодействие с пользователем от А до Я (HTML)
Настройка взаимодействия с пользователем от А до Я (HTML)
Рекомендации по взаимодействию с пользователем:
Библиотеки элементов управления платформы (HTML и XAML) предоставляют все механизмы взаимодействия с пользователем, используемые в Windows, в том числе стандартные взаимодействия, анимированные физические эффекты и визуальную обратную связь. Если вы не планируете настраивать механизмы поддержки взаимодействий, используйте стандартные элементы управления.
Если элементов управления, предоставляемых платформой, недостаточно, то, чтобы обеспечить привлекательный и современный единый механизм взаимодействия для всех режимов ввода, вы можете воспользоваться следующими рекомендациями. В основном эти рекомендации описывают сенсорный ввод, но также применимы к вводу с сенсорной панели, мыши, клавиатуры и пера.
- Руководство по стандартным способам взаимодействия с пользователем
- Рекомендации по скольжению по диагонали
- Руководство по визуальному масштабированию и изменению размеров
- Руководство по функции сдвига
- Рекомендации по вращению
- Руководство по контекстному масштабированию
- Рекомендации по выделению текста и изображений
- Рекомендации по нацеливанию
- Руководство по визуальной обратной связи
Примеры: Примеры использования этой функциональности см. в коллекции примеров приложений.
Пример "User interaction customization, start to finish"
Ввод: пример возможностей устройства
Пример прокрутки, сдвига и масштабирования в HTML
Ввод: пример обработки событий указателя DOM
Ввод: жесты и манипуляции с GestureRecognizer
Ввод: пример упрощенного рукописного ввода
Ввод: пример рукописного ввода
Обзор платформы взаимодействия с пользователями Windows 8
Проектируйте приложения с учетом возможностей сенсорного управления. Сенсорный ввод поддерживается все большим количеством разнообразных устройств, а сенсорное управление является основополагающим аспектом интерфейса Windows.
Так как касание — основной режим взаимодействия для пользователей Windows и Windows Phone, эти платформы оптимизированы для сенсорного ввода, чтобы приложения быстро и точно реагировали на действия пользователя и были простыми в использовании. Можете не сомневаться, что старые, проверенные способы ввода (такие как мышь, перо и клавиатура) полностью поддерживаются и функционально согласованы с сенсорным вводом (см. раздел Жесты, манипуляции и взаимодействия). Для многих пользователей скорость, точность и тактильная обратная связь традиционных методов ввода остаются более привычными и привлекательными. Эти уникальные способы взаимодействия никак не пострадали.
Будьте изобретательны при разработке взаимодействия с пользователем. Обеспечьте поддержку максимального диапазона возможностей и параметров — и ваши приложения будут иметь успех у самой широкой аудитории, привлекая к себе больше пользователей.
От встроенных элементов управления до полной настройки — в основе платформы взаимодействия с пользователем лежит иерархия функциональных уровней с возрастающими возможностями и гибкостью.
Встроенные элементы управления
Воспользуйтесь преимуществами встроенных элементов управления для обеспечения единого взаимодействия с пользователем, которое отлично подходит для большинства приложений Windows и Windows Phone.
Встроенные элементы управления изначально оптимизированы под сенсорную технологию, но вместе с тем они обеспечивают единообразное и увлекательное взаимодействие с пользователем во всех режимах ввода. Они поддерживают всеобъемлющий набор жестов: нажатие и удерживание, касание, проведение пальцем, прокрутка, сжатие, растяжение, поворот. Сочетая их с прямыми манипуляциями, такими как сдвиг, масштабирование, поворот, перетаскивание и реалистичная инерция, можно реализовать убедительное и захватывающее взаимодействие, в котором последовательно воплощаются рекомендации в масштабе всей платформы Windows.
Подробнее о библиотеках элементов управления см. в разделе Добавление элементов управления и содержимого.
Представления
Оптимизируйте взаимодействие с пользователем, настроив параметры сдвига, прокрутки и масштабирования в представлениях ваших приложений. Представление приложения контролирует то, как пользователь выполняет доступ к вашему приложению с его содержимым и управляет ими. Представления также обеспечивают различное поведение, такое как инерция, отскок от границы содержимого и точки прикрепления.
Параметры сдвига и прокрутки управляют навигацией в рамках отдельного представления, когда его содержимое не умещается в одном окне просмотра. Отдельным представлением может быть, например, страница журнала или книги, структура папок на компьютере, библиотека документов или фотоальбом.
Параметры масштабирования относятся как к визуальному масштабированию, так и элементу управления SemanticZoom. Контекстное масштабирование — это оптимизированный под сенсорную технологию метод представления большого количества взаимосвязанных данных или содержимого в пределах отдельного представления и навигации по таким данным. В нем используются два различных режима классификации (масштаба). Это похоже на сдвиг и прокрутку в отдельном представлении. Сдвиг и прокрутка могут использоваться в связке с контекстным масштабированием.
Для изменения логики сдвига, прокрутки и масштабирования вы можете использовать представления приложения и перечисленные ниже свойства каскадных таблиц стилей (CSS), атрибуты модели DOM и события модели DOM. Так можно обеспечить взаимодействие более плавное, чем это возможно при обработке событий указателя и жестов.
| Поверхность API | Свойства CSS | Атрибуты DOM | События DOM |
|---|---|---|---|
| touch-action указывает, можно ли управлять заданным регионом посредством сдвига и масштабирования. | |||
| Сдвиг/прокрутка | |||
| Масштабирование | msContentZoomFactor | onmscontentzoom | |
| То и другое | onmsmanipulationstatechanged | ||
Сведения о представлениях приложения см. в разделе Определение макетов и представлений.
Сведения о масштабировании см. в разделах Руководство по визуальному масштабированию и изменению размеров или Руководство по контекстному масштабированию.
Подробнее о сдвиге и прокрутке см. в разделе Руководство по функции сдвига.
События указателя и жестов модели DOM
Указатель — это универсальный тип ввода с унифицированным механизмом событий. Он предоставляет базовую информацию, такую как экранные координаты, для активного источника ввода, которым может быть сенсорный экран, сенсорная панель, мышь или перо. Жесты варьируются от простых статических взаимодействий, например касания, до более сложных операций, таких как масштабирование, сдвиг и поворот. Дополнительные сведения см. в разделе Жесты, манипуляции и взаимодействия.
Примечание
Статические события жестов срабатывают по завершении взаимодействия. Динамические события жестов информируют о взаимодействии, которое выполняется в данный момент. Динамические события жестов запускаются, когда пользователь касается элемента, и продолжаются до тех пор, пока пользователь не отрывает палец или взаимодействие не отменяется.
Доступ к событиям указателя и жестов позволяет использовать язык шаблонов сенсорного ввода Windows 8 для следующих целей:
- Игры
- Пользовательские элементы управления и визуальные элементы обратной связи
- Пользовательские режимы взаимодействия
Воспользуйтесь преимуществами встроенного распознания жестов, предоставляемого через следующие события жестов модели DOM:
| Тип | События жестов DOM |
|---|---|
| Общие события | MSManipulationStateChanged |
| События указателя | |
| Статические события жестов | |
| Динамические события жестов |
Подробнее о работе с событиями жестов и указателя см. в разделе Краткое руководство: обработка указателя и Краткое руководство: базовая обработка жестов DOM.
Настройка взаимодействия с пользователем
Чтобы полностью настроить взаимодействие своего приложения и управлять им, используйте API среды выполнения Windows. Кроме настраиваемого взаимодействия с пользователем, эти API поддерживают дополнительные параметры конфигурации и особое оборудование, например мыши с правой кнопкой, кнопкой-колесиком, колесиком с поддержкой горизонтальной прокрутки и кнопками "Х", а также перья с кнопками и стирающими наконечниками.
Большинство API взаимодействия предоставляются типами Windows.UI.Core, Windows.UI.Input и Windows.UI.Input.Inking, с предоставлением данных устройства ввода через Windows.Devices.Input.
Наиболее полезными при работе с жестами и операциями управления будут для вас классы GestureRecognizer, PointerPoint и PointerPointProperties.
Прежде чем модифицировать взаимодействие с пользователем, вводя новые или измененные жесты или операции, стоит подумать о следующем:
- Нет ли стандартного жеста, который обеспечивает необходимое вашему приложению взаимодействие? Не создавайте собственный жест для масштабирования или сдвига, когда достаточно адаптировать ваше приложение для поддержки или интерпретации существующего жеста.
- Оправдывает ли польза от нового жеста потенциальную утрату единообразия приложений?
- Требует ли жест особых характеристик оборудования, например по числу контактов?
- Нет ли такого элемента управления (например, SemanticZoom), который предоставляет нужное вам взаимодействие? Если элемент управления сам по себе способен обрабатывать пользовательский ввод, нужно ли создавать новый жест или операцию?
- Обеспечивает ли новый жест или операция плавное и естественное взаимодействие с пользователем?
- Хорошо ли продумано взаимодействие? Если взаимодействие основано на таких вещах, как число контактов, скорость, время (не рекомендуется) и инерция, убедитесь, что эти ограничения и зависимости единообразны и легко обнаруживаются. Например то, как пользователи интерпретируют "быстро" и "медленно", может напрямую сказаться на функциональности приложения и впечатлениях пользователя.
- Не зависят ли жест или манипуляция от физических способностей пользователя? Предоставляют ли они специальные возможности?
- Не будет ли достаточно команды на панели приложения или другой команды в пользовательском интерфейсе?
В общем, создавайте собственные жесты и манипуляции, только если существует четко определенное требование и если ни один основной жест не поддерживает ваш сценарий.
Подробнее о настраиваемых взаимодействиях см. в разделе Краткое руководство: статические жесты и Краткое руководство: жесты управления.
Связанные разделы
Понятия