Layout

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones se siguen aplicando en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

El diseño es el tamaño, el espaciado y la ubicación del contenido dentro de una ventana o página. El diseño efectivo es fundamental para ayudar a los usuarios a encontrar lo que buscan rápidamente, así como para que la apariencia sea visualmente atractiva. El diseño efectivo puede marcar la diferencia entre los diseños que los usuarios entienden inmediatamente y los que dejan a los usuarios desconcertados y sobrecargados.

Nota: Las directrices relacionadas con la administración de ventanas se presentan en un artículo independiente. El tamaño y el espaciado de control específicos recomendados se presentan en sus respectivos artículos de instrucciones.

Conceptos de diseño

Jerarquía visual

Una ventana o página tiene una jerarquía visual clara cuando su apariencia indica la relación y la prioridad de sus elementos. Sin una jerarquía visual, los usuarios tendrían que averiguar estas relaciones y prioridades por sí mismos.

La jerarquía visual se logra combinando con habilidad los siguientes atributos:

  • centro de atención. El diseño indica dónde deben buscar primero los usuarios.
  • Flow. El ojo fluye sin problemas y de forma natural mediante una ruta de acceso clara a través de la superficie, buscando elementos de la interfaz de usuario (UI) en el orden adecuado para su uso.
  • Agrupación. Los elementos de interfaz de usuario relacionados lógicamente tienen una relación visual clara. Los elementos relacionados se agrupan juntos; los elementos no relacionados son independientes.
  • Énfasis. Los elementos de la interfaz de usuario se resaltan en función de su importancia relativa.
  • Alineación. Los elementos de la interfaz de usuario tienen una ubicación coordinada, por lo que son fáciles de examinar y aparecen de forma ordenada.

Además, el diseño efectivo tiene estos atributos:

  • Independencia del dispositivo. El diseño aparece según lo previsto, independientemente del tipo de letra o el tamaño de fuente, los puntos por pulgada (ppp), la pantalla o el adaptador gráfico.
  • Fácil de examinar. Los usuarios pueden encontrar el contenido que buscan de un vistazo.
  • Eficiencia. Los elementos de la interfaz de usuario que son grandes deben ser grandes y los que son pequeños funcionan bien pequeños.
  • Capacidad de tamaño. Si resulta útil, se puede hacer un tamaño de ventana y su diseño de contenido es eficaz, independientemente de lo grande o pequeña que sea la superficie.
  • equilibrar. El contenido aparece distribuido uniformemente en la superficie.
  • Simplicidad visual. La percepción de que un diseño no es más complicado de lo que debe ser. Los usuarios no se ven abrumados por la apariencia del diseño.
  • Coherencia. Las ventanas o páginas similares usan un diseño similar, por lo que los usuarios siempre se sienten orientados.

Aunque el tamaño, el espaciado y la selección de ubicación son conceptos sencillos, el desafío del diseño es lograr la combinación adecuada de estos atributos.

En Windows, el diseño se comunica mediante métricas independientes del dispositivo, como unidades de diálogo (D DLL) y píxeles relativos.

Un modelo de diseño para lectura

Los usuarios eligen lo que leen por la apariencia y la organización del contenido. Para crear un diseño eficaz, deberá comprender qué tienden a leer los usuarios y por qué.

Puede tomar decisiones de diseño mediante este modelo de diseño para leer:

  • Las personas leen en un orden de izquierda a derecha, de arriba a abajo (en las culturas occidental).

  • Hay dos modos de lectura: lectura inmersiva y examen. El objetivo de la lectura inmersiva es la comprensión.

    figura de flecha roja en el patrón de lectura de arrowzag

    Este diagrama modela la lectura inmersiva.

    Por el contrario, el objetivo del examen es buscar cosas. La ruta de acceso de examen general tiene el siguiente aspecto:

    figura de flecha roja en el patrón de lectura diagonal

    Este diagrama modela el examen.

    figura de flecha roja en un patrón de flecha hacia abajo y arco

    Si hay texto en ejecución a lo largo del borde izquierdo de una página, los usuarios examinarán primero el borde izquierdo.

  • Cuando se usa software, los usuarios no están inmersos en la propia interfaz de usuario, sino en su trabajo. Por lo tanto, los usuarios normalmente no leen el texto de la interfaz de usuario que lo analizan. A continuación, leen los bits de texto de forma completa solo cuando creen que lo necesitan.

  • Los usuarios tienden a omitir los paneles de navegación a la izquierda o derecha de una página. Los usuarios reconocen que están ahí, pero miran los paneles de navegación solo cuando desean navegar.

  • Los usuarios tienden a omitir grandes bloques de texto sin formato sin leerlos en absoluto.

    figura de texto con flechas que muestran el texto de examen

    Los usuarios tienden a omitir grandes bloques de texto y paneles de navegación al examinar.

  • Todas las cosas son iguales, los usuarios buscan primero en la esquina superior izquierda de una ventana, analizan la página y finalizan su examen en la esquina inferior derecha. Tienden a omitir la esquina inferior izquierda.

    figura de la página y flecha de arriba izquierda a derecha

    Todos los elementos son iguales, los usuarios leerán estos números en el orden siguiente: 1, 2, 4 y 3.

  • Pero en la interfaz de usuario interactiva, no todas las cosas son iguales, por lo que los distintos elementos de la interfaz de usuario reciben distintos niveles de atención. Los usuarios tienden a mirar los controles interactivos, especialmente los controles de la parte superior izquierda y central de la ventana, y el texto destacado en primer lugar.

figura de pantalla con texto nítido y desenfocado

Los usuarios se centran en los controles interactivos principales y en la instrucción principal destacada, y miran otras cosas solo cuando es necesario.

  • Los usuarios tienden a leer etiquetas de control interactivas, especialmente aquellas que parecen relevantes para completar la tarea en cuestión. Por el contrario, los usuarios tienden a leer texto estático solo cuando creen que lo necesitan.
  • Los elementos que parecen diferentes llaman la atención. El texto en negrita y el texto grande se destaca del texto normal. Los elementos de la interfaz de usuario con color o en un fondo coloreado destacan. Los elementos con iconos se destacan de los elementos sin iconos.
  • Los usuarios no se desplazan a menos que tengan una razón para hacerlo. Si el contenido sobre el plegado no proporciona una razón para desplazarse, no lo hace.
  • Una vez que los usuarios han decidido qué hacer, detienen inmediatamente el examen y lo hacen.
  • Dado que los usuarios dejan de examinar cuando creen que han terminado, tienden a ignorar cualquier cosa más allá de lo que parece ser el punto de finalización.

