Información
El tema que ha solicitado se muestra abajo. Sin embargo, este tema no se encuentra en la biblioteca.

Directrices para zoom óptico y cambio de tamaño

Applies to Windows and Windows Phone

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

En este tema se describen las características de zoom y cambio de tamaño de elementos en Windows. También se ofrecen instrucciones de experiencia de usuario para que uses estos nuevos mecanismos de interacción en tus aplicaciones.

Descripción

El zoom óptico permite a los usuarios ampliar la vista del contenido dentro de un área de contenido (se ejecuta sobre el propio área de contenido), mientras que el cambio de tamaño permite cambiar el tamaño relativo de uno o más objetos en un área de contenido sin cambiar la vista del área (se ejecuta sobre los objetos que están dentro del área de contenido).

Tanto la interacción de zoom óptico como la de cambio de tamaño se realizan con los gestos de reducir y ampliar (separar los dedos acerca el contenido y acercarlos lo aleja). También puedes hacerlo manteniendo presionada la tecla Ctrl mientras se desplaza la rueda de desplazamiento del mouse, o manteniendo presionada la tecla Ctrl (con la tecla Mayús, si no se dispone de teclado numérico) y presionando la tecla de signo más (+) o menos (-).

Los siguientes diagramas muestran las diferencias entre cambio de tamaño y zoom óptico.

Zoom óptico: el usuario selecciona un área y después acerca o aleja el área completa.

Juntar los dedos acerca el área de contenido, y separarlos la aleja.

Cambio de tamaño: el usuario selecciona un objeto dentro de un área y cambia el tamaño del objeto.

Juntar los dedos reduce el objeto, y alejarlos lo amplía.

Nota  

El zoom óptico no debe confundirse con Zoom semántico. Aunque en ambas interacciones se comparten los mismos gestos, el Zoom semántico remite a la presentación y navegación de datos o contenido estructurados en una única vista (como la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos).

Qué hacer y qué no hacer

Usa las siguientes directrices en aplicaciones que admitan el cambio de tamaño o zoom óptico:

  • Si defines restricciones o límites de tamaño máximo y mínimo, usa información visual para indicar al usuario cuándo ha alcanzado o superado esos límites.
  • Usa puntos de acoplamiento para influir en el comportamiento de zoom y cambio de tamaño proporcionando puntos lógicos en los cuales detener la manipulación y garantizar así que en la ventanilla se muestre un subconjunto específico de contenido. Proporciona puntos de acoplamiento para niveles de zoom comunes o vistas lógicas para que al usuario le resulte más fácil seleccionar esos niveles. Por ejemplo, las aplicaciones de fotos podrían proporcionar un punto de acoplamiento de cambio de tamaño en el 100% o, en el caso de las aplicaciones de mapas, los puntos de acoplamiento podrían resultar útiles en las vistas de ciudad, estado y país.

    Los puntos de acoplamiento permiten que el usuario alcance sus objetivos, aunque carezca de precisión. Si usas XAML, consulta las propiedades de puntos de acoplamiento de ScrollViewer. En JavaScript y HTML, usa -ms-content-zoom-snap-points.

    Existen dos tipos de puntos de acoplamiento:

    • Proximidad: después de levantar el dedo, se selecciona un punto de acoplamiento si la inercia se detiene dentro del umbral de distancia del punto de acoplamiento. Los puntos de acoplamiento en proximidad aún permiten que el zoom y el cambio de tamaño finalicen entre los puntos de acoplamiento.
    • Obligatorio: el punto de acoplamiento seleccionado es el que precede o sigue inmediatamente al último punto de acoplamiento que se cruzó antes de levantar el contacto (en función de la dirección y velocidad del gesto). Una manipulación debe finalizar en un punto de acoplamiento obligatorio.
  • Usa física de inercia. Incluye:
    • Desaceleración: ocurre cuando el usuario deja de reducir o ampliar. Es similar a la acción de dejar de deslizarse en una superficie resbaladiza.
    • Rebote: se produce un ligero efecto de rebote cuando se supera un límite o una restricción de cambio de tamaño.
  • Distribuye los controles de acuerdo con las directrices para destinos.
  • Proporciona controladores de ajuste de escala para cambiar el tamaño de manera restringida. Si no se especifican controladores, el cambio de tamaño predeterminado es el isométrico o proporcional.
  • No uses el zoom para navegar por la interfaz de usuario ni exponer otros controles en la aplicación; en su lugar, usa una región de movimiento panorámico. Para obtener más información sobre el movimiento panorámico, consulta las instrucciones del movimiento panorámico.
  • No coloques objetos redimensionables dentro de un área de contenido redimensionable. Las excepciones son:
    • Aplicaciones de dibujo en las que pueden aparecer elementos redimensionables en un Canvas redimensionable.
    • Páginas web con un objeto incrustado como un mapa.

    Nota  

    En todos los casos, el área de contenido cambia de tamaño a menos que todos los puntos táctiles se encuentren dentro del objeto redimensionable.

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
Entrada: muestra de gestos y manipulaciones con GestureRecognizer
Muestra de desplazamiento, movimiento panorámico y zoom HTML
Entrada: muestra de gestos instanciables (con MSGesture)
Entrada: muestra de eventos de entrada de usuario de XAML
Muestra de desplazamiento, movimiento panorámico y zoom XAML
Muestra de entrada táctil de DirectX

 

 

Mostrar:
© 2014 Microsoft