Рекомендации по перекрестному слайду

Основные API

• Перекрестное скольжение
• CrossSlideThresholds
• Windows.UI.Input

Используйте перекрестный слайд для поддержки выделения с помощью жеста прокрутки и перетаскивания (перемещения) с жестом слайда.

Что нужно и чего не следует делать

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

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

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

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

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

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

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

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

Используйте перекрестный слайд для списков или коллекций, которые прокручиваются в одном направлении. Дополнительные сведения см. в разделе "Добавление элементов управления ListView".

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

Выбор

Выделение — это маркировка без запуска или активации одного или нескольких объектов. Это действие аналогично одному щелчку мыши или клавише SHIFT и щелчку мыши на одном или нескольких объектах.

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

Помимо порогового значения расстояния выбор перекрестного слайда ограничен областью порогового значения 90°, как показано на следующей схеме. Если объект перетаскивается за пределы этой области, он не выбран.

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

На следующем снимке экрана показано, как работает самообнаружающая анимация.

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

   

2. Выберите элемент с помощью жеста прокрутки (вверх или вниз).

   

3. Элемент теперь выбран. Переопределите поведение выделения с помощью жеста скольжения для перемещения элемента.

   

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

Корзина выбора

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

• Элементы можно выбрать из нескольких мест.
• Можно выбрать множество элементов.
• Действие или команда зависит от списка выбора.

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

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

Текущий выбор также следует очистить, если корзина выбора не используется, а другой элемент в списке или коллекции активируется. Например, если выбрать сообщение в папке "Входящие", область предварительного просмотра обновляется. Затем, если выбрать второе сообщение в папке "Входящие", выбор предыдущего сообщения отменяется, а панель предварительного просмотра обновляется.

Queues

Очередь не эквивалентна списку корзины выбора и не должна рассматриваться как такая. Основные различия включают:

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

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

Drag

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

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

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

Samples

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

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

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