Conceptos básicos de diseño de contenido para aplicaciones de Windows

  • Artículo

En este artículo se proporcionan algunas sugerencias y ejemplos prácticos que le ayudarán a diseñar el contenido de la aplicación: la lógica de espaciado de Windows; el uso de la rampa de tipos para mostrar jerarquías, listas y cuadrículas; y cómo agrupar controles.

Espaciado y encuadernación

El uso de espaciado de tamaño coherente y encuadernación agrupa de forma semántica una experiencia en componentes independientes. Estos valores se asignan a nuestra lógica de esquina redondeada y ayudan a crear un diseño cohesivo y utilizable.

Two buttons separated by 8 pixels.

8epx entre botones

A button and a flyout separated by 8 pixels.

8epx entre botones y controles flotantes

A control and a header separated by 8 pixels.

8epx entre el control y el encabezado

A Control and a label separated by 12 pixels

12epx entre el control y la etiqueta

Two content areas separated by 12 pixels.

12epx entre áreas de contenido

A surface containing text with 12 pixel gutters on both sides.

16epx entre la superficie y el texto perimetral

Texto y jerarquía

Nuestra rampa de tipos (vínculo) está diseñada para proporcionar una matriz de tamaños que pueden ayudar a comunicar la jerarquía dentro de una aplicación.

An example of text using title, subtitle, and body styles when there is adequate space.

Usar título, subtítulo y cuerpo con espaciado de 12epx.

An example of using Body Strong instead of Title in a confined space.

Al diferenciar un título en un espacio de interfaz de usuario confinado, use Body Strong para el título sin ningún espaciado adicional entre bloques de texto.

An example of using the Caption style in a confined space.

Use subtítulo tamaño para espacios muy confinados en los que se necesite texto, como botones de comando.

Listas y cuadrículas

Hay una variedad de estilos de lista y cuadrícula que se pueden crear. A continuación se muestran una variedad de composiciones usadas en Windows.

An example list with multi-element list items.

Para las listas de varias líneas, use Body y Caption desde la rampa de tipos y los iconos de 32epx.

Use Body Strong para los encabezados de sección.

An example of horizontal lists.

Al usar iconos o elementos de imagen de persona para elementos de cuadrícula, use texto de título alineado con el centro.

An example list containing large list items.

Use el estilo Body para el texto principal y la alineación izquierda con la imagen si la lista contiene elementos gráficos grandes con texto.

Uso de los controles

Algunos ejemplos de cómo los controles se pueden relacionar entre sí en configuraciones comunes.

An example of an expander with child controls.

Ejemplos que muestran cómo usar un control de expansión (vínculo) con estilos de lista y controles comunes. Los controles deben estar alineados a la derecha con 16epx entre el control y el botón de expansión.

An example how controls inside an expander are aligned.

En este ejemplo se muestra la alineación de los controles cuando se coloca dentro del expansor. Sangría de los controles 48epx.