Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
En este artículo se proporcionan algunas sugerencias y ejemplos prácticos para ayudarle a diseñar el contenido de la aplicación: lógica de espaciado de Windows, usando la rampa de tipos para mostrar jerarquía, listas y cuadrículas, y cómo agrupar controles.
Espaciado y canalones
El uso de espaciado de tamaño coherente y canalones agrupa de forma semántica una experiencia en componentes independientes. Estos valores corresponden a nuestra lógica de esquina redondeada y, juntos, ayudan a crear un diseño cohesivo y funcional.
8epx entre botones
8epx entre botones y desplegables
8epx entre el control y el encabezado
12epx entre el control y la etiqueta
12epx entre áreas de contenido
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.
Usar título, subtítulo y cuerpo con espaciado de 12epx.
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.
Use el tamaño del título para espacios muy limitados 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.
Para las listas de varias líneas, use los estilos Body y Caption de la escala tipográfica y los iconos de 32epx.
Use Body Strong para los encabezados de sección.
Al usar iconos o elementos de imagen de persona para elementos de cuadrícula, use texto de título alineado con el centro.
Utiliza el estilo de cuerpo para el texto principal y alinea a la izquierda con la imagen si tu lista contiene elementos gráficos grandes con texto.
Uso de controles
Algunos ejemplos de cómo los controles se pueden relacionar entre sí en configuraciones comunes.
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.
En este ejemplo se muestra la alineación de los controles cuando se coloca dentro del expansador. Indentar los controles 48epx.
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
