Directrices y lista de comprobación para barras de la aplicación (aplicaciones de la Tienda Windows)

Sigue estas directrices cuando trabajes con barras de la aplicación para aplicaciones de la Tienda Windows.

Guía básica: Relación de este tema con los demás. Consulta:

Directrices sobre la experiencia del usuario

Las barras de la aplicación proporcionan al usuario acceso fácil a los comandos cuando los necesitan. El usuario puede deslizar el dedo rápidamente desde el borde inferior de la pantalla para que aparezcan las barras de la aplicación y puede 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.

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.

Directrices para comandos en la barra de la aplicación

Sigue estas directrices cuando coloques comandos en la barra de la aplicación.

  • Separa los grupos de comandos en lados opuestos 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.

  • Mantén los comandos en una ubicación consistente 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.

  • Establece el modo para descartar la barra de la aplicación en permanente cuando se muestren comandos contextuales.

    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.

  • No uses menús ni controles flotantes cuando tengas demasiados comandos.

    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.

    Menú 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.

    No crees un menú como "Más" u "Opciones avanzadas" para comandos diversos que no guarden relación. Estos tipos de comandos genéricos suelen dar la impresión de que la aplicación es más complicada y muy pocos usuarios llegan a explorarlos. Si te encuentras con demasiados comandos y no hay agrupaciones lógicas disponibles, sería aconsejable que simplificaras tu aplicación.

  • Diseña la barra de la aplicación para la vista vertical y acoplada.

    Asegúrate de que los comandos de la barra de la aplicación se muestren correctamente en la vista acoplada y la vertical.

    Para obtener más información, consulta Cómo usar una barra de la aplicación en vistas diferentes.

  • Diseña teniendo en cuenta el desplazamiento horizontal.

    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.

  • Usa los estilos predeterminados para comandos, menús y controles flotantes.

    La gente se acostumbra a la colocación y los tamaños de los botones, así que si quieres personalizar una barra de la aplicación, recomendamos que personalices los colores del fondo, los iconos y las etiquetas, pero que no modifiques el tamaño ni el espaciado interno de los botones. El diseño predeterminado se ha pensado para la funcionalidad táctil y para que quepan diez comandos en todos los anchos de pantalla compatibles. Si haces cambios en el diseño, podrías ver resultados no deseables.

    Para obtener más información, consulta Inicio rápido: Aplicación de estilos en los botones de la barra de la aplicación.

  • Usa la barra de la aplicación inferior para los comandos y la de navegación para la navegación.

    Por lo general, usa la barra de la aplicación inferior para los comandos que realizan acciones en la página actual. Usa la barra de navegación para los elementos de navegación que mueven al usuario a una página diferente.

  • Usa los botones incorporados para los comandos.

    Para obtener más información, consulta Inicio rápido: Aplicación de estilos en los botones de la barra de la aplicación.

  • No coloques comandos críticos en la barra de la aplicación.

    No coloques comandos que sean fundamentales para una aplicación 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.

  • No coloques comandos del Portapapeles para texto en la barra de la aplicación.

    Coloca los comandos Cortar, Copiar y Pegar en un menú contextual de la página de la aplicación en lugar de una barra de la aplicació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.

Administrar el botón secundario 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 secundario para desencadenar la barra de la aplicación que proporciones. Si tienes una aplicación que debe usar el botón secundario 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 la aplicación 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 secundario 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.
  • Si hay regiones de la superficie de Microsoft DirectX que no requieren acciones contextuales específicas de la aplicación que se activan con el botón secundario, como menús laterales, muestra la barra de la aplicación cuando el usuario haga clic con el botón secundario en estas regiones.
  • Si se necesita admitir el botón secundario del mouse en cualquier parte del Canvas, considera la posibilidad de mostrar la barra de la aplicación cuando el usuario haga clic con el botón secundario 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, coloca un control personalizado en la superficie de DirectX para permitir que los gestos del mouse abran la barra de la aplicación.
  • Usa los eventos de clase MouseDevice, como MouseMoved, para implementar tus propios comportamientos de menú contextual.
  • Si usas la tecnología táctil, recuerda que presionar de manera prolongada o mantener presionado es lo mismo que hacer clic con el botón secundario. 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 acción de mantener presionado, establece la propiedad GestureSettings para que admita la acción de mantener presionado mediante entrada táctil, manuscrita y de lápiz. Para habilitar el comportamiento de mantener presionado con un mouse, establece HoldWithMouse en la propiedad GestureSettings.
  • No proporciones un comportamiento alternativo para la combinación de teclas Win+Z en la aplicación. Desarrolla una barra de la aplicación, o un menú contextual similar, y muéstrala cuando el usuario presione la tecla Windows junto con la tecla Z. Registra la aplicación para los eventos KeyDown y AcceleratorKeyActivated para determinar cuándo se han presionado estas dos teclas.

Temas relacionados

Inicio rápido: Agregar barras de la aplicación
Inicio rápido: Aplicación de estilos en los botones de la barra de la aplicación
Cómo usar una barra de la aplicación en vistas diferentes
AppBar

 

 

Mostrar:
© 2015 Microsoft