Руководство по функции сдвигаGuidelines for panning

Сдвиг или прокрутка обеспечивают пользователю навигацию в рамках единого представления, позволяя просматривать содержимое, которое выходит за пределы окна просмотра.Panning or scrolling lets users navigate within a single view, to display the content of the view that does not fit within the viewport. Примеры представлений включают структуру папок компьютера, библиотеку документов или фотоальбом.Examples of views include the folder structure of a computer, a library of documents, or a photo album.

Важные API-интерфейсы : Windows.UI.Input, Windows.UI.Xaml.InputImportant APIs : Windows.UI.Input, Windows.UI.Xaml.Input

РекомендацииDos and don'ts

Индикаторы сдвига и полосы прокруткиPanning indicators and scroll bars

  • Перед загрузкой содержимого в приложение убедитесь, что возможен сдвиг (прокрутка).Ensure panning/scrolling is possible before loading content into your app.

  • Отображайте индикаторы сдвига и полосы прокрутки, чтобы давать подсказки о расположении и размере. Скрывайте их, если в приложении реализован специальный метод навигации.Display panning indicators and scroll bars to provide location and size cues. Hide them if you provide a custom navigation feature.

    Примечание. В отличие от стандартных полос прокрутки индикаторы сдвига являются исключительно источником информации.Note Unlike standard scroll bars, panning indicators are purely informative. Они не предоставляются для устройств ввода, и с ними нельзя производить никаких манипуляций.They are not exposed to input devices and cannot be manipulated in any way.

Сдвиг вдоль одной оси (одномерное переполнение)Single-axis panning (one-dimensional overflow)

  • Применяйте сдвиг вдоль одной оси для областей содержимого, выходящих за одну из границ окна просмотра (вертикальную или горизонтальную).Use one-axis panning for content regions that extend beyond one viewport boundary (vertical or horizontal).

    • Вертикальный сдвиг для одномерного списка элементов.Vertical panning for a one-dimensional list of items.
    • Горизонтальный сдвиг для сетки элементов.Horizontal panning for a grid of items.
  • Не используйте обязательные точки переключения для сдвига по одной оси, если пользователь должен иметь возможность производить сдвиг и останавливаться между точками переключения.Don’t use mandatory snap-points with single-axis panning if a user must be able to pan and stop between snap-points. Обязательные точки переключения гарантируют, что пользователь остановится на точке переключения.Mandatory snap-points guarantee that the user will stop on a snap-point. Вместо этого используйте бесконтактные точки переключения.Use proximity snap-points instead.

Свободный сдвиг (двухмерное переполнение)Freeform panning (two-dimensional overflow)

  • Применяйте сдвиг по двум осям для областей содержимого, которые выходят за обе границы окна просмотра (вертикальную и горизонтальную).Use two-axis panning for content regions that extend beyond both viewport boundaries (vertical and horizontal).

    • Переопределите поведение направляющих и используйте свободный сдвиг для неорганизованного содержимого, которое пользователь, вероятно, будет двигать в различных направлениях.Override the default rails behavior and use freeform panning for unstructured content where the user is likely to move in multiple directions.
  • Свободный сдвиг обычно подходит для переходов внутри изображений и карт.Freeform panning is typically suited to navigating within images or maps.

Представление с разбиением на страницыPaged view

  • Используйте обязательные точки прикрепления, если содержимое состоит из несвязанных элементов или требуется показать какой-либо элемент полностью.Use mandatory snap-points when the content is composed of discrete elements or you want to display an entire element. Это может относиться к страницам книги или журнала, колонке элементов или отдельным изображениям.This can include pages of a book or magazine, a column of items, or individual images.

    • На каждой логической границе должна быть размещена точка переключения.A snap-point should be placed at each logical boundary.
    • Размер каждого элемента должен быть подобран так, чтобы он помещался в области просмотра.Each element should be sized or scaled to fit the view.

