窗框

注意

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

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

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

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

典型的窗口框架。

注意:单独的文章中介绍了与窗口管理和品牌打造相关的指南。

设计概念

玻璃窗框

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

计算器周围的玻璃框的屏幕截图

玻璃窗框。

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

具有半透明边缘的窗口的屏幕截图

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

隐藏的帧

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

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

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

在此示例中,Windows 媒体播放器可以全屏显示其内容。

自定义框架

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

乱码图片拼图和框架的插图

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

准则

窗框

  • 使用标准窗口框架。

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

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

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

        不正确:

        分散注意力的帧的屏幕截图

        在此示例中,自定义框架将过多的注意力放在自身上。

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

    不正确:

    窗口框架中控件的屏幕截图

    正确:

    工作区中控件的屏幕截图

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

全屏模式

  • 对于具有可选全屏模式的程序,若要启用全屏模式,请执行以下操作:

    • 在菜单栏或工具栏中使用模式全屏命令。 当用户单击命令时,显示处于其选定状态的命令。

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

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

  • 将 F11 用于全屏快捷键。

  • 如果存在工具栏并且通常使用全屏模式,则还具有带有全屏工具提示的图形工具栏按钮。

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

    全屏工具栏按钮的示例。

  • 若要从全屏模式还原回来,请执行以下操作:

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

玻璃

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

  • 请考虑在接触没有文本的窗口框架的小区域中战略性地使用玻璃。 这样做可以通过使区域显示为框架的一部分,使程序具有更简单、更轻、更具凝聚力的外观。
  • 具有半透明边缘的窗口的屏幕截图
  • 在此示例中,玻璃将用户的注意力集中在内容上,而不是控件上。
  • 在普通窗口背景更具吸引力或更易于使用的情况下,请勿使用玻璃。

正确:

具有四个图形和标签的窗口的屏幕截图

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

不正确:

带有 12 个图形的窗口的屏幕截图

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