展開 最小化

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

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

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

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

UI_Pivot

このトピックは、次のセクションで構成されています。

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

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

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

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

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

AP_CoreCon_PivotSample

アプリの基礎には Pivot コントロールがあります。このコントロールは、本質的に PivotItem コントロールというセカンダリ コントロールのコンテナーです。PivotItem コントロールには、各ページ内のコントロール、グリッド、リンクなど、個々のページ コンテンツが含まれています。デザイナーを使用するか、プログラムによって、これらの要素を操作できます。Pivot コントロールのアーキテクチャの詳細については、「Windows Phone の Pivot コントロールのアーキテクチャ」を参照してください。

AP_CoreCon_PivotAnatomy

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

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

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

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

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

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

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

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

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

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

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

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

  • ピボット内ではエディット コントロールを使用しないでください。これを使用すると、左から右のフリックとパン ジェスチャ操作に干渉してしまいます。

リファレンス

その他の技術情報

表示:
© 2014 Microsoft