Diseños de comandos

Tienes a tu disposición varias superficies para colocar en ella comandos y controles en tu aplicación de la Tienda Windows, como el lienzo de la aplicación, las ventanas emergentes, los cuadros de diálogo y las barras de la aplicación. Elegir la superficie correcta en el momento adecuado puede suponer la diferencia entre que una aplicación sea incómoda o vaya como la seda.

En aplicaciones de la Tienda Windows, los comandos son elementos interactivos de la interfaz de usuario que el usuario puede utilizar para realizar una acción. Un comando se distingue de un elemento de navegación porque este último mueve al usuario a una página distinta, mientras que un comando permite llevar a cabo una acción en la página actual. Los elementos de navegación hacen que la aplicación sea utilizable. Los comandos la hacen útil.

Para obtener más información sobre las distintas superficies de comandos en las aplicaciones de la Tienda Windows, consulta Diseñar la interfaz de usuario.

Tipos de comando

Filtro

Los comandos de filtro quitan u ocultan el contenido dentro de un conjunto de datos, según ciertos criterios. Por ejemplo, es posible que un usuario decida ver solo aquellos juegos de la Tienda Windows que se encuentren bajo la categoría "Aventura".

 

Búsqueda en la Tienda Windows de juegos de aventura

 

Tabla dinámica

Los comandos de tabla dinámica reorganizan el contenido dentro de un conjunto de datos y ofrecen una vista distinta de los datos en función de la tabla dinámica. Por ejemplo, es posible que un usuario decida organizar las canciones por álbum, por artista o por canción.

 

Aplicación de música de Xbox

 

Ordenación

Los comandos de ordenación cambian el orden en que se muestra el contenido dentro de un conjunto de datos. Por ejemplo, es posible que un usuario elija destinos en una aplicación de viajes en función de la popularidad de los destinos.

 

Aplicación Bing Viajes

 

Vista

Los comandos de vista cambian el estilo o el método en que se muestra el contenido. Por ejemplo, en una aplicación que busca hoteles, es posible que un usuario vea los hoteles en el mapa en lugar de en una lista.

 

Aplicación Expedia

 

Sugerencias

Puedes colocar comandos para sugerencias en el lienzo si crees que beneficiarán a los usuarios. Por ejemplo, en la aplicación Correo en Windows 8.1, hay un comando "ellipses" que muestra opciones adicionales. Al hacer clic en él muestra la barra de la aplicación, además de los métodos convencionales de Windows que muestran una barra de la aplicación.

 

Aplicación Correo con sugerencia de barra de la aplicación

 

Puedes diseñar estas sugerencias para que coincidan con el estilo de tu aplicación. Esta aplicación de noticias usa la misma sugerencia de barra de la aplicación con un icono de menú que muestra una página con opciones de menú.

 

Aplicación de noticias Bento con sugerencias de menú y de barra de la aplicación

 

Otros

Cualquier elemento interactivo de la interfaz de usuario que permita al usuario realizar una acción dentro de la vista actual se considera un comando. A continuación se muestran algunos ejemplos.

 

Ejemplos de otros comandos

 

Ejemplos de comandos personalizados

Colocación de los comandos

Usar el lienzo

Si un comando (o un menú de comandos) es esencial y se necesita constantemente para completar tareas en escenarios principales, puedes ponerlo en el lienzo. Por ejemplo, en la aplicación Correo de Windows 8.1, los comandos principales, como responder, nuevo y eliminar aparecen en el lienzo cuando se selecciona un correo.

 

La aplicación Correo con comandos en el lienzo

 

Barra de la aplicación inferior

A veces no quieres que los comandos desordenen el lienzo y afecten la capacidad del usuario para consumir el contenido de la aplicación. Usa la barra de la aplicación para mostrar comandos a los usuarios a petición. La barra de la aplicación inferior muestra comandos relevantes para el contexto del usuario, normalmente la página o la selección actuales. La barra de la aplicación inferior no es visible de manera predeterminada. Aparece cuando el usuario desliza rápidamente el dedo desde la parte superior o inferior de la pantalla o cuando hace clic con el botón secundario.

 

