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

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

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

Полезные советы

Индикаторы панорамирования и полосы прокрутки

• Убедитесь, что возможность сдвига и прокрутки обеспечена перед загрузкой содержимого в ваше приложение.

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

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

   

Одноосное панорамирование (одномерный пэннинг)

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

  • Вертикальная прокрутка для одномерного списка элементов.
  • Горизонтальный сдвиг для сетки элементов.

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

Свободное панорамирование (двумерное перекрытие)

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

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

• Перемещение свободной формы обычно подходит для навигации по изображениям или картам.

Страничный режим

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

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

Логические и ключевые моменты

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

• Если определены ограничения максимального и минимального размера или границы, используйте визуальный отзыв, чтобы продемонстрировать, когда пользователь достигает или превышает эти границы.

Связывание внедренного или вложенного содержимого

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

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

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

  

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

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

Windows 10 Fall Creators Update — изменение поведения По умолчанию вместо выделения текста активное перо теперь прокручивает или панорамирует в приложениях Windows (как и сенсорный экран, сенсорная панель и пассивное перо). Если приложение зависит от предыдущего поведения, можно переопределить прокрутку пера и вернуться к предыдущему поведению. Дополнительные сведения см. в справочном разделе API для класса ScrollViewer.

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

• Мышь, сенсорная панель или активное перо/стилус для того, чтобы щелкнуть стрелки прокрутки, перетащить ползунок прокрутки или щелкнуть в полосе прокрутки.
• Кнопка колесика мыши, чтобы эмулировать перетаскивание поля прокрутки.
• Расширенные кнопки (XBUTTON1 и XBUTTON2), если поддерживается мышью.
• Клавиши со стрелками клавиатуры, чтобы эмулировать перетаскивание поля прокрутки или клавиш страницы, чтобы эмулировать щелчки в полосе прокрутки.
• Используйте сенсорный экран, тачпад или пассивное перо/стилус, чтобы провести пальцами в нужном направлении.

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

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

Типы панорамирования

Windows поддерживает три типа сдвига:

• Одна ось — панорамирование поддерживается только в одном направлении (либо по горизонтали, либо по вертикали).
• Rails — панорамирование поддерживается во всех направлениях. Однако после того, как пользователь пересекает порог расстояния в определенном направлении, то сдвиг ограничен этой осью.
• В режиме Freeform панорамирование поддерживается во всех направлениях.

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

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

На основе обнаруженного устройства ввода доступны два режима панорамирования:

• Индикаторы прокрутки для касания.
• Полосы прокрутки для других устройств ввода, включая мышь, сенсорную панель, клавиатуру и стилус.

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

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

На следующей схеме показаны две панорамируемые области разной длины и их индикаторы панорамирования.

Поведение панорамированияточки привязки при помощи жеста прокрутки вводит инерционное поведение во взаимодействие после снятия сенсорного контакта. При инерции содержимое продолжает сдвигаться до достижения некоторого порогового значения расстояния без прямого ввода от пользователя. Используйте точки привязки для изменения этого поведения инерции.

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

Существует два вида привязок:

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

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

На следующих схемах показано, как панорамирование в определенную точку и отпускание приводит к автоматическому сдвигу содержимого в логическое место.

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

На следующей схеме показана концепция рельсов.

Связывание внедренного или вложенного содержимого

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

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

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

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

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

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

• Пользовательские взаимодействия
• Оптимизация ListView и GridView
• Доступность клавиатуры

Образцы

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

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

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