Directrices para zoom semántico

Applies to Windows and Windows Phone

Aplicación de Windows: vistas de cerca y de lejos de un control de zoom semántico

Aplicación de Windows: vistas de cerca y de lejos de un control de zoom semántico

Aplicación de Windows Phone: vistas de lejos y de cerca de un control de zoom semántico

Aplicación de Windows Phone: vistas de lejos y de cerca de un control de zoom semántico

Descripción

Un control de zoom semántico permite que el usuario haga zoom entre dos vistas semánticas distintas del mismo conjunto de datos. Una de las vistas contiene una lista de elementos agrupados por clave y la otra vista contiene una lista de claves de grupo. Al pulsar una clave de grupo, se muestran los elementos de ese grupo.

Si el conjunto de datos es una lista de ejercicios físicos agrupados por la parte del cuerpo a la que beneficia cada ejercicio, la vista de cerca será una lista de ejercicios agrupados por parte del cuerpo (los elementos) y la vista de lejos será una lista de partes del cuerpo (las claves de grupo). Con conjuntos de muchos datos, el poder alejar y ver todas las claves de grupo en una sola página resulta de gran ayuda al usuario, ya que puede acceder rápidamente a un elemento distante sin necesidad de desplazarse demasiado.

Ejemplos

Captura de pantalla que ilustra el control de zoom semántico estándar

Qué hacer y qué no hacer

  • Usa el tamaño de destino táctil correcto para elementos que puedan usarse o sean interactivos. Para obtener más información, consulta el tema Directrices para destinos.
  • Ofrece una región de zoom semántico intuitiva y adecuada. Los usuarios suelen iniciar el zoom semántico desde el área que rodea los elementos mostrados. Establece una región de zoom semántico lo suficientemente grande como para abarcar esa área. Por ejemplo, la Tienda Windows proporciona una gran cantidad de espacio vacío alrededor de la lista de aplicaciones donde el usuario puede ubicar los dedos para acercar o alejar el contenido.
  • Usa estructura y semántica inherentes a la vista.
    • Usa los nombres de los grupos para elementos en una colección agrupada.
    • Usa criterios de ordenación (como orden cronológico de fechas u orden alfabético para una lista de nombres) para una colección ordenada que no esté agrupada.
    • Usa páginas para representar una colección de documentos.
  • Asegúrate de que la dirección del movimiento panorámico y el diseño de los elementos no cambie en función del nivel de zoom. Las interacciones de movimiento panorámico y diseño deben ser predecibles y coherentes en todos los niveles de zoom.
  • Limita a tres el número de páginas (o pantallas) en el modo con alejamiento. El zoom semántico permite que el usuario salte rápidamente al contenido. Si introduces un exceso de movimiento panorámico, se pierde esta ventaja.
  • No uses el zoom semántico para cambiar el ámbito del contenido. Por ejemplo, un álbum de fotos no debe cambiar nunca a una vista de carpeta en el Explorador de archivos.
  • No establezcas bordes en los controles secundarios del zoom semántico. Si estableces bordes en el zoom semántico y en los controles secundarios, se verán tanto el borde del zoom semántico como el del control secundario visible en ese momento. Al acercar o alejar, los bordes del control secundario se amplían o reducen junto con el contenido y no quedan bien. Define un borde solo en el control de zoom semántico.

Instrucciones de uso adicionales

El zoom óptico altera la escala y la ampliación del contenido. Con el zoom semántico, la semántica (el significado) del contenido presentado cambia entre elementos agrupados por clave y una lista de esas claves. Considera la opción de usar un control de zoom semántico siempre que quieras mostrar una lista larga de datos agrupados (por ejemplo, ejercicios agrupados por parte del cuerpo o nombres agrupados por inicial).

Desplazarse desde los nombres que empiezan por “A” hasta un nombre que empieza por “Z” puede exigir muchos gestos de deslizarse rápidamente. Con un control de zoom semántico, esto puede hacerse con solo pulsar dos veces: una para alejar y ver la lista de iniciales y otra para acercarse a la “Z”.

El zoom semántico gestiona el zoom entre sus dos vistas. Una vista es una lista o una cuadrícula que contiene los elementos o las calves de grupo, según corresponda.

El zoom semántico usa dos modos diferentes de clasificación (o niveles de zoom) para organizar y presentar el contenido: un modo de bajo nivel (o acercado) que se usa normalmente para mostrar elementos en una estructura plana y un modo de alto nivel (o alejado) que muestra los elementos en grupos y permite que el usuario navegue por el contenido y lo examine rápidamente.

La interacción de zoom semántico se ejecuta con los gestos de reducir y ampliar (separar los dedos acerca el contenido y acercar los dedos lo aleja) o bien manteniendo presionada la tecla Ctrl mientras se mueve la rueda de desplazamiento del mouse o bien 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 (-).

Mira este breve vídeo para ver una descripción general del zoom semántico.

