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

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

  • Статья

Важные API

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

Dos и не

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

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

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

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

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

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

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

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

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

Снимок экрана с пороговым значением выбора или перетаскивания диамбигуации.

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

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

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

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

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

вертикальный сдвиг, одномерный список

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

Выбор

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

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

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

схема, показывающая пороговое значение выделения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очереди

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

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

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

Волочить

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

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

Примеры

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