Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

¿Cómo se consigue crear una buena interfaz de usuario? ¿Cuál es el mejor diseño para la aplicación? ¿Qué hace que la navegación por una aplicación sea fácil e intuitiva?

Hazte estas preguntas antes de iniciar la fase de diseño del desarrollo de la aplicación. A continuación, aprende a implementar el diseño.

Con directrices, procedimientos recomendados y ejemplos, te ayudaremos a sacar el máximo provecho de las funcionalidades de la interfaz de usuario de Windows 8.1. Puedes definir la interfaz de tu aplicación para que sea intuitiva, atractiva y coherente con otras aplicaciones de la Tienda Windows.

Las siguientes secciones son un esquema de las tareas que te ayudarán a diseñar la interfaz de usuario de tu aplicación. En estas se siguen los procedimientos recomendados descritos en las Directrices sobre la experiencia del usuario.

Si es la primera vez que desarrollas una aplicación de la Tienda Windows, o si desconoces los conceptos relacionados con el diseño, la navegación, los controles y los comandos de la aplicación, te puede resultar útil consultar todos los pasos. De lo contrario, puedes saltarte algunos. Hemos agrupado los aspectos relacionados del desarrollo de la interfaz de usuario de la aplicación. Las directrices, las tareas y el código de ejemplo son específicos para el desarrollo de aplicaciones de la Tienda Windows con JavaScript y HTML. Para la versión de C#/VB/C++ y XAML, consulta Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin (XAML).

La muestra

La muestra de la galería de diseños y controles incluye todos los elementos de la interfaz de usuario de los que hablamos aquí. Haremos referencia a esta muestra complementaria a menudo y te indicaremos los puntos donde se implementan características concretas.

La aplicación de muestra es una galería de los controles de las aplicaciones de la Tienda Windows. Con la muestra, puedes examinar los controles y el código para implementarlos. También puedes ver cómo hemos implementado cada uno de los pasos de las secciones siguientes.

Paso 1: sigue los pasos iniciales y aprende dónde va cada elemento

Antes de empezar a diseñar y desarrollar la aplicación, asegúrate de planearla. Tómate el tiempo que necesites para analizar en qué aspectos destaca tu aplicación, de quiénes se compone tu público, qué escenarios quieres implementar y qué características admitirás. Para obtener más información sobre cómo planear la aplicación, consulta el tema sobre la definición de la visión.

Para empezar, decide cuál será la estrategia de navegación que usará la aplicación. En este tutorial, empezamos con la plantilla de concentrador. Para diseñar y desarrollar la interfaz de usuario de la aplicación, puedes descargar la plantilla e ir probando a medida que sigas el esquema. Para más información, consulta Patrones de navegación y Navegación jerárquica (HTML). O bien, si prefieres adentrarte y explorar el código, pasa directamente al Ejemplo de controles y galería de diseños.

Diseñar la interfaz de usuario Ubicación de los elementos en una aplicación de la Tienda Windows Obtén información sobre cómo diseñar la interfaz de usuario. En el ejemplo mostraremos cómo hemos usado la guía para diseñar nuestra aplicación. En la página principal se colocan los siguientes elementos en el elemento canvas: Lista de grupos de controles. Se agrupan por función para agilizar la búsqueda de los tipos de controles. Lista de todos los controles. Se ordenan alfabéticamente por nombre para facilitar la búsqueda de un control concreto. Hemos añadido un elemento de navegación en la barra de la aplicación superior de todas las páginas para que puedas volver rápidamente a la página principal. Cada página de sección sigue el patrón de navegación jerárquica estándar. Incluye una lista de elementos de control y vínculos a la página de detalles de cada uno de ellos. Las páginas de sección y de detalles incluyen un botón Atrás que te permite volver a la página anterior. En cada página de detalles se coloca el contenido clave de la pantalla principal de la aplicación: Descripción del control Ejemplos del control, si se puede mostrar en el elemento canvas Fragmentos de código para implementar el control

 

Paso 2: elegir los controles que se agregarán

Agregar controles y diseñar la aplicación son procesos que van de la mano. Tienes que saber qué controles debes agregar y establecer el diseño antes de elegir los controles. Si comprendes cómo funcionan los controles, podrás tomar buenas decisiones en cuanto al diseño.

En este tutorial, primero veremos los controles individuales. En el paso 3 aprenderás a organizarlos en un diseño. Si prefieres aprender a establecer el diseño primero, puedes ir directamente a la sección siguiente y volver a los controles más adelante.

Consulta el código de ejemplo para ver cómo hemos agregado cada control a la galería.

	Controles por función Lista de controles Familiarízate con la lista completa de controles disponibles y el objetivo de cada uno, y elige los controles que necesitarás para tu aplicación.
	Inicio rápido: Agregar controles HTML y controlar eventos Usa controles HTML, como botones, casillas y listas desplegables.
	Inicio rápido: Mostrar texto Usa controles HTML como etiquetas, elementos div, marcas de párrafo y áreas de texto para mostrar texto.
	Inicio rápido: Entrada y edición de texto Usa controles HTML como cuadros de texto, áreas de texto, cuadros de entrada de contraseña y cuadros de edición enriquecida/cuadros de texto enriquecido para introducir y editar texto.
	Inicio rápido: Agregar estilos y controles de WinJS Usa los controles de la Biblioteca de Windows para JavaScript, como el control ListView, el control de calificación y el control flotante.

 