Логические и важные точкиLogical and key points

  • Используйте бесконтактные точки прикрепления, если в содержимом присутствуют ключевые точки или логические области, в которых пользователь часто будет останавливаться.Use proximity snap-points if there are key points or logical places in the content that a user will likely stop. Например, это заголовок раздела.For example, a section header.

  • Если указаны максимальный и минимальный размер или границы, с помощью визуальной обратной связи необходимо показать, когда пользователь достигает этих границ или превышает их.If maximum and minimum size constraints or boundaries are defined, use visual feedback to demonstrate when the user reaches or exceeds those boundaries.

Связывание встроенного или вложенного содержимогоChaining embedded or nested content

  • Используйте сдвиг вдоль одной оси (обычно горизонтальной) и макеты столбцов для содержимого на основе текста и сеток.Use single-axis panning (typically horizontal) and column layouts for text and grid-based content. В таких случаях содержимое обычно переносится в оболочку и передается естественным образом от столбца к столбцу и обеспечивает согласованность и обнаружение приложений для Windows.In these cases, content typically wraps and flows naturally from column to column and keeps the user experience consistent and discoverable across Windows apps.

  • Не используйте встроенные области сдвига для отображения текста или элементов списка.Don't use embedded pannable regions to display text or item lists. Поскольку индикаторы сдвига и полосы прокрутки отображаются только при обнаружении ввода внутри такой области, то и взаимодействие с пользователем не является интуитивным и обнаруживаемым.Because the panning indicators and scroll bars are displayed only when the input contact is detected within the region, it is not an intuitive or discoverable user experience.

  • Не помещайте области сдвига одну за другой или друг в друга, если обе они поддерживают сдвиг в одном направлении, как показано ниже.Don't chain or place one pannable region within another pannable region if they both pan in the same direction, as shown here. Это может привести к тому, что родительская область будет непроизвольно сдвигаться при достижении границы сдвига в дочерней области.This can result in the parent area being panned unintentionally when a boundary for the child area is reached. Размещайте плоскости сдвигов перпендикулярно друг другу.Consider making the panning axis perpendicular.

    Дочерняя и родительская области сдвигов, которые прокручиваются в одном направлении.

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

При сенсорном взаимодействии сдвиг с помощью жеста прокрутки или скольжения одним или несколькими пальцами похож на прокрутку с помощью мыши.Panning with touch, by using a swipe or slide gesture with one or more fingers, is like scrolling with the mouse. Сдвиг больше похож на поворот колесика мыши или перетаскивание ползунка полосы прокрутки, чем на щелчок в полосе прокрутки.The panning interaction is most similar to rotating the mouse wheel or sliding the scroll box, rather than clicking the scroll bar. Мы будем называть обе эти операции сдвигом, если они не различаются в API и их не требуется различать в специальном пользовательском интерфейсе Windows для конкретного устройства.Unless a distinction is made in an API or required by some device-specific Windows UI, we simply refer to both interactions as panning.

Изменение поведения при обновлении Windows 10 для дизайнеров По умолчанию, вместо выделения текста активное перо теперь прокручивается и ретуширование в приложениях Windows (таких как сенсорное касание, Сенсорная панель и пассивное перо). Windows 10 Fall Creators Update - Behavior change By default, instead of text selection, an active pen now scrolls/pans in Windows apps (like touch, touchpad, and passive pen). Если ваше приложение зависит от предыдущего поведения, вы можете переопределить прокрутку пера и вернуться к предыдущему алгоритму.If your app depends on the previous behavior, you can override pen scrolling and revert to the previous behavior. Дополнительные сведения см. в разделе справки по API класс ScrollViewer.For details, see the API reference topic for the ScrollViewer Class.