deslizar rápidamente desde la parte superior o inferior para mostrar barras de la aplicación.

 

La barra de la aplicación inferior funciona bien para comandos de selección única y múltiple. Puedes programar la aplicación para que la barra aparezca cuando el usuario selecciona objetos.

 

objetos seleccionados, aparece la barra de la aplicación

 

Directrices sobre la ubicación de comandos

Puedes ubicar los comandos en distintas posiciones en la barra de la aplicación, pero debes considerar lo siguiente:

  • Previsibilidad En la medida de lo posible, usa una selección de ubicación coherente de los comandos y las interacciones en todas las vistas de tu aplicación.
  • Ergonomía Valora cómo la selección de ubicación de comandos específicos puede mejorar la velocidad o facilidad con la que se puede actuar en un comando.
  • Estética Limita el número de comandos para evitar que la barra de la aplicación parezca complicada. Elige iconos que sean fáciles de comprender o predecir. Usa etiquetas de texto cortas.

Recomendamos estas directrices para la ubicación de comandos:

Ubica los comandos predeterminados o persistentes en el lado derecho de la barra de la aplicación. Si hay pocos comandos, la barra de la aplicación podría quedar con comandos solo a la derecha.

En este ejemplo de los comandos Examinar, los conjuntos de comandos de vista y de filtrar/ordenar son persistentes.

Comandos persistentes colocados a la derecha

 

Usa los bordes. Si hay muchos comandos, separa los distintos conjuntos a la derecha o a la izquierda para equilibrar la barra de la aplicación y hacer que los comandos sean ergonómicamente más accesibles.

En este ejemplo, decidimos mover el conjunto de comandos de vista a la izquierda y mantener el conjunto de filtrar/ordenar a la derecha. Cuando la vista de mapa está activa, los comandos de la vista de mapa aparecen a la derecha del conjunto de comandos de vista.

Comandos separados en el borde izquierdo y en el borde derecho

 

Muestra y oculta comandos deshabilitados. Estos son comandos no relevantes en ciertas circunstancias. Cuando aparezcan, no deben alterar el orden de los comandos persistentes.

En este ejemplo, la vista de mapa está activa y los comandos de la vista de mapa aparecen a la derecha del conjunto de comandos de vista.

Comandos con un comando deshabilitado

 

Inserta comandos de selección. Los comandos que aparecen cuando el usuario realiza una selección se sitúan en el extremo izquierdo, desplazando los comandos que pudiera haber ahí. Esto hace que los comandos de selección sean más notorios y fáciles de acceder.

En este ejemplo, el conjunto de comandos de vista desplaza el resto a la derecha para hacerse sitio.

Comandos de selección en el extremo izquierdo

 

Ubicación de comandos comunes

Algunos comandos son comunes y aparecen en muchas aplicaciones. Para crear coherencia e infundir confianza, recomendamos que sigas estas directrices para decidir dónde ubicar los comandos en la barra de la aplicación.

Ubica los comandos de selección en el extremo izquierdo, ya sean comandos contextuales que aparecen al seleccionar o comandos que afectan a la selección.

En este ejemplo, antes de que los usuarios seleccione algo, se muestra un comando "Seleccionar todo" a la izquierda. Después de que los usuarios seleccionen algo, se muestran los demás comandos de selección a la izquierda.

Comandos de selección contextual que reemplazan el comando Seleccionar todo después de que el usuario selecciona algo

 

Ubica comandos de nuevo elemento en el extremo derecho de la aplicación. Los comandos de nuevo elemento pueden ser agregar, crear, componer o cualquier otro comando que cree una nueva entidad. Estos comandos deben ser fácilmente accesible con los pulgares.

En este ejemplo, el comando "Nueva crítica" permite al usuario crear una nueva crítica de un restaurante. Otros comandos relacionados con "Nueva crítica" se colocan junto a él a la izquierda.

El glifo + solo debe usarse para representar el comando "Nuevo" y no debe aparecer en ningún otro lugar de la barra de la aplicación.

