Conceptos básicos de la interfaz de usuario

Conceptos básicos sobre la interfaz de usuario de las aplicaciones de la Universal Windows Platform (UWP)

Una interfaz de usuario moderna es algo complejo que se compone de texto, formas, colores y animaciones formadas en última instancia por píxeles individuales de la pantalla del dispositivo que estás usando. Al empezar a diseñar una interfaz de usuario, la gran cantidad de opciones puede ser abrumadora.

Para que las cosas sean más sencillas, vamos a definir la anatomía de una aplicación desde una perspectiva de diseño. Supongamos que una aplicación se compone de pantallas y páginas. Cada página tiene una interfaz de usuario que consta de tres tipos de elementos de IU: elementos de contenido, de comandos y de navegación.

Anatomía de una aplicación

Áreas de contenido, navegación y comandos de una aplicación de libreta de direcciones

Elementos de navegación

Los elementos de navegación ayudan a los usuarios a elegir el contenido que quieren mostrar. Entre algunos ejemplos de elementos de navegación se incluyen pestañas y tablas dinámicas, hipervínculos y paneles de navegación.

Los elementos de navegación se tratan en detalle en el artículo Conceptos básicos del diseño de navegación.

Elementos de comandos

Los elementos de comandos inician acciones como manipular, guardar o compartir contenido. Entre algunos ejemplos de elementos de comandos se incluyen el botón y la barra de comandos. Los elementos de comandos también pueden incluir métodos abreviados de teclado que no están visibles en la pantalla.

Los elementos de comando se tratan en detalle en el artículo Conceptos básicos del diseño de comandos.

Elementos de contenido

Los elementos de contenido muestran el contenido de la aplicación. Para una aplicación de pintura, el contenido puede ser un dibujo; para una aplicación de noticias, el contenido puede ser un artículo.

Los elementos de contenido se tratan en detalle en el artículo Conceptos básicos del diseño de contenido.

 

Como mínimo, una aplicación tiene una pantalla de presentación y una página principal que define la interfaz de usuario. Una aplicación típica tendrá varias páginas y pantallas, y los elementos de navegación, comandos y contenido pueden cambiar de una página a otra.

En la ilustración siguiente se muestra la estructura de una aplicación hipotética con diversas páginas, cada una de las cuales tiene una selección distinta de elementos de navegación, comandos contenido:

Imagen de una estructura de aplicación típica

Echemos un vistazo a algunos modelos de interfaz de usuario comunes para combinar los elementos de navegación, comandos y contenido.

Patrones de interfaz de usuario comunes

Al combinar uno o más elementos, se crea un patrón. Estos cinco patrones de interfaz de usuario suelen usarse para ofrecer navegación, comandos y contenido; la mayoría de las aplicaciones usarán al menos uno. Estos elementos de interfaz de usuario pueden servir como base cuando se crea la interfaz de usuario de la aplicación. (También puedes combinar patrones de interfaz de usuario para proporcionar una funcionalidad más compleja).

Elemento de la interfaz de usuario.Descripción

Lienzo activo

Lienzo activo

Tipos de elementos: Comando y contenido

El lienzo activo está pensado para aplicaciones de vista única o experiencias modales, como un explorador, un visor de documentos, un visor o editor de fotos, una aplicación de dibujo u otras aplicaciones que usen una vista principal de desplazamiento libre. Puede contener acciones de nivel de página o de nivel superior.

Este diseño para una aplicación de edición de fotos destaca el uso de un lienzo activo:

Ejemplo de un diseño de aplicación de edición de fotos que usa lienzos activos

Maestro y detalles

Patrón de maestro y detalles

Tipos de elementos: Navegación y contenido

El patrón de maestro y detalles muestra una lista maestra y los detalles del elemento seleccionado actual. Este patrón se usa con frecuencia en listas de correo electrónico y de contactos y con libretas de direcciones.

Este diseño para una aplicación de seguimiento de cotizaciones hace uso de un patrón de maestro y detalles:

Ejemplo de una aplicación de cotización bursátil con un patrón de maestro y detalles

Panel de navegación

Un panel de navegación

Tipos de elementos: Navegación y contenido

Un panel de navegación permite muchos elementos de navegación de nivel superior a la vez que se conserva la superficie de la pantalla. Consta de tres componentes principales: un botón, un panel y un área de contenido. El botón es un elemento de interfaz de usuario que permite al usuario abrir y cerrar el panel. El panel es un contenedor de elementos de navegación. En el área de contenido se muestra información del elemento de navegación seleccionado. El panel de navegación también puede existir en un estado acoplado, en el que siempre se muestra el panel.

Este diseño para una aplicación particular inteligente incluye un patrón de panel de navegación:

Ejemplo de una aplicación que usa un patrón de panel de navegación

Pestañas y tablas dinámicas

Navegación en pestañas

Navegación dinámica

Tipos de elementos: Navegación y contenido

Muestra una lista persistente de vínculos a páginas que, además, proporciona una forma rápida de moverse entre distintos elementos dinámicos (vistas o filtros), normalmente en el mismo conjunto de datos.

Este diseño de una aplicación particular inteligente usa un patrón de pestañas o controles dinámicos:

Ejemplo de una aplicación que usa un patrón de pestañas o controles dinámicos

 

Crear tus propios patrones

Ahora que comprendes la anatomía básica de una aplicación y has visto algunos patrones comunes de interfaz de usuario, consulta nuestras directrices de diseño de navegación, comandos y contenido. Estos artículos te ayudarán a comprender cuándo se debe usar cada uno de los elementos y patrones de interfaz de usuario.

  • Navegación

    Aprende a diseñar una experiencia excelente de navegación siguiendo tres reglas simples.

  • Comandos

    Obtén información sobre los elementos de comandos y sobre cómo usarlos para crear una experiencia de interacción excelente.

  • Contenido

    El contenido es aquello en que consiste una aplicación. Es el elemento en que se centra el usuario la gran mayoría de las veces que usa la aplicación. En este artículo se incluyen recomendaciones para diferentes tipos de contenido y experiencias de consumo de contenido.

[Este artículo contiene información específica de las aplicaciones para UWP y Windows 10. Para obtener instrucciones sobre Windows 8.1, descarga el PDF sobre las directrices para Windows 8.1].

 

 

Mostrar:
© 2018 Microsoft