Compartir a través de


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.

Página principal de la aplicación StumbleUpon

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.

Muestra de galería de diseños y controles

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.

icono de inicio

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.

icono de paso

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.

icono de paso

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.

icono de paso

Inicio rápido: Agregar controles HTML y controlar eventos

Usa controles HTML, como botones, casillas y listas desplegables.

icono de paso

Inicio rápido: Mostrar texto

Usa controles HTML como etiquetas, elementos div, marcas de párrafo y áreas de texto para mostrar texto.

icono de paso

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.

icono de paso

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

icono de paso

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.

icono de paso

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.

icono de paso

Inicio rápido: Definir diseños de aplicaciones

Crea una interfaz de usuario fluida que se vea y funcione bien en cualquier tamaño.

icono de paso

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.

icono de paso

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

icono de paso

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.

icono de paso

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.

icono de paso

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.

icono de paso

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.

icono de paso

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.

icono de paso

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.

icono de paso

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

icono de requisitos de la tienda

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.

icono de stop

¡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.