Marcos de ventana

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.

La mayoría de los programas deben usar marcos de ventana estándar. Las aplicaciones envolventes pueden tener un modo de pantalla completa que oculta el marco de la ventana. Considere la posibilidad de usar vidrio estratégicamente para un aspecto más sencillo, más ligero y más cohesivo.

Con un marco de ventana, los usuarios pueden manipular una ventana y ver el título y el icono para identificar su contenido.

captura de pantalla del marco de ventana alrededor de la ventana del Bloc de notas

Un marco de ventana típico.

Nota: Las directrices relacionadas con la administración de ventanas y la personalización de marca se presentan en artículos independientes.

Conceptos de diseño

Marcos de ventanas de cristal

Los marcos de ventanas de cristal son un aspecto sorprendentemente nuevo de la estética de Microsoft Windows, con el objetivo de ser atractivo y ligero. Estos marcos translúcidos proporcionan a las ventanas una apariencia abierta y menos intrusiva, lo que ayuda a los usuarios a centrarse en el contenido y la funcionalidad en lugar de en la interfaz que lo rodea.

captura de pantalla del marco de vidrio alrededor de la calculadora

Marcos de ventanas de cristal.

Puede usar vidrio estratégicamente en regiones pequeñas dentro de una ventana que toque el marco de la ventana. Estas regiones parecen formar parte del marco de ventana, aunque técnicamente forman parte del área cliente de la ventana.

captura de pantalla de la ventana con borde translúcido

En este ejemplo, el vidrio se usa en el área cliente para que parezca parte del marco.

Marcos ocultos

A veces, el mejor marco de ventana no es ningún marco. Este suele ser el caso de la ventana principal de aplicaciones de pantalla completa envolventes que no se usan junto con otros programas, como reproductores multimedia, juegos y aplicaciones de pantalla completa.

Los visores de contenido suelen beneficiarse de tener la opción de mostrar contenido a pantalla completa. Algunos ejemplos son Windows Internet Explorer, Galería fotográfica de Windows Live, Windows Movie Maker HD, Microsoft PowerPoint y Microsoft Word.

captura de pantalla del reproductor multimedia en la vista de pantalla completa

En este ejemplo, Reproductor multimedia de Windows puede mostrar su contenido a pantalla completa.

Marcos personalizados

La mayoría de las aplicaciones de Windows deben usar los marcos de ventana estándar. Sin embargo, para aplicaciones envolventes, de pantalla completa, independientes, como juegos y aplicaciones de quiosco, puede ser adecuado usar marcos personalizados para las ventanas que no se muestran a pantalla completa. La motivación para usar marcos personalizados debe ser dar a la experiencia general una sensación única, no solo para la personalización de marca.

ilustración del rompecabezas y el marco de imagen revuelto

Los marcos personalizados son adecuados para aplicaciones envolventes, de pantalla completa y independientes, como juegos.

Instrucciones

Marcos de ventana

  • Use marcos de ventana estándar.

    • Excepción: Para ofrecer una sensación única a las aplicaciones independientes de pantalla completa envolventes:
      • Considere la posibilidad de ocultar el marco de ventana de la ventana principal.

      • Considere la posibilidad de usar marcos personalizados para la ventana secundaria.

      • Si un marco personalizado es adecuado, elija un diseño ligero y no preste demasiada atención a sí mismo.

        Incorrecto:

        captura de pantalla del fotograma distraído

        En este ejemplo, el marco personalizado llama demasiada atención a sí mismo.

  • No agregue controles a un marco de ventana. Coloque los controles dentro de la ventana en su lugar.

    Incorrecto:

    captura de pantalla del control en el marco de ventana

    Correcto:

    captura de pantalla del control en el área cliente

    En el ejemplo correcto, el control está dentro del área cliente en lugar del marco de la ventana.

Modo de pantalla completa

  • Para los programas que tienen un modo de pantalla completa opcional, para habilitar el modo de pantalla completa:

    • Tener un comando modal de pantalla completa en la barra de menús o la barra de herramientas. Cuando el usuario hace clic en el comando, muestre el comando en su estado seleccionado.

      captura de pantalla de la ventana con el elemento de menú de pantalla completa

      En este ejemplo se muestra el comando de pantalla completa junto con su tecla de método abreviado estándar.

  • Use F11 para la tecla de método abreviado de pantalla completa.

  • Si hay una barra de herramientas y el modo de pantalla completa se usa normalmente, también tiene un botón de barra de herramientas gráfico con una información sobre herramientas de pantalla completa.

    captura de pantalla de botones de pantalla completa y reversión

    Ejemplos de botones de la barra de herramientas de pantalla completa.

  • Para revertir desde el modo de pantalla completa:

    • Tener un comando modal de pantalla completa en la barra de menús o la barra de herramientas. Cuando el usuario hace clic en el comando, muestre el comando en su estado borrado.
    • Use F11 para la tecla de método abreviado de pantalla completa. Si aún no está asignado, También se puede usar Esc para este fin.

Vidrio

Los marcos de ventana estándar usan vidrio automáticamente en Windows, pero también puedes usar vidrio en regiones que toquen el marco de la ventana.

  • 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 ser parte del marco.
  • captura de pantalla de la ventana con borde translúcido
  • En este ejemplo, Glass centra la atención del usuario en el contenido en lugar de en los controles.
  • No uses vidrio en situaciones en las que un fondo de ventana simple sería más atractivo o más fácil de usar.

Correcto:

captura de pantalla de la ventana con cuatro gráficos y etiqueta

En este ejemplo, el vidrio se usa para dar a la ventana Alt+Tab un aspecto ligero. Glass funciona para esta ventana porque consta de gráficos y una sola etiqueta de texto seguro.

Incorrecto:

captura de pantalla de la ventana con doce gráficos

En este ejemplo incorrecto, el uso de vidrio es distraído. Un fondo de ventana sin formato sería una mejor opción.