В зависимости от устройства ввода пользователь осуществляет сдвиг соответствующей области с помощью следующих элементов.Depending on the input device, the user pans within a pannable region by using one of these:

  • Мыши, сенсорной панели или активного пера для нажатия кнопки со стрелкой для прокрутки, перетаскивания ползунка полосы прокрутки или щелчка в пределах полосы прокрутки.A mouse, touchpad, or active pen/stylus to click the scroll arrows, drag the scroll box, or click within the scroll bar.
  • Колесика мыши для эмуляции перетаскивания ползунка полосы прокрутки.The wheel button of the mouse to emulate dragging the scroll box.
  • Расширенные кнопки (XBUTTON1 и XBUTTON2), если они поддерживаются мышью.The extended buttons (XBUTTON1 and XBUTTON2), if supported by the mouse.
  • Клавиш со стрелками на клавиатуре для эмуляции перетаскивания ползунка полосы прокрутки или клавиш на странице для эмуляции нажатия полосы прокрутки.The keyboard arrow keys to emulate dragging the scroll box or the page keys to emulate clicking within the scroll bar.
  • Касания, сенсорной панели или неактивного пера для скольжения или прокрутки пальцами в нужном направлении.Touch, touchpad, or passive pen/stylus to slide or swipe the fingers in the desired direction.

Скольжение подразумевает медленное перемещение пальцев в направлении сдвига.Sliding involves moving the fingers slowly in the panning direction. В результате скольжения содержимое передвигается с той же скоростью и на то же расстояние, что и пальцы.This results in a one-to-one relationship, where the content pans at the same speed and distance as the fingers. В результате прокрутки (быстрого скольжения и поднимания пальцев) к анимации сдвига применяются следующие физические эффекты.Swiping, which involves rapidly sliding and lifting the fingers, results in the following physics being applied to the panning animation:

  • Замедление (инерция). Если пользователь убирает пальцы, сдвиг начинает замедляться.Deceleration (inertia): Lifting the fingers causes panning to start decelerating. напоминает торможение на скользкой поверхности);This is similar to sliding to a stop on a slippery surface.
  • Амортизация. Движущая сила сдвига во время замедления вызывает слабый эффект отражения, если достигается точка прикрепления или граница области содержимого.Absorption: Panning momentum during deceleration causes a slight bounce-back effect if either a snap point or a content area boundary is reached.

Виды сдвиговTypes of panning

Windows 8 поддерживает три вида сдвигов.Windows 8 supports three types of panning:

  • Сдвиг по одной оси поддерживается только в одном направлении (горизонтальном или вертикальном).Single axis - panning is supported in one direction only (horizontal or vertical).
  • "Рельсовый" сдвиг поддерживается во всех направлениях.Rails - panning is supported in all directions. Тем не менее, когда пользователь пересекает пороговое значение расстояния в определенном направлении, сдвиг ограничивается этой осью.However, once the user crosses a distance threshold in a specific direction, then panning is restricted to that axis.
  • Свободный сдвиг поддерживается во всех направлениях.Freeform - panning is supported in all directions.

Пользовательский интерфейс сдвигаPanning UI

Взаимодействие сдвига обладает уникальными для каждого устройства ввода особенностями, но в любом случае обеспечивает схожие возможности.The interaction experience for panning is unique to the input device while still providing similar functionality.

Паннабле регионы Поведения регионов паннабле предоставляются в приложении Windows с помощью разработчиков JavaScript во время разработки с помощью каскадные таблицы стилей (CSS).Pannable regions Pannable region behaviors are exposed to Windows app using JavaScript developers at design time through Cascading Style Sheets (CSS).

Есть два режима отображения сдвига в зависимости от обнаруженного устройства ввода.There are two panning display modes based on the input device detected:

  • Индикаторы сдвига для сенсорного ввода.Panning indicators for touch.
  • Полосы прокрутки для других устройств ввода, в том числе мыши, клавиатуры и пера.Scroll bars for other input devices, including mouse, touchpad, keyboard, and stylus.

