エクスポート (0) 印刷
すべて展開

Windows Phone のナビゲーション、向き、ジェスチャ

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

Windows Phone アプリは、リンクを使ってさまざまなコンテンツのビュー間を移動し、ハードウェアの [戻る] ボタンを使って戻ることができるモデルを基盤としています。このモデルの目的は、Windows Phone ページ ナビゲーション モデルに自然になじむビュー ベースのアプリの開発を簡素化することです。

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

ページ ナビゲーション モデルは、ハブ&スポーク システムです。つまりアプリ内の他のページへのリンクを明示的に追加しない限り、ユーザーは前に見たページを表示するには [戻る] ボタンを使う必要があるということです。これは、Web ブラウザーが Web ページ履歴を表示しナビゲーションするのに似ています。

システムはユーザーが訪れたページを追跡し、各ページをバック スタックと呼ばれる場所に保管します。ユーザーが [戻る] ボタンを押すと、バック スタックに最後に保存されたページが表示されます。バック スタックに保管できるページ数に制限はありません。

たとえばユーザーが 1 ページ→ 2 ページ→ 1 ページ→ 2 ページ→ 3 ページ→ 1 ページの順に移動すると、p1、p2、p1、p2、p3、p1 というバック スタックが作成されます。ユーザーが 2 番目の p2 に変更を加えた後で [戻る] ボタンを使ってバック スタックにある 1 つ目の p2 に戻った場合、ページがデータを更新していない限り、変更される前のページが表示されます。つまりこの場合に表示される 1 つ目の p2 は、最初に表示した時点でユーザーが見たままのスナップショットです。

重要: 重要:

アプリ ナビゲーションに影響を与えるようなページ間リンクやボタンを追加するかどうか、また入力時にページを更新すべきかどうかは慎重に検討してください。

以下は、Windows Phone のアプリ ページ モデルにおける用語の定義です。

  • ページ:ユーザーが認識できる永続的な状態のコレクション。情報、記録可能なコンテンツ、または他のページへのリンクを含むページとして表示できます。

  • 画面:ポップアップ ウィンドウ、ダイアログ ボックス、またはスプラッシュ スクリーンなど、記録可能なコンテンツを含まない一般的な UI 画面。ユーザーが認識できる永続的な状態のコレクションではありません。

以下の図は、複数のページや画面で構成されるアプリ構造のイメージです。

AP_CoreCon_PageModel

アプリ構造例

ページについて

アプリには、以下のようなページが含まれます。

  • ホーム ページ

  • ウィジェット ページ

  • ウィジェットの詳細ページ (ピボットを含む)

  • ガジェットの詳細ページ

  • 検索ページ

  • 設定ページ

スプラッシュ スクリーンやログイン画面はページとは呼ばれません。ページは、ユーザーが認識できる永続的な状態のコレクションと定義されますが、スプラッシュ スクリーンはアプリが起動する前に表示される単なるプレースホルダーです。スプラッシュ スクリーンの詳細については、「Windows Phone の基本的なグラフィックス、ビジュアル インジケーター、および通知」を参照してください。

また、ログイン画面では資格情報の入力だけが要求されるため、状態データは表示されません。

重要: 重要:

Windows Phone のすべてのビューにページが必要なわけではありません。

UI をページにするかどうかを決定するときには、次のような点を検討します。

  • ユーザーが明示的にそのページを閲覧したいか。

  • ユーザーはそのページを表示したことを覚えていてまたそこに戻りたいと思うか。

ページはアプリ内で独立したコンテンツのセクションを含み、個別の画面として表示されます。アプリ内でコンテンツを表示するページを必要なだけ追加して UI を構成し、必要に応じてフレームやページからそれらのページへのナビゲーションを提供することができます。1 ページしか必要としない単純なアプリもあれば、多数のページを必要とする複雑なアプリもあります。

全画面ビュー