captura de pantalla de las opciones de teclado

Los usuarios dejan de examinar cuando creen que han terminado.

Por supuesto, habrá excepciones a este modelo general. Los dispositivos de seguimiento ocular indican que el comportamiento de los usuarios reales es bastante errático. El objetivo de este modelo es ayudarle a tomar buenas decisiones y acuerdos, no a modelar el comportamiento del usuario con precisión. Pero a medida que ha leído esta lista, esperamos que también haya reconocido muchos de sus propios patrones de lectura.

Diseño para el examen

Los usuarios no leen, se analizan, por lo que debe diseñar superficies de interfaz de usuario para el examen. No suponga que los usuarios leerán el texto tal como se escribe en un orden de izquierda a derecha, de arriba a abajo, sino que miran los elementos de la interfaz de usuario que llaman su atención.

Para diseñar para el examen:

  • Supongamos que los usuarios empiezan por examinar rápidamente toda la ventana y, a continuación, leen los elementos de la interfaz de usuario en aproximadamente el orden siguiente:
    • Controles interactivos en el centro
    • Botones de confirmación
    • Controles interactivos encontrados en otro lugar
    • Instrucción principal
    • Explicaciones complementarias
    • Texto presentado con un icono de advertencia
    • Título de la ventana
    • Otro texto estático en el cuerpo principal
    • Notas al pie
  • Coloque los elementos de la interfaz de usuario que inician una tarea en la esquina superior izquierda o en el centro superior.
  • Coloque los elementos de la interfaz de usuario que completan una tarea en la esquina inferior derecha.
  • Siempre que sea posible, coloque texto fundamental en controles interactivos en lugar de texto estático.
  • Evite colocar información fundamental en la esquina inferior izquierda o en la parte inferior de una página o control desplazable largo.
  • No presente grandes bloques de texto. Elimine el texto innecesario. Use el estilo de presentación de la pirámide invertido.
  • Si hace algo para atraer la atención de los usuarios, asegúrese de que la atención está garantizada.

Siempre que sea posible, trabaje con este modelo en lugar de hacerlo; pero habrá ocasiones en las que tenga que resaltar o desacente determinados elementos de la interfaz de usuario.

Para resaltar los elementos principales de la interfaz de usuario:

  • Coloque los elementos principales de la interfaz de usuario en la ruta de acceso de examen.

  • Coloque cualquier interfaz de usuario para iniciar una tarea en la esquina superior izquierda o en la parte superior central.

  • Coloque los botones de confirmación en la esquina inferior derecha.

  • Coloque la interfaz de usuario principal restante en el centro.

  • Use controles que atraigan la atención, como botones de comando, vínculos de comandos e iconos.

  • Use texto destacado, incluido texto grande y texto en negrita.

  • Coloque texto que los usuarios deben leer en controles interactivos, con iconos o en banners.

  • Use texto oscuro en un fondo claro.

  • Rodear los elementos con un espacio amplio.

  • No requiera ninguna interacción, como apuntar o mantener el puntero, para ver el elemento que está resaltando.

    captura de pantalla de las opciones de activación de Windows

    En este ejemplo se muestran muchas maneras de resaltar los elementos principales de la interfaz de usuario.

Para desmarcar los elementos secundarios de la interfaz de usuario:

  • Coloque los elementos secundarios de la interfaz de usuario fuera de la ruta de acceso del examen.

  • Coloque cualquier cosa que los usuarios no necesiten ver en la esquina inferior izquierda o en la parte inferior de la ventana.

  • Use controles que no llaman la atención, como vínculos de tareas en lugar de botones de comando.

  • Use texto normal o gris.

  • Use texto claro en un fondo oscuro. El texto blanco en un fondo gris o azul oscuro funciona bien.

  • Rodear los elementos con espacio mínimo.

  • Considere la posibilidad de usar la divulgación progresiva para ocultar elementos secundarios de la interfaz de usuario.

    captura de pantalla de elementos de interfaz grandes y pequeños

    En este ejemplo se muestran muchas maneras de desacentr los elementos secundarios de la interfaz de usuario.

Uso eficaz del espacio de pantalla

El uso eficaz del espacio de pantalla requiere que equilibres varios factores: usar demasiado espacio y que una ventana parezca pesada y desperdiciada, e incluso difícil de usar en función de la ley de Fitts.

Incorrecto:

captura de pantalla que muestra demasiado espacio en blanco

En este ejemplo, la ventana es demasiado grande para su contenido.

Por otro lado, use demasiado poco espacio y una ventana se sienta cómoda, desconsocedida y manipulada, y difícil de usar si requiere desplazamiento y otra manipulación para su uso.

Incorrecto:

captura de pantalla con demasiados controles

En este ejemplo, la ventana es demasiado pequeña para su contenido.

Aunque la interfaz de usuario crítica debe ajustarse a la resolución efectiva mínima admitida,no suponga que el uso eficaz del espacio de pantalla significa que las ventanas deben ser lo más pequeñas posible. El diseño efectivo respeta el espacio abierto y no intenta convertir todo en el espacio más pequeño posible. Las pantallas modernas tienen un espacio de pantalla significativo y tiene sentido usar este espacio de forma eficaz cuando sea posible. Por lo tanto, err en el lado del uso de demasiado espacio de pantalla en lugar de demasiado poco. Esto hace que las ventanas se sientan más ligeras y más fáciles de abordar.

Sabe que un diseño usa el espacio de pantalla de forma eficaz cuando:

  • Windows, los paneles de ventana y los controles no tienen que cambiar de tamaño para que se puedan usar. Si lo primero que hacen los usuarios es cambiar el tamaño de una ventana, panel o control, su tamaño es incorrecto.
  • Los datos no se truncan. La mayoría de los datos de las vistas de lista y las vistas de árbol no tienen puntos suspensivos y los datos de otros controles no se recortan a menos que la longitud de los datos sea inusualmente grande. Los datos que se deben leer para realizar una tarea no deben truncarse.
  • Las ventanas y los controles tienen el tamaño adecuado para eliminar el desplazamiento innecesario. Hay pocas barras de desplazamiento horizontales y ninguna barra de desplazamiento vertical innecesaria.
  • Los controles usan principalmente sus tamaños estándar. Esfuérzse por reducir el número de tamaños de control, por ejemplo, usando solo uno o dos anchos de botón de comando en una superficie.
  • La superficie de la interfaz de usuario está equilibrada. No hay áreas de pantalla grandes sin usar.

