共用方式為


窗框

注意

此設計指南已針對 Windows 7 建立,但尚未更新較新版本的 Windows。 大部分指引仍適用原則,但簡報和範例不會反映我們目前的設計指導方針

大部分的程式都應該使用標準視窗框架。 沈浸式應用程式可以有隱藏視窗框架的全螢幕模式。 請考慮策略性地使用玻璃,以達到更簡單、更輕和更具凝聚力的外觀。

透過視窗框架,使用者可以操作視窗並檢視其標題和圖示,以識別內容。

記事本視窗周圍視窗框架的螢幕快照

典型的視窗框架。

注意:視窗管理和商標相關的指導方針會在個別的文章中呈現。

設計概念

玻璃窗戶框

玻璃視窗框架是 Microsoft Windows 美學的令人耳目一新的元素,它的設計目標是既吸引人又輕量。 這些半透明框架提供窗口開放、較少侵入性的外觀,協助使用者專注於內容和功能,而不是圍繞它周圍的介面。

計算機周圍的玻璃框架螢幕快照

玻璃窗框架。

您可以在靠近窗框的小區域內,策略性地使用玻璃。 這類區域看起來像是視窗框架的一部分,儘管從技術上講,它們其實是視窗工作區的一部分。

具有半透明邊緣的視窗螢幕快照

在此範例中,玻璃被用於客戶區,使其看起來像框架的一部分。

隱藏框架

有時候最好的窗框是沒有框架。 這通常是沈浸式全螢幕應用程式的主要視窗,這些應用程式不會與其他程式搭配使用,例如媒體播放機、遊戲和 kiosk 應用程式。

內容檢視者通常受益於可以選擇全螢幕顯示內容的功能。 範例包括 Windows Internet Explorer、Windows Live Photo Gallery、Windows Movie Maker HD、Microsoft PowerPoint 和 Microsoft Word。

全螢幕檢視中媒體播放器的螢幕快照

在此範例中,Windows Media Player 可以全屏幕顯示其內容。

自訂框架

大部分的 Windows 應用程式都應該使用標準視窗框架。 不過,對於沉浸式、全螢幕、獨立應用程式,例如遊戲和 kiosk 應用程式,可能適合針對未顯示全螢幕的任何視窗使用自定義畫面。 使用自定義框架的動機應該是讓整體體驗具有獨特的風格,而不僅僅是商標。

拼字圖片謎題和框架圖例的圖例

自定義畫面適用於沉浸式、全螢幕、獨立應用程式,例如遊戲。

指引

窗框

  • 使用標準視窗框架。

    • 例外: 若要為沉浸式全螢幕提供獨立應用程式的獨特風格:
      • 請考慮隱藏 主要視窗的視窗框架。

      • 請考慮使用 次要視窗的自訂框架。

      • 如果自定義框架適合,請選擇輕量型的設計,而且不會引起太多注意。

        不對:

        螢幕快照分散注意力的框架。

        在此範例中,特製的框架過於引人注目。

  • 請勿將控制項新增至視窗框架。 請改為將控件放在視窗中。

    不對:

    視窗框架中控制項的螢幕截圖

    正確:

    工作區中控件的螢幕快照

    在正確的範例中,控件位於工作區內,而不是視窗框架。

全螢幕模式

  • 對於具有選擇性全螢幕模式的程式,若要啟用全螢幕模式:

    • 在功能表列或工具列中有一個模態全螢幕指令。 當使用者按下命令時,以選取的狀態顯示命令。

      具有全螢幕功能表項的視窗螢幕快照

      此範例顯示全螢幕命令及其標準快速鍵。

  • 使用 F11 作為全螢幕的快捷鍵。

  • 如果有工具列且全螢幕模式為常用,應設有帶有「全螢幕」工具提示的圖形工具列按鈕。

    全螢幕和還原按鈕的螢幕快照

    全螢幕工具列按鈕的範例。

  • 若要從全螢幕模式中返回:

    • 在功能表列或工具列中有一個模態全螢幕指令。 當使用者按下命令時,以已清除的狀態顯示命令。
    • 使用 F11 作為全螢幕的快捷鍵。 如果尚未指派,Esc 也可用於此用途。

玻璃

標準視窗框架會在 Windows 中自動使用玻璃,但您也可以在觸及視窗框架的區域使用玻璃。

  • 請考慮在靠近窗框的局部區域策略性地使用玻璃,但避開有文字的地方。 這樣做可以通過讓區域看起來像是框架的一部分,來賦予程式更簡單、更輕、更連貫的外觀。
  • 具有半透明邊緣的視窗螢幕快照
  • 在此範例中,玻璃會將使用者的注意力放在內容上,而不是控件。
  • 請勿在純視窗背景更具吸引力或更容易使用的情況下使用玻璃。

正確:

四個圖形和標籤的視窗螢幕快照

在此範例中,玻璃用來讓 Alt+Tab 視窗呈現輕巧的外觀。 玻璃適用於此視窗,因為它是由圖形和單一強式文字標籤所組成。

不對:

窗戶的螢幕快照,包含十二個圖形

在這個不正確的範例中,使用玻璃會分散注意力。 純視窗背景會是更好的選擇。