Share via

Zoom óptico y cambio de tamaño

  • Artículo

En este artículo se describen los elementos de zoom y cambio de tamaño de Windows y se proporcionan instrucciones de experiencia del usuario para usar estos mecanismos de interacción en las aplicaciones.

API importantes: Windows.UI.Input, Input (XAML)

El zoom óptico permite a los usuarios ampliar su vista del contenido dentro de un área de contenido (se realiza en la propia área de contenido), mientras que el cambio de tamaño permite a los usuarios cambiar el tamaño relativo de uno o varios objetos sin cambiar la vista del área de contenido (se realiza en los objetos dentro del área de contenido).

Tanto el zoom óptico como las interacciones de cambio de tamaño se realizan a través de los gestos de reducir y ampliar (mover los dedos hacia afuera para ampliar y hacia adentro para reducir), manteniendo presionada la tecla Ctrl mientras se desplaza la rueda del mouse o manteniendo presionada la tecla Ctrl (con la tecla Mayús, si no hay teclado numérico disponible) y presionando las teclas más (+) o menos (-).

En los diagramas siguientes se muestran las diferencias entre el cambio de tamaño y el zoom óptico.

Zoom óptico: el usuario selecciona un área y, a continuación, amplía todo el área.

moving the fingers closer together zooms in on the content area and moving them apart zooms out

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

moving the fingers closer together shrinks an object and moving them apart enlarges it

Nota: El zoom óptico no debe confundirse con el zoom semántico. Aunque se usan los mismos gestos para ambas interacciones, el zoom semántico hace referencia a la presentación y navegación del contenido organizado dentro de una sola vista (como la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos).

 

Qué hacer y qué no hacer

Use las instrucciones siguientes para las aplicaciones que admitan el cambio de tamaño o el zoom óptico:

  • Si se definen restricciones o límites de tamaño máximo y mínimo, utilice comentarios visuales para indicar cuando el usuario alcance o supere dichos límites.

  • Use puntos de acoplamiento para influir en el comportamiento del zoom y de cambio de tamaño proporcionando puntos lógicos en los cuales detener la manipulación y asegurar que se muestre un subconjunto específico de contenido en la ventanilla. Proporcione puntos de acoplamiento para los niveles de zoom comunes o las vistas lógicas para facilitar al usuario la selección de esos niveles. Por ejemplo, las aplicaciones de fotos pueden proporcionar un punto de acoplamiento de cambio de tamaño en 100 % o, en el caso de las aplicaciones de mapas, los puntos de acoplamiento pueden ser útiles en las vistas de ciudad, estado y país.

    Los puntos de acoplamiento permiten a los usuarios ser imprecisos y aún así lograr sus objetivos. Si usa XAML, consulte las propiedades de los puntos de acoplamiento de ScrollViewer.

    Existen dos tipos de puntos de acoplamiento:

    • Proximidad: Después de levantar el contacto, se selecciona un punto de acoplamiento si la inercia se detiene dentro de un umbral de distancia del punto de acoplamiento. Los puntos de acoplamiento de proximidad permiten igualmente que el zoom o el cambio de tamaño terminen entre los puntos de acoplamiento.
    • Obligatorio: El punto de acoplamiento seleccionado es el inmediatamente precedente o sucesivo al último punto de acoplamiento cruzado antes de terminar el contacto (en función de la dirección y la velocidad del gesto). La manipulación debe terminar en un punto de acoplamiento obligatorio.

  • Use la física de inercia. Entre ellas, figuran:

    • Deceleración: Se produce cuando el usuario deja de reducir o ampliar. Esto es similar a deslizarse hasta detenerse en una superficie resbaladiza.
    • Rebote: Se produce un ligero efecto de devolución cuando se sobrepasa una restricción de tamaño o un límite.

  • Controles de espacio según las Directrices para la selección.

  • Proporcione identificadores de escalado para restringir el cambio de tamaño. El cambio de tamaño isométrico o proporcional es el valor predeterminado si no se especifican los controladores.

  • No use zoom para navegar por la interfaz de usuario o exponer controles adicionales dentro de la aplicación, use el movimiento panorámico en su lugar. Para obtener más información sobre el movimiento panorámico, consulte las Directrices para el movimiento panorámico.

  • No coloque objetos redimensionables dentro de un área de contenido redimensionable. Entre las excepciones a esto se incluyen:

    • Las aplicaciones de dibujo en las que los elementos redimensionables pueden aparecer en un lienzo o tabla de arte a la que se puede cambiar el tamaño.
    • Páginas web con un objeto incrustado, como un mapa.

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

Ejemplos

Ejemplos de archivo