クロススライドのガイドライン

クロススライドは、スワイプ ジェスチャによる選択や、スライド ジェスチャによるドラッグ (移動) 操作をサポートするために使います。

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください:  ユーザー操作: タッチ入力、その他

推奨と非推奨

  • クロススライドは、単一の方向にスクロールするリストやコレクションだけに使います。
  • クロススライドは、タップ操作が別の目的で使われる場合に、項目を選ぶために使います。
  • キューに項目を追加するためにクロススライドを使わないでください。

その他の使い方のガイダンス

選択とドラッグは、1 方向 (垂直または水平) にパンできるコンテンツ領域内でだけ行うことができます。これらの操作が機能するには、1 つのパン方向がロックされていて、ジェスチャがパン方向に対して垂直な方向に行われる必要があります。

ここでは、クロススライドを使ってオブジェクトを選び、ドラッグする方法を示します。左の図は、スワイプ ジェスチャで距離のしきい値を超える前に指を離してオブジェクトを解放することで、項目が選択された状態を示しています。右の図は、距離のしきい値を超えてスライド ジェスチャを行うことで、オブジェクトがドラッグされた状態を示しています。

選択とドラッグ アンド ドロップのプロセスを示す図。

クロススライド操作で使われるしきい値の距離を次の図に示します。

選択とドラッグ アンド ドロップのプロセスを示すスクリーン ショット。

パンの機能を維持するために、選択操作とドラッグ操作は、2.7 mm (ターゲット解像度で約 10 ピクセル) という小さいしきい値を超えないと有効にならないしくみになっています。 この小さいしきい値は、クロススライドとパンの区別に使われるほか、タップ ジェスチャをクロススライドやパンと区別する目的でも使われます。

この図は、ユーザーが UI の要素にタッチしたときに、指の位置がわずかに下に動いて しまった状態を示しています。 しきい値がなければ、最初に垂直方向に 移動しているため、この操作はクロススライドと解釈されてしまいます。このしきい値があるおかげで、水平方向のパンと正しく解釈されます。

選択かドラッグ アンド ドロップかを明確に区別するためのしきい値を示すスクリーン ショット。

次に、クロススライド機能をアプリに含める際に考慮する必要がある、いくつかのガイドラインを示します。

クロススライドは、単一の方向にスクロールするリストやコレクションだけに使います。詳しくは、「ListView コントロールの追加」をご覧ください。

  Web ブラウザーや電子ブック リーダーのように、コンテンツ領域を 2 方向にパンできる場合は、時間制限のある長押し操作を使って、画像やハイパーリンクなどのオブジェクトのコンテキスト メニューを呼び出すようにしてください。
水平方向にパンする 2 次元のリスト垂直方向にパンする 1 次元のリスト
水平方向にパンする 2 次元のリスト。 項目を選択または移動するには垂直方向にドラッグします。垂直方向にパンする 1 次元のリスト。項目を選択または移動するには水平方向にドラッグします。

 

選択

選択は、1 つ以上のオブジェクトを起動またはアクティブ化せずにマークする操作です。これは、マウスを 1 回クリックする操作、または Shift キーを押しながらクリックする操作 (オブジェクトが複数の場合) に相当します。

クロススライド選択を行うには、要素をタッチし、少しドラッグして放します。この選択方法を使えば、他のタッチ インターフェイスで必要になるような、専用の選択モードや時間制限のある長押し操作は必要ありません。また、アクティブ化のためのタップ操作と競合することもありません。

クロススライド選択には、距離のしきい値のほかにも領域のしきい値があり、次の図に示すように範囲が 90° に制限されます。この領域の外にドラッグすると、オブジェクトは選択されません。

選択のしきい値の領域を示す図。

クロススライド操作を補完する操作に、"自己説明" 操作とも呼ばれる時間制限のある長押し操作があります。この補助操作でアクティブ化されるアニメーションによって、オブジェクトに対して実行できる操作が示されます。 不明瞭解消 UI について詳しくは、「視覚的なフィードバックのガイドライン」をご覧ください。

