RotaciónRotation

En este artículo se describe la nueva interfaz de usuario de Windows para la rotación y se proporcionan instrucciones para la experiencia del usuario que deben tenerse en cuenta al usar este nuevo mecanismo de interacción en la aplicación de 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 importantes: Windows. UI. Input, Windows. UI. Xaml. InputImportant APIs: Windows.UI.Input, Windows.UI.Xaml.Input

ConsejosDos and don'ts

  • Usa la rotación para ayudar a los usuarios a girar directamente elementos de la interfaz de usuario.Use rotation to help users directly rotate UI elements.

Instrucciones de uso adicionalesAdditional usage guidance

Introducción a la rotaciónOverview of rotation

La rotación es la técnica táctil y optimizada que usan las aplicaciones de Windows para que los usuarios puedan convertir un objeto en una dirección circular (en el sentido de las agujas del reloj o en el sentido contrario).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).

En función del dispositivo de entrada, la interacción de rotación se realiza con lo siguiente:Depending on the input device, the rotation interaction is performed using:

  • Un mouse o una pluma/lápiz activos para mover la barra de redimensionamiento para rotación de un objeto seleccionado.A mouse or active pen/stylus to move the rotation gripper of a selected object.
  • Una pluma o un lápiz táctiles o pasivos para girar el objeto en la dirección deseada mediante el gesto de girar.Touch or passive pen/stylus to turn the object in the desired direction using the rotate gesture.

Cuándo usar la rotaciónWhen to use rotation

Usa la rotación para ayudar a los usuarios a girar directamente elementos de la interfaz de usuario.Use rotation to help users directly rotate UI elements. En los diagramas siguientes se muestran algunas de las posiciones de los dedos admitidas para la interacción de rotación.The following diagrams show some of the supported finger positions for the rotation interaction.

diagrama en el que se muestran varias posturas de los dedos admitidas por la rotación.

Nota:    De forma intuitiva, y en la mayoría de los casos, el punto de giro es uno de los dos puntos táctiles, a menos que el usuario pueda especificar un punto de rotación no relacionado con los puntos de contacto (por ejemplo, en una aplicación de dibujo o diseño).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). Las siguientes imágenes muestran cómo puede degradarse la experiencia del usuario si el punto de rotación no está restringido de esa manera.The following images demonstrate how the user experience can be degraded if the rotation point is not constrained in this way.

En la primera imagen se muestran los puntos de contacto táctil inicial (pulgar) y secundario (índice): el índice está tocando un árbol y el pulgar toca un tronco.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.

imagen en la que se muestran los dos puntos táctiles iniciales en el gesto de girar.image showing the two initial touch points for the rotation gesture. En la segunda imagen, la rotación se ejecuta en torno del punto táctil inicial (pulgar).In this second picture, rotation is performed around the initial (thumb) touch point. Después de la rotación, el índice sigue tocando el árbol y el pulgar sigue en contacto con el tronco (el punto de rotación).After the rotation, the index finger is still touching the tree trunk and the thumb is still touching the log (the rotation point).

imagen en la que se muestra una ilustración girada en la que el punto de rotación está restringido a uno de los dos puntos táctiles iniciales.image showing a rotated picture with the rotation point constrained to one of the two initial touch points. En la tercera imagen, la aplicación (o el usuario) ha definido que el centro de rotación sea el punto central de la ilustración.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. Después de la rotación, la ilusión de manipulación directa se ha roto porque la ilustración no giró en torno de uno de los dedos (a menos que fuera el usuario quien hubiera elegido esa configuración).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).

imagen en la que se muestra una ilustración girada en la que el punto de rotación está restringido al centro de la ilustración en lugar de uno de los dos puntos táctiles iniciales.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. En esta última imagen, la aplicación (o el usuario) ha definido que el centro de rotación sea un punto en el medio del borde izquierdo de la ilustración.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. De nuevo, a menos que sea el usuario quien haya elegido esa configuración, la ilusión de manipulación directa se rompe.Again, unless the user has chosen this setting, the illusion of direct manipulation is broken in this case.

imagen en la que se muestra una ilustración girada en la que el punto de rotación está restringido al centro del borde izquierdo de la ilustración en lugar de uno de los dos puntos táctiles iniciales.

 

Windows 10 admite tres tipos de rotación: gratis, restringido y combinado.Windows 10 supports three types of rotation: free, constrained, and combined.

TipoType DescripciónDescription
Rotación libreFree rotation

La rotación libre permite a un usuario girar el contenido libremente en cualquier parte de un arco de 360 grados. Cuando el usuario suelta el objeto, el objeto permanece en la posición elegida.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. La rotación libre es útil para aplicaciones de dibujo y diseño como Microsoft PowerPoint, Word, Visio y Paint; y Photoshop, Illustrator y Flash de Adobe.Free rotation is useful for drawing and layout applications such as Microsoft PowerPoint, Word, Visio, and Paint; and Adobe Photoshop, Illustrator, and Flash.

Rotación restringidaConstrained rotation

La rotación restringida admite la rotación libre durante la manipulación pero impone puntos de acoplamiento con incrementos de 90 grados (0, 90, 180 y 270) cuando se suelta el contenido.Constrained rotation supports free rotation during the manipulation but enforces snap points at 90 degree increments (0, 90, 180, and 270) upon release. Cuando el usuario suelta el objeto, el objeto rota de manera automática hasta el punto de acoplamiento más cercano.When the user releases the object, the object automatically rotates to the nearest snap point.

La rotación restringida es el método más común de rotación y funciona de manera similar al desplazamiento de contenido.Constrained rotation is the most common method of rotation, and it functions in a similar way to scrolling content. Los puntos de acoplamiento permiten que el usuario alcance sus objetivos, aunque carezca de precisión.Snap points let a user be imprecise and still achieve their goal. La rotación restringida es útil para aplicaciones como exploradores web y álbumes de fotos.Constrained rotation is useful for applications such as web browsers and photo albums.

Rotación combinadaCombined rotation

La rotación combinada admite la rotación libre pero con zonas (similares a las guías de las Instrucciones del movimiento panorámico) en cada uno de los puntos de acoplamiento situados cada 90 grados impuestos en la rotación restringida.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. Si el usuario libera el objeto fuera de una de las zonas de 90 grados, el objeto permanece en esa posición; de otro modo, el objeto gira de manera automática hasta un punto de acoplamiento.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.

Nota:    Una guía de interfaz de usuario es una característica en la que un área alrededor de un destino limita el movimiento hacia algún valor o ubicación específicos para influir en su selección. 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.
 

EjemplosSamples

Ejemplos de archivoArchive samples