Guía de diseño de la interacción de widgets

En este artículo se proporcionan instrucciones detalladas para diseñar la interacción con widgets de Windows.

Un widget debe ser accesible y centrado, y debe representar un único aspecto del propósito principal de la aplicación. Los widgets pueden proporcionar una o varias llamadas a la acción. Cuando el usuario hace clic en una llamada a la acción, el widget debe iniciar la aplicación asociada o el sitio web en lugar de implementar la acción en el propio widget. Un widget solo tiene una página principal que puede alojar varias interacciones. Al hacer clic en un elemento del widget nunca debería llevarte a una vista completamente diferente del widget. Por ejemplo, en un widget meteorológico podría mostrar el tiempo durante varios días, pero hacer clic en uno de los días no expandirá los detalles en línea, sino que iniciará la aplicación o la web.

A continuación se muestra el número máximo de puntos táctiles recomendados para cada tamaño de widget admitido.

Tamaño del widget Número máximo de puntos táctiles
pequeño 1
medio 3
grande 4

Los siguientes elementos de navegación no se admiten en widgets de Windows:

  • Los pivotes no serán compatibles con los widgets.
  • Las páginas L2 no se admitirán en widgets
  • No se admitirá el desplazamiento vertical u horizontal en widgets.

Contenedores

En las imágenes siguientes se muestran los usos de los elementos de contenedor en una plantilla de widget. Los contenedores agrupan elementos visuales en columnas y filas para crear una estructura jerárquica de cuadrícula.

Cuatro imágenes de widgets que ilustran los contenedores. Los widgets de las imágenes tienen elementos divididos en filas y columnas para proporcionar una estructura jerárquica de cuadrícula.

En las imágenes siguientes se muestran los usos de los elementos de vínculo de imagen en una plantilla de widget.

Dos imágenes de widgets que ilustran vínculos de imagen. Las imágenes se organizan en columnas y filas que hacen una cuadrícula.

Paginación

Las imágenes siguientes muestran ejemplos de paginación en una plantilla de widget. Los controles de paginación se pueden alinear horizontal o verticalmente. Las flechas de navegación aparecen al pasar el cursor por encima.

Este conjunto de dos imágenes muestran la paginación horizontal. En la primera imagen, se alinea una columna de puntos a lo largo del lado derecho. Un punto es mayor para indicar la página activa actualmente. En la segunda imagen, un cursor hace clic sobre una flecha que apunta hacia abajo en la parte inferior del widget que permite al usuario pasar a la página siguiente. Hay una flecha que apunta hacia arriba en la parte superior del widget para navegar a la página anterior.

Este conjunto de dos imágenes muestran la paginación vertical. En la primera imagen, se alinea una fila de puntos a lo largo de la parte inferior. Un punto es mayor para indicar la página activa actualmente. En la segunda imagen, un cursor hace clic sobre una flecha que apunta a la derecha en el lado derecho del widget que permite al usuario pasar a la página siguiente. Hay una flecha que apunta a la izquierda coincidente en el lado izquierdo del widget para navegar a la página anterior.

Estas dos imágenes muestran cómo se ven los controles de paginación cuando el widget tiene un fondo de imagen.

Las imágenes siguientes muestran un ejemplo de hipervínculos en una plantilla de widget.

Dos imágenes de widgets que ilustran hipervínculos. La primera imagen muestra una cadena de texto con hipervínculo. El texto es sin formato. En la segunda imagen, un cursor del mouse mantiene el puntero sobre el hipervínculo, lo que hace que el texto esté subrayado.

Imagen que muestra un hipervínculo centrado en la parte inferior del widget, justo encima de la fila horizontal de puntos de paginación. Una X roja indica que los puntos de paginación y el hipervínculo no deben estar en el mismo espacio. A la derecha, otra imagen muestra el hipervínculo en la parte inferior, pero los puntos de paginación se alinean verticalmente en una columna del lado derecho. Una comprobación verde indica que esta ubicación de los dos elementos es correcta.

Dos imágenes de widgets que ilustran los menús desplegables. En la imagen izquierda, el menú desplegable está contraído. En la imagen derecha, la lista desplegable se expande y se extiende a través del borde del widget.

Los widgets pueden extenderse ligeramente más allá de su tamaño de widget temporalmente si el usuario interactúa con un menú o una lista desplegable. El comportamiento del menú debe consistir en que este se oculte y se cierre si el usuario hace clic fuera del área del menú o del menú desplegable.

  • Last updated on