Windowsアプリのシルエット

シルエットは、アプリの階層化、メニュー、ナビゲーション、コマンド実行、コンテンツ領域などの要素間のリレーションシップの一般的なパターンを示します。 この記事では、いくつかのWindowsインボックス アプリで使用される一般的なシルエットに焦点を当てます。

コンテンツとコントロールの一般的な配置については、「コンテンツの 基本」 も参照してください。

トップ ナビゲーション シルエット

NavigationView はアプリのコンテンツ レイヤーの上部で使用でき、以下のコンテンツとの接続を構築できます。 トップ ナビゲーションを使用する場合は、ユーザー ID/人物/画像コントロール の場所に注意してください。

コマンドと同じ行にナビゲーションを配置すると、以下のコンテンツの垂直方向の領域の量を最大化しようとすると便利です。

コンテンツの余白は異なる場合があります。 この例では、56 ピクセルの余白を使用し、大きなメディアを補完します。 より小さい、またはより詰まったコンテンツに対応するには、余白を小さくします。

Windows 11では、写真はトップナビゲーションシルエットを使用するアプリの良い例です。

メニュー バーのシルエット

MenuBar は、CommandBar と共に基本レイヤーの一部として使用できます。 これにより、コンテンツ領域の主要なタスク (この場合は構成と編集) により多くの焦点が当たります。

この例では、12epx の余白を使用してアプリのユーティリティを補完するテキスト エディターを示します。

Windows 11では、メモ帳はメニュー バーのシルエットを使用するアプリの良い例です。

左側のナビゲーション シルエット

NavigationView コントロールは、アプリの 基本レイヤーに自動的に置かれます。 これにより、コンテンツ領域の主要なタスクにより多くの焦点が当たります。 左側のナビゲーションを使用する場合は、ユーザー ID/人物/画像コントロール の場所に注意してください。

コンテンツの余白は異なる場合があります。 この例では、56epx の余白を使用して、エキスパンダー内のコンテンツの凝集度を補完します。 コンテンツのまとまりがそれほど重要でない場合は、小さめの余白を使用します。たとえば、他のデザイン要素がまとまりを補強している場合、コンテンツが展開コントロール内に入れ子になっていない場合、またはコンテンツを論理的にグループ化すべきでない場合です。

Windows 11では、設定は左ナビゲーション シルエットを使用するアプリの良い例です。

タブビューのシルエット

TabView は、アプリの基本レイヤーとタイトル バーコントロールと統合できます。 これにより、コンテンツ領域の主要なタスク (この場合はコード構成と編集) により多くの焦点が当たります。

この例では、12epx の余白を使用してアプリのユーティリティを補完するテキスト エディターを示します。

Windows 11では、ターミナルはタブ ビューのシルエットを使用するアプリの良い例です。