Elija tamaños de ventana que sean lo suficientemente grandes como para satisfacer bien su propósito. (Y si la ventana se puede cambiar de tamaño, este objetivo se aplica a su tamaño predeterminado). Una combinación de datos truncados o barras de desplazamiento y una gran cantidad de espacio disponible en la pantalla es una señal clara de diseño ineficaz.

Control del tamaño

Normalmente, el primer paso para usar el espacio de pantalla de forma eficaz es determinar el tamaño adecuado para los distintos elementos de la interfaz de usuario. Consulte la tabla Control de tamaño, así como el tamaño recomendado en los artículos de instrucciones de control específicos.

La ley de Fitts indica que cuanto menor sea un destino, más tiempo se tarda en adquirirlo con el mouse. Además, en el caso de los equipos que usan Tecnología táctil y Tablet PC de Windows, el "mouse" podría ser realmente un lápiz o el dedo del usuario, por lo que debe tener en cuenta dispositivos de entrada alternativos al determinar los tamaños de los controles pequeños. Un tamaño de control de 16 x 16 píxeles relativos es un buen tamaño mínimo para cualquier dispositivo de entrada. Por el contrario, los botones estándar de control de número de píxeles relativos de 15 x 9 son demasiado pequeños para que los lápices los usen de forma eficaz.

Espaciado

Proporcionar un espacio amplio (pero no excesivo) hace que el diseño se sienta más cómodo y fácil de analizar. El espacio efectivo no es un espacio sin usar, desempeña un papel importante en la mejora de la capacidad de examen de los usuarios y también agrega al atractivo visual del diseño. Para obtener instrucciones, consulte la tabla Espaciado.

En el caso de Tecnología táctil y Tablet PC de Windows, de nuevo el "mouse" podría ser realmente un lápiz o el dedo del usuario. La orientación es más difícil cuando se usa un lápiz o un dedo como dispositivo que apunta, lo que da lugar a que los usuarios toque fuera del destino previsto. Cuando los controles interactivos se colocan muy cerca, pero no se tocan realmente, los usuarios pueden hacer clic en el espacio inactivo entre los controles. Dado que hacer clic en el espacio inactivo no tiene ningún resultado o comentarios visuales, los usuarios a menudo no saben lo que salió mal. Si los controles pequeños están demasiado espaciados, el usuario debe pulsar con precisión para evitar pulsar el objeto incorrecto. Para solucionar estos problemas, las regiones de destino de los controles interactivos deben tocar o tener al menos 3 D DLL (5 píxeles relativos) de espacio entre ellas.

Sabe que un diseño tiene un espaciado correcto cuando:

  • En general, la superficie de la interfaz de usuario se siente cómoda y no se siente cómodo.
  • El espacio parece uniforme y equilibrado.
  • Los elementos relacionados están cerca y los elementos no relacionados están relativamente separados.
  • No hay ningún espacio entre los controles que están diseñados para estar juntos, como los botones de la barra de herramientas.

Ventanas de tamaño ajustable

Las ventanas de tamaño ajustable también son un factor para usar el espacio de pantalla de forma eficaz. Algunas ventanas constan de contenido fijo y no se benefician de ser de tamaño ajustable, pero las ventanas con contenido de tamaño ajustable deben ser de tamaño ajustable. Por supuesto, el motivo por el que los usuarios cambian el tamaño de una ventana es avanzar en el espacio de pantalla adicional, por lo que el contenido debe expandirse en consecuencia al proporcionar más espacio a los elementos de la interfaz de usuario que lo necesitan. Windows con contenido dinámico, documentos, imágenes, listas y árboles se benefician al máximo de las ventanas de tamaño ajustable.

captura de pantalla del control de cambio de tamaño al obtener la barra de desplazamiento

En este ejemplo, al cambiar el tamaño de la ventana se cambia el tamaño del control de vista de lista.

Dicho esto, las ventanas se pueden extender demasiado anchas. Por ejemplo, muchas páginas del panel de control se vuelven difíciles de manejar cuando el contenido es más ancho que 600 píxeles relativos. En este caso, es mejor no cambiar el tamaño del área de contenido más allá de este ancho máximo o cambiar el origen del contenido a medida que la ventana cambia de tamaño. En su lugar, mantenga un ancho máximo y un origen fijo superior izquierdo.

El texto se vuelve difícil de leer a medida que aumenta la longitud de la línea. En el caso de los documentos de texto, considere la posibilidad de una longitud de línea máxima de 80 caracteres para facilitar la lectura del texto. (Los caracteres incluyen letras, signos de puntuación y espacios).

Incorrecto:

captura de pantalla del cuadro de mensaje ancho con texto largo

En este ejemplo, la longitud larga del texto dificulta la lectura.

Por último, las ventanas que se pueden cambiar de tamaño también deben usar el espacio de pantalla de forma eficaz cuando se reducen, ya que reducen el tamaño del contenido y quitan espacio de los elementos de la interfaz de usuario que pueden funcionar de forma eficaz sin él. En algún momento, la ventana o sus elementos de interfaz de usuario se vuelven demasiado pequeños para poderse usar, por lo que se les debe asignar un tamaño mínimo o algunos elementos deben quitarse por completo.

captura de pantalla de la ventana con cinta de opciones alta e intrusiva

captura de pantalla de la ventana sin cinta de opciones

En este ejemplo, el panel tiene un tamaño mínimo.

Algunos programas se benefician del uso de una presentación completamente diferente para que el contenido se puede usar en tamaños más pequeños.

captura de pantalla de los botones del reproductor multimedia centrado

En este ejemplo, Reproductor de Windows Media cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.

Foco

Un diseño tiene el foco cuando hay un lugar obvio donde buscar primero. El foco es importante para mostrar a los usuarios dónde empezar a examinar la ventana o página. Sin el foco claro, el ojo del usuario se desenfocan sin objetivo. El punto focal debe ser algo importante que los usuarios necesitan encontrar y comprender rápidamente, y deben tener el mayor énfasis visual. La esquina superior izquierda es el punto focal natural para la mayoría de las ventanas.

Solo debe haber un punto focal. Al igual que en la vida real, el ojo puede centrarse solo en una cosa a la vez, los usuarios no pueden centrarse en varios lugares simultáneamente.

Para convertir un elemento de la interfaz de usuario en el punto focal, puede darle énfasis visual:

  • Colocarlo en la parte superior izquierda o superior central de la superficie.
  • Uso de controles interactivos que son importantes y fáciles de comprender.
  • Usar texto destacado, como una instrucción principal.
  • Dar a los controles la selección predeterminada y el foco de entrada inicial.
  • Colocación de los controles en un fondo de color diferente.

