パンのガイドライン

  • [アーティクル]

パンとスクロールにより、ユーザーは単一ビュー内で移動し、ビューポートに収まらないビューのコンテンツを表示できます。 ビューの例として、コンピューターのフォルダー構造、ドキュメントのライブラリ、フォト アルバムなどがあります。

重要な API: Windows.UI.Input、Windows.UI.Xaml.Input

すべきこととやってはいけないこと

パン インジケーターとスクロール バー

  • アプリにコンテンツを読み込む前に、パン/スクロールが可能であることを確認します。

  • パン インジケーターとスクロール バーを表示して、位置とサイズがわかるようにします。カスタム ナビゲーション機能を提供する場合には、これらのコントロールを非表示にします。

    注: 標準のスクロール バーとは異なり、パン インジケーターは情報提供のみを目的としています。 入力デバイスには公開されず、一切操作できません。

     

単一軸パン (1 次元のオーバーフロー)

  • コンテンツ領域が 1 つのビューポート境界 (垂直方向または水平方向) を超えている場合は、単一軸のパンを使います。

    • 1 次元の項目の一覧の場合は、垂直方向のパンを使います。
    • 項目のグリッドの場合は、水平方向のパンを使います。

  • ユーザーのパン操作をスナップ位置以外の位置で停止できるようにする必要がある場合は、単一軸パンで強制スナップ位置を使わないでください。 強制スナップ位置を使うと、スナップ位置で必ず停止します。 代わりに、近接スナップ位置を使ってください。

フリーフォーム パン (2 次元のオーバーフロー)

  • コンテンツ領域が両方のビューポート境界 (垂直方向と水平方向) を超えている場合は、2 軸のパンを使います。

    • 複数の方向へ動かされる可能性がある、構造化されていないコンテンツの場合は、既定のレール動作を上書きしてフリーフォーム パンを使います。

  • フリーフォーム パンは通常、画像や地図内の移動に適しています。

ページ ビュー

  • コンテンツが個別の要素で構成されている場合、または 1 つの要素全体を表示する必要がある場合は、強制スナップ位置を使います。 書籍や雑誌のページ、項目の列、個々の画像がその例です。

    • スナップ位置はそれぞれの論理的な境界に置く必要があります。
    • 各要素のサイズや倍率を、ビューに収まるように調整する必要があります。

論理的な位置と主要位置

  • コンテンツ内にユーザーが停止する可能性が高い主要位置または論理的な位置がある場合は、近接スナップ位置を使います。 たとえば、セクション ヘッダーなどです。

  • 最大サイズと最小サイズの制限または範囲が定義されている場合には、視覚的なフィードバックを使って、ユーザーがこの制限に達したことや超過したことを示します。

埋め込まれたコンテンツまたは入れ子になったコンテンツの連結

  • テキストとグリッド ベースのコンテンツに対して単一軸パン (通常は水平方向) と列レイアウトを使います。 この場合、通常、コンテンツは列から列へと自然に折り返して流れるので、Windows アプリ全体で一貫性があり見つけやすいユーザー エクスペリエンスを維持できます。

  • テキストまたは項目の一覧を表示する目的で、埋め込まれたパン対応領域を使わないでください。 領域内で入力の接触が検出されたときしかパン インジケーターとスクロール バーが表示されず、直感的で見つけやすいユーザー エクスペリエンスが得られません。

  • ここで示すように、2 つのパン対応領域がどちらも同じ方向にパンする場合は、パン対応領域を別のパン対応領域内に連結 (配置) しないでください。 この場合に連結すると、子領域の境界に到達したときに親領域が意図せずパンされる可能性があります。 パンの軸は相互に対して垂直になるようにしてください。

    image demonstrating an embedded pannable area that scrolls in the same direction as its container.

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

