Compartir a través de

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.

Dos botones separados por 8 píxeles.

8epx entre botones

Un botón y un control flotante separados por 8 píxeles.

8epx entre botones y controles flotantes

Un control y un encabezado separados por 8 píxeles.

8epx entre el control y el encabezado

Un control y una etiqueta separadas por 12 píxeles

12epx entre el control y la etiqueta

Dos áreas de contenido separadas por 12 píxeles.

12epx entre áreas de contenido

Superficie que contiene texto con 12 canalizaciones de píxeles en ambos lados.

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.

Un ejemplo de texto que usa estilos de título, subtítulo y cuerpo cuando hay suficiente espacio.

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

Ejemplo de uso de Body Strong en lugar de Title en un espacio confinado.

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.

Ejemplo de uso del estilo caption en un espacio confinado.

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.

Una lista de ejemplo con elementos de lista de varios elementos.

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.

Ejemplo de listas horizontales.

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

Una lista de ejemplo que contiene elementos de lista grandes.

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.

Ejemplo de un expansador con controles secundarios.

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.

Un ejemplo de cómo se alinean los controles dentro de un expansador.

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