Considere la Windows Search. El punto focal para Windows search debe ser el cuadro de búsqueda porque es el punto inicial de la tarea. Sin embargo, se encuentra en la esquina superior derecha para ser coherente con la ubicación estándar del cuadro de búsqueda. El cuadro de búsqueda tiene el foco de entrada, pero dada su ubicación en la ruta de acceso del examen, esa pista por sí sola no es suficiente.

Para solucionar este problema, hay instrucciones destacadas en la parte superior central de la ventana para dirigir a los usuarios a la ubicación correcta.

Aceptable:

captura de pantalla del cuadro de diálogo de búsqueda con texto útil

En este ejemplo, una instrucción destacada en la parte superior central de la ventana dirige a los usuarios al cuadro De búsqueda.

Sin las instrucciones, la ventana no tendría un punto focal obvio.

Incorrecto:

captura de pantalla del cuadro de diálogo de búsqueda sin texto

Este ejemplo no tiene ningún punto focal obvio. Los usuarios no saben dónde buscar.

Si da énfasis visual a un elemento de la interfaz de usuario, asegúrese de que la atención está garantizada. En el ejemplo Windows search incorrecto anterior, el botón Todo resaltado está en la esquina superior izquierda y tiene el énfasis más visual, pero no es el punto focal previsto. Los usuarios pueden quedarse atascados viendo este botón intentando averiguar qué hacer con él.

Incorrecto:

captura de pantalla del botón todo resaltado

Sin la instrucción destacada como punto focal, el botón Todo resaltado es un punto focal involuntario.

Flujo

Un diseño tiene flujo cuando los usuarios se guían sin problemas y de forma natural por una ruta de acceso clara a través de su superficie, buscando elementos de interfaz de usuario en el orden adecuado para su uso. Una vez que los usuarios identifican el punto focal, deben determinar cómo completar la tarea. La colocación de los elementos de la interfaz de usuario transmite su relación y debe reflejar los pasos para realizar la tarea. Normalmente, esto significa que los pasos de la tarea deben fluir de forma natural en orden de izquierda a derecha, de arriba a abajo (en las culturas occidental).

Sabe que un diseño tiene un buen flujo cuando:

  • La colocación de los elementos de la interfaz de usuario refleja los pasos que los usuarios necesitan para realizar la tarea.
  • Los elementos de la interfaz de usuario que inician una tarea se encuentran en la esquina superior izquierda o en el centro superior.
  • Los elementos de la interfaz de usuario que completan una tarea se encuentran en la esquina inferior derecha.
  • Los elementos de interfaz de usuario relacionados están juntos; los elementos no relacionados son independientes.
  • Los pasos necesarios están en el flujo principal.
  • Los pasos opcionales están fuera del flujo principal, posiblemente desacentrados mediante un fondo adecuado o una divulgación progresiva.
  • Los elementos usados con frecuencia aparecen antes que los elementos usados con poca frecuencia en la ruta de acceso del examen.
  • Los usuarios siempre saben qué hacer a continuación. No hay saltos o saltos inesperados en el flujo de tareas.

Incorrecto:

captura de pantalla del diseño confuso del cuadro de diálogo

En este ejemplo, los usuarios no saben qué hacer a continuación. Hay saltos e interrupciones inesperados en el flujo de tareas.

Correcto:

captura de pantalla de un cuadro de diálogo bien planeado

En este ejemplo, la presentación de los elementos de la interfaz de usuario refleja los pasos para realizar la tarea.

Agrupación

Un diseño tiene agrupación cuando los elementos de la interfaz de usuario relacionados lógicamente tienen una relación visual clara. Los grupos son importantes porque es más fácil para los usuarios comprender y centrarse en un grupo de elementos relacionados que en los elementos individualmente. Los grupos hacen que un diseño parezca más sencillo y fácil de analizar.

Puede mostrar la agrupación de las maneras siguientes (en una mayor cantidad de peso):

  • Diseño. Puede agrupar controles relacionados entre sí y colocar espaciado adicional entre controles no relacionados.

    ilustración de cuatro iconos que muestran cuatro grupos de tareas

    En este ejemplo, solo el diseño se usa para mostrar las relaciones de control.

  • Separadores. Un separador es una línea horizontal o vertical que unifica un grupo de controles. Los separadores proporcionan un aspecto más sencillo y limpio. Sin embargo, a diferencia de los cuadros de grupo, funcionan mejor cuando abarcan toda la superficie.

    captura de pantalla de tres iconos y tres separadores

    En este ejemplo, se usan separadores etiquetados para mostrar relaciones de control.

  • Agregadores. Un agregador es un gráfico que crea una relación visual entre controles fuertemente relacionados.

    captura de pantalla de los controles dentro de una línea elíptica

    En este ejemplo, se usa un agregador de límites para resaltar la relación entre los controles y hacer que se sientan como un control único en lugar de ocho.

  • Cuadros de grupo. Un cuadro de grupo es un marco rectangular etiquetado que rodea un conjunto de controles relacionados.

    captura de pantalla de casillas en un borde rectangular

    En este ejemplo, un cuadro de grupo rodea y etiqueta un conjunto de controles relacionados.

  • Fondos. Puede usar fondos para resaltar o desacentr los distintos tipos de contenido.

    captura de pantalla del lado izquierdo del panel de control

    En este ejemplo, el panel de tareas del panel de control se usa para agrupar las tareas relacionadas y los elementos del panel de control.

    Para evitar el desorden visual, la agrupación más ligera que realiza bien el trabajo es la mejor opción. Para obtener más información, vea Cuadros de grupo, Pestañas, Separadores y Fondos.

Independientemente del estilo de agrupación, puede usar la sangría para mostrar la relación de los controles dentro de un grupo. Los controles que están emparejados entre sí deben estar alineados a la izquierda y los controles dependientes tienen sangría de 12 D DLL o 18 píxeles relativos.

captura de pantalla de tres niveles de controles con sangría

Los controles dependientes tienen una sangría de 12 DLUS o 18 píxeles relativos, que por diseño es la distancia entre las casillas y los botones de radio de sus etiquetas.

Sabe que un diseño tiene una buena agrupación cuando:

  • La ventana o las páginas tienen como máximo 7 grupos.
  • El propósito de cada grupo es obvio.
  • La relación de los controles dentro de cada grupo es obvia, especialmente la dependencia de control.
  • La agrupación simplifica el contenido en lugar de hacerlo más complejo.

Alignment

La alineación es la ubicación coordinada de los elementos de la interfaz de usuario. La alineación es importante porque facilita el examen del contenido y afecta a la percepción de la complejidad visual de los usuarios.

Hay varios objetivos que se deben tener en cuenta al determinar la alineación:

  • Facilidad en el examen horizontal. Los usuarios pueden leer horizontalmente y buscar elementos relacionados unos junto a otros, sin espacios difíciles.
  • Facilidad en el examen vertical. Los usuarios pueden examinar columnas de elementos relacionados y encontrar inmediatamente lo que buscan, con un movimiento horizontal mínimo de los ojos.
  • Complejidad visual mínima. Los usuarios perciben que un diseño es visualmente complejo si tiene líneas de cuadrícula de alineación vertical innecesarias.

Alineación horizontal

Alineación izquierda

Debido al orden de lectura de izquierda a derecha, la alineación izquierda funciona bien para la mayoría del contenido. La alineación izquierda facilita el análisis vertical de los datos en columnas.

Alineación derecha

La alineación derecha es la mejor opción para los datos numéricos, especialmente las columnas de datos numéricos. La alineación derecha también funciona bien para los botones de confirmación, así como para los controles alineados con el borde derecho de la ventana.

captura de pantalla del botón de flecha abajo de búsqueda avanzada

En este ejemplo, el control de divulgación progresiva de búsqueda avanzada está alineado a la derecha porque se coloca en el borde de la ventana derecha.

Alineación del centro

La alineación del centro se reserva mejor para situaciones en las que la alineación izquierda o derecha no es adecuada o parece desequilibrada.

captura de pantalla de los controles del reproductor multimedia centrados

En este ejemplo, el control del reproductor multimedia se centra para proporcionar una apariencia equilibrada.

No centre el contenido de la ventana solo para rellenar el espacio.

Incorrecto:

captura de pantalla de una ventana con demasiado espacio en blanco

En este ejemplo, el contenido se centra incorrectamente en una ventana de tamaño ajustable para rellenar el espacio.

Alineación vertical

Elementos superiores

Debido al orden de lectura de arriba a abajo, la alineación superior funciona bien para la mayoría del contenido. La alineación superior facilita el examen horizontal de los elementos de la interfaz de usuario.

Líneas base de texto

Al alinear verticalmente los controles con texto, alinee las líneas base de texto para proporcionar un flujo de lectura horizontal suave.

Correcto:

captura de pantalla de texto de botón y etiqueta alineado

Incorrecto:

captura de pantalla de texto de botón y etiqueta no alineado

En el ejemplo correcto, el control y su etiqueta se alinean verticalmente por sus líneas base de texto.

Sabe que un diseño tiene una buena alineación cuando:

  • Es fácil examinar horizontal y verticalmente.
  • Tiene una apariencia visual sencilla.

Alineación de etiquetas

Las reglas generales de alineación se aplican a las etiquetas de control, pero es un problema común merecedor de atención específica. La alineación de etiquetas tiene estos objetivos:

  • Facilidad en el examen vertical para encontrar el control correcto.
  • Facilitar el examen horizontal para asociar etiquetas a sus controles.
  • Facilidad en la localización, control de etiquetas que difieren en longitud entre idiomas.
  • Funciona bien con una mezcla de diferentes longitudes de etiqueta.
  • Hace un uso eficaz del espacio disponible y evita el texto truncado.

El objetivo general es reducir la cantidad de movimiento de los ojos necesario para encontrar lo que los usuarios probablemente buscan, pero la naturaleza de los controles y lo que buscan los usuarios depende del contexto.

Hay cuatro estilos comunes de alineación y colocación de etiquetas, cada uno con sus ventajas:

  • Etiquetas justificadas a la izquierda sobre los controles
  • Etiquetas justificadas a la izquierda a la izquierda de los controles
  • Etiquetas justificadas a la izquierda a la izquierda de los controles, controles desiguales a la izquierda
  • Etiquetas justificadas a la derecha a la izquierda de los controles

Etiquetas justificadas a la izquierda sobre los controles

Este estilo es el más fácil de encontrar porque el diseño no depende de la longitud de las etiquetas, pero ocupa el mayor espacio vertical.

lista con dos columnas de etiquetas encima de los controles

Este estilo toma el mayor espacio vertical, pero es más fácil de encontrar. Es una mejor opción para etiquetar principalmente controles interactivos.

Se usa mejor cuando:

  • Los controles que se etiquetan son interactivos (no solo texto).
  • La interfaz de usuario se localizará. Este estilo a menudo ofrece espacio para duplicar o incluso triplicar la longitud de la etiqueta.
  • La interfaz de usuario usa una tecnología de diseño fijo (como Win32).
  • Hay diez o menos controles. Con más controles, las etiquetas son difíciles de examinar.
  • Hay suficiente espacio vertical para alojar las etiquetas.
  • El diseño debe ser de forma libre, no solo columnas.

Etiquetas justificadas a la izquierda a la izquierda de los controles

Este estilo es el más fácil de examinar verticalmente y también funciona bien cuando las etiquetas difieren en gran medida, pero es más difícil asociar la etiqueta a su control. Este estilo puede usar etiquetas de varias líneas si es necesario.

lista con cuatro columnas de etiquetas a la izquierda de los controles

Este estilo funciona bien. Sin embargo, hay dos columnas, pero visualmente parece que hay cuatro, lo que hace que los datos parezcan más complejos.

Se usa mejor cuando:

  • Es probable que los usuarios analicen verticalmente para buscar etiquetas específicas.
  • Es probable que los usuarios no lean las etiquetas y los controles de izquierda a derecha, de arriba a abajo.
  • Hay suficiente espacio horizontal para alojar las etiquetas.
  • Las etiquetas varían significativamente de longitud.
  • Hay muchos controles, como con formularios.
  • Hay pocas columnas. Visualmente, las etiquetas y los controles aparecen como dos columnas individuales.

Etiquetas justificadas a la izquierda a la izquierda de los controles, controles desiguales a la izquierda

Este estilo facilita el examen vertical de las etiquetas y las etiquetas y los controles horizontalmente, y es muy eficiente en el espacio. pero es más difícil examinar los controles verticalmente. Los controles se justifican a la derecha para aprovechar al máximo el espacio disponible.

lista de dos columnas de etiquetas con controles desiguales

Este estilo es compacto y fácil de leer, pero es difícil examinar los controles verticalmente.

Se usa mejor cuando:

  • La interfaz de usuario usa una tecnología de diseño variable (como Windows Presentation Foundation).
  • Es probable que los usuarios analicen verticalmente para buscar etiquetas específicas.
  • Es probable que los usuarios lean las etiquetas y los controles de izquierda a derecha, de arriba a abajo.
  • Es probable que los usuarios no analicen los controles verticalmente.
  • El texto del control varía en longitud y probablemente se truncaría si se usara otro estilo.
  • Los controles son de solo lectura, como cuadros de texto de solo lectura. Para otros controles, esta alineación tendrá un aspecto desalineado. Sin embargo, los controles pueden modificarse al hacer clic.
  • Hay muchas columnas, pero pocos controles en una columna.

Etiquetas justificadas a la derecha a la izquierda de los controles

Este estilo es el más fácil de leer horizontalmente para asociar las etiquetas a sus controles, pero es difícil examinar las etiquetas verticalmente y no funciona bien cuando labelsList con etiquetas con sangría y controles difieren en gran medida en longitud.

lista con controles y etiquetas con sangría

Este estilo permite un examen vertical sencillo de los controles, pero dificulta el examen vertical de las etiquetas.

Se usa mejor cuando:

  • Es probable que los usuarios lean las etiquetas y los controles de izquierda a derecha, de arriba a abajo.
  • Es probable que los usuarios no analicen verticalmente para buscar etiquetas específicas, posiblemente porque:
    • Hay pocos controles.
    • Las etiquetas son conocidas.
    • Los controles son principalmente explicativos y rara vez están en blanco (posiblemente tengan valores predeterminados para evitar controles en blanco).
  • Hay suficiente espacio horizontal para alojar las etiquetas.
  • Las etiquetas no varían significativamente de longitud.
  • Hay muchas columnas. Visualmente, las etiquetas y los controles aparecen como una sola columna.

Sin embargo, antes de adoptar cualquiera de estos estilos, tenga en cuenta dos factores más:

  • Prefiere un estilo que pueda usar de forma coherente en todo el programa.
  • Las etiquetas justificadas a la izquierda de los controles anteriores a la izquierda de los controles son los estilos más comunes, por lo que se les debe dar preferencia.

Saldo

Una ventana o página tiene un equilibrio cuando su contenido aparece distribuido uniformemente en su superficie. Si la superficie tuviera físicamente la misma ponderación que visualmente, un diseño equilibrado no se voltearía a un lado.

El problema de equilibrio más común es tener demasiado contenido en el lado izquierdo de una ventana o página. Puede crear el equilibrio de las maneras siguientes:

  • Usar márgenes más grandes en el lado izquierdo que en la derecha.
  • Colocación de elementos de la interfaz de usuario usados para completar una tarea a la derecha.
  • Colocación de elementos de interfaz de usuario usados en toda la tarea en el centro.
  • Longitud de controles de varias líneas o de tamaño variable.
  • Usar la alineación del centro estratégicamente.

captura de pantalla de la impresora a la izquierda y texto a la derecha

Este diseño de página del asistente equilibrado muestra un margen izquierdo mayor que el derecho para mejorar el equilibrio.

Si estas técnicas no logran el equilibrio, considere la posibilidad de reducir el ancho de la ventana o página para que coincida mejor con su contenido.

En el caso de las superficies que se pueden cambiar de tamaño, no centre el contenido solo para lograr el equilibrio. En su lugar, mantenga un origen superior izquierdo fijo, defina un área de superficie máxima y equilibra el contenido dentro del espacio utilizado.

Cuadrículas

Una cuadrícula es un sistema de alineación subyacente invisible. Las cuadrículas pueden ser simétricas, pero las cuadrículas asimétricas también funcionan. Cuando las usa una sola ventana o página, las cuadrículas ayudan a organizar el contenido dentro de una superficie. Cuando se reutilizan, las cuadrículas crean un diseño coherente entre superficies.

El número de líneas de cuadrícula afecta a la percepción de complejidad visual. Un diseño con menos líneas de cuadrícula parece más sencillo que un diseño con más líneas de cuadrícula.

Visualmente complejo:

captura de pantalla del cuadro de diálogo desordenado

Visualmente sencillo:

captura de pantalla del cuadro de diálogo organizado

Las líneas de cuadrícula innecesarias crean complejidad visual.

Sabe que un diseño usa cuadrículas de forma eficaz cuando:

  • Windows o páginas con contenido o función similares tienen un diseño similar.
  • Los elementos de diseño repetidos aparecen en ubicaciones similares en ventanas y páginas.
  • No hay líneas de cuadrícula de alineación verticales y horizontales innecesarias.

Simplicidad visual

La simplicidad visual es la percepción de que un diseño no es más complicado de lo que debe ser.

Sabe que un diseño tiene simplicidad visual cuando:

  • Elimina las capas innecesarias de chrome de ventana.
  • Presenta el contenido mediante como máximo siete grupos fácilmente identificables.
  • Usa agrupaciones ligeras, como diseño y separadores en lugar de cuadros de grupo.
  • Usa controles ligeros, como vínculos en lugar de botones de comando para comandos secundarios, y listas desplegables en lugar de listas para las opciones.
  • Reduce el número de líneas de cuadrícula de alineación vertical y horizontal.
  • Reduce el número de tamaños de control, por ejemplo, usando solo uno o dos anchos de botón de comando en una superficie.
  • Usa la divulgación progresiva para ocultar los elementos de la interfaz de usuario hasta que se necesiten.
  • Usa espacio suficiente para que la ventana o página no se sienta cómodo.
  • Tamaños adecuados de las ventanas y los controles para eliminar el desplazamiento innecesario.
  • Usa una sola fuente con un pequeño número de tamaños y colores de texto.

Como regla general, si un elemento de diseño se puede eliminar sin dañar la eficacia de la interfaz de usuario, probablemente debería serlo.

Directrices

Resolución de pantalla y ppp

  • Admite la resolución Windows una resolución efectiva de 800 x 600 píxeles. En el caso de las URI críticas que deben funcionar en modo seguro, admite una resolución efectiva de 640 x 480 píxeles. Asegúrese de tener en cuenta el espacio utilizado por la barra de tareas reservando 48 píxeles relativos verticales para las ventanas mostradas con la barra de tareas.
  • Optimice los diseños de ventana de tamaño ajustable para una resolución efectiva de 1024 x 768 píxeles. Cambie automáticamente el tamaño de estas ventanas para resoluciones de pantalla inferiores de forma que todavía sea funcional.
  • Asegúrese de probar las ventanas en modos de 96 puntos por pulgada (ppp) (a 800 x 600 píxeles), 120 ppp (a 1024 x 768 píxeles) y 144 ppp (a 1200 x 900 píxeles). Compruebe si hay problemas de diseño, como el recorte de controles, texto y ventanas, y la extensión de iconos y mapas de bits.
  • Para los programas con escenarios de uso táctil y móvil, optimice para 120 ppp. Actualmente, las pantallas de valores altos de ppp son frecuentes en equipos táctiles y móviles.

Tamaño de la ventana

  • Elija un tamaño de ventana predeterminado adecuado para su contenido. No tenga miedo de usar tamaños de ventana iniciales mayores si puede usar el espacio de forma eficaz.
  • Use una relación de aspecto de alto a ancho equilibrada. Se prefiere una relación de aspecto entre 3:5 y 5:3, aunque se puede usar una relación de aspecto de 1:3 para los cuadros de diálogo de mensaje (como errores y advertencias).
  • Use ventanas de tamaño ajustable siempre que sea práctico para evitar barras de desplazamiento y datos truncados. Windows con contenido dinámico, documentos, imágenes, listas y árboles se benefician al máximo de las ventanas de tamaño ajustable.
  • En el caso de los documentos de texto, considere una longitud de línea máxima de 80 caracteres para facilitar la lectura del texto. (Los caracteres incluyen letras, signos de puntuación y espacios).
  • Ventanas de tamaño fijo:
    • Las ventanas de tamaño fijo deben estar completamente visibles y ajustarse para ajustarse al área de trabajo.
  • Ventanas de tamaño ajustable:
    • Las ventanas que se pueden cambiar de tamaño se pueden optimizar para resoluciones más altas, pero se puede cambiar el tamaño según sea necesario en el momento de la presentación a la resolución de pantalla real.

    • Los tamaños de ventana progresivamente mayores deben mostrar más información progresivamente. Asegúrese de que al menos una parte o control de la ventana tiene contenido que se puede tamaño.

    • Mantenga el origen superior izquierdo del contenido fijo a medida que se cambia el tamaño de la ventana. No mueva el origen para equilibrar el contenido a medida que cambie el tamaño de la ventana.

    • Establezca un tamaño de contenido máximo si el contenido puede estar demasiado extendido. Si el contenido se vuelve difícil de manejar, no cambie el tamaño del área de contenido más allá de su ancho máximo ni cambie el origen del contenido a medida que se cambie el tamaño de la ventana. En su lugar, mantenga un ancho máximo y un origen fijo superior izquierdo.

    • Establezca un tamaño mínimo de ventana si hay un tamaño por debajo del cual el contenido ya no se puede utilizar. En el caso de los controles que se pueden cambiar de tamaño, establezca los tamaños mínimos de los elementos que se pueden cambiar de tamaño en sus tamaños funcionales más pequeños, como el ancho mínimo de columna funcional en las vistas de lista. Los elementos opcionales de la interfaz de usuario deben quitarse completamente.

    • Considere la posibilidad de modificar la presentación para que el contenido se pueda usar en tamaños más pequeños.

      captura de pantalla de los controles del reproductor multimedia

      En este ejemplo, Reproductor de Windows Media cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.

Control de tamaño

  • Haga que todos los controles interactivos se realicen con un mínimo relativo de 16 x 16 píxeles. Esto funciona bien para todos los dispositivos de entrada, incluidos Tecnología táctil y Tablet PC de Windows.

  • Controles de tamaño para evitar datos truncados. No trunca los datos que se deben leer para realizar una tarea. Columnas de vista de lista de tamaño para evitar datos truncados.

  • Controles de tamaño para eliminar el desplazamiento innecesario. Haga controles ligeramente más grandes si al hacerlo se elimina una barra de desplazamiento. Debe haber pocas barras de desplazamiento verticales y ninguna barra de desplazamiento horizontal innecesaria.

    captura de pantalla del tamaño de la lista para evitar una barra de desplazamiento

    En este ejemplo, el tamaño de la lista desplegable es para eliminar la barra de desplazamiento.

  • Reducir el número de tamaños de control en una superficie. Prefiere usar los tamaños de control recomendados estándar y, cuando sea necesario, use algunos controles de tamaño constante más grandes o más pequeños. Intente usar un ancho único para los cuadros de lista y las vistas de árbol, y no más de tres anchos para los botones de comando y las listas desplegables. Sin embargo, los anchos de cuadro de texto y cuadro combinado deben sugerir la longitud de la entrada más larga o esperada.

    captura de pantalla del cuadro de diálogo con listas y botones

    En este ejemplo, se usa un cuadro de lista y un tamaño de botón de comando de forma coherente.

  • Para los controles que tienen un tamaño basado en su texto, incluya un 30 % adicional (hasta un 200 % para texto más corto) para cualquier texto que se localizará. En esta guía se da por supuesto que el diseño está diseñado con texto en inglés. Tenga en cuenta también que esta guía hace referencia al texto localizado, no a los números.

  • Extienda los controles de texto estático, las casillas y los botones de radio al ancho máximo que cabe en el diseño. Al hacerlo, se evita el truncamiento del texto de longitud variable y la localización.

    Incorrecto:

    captura de pantalla del control de progreso y texto parcial

    En este ejemplo, el texto del control se trunca innecesariamente.

Espaciado de control

  • Si los controles no se tocan, tenga al menos 3 D DLL (5 píxeles relativos) de espacio entre ellos. De lo contrario, los usuarios pueden hacer clic en el espacio inactivo entre los controles. Puesto que hacer clic en el espacio inactivo no tiene ningún resultado o comentarios visuales, los usuarios a menudo no están seguros de lo que salió mal.

Selección de ubicación

  • Organice los elementos de la interfaz de usuario dentro de una superficie para que fluyan de forma natural en un orden de izquierda a derecha, de arriba a abajo (en las culturas occidental). La colocación de los elementos de la interfaz de usuario transmite su relación y debe reflejar los pasos para realizar la tarea.
  • Coloque los elementos de la interfaz de usuario que inician una tarea en la esquina superior izquierda o en el centro superior. Dé al elemento de interfaz de usuario que los usuarios deben ver primero el mayor énfasis visual.
  • Coloque los elementos de la interfaz de usuario que completan una tarea en la esquina inferior derecha.
  • Coloque los elementos de la interfaz de usuario relacionados juntos y separe los elementos no relacionados.
  • Coloque los pasos necesarios en el flujo principal.
  • Coloque pasos opcionales fuera del flujo principal, posiblemente desacentados mediante un fondo adecuado o una divulgación progresiva.
  • Coloque los elementos usados con frecuencia antes que los elementos usados con poca frecuencia en la ruta de acceso del examen.