次のスクリーン ショットは、自己説明のアニメーションの動作を示しています。

  1. 長押しして、自己説明操作のアニメーションを開始します。項目が選ばれているかどうかによって、アニメーションで説明される内容が変わります。選ばれていない場合はチェック マークが付き、選ばれている場合はチェック マークが付きません。

    選択されていない状態を示すスクリーン ショット。
  2. スワイプ ジェスチャ (上または下) を使って項目を選びます。

    選択のアニメーションを示すスクリーン ショット。
  3. この時点で、項目が選ばれています。スライド ジェスチャを使って選択動作を上書きし、項目を移動します。

    ドラッグ アンド ドロップのアニメーションを示すスクリーン ショット。

主な操作が選択だけであるアプリケーションでは、選択にシングル タップを使います。この場合、アクティブ化やナビゲーションのための標準のタップ操作と区別するために、クロススライドの自己説明のアニメーションが表示されます。

選択バスケット

選択バスケットは、アプリの主要なリストやコレクションから選択された項目を視覚的に区別して動的に表す機能です。これは選択された項目の追跡に役立つ機能で、次のようなアプリで使うと便利です。

  • 項目を複数の場所から選択できる。
  • 複数の項目を選択できる。
  • 選択リストによって操作やコマンドが異なる。

選択バスケットの内容は、操作やコマンドの実行後も保持されます。たとえば、ギャラリーから一連の写真を選択して各写真に色補正を適用し、それらの写真を何らかの方法で共有した場合、それらの項目は選択されたままになります。

アプリで選択バスケットを使わない場合は、操作やコマンドの実行後に現在の選択がクリアされます。たとえば、再生リストから曲を選択して評価した後、その選択はクリアされます。

また、選択バスケットを使わない場合は、リストやコレクションで別の項目がアクティブ化されたときにも現在の選択がクリアされます。たとえば、受信トレイのメッセージを選択すると、プレビュー ウィンドウが更新されます。その後、受信トレイで別のメッセージを選択すると、前のメッセージの選択が取り消され、プレビュー ウィンドウが更新されます。

キュー

キューと選択バスケットのリストは異なるものであるため、混同しないように注意してください。主な違いは次のとおりです。

  • 選択バスケットの項目のリストは、視覚的に表すことだけを目的としたものです。キューの項目は、特定の操作を想定してまとめられたものです。
  • 選択バスケットでは同じ項目は 1 回しか表示できませんが、キューでは複数回表示できます。
  • 選択バスケットの項目の順序は、選択の順序を表します。 キューの項目の順序は、機能に直接関連します。

これらの理由から、キューに項目を追加する目的でクロススライド選択操作を使わないでください。 キューに項目を追加するときは、代わりにドラッグ操作を使います。

ドラッグ

1 つまたは複数のオブジェクトを別の場所に移動するには、ドラッグを使います。

複数のオブジェクトを移動する必要がある場合は、ユーザーが複数の項目を選択してから、すべてを同時にドラッグできるようにします。

関連トピック

デザイナー向け
一般的なユーザー操作のガイドライン
パンのガイドライン
開発者向け (HTML)
クイック スタート: ポインター
クイック スタート: DOM ジェスチャおよび操作
クイック スタート: 静的ジェスチャ
クイック スタート: 操作ジェスチャ
GestureRecognizer.CrossSliding
開発者向け (XAML)
クイック スタート: タッチ入力
クイック スタート: ポインター入力の処理
GestureRecognizer.CrossSliding
開発者向け (DirectX と C++ を使った Windows ランタイム アプリ)
タッチ入力への反応 (DirectX と C++)
GestureRecognizer.CrossSliding
サンプル
入力: GestureRecognizer によるジェスチャと操作のサンプルに関するページ
HTML のスクロール、パン、ズームのサンプルに関するページ
入力: インスタンス化できるジェスチャのサンプルに関するページ (MSGesture を使用)
入力: XAML ユーザー入力イベントのサンプルに関するページ
XAML のスクロール、パン、ズームのサンプルに関するページ
DirectX タッチ入力のサンプル

 

 

表示:
© 2015 Microsoft