Directrices para rotación

En este tema, se describe la nueva interfaz de usuario de Windows para realizar una rotación. También se ofrecen directrices sobre la experiencia del usuario que te conviene tener en cuenta al usar estos nuevos mecanismos de interacción en tu aplicación de la Tienda Windows.

Consulta esta característica como parte de nuestra serie Características de aplicaciones, de principio a fin:  Interacción del usuario: entrada táctil... y mucho más

Qué hacer y qué no hacer

  • Usa la rotación para ayudar a los usuarios a rotar directamente elementos de la interfaz de usuario.

Instrucciones de uso adicionales

Introducción a la rotación

La rotación es la técnica optimizada para entrada táctil que se usa en las aplicaciones de la Tienda Windows en Windows 8 para permitir que los usuarios giren un objeto en dirección circular (en el sentido de las agujas del reloj o en el sentido contrario).

En función del dispositivo de entrada, la interacción de rotación se realiza con lo siguiente:

  • Un mouse o una pluma/lápiz activos para mover la barra de redimensionamiento para rotación de un objeto seleccionado.
  • Una pluma/lápiz táctiles o pasivos para girar el objeto en la dirección deseada mediante el gesto de girar.

Cuándo usar la rotación

Usa la rotación para ayudar a los usuarios a rotar directamente elementos de la interfaz de usuario. Los siguientes diagramas muestran algunas de las posiciones de los dedos admitidas para la interacción de rotación.

Diagrama que muestra varias posturas de los dedos admitidas por la rotación.

Nota  

Intuitivamente, y en la mayoría de los casos, el punto de rotación es uno de los dos puntos de contacto táctil, a menos que el usuario pueda especificar un punto de rotación que no esté relacionado con esos puntos (por ejemplo, en una aplicación de dibujo o diseño). 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.

La primera imagen muestra los puntos de contacto táctil inicial (pulgar) y secundario (índice): el índice está tocando un árbol y el pulgar toca un tronco.

Imagen que muestra los dos puntos táctiles iniciales en el gesto de girar.

En la segunda imagen, la rotación se ejecuta en torno del punto táctil inicial (pulgar). 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).

Imagen que muestra una ilustración rotada en la que el punto de rotación está restringido a uno de los dos puntos táctiles iniciales.

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. Después de la rotación, la ilusión de manipulación directa se ha roto porque la ilustración no rotó en torno de uno de los dedos (a menos que fuera el usuario quien hubiera elegido esa configuración).

Imagen que muestra una ilustración rotada 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.

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. De nuevo, a menos que sea el usuario quien haya elegido esa configuración, la ilusión de manipulación directa se rompe.

Imagen que muestra una ilustración rotada 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 8 admite tres tipos de rotación: libre, restringida y combinada.

TipoDescripción
Rotación libre

La rotación libre permite que el usuario rote el contenido libremente dentro de un arco de 360 grados. Cuando el usuario suelta el objeto, el objeto permanece en la posición elegida. 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.

Rotación restringida

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. Cuando el usuario suelta el objeto, el objeto rota de manera automática hasta el punto de acoplamiento más cercano.

La rotación restringida es el método más común de rotación y funciona de manera similar al desplazamiento de contenido. Los puntos de acoplamiento permiten que el usuario alcance sus objetivos, aunque carezca de precisión. La rotación restringida es útil para aplicaciones como exploradores web y álbumes de fotos.

Rotación combinada

La rotación combinada admite la rotación libre pero con zonas (similares a las guías en el movimiento panorámico) en cada uno de los puntos de acoplamiento situados cada 90 grados impuestos en la rotación restringida. 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 rota de manera automática hasta un punto de acoplamiento.

Nota  Una guía de interfaz de usuario es una característica en la que un área que rodea un destino restringe el movimiento a algún valor específico o ubicación para influir su selección.

 

Temas relacionados

Para diseñadores
Directrices para las interacciones del usuario comunes
Diseño de la interacción táctil
Para desarrolladores (HTML)
Inicio rápido: punteros
Inicio rápido: gestos y manipulaciones de DOM
Inicio rápido: gestos estáticos
Inicio rápido: gestos de manipulación
Para desarrolladores (XAML)
Inicio rápido: entrada táctil
Inicio rápido: controlar entrada de puntero
Para desarrolladores (aplicación de Windows en tiempo de ejecución con DirectX con C++)
Responder a la entrada táctil (DirectX y C++)
Muestras (DOM)
Muestra de desplazamiento, movimiento panorámico y zoom HTML
Entrada: muestra de gestos instanciables
Muestras (API de aplicaciones de la Tienda Windows)
Entrada: muestra de manipulaciones y gestos (JavaScript)
Entrada: muestra de gestos de Windows 8
Entrada: muestra de eventos de entrada de usuario de XAML
Muestra de desplazamiento, movimiento panorámico y zoom XAML
Muestras (DirectX)
Muestra de entrada táctil de DirectX
Entrada: muestra de manipulaciones y gestos (C++)

 

 

Mostrar:
© 2015 Microsoft