Elementos gráficos

Elementos gráficos mostrar relaciones, jerarquías y énfasis visualmente. Incluyen fondos, pancartas, vidrio, agregadores, separadores, sombras y controladores.

Ejemplo con varios tipos de elementos gráficos.

Normalmente, los elementos gráficos no son interactivos. Sin embargo, los separadores son interactivos para el contenido redimensionable y los identificadores son gráficos que muestran interactividad.

Nota: Directrices relacionadas con cuadros de grupo, animaciones, iconos de y de personalización de marca se presentan en artículos independientes.

¿Es esta la interfaz de usuario adecuada?

Aunque los elementos gráficos son un medio visual fuerte de indicar relaciones, al usarlos se agrega desorden visual y se reduce el espacio disponible en una superficie. Deben usarse con moderación.

Una tendencia de diseño en Microsoft Windows es una apariencia más sencilla y limpia eliminando gráficos y líneas innecesarios.

Para decidir si es necesario un elemento gráfico, tenga en cuenta estas preguntas:

• ¿La presentación y la comunicación del diseño son tan claras y eficaces sin el elemento? Si es así, quítelo.
• ¿Puede comunicar eficazmente las relaciones con el diseño solo? Si es así, use diseño en su lugar. Puede colocar controles relacionados entre sí y colocar espaciado adicional entre controles no relacionados. También puede usar sangría para mostrar relaciones jerárquicas.

de diseño de cuatro iconos

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

• ¿La comunicación es efectiva sin texto? Si no es así, use un cuadro de grupo de , separador etiquetado u otro etiqueta.

Patrones de uso

Los elementos gráficos tienen varios patrones de uso:

Elemento	Descripción
ilustraciones gráficas use para comunicar una idea visualmente.	Las ilustraciones gráficas son similares a los iconos, excepto que pueden ser de cualquier tamaño y normalmente no son interactivas. En este ejemplo, se usa una ilustración gráfica para sugerir la naturaleza de una característica.
fondos de use para resaltar o desacentar diferentes tipos de contenido.	Los fondos se pueden usar para resaltar el contenido importante. en este ejemplo, se usa un fondo para resaltar una tarea importante. Los fondos también se pueden usar para desacentar el contenido secundario. captura de pantalla de En este ejemplo, las tareas secundarias se desacentúan al ubicarlas en un panel de tareas.
banners de se usa para indicar el estado importante.	A diferencia de los fondos, los banners enfatizan principalmente una sola cadena de texto. captura de pantalla de En este ejemplo, se usa un banner para indicar que la configuración de la página se controla mediante la directiva de grupo.
glass use estratégicamente para reducir el peso visual de una ventana.	El vidrio puede reducir el peso de una superficie centrándose en el contenido en lugar de la propia ventana. En este ejemplo, el vidrio centra la atención del usuario en el contenido en lugar de los controles.
agregadores se usa para crear una relación visual entre controles muy relacionados.	en este ejemplo, se usa un fondo de agregador para resaltar la relación entre los botones atrás y adelante del explorador. captura de pantalla de 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 solo control en lugar de ocho.
separadores de se usa para separar controles no relacionados o no relacionados.	Los separadores pueden ser interactivos o no interactivos. Los separadores interactivos entre contenido redimensionable se conocen como divisores. en este ejemplo, se usa un separador interactivo para el contenido redimensionable. En este ejemplo, el separador no es interactivo.
shadows se usa para que el contenido destaque visualmente en su fondo.	En este ejemplo, las sombras hacen que las ilustraciones se destaquen en segundo plano.
identificadores use para indicar que se puede mover o cambiar el tamaño de un objeto.	Los identificadores siempre son interactivos y su comportamiento lo sugiere el puntero del mouse al mantener el mouse. de puntero de cambio de tamaño de puntero de cambio de tamaño En estos ejemplos, los identificadores indican que se puede cambiar el tamaño de un objeto.

Directrices

General

• No transmita información esencial a través de elementos gráficos solos. Al hacerlo, se presentan problemas de accesibilidad para los usuarios con discapacidades visuales o discapacidades.

Diseños gráficos

• Los gráficos son más eficaces cuando refuerzan una sola idea simple. Los gráficos complejos que requieren que la interpretación no funcione bien. Los hieroglíficos son los mejores para los dibujos de cueva.

  incorrecto:

  gráficos complejos

  En este ejemplo, un gráfico complejo de Windows XP intenta explicar de forma ineficaz una decisión de confianza compleja.