タッチでのパン (1 本または複数の指でのスワイプまたはスライド ジェスチャ) は、マウスでのスクロールと似ています。 パンはスクロール バーのクリックよりも、マウス ホイールの回転やスクロール ボックスのスライドに最も近い操作です。 API で区別されているか、一部のデバイス固有の Windows UI によって区別が必要とされていない限り、両方の操作を単にパンと呼びます。

Windows 10 Fall Creators Update - 動作の変更 Windows アプリでのアクティブなペンでは、テキストの選択ではなく、(タッチ、タッチパッド、パッシブなペンと同様に) 既定でスクロールまたはパンが実行されるようになりました。 アプリが以前の動作に依存している場合は、ペン スクロールを上書きして、以前の動作に戻すことができます。 詳細については、Scroll​Viewer クラスの API リファレンス トピックを参照してください。

入力デバイスに応じて、ユーザーは次のいずれかを使って、パン対応領域内でパンを実行します。

  • マウス、タッチパッド、またはアクティブなペン/スタイラスを使って、スクロール矢印をクリックするか、スクロール ボックスをドラッグするか、スクロール バー内をクリックする。
  • マウスのホイール ボタンを使って、スクロール ボックスのドラッグと同じ動作を実現する。
  • マウスでサポートされている場合は、拡張ボタン (XBUTTON1 と XBUTTON2)。
  • キーボードの方向キーを使ってスクロール ボックスのドラッグと同じ動作を実現するか、ページ キーを使ってスクロール バー内のクリックと同じ動作を実現する。
  • タッチ、タッチパッド、またはパッシブなペン/スタイラスを使って、任意の方向に指をスライドまたはスワイプする。

スライドでは、指をパン方向にゆっくり移動します。 これにより、コンテンツが指と同じ速度で同じ距離だけパンする 1 対 1 の関係ができます。 スワイプ (指をすばやくスライドして離す) では、パンのアニメーションに次の物理的効果が適用されます。

  • 減速 (慣性): 指を離すとパンが減速し始めます。 これは滑りやすい表面で滑っている状態から止まるまでの動きに似ています。
  • 吸収: 減速時に、パン操作の勢いがスナップ位置またはコンテンツ領域の境界まで保たれた場合、反対方向に少し押し戻される効果があります。

パンの種類

Windows では、3 種類のサポートをサポートしています。

  • 単一軸: 一方向 (水平または垂直) へのパンのみがサポートされます。
  • レール: 全方向へのパンがサポートされます。 ただし、特定の方向への距離のしきい値を超えると、パンはその軸に制限されます。
  • フリーフォーム: 全方向へのパンがサポートされます。

パンの UI

パンの操作エクスペリエンスは、機能的には類似していても、入力デバイスごとに異なります。

検出された入力デバイスに基づいて、次の 2 種類のパン表示モードが使われます。

  • パン インジケーター (タッチを使う場合)。
  • スクロール バー (マウス、タッチパッド、キーボード、スタイラスなど、その他の入力デバイスを使う場合)。

注: パン インジケーターは、タッチによる接触がパン対応領域内であるときにのみ表示されます。 同様に、スクロール バーは、スクロール対応領域内にマウス カーソル、ペン/スタイラス カーソル、またはキーボード フォーカスがあるときにのみ表示されます。

 

パン インジケーター パン インジケーターは、スクロール バーのスクロール ボックスに似ています。 パン対応領域全体に対する表示されているコンテンツの比率と、パン対応領域内の表示されているコンテンツの相対的な位置を示します。

次の図は、長さが異なる 2 つのパン対応領域とそれらのパン インジケーターを示しています。

image showing two pannable areas of different lengths and their panning indicators.

パンの動作スナップ位置 パンとスワイプ ジェスチャを使うと、タッチによる接触が離れたときの対話式操作に慣性の動作が生じます。 慣性によって、コンテンツのパンは、ユーザーによる直接入力がなければ距離のしきい値に到達するまで継続されます。 この慣性の動作を変更するには、スナップ位置を使います。