Примечание. Индикаторы сдвига видны, только когда контактная область касания находится в пределах области, поддерживающей сдвиг.Note Panning indicators are only visible when the touch contact is within the pannable region. Аналогичным образом полоса прокрутки отображается, только когда указатель мыши, курсор пера или фокус клавиатуры находится в области, поддерживающей прокрутку.Similarly, the scroll bar is only visible when the mouse cursor, pen/stylus cursor, or keyboard focus is within the scrollable region.

Индикаторы сдвига. Индикатор сдвига похож на ползунок полосы прокрутки.Panning indicators Panning indicators are similar to the scroll box in a scroll bar. Ширина индикатора сдвига обратно пропорциональна длине отображаемого содержимого. Расположение индикатора сдвига указывает на расположение просматриваемого содержимого относительно всей области просмотра.They indicate the proportion of displayed content to total pannable area and the relative position of the displayed content in the pannable area.

На следующем рисунке показаны две области разной длины с индикаторами сдвига.The following diagram shows two pannable areas of different lengths and their panning indicators.

Две области сдвига разной длины с индикаторами сдвига.

Режимы панорамирования Точки привязки Панорамирование с помощью жеста прокрутки вводит поведение инерции в взаимодействие, когда связь с сенсорным контактом ликвидируется.Panning behaviors Snap points Panning with the swipe gesture introduces inertia behavior into the interaction when the touch contact is lifted. В результате инерции содержимое продолжает сдвигаться даже в отсутствие движения пользователя, пока не пройдет некоторое пороговое расстояние.With inertia, the content continues to pan until some distance threshold is reached without direct input from the user. Точки прикрепления позволяют настраивать эффект инерции.Use snap points to modify this inertia behavior.

Они задают логические остановки в содержимом приложения.Snap points specify logical stops in your app content. С точки зрения пользователя точки прикрепления выступают как механизм разбивки на страницы, избавляя его от лишних жестов прокрутки и перетаскивания в крупных областях сдвига.Cognitively, snap points act as a paging mechanism for the user and minimize fatigue from excessive sliding or swiping in large pannable regions. С помощью точек прикрепления можно исправлять неточности сенсорного ввода и обеспечивать отображение определенной части важной информации в окне просмотра.With them, you can handle imprecise user input and ensure a specific subset of content or key information is displayed in the viewport.

Существует два типа точек прикрепления.There are two types of snap-points:

  • Приблизительные: точка прикрепления выбирается после завершения контакта, если инерция прекращается в пределах порогового значения расстояния точки прикрепления.Proximity - After the contact is lifted, a snap point is selected if inertia stops within a distance threshold of the snap point. Сдвиг может останавливаться между двумя бесконтактными точками прикрепления.Panning can still stop between proximity snap points.
  • Принудительные. Выделенная точка прикрепления располагается непосредственно до или после последней точки прикрепления, пересеченной перед завершением контакта (в зависимости от направления и скорости жеста).Mandatory - The snap point selected is the one that immediately precedes or succeeds the last snap point crossed before the contact was lifted (depending on the direction and velocity of the gesture). Сдвиг должен останавливаться только в обязательной точке прикрепления.Panning must stop on a mandatory snap point.

Точки прикрепления используются в приложениях, которые имитируют разбивку содержимого на страницы или содержат логически сгруппированные элементы, поддерживающие динамическую перегруппировку для обеспечения соответствия окну просмотра или экрану, например в веб-браузерах и приложениях для просмотра фотографий.Panning snap-points are useful for applications such as web browsers and photo albums that emulate paginated content or have logical groupings of items that can be dynamically regrouped to fit within a viewport or display.

На следующих рисунках показано, как сдвиг до определенной точки приводит к автоматическому сдвигу содержимого до логического расположения.The following diagrams show how panning to a certain point and releasing causes the content to automatically pan to a logical location.

Область, поддерживающая сдвиг.

Прокрутите для сдвига.Swipe to pan.

Область, которая сдвигается влево.

Прекратите сенсорный контакт.Lift touch contact.

Область с остановленным сдвигом в логической точке прикрепления.

