Взаимодействие с пользователем от А до Я (HTML)

Статья
12/12/2015

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример содержит две страницы (сверху вниз): домашнюю страницу и вторую страницу, которая содержит форму с различными элементами управления платформы и средство настройки цветов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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