Foco

  • Elija un único elemento de la interfaz de usuario que los usuarios deben mirar primero para ser el punto focal. El punto focal debe ser algo importante que los usuarios necesitan encontrar y comprender rápidamente.
  • Coloque el punto focal en la esquina superior izquierda o en el centro superior.
  • Dé al punto focal el mayor énfasis visual, como texto destacado, selección predeterminada o foco de entrada inicial.

Alignment

  • Normalmente, use la alineación izquierda.
  • Use la alineación derecha para los datos numéricos, especialmente las columnas de datos numéricos.
  • Use la alineación derecha para los botones de confirmación, así como los controles alineados con el borde derecho de la ventana.
  • Use la alineación del centro cuando la alineación izquierda o derecha sea inapropiada o parezca desequilibrada.
  • Al alinear verticalmente los controles con texto, alinee las líneas base de texto para proporcionar un flujo de lectura horizontal suave.
  • Para la alineación de etiquetas, consulte la sección Alineación de etiquetas en Conceptos de diseño.

Accesibilidad

  • No use el diseño como único medio para transmitir información importante sobre una interfaz de usuario. Es posible que los usuarios con discapacidades visuales no puedan interpretar esta presentación. Por ejemplo, asegúrese de que las etiquetas de controles comunican su relación con otros elementos.

  • No inserte controles subordinados dentro de las etiquetas de control para crear una frase o frase. Estas asociaciones se basan exclusivamente en el diseño y no se controlan bien mediante la navegación mediante el teclado o las tecnologías de asistencia de accesibilidad. Además, esta técnica no es localizable porque la estructura de oraciones varía según el lenguaje.

    Incorrecto:

    captura de pantalla de un cuadro de texto en medio de una frase

    En este ejemplo, el cuadro de texto se coloca incorrectamente dentro de la etiqueta de casilla.

    Correcto:

    captura de pantalla de un cuadro de texto al final de una frase

    En este caso, el cuadro de texto se coloca después de la etiqueta de casilla.

  • Haga que la agrupación sea accesible. Los grupos definidos por paneles de ventana, cuadros de grupo, separadores, etiquetas de texto y agregadores se controlan automáticamente mediante las ayuda de accesibilidad. Sin embargo, los grupos definidos solo por la selección de ubicación y los fondos no lo son y deben definirse mediante programación para la accesibilidad.

Para obtener más instrucciones, vea Accesibilidad.

Control del tamaño

En la tabla siguiente se enumeran los tamaños recomendados (ancho x alto o alto si es un único número) para los elementos comunes de la interfaz de usuario (para 9 pt. Segoe UI 96 ppp). Los anchos basados en el elemento más largo en inglés agregan un 30 por ciento para la localización (hasta un 200 por ciento para texto más corto) para cualquier texto (pero no números) que se localizará.

Ejemplo Control Unidades de diálogo Píxeles relativos
captura de pantalla de las casillas y sus etiquetas
Casillas
10
17
captura de pantalla del cuadro combinado
Cuadros combinados
ancho del elemento más largo + 30 % x 14
ancho del elemento más largo + 30 % x 23
captura de pantalla de un botón de comando
Botones de comando
50 x 14
75 x 23
captura de pantalla de uno de los dos vínculos de comando seleccionados
Vínculos de comandos
25 (una línea) o 35 (dos líneas)
41 (una línea) o 58 (dos líneas)
captura de pantalla de una lista desplegable
Listas desplegables
ancho de los datos válidos más largos + 30 % x 14
ancho del elemento más largo + 30 % x 23
captura de pantalla de un cuadro de lista
Cuadros de lista
ancho del elemento más largo + 30 % x un número entero de elementos (3 elementos como mínimo)
captura de pantalla de una lista de archivos de imagen
Vistas de lista
anchos de columnas que evitan datos truncados x un número entero de elementos
captura de pantalla de una barra de progreso
Barras de progreso
107 o 237 x 8
160 o 355 x 15
captura de pantalla de botones de radio
Botones de radio
10
17
captura de pantalla del control deslizante
Controles deslizantes
15
24
captura de pantalla de texto: "select time zone"
Texto (estático)
8
13
captura de pantalla del cuadro de texto vacío
Cuadros de texto
ancho de entrada más larga o esperada + 30 % x 14 (una línea) + 10 para cada línea adicional
ancho de datos válidos más largos + 30 % x 23 píxeles relativos (una línea) + 16 para cada línea adicional
captura de pantalla de carpetas anidadas en el Explorador de Windows
Vistas de árbol
ancho del elemento más largo + 30 % x un número entero de elementos (5 elementos como mínimo)

Espaciado

En la tabla siguiente se muestra el espaciado recomendado entre elementos comunes de la interfaz de usuario (para 9 pt. Segoe UI 96 ppp).

  Elemento Unidades de diálogo Píxeles relativos
Imagen que muestra el espaciado en los márgenes del cuadro de diálogo
Márgenes del cuadro de diálogo
7 en todos los lados
11 en todos los lados
Imagen que muestra el espaciado entre etiquetas y controles
Entre etiquetas de texto y sus controles asociados (por ejemplo, cuadros de texto y cuadros de lista)
3
5
Imagen que muestra el espaciado entre controles relacionados
Entre controles relacionados
4
7
Imagen que muestra el espaciado entre controles no relacionados
Entre controles no relacionados
7
11
Imagen que muestra el espaciado del primer control en un grupo
Primer control en un cuadro de grupo
11 hacia abajo desde la parte superior del cuadro de grupo; alinear verticalmente con el título del cuadro de grupo
16 hacia abajo desde la parte superior del cuadro de grupo; alinear verticalmente con el título del cuadro de grupo
Aa511279.between-related(en-us,MSDN.10).jpg
Entre controles de un cuadro de grupo
4
7
Imagen que muestra el espaciado entre botones
Botones organizados horizontal o verticalmente
4
7
Imagen que muestra el espaciado del último control de un grupo
Último control en un cuadro de grupo
7 encima de la parte inferior del cuadro de grupo
11 encima de la parte inferior del cuadro de grupo
Imagen que muestra el espaciado desde el borde izquierdo del cuadro de grupo
Desde el borde izquierdo de un cuadro de grupo
6
9
Imagen que muestra el espaciado de la etiqueta de texto junto al control
Etiqueta de texto junto a un control
3 hacia abajo desde la parte superior del control
5 hacia abajo desde la parte superior del control
Imagen que muestra el espaciado entre párrafos de texto
Entre párrafos de texto
7
11
Espacio más pequeño entre controles interactivos
3 o ningún espacio
5 o ningún espacio
Espacio más pequeño entre un control no interactivo y cualquier otro control
2
3