Область для сдвига останавливается в точке прикрепления, а не в точке, где прекращен сенсорный контакт.Pannable region stops at the snap point, not where the touch contact was lifted.

Ограничители. Высота и ширина содержимого могут превышать размеры и разрешение устройства отображения.Rails Content can be wider and taller than the dimensions and resolution of a display device. Поэтому часто требуется двухмерный сдвиг (по горизонтали и вертикали).For this reason, two-dimensional panning (horizontal and vertical) is often necessary. В этом случае ограничители улучшают взаимодействие с пользователем, давая преимущество сдвигу вдоль осей движения (вертикальной или горизонтальной).Rails improve the user experience in these cases by emphasizing panning along the axis of motion (vertical or horizontal).

Принцип работы ограничителей показан на следующем рисунке.The following diagram demonstrates the concept of rails.

Схема экрана с ограничителями сдвига.

Связывание встроенного или вложенного содержимогоChaining embedded or nested content

Когда пользователь достигает предела масштабирования или прокрутки для элемента, вложенного в другой масштабируемый или прокручиваемый элемент, можно указать, должен ли родительский элемент продолжать операцию масштабирования или прокрутки, начатую в его дочернем элементе.After a user hits a zoom or scroll limit on an element that has been nested within another zoomable or scrollable element, you can specify whether that parent element should continue the zooming or scrolling operation begun in its child element. Это называется связыванием масштабирования или прокрутки.This is called zoom or scroll chaining.

Связывание используется для областей, которые поддерживают сдвиг в одном направлении и содержат дочерние области, которые, в свою очередь, поддерживают сдвиг в одном направлении или сдвиг в произвольных направлениях (при касании в одной из дочерних областей).Chaining is used for panning within a single-axis content area that contains one or more single-axis or freeform panning regions (when the touch contact is within one of these child regions). При достижении границы сдвига дочерней области в определенном направлении активируется сдвиг в родительской области в том же направлении.When the panning boundary of the child region is reached in a specific direction, panning is then activated on the parent region in the same direction.

Если область сдвига расположена внутри другой области сдвига, то между контейнером и встроенным содержимым должно быть достаточно свободного пространства.When a pannable region is nested inside another pannable region it's important to specify enough space between the container and the embedded content. На следующих рисунках показана область сдвига, которая расположена внутри другой области сдвига. Каждая из этих областей поддерживает сдвиг перпендикулярно сдвигу другой области.In the following diagrams, one pannable region is placed inside another pannable region, each going in perpendicular directions. Пользователям достаточно пространства для сдвига в каждой области.There is plenty of space for users to pan in each region.

Встроенная область сдвига.

Если свободного пространства недостаточно, как видно на следующем рисунке, встроенная область сдвига может повлиять на возможности сдвига в контейнере и привести к непроизвольному сдвигу в одной или нескольких областях.Without enough space, as shown in the following diagram, the embedded pannable region can interfere with panning in the container and result in unintentional panning in one or more of the pannable regions.

Недостаточно пространства для встроенной области сдвига.

Этот способ также полезен для приложений, например фотоальбомов или карт, которые поддерживают как свободный сдвиг в пределах отдельной фотографии или карты, так и сдвиг вдоль одной оси в альбоме (до предыдущей или следующей фотографии) или в области сведений.This guidance is also useful for apps such as photo albums or mapping apps that support unconstrained panning within an individual image or map while also supporting single-axis panning within the album (to the previous or next images) or details area. В приложениях, где показывается область сведений или область параметров, соответствующая изображению или карте, поддерживающей свободный сдвиг, рекомендуется начинать создание макета с области сведений или параметров, поскольку область свободного сдвига изображения или карты может вызывать конфликт со сдвигом в области сведений.In apps that provide a detail or options area corresponding to a freeform panning image or map, we recommend that the page layout start with the details and options area as the unconstrained panning area of the image or map might interfere with panning to the details area.

ПримерыSamples

Примеры архиваArchive samples