Windows Phone の Pivot コントロールのデザイン ガイドライン

2012/02/09

Pivot コントロールは、アプリケーション内でビューのナビゲーションを迅速に管理できるようにします。 このコントロールでは独立した複数のビューが横一列に表示され、左右のナビゲーションを管理します。 ページ上で水平方向にフリックまたはパンすると、ピボット機能が巡回します。

Pivot コントロール内のページ コンテンツはアプリケーションによって定義されます。

UI_Pivot

Windows Phone のピボット アプリケーションは、ビューやページをすばやく管理する方法を提供します。 大きなデータセットのフィルター処理、複数のデータセットの表示、またはアプリケーション ビューの切り替えに使用できます。 たとえば、ページ上を左から右へフリックまたはパンすると、コンテンツの次のページに進みます。

Pivot コントロールには、タッチ インタラクションとナビゲートのサポートが組み込まれています。 ジェスチャ機能は既定で有効になっているので、アプリケーションで特別なジェスチャ機能を実装する必要はありません。 Pivot コントロールは以下のジェスチャとナビゲーションをサポートしています。

  • 水平方向にパン (タップして左/右へドラッグ)

  • 水平方向にフリック (タップして左/右へすばやく払う)

  • ホストされるコントロールのナビゲート (たとえば、リンクをタップしたり、リストをスクロールしたりすることができます)。

AP_CoreCon_PivotSample

Pivot コントロールはアプリケーションの基盤部分にあり、基本的機能は PivotItem コントロールと呼ばれる 2 次コントロールのコンテナーです。 PivotItem コントロールには、各ページ内のコントロール、グリッド、リンクといった個々のページ コンテンツが含まれます。 デザイナーを使用するか、プログラムによって、これらの要素を操作できます。 Pivot コントロールのアーキテクチャの詳細については、「Windows Phone の Pivot コントロールのアーキテクチャ」を参照してください。

AP_CoreCon_PivotAnatomy

このコントロールは、大きなデータセットのフィルター処理、複数のデータセットの表示、アプリケーション ビューの切り替えなどに使用できます。 アプリケーションに、複数の Windows Phone ピボット エクスペリエンスが統合されたような外観と動作を与えることができます。

Pivot コントロールを使用してピボット エクスペリエンスを作成する場合の一般的なベスト プラクティスを次に示します。

  • Pivot コントロールの中に別の Pivot コントロールを置かないでください。 Panorama コントロールの中に Pivot コントロールを置かないでください。

  • ただし、Panorama コントロール内の要素を Pivot コントロールにリンクさせたり、その逆にリンクさせたりすることはできます。

  • アプリケーションのピボット ページの数は、できるだけ少なくしてください (6 ページ以内)。 ピボット ページからピボット ページにジャンプすると、ユーザーは現在位置を見失う可能性があります。 Pivot コントロールの数はできるだけ抑え、ピボット ページの使用が最適であると思われるシナリオでのみ使用してください。

  • Pivot コントロールをタスク フローに使用しないでください (まったく異なるタスクを公開する)。 各ページのフローはシームレスで (外観)、ページの変更によって、ユーザー アクティビティが大きく変わることがないようにしてください (たとえば、メールをフィルターするページと写真を表示する別のページなどで)。

  • Pivot コントロールは、同種の項目やデータの表示のみに使用してください (たとえば、同じデータのフィルター処理された表示など)。

  • ピボット ページが循環的であることを考慮してください。 最後のピボット ページに到達した後、ユーザーがスワイプし続ける場合に表示する次のページは、最初のピボット ページになります。 この動作を利用して、ピボット ページのオプションとコンテンツ間のシームレスな流れを作ります。

  • ピボット ヘッダーの高さは固定されており変更できません。

  • ユーザーの操作によって、ページに情報が追加される可能性がない場合にのみ、空のピボット ページを削除してください。 たとえば、未開封のメールのピボット ページに、表示する項目がない場合、未開封のメールのピボット ページを削除せずに、代わりに、データが使用可能であれば、何らかのコンテンツを表示するプレースホルダー テキストまたは画像をページに配置するか、単にピボット ページが "空" であることを示します。

  • ピボット ヘッダー テキストを最大 1、2 単語に制限し、ユーザーに次のピボット ページの存在の視覚的なヒントを与えると同時に、ローカライズを助けることをお勧めします。

  • Pivot コントロール内で、SliderToggle、または Map コントロールを使用しないでください。 Pivot コントロール内でパンやスクロールできるコントロールを使用しないでください。 たとえば、Pivot コントロール セクション内に Map コントロールを配置すると、Pivot コントロールが使いにくくなります。 ジェスチャ入力が混同されます。 たとえばスライダーを操作しようとすると、マップをスクロールしたいのか、スライダーを動かしたいのか、次のピボット ページに移動したいのかはっきりしません。 これを解決するには、ジェスチャ入力を必要とするコントロールをサブページに置き、そこにナビゲートするようにします。 ジェスチャ インタラクションをサポートしない地図はピボット ページ内に入れても問題ありません。 マップをアクティブにするボタンをオーバーレイすることができます。 ボタンをクリックすると、実際には、Map コントロールのみを含む別のページに移動します。 その後ユーザーは [戻る] ボタンを押して Pivot コントロールに戻ることができます。

表示: