窓枠

ほとんどのプログラムでは、標準のウィンドウ フレームを使用する必要があります。 イマーシブ アプリケーションでは、ウィンドウ フレームを非表示にする全画面表示モードを使用できます。 よりシンプルで軽く、まとまりのある外観を実現するために、戦略的にガラスを使用することを検討してください。

ウィンドウ フレームを使用すると、ユーザーはウィンドウを操作し、タイトルとアイコンを表示してその内容を識別できます。

一般的なウィンドウ フレーム。

注: ウィンドウ管理 と ブランド化の に関連する ガイドラインは、別の記事で示されています。

設計の概念

ガラス窓枠

ガラス窓フレームは、魅力的で軽量であることを目指して、Microsoft Windowsの美学の印象的な新しい側面です。 これらの半透明なフレームは、ウィンドウを囲むインターフェイスではなく、コンテンツや機能に集中するのに役立つ、開いている、あまり侵入の少ない外観を与えます。

電卓スクリーン ショット

ガラス窓枠。

ウィンドウ フレームにタッチするウィンドウ内の小さな領域で、戦略的にガラスを使用できます。 このような領域は、技術的にはウィンドウのクライアント領域の一部であるにもかかわらず、ウィンドウ フレームの一部のように見えます。

半透明のエッジスクリーン ショット

この例では、ガラスをクライアント領域で使用して、フレームの一部のように見えるようにします。

非表示のフレーム

最適なウィンドウ フレームがフレームでない場合があります。 これは多くの場合、メディア プレーヤー、ゲーム、キオスク アプリケーションなど、他のプログラムと組み合わせて使用されないイマーシブ 全画面表示 アプリケーションの プライマリ ウィンドウ の場合です。

多くの場合、コンテンツ ビューアーは、コンテンツを全画面表示にするオプションを利用できます。 たとえば、Windows Internet Explorer、Windows Live フォト ギャラリー、Windows Movie Maker HD、Microsoft PowerPoint、Microsoft Word などがあります。

全画面表示

この例では、Windows Media Player のコンテンツを全画面表示で表示できます。

カスタム フレーム

ほとんどの Windows アプリケーションでは、標準のウィンドウ フレームを使用する必要があります。 ただし、ゲームやキオスク アプリケーションなどのイマーシブな全画面表示のスタンドアロン アプリケーションの場合は、全画面表示ではないウィンドウにカスタム フレームを使用することが適切な場合があります。 カスタムフレームを使用する動機は、ブランド化 だけでなく、全体的なエクスペリエンスユニークな感覚を与える必要があります。

カスタム フレームは、ゲームなどのイマーシブな全画面表示のスタンドアロン アプリケーションに適しています。

ガイドライン

窓枠

• 標準のウィンドウ フレームを使用します。

  • 例外: イマーシブな全画面表示を提供するには、スタンドアロン アプリケーションに固有の感覚を与えます。

    • プライマリ ウィンドウのウィンドウ フレームを非表示にすることを検討してください。

    • セカンダリ ウィンドウ にカスタム フレーム使用することを検討してください。

    • カスタム フレームが適切な場合は、軽量で、それ自体にあまり注意を引かないデザインを選択します。

      不正解:

      気が散るフレームスクリーン ショット

      この例では、カスタム フレームがそれ自体に注意を引きすぎます。

• ウィンドウ フレームにコントロールを追加しないでください。 代わりに、ウィンドウ内にコントロールを配置します。

  不正解:

  ウィンドウ フレームスクリーン ショット

  正解:

  クライアント領域スクリーン ショット

  正しい例では、コントロールはウィンドウ フレームではなくクライアント領域内にあります。

全画面表示モード

• オプションの全画面表示モードを持つプログラムの場合は、全画面表示モードを有効にします。

  • メニュー バーまたはツール バーにモーダル全画面表示コマンドを表示します。 ユーザーがコマンドをクリックすると、選択した状態でコマンドが表示されます。

    全画面表示メニュー項目がする

    この例では、全画面表示コマンドと標準のショートカット キーを示します。

• 全画面表示のショートカット キーには F11 キーを使用します。

• ツールバーがあり、全画面表示モードが一般的に使用されている場合は、全画面表示ツール ヒントを含むグラフィック ツール バー ボタンもあります。

  全画面表示のスクリーン ショットを

  全画面表示のツール バー ボタンの例。

• 全画面表示モードから元に戻すには:

  • メニュー バーまたはツール バーにモーダル全画面表示コマンドを表示します。 ユーザーがコマンドをクリックすると、そのコマンドがクリア状態で表示されます。
  • 全画面表示のショートカット キーには F11 キーを使用します。 まだ割り当てされていない場合は、Esc もこの目的に使用できます。

グラス

標準のウィンドウ フレームは Windows では自動的にガラスを使用しますが、ウィンドウ フレームに触れる領域でもガラスを使用できます。

• テキストなしでウィンドウフレームに触れる小さな領域で戦略的にガラスを使用することを検討してください。 そうすることで、領域がフレームの一部のように見えるようにすることで、プログラムをよりシンプルで軽く、まとまりのある外観にすることができます。
• 半透明のエッジスクリーン ショット
• この例では、コントロールではなくコンテンツにユーザーの注意を向けます。
• プレーンウィンドウの背景がより魅力的で使いやすい状況では、ガラスを使用しないでください。

正解:

4 つのグラフィックスとラベルのスクリーン ショット

この例では、ガラスを使用して、Alt + Tab ウィンドウに軽量な外観を与えます。 ガラスはグラフィックスと 1 つの強力なテキスト ラベルで構成されているため、このウィンドウで動作します。

不正解:

12 個のグラフィックススクリーン ショット

この間違った例では、ガラスの使用は気が散っています。 プレーンウィンドウの背景は、より良い選択肢です。