スナップ位置は、アプリのコンテンツの論理的な停止を指定します。 スナップ位置は、認識に基づくユーザー用のページング メカニズムとして機能し、ユーザーが大きなパン対応領域でスライドまたはスワイプしすぎて疲れるのを防ぎます。 これらを使用すると、不正確なユーザー入力を処理し、コンテンツの特定の部分や主要な情報がビューポートに確実に表示されるようにすることができます。

スナップ位置には次の 2 種類があります。

  • 近接: 指を離した後、スナップ位置の距離のしきい値の範囲内で慣性に従った動きが止まると、スナップ位置が選ばれます。 パンは近接スナップ位置の中間で停止することもできます。
  • 強制: 指を離す前に通過した最後のスナップ位置の直前または直後のスナップ位置が選ばれます (ジェスチャの方向と速度によって異なります)。 パンは強制スナップ位置で停止する必要があります。

パンのスナップ位置は、ページ付けされたコンテンツと同じ動作を実現したり、項目を論理的にグループ化して、ビューポートまたはディスプレイに収まるように動的に再グループ化できるようにしたりする、Web ブラウザーやフォト アルバムのようなアプリで便利です。

次の図は、特定の位置にパンして離すことでコンテンツを論理的な位置に自動的にパンする方法を示しています。

image showing a pannable area.

スワイプしてパンします。

image showing a pannable area being panned to the left.

タッチによる接触を離します。

image showing a pannable area that has stopped panning at a logical snap-point.

パン対応領域は、タッチによる接触が離れた場所ではなく、スナップ位置で停止します。

レール コンテンツは、ディスプレイ デバイスのサイズと解像度より広かったり高かったりする場合があります。 このため、2 次元のパン (水平方向と垂直方向) が必要になることがよくあります。 レールは、このような場合に動作の主軸 (垂直方向または水平方向) に沿ってパンを強調表示することで、ユーザー エクスペリエンスを向上させます。

次の図は、レールの概念を示しています。

diagram of a screen with rails that constrain panning

埋め込まれたコンテンツまたは入れ子になったコンテンツの連結

他のズーム可能またはスクロール可能な要素の入れ子になっている要素のズームまたはスクロールが限界に達した後で、親要素が子要素のズーム操作またはスクロール操作を継続して開始するかどうかを指定します。 これはズームまたはスクロールのチェーンと呼ばれます。

1 つ以上の単一軸パン領域またはフリーフォーム パン領域が含まれる単一軸のコンテンツ領域内で (これらの子領域のいずれかでタッチによる接触があったときに) パンを行う場合は、連結を使います。 子領域の特定の方向のパン境界に到達すると、親領域の同じ方向にパンがアクティブ化されます。

パン対応領域を別のパン対応領域内に入れ子にするときは、コンテナーと埋め込まれたコンテンツ間に十分な領域を指定することが重要です。 次の図では、パン対応領域が別のパン対応領域内に置かれており、それぞれが相互に対して垂直方向に移動します。 各領域にユーザーがパンできる十分な領域があります。

image demonstrating an embedded pannable area.

十分な領域がないと、次の図に示すように、埋め込まれたパン対応領域によってコンテナーでのパンが妨げられ、1 つ以上のパン対応領域で意図しないパンが発生する可能性があります。

image demonstrating insufficient padding for an embedded pannable area.

このガイダンスは、たとえば、フォト アルバムや地図のようなアプリでも役に立ちます。各画像または地図内の制約のないパンをサポートしながら、アルバム内の前の画像または次の画像や詳細な領域への単一軸パンもサポートできます。 フリーフォーム パンの画像や地図に対応する詳細領域またはオプション領域を提供するアプリでは、ページ レイアウトを詳細領域やオプション領域で始めることをお勧めします。画像や地図の制約のないパン領域が、詳細領域へのパンを妨げる可能性があるためです。

サンプル

サンプルのアーカイブ