ПоворотRotation

В этой статье описывается новый пользовательский интерфейс Windows для вращения и приводятся рекомендации по работе с пользователем, которые следует учитывать при использовании этого нового механизма взаимодействия в приложении Windows.This article describes the new Windows UI for rotation and provides user experience guidelines that should be considered when using this new interaction mechanism in your Windows app.

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

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

  • Используйте поворот, чтобы дать пользователям возможность непосредственно поворачивать элементы пользовательского интерфейса.Use rotation to help users directly rotate UI elements.

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

Обзор поворотаOverview of rotation

Поворот — это методика, оптимизированная для использования приложениями Windows, позволяющая пользователям преобразовывать объект в круглом направлении (по часовой стрелке или против часовой стрелки).Rotation is the touch-optimized technique used by Windows apps to enable users to turn an object in a circular direction (clockwise or counter-clockwise).

Способ выполнения поворота зависит от устройства ввода:Depending on the input device, the rotation interaction is performed using:

  • Мышью или активным пером, перемещая поворотный захват выбранного объекта.A mouse or active pen/stylus to move the rotation gripper of a selected object.
  • Касанием или неактивным пером, поворачивая объект в требуемом направлении жестом поворота.Touch or passive pen/stylus to turn the object in the desired direction using the rotate gesture.

Варианты использования поворотаWhen to use rotation

Используйте поворот, чтобы дать пользователям возможность непосредственно поворачивать элементы пользовательского интерфейса.Use rotation to help users directly rotate UI elements. На следующих схемах представлены некоторые из поддерживаемых положений пальцев для поворота.The following diagrams show some of the supported finger positions for the rotation interaction.

Схема с различными поддерживаемыми положениями пальцев для поворота.

Примечание .Note
В большинстве случаев, как интуитивно понятно, точка поворота — это будет одна из двух точек касания, если пользователь не может указать точку поворота, не связанную с контактными точками (как можно сделать, например, в приложениях для рисования или обработки макетов).Intuitively, and in most cases, the rotation point is one of the two touch points unless the user can specify a rotation point unrelated to the contact points (for example, in a drawing or layout application). Следующие изображения демонстрируют, насколько хуже может стать взаимодействие с пользователем, если точка поворота не ограничена таким образом.The following images demonstrate how the user experience can be degraded if the rotation point is not constrained in this way.

На первом изображении представлены начальная (большой палец) и дополнительная (указательный палец) точки касания: указательный палец касается дерева, а большой палец — бревна.This first picture shows the initial (thumb) and secondary (index finger) touch points: the index finger is touching a tree and the thumb is touching a log.

Изображение с двумя начальными точками касания для жеста поворота.image showing the two initial touch points for the rotation gesture. На втором изображении поворот осуществляется вокруг начальной точки касания (большого пальца).In this second picture, rotation is performed around the initial (thumb) touch point. После поворота указательный палец все еще касается ствола дерева, а большой палец — бревна (точки поворота).After the rotation, the index finger is still touching the tree trunk and the thumb is still touching the log (the rotation point).

Изображение с повернутым рисунком и точкой поворота, ограниченной одной или двумя начальными точками касания.image showing a rotated picture with the rotation point constrained to one of the two initial touch points. На третьем изображении центр рисунка определен приложением (или задан пользователем) как центр поворота.In this third picture, the center of rotation has been defined by the application (or set by the user) to be the center point of the picture. После поворота иллюзия прямого манипулирования исчезает, так как рисунок не вращается вокруг одного из пальцев (если пользователь не выбрал этот параметр).After the rotation, because the picture did not rotate around one of the fingers, the illusion of direct manipulation is broken (unless the user has chosen this setting).

Изображение с повернутым рисунком и точкой поворота, ограниченной центром рисунка, а не одной из двух начальных точек касания.image showing a rotated picture with the rotation point constrained to the center of the picture rather than either of the two initial touch points. На последнем изображении точка посередине левого края рисунка определена приложением (или задана пользователем) как центр поворота.In this last picture, the center of rotation has been defined by the application (or set by the user) to be a point in the middle of the left edge of the picture. Если пользователь не выбрал этот параметр, иллюзия прямого манипулирования в этом случае также исчезнет.Again, unless the user has chosen this setting, the illusion of direct manipulation is broken in this case.

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

Windows 10 поддерживает три типа вращения: Free, CONSTRAINED и Объединенная.Windows 10 supports three types of rotation: free, constrained, and combined.

ТипType ОписаниеDescription
Свободный поворотFree rotation

Свободный поворот позволяет пользователю поворачивать содержимое свободно, в любом месте и на 360 градусов. Когда пользователь отпускает объект, он остается в выбранном положении.Free rotation enables a user to rotate content freely anywhere in a 360 degree arc. When the user releases the object, the object remains in the chosen position. Свободный поворот полезен в приложениях для рисования и обработки макетов, таких как Microsoft PowerPoint, Word, Visio и Paint, а также Adobe Photoshop, Illustrator и Flash.Free rotation is useful for drawing and layout applications such as Microsoft PowerPoint, Word, Visio, and Paint; and Adobe Photoshop, Illustrator, and Flash.

Ограниченный поворотConstrained rotation

Ограниченный поворот поддерживает свободный поворот во время манипулирования, но применяет точки прикрепления с шагом 90 градусов (0, 90, 180 и 270), когда пользователь отпускает объект.Constrained rotation supports free rotation during the manipulation but enforces snap points at 90 degree increments (0, 90, 180, and 270) upon release. Когда пользователь отпускает объект, он автоматически перемещается к ближайшей точке прикрепления.When the user releases the object, the object automatically rotates to the nearest snap point.

Ограниченный поворот является наиболее часто используемым методом поворота и действует подобно прокрутке содержимого.Constrained rotation is the most common method of rotation, and it functions in a similar way to scrolling content. Точки прикрепления позволяют пользователю допускать неточности, обеспечивая при этом достижение цели.Snap points let a user be imprecise and still achieve their goal. Ограниченный поворот полезен в таких приложениях, как веб-браузеры и фотоальбомы.Constrained rotation is useful for applications such as web browsers and photo albums.

Комбинированный поворотCombined rotation

Комбинированный поворот поддерживает свободный поворот с зонами (подобно направляющим в Руководстве по функции сдвига) каждой из точек прикрепления с шагом 90 градусов, которые применяет ограниченный поворот.Combined rotation supports free rotation with zones (similar to rails in Guidelines for panning) at each of the 90 degree snap points enforced by constrained rotation. Если пользователь отпускает объект за пределами одной из зон точек с шагом 90 градусов, объект остается в этом положении. В ином случае объект автоматически поворачивается до точки прикрепления.If the user releases the object outside of one of 90 degree zones, the object remains in that position; otherwise, the object automatically rotates to a snap point.

Примечание. Направляющая пользовательского интерфейса — это компонент, в котором область вокруг целевого объекта ограничивает движение до заданного значения или расположения, чтобы повлиять на выделение. Note A user interface rail is a feature in which an area around a target constrains movement towards some specific value or location to influence its selection.

ПримерыSamples

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