Paso 3: crear el diseño

	Diseñar una página de la aplicación Obtén información sobre el sistema de cuadrículas, los encabezados, los márgenes y el espaciado, y sobre cómo estos elementos crean una experiencia coherente para los usuarios.
	Directrices sobre la experiencia del usuario para diseño y escalado Un usuario puede cambiar el tamaño de una aplicación del ancho mínimo a pantalla completa y mostrar la aplicación en pantallas de distintos tamaños, con resoluciones diferentes y en orientaciones distintas. Puedes diseñar la aplicación para que se vea bien en cualquier tamaño. En el ejemplo hemos usado el ancho mínimo predeterminado de 500 píxeles.
	Inicio rápido: Definir diseños de aplicaciones Crea una interfaz de usuario fluida que se vea y funcione bien en cualquier tamaño.
	Inicio rápido: diseñar aplicaciones para distintos tamaños de pantalla Aprende a cambiar el ancho mínimo de una aplicación de 500 píxeles a 320 píxeles y el diseño para que la aplicación se vea y funcione bien en tamaños estrechos. Aprende a diseñar una aplicación con movimiento panorámico horizontal para que cambie a un diseño vertical cuando el alto de la aplicación sea mayor que el ancho.
	Directrices sobre la experiencia del usuario para diseño y escalado A medida que aumenta la densidad de píxeles de un dispositivo de pantalla, se reduce el tamaño físico de los objetos en pantalla. Cuando la interfaz de usuario ya sería demasiado pequeña para tocar y cuando el texto sería demasiado pequeño para poder leerlo, Windows ajusta la escala del sistema y la interfaz de usuario de la aplicación a un porcentaje de escala. Aprende a garantizar que la aplicación se vea bien cuando se ajusta la escala.

 

Paso 4: elegir dónde colocar los comandos y cómo usar los accesos

	Diseños de comandos Aprende a colocar los comandos (en la pantalla, en elementos emergentes, en cuadros de diálogo o en barras de la aplicación) y decide dónde irán los comandos de la aplicación.
	Directrices y lista de comprobación para barras de aplicación Inicio rápido: agregar una barra de la aplicación con comandos Directrices sobre las barras de navegación Inicio rápido: Agregar una barra de navegación Obtén información sobre la agrupación de comandos, la coherencia en cuanto a ubicación, estilos e iconos, y otras indicaciones importantes sobre las barras de la aplicación de comandos y las barras de la aplicación de navegación. En el ejemplo hemos implementado un botón Inicio en la barra de la aplicación superior para ayudar con la navegación.
	Directrices y lista de comprobación para agregar menús contextuales Usa menús contextuales para el acceso inmediato a acciones, como Cortar y Pegar. Los menús contextuales deben ser breves y pertinentes para la selección.
	Directrices y listas de comprobación para búsqueda Inicio rápido: agregar búsqueda a una aplicación Obtén información sobre cuándo usar el control del cuadro de búsqueda desde la aplicación y cuándo usar el contrato de Buscar.
	Directrices para uso compartido de contenido Inicio rápido: compartir contenido Tu aplicación es un recurso compartido si tiene contenido que compartir, mientras que si recibe contenido de otras aplicaciones, será un destino de recurso compartido.
	Directrices para la configuración de una aplicación Inicio rápido: adición de la configuración de una aplicación Usa el acceso a Configuración de manera inteligente. Haz que tu configuración sea breve y sencilla. Conoce la configuración adecuada para el panel Configuración.
	Directrices para ayuda de la aplicación Directrices para UI informativa Inicio rápido: agregar ayuda de la aplicación Obtén información sobre cuándo y cómo implementar la Ayuda de la aplicación en el panel Configuración y sobre cuándo usar otros medios para ofrecer ayuda, como sugerencias, demostraciones o una interfaz de usuario rediseñada.

 

Paso 5: últimas acciones

	Ejecuta el Kit para la certificación de aplicaciones en Windows. Se recomienda. Si ejecutas el Kit para la certificación, te asegurarás de que la aplicación cumpla los requisitos de la Tienda Windows. Por tanto, deberías hacerlo cada vez que agregues funciones importantes a la aplicación.
	¡Has terminado! Ahora que ya has tenido en cuenta las directrices sobre la experiencia del usuario y has diseñado la interfaz de usuario, la aplicación debería reflejar los procedimientos recomendados para proporcionar una experiencia excelente a los usuarios.

 

Pasos siguientes

Ahora que ya comprendes los conceptos básicos, consulta otros ejemplos de la serie Características de aplicaciones, de principio a fin.

¿Quieres más información?

Índice de las directrices de la experiencia del usuario

Examina la lista completa de directrices de la experiencia de usuario.

Interacción del usuario: entrada táctil... y mucho más

Sigue de principio a fin los procedimientos para diseñar la experiencia de interacción del usuario para tu aplicación.

Crear la primera aplicación de la Tienda Windows

Sigue esta serie de tutoriales si es la primera vez que desarrollas una aplicación de la Tienda Windows y quieres ponerte manos a la obra.