窗框

注意

此设计指南是为 Windows 7 创建的,尚未针对较新版本的 Windows 进行更新。 大部分指南仍原则上适用,但演示和示例并不反映我们 当前的设计指南

大多数程序应使用标准窗口框架。 沉浸式应用程序可以具有隐藏窗口框架的全屏模式。 考虑从战略上使用玻璃,以更简单、更轻、更凝聚力的外观。

使用窗口框架,用户可以作窗口并查看标题和图标来标识其内容。

记事本窗口周围的窗口框架的屏幕截图

典型的窗口框架。

注意:窗口管理和品牌相关的指南在单独的文章中提供。

设计概念

玻璃窗口框架

玻璃窗框架是Microsoft Windows 美学的一个引人注目的新方面,旨在既吸引人又轻量。 这些半透明框架为窗口提供了一个开放、不太侵入的外观,帮助用户专注于内容和功能,而不是围绕它周围的界面。

围绕计算器screen shot of glass frame around calculator screen shot of glass frame around calculator 的玻璃框架的屏幕截图

玻璃窗框架。

可以在触摸窗口框架的窗口内的小型区域中战略性地使用玻璃。 这些区域似乎是窗口框架的一部分,尽管从技术上说,它们也是窗口工作区的一部分。

具有半透明边缘screen shot of window with translucent edge screen shot of window with translucent edge 的窗口的屏幕截图

在此示例中,玻璃在工作区中使用,使其看起来像框架的一部分。

隐藏的帧

有时最好的窗口框架根本不是框架。 对于未与其他程序(如媒体播放器、游戏和展台应用程序)结合使用的沉浸式全屏应用程序的主要窗口,通常就是这种情况。

内容查看器通常受益于选择全屏显示内容。 示例包括 Windows Internet Explorer、Windows Live Photo Gallery、Windows Movie Maker HD、Microsoft PowerPoint 和 Microsoft Word。

全屏视图中媒体播放器的屏幕截图

在此示例中,Windows Media Player 可以全屏显示其内容。

自定义帧

大多数 Windows 应用程序应使用标准窗口框架。 但是,对于沉浸式、全屏、独立应用程序(如游戏和展台应用程序),对于未显示全屏的任何窗口,可能适合使用自定义框架。 使用自定义框架的动机应该是为整体体验提供独特的感觉, 而不仅仅是品牌打造

拼合图片谜题和框架图示

自定义框架适用于沉浸式、全屏、独立应用程序,例如游戏。

指引

窗框

  • 使用标准窗口框架。

    • 例外: 若要提供沉浸式全屏,独立应用程序具有独特的感觉:
      • 请考虑隐藏 主窗口的窗口框架。

      • 请考虑对 辅助窗口使用自定义帧。

      • 如果自定义框架合适,请选择轻量级设计,不会引起过多的注意。

        不對:

        分心帧screen shot of distracting frame screen shot of distracting frame 的屏幕截图

        在此示例中,自定义框架会引起过多的注意。

  • 不要将控件添加到窗口框架。 将控件放在窗口中。

    不對:

    窗口框架screen shot of control in window frame screen shot of control in window frame 中控件的屏幕截图

    正确:

    工作区screen shot of control in client area screen shot of control in client area 中控件的屏幕截图

    在正确的示例中,控件位于工作区而不是窗口框架内。

全屏模式

  • 对于具有可选全屏模式的程序,若要启用全屏模式:

    • 在菜单栏或工具栏中具有模式全屏命令。 当用户单击命令时,以其所选状态显示该命令。

      带有全屏菜单项的窗口屏幕截图

      此示例显示全屏命令及其标准快捷键。

  • 将 F11 用于全屏快捷键。

  • 如果常用工具栏和全屏模式,则还具有带有全屏工具提示的图形工具栏按钮。

    全屏和还原按钮的屏幕截图

    全屏工具栏按钮的示例。

  • 若要从全屏模式恢复,请执行以下作:

    • 在菜单栏或工具栏中具有模式全屏命令。 当用户单击命令时,以清除状态显示该命令。
    • 将 F11 用于全屏快捷键。 如果尚未分配,Esc 也可用于此目的。

玻璃

标准窗口框架在 Windows 中自动使用玻璃,但也可以在触摸窗口框架的区域使用玻璃。

  • 请考虑在触摸窗口框架的小型区域中以战略方式使用玻璃,而无需文本。 这样做可以为程序提供更简单、更轻、更凝聚力的外观,使该区域似乎是框架的一部分。
  • 具有半透明边缘screen shot of window with translucent edge screen shot of window with translucent edge 的窗口的屏幕截图
  • 在此示例中,玻璃将用户的注意力集中在内容而不是控件上。
  • 在纯窗口背景更具吸引力或更易于使用的情况下,请勿使用玻璃。

正确:

具有四个图形和标签screen shot of window with four graphics and label screen shot of window with four graphics and label 的窗口屏幕截图

在此示例中,玻璃用于为 Alt+Tab 窗口提供轻量的外观。 Glass 适用于此窗口,因为它由图形和单个强文本标签组成。

不對:

具有 12 个图形screen shot of window with twelve graphics screen shot of window with twelve graphics 的窗口屏幕截图

在此不正确的示例中,使用玻璃会分散注意力。 纯窗口背景将是更好的选择。