Comando Nuevo elemento en el extremo derecho de la barra

 

Ubica comandos de eliminar a la izquierda de los comandos de nuevo elemento. Usa Eliminar/Nuevo si tu aplicación administra entidades individuales que podrían persistir fuera de tu aplicación, por ejemplo, una aplicación de correo o de cámara. Eliminar/Nuevo deben aparecer siempre en este orden.

Comandos de la barra de la aplicación para Eliminar y Nuevo

 

Ubica comandos de eliminar a la izquierda de los comandos de agregar. Usa Quitar/Agregar si tu aplicación administra una lista, por ejemplo, lista de tareas pendientes, lista de ciudades en una aplicación de información meteorológica o una lista de restaurantes incluidos en marcadores. Quitar/Agregar deben aparecer siempre en este orden.

Comandos de la barra de la aplicación para Quitar y Agregar

 

Ubica comandos de borrar a la izquierda de los comandos de nuevo elemento. Usa Borrar si vas a realizar una acción destructiva en todos los elementos posibles. Usa la etiqueta del comando y sé explícito acerca de la acción que realizará el comando, por ejemplo, "Borrar selección".

Comandos de la barra de la aplicación para Borrar y Nuevo

 

Agrupación de comandos en menús

A veces resulta más eficiente agrupar varios comandos en un menú de comandos. Los menús permiten presentar más opciones en menos espacio. Los menús pueden incluir controles interactivos.

En este ejemplo, el orden de comandos se muestra en un menú simple que facilita al usuario elegir una opción de ordenación. El comando para filtrar muestra un conjunto de controles que permite al usuario filtrar los elementos por criterios más complejos.

comandos de la barra de la aplicación agrupados en menús

 

Menús contextuales

Los menús contextuales suelen tener acciones del Portapapeles, por ejemplo, cortar, copiar y pegar. Estos menús también pueden tener comandos que se aplican al contenido que no puede seleccionarse, como una imagen en una página web. El sistema ofrece aplicaciones con menús contextuales predeterminados para el texto y los hipervínculos. Para el texto, el menú contextual predeterminado muestra los comandos del Portapapeles. Para los hipervínculos, el menú predeterminado muestra comandos para copiar el vínculo y para abrirlo.

Los usuarios invocan menús contextuales al mantener presionado el contenido en dispositivos táctiles o al hacer clic con el botón secundario en el contenido usando el mouse.

 

Menú contextual de un vínculo en Bing

 

Aprovechar los accesos

Cuando diseñes una aplicación de la Tienda Windows, obtienes cuatro comandos muy útiles en los accesos: buscar, compartir, dispositivos y configuración. Los usuarios invocan los accesos al deslizar rápidamente desde el borde derecho de la pantalla o al apuntar el cursor del mouse hacia el extremo superior o inferior derecho de la pantalla.

 

Deslizar rápidamente desde el borde derecho para los accesos

 

Buscar: permite que los usuarios busquen rápidamente el contenido de la aplicación desde cualquier parte del sistema, incluso desde otras aplicaciones.accesos
Compartir: permite que los usuarios compartan contenido de la aplicación con otras personas o aplicaciones, y reciban contenido compartido.
Inicio: lleva al usuario a la pantalla Inicio. Las aplicaciones no interactúan con este acceso. El comportamiento es automático y siempre el mismo.
Dispositivos: permite que los usuarios disfruten de la transmisión de audio, vídeo o imágenes desde la aplicación a otros dispositivos de la red doméstica.
Configuración: consolida toda la configuración en un solo lugar y permite que los usuarios configuren la aplicación mediante un mecanismo común con el que ya están familiarizados.

 

Evita duplicar la funcionalidad de contrato de aplicación en el lienzo de la aplicación o en la barra de la aplicación.

Temas relacionados

Directrices sobre barras de la aplicación
Directrices sobre menús contextuales
Directrices sobre comandos del Portapapeles
Barra de la aplicación inferior
Barra de la aplicación superior
Accesos y contratos
Menú contextual

 

 

Mostrar:
© 2014 Microsoft. Reservados todos los derechos.