ページ切り替えアニメーションのガイドライン

Applies to Windows and Windows Phone

ページ切り替えアニメーションを使うと、新たに起動したアプリの最初のページを表示したり、アプリ内でページを切り替えたりできます。

  スクリーンの一部の領域を占めるだけのコンテンツを切り替えるときには、ページ切り替えアニメーションではなく、コンテンツ切り替えアニメーションを使います。

推奨と非推奨

  • ページは、自然な境界に沿って 2 ~ 5 の領域セットに分割してください。各領域に適用するタイミングをずらすと、領域が一度に全部ではなく、順番に表示されます。また、幅が広いアプリのレイアウトでは、領域が 100 ピクセルずつオフセットされます。アプリに幅が狭い状態用の特別なレイアウトを使う場合は、小さいオフセットを使うことができます。一般的な分割方法と分割の表示の順番については、「その他の使い方のガイダンス」をご覧ください。
  • 差し替え前のページと差し替え後のページに共通するコンテンツがそのままの位置にとどまり、そのコンテンツにアニメーションが適用されていないことを確認します。たとえば、差し替え前のページと差し替え後のページのどちらにも [戻る] ボタンがある場合には、そのボタンは切り替えアニメーションの対象にしません。
  • 差し替え前のページに [戻る] ボタンがなく (アプリの最初のページなど)、差し替え後のページにはあるという場合には、その [戻る] ボタンは別の領域に指定し、アニメーションを適用して他の領域よりも先に表示します。
  • 差し替え前のページと差し替え後のページとの間で背景が異なる場合には、フェード アニメーションを使って新しい背景を表示します。ページ切り替えアニメーションと同時にフェード イン アニメーションを開始します。
  • 差し替え後のページの一部のコンテンツが表示にすぐに表示できる状態にない場合には、ページ切り替えアニメーションを使うとその時点で準備ができているコンテンツが流し込まれます。その間に必要があれば、残りのコンテンツを準備している間に [プログレス コントロール] を表示します。残りのコンテンツの表示の準備が整ったら、コンテンツ領域に基づいてアニメーションを使って流し込みます。コンテンツ領域が大きい場合には、コンテンツ切り替えアニメーションを使います。コンテンツ領域が小さい場合や、連続性のないコンテンツの場合には、フェード イン アニメーションを使います。
  • 画面に表示するページは、一般的なページのフロー (読む方向) とは逆の方向にスライドさせます。たとえば、差し替え後のページのコンテンツを読む方向が左から右の場合、新しいページは右から左にスライドするのが自然です。右から左に読むアプリの場合、新しいページは左から右にスライドするのが自然です。同じように、下の図に示すように 1 つのページを分割する場合、分割した部分を表示する順番は、読む方向と逆にするのが自然です。
  • ユーザーがアプリ ウィンドウのサイズを変更するときには、ページ切り替えアニメーションを実行しないでください。ページ切り替えアニメーションは、特定のビューを使っているときにページ間で移動する場合に限られます。ビューが変わるときには、システムがレイアウトの切り替えのアニメーションを処理します。

その他の使い方のガイダンス

ここでは、最もよくみられるページの分割方法について、表示の順番も含めて説明します。

一般的なページ分割

[戻る] ボタンのある一般的なページ分割を次に示します。差し替え前のページに [戻る] ボタンがなく (アプリの最初のページなど)、差し替え後のページにはあるという場合には、その [戻る] ボタンは別の領域に指定し、アニメーションを適用して他の領域よりも先に表示します。

一般的なページ分割

ここでは、狭い幅のビューまたは縦向きビューで表示されるアプリに使うページ分割方法のうち最もよく見られるものについて、分割の表示の順番も含めて説明します。差し替え前のページに既に [戻る] ボタンがある場合、そのボタンは切り替えアニメーションの対象にせず、そのままの位置を維持します。

サイズ変更されたビューや縦向きビューで一般的なページ分割

関連トピック

デザイナー向け
追加と削除のアニメーションのガイドライン
コンテンツ切り替えアニメーションのガイドライン
ドラッグ アニメーションのガイドライン
端に基づく UI アニメーションのガイドライン
フェード アニメーションのガイドライン
ポインター クリック アニメーションのガイドライン
位置変更アニメーションのガイドライン
ポップアップ UI アニメーションのガイドライン
スワイプ アニメーションのガイドライン
開発者向け (HTML)
HTML アニメーション ライブラリのサンプル
UI のアニメーション化
ページ切り替えのアニメーション化
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
開発者向け (XAML)
UI のアニメーション化
コンテンツと開始切り替えのアニメーション化
クイック スタート: ライブラリのアニメーションを使った UI のアニメーション化
EntranceThemeTransition class

 

 

表示:
© 2014 Microsoft