コマンド バーのガイドライン

コマンド バーを使うと、ユーザーはアクションに簡単にアクセスできます。コマンド バーは、ユーザーのコンテキストに固有のコマンドやオプション (写真の選択や描画モードなど) を表示するために使うことができます。また、アプリのページやセクション間のナビゲーションにも使うことができます。コマンド バーは、ナビゲーション パターンと一緒に使うことができます。

アイコンを含むコマンド バーの例

コマンド バーは、表示したままにするコマンドまたはナビゲーション項目を配置するためのアクション領域と、コマンド バーに省略記号 [•••] として表示される [その他] 領域の 2 つのコンポーネントで構成されます。[その他] 領域では、使う頻度が高くないコマンドやナビゲーション項目のドロップダウン リスト表示メニューが開きます。[•••] ボタンを選ぶと、メニューが開き、アクション領域の各項目のテキスト ラベルが表示されます。[その他] に項目がない場合、ドロップダウンは開きませんが、アクション領域にある項目のテキスト ラベルはその場合も表示されます。

コマンド バーと、引き出し線で示された 2 つのメイン領域の例

コマンド バーの配置

コマンド バーは画面の上部または画面の下部、画面の上部と下部の両方、またはインラインに配置できます。

画面の上部、下部、または上部と下部にアプリ バーを配置する例

  • モバイル デバイスでは、コマンド バーをアプリに 1 つだけ配置する場合、手に届きやすいように画面の下部に配置します。アプリの下部にタブがある場合、UI が下部に集中しすぎないように上部にコマンド バーを配置することを検討してください。
  • 大きな画面では、コマンド バーを 1 つだけ配置する場合、画面の上部に配置することをお勧めします。
  • ユーザーがコンテキスト依存アクションに使用できるように、コマンド バーをインラインで配置することもできます。

コマンド バーは、単一ビュー画面 (左側の例) と複数ビュー画面 (右側の例) の次の画面領域に配置できます。インラインのコマンド バーは、操作領域の任意の場所に配置できます。

アプリ バーを配置できる画面領域の例

アクションの配置

コマンド バーに配置するアクションには、見やすさに基づいて優先順位を付けます。

  • バーに常に表示する最も重要なコマンドは、アクション領域の最初の数スロットに配置します。最小画面 (幅 320 epx) では、他の画面 UI に応じて 2 ~ 4 項目がコマンド バーのアクション領域に収まります。
  • 重要度の低いコマンドは、バーのアクション領域の後方に配置するか、[その他] 領域の最初の数スロット内に配置します。これらのコマンドは、バーに十分な画面領域がある場合は表示されますが、十分な領域がない場合は [その他] 領域のドロップダウン メニューに収まります。
  • 最も重要度の低いコマンドは、[詳細] 領域内に配置します。これらのコマンドは、常にドロップダウン メニューに表示されます。

アクション領域の項目は、アイコンまたはボタンのいずれかを使って視覚化できます。アイコンのみを使う場合は、テキスト ラベルを含めます。テキスト ラベルは、[•••] が選択されたときにアイコンの下に表示されます。

複数のページで一貫して表示されるコマンドがある場合は、一貫した場所にそのコマンドを配置することをお勧めします。また、[Accept] (承諾)、[Yes] (はい)、[OK] (OK) コマンドは、[Reject] (拒否)、[No] (いいえ)、[Cancel] (キャンセル) コマンドの左に配置することをお勧めします。一貫性があることで、ユーザーは安心してシステム内を移動でき、アプリのナビゲーションに関する知識をさまざまなアプリで利用することができます。

すべてのアクションを [その他] ドロップダウン メニュー内に配置して、コマンド バーに [•••] だけが表示されるようにすることができます。ただし、すべてのアクションを非表示にすると、ユーザーが混乱する可能性があることに注意してください。

コマンド バーのポップアップとヒント

コマンドは論理的にグループ化することを検討します。たとえば、[返信]、[全員に返信]、[転送] を [応答] メニューに配置します。

ポップアップとメニューの画像

[•••] を選択しない限り、テキスト ラベルはコマンド バーの操作に対して非表示になるため、アクション アイコンのヒントを使用することを検討します。

[その他] 領域

コールアウトを含んだアプリ バーの構造の例

  • [その他] のアフォーダンス [•••] は、メニューの可視エントリ ポイントです。ツール バー右端のプライマリ アクションの隣に配置されます。
  • プライマリ操作領域の各操作は、アイコンで表されます。オーバーフロー メニューを選ぶと、プライマリ操作領域の各操作のテキスト ラベルが表示されます。
  • オーバーフロー メニューの領域は、使用頻度が少ない操作に割り当てられます。
  • 操作は、ブレークポイントを境としてプライマリ操作領域とオーバーフロー メニューの間で移動させることができます。画面またはアプリのウィンドウ サイズに関係なく、常にアクションをプライマリ操作領域内に維持するように指定することもできます。
  • 使用頻度の低いアクションは、より大きな画面でアプリ バーを展開したときに、オーバーフロー メニュー内に残しておくことができます。

応答性のガイダンス

  • アプリ バー内のアクションと同じ数のアクションが、縦向きと横向きの両方の向きで表示される必要があります。これにより、ユーザーが認識する負荷が軽減されます。利用可能なアクションの数は、縦向きでのデバイスの幅によって決まります。
  • ブレークポイントをターゲットにすると、メニューのサイズやアプリ ウィンドウのサイズの変化に応じてアクションをメニューの内外に移動できます。

関連トピック

コマンド設計の基本

 

 

表示:
© 2015 Microsoft