Cursos
Módulo
Personalización del diseño en páginas XAML de .NET MAUI - Training
Cree interfaces de usuario coherentes en diferentes dispositivos con StackLayout y Grid.
Este explorador ya no se admite.
Actualice a Microsoft Edge para aprovechar las características y actualizaciones de seguridad más recientes, y disponer de soporte técnico.
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 todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.
El diseño es el ajuste de tamaño, el espaciado y la colocación del contenido dentro de una ventana o página. El diseño eficaz es fundamental para ayudar a los usuarios a encontrar lo que buscan rápidamente, así como hacer que la apariencia sea visualmente atractiva. El diseño eficaz puede marcar la diferencia entre los diseños que los usuarios entienden inmediatamente y los que dejan a los usuarios sintiéndose acertados y abrumados.
Nota: Las directrices relacionadas con la administración de ventanas se presentan en un artículo independiente. El ajuste de tamaño y el espaciado específicos recomendados se presentan en sus respectivos artículos de directrices.
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.
La jerarquía visual se logra mediante la combinación hábil de los siguientes atributos:
Además, el diseño efectivo tiene estos atributos:
Aunque el ajuste de tamaño, el espaciado y la colocación son conceptos sencillos, el desafío con el diseño es lograr la combinación correcta de estos atributos.
En Windows, el diseño se comunica mediante métricas independientes del dispositivo, como unidades de diálogo (DTU) y píxeles relativos.
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 con este modelo de diseño para leer:
Personas leer en un orden de izquierda a derecha, de arriba a abajo (en referencias culturales occidentales).
Hay dos modos de lectura: lectura inmersiva y examen. El objetivo de la lectura inmersiva es la comprensión.
En este diagrama se modela la lectura inmersiva.
Por el contrario, el objetivo del examen es localizar cosas. La ruta de acceso general del examen tiene este aspecto:
Este diagrama modela el análisis.
Si hay texto que se ejecuta a lo largo del borde izquierdo de una página, los usuarios examinan primero el borde izquierdo.
Al usar software, los usuarios no se sumergen 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 examinan. Después, solo leen fragmentos de texto de forma completa cuando creen que necesitan.
Los usuarios tienden a omitir los paneles de navegación en el lado izquierdo o derecho de una página. Los usuarios reconocen que están allí, pero miran los paneles de navegación solo cuando quieran navegar.
Los usuarios tienden a omitir bloques grandes de texto sin formato sin leerlos.
Los usuarios tienden a omitir grandes bloques de texto y paneles de navegación cuando examinan.
Todas las cosas son iguales, los usuarios primero buscan en la esquina superior izquierda de una ventana, examinan por la página y terminan su examen en la esquina inferior derecha. Tienden a ignorar la esquina inferior izquierda.
Todas las cosas 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 diferentes niveles de atención. Los usuarios tienden a examinar los controles interactivos especialmente los controles de la parte superior izquierda y el centro de la ventana y el texto destacado primero.
Los usuarios se centran en los controles interactivos principales y en la instrucción principal destacada, y miran otras cosas solo cuando necesitan.
Los usuarios dejan de escanear cuando creen que han terminado.
Por supuesto, habrá excepciones a este modelo general. Los dispositivos de seguimiento ocular indican que el comportamiento real de los usuarios es bastante errático. El objetivo de este modelo es ayudarle a tomar buenas decisiones y desventajas, no a modelar el comportamiento del usuario con precisión. Pero como ha leído esta lista, espero que también haya reconocido muchos de sus propios patrones de lectura.
Los usuarios no leen, examinan para que deba diseñar superficies de interfaz de usuario para el examen. No suponga que los usuarios leerán el texto como escrito en un orden de izquierda a derecha, de arriba a abajo, sino que verán los elementos de la interfaz de usuario que atraen su atención.
Para diseñar el examen:
Siempre que sea posible, trabaje con este modelo en lugar de luchar contra él; pero habrá ocasiones en las que necesite resaltar o desacentar elementos de interfaz de usuario concretos.
Para resaltar los elementos principales de la interfaz de usuario:
Coloque los elementos principales de la interfaz de usuario en la ruta de acceso del examen.
Coloque cualquier interfaz de usuario para iniciar una tarea en la esquina superior izquierda o en el centro superior.
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.
Colocar texto los usuarios deben leer en controles interactivos, o con iconos, o en banners.
Use texto oscuro en un fondo claro.
Rodea los elementos con un espacio generoso.
No requiera ninguna interacción, como apuntar o mantener el puntero, para ver el elemento que está resaltando.
En este ejemplo se muestran muchas maneras de resaltar los elementos principales de la interfaz de usuario.
Para desacentar 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 normalmente no necesiten ver en la esquina inferior izquierda o en la parte inferior de la ventana.
Use controles que no atraen 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 oscuro o azul funciona bien.
Rodea los elementos con espacio mínimo.
Considere la posibilidad de usar la divulgación progresiva para ocultar los elementos secundarios de la interfaz de usuario.
En este ejemplo se muestran muchas maneras de desacentar los elementos secundarios de la interfaz de usuario.
El uso eficaz del espacio de pantalla requiere equilibrar varios factores: usar demasiado espacio y una ventana se siente pesada y desperdiciada, e incluso difícil de usar en función de la ley de ajuste.
Incorrecto:
En este ejemplo, la ventana es demasiado grande para su contenido.
Por otro lado, usar demasiado poco espacio y una ventana se siente estrecha, incómodo e intimidante, y difícil de usar si requiere desplazamiento y otra manipulación para usar.
Incorrecto:
En este ejemplo, la ventana es demasiado pequeña para su contenido.
Aunque la interfaz de usuario crítica debe caber en la resolución eficaz mínima admitida, no suponga que el uso del espacio de pantalla significa que las ventanas deben ser lo más pequeñas posible que no deben ser. El diseño efectivo tiene respeto por el espacio abierto y no intenta cram 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 pueda. Por lo tanto, erre en el lado del uso de demasiado espacio de pantalla en lugar de demasiado poco. Al hacerlo, las ventanas se sienten más ligeras y accesibles.
Sabe que un diseño usa el espacio de pantalla de forma eficaz cuando:
Elija tamaños de ventana que sean lo suficientemente grandes como para cumplir con su propósito. (Y si la ventana es redimensionable, este objetivo se aplica a su tamaño predeterminado). Una combinación de datos truncados o barras de desplazamiento y un montón de espacio de pantalla disponible es un signo claro de diseño ineficaz.
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 De ajuste de tamaño de control , así como el ajuste de tamaño recomendado en los artículos de directrices de control específicos.
La Ley de Ajuste indica que el menor objetivo es, cuanto más tiempo se tarda en adquirirlo con el mouse. Además, para 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 considerar 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 15x9 son demasiado pequeños para ser utilizados eficazmente por los lápices.
Proporcionar espacio generoso (pero no excesivo) hace que el diseño se sienta más cómodo y más fácil de analizar. El espacio efectivo no es un espacio sin usar que desempeña un papel importante en la mejora de la capacidad de los usuarios de examinar y también agrega al atractivo visual del diseño. Para obtener instrucciones, consulte la tabla Espaciado.
En el caso de los equipos que usan 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 selección de destino es más difícil cuando se usa un lápiz o un dedo como dispositivo que señala, lo que da lugar a que los usuarios pulsen fuera del destino previsto. Cuando los controles interactivos se colocan muy cerca, pero no se tocan realmente, los usuarios pueden hacer clic en espacio inactivo entre los controles. Dado que hacer clic en espacio inactivo no tiene ningún resultado o comentarios visuales, los usuarios a menudo no están seguros de 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 tocarse o tener al menos 3 DTU (5 píxeles relativos) de espacio entre ellos.
Sabe que un diseño tiene buen espaciado cuando:
Las ventanas de tamaño redimensionable también son un factor en el uso eficaz del espacio de pantalla. Algunas ventanas constan de contenido fijo y no se benefician de ser redimensionables, pero las ventanas con contenido redimensionable deben ser redimensionables. Por supuesto, la razón por la que los usuarios cambian el tamaño de una ventana es tomar avanzado el espacio de pantalla adicional, por lo que el contenido debe expandirse en consecuencia al dar más espacio a los elementos de la interfaz de usuario que lo necesitan. Las ventanas con contenido dinámico, documentos, imágenes, listas y árboles se benefician más de ventanas de tamaño redimensionable.
En este ejemplo, cambiar el tamaño de la ventana cambia el tamaño del control de vista de lista.
Dicho esto, las ventanas se pueden estirar demasiado anchas. Por ejemplo, muchas páginas del panel de control se vuelven inconfundibles cuando el contenido tiene más de 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 se cambia el tamaño de la ventana. En su lugar, mantenga un ancho máximo y un origen superior izquierdo fijo.
El texto resulta difícil de leer a medida que aumenta la longitud de la línea. En el caso de los documentos de texto, considere una longitud máxima de línea de 80 caracteres para facilitar la lectura del texto. (Los caracteres incluyen letras, signos de puntuación y espacios).
Incorrecto:
En este ejemplo, la longitud larga del texto dificulta la lectura.
Por último, las ventanas redimensionables también necesitan usar el espacio de pantalla de forma eficaz cuando se hace más pequeño, ya que reducen el tamaño del contenido y quitan el espacio de los elementos de la interfaz de usuario que pueden funcionar eficazmente sin él. En algún momento, la ventana o sus elementos de interfaz de usuario se vuelven demasiado pequeños para poder usarse, por lo que deben asignarse un tamaño mínimo o algunos elementos deben quitarse por completo.
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 pueda usar a tamaños más pequeños.
En este ejemplo, Reproductor multimedia de Windows cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.
Un diseño tiene el foco cuando hay un lugar obvio para buscar primero. El foco es importante para mostrar a los usuarios dónde empezar a examinar la ventana o la página. Sin foco claro, el ojo del usuario se desambulará sin sentido. 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 solo puede centrarse en una cosa a la vez, los usuarios no pueden centrarse en varios lugares simultáneamente.
Para que un elemento de la interfaz de usuario sea el punto focal, puede darle énfasis visual mediante:
Considere la posibilidad de buscar en Windows. El punto focal de La búsqueda de Windows debe ser el cuadro Buscar 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:
En este ejemplo, una instrucción destacada en la parte superior central de la ventana dirige a los usuarios al cuadro Buscar.
Sin las instrucciones, la ventana no tendría un punto focal obvio.
Incorrecto:
Este ejemplo no tiene un punto focal obvio. Los usuarios no saben dónde buscar.
Si das énfasis visual a un elemento de la interfaz de usuario, asegúrate de que se garantiza la atención. En el ejemplo anterior incorrecto de Windows Search, 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. Es posible que los usuarios se bloquee mirando este botón intentando averiguar qué hacer con él.
Incorrecto:
Sin la instrucción destacada como punto focal, el botón Todo resaltado es un punto focal no intencional.
Un diseño tiene flujo cuando los usuarios se guían sin problemas y naturalmente por una ruta 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 identifiquen 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 un orden de izquierda a derecha, de arriba a abajo (en referencias culturales occidentales).
Sabe que un diseño tiene un buen flujo cuando:
Incorrecto:
En este ejemplo, los usuarios no saben qué hacer a continuación. Hay saltos inesperados y saltos en el flujo de tareas.
Correcto:
En este ejemplo, la presentación de los elementos de la interfaz de usuario refleja los pasos para realizar la tarea.
Un diseño tiene agrupación cuando los elementos de 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 los elementos individualmente. Los grupos hacen que un diseño sea más sencillo y fácil de analizar.
Puede mostrar la agrupación de las siguientes maneras (aumentando la pesadez):
Diseño. Puede agrupar controles relacionados entre sí y colocar el espaciado adicional entre controles no relacionados.
En este ejemplo, el diseño solo 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.
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 muy relacionados.
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 único control en lugar de ocho.
Cuadros de grupo. Un cuadro de grupo es un marco rectangular etiquetado que rodea un conjunto de controles relacionados.
En este ejemplo, un cuadro de grupo rodea y etiqueta un conjunto de controles relacionados.
Fondos. Puede usar fondos para resaltar o desacentar diferentes tipos de contenido.
En este ejemplo, el panel de tareas del panel de control se usa para agrupar tareas relacionadas y elementos del panel de control.
Para evitar el desorden visual, la agrupación de peso más ligera que realiza 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 sangría para mostrar la relación de los controles dentro de un grupo. Los controles que son del mismo nivel entre sí deben estar alineados a la izquierda y los controles dependientes tienen una sangría de 12 DTU o 18 píxeles relativos.
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 de verificación y los botones de radio de sus etiquetas.
Sabe que un diseño tiene una buena agrupación cuando:
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:
Alineación a la 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 examen vertical de los datos en columnas.
Alineación a la 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.
En este ejemplo, el control de divulgación progresiva de búsqueda avanzada está alineado a la derecha porque se coloca en el borde derecho de la ventana.
Alineación central
La alineación central está mejor reservada para situaciones en las que la alineación izquierda o derecha no es adecuada o aparece desequilibrada.
En este ejemplo, el control del reproductor multimedia se centra para dar una apariencia equilibrada.
No centre el contenido de la ventana solo para rellenar el espacio.
Incorrecto:
En este ejemplo, el contenido se centra incorrectamente en una ventana redimensionable para rellenar el espacio.
Parte superior del elemento
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:
Incorrecto:
En el ejemplo correcto, el control y su etiqueta están alineados verticalmente por sus líneas base de texto.
Sabe que un diseño tiene una buena alineación cuando:
Las reglas de alineación generales se aplican a las etiquetas de control, pero es un problema común digno de atención específica. La alineación de etiquetas tiene estos objetivos:
El objetivo general es reducir la cantidad de movimiento ocular necesario para encontrar lo que es probable que los usuarios busquen, pero la naturaleza de los controles y lo que los usuarios buscan dependen del contexto.
Hay cuatro estilos comunes de colocación y alineación de etiquetas, cada uno con sus ventajas:
Etiquetas justificadas a la izquierda por encima de los controles
Este estilo es el más fácil de localizar porque el diseño no depende de la longitud de las etiquetas, pero toma el espacio más vertical.
Este estilo toma el espacio más vertical, pero es más fácil localizar. Es una mejor opción para etiquetar principalmente controles interactivos.
Se usa mejor cuando:
Etiquetas justificadas 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 en longitud, pero es más difícil asociar la etiqueta con su control. Este estilo puede usar etiquetas de varias líneas si es necesario.
Este estilo funciona bien. Sin embargo, hay dos columnas, pero visualmente parece que hay cuatro que hacen que los datos aparezcan más complejos.
Se usa mejor cuando:
Etiquetas justificadas a la izquierda a la izquierda de los controles, controles irregulares a la izquierda
Este estilo facilita el examen de las etiquetas verticalmente 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 están justificados a la derecha para aprovechar al máximo el espacio disponible.
Este estilo es compacto y fácil de leer, pero es difícil examinar los controles verticalmente.
Se usa mejor cuando:
Etiquetas justificadas a la derecha a la izquierda de 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 y controles con sangría difieren en gran medida.
Este estilo permite un análisis vertical sencillo de los controles, pero dificulta el examen vertical de las etiquetas.
Se usa mejor cuando:
Sin embargo, antes de adoptar cualquiera de estos estilos, tenga en cuenta dos factores más:
Una ventana o página tiene equilibrio cuando su contenido aparece uniformemente distribuido entre su superficie. Si la superficie físicamente tuviera la misma ponderación que tiene visualmente, un diseño equilibrado no se inclinaría hacia 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 equilibrio de las siguientes maneras:
Este diseño de página del asistente bien 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.
Para superficies redimensionables, no centre el contenido solo para lograr el equilibrio. En su lugar, mantenga un origen superior izquierdo fijo, defina un área expuesta máxima y equilibre el contenido dentro del espacio utilizado.
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 se usa en una sola ventana o página, las cuadrículas ayudan a organizar el contenido dentro de una superficie. Cuando se reutiliza, 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 la 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:
Visualmente simple:
Las líneas de cuadrícula innecesarias crean complejidad visual.
Sabe que un diseño usa cuadrículas de forma eficaz cuando:
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:
Como regla general, si se puede eliminar un elemento de diseño sin dañar la eficacia de la interfaz de usuario, probablemente debería ser.
Las ventanas de tamaño redimensionable se pueden optimizar para resoluciones más altas, pero se reducen según sea necesario en tiempo de visualización a la resolución de pantalla real.
Los tamaños de ventana progresivamente más grandes deben mostrar progresivamente más información. Asegúrese de que al menos una parte o control de ventana tiene contenido redimensionable.
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 cambia el tamaño de la ventana.
Establezca un tamaño de contenido máximo si el contenido puede ser demasiado extendido demasiado ancho. Si el contenido deja de ser dinámico, no cambie el tamaño del área de contenido más allá de su ancho máximo o 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 superior izquierdo fijo.
Establezca un tamaño mínimo de ventana si hay un tamaño por debajo del cual el contenido ya no se puede usar. En el caso de los controles de tamaño redimensionable, establezca tamaños mínimos de elemento redimensionables en sus tamaños funcionales más pequeños, como los anchos de columna funcional mínimos 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 con tamaños más pequeños.
En este ejemplo, Reproductor multimedia de Windows cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.
Convierta todos los controles interactivos al menos en 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 truncar 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 que los controles sean ligeramente más grandes si lo hace, elimina una barra de desplazamiento. Debe haber pocas barras de desplazamiento verticales y ninguna barra de desplazamiento horizontal innecesaria.
En este ejemplo, se ajusta el tamaño de la lista desplegable para eliminar la barra de desplazamiento.
Reduzca 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 más grandes o más pequeños de tamaño coherente. Intente usar un ancho único para cuadros de lista y vistas de árbol, y no más de tres anchos para los botones de comando y las listas desplegables. Sin embargo, el cuadro de texto y los anchos del cuadro combinado deben sugerir la longitud de su entrada más larga o esperada.
En este ejemplo, se usa de forma coherente un cuadro de lista y un tamaño de botón de comando.
En el caso de 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 localice. En esta guía se supone 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.
Amplíe los controles de texto estáticos, las casillas de verificación y los botones de radio al ancho máximo que caberá en el diseño. De este modo, se evita el truncamiento del texto y la localización de longitud variable.
Incorrecto:
En este ejemplo, el texto del control se trunca innecesariamente.
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 los 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 por teclado o las tecnologías de asistencia de accesibilidad. Además, esta técnica no es localizable porque la estructura de oraciones varía con el lenguaje.
Incorrecto:
En este ejemplo, el cuadro de texto se coloca incorrectamente dentro de la etiqueta de casilla.
Correcto:
Aquí, el cuadro de texto se coloca después de la etiqueta de casilla.
Hacer 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 ayudas de accesibilidad. Sin embargo, los grupos definidos solo por la ubicación y los fondos no son y deben definirse mediante programación para la accesibilidad.
Para obtener más instrucciones, consulte Accesibilidad.
Ajuste de tamaño del control
En la tabla siguiente se enumeran los tamaños recomendados (ancho x alto o alto si un número único) para los elementos comunes de la interfaz de usuario (para 9 pt. Segoe UI a 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 localice.
Ejemplo | Control | Unidades de diálogo | Píxeles relativos |
---|---|---|---|
|
Casillas |
10 |
17 |
|
Cuadros combinados |
ancho del elemento más largo + 30% x 14 |
ancho del elemento más largo + 30% x 23 |
|
Botones de comando |
50 x 14 |
75 x 23 |
|
Vínculos de comandos |
25 (una línea) o 35 (dos líneas) |
41 (una línea) o 58 (dos líneas) |
|
Listas desplegables |
ancho de datos válidos más largos + 30% x 14 |
ancho del elemento más largo + 30% x 23 |
|
Cuadros de lista |
ancho del elemento más largo + 30 % x un número entero de elementos (3 elementos como mínimo) |
|
|
Vistas de lista |
anchos de columnas que evitan datos truncados x un número entero de elementos |
|
|
Barras de progreso |
107 o 237 x 8 |
160 o 355 x 15 |
|
Botones de radio |
10 |
17 |
|
Controles deslizantes |
15 |
24 |
|
Texto (estático) |
8 |
13 |
|
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 |
|
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 los elementos comunes de la interfaz de usuario (para 9 pt. Segoe UI a 96 ppp).
Elemento | Unidades de diálogo | Píxeles relativos | |
---|---|---|---|
|
Márgenes del cuadro de diálogo |
7 en todos los lados |
11 en todos los lados |
|
Entre las etiquetas de texto y sus controles asociados (por ejemplo, cuadros de texto y cuadros de lista) |
3 |
5 |
|
Entre controles relacionados |
4 |
7 |
|
Entre controles no relacionados |
7 |
11 |
|
Primer control de 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 |
|
Entre controles de un cuadro de grupo |
4 |
7 |
|
Entre botones organizados horizontal o verticalmente |
4 |
7 |
|
Último control de un cuadro de grupo |
7 encima de la parte inferior del cuadro de grupo |
11 encima de la parte inferior del cuadro de grupo |
|
Desde el borde izquierdo de un cuadro de grupo |
6 |
9 |
|
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 |
|
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 |
Cursos
Módulo
Personalización del diseño en páginas XAML de .NET MAUI - Training
Cree interfaces de usuario coherentes en diferentes dispositivos con StackLayout y Grid.