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

Directrices para barras de la aplicación

Applies to Windows and Windows Phone

Muestra del aspecto de un control de barra de navegación estándar

Muestra del aspecto del control de barra de la aplicación estándar

Descripción

Las barras de la aplicación proporcionan a los usuarios acceso fácil a los comandos cuando los necesitan. Los usuarios pueden deslizar el dedo rápidamente desde el borde superior o inferior de la pantalla para que aparezcan las barras de la aplicación y pueden interaccionar con su contenido para hacerlas desaparecer. Las barras de la aplicación también sirven para mostrar comandos u opciones que sean específicos del contexto del usuario, como el modo de dibujo o selección de fotos. También se pueden usar para ir de una página o de una sección de la aplicación a otra.

Explora la funcionalidad de navegación con más detalle como parte de nuestra serie Características de aplicaciones, de principio a fin:  Navegación plana, de principio a fin (HTML y XAML) y navegación jerárquica, de principio a fin (HTML y XAML)

Si tienes comandos que son necesarios para que el usuario complete un flujo de trabajo (como comprar un producto), coloca esos comandos en el Canvas en vez de en barras de la aplicación.

Barra de la aplicación superior

La barra de navegación, o barra de la aplicación superior, es el lugar recomendado para ubicar controles de navegación que permiten al usuario acceder a otras áreas de la aplicación. Al usar la barra de la aplicación superior para la navegación, puedes proporcionar una experiencia de usuario coherente e intuitiva para navegar en aplicaciones de la Tienda Windows. La coherencia le da confianza al usuario para moverse por el sistema y le ayuda a transferir su conocimiento sobre la navegación de una aplicación a otra.

Los usuarios podrán completar los escenarios principales con solo usar el lienzo. La barra de navegación es una ubicación secundaria para los controles. Esta barra puede ayudar a orientar al usuario hacia los distintos sectores de la aplicación, puede proporcionarle acceso rápido a la página principal o puede incentivarlo a moverse de un lugar a otro.

También puedes elegir incluir otras funcionalidades dentro de la barra de la aplicación superior, como agregar un botón ‘+’ para crear algo nuevo o integrar un cuadro de búsqueda. Cuando agregas otras funcionalidades, recomendamos que las coloques en el lado derecho de la barra de la aplicación.

Si bien puedes elegir un estilo para los elementos de la barra de navegación, el aspecto predeterminado es un simple botón. Sin embargo, otro tratamiento visual común es el uso de botón y miniatura, como se muestra en la imagen anterior.

También puedes dividir la barra de navegación en varias áreas, como lo hace una aplicación de Tienda. Aquí puedes ver que la sección superior está destinada a la navegación global y la sección inferior está destinada a categorías de la aplicación.

Imagen de la barra de navegación de una aplicación de la Tienda

Barra de la aplicación inferior

La barra de la aplicación inferior es el lugar recomendado para incluir comandos. Al mover los comandos del lienzo de la aplicación a la barra, ofreces una experiencia de usuario más envolvente.

El control de barra de la aplicación estándar está diseñado para desarrolladores interesados en implementar una barra de la aplicación con escaso o sin trabajo personalizado. Si bien es fácil crear esta barra, no es fácil garantizar que se comporte de acuerdo con los patrones y guías de Windows. CommandBar class y WinJS.UI.AppBar object sirven para alinearse con el diseño y los comportamientos buscados, de modo tal que el desarrollador no tenga que pensar en cada mínimo detalle y se pueda minimizar la posibilidad de divergir de los patrones de comandos comunes.

Si quieres distanciarte de la experiencia estándar y personalizar las barras de la aplicación, usa el control AppBar en lugar del control CommandBar en XAML.

Puedes usar los iconos integrados para comandos o crear los tuyos propios. Para ver la lista de iconos disponibles, consulta:

Ejemplos

Barra de la aplicación superior

Captura de pantalla que ilustra el control de barra de navegación estándar

 

Barra de la aplicación inferior

Captura de pantalla que ilustra el control de barra de la aplicación estándar

