通过

窗框

  • 项目

注意

此设计指南是为 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 个图形的窗口的屏幕截图

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