全画面ビューでステータス バーやアプリ バーをオプションで表示することもできます。ただし全画面ビューではこれらのバーは既定で非表示になりますので、可視性のプロパティを使用して明示的に定義する必要があります。全画面ビューのベスト プラクティスは、ユーザーがコンテンツに集中できるようどちらのバーも表示しないことです。ステータス バーもアプリ バーも表示されていない全画面モードでも、通知や電話の着信は表示されます。ステータス バーとアプリ バーの詳細については、「Windows Phone の基本的なグラフィックス、ビジュアル インジケーター、および通知」を参照してください。

メモメモ:

全画面ビューの設定を使用すると、ユーザーが時計にアクセスできなくなります。コンテンツで必要な場合を除き、全画面ビューを使用しないことをお勧めします。

Windows Phone でのナビゲーションは、ページ間の遷移として定義できます。

ただし、スプラッシュ スクリーンからホーム ページへの移動など、本当の意味でナビゲーションとは見なされない遷移もあります。ページとは見なされない場所からの移動は単に遷移と呼ばれます。

以下のセクションでは、効果的なページ モデル使用のベスト プラクティスを紹介します。

画面および非ナビゲーション遷移

ログイン画面のような一時的な UI には、完全なナビゲーションを必要とする個別の画面を実装するのでなく、Popup コントロールを使用して、画面の一部分だけを使うコンテンツを表示することができます。ユーザーが [戻る] ボタンを使ってダイアログ ボックスを閉じられるようにするには、コードに BackKeyPress イベントを追加して、ポップアップ ウィンドウの表示中に e.Canceltrue に設定します。

複数コンテンツ ビュー

複数のコンテンツ セクションを表示するページでは、ナビゲーションを使わなくても、ページ上のコントロールを新しい DataContext に再バインドすることでコンテンツ間を移動できます。また、ページ内で複数の UserControl インスタンスを読み込むか、または新しいコンテンツを表示するその他のメカニズムを使用して再バインドすることもできます。ユーザーがどのようにして項目間を前後に移動するかは開発者が決定できます。たとえば、アプリ バーの [前へ] ボタンと [次へ] ボタンを使うことができます。ただし、ローカルの遷移では [戻る] ボタンを多用しないことをお勧めします。

状態の保存と廃棄

アプリが廃棄されたときにユーザーが手順をたどれるように、特定のページで発生した遷移の履歴を保存しておくことができます。前や次に移動する単純な閲覧操作の場合は、現在のインデックスにページの状態を保存するだけで済みます。これを NavigationContext API と共に実行することで、廃棄状態から戻ったときにデータセットを走査するために必要な情報がすべて得られます。リンクされた項目間を自由に閲覧できるような、より複雑なローカルの遷移履歴が発生するアプリの場合は、履歴の一部をページの状態に保存することもできますが、保存できる項目を妥当な数に制限してください。キー ポイントは、ユーザーがハードウェアの [戻る] ボタンを使って、前に表示した項目ではなく前のページに戻るようにすることです。

以下の表に、アプリの各部がページと見なされるかどうかをまとめます。

画面の種類

ページ

説明

スプラッシュ スクリーン

不可

これは起動時のエクスペリエンスの一時的な部分であり、ユーザーはこの画面に移動することはできません。

パノラマ エクスペリエンス

Windows Phone アプリの一般的なホーム画面のアプローチ。

詳細ページ

このページは、クエリ文字列でパラメーター化されたデータ中心のアプリに一般的です。

ピボット アイテム

不可

ピボット アイテムとは、コンテンツ内でユーザーにとって重要な部分となる Pivot コントロールの小さなコンポーネントです。

ログインまたはエラー ダイアログ

不可

これはアプリの状態によってトリガーされる一時的な UI であり、ユーザーが直接移動することはありません。

アイテムの列挙

不可

これはナビゲーション手段としてではなく、内部的な活動として類似コンテンツを閲覧するために使用されます。

次の表に、さまざまな種類の UI 実装の処理に使用できる方法を要約して示します。

UI の種類

実装

[戻る] ボタンの動作

廃棄の動作

ページ

PhoneApplicationPage コントロール

[戻る] ボタンは自動的にアプリを前の状態に戻したり、終了したりします。データが失われた場合以外は、オーバーライドしないでください。