Ejemplos de aplicaciones que pueden usar el zoom semántico:

  • Una libreta de direcciones que organiza los contactos por orden alfabético (o de otro modo) y presenta los datos mediante letras del alfabeto. El usuario puede acercar una letra para ver los contactos incluidos bajo esa letra.
  • Un álbum de fotos que organiza las imágenes mediante metadatos (como la fecha en que se tomó cada foto). El usuario puede acercar una fecha concreta para ver la colección de imágenes incluidas bajo esa letra.
  • Un catálogo de productos que organiza los elementos por categorías.

  • Otros ejemplos de diseños de zoom semántico:
    AcercarAlejar
    Ejemplo de un diseño alejadoEjemplo de un diseño con acercamiento
    Ejemplo de un diseño alejadoEjemplo de un diseño con acercamiento
    Ejemplo de un diseño alejadoEjemplo de un diseño con acercamiento
    Ejemplo de un diseño alejadoEjemplo de un diseño con acercamiento

     

Navegación con zoom semántico

Si bien es posible navegar por el contenido usando solo el movimiento panorámico y el desplazamiento (consulta Directrices para movimiento panorámico), con el zoom semántico se habilitan características de navegación y organización muy eficaces.

El movimiento panorámico y el desplazamiento son útiles para conjuntos pequeños de contenido y distancias cortas. Pero cuando se trata de conjuntos grandes de contenido, la navegación pronto se entorpece. El zoom semántico reduce en gran medida la percepción de recorrer grandes distancias al navegar por volúmenes grandes de contenido y permite obtener acceso con rapidez y facilidad a ubicaciones dentro del contenido.

Nota  

No debes confundir el zoom semántico con el zoom óptico (consulta Directrices para zoom óptico y cambio de tamaño). Si bien comparten la misma interacción y el mismo comportamiento básico (mostrar más o menos detalle en función de un factor de zoom), el zoom óptico consiste en el ajuste del aumento para un área de contenido o un objeto, como una fotografía.

  • Salto de desplazamiento

    Pulsar el contenido en modo alejado aplica zoom en la vista y la mueve panorámicamente hasta el punto pulsado, como se muestra en los tres diagramas siguientes.

    Captura de pantalla que muestra la vista semántica original.
    Al alejar la vista, la totalidad del contenido puede ser un destino táctil.
    Captura de pantalla que muestra un gesto de pulsar en una sección de la vista semántica original.
    Acción de pulsar una sección del contenido.
    Captura de pantalla que muestra la nueva vista semántica correspondiente al destino que se pulsó.
    Con acercamiento y movimiento panorámico hasta el área pulsada.

     

  • Transiciones

    Para la transición de un nivel del zoom semántico a otro, se usa una animación fluida de encadenado y escalado. Este es el comportamiento predeterminado de Windows Touch y no puede personalizarse.

Consideraciones y recomendaciones

A ti te corresponde definir dos niveles semánticos en tus aplicaciones.

Piensa en estas cuestiones cuando diseñes el modo alejado:

  • ¿Cómo debe cambiar la estructura y la presentación de la información en función del nivel de zoom?
  • ¿Resultaría útil usar sugerencias o "postes indicadores" para navegar por los datos?
  • ¿Qué cantidad de contenido ofrece una vista semántica útil a la vez que minimiza el movimiento panorámico y el desplazamiento?

A menudo, estas consideraciones entran en conflicto entre sí. Deseas ofrecer contenido enriquecido con mucha información para que los usuarios sepan hacia dónde se dirigen, pero debes equilibrar esa información con la longitud total del nivel semántico. Si los usuarios deben desplazarse mucho en el modo alejado, pierdes la principal ventaja que te ofrece el zoom semántico —la navegación rápida.

Laboratorios prácticos de Windows 8

Si quieres probar a trabajar con el zoom semántico y otras características fundamentales de Windows 8, descarga los laboratorios prácticos de Windows 8. En ellos, se proporciona una introducción compuesta por módulos paso a paso para crear una aplicación de la Tienda Windows de muestra en el lenguaje de programación que prefieras (JavaScript y HTML o C# y XAML).

Apariencia e interacción

La apariencia de un control de zoom semántico depende de la vista que se está mostrando (las vistas pueden ser un control de lista o un control de cuadrícula). En la vista de cerca, el zoom semántico se muestra como lista de elementos agrupados en encabezados de clave; en la vista de lejos, se muestra como una lista de claves.

Si se pulsa un elemento en la vista de cerca, se selecciona el elemento o se abre su página de detalles. Si se pulsa una clave de grupo en la vista de lejos, ese grupo se acerca y se muestra.

  • Applies to Windows

Windows: la interacción de zoom se ejecuta con los gestos de reducir y ampliar (separar los dedos acerca el contenido y acercar los dedos lo aleja), o bien manteniendo presionada la tecla Ctrl mientras se desplaza la rueda de desplazamiento del mouse, o bien 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 (-).

  • Applies to Windows Phone

Windows Phone: si en la vista de cerca se pulsa un encabezado de claves de grupo, la vista se aleja.

Temas relacionados

Para diseñadores
Directrices para las interacciones del usuario comunes
Interacciones táctiles
Para desarrolladores (HTML)
Incorporación de controles de zoom semántico
Inicio rápido: Incorporación de zoom semántico
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
SemanticZoom
Windows.UI.Input
Para desarrolladores (XAML)
Inicio rápido: entrada táctil
Inicio rápido: controlar entrada de puntero
Windows.UI.Xaml.Input
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 (WinJS)
Muestra en HTML de SemanticZoom para controles personalizados
Muestra en HTML de agrupación de ListView y SemanticZoom
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:
© 2014 Microsoft