次の方法で共有

パンニングに関するガイドライン

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

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

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

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

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

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

    手記 標準的なスクロール バーとは異なり、パン インジケーターは純粋に有益です。 入力デバイスに公開されず、何らかの方法で操作することはできません。

     

単軸パンニング (一次元オーバーフロー)

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

    • 項目の一次元リストの垂直パンニング。
    • 項目グリッドのための水平方向のパンニング。

  • ユーザーがスナップポイント間でパンおよび停止できる必要がある場合は、単一軸パンで必須のスナップポイントを使用しないでください。 必須のスナップポイントは、ユーザーがスナップポイントで停止することを保証します。 代わりに近接スナップポイントを使用してください。

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

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

    • 既定のレールの動作をオーバーライドし、ユーザーが複数の方向に移動する可能性が高い非構造化コンテンツにフリーフォーム パンを使用します。

  • フリーフォーム パン操作は、通常、画像またはマップ内を移動する場合に最適です。

ページ ビュー

  • コンテンツが個別の要素で構成されている場合、または要素全体を表示する場合は、必須のスナップポイントを使用します。 これには、書籍や雑誌のページ、アイテムの列、または個々の画像を含めることができます。

    • スナップポイントは、各論理境界に配置する必要があります。
    • 各要素は、ビューに合わせてサイズ変更またはスケーリングする必要があります。

論理ポイントとキー ポイント

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

  • 最大サイズと最小サイズの制約または境界が定義されている場合は、視覚的なフィードバックを使用して、ユーザーがそれらの境界に達したとき、または超えたときを示します。

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

  • テキストおよびグリッド ベースのコンテンツには、単一軸のパン (通常は水平) と列レイアウトを使用します。 こうした場合、コンテンツは通常、列から列へと自然に流れ、Windows アプリ間でユーザー体験の一貫性と容易な発見性を維持します。

  • 埋め込みパンニング可能領域を使用してテキストや項目リストを表示するために使用しないでください。 パン インジケーターとスクロール バーは、入力連絡先が領域内で検出された場合にのみ表示されるため、直感的または検出可能なユーザー エクスペリエンスではありません。

  • 次に示すように、両方が同じ方向にパンする場合は、パン可能領域を別のパン可能領域内にチェーンしたり配置したりしないでください。 これにより、子領域の境界に達したときに、親領域が意図せずにパンされる可能性があります。 パン軸を垂直にすることを検討してください。

    コンテナーと同じ方向にスクロールする埋め込みのパン可能領域を示す、画像。

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

1 本以上の指でスワイプまたはスライド ジェスチャを使用してタッチでパンすることは、マウスでスクロールするような操作です。 パン操作は、スクロール バーをクリックするのではなく、マウス ホイールの回転やスクロール ボックスのスライドに最も似ています。 API で区別が行われたり、デバイス固有の Windows UI で要求されたりしない限り、両方の操作はパンと呼ばれるだけです。

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

入力デバイスに応じて、ユーザーは次のいずれかを使用してスクロール可能領域内で移動します。

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

スライド動作では、スワイプする方向に指をゆっくりと移動します。 これにより、コンテンツが指と同じ速度と距離でパンする 1 対 1 のリレーションシップになります。 スワイプでは、指を急激にスライドさせて持ち上げることで、パン アニメーションに次の物理演算が適用されます。

  • 減速 (慣性): 指を離すと、画面のパンが減速を始めます。 滑りやすい表面で滑り止まるのと似ています。
  • 吸収効果: 減速中のパンニング運動量は、スナップポイントまたはコンテンツ領域の境界に達したときに、わずかなバウンスバック効果を引き起こします。

パンニングの種類

Windows では、3 種類のパンニングがサポートされています。

  • 単一軸 - パンは 1 方向 (水平または垂直) でのみサポートされます。
  • レール - パニングは全方向でサポートされています。 ただし、ユーザーが特定の方向の距離しきい値を超えると、パンはその軸に制限されます。
  • フリーフォーム - あらゆる方向に移動がサポートされています。

パンニング UI

パニング操作のエクスペリエンスは、同様の機能を提供しながら、入力デバイスに固有です。

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

  • タッチ用のパンインジケーター。
  • マウス、タッチパッド、キーボード、スタイラスなど、他の入力デバイスのスクロール バー。

