Bordes

Aplicación de grabadora de sonido

 

Los bordes son una herramienta de interacción eficaz y atractiva que forman una parte integral de Windows. El diseño de los bordes se basa en el principio de Hacer más con menos. Los bordes ofrecen una variedad de opciones para obtener más resultados con menos esfuerzo. Te permiten mover elementos fuera del lienzo si no están relacionados directamente con el contenido que se muestra en ese momento. Ofrecen a los usuarios maneras confiables e intuitivas de navegar que parecen naturales en cualquier dispositivo.

Bordes en Windows

Barras de la aplicación

barras de la aplicación en la aplicación Finanzas

 

La barra de la aplicación superior también se conoce como barra de navegación porque las aplicaciones suelen tener los controles de navegación en esta barra.

La barra de la aplicación inferior también se conoce como barra de comandos porque las aplicaciones suelen tener los comandos en esta barra.

El diseño de las barras de la aplicación depende de ti, ya que no interactúan con el sistema. Puedes elegir colocar otra información relevante para el contexto en la barra de la aplicación superior o inferior en lugar de, o además de, los controles de navegación y los comandos. Por ejemplo, en una aplicación de compras, puedes colocar el contenido del carrito de la compra de un usuario en la barra de la aplicación superior. Esto permite al usuario centrarse en la compra a la vez que ofrece una referencia rápida del carrito y el proceso de compra. En una aplicación de música, puedes colocar en la barra de la aplicación inferior los controles multimedia, como reproducir, pausar y avanzar. Estos controles están ocultos hasta que el usuario selecciona una canción, en cuyo momento los controles se vuelven relevantes en ese contexto.

 

Accesos

Aplicación Finanzas y accesos

 

Los accesos son el uso más icónico de los bordes. Los accesos inician las interacciones del sistema. Un usuario invoca los accesos al deslizar rápidamente desde el borde derecho de la pantalla o al apuntar a la esquina derecha superior o inferior. Para más información, consulta el tema sobre accesos y contratos.

 

Borde izquierdo

Lista de aplicaciones recientes

 

El borde izquierdo es el centro de comandos del usuario para ver las aplicaciones que ha usado recientemente, para cambiar de una aplicación a otra y para colocar varias aplicaciones en paralelo en la pantalla.

Innovación con bordes

Te animamos a que busques maneras nuevas e innovadoras de usar los bordes en el diseño de tu aplicación. Incluso puedes elegir no implementar barras de la aplicación o usarlas al mínimo. Por ejemplo, en la aplicación de música de Xbox se incluyen la mayoría de los comandos en el lienzo y solo unos pocos en la barra de la aplicación.

Los controles estándar y la colocación típica son solo el punto de partida. Piensa con creatividad sobre los usos que puedes darle a los bordes en tu aplicación.

Ejemplos de bordes

En el siguiente ejemplo, la aplicación usa la barra de la aplicación superior para mostrar vídeos relacionados y la barra de la aplicación inferior para los comandos que están relacionados con el vídeo que se está reproduciendo en ese momento.

 

Aplicación Vevo con barras de la aplicación

 

En la aplicación NatureSpace, la barra de la aplicación inferior es muy sutil y no se extiende por todo el ancho del lienzo, aunque ofrece una superficie de comandos válida para que el usuario controle la pista actual.

 

Aplicación NatureSpace con barra de la aplicación inferior

 

Las barras de la aplicación no tienen por qué parecerse a las de las plantillas estándar. Puedes diseñarlas para que encajen con tu marca de una manera atractiva. En este ejemplo de Disney, la barra de la aplicación parece formar parte del cuento.

 

Aplicación Disney Princess Dress-up Sticker Book con barra de la aplicación inferior

 

Temas relacionados

Patrones de navegación

Diseños de comandos