• No use flechas, comillas angulares, marcos de botón u otras prestaciones asociadas a controles interactivos. Al hacerlo, invita a los usuarios a interactuar con los gráficos.

• Evite las franjas de color rojo puro, amarillo y verde en sus diseños. Para evitar confusiones, reserve estos colores para comunicar el estado. Si debe usar estos colores para algo distinto del estado, use tonos silenciados en lugar de colores puros.

• Utilice diseños culturalmente neutros. Lo que puede tener un significado determinado en un país, región o cultura puede no tener el mismo significado en otro.

• Evite usar personas, caras, género o partes corporales, así como símbolos religiosos, políticos y nacionales. Es posible que estas imágenes no se traduzcan fácilmente o podrían ser ofensivas.

• Cuando se deben representar personas o usuarios, representen genéricamente; evitar representaciones realistas.

Fondos y banners

• Para resaltar el contenido, use texto oscuro en un fondo claro. El texto negro en un fondo gris claro o amarillo funciona bien.

  

  En este ejemplo, el vínculo obtiene la atención del usuario porque está en un fondo amarillo.

• Para anular el énfasis del contenido, use texto claro en un fondo oscuro. El texto blanco de un fondo gris oscuro o azul funciona bien.

  

  En este ejemplo, el fondo oscuro desmarca el contenido.

• Si se usa un degradado, asegúrese de que el color del texto tiene un buen contraste en todo el degradado.

• Use siempre un icono de 16 x 16 píxeles para llamar la atención al banner. Los banners son demasiado fáciles de pasar por alto de lo contrario. Para obtener más instrucciones y ejemplos, consulte iconos estándar.

• Use fondos y banners con precaución. Aunque la intención del fondo o banner puede ser resaltar el contenido, a menudo los resultados son el opuesto a un fenómeno conocido como "blindaje de banner".

Vidrio

• Considere la posibilidad de usar vidrio estratégicamente en regiones pequeñas tocando el marco de la ventana sin texto. Si lo hace, puede dar a un programa un aspecto más sencillo, más ligero y cohesivo haciendo que la región parezca formar parte del marco.
• No usar vidrio en situaciones en las que un fondo de ventana simple sería más atractivo o más fácil de usar.

Separadores

• Use líneas verticales y horizontales para separadores. Asegúrese de tener suficiente espacio entre los separadores y el contenido que se está separando.
• Para los separadores entre contenidoizable (divisores), muestre el puntero de cambio de tamaño al mantener el mouse.

de puntero de cambio de tamaño

En estos ejemplos, se muestran punteros de cambio de tamaño al mantener el mouse.

Sombras

• Use solo para hacer que el contenido o los objetos más significativos del programa se arrastren visualmente en su fondo. Considere que las sombras son un desorden visual en otras circunstancias.

Compatibilidad con valores altos de ppp

• Admite modos de vídeo de 96 y 120 puntos por pulgada (ppp). Detecte el modo de ppp en el inicio y controle los eventos de cambio de ppp. Windows está optimizado para 96 y 120 ppp y usa 96 ppp de forma predeterminada.
• Prefiere proporcionar mapas de bits independientes representados específicamente para gráficos de escalado de 96 y 120 ppp. Al menos, proporcione versiones de 96 y 120 ppp para los mapas de bits más importantes y visibles, y ya sea central o escale los demás. Estas aplicaciones se consideran "compatibles con valores altos de ppp" y proporcionan una mejor experiencia visual general que los programas que se escalan automáticamente mediante Windows.
  • Desarrolladores: puede declarar un programa compatible con valores altos de ppp (y evitar el escalado automático) estableciendo la marca de reconocimiento de ppp en el manifiesto del programa, o llamando a la API SetProcessDPIAware() durante la inicialización del programa. Puede usar macros para simplificar la selección de los gráficos adecuados. En el caso de los mapas de bits win32, puedes usar SS_CENTERIMAGE para centrar o SS_REALSIZECONTROL escalar.
• Compruebe el programa en 96 y 120 ppp para:
  • Gráficos demasiado pequeños o demasiado grandes.
  • Los gráficos que se recortan, se superponen o no se ajustan correctamente.
  • Gráficos que están mal extendidos ("pixilated").
  • Texto recortado o no ajustado en fondos gráficos.

Mensaje de texto

• Para la accesibilidad y la localización, no use ningún texto en gráficos. Realice excepciones solo para representar de personalización de marca y texto como un concepto abstracto.