次の方法で共有

パニングのガイドライン

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

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

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

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

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

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

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

     

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

  • 1 つのビューポート境界 (垂直または水平) を超えるコンテンツ領域に対して、1 軸パンを使用します。

    • 項目の 1 次元リストを垂直方向にスクロールする。
    • 項目のグリッドを水平方向に移動する。

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

フリーフォーム パンニング（二次元オーバーフロー）

  • ビューポートの境界 (垂直方向と水平方向) の両方を超えるコンテンツ領域に対して、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 つ以上のパン可能領域で意図しないパンが発生する可能性があります。

埋め込みパニング可能領域のパディングが不十分な画像。

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

サンプル

アーカイブサンプル