自動的にバック スタックに残ります。

画面の一時的 UI

ポップアップまたは子ウィンドウ

ポップアップ ウィンドウを取り消すには、アプリでオーバーライドする必要があります。[戻る] ボタンが押されると、オンスクリーン キーボードと MessageBox コントロールは自動的にキャンセルされます。

ナビゲーション時に、アプリでポップアップ ウィンドウを閉じるか、取り消す必要があります。

アイテムの列挙

UserControl

該当なし:親ページの内部でホストされます。

アプリは、アクティブなアイテムを適切に保存する必要があります。

向きと軸について

Windows Phone プラットフォームのユーザーは、特にビデオ、地図、ゲームなどの要素を表示するアプリでは、縦横両方の向きがサポートされることを期待します。

また、ナビゲーションが X 軸 Y 軸両方向に働き、上下だけでなく電話画面全体にスワイプすることで新しいコンテンツを発見できることを期待します。アプリで両方の向きと軸を使用する方法を計画してください。

横向きで使用できるアプリをデザインする際は以下の点に注意してください。

  • 縦向きでも使用できるようにするか、1 つの向きに固定するかを決定します。

  • 横向きは画面スペースを最大限に使いたいときに便利です。ユーザーが電話の向きを変えたときに、より多くのコンテンツを画面に表示できるようになったことを強く印象付けるため、コントロールやレイアウトを再配置することができます。

  • 横向きは、ビデオ コンテンツの表示によく使われます。横向きモードにするメインの目的がコンテンツ表示である場合は、ユーザーがコンテンツに集中できるよう、コントロールやナビゲーションをフェード アウトさせます。

画面の向き

Windows Phone では、3 種類の画面方向のビューがサポートされています。縦向き、横向き (左)、および横向き (右) です。

縦向きビュー: 操作ボタンが電話の下にある状態で、ページが縦長に表示されます。アプリの既定のビューは縦向きです。スタート画面は常に縦向きのビューで表示されます。

UX_Interactions_UINavigation_02

画面の向き

横向きビュー: 横向きビューでは、ステータス バーとアプリ バーは画面の左側または右側に表示されます。画面が縦向きビューのときにユーザーが横向きのハードウェア キーボードを引き出すと、アプリで横向きをサポートしている場合、ビューが横向きに変わります。

ステータス バーの幅は、デバイスの電源ボタンのある側から画面の中央に向かって計測した場合、縦向きビューでは 32 ピクセルですが、横向きビューでは 72 ピクセルになります。

メモメモ:

アプリで横向きをサポートする場合、左または右のみに限定することはできません。

画面の向きは、次の表にリストする動作によって変更されます。

最初の画面の向き

回転

動作の結果表示される向き

縦向き

60 度左

横向き (左)

縦向き

60 度右

横向き (右)

横向き (左)

60 度右

縦向き

横向き (右)

60 度左

縦向き

横向き (左または右)、テーブル上に水平に配置

30 度上

縦向き

画面の向きのプロパティは読み取り専用に設定されているので、プログラムによって向きを切り替える方法はありませんが、向きを固定して設定することはできます。画面の回転が始まると、画面の遷移アニメーション効果が再生されます。

アプリで SupportedOrientations プロパティを使用してビューの固定方向を設定できます。テキスト入力をサポートするアプリでは、水平方向のハードウェア キーボードが存在していることを前提とし、横向きのビューをサポートしている必要があります。

メモメモ:

テキスト入力の多い、横向きの操作は作成しないことをお勧めします。

アプリ内の横向きビューに対応したシステム コンポーネントには、ステータス バー、アプリ バー、アプリ バー メニュー、音量/着信音/バイブレーションの表示、プッシュ通知、およびダイアログがあります。

Windows Phone UI とのインタラクションでは、タッチ ジェスチャがメインの手段です。Windows Phone OS のタッチ ジェスチャでは、1 本または複数の指でのタッチ スクリーンのタップとスワイプが使用できます。