Qué hacer y qué no hacer

  • Separa navegación y comandos. Idealmente, sitúa los comandos en la barra de la aplicación inferior y la navegación en la barra de la aplicación superior. Piensa si te interesa proporcionar ayuda la primera vez que se ejecute la aplicación para que los usuarios conozcan los comandos importantes de la barra de la aplicación.

  • Si tienes distintos conjuntos de comandos (por ejemplo, uno para crear contenido nuevo y otro para filtrar la vista), pon uno en el lado derecho y el otro en el lado izquierdo de la barra de la aplicación. Si tienes más de dos conjuntos, usa un separador para separarlos.

  • Coloca los comandos en una ubicación coherente en toda la aplicación. Aunque cada página solo debería contener los comandos que son relevantes para esa página, si se comparten comandos entre las páginas, estos deberán estar lo más cerca posible de la misma ubicación, para que los usuarios puedan suponer donde estarán los comandos.

  • Sigue las convenciones de colocación:

    • Coloca los botones Nuevo/Agregar/Crear (+ icono) en el extremo del lado derecho.
    • Agrupa los botones de cambio de vista y colócalos en el extremo del lado izquierdo.
    • Coloca los comandos Aceptar y Sí a la izquierda de los comandos Rechazar, No y Cancelar.
  • Muestra los comandos contextualmente en una barra de la aplicación cuando se seleccione un elemento, y muestra la barra de la aplicación automáticamente. La mayor parte de las personas son diestras, de modo que cuando un usuario seleccione un elemento en la página de la aplicación, muestra los comandos relevantes a ese elemento en el lado izquierdo de la barra de la aplicación. De esa forma, los brazos y las manos no taparán los comandos.

  • Si tienes comandos contextuales en una barra de la aplicación, establece el modo en permanente mientras exista ese contexto para que la barra no se oculte automáticamente cuando el usuario interaccione con la aplicación. Desactiva el modo permanente cuando el contexto deje de estar presente. Por ejemplo, sería recomendable mostrar comandos contextuales para la manipulación de fotos cuando se seleccione una imagen, pero quieres dejar que los usuarios sigan trabajando con la imagen con tareas como girar o recortar la imagen. En este caso, la barra permanece visible hasta que el usuario anula la selección de la imagen o quita la barra de la aplicación deslizando el dedo rápidamente desde el borde.

  • Si no te caben todos los comandos en una barra de la aplicación como botones independientes, agrúpalos y colócalos en menús a los que puedan acceder los usuarios desde botones de la barra de la aplicación. Usa agrupaciones lógicas para los comandos, como colocar Responder, Responder a todos y Reenviar en un menú Responder.

    Imagen de un control flotante y un menú

  • Diseña la barra de la aplicación para la vista vertical y cambiada de tamaño. Si tienes diez comandos o menos, Windows ocultará automáticamente las etiquetas y ajustará el espaciado interno cuando el usuario cambie la aplicación de tamaño o gire a vista vertical, así que proporciona información sobre herramientas en todos los comandos. Si quieres una vista más personalizada, puedes agrupar los comandos en menús o proporcionar una experiencia más centrada que requiera menos comandos en la vista vertical o cambiada de tamaño.

    En las aplicaciones JavaScript, sería una buena idea colocar comandos globales antes que los comandos contextuales en el DOM para obtener el mejor diseño cuando la gente cambie la aplicación de tamaño. Para más información, consulta las secciones Agregar una barra de la aplicación con comandos y Aplicar estilo a barras de la aplicación.

    En aplicaciones C#/C++/VB, el cambio de tamaño se administra en tu lugar si usas el control CommandBar. Para más información, consulta Cómo usar una barra de la aplicación en distintos tamaños.

  • Si la aplicación tiene un área de desplazamiento horizontal en la parte inferior de la página de la aplicación, reduce la altura de esta área cuando la barra de la aplicación aparezca en modo permanente. De lo contrario, la barra de la aplicación puede cubrir la barra de desplazamiento y los usuarios tendrían que quitar la barra de la aplicación para poder seguir realizando el desplazamiento. Deberías intentar mantener el borde inferior de la barra de desplazamiento alineado con el borde superior de la barra de la aplicación.

  • No coloques comandos críticos en la barra de la aplicación. Por ejemplo, en una aplicación de cámara, pon el comando "Hacer foto" en la página de la aplicación en vez de la barra de la aplicación. Podías agregar un botón a la página de la aplicación o simplemente dejar que el usuario pulse en la vista previa para tomar la foto.

  • No coloques comandos de inicio de sesión, de cierre de sesión u otros comandos de administración de cuentas en la barra de la aplicación. Todos los comandos de administración de cuentas, como los de inicio de sesión, cierre de sesión, configuración de cuenta o creación de cuenta deben incluirse en un control flotante de configuración. Si es fundamental que la gente inicie sesión en una página particular, haz que el botón de inicio de sesión esté en la página de la aplicación. Para más información, consulta Directrices para inicio de sesión.

  • No pongas la configuración de la aplicación en la barra de la aplicación. Todos los comandos de configuración de la aplicación, como los valores predeterminados o las preferencias, deberían ir en un control flotante Configuración. El control flotante Configuración también es el mejor lugar para comandos de administración que apenas se usen, como los que sirven para limpiar el historial.

