Настройка взаимодействия с пользователем от А до Я (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Устройства ввода, поддерживаемые приложениями Магазина Windows

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

Примечание Мы рекомендуем по возможности использовать библиотеки элементов управления платформы (HTML и XAML). Элементы управления в этих библиотеках предоставляют все механизмы взаимодействия с пользователем, используемые в Windows 8.1, в том числе стандартные взаимодействия, анимированные физические эффекты, визуальную обратную связь и специальные возможности. Если вы не планируете изменять стандартные механизмы поддержки взаимодействий, используйте стандартные элементы управления.

Приложения Магазина Windows могут обрабатывать ввод с различных устройств, включая сенсорный экран, сенсорную панель, мышь, перо и клавиатуру. Кроме того, они могут обрабатывать ввод для различных режимов устройств ввода — например, для сенсорной клавиатуры, колесика мыши и стирающей кнопки пера. В то время как другие платформы главным образом ориентированы на сенсорный ввод, вы можете создать тот вид приложения Магазина Windows, который вы хотите: развлекательные приложения и приложения для работы, инновационные гибридные приложения для компьютеров, ноутбуков, планшетов и почти любого существующего (и пока не существующего) форм-фактора.

Если вы ищете дополнительную информацию о пользовательских поведениях взаимодействия, см. статью Взаимодействие с пользователем от А до Я (HTML).

Предварительные требования

Рекомендации, задачи и примеры кода в этой статье относятся к разработке приложений Магазина Windows на JavaScript. Для приложений Магазина Windows на C++, C# или Visual Basic см. статью Настройка взаимодействия с пользователем (XAML).

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

Разработка приложений Магазина Windows на JavaScript

Изучите все особенности приложений Магазина Windows на JavaScript, от начального экрана до макета пользовательского интерфейса и элементов управления.
Создание первого приложения Магазина Windows на JavaScript

Используйте JavaScript вместе с HTML5 и каскадными таблицами стилей (CSS) для создания простого приложения Магазина Windows.

Пример взаимодействия с пользователем

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

Вот краткое описание примера.

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

В этом примере демонстрируются следующие возможности:

Пользовательский элемент управления
Базовая поддержка настройки (HTML и XAML) поведений взаимодействия с пользователем
Настраиваемое обнаружение, распознавание и обработка жестов

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

Этот пример состоит из трех страниц (слева направо): домашняя страница, вторая страница, которая содержит пользовательский элемент управления с поддержкой поворота на базе модели DOM, и третья страница с пользовательским элементом управления, который реализует дополнительные возможности через API Windows.UI.Input GestureRecognizer.

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

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

Планирование приложения

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

Мы рекомендуем при разработке пользовательского интерфейса приложения Магазина Windows уделить особое внимание сенсорному вводу. Сенсорный ввод по своей природе не является точным (требует области ввода) по сравнению с другими типами ввода, которые обычно обладают точностью до пикселя. Элементы управления, оптимизированные для сенсорного ввода, в сочетании с набором взаимодействий API платформы для обработки событий на основе указателя обеспечат одинаковую функциональность на всех устройствах, не требуя значительного объема дополнительного кода.

	Выберите шаблон навигации, наиболее подходящий для вашего приложения и его содержимого. Дополнительную информацию см. в статье Схемы навигации. В примере взаимодействия с пользователем, который прилагается к этому учебнику, мы начнем с шаблона одноуровневой навигации. Скачайте этот шаблон и либо используйте его по мере изучения описанных здесь шагов, либо сразу переходите к использованию шаблона для начала проектирования и разработки вашего приложения.
	Пользовательский интерфейс приложения Магазина Windows от А до Я (HTML). Разработайте и добавьте в макет элементы пользовательского интерфейса и содержимого: окно приложения, всплывающие элементы, диалоговые окна и панели приложения. С помощью рекомендаций и примеров мы поможем вам использовать все преимущества пользовательского интерфейса Windows 8.1 и создать приложения, интерфейс которых будет интуитивно понятен польователю и выполнен в том же стиле, что и в других приложениях Магазина Windows.
	Реакция на взаимодействие с пользователем. Здесь рассказывается о платформе взаимодействия с пользователем, включая источники ввода (сенсорный экран, сенсорная панель, мышь, перо, клавиатура), режимы (сенсорная клавиатура, колесико мыши, стирающая кнопка пера и т. д.), а также типы взаимодействий, поддерживаемые в приложениях Магазина Windows.
	Способы взаимодействия пользователей с устройствами ввода. Сравните общие способы взаимодействия и способы их сопоставления с жестами касания, сенсорной панелью, мышью и клавиатурой.

Устройства ввода

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

	Реакция на взаимодействия с помощью мыши. Для приложений, которые требуют точного указания и щелчков, используйте взаимодействия с помощью мыши.
	Реакция на взаимодействия с помощью клавиатуры. Клавиатура незаменима для пользователей с ограниченными возможностями и для тех, кто считает ее наиболее эффективным средством взаимодействия с приложением.
	Реакция на взаимодействия с помощью пера. Перо можно применять как указывающее устройство и как устройство рисования. Это устройство обычно ассоциируется с функцией рукописного ввода.
	Реакция на ввод с сенсорной панели. Сенсорная панель объединяет в себе свойства мультисенсорного ввода и точного ввода с указывающего устройства, например с мыши. Благодаря такому сочетанию сенсорная панель подходит для применения как в оптимизированном для сенсорного ввода пользовательском интерфейсе Windows 8.1, так и в приложениях для повышения эффективности и классическом интерфейсе.

Разработка взаимодействий

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

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

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

Создайте способ взаимодействия с пользователем с единой функциональностью на всех устройствах.
Руководство по скольжению по диагонали

Обеспечьте поддержку выделения с помощью жеста прокрутки и перетаскивания (перемещения) с помощью жеста перетаскивания.
Руководство по визуальному масштабированию и изменению размеров

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

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

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

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

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

Повысьте удовлетворенность пользователей вашим приложением путем повышенной точности и уверенности касаний.
Руководство по визуальной обратной связи

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

Обработка взаимодействий с пользователем

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

	Краткое руководство: указатели Настройте взаимодействия с пользователем с помощью событий указателя.
	Краткое руководство: жесты и операции DOM Настройте взаимодействия с пользователем с помощью событий модели DOM.
	Краткое руководство: статические жесты Краткое руководство: жесты управления Настройте взаимодействия с пользователем с помощью GestureRecognizer.
	Анимация пользовательского интерфейса Интегрируйте стиль Windows 8 в ваше приложение Магазина Windows с помощью набора анимаций из библиотеки анимации платформы (для событий указателя или для жестов прокрутки) или настройте анимации с помощью переходов, анимаций и преобразований каскадных таблиц стилей уровня 3 (CSS3).
	Реализация специальных возможностей клавиатуры. Многие пользователи с нарушениями зрения или подвижности используют клавиатуру в качестве единственного средства навигации по пользовательскому интерфейсу вашего приложения и для доступа к его функциям. Если ваше приложение не поддерживает доступ с клавиатуры на достаточном уровне, эти пользователи будут испытывать трудности при его использовании или же не смогут использовать его совсем.
	Создание событий касания со специальными возможностями. Реализуйте специальные возможности для сенсорного ввода путем привязки событий указателя к событиям щелчков мышью.
	Проверка специальных возможностей приложения. Используйте средства для проверки специальных возможностей, которые входят в пакет средств разработки программного обеспечения для Windows 8 Inspect и UI Accessibility Checker (AccChecker), чтобы проверить специальные возможности вашего приложения. Если вы намерены объявить в Магазине Windows наличие у вашего приложения специальных возможностей, устраните все ошибки с приоритетом 1, о которых сообщило средство AccChecker с включенными проверками ARIA. Помните:: экранный диктор поддерживает набор пользовательских жестов касания (описываемых в этом разделе) для навигации и чтения содержимого приложения.

Подведение итогов

Сертифицируйте ваше приложение с помощью комплекта сертификации приложений для Windows.

Запустите комплект сертификации приложений для Windows, чтобы обеспечить соответствие вашего приложения требованиям Магазина Windows. Не забывайте делать это после внесения значительных изменений в функциональные возможности приложения.

Готово! Ваша реализация должна быть аналогична примеру взаимодействия с пользователем.

Откиньтесь на спинку стула и насладитесь своим успехом.

Хотите узнать больше?

Планирование приложений Магазина Windows

Какие возможности взаимодействия необходимо предоставить пользователю?

Дополнительная информация о широком диапазоне возможностей, ограниченных возможностей и предпочтений ваших пользователей.

Гибкое проектирование и разные форм-факторы

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

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

Примеры

DOM

API приложения Магазина Windows