Windows Phone SDK で提供されているコントロールは、タッチ インタラクション要素として使用されます。タッチ インタラクション要素は常に、タッチ インタラクションに適したサイズにする必要があります。タッチ ジェスチャの詳細については、「Windows Phone のインタラクションとユーザビリティ」を参照してください。

Windows Phone では、以下のシングルタッチおよびマルチタッチ ジェスチャをサポートしています。

シングルタッチ

  • タップ

  • ダブル タップ

  • パン

  • フリック

  • タップ アンド ホールド

マルチタッチ

  • ピンチとストレッチ

タップ

タップとは、画面の特定の領域にすばやく 1 度触れて離すことです。

UX_Interactions_Tap

タップ

タップ ジェスチャは 2 つの動作で構成されます。

  • 触れることでタッチしたことが示され、

  • 離すことでアクションが実行されます。

また、画面上で項目が動いているときにタップすると動きが止まります。

ダブル タップ

ダブル タップとは、特定の領域内ですばやく 2 回タップすることです。

UX_Interactions_DoubleTap

ダブル タップ

ダブル タップすると、コントロールまたはアプリのズームの拡大/縮小が切り替わります。アプリは現在のズームの状態を決定し、それに応じて拡大または縮小を実行します。アプリは拡大/縮小の状態を定義します。

パン

パンとは、1 本の指を画面に置いていずれかの方向に動かすことです。指を画面から離すとパン ジェスチャが終了します。

UX_Interactions_Pan

パン

パン ジェスチャは 2 つの動作で構成されます。

  • コンテンツ全体を直接操作して移動することができます。コンテンツは指の動きを追ってそのとおりに動きます。パンでどの方向をサポートするかは、コントロールやアプリごとに設定します。水平、垂直、その他あらゆる方向を指定できます。コンテンツが中間的な場所に移動された場合、最も近い状態にスナップする必要があります。

  • 項目を移動したり並べ替えたりすることができます。項目は指の動きを追って動き、画面から指を離すとその場所に固定されます。

フリック

フリックとは、1 本の指で画面に触れて、いずれかの方向にすばやく動かした後画面から離すことです。パン ジェスチャの後にフリックすることもできます。

UX_Interactions_Flick

フリック ジェスチャを行うと、コンテンツの 1 つの領域から別の領域に移動します。コントロールやアプリで、特定のフリック方向をサポートするように設定できます。水平、垂直、その他あらゆる方向を指定できます。水平または垂直のどちらかのみをサポートした場合、あらゆる動きはその動きに変換して解釈されます。

フリックはキャンバス全体を移動しますが、個々のオブジェクトを移動するように指定することもできます。

ピンチとストレッチ

ピンチとストレッチとは、2 本の指で画面上の特定の領域に触れ、2 本の指を近づける (ピンチ) かまたは離す (ストレッチ) ことです。

UX_Interactions_PinchAndStretch

ピンチとストレッチ

ピンチやストレッチを行うと、2 本の指の中間地点を中心としてコンテンツが連続的に縮小/拡大されます。

タップ アンド ホールド

タップ アンド ホールドとは、1 本の指で特定の領域に一定時間触れることです。通常このジェスチャは、特定の項目のコンテキスト メニューやオプション ページを表示するために使用されます。

UX_Interactions_TouchAndHold

タップ アンド ホールド

4 つのタッチ ポイント

Windows Phone は、アプリとのユニークなインタラクションを実現するため、ユーザー タッチ入力ポイントを同時に 4 つサポートしています。ゲームや楽器アプリなどがその利用例です。

タッチの端が 3.5 mm 以上離れていてすべてのジェスチャがサポートされている場合、直径 7 mm 以上のタッチは独立したタッチとして認識されます。

タッチ ポイントを増やすとプロセッサの負担も増加します。同時に 3 つ以上のタッチ入力ポイントをサポートする場合はパフォーマンスへの影響も考慮してください。Windows Phone は最大 10 のタッチ ポイントをサポートしていますが、ハードウェアによっては 4 つまでしかサポートしていない場合があります。

表示:
© 2014 Microsoft