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

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

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

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

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

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

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

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

     

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

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

    • 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 つ以上のパン可能領域で意図しないパンが発生する可能性があります。

埋め込み式のスクロール可能領域のパディングが不十分な様子を示す画像。

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

サンプル

サンプルのアーカイブ

  • Last updated on