アプリ バーのガイドラインとチェック リスト (Windows ストア アプリ)
Windows ストア アプリのアプリ バーを扱うときは、次のガイドラインに従ってください。
ロードマップ: このトピックと他のトピックとの関連については、以下をご覧ください。
- C# または Visual Basic を使った Windows ストア アプリのためのロードマップ
- C++ を使った Windows ストア アプリのためのロードマップ
- 「アプリの機能の概要」シリーズの「Windows ストア アプリ UI の概要」
ユーザー エクスペリエンス ガイドライン
アプリ バーを使うと、ユーザーは必要なコマンドに簡単にアクセスできます。ユーザーが画面の下端をスワイプするとアプリ バーが表示され、そのコンテンツを操作するとアプリ バーが消えます。アプリ バーは、ユーザーのコンテキストに固有のコマンドまたはオプション (写真の選択や描画モードなど) を表示するためにも使えます。
ユーザーがワークフロー (製品の購入など) を実行するために必要なコマンドがある場合は、それらのコマンドをアプリ バーではなくキャンバスに配置します。
アプリ バーのコマンドのガイドライン
アプリ バーにコマンドを配置するときは、次のガイドラインに従ってください。
それぞれのコマンド グループをアプリ バーを挟んで両側に分けます。
明確に区別できるコマンドのセット (新しいコンテンツを作るためのセットと、ビューをフィルター処理するためのセットなど) がある場合は、アプリ バーの右側と左側に 1 セットずつ配置します。
コマンド セットが 3 つ以上ある場合は、区切り記号を使ってセットを区切ります。
アプリ全体でコマンドをいつも同じ場所に表示します。
各ページにはそのページに関連したコマンドのみを含める必要がありますが、ページ間で共通するコマンドは、ユーザーがコマンドの位置を予測できるように、できるだけ同じ場所の近くにコマンドを表示してください。
配置規則に従います。
- [New] (新規)、[Add] (追加)、[Create] (作成) ボタン (とアイコン) は右端に配置します。
- 表示切り替えのボタンはグループ化して左端に配置します。
- [Accept] (承諾)、[Yes] (はい)、[OK] (OK) コマンドは、[Reject] (拒否)、[No] (いいえ)、[Cancel] (キャンセル) コマンドの左に配置します。
項目を選択したときに状況に応じてアプリ バーにコマンドを表示し、そのアプリ バーを自動的に表示します。
ほとんどのユーザーは右利きのため、ユーザーがアプリ ページで項目を選択すると、その項目に関連するコマンドはすべてアプリ バーの左側に表示されます。これにより、ユーザーの腕や手でコマンドの表示が隠れることはありません。
状況依存のコマンドを表示する場合は、アプリ バーの解除モードを固定に設定します。
アプリ バーに状況依存のコマンドがある場合は、ユーザーがアプリを操作しているときにバーが自動的に非表示にならないように、その状況が続いている間はモードを固定に設定します。その状況が終わったら、固定モードを解除します。
たとえば、ユーザーが画像を選んだときに写真操作に関する状況依存のコマンドを表示しますが、画像の回転やトリミングなどの画像操作をユーザーが続けられるようにするとします。この場合、ユーザーが画像の選択を解除するか端をスワイプしてアプリ バーを閉じるまで、バーは表示されたままです。
コマンドの数が多い場合は、メニューとポップアップを使います。
すべてのコマンドを個別のボタンとしてアプリ バーに配置しきれない場合は、類似性のあるコマンドをグループ化して、ユーザーがアプリ バーのボタンからアクセスできるメニューに配置します。
.png "アプリ バー メニュー")
コマンドは論理的にグループ化します。たとえば、[返信]、[全員に返信]、[転送] を [応答] メニューに配置します。
関連性のない雑多なコマンドのために、[その他]、[詳細設定] などのメニューを作成しません。このような種類の一般的なコマンドは、アプリがわかりにくいという印象を与えがちであり、これらのメニューは一部のユーザーしか使いません。収まりきらないコマンドがあり、論理的なグループ化もできない場合は、アプリの簡略化を検討してください。
スナップおよび縦向きビュー用のアプリ バーを設計します。
アプリ バー コマンドがスナップ ビューと縦向きビューに正しく表示されることを確認します。
詳しくは、「さまざまなビューでアプリ バーを使う方法」をご覧ください。
水平スクロール用の設計をします。
アプリ ページの下部に水平スクロール領域があるアプリでは、アプリ バーが固定モードで表示されている場合にスクロール領域の高さを縮小します。そうしないと、アプリ バーでスクロール バーが隠れるため、ユーザーは、引き続きスクロールできるようにアプリ バーを消さなければならない場合があります。アプリ バーの上端に対して、スクロール バー フラッシュの下端の位置を維持するよう試みてください。
コマンド、メニュー、ポップアップには、既定のスタイルを使います。
ユーザーはボタンの配置とサイズに慣れているため、アプリ バーをカスタマイズする場合は、背景の色、アイコン、ラベルをカスタマイズし、ボタンのサイズや余白は変更しないことをお勧めします。既定のレイアウトはタッチに対応し、サポートされているすべての画面幅に 10 個のコマンドが収まるように設計されています。レイアウトを変更すると、うまく動作しなくなる場合があります。
詳しくは、「クイック スタート: アプリ バー ボタンのスタイル」をご覧ください。
下部のアプリ バーはコマンドに、ナビゲーション バーは ナビゲーション用に使います。
通常、下部のアプリ バーは、現在のページに対して実行するコマンドに使います。ナビゲーション バーは、 ユーザーを別のページに移動させるナビゲーション要素に使います。
コマンドに組み込みのアイコンを使います。
詳しくは、「クイック スタート: アプリ バー ボタンのスタイル」をご覧ください。
重要なコマンドはアプリ バーには配置しません。
アプリに磨きをかけるための主なコマンドは、アプリ バーに配置しないでください。たとえば、カメラ アプリでは、アプリ バーではなくアプリ ページに "画像の撮影" コマンドを配置します。写真を撮るためにアプリ ページにボタンを追加するか、ユーザーにプレビューをタップさせることができます。
ログイン、ログアウトなどのアカウント管理コマンドは、アプリ バーには配置しません。
ログイン、ログアウト、アカウント設定、アカウント作成などのすべてのアカウント管理コマンドは、設定ポップアップに配置する必要があります。ユーザーが特定のページにログインすることが重要な場合は、アプリ ページにログイン ボタンを用意します。
テキスト用のクリップボード コマンドは、アプリ バーには配置しません。
[切り取り]、[コピー]、[貼り付け] コマンドは、アプリ バーではなく、アプリ ページのショートカット メニューに配置します。
アプリの設定はアプリ バーに配置しません。
既定値や基本設定などのすべてのアプリ設定コマンドは、設定ポップアップに配置する必要があります。また、設定ポップアップは、履歴を消去するためのコマンドなど、あまり使われない管理コマンドを配置するのに最適な場所です。
マウスの右ボタンの処理
アプリの UI を他の Windows ストア アプリと同じようにするには、ユーザーがマウスの右ボタンをクリックしたときに、用意したアプリ バーがトリガーされます。しかし、アプリでマウスの右ボタンを別の目的 (ゲームでのサブ武器、3-D ビューアーでの仮想トラックボールなど) で使う場合、アプリはアプリ バーを起動するイベントを無視できます。それでも、アプリ バーは Windows ストア アプリのエクスペリエンスの重要な部分なので、ゲームのコントロール モデル内でのアプリ バーや同様の状況依存のメニューの役割について検討する必要があります。
アプリのコントロールを設計するときは、次のガイドラインに従ってください。
- アプリの重要な機能のためにマウスの右ボタンを使う必要がある場合は、右ボタンでその機能を直接呼び出します。コンテキストに沿った UI やアプリ バーは、ワークフローにとって重要でなければ、アクティブ化しません。
- 境界線メニューのような、アプリ固有のコンテキストに沿った右クリック アクションを必要としない Microsoft DirectX サーフェスの領域がある場合は、ユーザーがその領域を右クリックしたら、アプリ バーを表示します。
- キャンバス全体でマウスの右ボタンのサポートが必要な場合は、ユーザーが上端の水平方向のピクセル行か、下端の水平方向のピクセル行を右クリックしたときに、アプリ バーを表示するようにします。
- これらのソリューションが不十分な場合は、DirectX サーフェスにカスタム コントロールを配置して、マウス ジェスチャでアプリ バーを開けるようにします。
- MouseMoved などの MouseDevice クラス イベントを使って、独自のショートカット メニューの動作を実装します。
- タッチ操作での長押し (押した状態のままにすること) は、マウスの右ボタンのクリックに相当します。両方のイベントを同じように処理します。このイベントを処理し、カスタム動作を定義するには、Holding イベントに登録します。長押しを有効にするには、GestureSettings プロパティを、タッチ入力、ペン入力、スタイラス入力での長押しをサポートするように設定します。マウスでの長押し動作を有効にするには、GestureSettings プロパティの HoldWithMouse を設定します。
- Windows キーを押しながら Z キーを押す操作の代替動作をアプリに提供しないでください。アプリ バーや同様のショートカット メニューを開発しておいて、ユーザーが Windows キーを押しながら Z キーを押した場合は、それを表示します。これらの 2 つのキーが押されたかどうかを判断するために、KeyDown と AcceleratorKeyActivated イベントに登録します。