コマンド パターン
アプリ キャンバス、ポップアップ、ダイアログ、アプリ バーなど、ストア アプリの数種類のサーフェスにコマンドとコントロールを配置することができます。適切なタイミングで正しいサーフェスを選ぶことは、簡単に使用できるアプリとなるか、負担の多いアプリとなるかの分かれ目になります。
ストア アプリでは、コマンドはユーザーが操作するために使うことができる対話型の UI 要素です。コマンドは、ナビゲーション要素とは異なります。ナビゲーション要素ではユーザーは別のページに移動しますが、コマンドでは現在のページで操作を実行できます。ナビゲーション要素によってアプリを使うことができるようになり、コマンドによってアプリが便利になります。
アプリのさまざまなコマンド サーフェスについて詳しくは、「UI のレイアウト」をご覧ください。
コマンドの種類
フィルター
フィルター コマンドは、一定の基準に基づいて、データ セット内のコンテンツを削除または非表示にします。たとえば、ユーザーは、Windows ストアで、"アドベンチャー" に分類されるゲームのみを表示できます。
ピボット
ピボット コマンドは、ピボットに基づいて、データ セット内のコンテンツを再編成し、データの異なるビューを表示します。たとえば、ユーザーは楽曲をアルバム別、アーティスト別、曲名別に表示できます。
並べ替え
並べ替えコマンドは、データ セット内のコンテンツの表示順序を変更します。たとえば、トラベル アプリでユーザーは旅行先を人気順で表示できます。
表示
表示コマンドは、コンテンツを表示するスタイルや方法を変更します。たとえば、ホテルを検索するアプリで、ユーザーは一覧ではなく、地図上にホテルを表示できます。
ヒント
ユーザーに役立つようであれば、キャンバスにヒント コマンドを配置できます。たとえば、Windows 8.1 で動作するメール アプリには、追加のオプションを示す"省略記号"のコマンドがあります。Windows でアプリ バーを表示していた従来の方法に加えて、このコマンドをクリックしても、アプリ バーが表示されます。
アプリのスタイルに合ったヒントを設計できます。このニュース アプリでは、同じアプリ バー ヒントに加えて、メニュー選択肢のページを表示する旗のメニュー アイコンも使っています。
その他
現在のビューでユーザーが操作するために使うことができる対話型の UI 要素は、すべてコマンドです。例をいくつか紹介します。
コマンドの配置
キャンバス上
あるコマンド (またはコマンド メニュー) が重要で、ユーザーが中心的なシナリオを完了するうえで常に必要な場合は、そのコマンドをキャンバスに配置できます。たとえば、Windows 8.1 のメール アプリでは、メールを選ぶと、返信、新規作成、削除などの中心的なコマンドがキャンバスに表示されます。
下部のアプリ バー
キャンバスがコマンドで乱雑になることや、コマンドによってアプリのコンテンツを利用しづらくなることを回避する必要がある場合があります。下部のアプリ バーを使うと、コマンドをオンデマンドでユーザーに表示することができます。下部のアプリ バーには、ユーザーのコンテキスト (通常は現在のページや現在の選択) に関連するコマンドが表示されます。
下部のアプリ バーは、単一選択のコマンド実行でも複数選択のコマンド実行でも正しく動作します。ユーザーがオブジェクトを選ぶとアプリ バーが表示されるように、アプリのプログラミングを行うことができます。
コマンドの配置のガイドライン
さまざまな方法でアプリ バー内にコマンドを配置できますが、次の点を考慮する必要があります。
- 予測可能性 できる限り、アプリのすべてのビューを通じて、一貫した対話的操作とコマンド配置を使います。
- 人間工学 コマンドの配置によって操作がどのようにすばやく簡単にできるようになるかを考慮します。
- デザイン性 アプリ バーが複雑にならないように、コマンドの数を制限します。すぐに理解でき、機能を推測できるようなアイコンを選びます。テキスト ラベルを短くします。
次のコマンドの配置のガイドラインに従うことをお勧めします。
永続的なコマンドまたは既定のコマンドをアプリ バーの右側に配置します。コマンドの数が少ない場合、アプリ バーは右側だけにコマンドがある状態になります。 この例では、参照コマンド用に、表示コマンド セットとフィルター/並べ替えセットが永続的になっています。 |
端を使います。コマンドの数が多い場合、それぞれのコマンド セットを左側と右側に分けて、アプリ バーのバランスを取り、人間工学的にコマンドを利用しやすくします。 この例では、表示コマンド セットを左側に移動し、フィルター/並べ替えセットは右側に残すことにします。 地図ビューがアクティブな場合、地図ビュー コマンドが表示コマンド セットの右側に表示されます。 |
無効なコマンドを表示または非表示にします。特定の状況に無関係なコマンドがあります。それらのコマンドを表示する場合は、永続的なコマンドの順序を邪魔しないようにします。 この例では、地図ビューがアクティブで、地図ビュー コマンドが表示コマンド セットの右側に表示されます。 |
選択コマンドを挿入します。ユーザーが選択を行った結果として表示されるコマンドは、左端に移動され、そこにあったコマンドはスライドします。これによって、選択コマンドがより目立ち、アクセスしやすくなります。 この例では、表示コマンド セットが右側にスライドして、選択コマンド セットのための場所を空けます。 |
一般的なコマンドの配置
いくつかのコマンドは、多くのアプリで共通して表示されます。一般的なコマンドをアプリ バーのどこに配置するかを決めるときには、一貫性を保ち、確実性を高めるために、次のガイドラインに従うことをお勧めします。
選択コマンドは左端に配置します。 それが選択時に表示される状況依存のコマンドであるか、 選択方法に影響するコマンドであるかは関係ありません。 この例では、ユーザーが何かを選択する前に、[すべて選択] コマンドが左側に表示されます。ユーザーが何かを選択すると、他の選択コマンドが左側に表示されます。 |
新規項目コマンドをバーの右端に配置します。新規項目コマンドは、追加、作成、構成のコマンドである場合や、新しいエンティティを作る任意のコマンドである場合もあります。新規項目コマンドは、親指で簡単にアクセスできる必要があります。 この例では、[新しいレビュー] コマンドで、ユーザーはレストランの新しいレビューを作成できます。 [新しいレビュー] に関連する他のコマンドは、左隣に配置されます。 + 記号は "新規" コマンドを表す場合だけに使い、アプリ バーの他の場所には表示されないようにします。 |
削除コマンドを新規項目コマンドの左側に配置します。メール アプリやカメラ アプリのように、特定のアプリケーションの外部で永続する個々のエンティティをアプリが管理する場合は、削除/新規を使います。 削除/新規は、常にこの順序で表示します。 |
除去コマンドを追加コマンドの左側に配置します。To Do リスト、天気予報アプリの都市のリスト、ブックマークが付けられたレストランのリストなど、アプリがリストを管理する場合は、除去/追加を使います。除去/追加は、常にこの順序で表示します。 |
消去コマンドを新規項目コマンドの左側に配置します。すべての可能な項目に対して破壊的な操作を行う場合は、消去を使います。"選択項目の消去" のように、何がコマンドの操作対象になるかを明確に示すコマンド ラベルを使います。 |
下部のアプリ バーへのコマンド配置例については、Windows ストアのアプリ ギャラリーに関するページをご覧ください。
コマンドをメニューにグループ化する
複数のコマンドをコマンド メニューにグループ化することで効率性が高まる場合があります。 メニューを使うと、より狭い場所により多くのオプションを表示できます。メニューには対話的なコントロールを含めることができます。
この例では、並べ替えコマンドに、ユーザーが並べ替えオプションを簡単に選べるシンプルなメニューを表示します。フィルター コマンドでは、より複雑な条件で項目をフィルター処理できる一連のコントロールをメニューに表示します。
ショートカット メニュー
多くの場合、ショートカット メニューにはクリップボードの操作 (切り取り、コピー、貼り付けなど) が含まれます。また、ショートカット メニューには、選ぶことができないコンテンツ (Web ページ上の画像など) に適用するコマンドを含めることもできます。 アプリでは、システムに用意されているテキストとハイパーリンクに関する既定のショートカット メニューを使うことができます。テキストの場合、既定のショートカット メニューにはクリップボード コマンドが表示されます。ハイパーリンクの場合、既定のショートカット メニューには、リンクをコピーするコマンドとリンクを開くコマンドが表示されます。
ユーザーは、タッチ デバイスでコンテンツを長押しするか、マウスでコンテンツを右クリックして、ショートカット メニューを呼び出します。
注
チャームの活用
Windows ストア アプリを設計する場合は、検索、共有、デバイス、設定というチャームの 4 つの非常に便利なコマンドを使います。ユーザーは、画面の右端からスワイプするか、画面の上端または下端の右隅に向かってマウス カーソルをポイントして、チャームを起動します。
検索: ユーザーはアプリのコンテンツを、システムのあらゆる場所から (別のアプリからも) すばやく検索できます。 | |
共有: ユーザーがアプリのコンテンツを他のユーザーやアプリと共有できるだけでなく、共有コンテンツを受け取ることもできます。 | |
スタート: スタート チャームは、スタート画面を表示します。アプリがこのチャームを操作することはありません。動作は自動的で、常に同じです。 | |
デバイス: オーディオ、ビデオ、またはイメージをアプリからホーム ネットワーク上の別のデバイスにストリーミングして楽しむことができます。 | |
設定: すべての設定を 1 つの場所にまとめて、ユーザーが使い慣れた一般的な方法でアプリを構成できます。 |
アプリのキャンバスまたはアプリ バーでアプリ コントラクト機能が重複しないようにします。