Zoom óptico y cambio de tamañoOptical zoom and resizing

En este artículo se describen los elementos de zoom y cambio de tamaño de Windows. También se ofrecen instrucciones de experiencia de usuario para que uses estos nuevos mecanismos de interacción en las aplicaciones.This article describes Windows zooming and resizing elements and provides user experience guidelines for using these interaction mechanisms in your apps.

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

El zoom óptico permite a los usuarios ampliar la vista del contenido dentro de un área de contenido (se ejecuta sobre la propia área de contenido), mientras que el cambio de tamaño permite cambiar el tamaño relativo de uno o varios objetos sin cambiar la vista del área de contenido (se ejecuta sobre los objetos que están dentro del área de contenido).Optical zoom lets users magnify their view of the content within a content area (it is performed on the content area itself), whereas resizing enables users to change the relative size of one or more objects without changing the view of the content area (it is performed on the objects within the content area).

Tanto la interacción de zoom óptico como la de cambio de tamaño se ejecutan con los gestos de reducir y ampliar (separar los dedos acerca el contenido y acercar los dedos lo aleja), 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 (-).Both optical zoom and resizing interactions are performed through the pinch and stretch gestures (moving fingers farther apart zooms in and moving them closer together zooms out), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.

Los siguientes diagramas muestran las diferencias entre cambio de tamaño y zoom óptico.The following diagrams demonstrate the differences between resizing and optical zooming.

Zoom óptico: el usuario selecciona un área y después acerca o aleja el área completa.Optical zoom: User selects an area, and then zooms into the entire area.

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.Resize: User selects an object within an area, and resizes that object.

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

Nota:    El zoom óptico no debe confundirse con el zoom semántico.Note   Optical zoom shouldn't be confused with Semantic Zoom. Aunque en las dos interacciones se usan los mismos gestos, el zoom semántico se refiere 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).Although the same gestures are used for both interactions, semantic zoom refers to the presentation and navigation of content organized within a single view (such as the folder structure of a computer, a library of documents, or a photo album).

 

ConsejosDos and don'ts

Sigue las directrices que se indican a continuación para las aplicaciones que admitan el cambio de tamaño o zoom óptico:Use the following guidelines for apps that support either resizing or optical zooming:

  • 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.If maximum and minimum size constraints or boundaries are defined, use visual feedback to demonstrate when the user reaches or exceeds those boundaries.

  • 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.Use snap points to influence zooming and resizing behavior by providing logical points at which to stop the manipulation and ensure a specific subset of content is displayed in the viewport. 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.Provide snap points for common zoom levels or logical views to make it easier for a user to select those levels. 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.For example, photo apps might provide a resizing snap point at 100% or, in the case of mapping apps, snap points might be useful at city, state, and country views.

    Los puntos de acoplamiento permiten que el usuario alcance sus objetivos, aunque carezca de precisión.Snap points enable users to be imprecise and still achieve their goals. Si usas XAML, consulta las propiedades de los puntos de acoplamiento de ScrollViewer.If you're using XAML, see the snap points properties of ScrollViewer. En JavaScript y HTML, usa -ms-content-zoom-snap-points.For JavaScript and HTML, use -ms-content-zoom-snap-points.

    Existen dos tipos de puntos de acoplamiento:There are two types of snap-points:

    • 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.Proximity - After the contact is lifted, a snap point is selected if inertia stops within a distance threshold of the snap point. Los puntos de acoplamiento en proximidad aún permiten que el zoom y el cambio de tamaño finalicen entre los puntos de acoplamiento.Proximity snap points still allow a zoom or resize to end between snap points.
    • 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).Mandatory - The snap point selected is the one that immediately precedes or succeeds the last snap point crossed before the contact was lifted (depending on the direction and velocity of the gesture). Una manipulación debe finalizar en un punto de acoplamiento obligatorio.A manipulation must end on a mandatory snap point.
  • Usa física de inercia.Use inertia physics. Entre ellas, figuran:These include the following:

    • Desaceleración: ocurre cuando el usuario deja de reducir o ampliar.Deceleration: Occurs when the user stops pinching or stretching. Es similar a la acción de dejar de deslizarse en una superficie resbaladiza.This is similar to sliding to a stop on a slippery surface.
    • Rebote: se produce un ligero efecto de rebote cuando se supera un límite o una restricción de cambio de tamaño.Bounce: A slight bounce-back effect occurs when a size constraint or boundary is passed.
  • Distribuye los controles de acuerdo con las directrices para destinos.Space controls according to the Guidelines for targeting.

  • Proporciona controladores de ajuste de escala para cambiar el tamaño de manera restringida.Provide scaling handles for constrained resizing. Si no se especifican controladores, el cambio de tamaño predeterminado es el isométrico o proporcional.Isometric, or proportional, resizing is the default if the handles are not specified.

  • 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.Don't use zooming to navigate the UI or expose additional controls within your app, use a panning region instead. Para obtener más información sobre el movimiento panorámico, consulta las instrucciones del movimiento panorámico.For more info on panning, see Guidelines for panning.

  • No coloques objetos redimensionables dentro de un área de contenido redimensionable.Don't put resizable objects within a resizable content area. Las excepciones son:Exceptions to this include:

    • Las aplicaciones de dibujo en las que pueden aparecer elementos redimensionables en un elemento canvas redimensionable.Drawing applications where resizable items can appear on a resizable canvas or art board.
    • Las páginas web con un objeto incrustado, como por ejemplo un mapa.Webpages with an embedded object such as a map.

    Nota:    En todos los casos, se cambia el tamaño del área de contenido a menos que todos los puntos táctiles estén dentro del objeto de tamaño variable.Note   In all cases, the content area is resized unless all touch points are within the resizable object.

EjemplosSamples

Ejemplos de archivoArchive samples