注 パンニング インジケーターは、タッチがパン可能領域内にあるときのみ表示されます。 同様に、スクロール バーは、マウス カーソル、ペン/スタイラス カーソル、またはキーボード フォーカスがスクロール可能な領域内にある場合にのみ表示されます。

 

パン インジケーター パン インジケーターは、スクロール バーのスクロール ボックスに似ています。 これらは、パン可能領域全体に対する表示コンテンツの割合と、パン可能領域での表示コンテンツの相対的な位置を示します。

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

長さが異なる 2 つのパン可能領域とそのパン インジケーターを示す画像。

パン動作スナップ ポイント スワイプ ジェスチャーでパンする際、タッチの接触が解除されると相互作用に慣性動作が生じます。 慣性を使用すると、ユーザーからの直接入力がないまま、一定の距離に達するまでコンテンツは動き続けます。 スナップポイントを使用して、この慣性動作を変更します。

スナップポイントは、アプリ コンテンツ内の論理位置を指定します。 認知的には、スナップ ポイントはユーザーのページング メカニズムとして機能し、大きなパン可能な領域での過度のスライドやスワイプによる疲労を最小限に抑えます。 これらを使用すると、不正確なユーザー入力を処理し、コンテンツまたはキー情報の特定のサブセットがビューポートに表示されるようにすることができます。

スナップポイントには、次の 2 種類があります。

  • 近接性 - 接触が解除されると、慣性がスナップ ポイントの距離しきい値内で停止した場合にスナップ ポイントが選択されます。 パンニングは、近接スナップポイントの間で停止することができます。
  • 必須 - 選択したスナップ ポイントは、接触が解除される前に交差した最後のスナップ ポイントの直前または後のスナップ ポイントです (ジェスチャの方向と速度に応じて)。 パンニングは必須のスナップポイントで停止しなければならない。

パン スナップポイントは、ページ分割されたコンテンツをエミュレートする Web ブラウザーやフォト アルバムなどのアプリケーションや、ビューポートまたはディスプレイ内に収まるように動的に再グループ化できる項目の論理的なグループ化に役立ちます。

次の図は、特定のポイントにパンして離すと、コンテンツが論理的な位置に自動的にパンする様子を示しています。

パン可能な領域を示す画像。

スワイプして画面を移動します。

パン可能な領域が左にパンされていることを示す画像。

タッチ接触を離します。

論理的なスナップポイントでパンを停止したパン可能領域を示す画像。

パン可能領域は、タッチ操作が離された位置ではなく、スナップポイントで停止します。

レール コンテンツは、ディスプレイ デバイスの寸法と解像度よりも広く、高くすることができます。 このため、多くの場合、2 次元パン (水平および垂直) が必要です。 Rails は、モーション軸 (垂直または水平) に沿ったパンを強調することで、このような場合のユーザー エクスペリエンスを向上させます。

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

レールによってパンニングが制限される画面の図

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

別のズーム可能要素またはスクロール可能要素内で入れ子になった要素に対してユーザーがズームまたはスクロールの制限に達した後、その親要素が子要素で開始されたズーム操作またはスクロール操作を続行するかどうかを指定できます。 これはズームまたはスクロールチェイニングと呼ばれます。

チェーンは、1 つ以上の単一軸またはフリーフォームパン領域を含む単一軸コンテンツ領域内でのパンに使用されます (タッチ接触がこれらの子領域の 1 つ内にある場合)。 子領域のパンニング境界に特定の方向に達すると、親領域で同じ方向にパンニングが開始されます。

パン可能領域が別のパン可能領域内に入れ子になっている場合は、コンテナーと埋め込みコンテンツの間に十分な領域を指定することが重要です。 次の図では、1 つのパン可能領域が別のパン可能領域の内側に配置され、それぞれが垂直方向に移動します。 ユーザーが各リージョンで移動するための十分な領域があります。

埋め込み可能なパンニング領域を示す画像。

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

埋め込まれたパンが可能な領域の余白が不十分な画像。

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

サンプル

サンプルのアーカイブ

  • Last updated on