Руководство по скольжению по диагонали

Applies to Windows and Windows Phone

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

См. этот компонент в действии как часть нашей серии Компоненты приложений от А до Я.:  Взаимодействие с пользователем: сенсорный ввод и многое другое

Рекомендации

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

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

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

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

Схема процессов выбора и перетаскивания.

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

Снимок экрана, показывающий процессы выбора и перетаскивания.

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

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

Снимок экрана, показывающий порог различения операций выбора и перетаскивания.

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

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

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

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

 

Выделение

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

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

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

Схема пороговой области выделения.

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

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

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

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

    Снимок экрана, показывающий анимацию выделения.
  3. Элемент выбран. Чтобы переместить элемент, переопределите поведение при выборе с помощью жеста перетаскивания.

    Снимок экрана, показывающий анимацию перетаскивания.

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

Подборка

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

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

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

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

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

Очереди

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

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

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

Перетаскивание

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

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

Связанные разделы

Для проектировщиков
Руководство по стандартному взаимодействию с пользователем
Руководство по функции сдвига
Проектирование взаимодействия с сенсорным экраном
Для разработчиков (HTML)
Краткое руководство: указатели
Краткое руководство: жесты и операции модели DOM
Краткое руководство: статические жесты
Краткое руководство: жесты операций
GestureRecognizer.CrossSliding
Для разработчиков (XAML)
Краткое руководство: сенсорный ввод
Краткое руководство: обработка ввода от указателя
GestureRecognizer.CrossSliding
Для разработчиков (приложения среды выполнения Windows на DirectX и C++)
Реакция на сенсорный ввод (DirectX и C++)
GestureRecognizer.CrossSliding
Примеры
Пример Input: Gestures and manipulations with GestureRecognizer
Пример прокрутки, сдвига и масштабирования на HTML
Пример Input: Instantiable gestures (с использованием MSGesture)
Ввод: пример событий пользовательского ввода на XAML
Пример прокрутки, сдвига и масштабирования на XAML
Пример сенсорного ввода в DirectX

 

 

Показ:
© 2014 Microsoft