Instrucciones de uso adicionales

Escalar para distintos tamaños de ventana

Cuando se cambia el tamaño de una ventana con una barra de la aplicación, el sistema cambia el tamaño de los comandos y podría colocar etiquetas. Cuando los comandos de tamaño reducido ya no pueden ubicarse en una sola fila en la pantalla, el sistema los acomoda en una segunda fila.

  • Diseña al menos dos vistas de la barra de la aplicación, una de tamaño completo y otra de tamaño reducido (ya sea de 500 px o de 320 px como mínimo). Por lo general, solo se usan los tamaños de ventana comunes; es decir, pantalla completa o 50/50 con otra aplicación.
  • Agrupa comandos cuando diseñes vistas más pequeñas. Si no puedes agrupar comandos por su significado, colócalos en un grupo "más", usando el icono de puntos suspensivos.
Resoluciones de ventana comunes (en píxeles)Número de botones de tamaño reducido sin etiquetas en una sola filaNúmero de botones de tamaño completo sin etiquetas en una sola fila
13662213
10241610
768127
50085
32053

 

Administrar el botón derecho del mouse

Para que la interfaz de usuario de tu aplicación sea coherente con la de otras aplicaciones de la Tienda Windows, los usuarios deben hacer clic con el botón derecho para desencadenar la barra de la aplicación que proporciones. Si tienes una aplicación que debe usar el botón derecho para otro fin, por ejemplo, un disparo secundario en un juego o una bola de seguimiento virtual en un visor 3D, la aplicación puede omitir los eventos que activan la barra de la aplicación. De todas formas, deberías tener en cuenta el rol de la barra de la aplicación, o un menú contextual similar, en el modelo de control de tu juego, ya que se trata de una parte importante de la experiencia de las aplicaciones de la Tienda Windows.

Sigue estas directrices cuando diseñes los controles de tu aplicación:

  • Si la aplicación necesita usar el botón derecho del mouse para ejecutar una función importante, úsalo para esa función directamente. No actives ninguna interfaz de usuario contextual ni la barra de la aplicación si no es importante para el flujo de trabajo.
  • Muestra la barra de la aplicación cuando el usuario haga clic con el botón derecho en regiones de la aplicación que no necesitan acciones contextuales que se activan con el botón derecho, como los menús laterales.
  • Si es necesario admitir el botón derecho del mouse en cualquier otra parte, considera la posibilidad de mostrar la barra de la aplicación cuando el usuario haga clic con el botón derecho en la fila horizontal superior de píxeles o en la fila horizontal inferior de píxeles, o en ambas.
  • Si ninguna de estas soluciones es suficiente, usa los controles de interacción de usuario personalizados para abrir la barra de la aplicación con el mouse.
  • Usa los eventos de clase MouseDevice, como MouseMoved, para implementar tus propios comportamientos de menú contextual.
  • Recuerda que el gesto de pulsar y mantener pulsado equivale a un clic con el botón derecho. Controla ambos eventos de manera similar. Para controlar este evento y definirle un comportamiento personalizado, registra la aplicación para el evento Holding. Para habilitar la opción de mantener pulsado, establece Hold (para entradas táctiles y manuscritas) y HoldWithMouse en la GestureSettings propiedad.
  • No cambies el comportamiento de la combinación de teclas Win+Z. La aplicación debe mostrar la barra de la aplicación o un menú contextual. Registra la aplicación para los eventos KeyDown y AcceleratorKeyActivated para determinar cuándo se han presionado estas dos teclas.

Temas relacionados

Para diseñadores
Diseños de comandos
Patrones de navegación
Hacer que la barra de la aplicación sea accesible
Para desarrolladores (HTML)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
Muestra del control AppBar HTML
Muestra de control NavBar HTML
Muestra de navegación e historial de navegación
Tu primera aplicación: Parte 3: navegación y objetos de PageControl
Agregar barras de la aplicación
Agregar barras de navegación
Ir de una página a otra (HTML)
Para desarrolladores (XAML)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Muestra de control AppBar XAML
Muestra de navegación XAML
Tu primera aplicación: Parte 3: navegación, diseño y vistas
Tu primera aplicación: Agregar navegación y vistas a una aplicación de la Tienda Windows con C++ (tutorial 3 de 4)
Agregar barras de la aplicación (XAML)
Ir de una página a otra (XAML)
Para desarrolladores (aplicaciones de Windows en tiempo de ejecución con DirectX con C++)
Creación de una barra de la aplicación o Configuración

 

 

Mostrar:
© 2014 Microsoft