柔軟な平行移動及び垂直移動を備えたマルチレイヤーユーザーインターフェース
ユーザーインターフェース（ＵＩ）システムはマルチレイヤーグラフィカルユーザーインターフェースにおける動きを計算する。ＵＩシステムはタッチスクリーン上でのジェスチャーに対応するユーザー入力を受信する。ＵＩシステムは、第１の移動速度での第１の方向（例えば、水平方向）における第１のレイヤーの動きを計算する。ＵＩシステムは、第１の移動速度とは異なる第２の移動速度での、第１のレイヤーの動きと実質的に平行な第２のレイヤーの動きを計算する。ＵＩシステムは、レイヤーのうちの１つのレイヤーのＵＩ要素における、第1の方向と実質的に直交する方向の動き（例えば、垂直方向の動き）を計算する。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、柔軟な平行移動及び垂直移動を備えたマルチレイヤーユーザーインターフェースに関する。
【背景技術】
【０００２】
効果的なユーザーインターフェースの設計は多くの課題をもたらす。１つの課題は、ディスプレイのスペースの制限及び特定のユーザーのニーズを考慮して、最適な量の視覚情報又は機能をどのようにしてユーザーに提供するかということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型ディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、特定のアクティビティ（例えば、ファイルのライブラリーにおける音声ファイル又はビデオファイルを閲覧する）を実行しているユーザーにとって利用できる、ディスプレイに収まりきらない多くの情報がしばしば存在するためである。
【発明の概要】
【発明が解決しようとする課題】
【０００３】
限られた量の利用可能なディスプレイスペース上で情報がどのように提示されるかについて細心の注意を払わない限り、ユーザーは簡単に迷ってしまいかねない。
従来の技術の利点が何であるにせよ、従来の技術は以下に示す技術及び手段の利点を有していない。
【課題を解決するための手段】
【０００４】
本明細書において記載される技術及び手段は、コンピューターディスプレイ上でユーザーに対して視覚情報を提示することに関し、より具体的には、スマートフォンや他のモバイルコンピューティングデバイスにおいて見られるような小型ディスプレイ上に視覚情報を提示することに関する。特に、互いに関連する視覚情報のレイヤー（層）が異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。１つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さ（レイヤーが水平に方向付けられる場合などには、レイヤーの幅と呼んでもよい）の関数である速度で同じ方向に動く。たとえば、グラフィカルユーザーインターフェース（ＧＵＩ）は、背景レイヤー、タイトルレイヤー、及びコンテンツレイヤーを含む。特定の方向に（例えば、水平方向に左から右へ）コンテンツレイヤーを通じてナビゲートするユーザーはまた、背景レイヤー及びタイトルレイヤーのうちの１つ又は複数において同じ方向での移動を引き起こす。レイヤーにおける動きの量及び性質は、レイヤー中のデータ又はレイヤーにおける対応するロックポイント間の相対距離などの１つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーよりも長い場合、コンテンツレイヤーは背景レイヤーよりも速く移動する。タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、コンテンツレイヤーの移動速度はタッチスクリーン上のジェスチャーの動きの速度と一致してもよい。
【０００５】
１つの態様において、ＵＩシステムは、少なくとも第１及び第２のレイヤーを含むＧＵＩを表示する。第１のレイヤーにおける視覚情報の第１の部分はタッチスクリーンの表示領域内にある。ＵＩシステムは、タッチスクリーン上のジェスチャーに対応する第１のユーザー入力を受信する。ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて、第１の動きを計算する。第１の動きは、第１のレイヤーにおける視覚情報の第２の部分が表示領域の外にある最初の第１のレイヤーの位置から、第１のレイヤーにおける視覚情報の第２の部分が表示領域内にある現在の第１のレイヤーの位置への、第１のレイヤーの動きを含む。第１の動きは第１の移動速度（例えば、タッチスクリーン上でユーザーの指又は他の物体によりなされるジェスチャーの動きの速度に実質的に等しい移動速度）で第１の方向にある。ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて、第１の動きと実質的に平行な第２の動きを計算する。第２の動きは、最初の第２のレイヤーの位置から現在の第２のレイヤーの位置への第２のレイヤーにおける視覚情報の動きを含む。第２の動きは第２の移動の速度で第１の方向にある。第２の移動速度は第１の移動速度とは異なる。
【０００６】
第１のレイヤーは、第１の方向（例えば、水平方向）と実質的に直交する第２の方向（例えば、垂直方向）に動くように動作可能なユーザーインターフェース要素（例えば、リンクのリストなどの縦にスクロール可能な要素）を有する。 ＵＩシステムは、タッチスクリーン上での第２のジェスチャーに対応する第２のユーザー入力を受け取り、当該第２のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き（例えば、垂直方向の動き）を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第１のレイヤーにおけるユーザーインターフェース要素の視覚情報の動きを含む。現在の要素の位置は最初の要素の位置と第２のジェスチャーの速度とに基づいて計算することができる。要素が現在の要素の位置にあるときに要素が最初の要素の位置にあって表示領域内にある場合、ユーザーインターフェース要素の視覚情報の一部は、表示領域の外にあってもよい。
【０００７】
別の態様では、コンピューティングデバイスは、コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むＧＵＩを表示する。各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第１及び第２の部分を含む。それぞれのレイヤーにおける視覚情報の第１の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の第２の部分は表示領域の外にある。コンテンツレイヤーは、表示領域内にある視覚情報の第１の部分及び表示領域外にある視覚情報の第２の部分を有する少なくとも１つのスクロール可能な要素を含む。コンピューティングデバイスは、タッチスクリーンを介して第１のユーザー入力を受信し、当該第１のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算する。コンテンツレイヤーの動きは、（ａ）コンテンツレイヤーにおける視覚情報の第２の部分が表示領域の外にある最初のコンテンツレイヤーの位置から（ｂ）コンテンツレイヤーにおける視覚情報の第２の部分が表示領域内にある現在のコンテンツレイヤーの位置へのコンテンツレイヤーの動きを含む。コンピューティングデバイスは（ａ）から（ｂ）への動きをアニメートする。コンテンツレイヤーの動きは、コンテンツレイヤーの移動速度で第１の方向にある。コンピューティングデバイスは第１のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算する。セクションヘッダーレイヤーの動きは、（ｃ）セクションヘッダーレイヤーにおける視覚情報の第２の部分が表示領域外にある最初のセクションヘッダーレイヤーの位置から（ｄ）セクションヘッダーレイヤーにおける視覚情報の第２の部分が表示領域内にある現在のセクションヘッダーレイヤーの位置へのセクションヘッダーレイヤーの動きを含む。コンピューティングデバイスは（ｃ）から（ｄ）への動きをアニメートする。セクションヘッダーレイヤーの動きは、セクションヘッダーレイヤーの移動速度で第１の方向にある。コンピューティングデバイスは第１のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算する。タイトルレイヤーの動きは、（ｅ）タイトルレイヤーにおける視覚情報の第２の部分が表示領域の外にある最初のタイトルレイヤーの位置から（ｆ）タイトルレイヤーにおける視覚情報の第２の部分が表示領域内にある現在のタイトルレイヤーの位置へのタイトルレイヤーの動きを含む。コンピューティングデバイスは（ｅ）から（ｆ）への動きをアニメートする。タイトルレイヤーの動きは、タイトルレイヤーの移動速度で第１の方向にある。コンピューティングデバイスは、タッチスクリーンを介して第２のユーザー入力を受信し、当該第２のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算する。スクロール可能な要素の動きは、（ｇ）スクロール可能な要素における視覚情報の第２の部分が表示領域外にある最初のスクロール可能な要素の位置から（ｈ）スクロール可能な要素における視覚情報の第２の部分が表示領域内にある現在のスクロール可能な要素の位置への、スクロール可能な要素における視覚情報の動きを含む。コンピューティングデバイスは（ｇ）から（ｈ）への動きをアニメートする。スクロール可能な要素の動きは第１の方向と実質的に直交する第２の方向にある。タイトルレイヤーの移動速度は、コンテンツレイヤーの移動速度及びセクションヘッダーレイヤーの移動速度とは異なる。コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは互いに実質的に並行であり、互いに対して重複しない。
【０００８】
レイヤーはロックポイントを含んでもよい。たとえば、コンテンツペインを含むコンテンツレイヤーは、コンテンツペインの数及び／又は位置に基づいて（例えば、自動的に）決定されるロックポイントを有してもよい。ロックポイントは他の方法で設定することができる。例えば、ロックポイントは、第１のレイヤーにおけるユーザーインターフェース要素の終了位置などのレイヤーの以前の状態のうちのいくつかの側面に基づいてもよい。第２のレイヤー（例えば、背景レイヤー、タイトルレイヤー、又はセクションヘッダーレイヤー）におけるロックポイントは、第１のレイヤーのロックポイントに対応する第２のレイヤーのロックポイントを有してもよい。移動速度はロックポイント間の距離に基づいてもよい。たとえば、移動速度は第２のレイヤーのロックポイント間の距離と第２のレイヤーのロックポイントに対応する第１のレイヤーのロックポイント（例えば、コンテンツレイヤーのロックポイント）間の距離との間の差に比例してもよい。
【０００９】
ロッキングアニメーション（locking animation）を実行することができる。たとえば、ロッキングアニメーションは、レイヤー内のユーザーインターフェース要素における閾値数の画素が表示領域内にあるかどうかを決定すること、及び、その決定に基づいて、ユーザーインターフェース要素が表示領域において可視であるように現在の位置からロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。別の例として、ロッキングアニメーションは、ロックポイントを選択すること、及び、現在の位置から、選択されたロックポイントが表示領域の一部と合わせられるロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。現在の第２のレイヤーの位置から第１のレイヤーのロッキングアニメーション後の位置に対応する第２のレイヤーのロッキングアニメーション後の位置（例えば、第２のレイヤーのロックポイントが選択された第１のレイヤーのロックポイントに合わせられる、第２のレイヤーの位置）への第２のレイヤーにおける遷移などの他の遷移は同様にアニメートすることができる。別の例として、ロッキングアニメーションは、第１のレイヤー（例えば、コンテンツレイヤー）におけるユーザーインターフェース要素（例えば、コンテンツペイン）に関連付けられた第１のレイヤーのロックポイントを選択すること、及び、現在の第１のレイヤーの位置から、選択された第１のレイヤーのロックポイントが表示領域の一部と合わせられてユーザーインターフェース要素が表示領域において可視となるような第１のレイヤーのロッキングアニメーション後の位置への、第１のレイヤーにおける遷移をアニメートすることを含む。ロッキングアニメーションはユーザーのジェスチャーに基づいて実行することができる。例えば、ロックポイントは、指をスライドさせる（フリック）ジェスチャーの速度又は軽くたたく（タップ）ジェスチャーの位置に基づいて選択することができる。
【００１０】
ロッキングアニメーションはレイヤーのユーザーインターフェース要素における直交する動き（例えば、垂直方向の動き）に適応させることができる。たとえば、垂直のロッキングアニメーションは垂直にスクロール可能な要素（例えば、リスト）において実行することができ、当該垂直のロッキングアニメーションは、垂直にスクロール可能な要素におけるロックポイントが表示領域の一部と垂直に合わせられるように当該垂直にスクロール可能な要素を動かすことを含む。
【００１１】
ラッピングアニメーションが実行されてもよい。たとえば、２つのレイヤーの各々が先頭と末尾を含み、これらのレイヤーの末尾が現在の位置に表示される場合、ラッピングアニメーションを実行することは、現在の第１のレイヤーの位置から第１のレイヤーの先頭が表示されるラッピングアニメーション後の第１のレイヤーの位置への第１のレイヤーにおける遷移をアニメートすること、及び、現在の第２のレイヤーの位置から第２のレイヤーの先頭が表示されるラッピングアニメーション後の第２のレイヤーの位置への第２のレイヤーにおける遷移をアニメートすることを含む。遷移をアニメートすることは、他の移動速度とは異なるラッピング移動速度で視覚情報を動かすことを含んでもよい。
【００１２】
レイヤー内の動き（例えば、移動速度、方向、及び現在の位置）は、ユーザー入力に基づいて計算することができる。たとえば、現在の位置は最初の位置、ジェスチャーの方向及び速度に基づいてもよい。レイヤーにおける動きはまた、他のレイヤーの位置に基づいて計算することができる。たとえば、現在の第２のレイヤーの位置は、第１のレイヤーのロックポイントに対応する第２のレイヤーのロックポイントの位置に基づいて現在の第２のレイヤーの位置を計算することなどにより、計算された現在の第１のレイヤーの位置に基づいて計算することができる。
【００１３】
ジェスチャーは、例えば、パン、ドラッグ、フリック、タップのインタラクションを含んでもよい。フリックは、ジェスチャーの動きの速度が閾値を超えるかどうかを決定することによって検出することができる。方向を示すジェスチャーは、示された方向に又はある他の方向に動きを引き起こすことができる。たとえば、水平方向のジェスチャーは、垂直又は水平方向の動きを引き起こしてもよい。
【００１４】
移動速度は異なる方法で決定することができる。たとえば、レイヤーの移動速度はレイヤーの動作比率に基づいて計算することができ、動作比率は別のレイヤーの最大幅で割ったレイヤーの幅である。別の例として、移動速度は第１のレイヤーの長さと第２のレイヤーの長さの差に基づいてもよい。
【００１５】
さらなるレイヤーを追加することができる。たとえば、グラフィカルユーザーインターフェースは、第１及び第２のレイヤーと実質的に平行な第３のレイヤー（又はより多くのレイヤー）を含んでもよい。レイヤーにおける移動速度はそれぞれのレイヤーの長さの違いに比例してもよい。１つの実施例において、セクションヘッダーレイヤーは表示領域内でコンテンツレイヤーより上にあり、タイトルレイヤーは表示領域内でセクションヘッダーレイヤーより上にあり、コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは背景レイヤーと重なる。
【００１６】
本発明の上記の及び他の目的、特徴及び利点は、添付の図面を参照して進められる以下の詳細な説明からより明らかになるであろう。
【図面の簡単な説明】
【００１７】
【図１】１つ又は複数の記載された実施例による、ロックポイントを有する背景レイヤー及びコンテンツレイヤーを示す図である。
【図２】１つ又は複数の記載された実施例による、異なる速度で移動する複数のレイヤーをもつユーザーインターフェースを提供する例示的な技術を示すフローチャートである。
【図３Ａ】１つ又は複数の記載された実施例による、マルチレイヤーＵＩシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図３Ｂ】１つ又は複数の記載された実施例による、マルチレイヤーＵＩシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図３Ｃ】１つ又は複数の記載された実施例による、マルチレイヤーＵＩシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図３Ｄ】１つ又は複数の記載された実施例による、表示領域が横長の形状で方向付けられる、図３Ａ−３Ｃの複数のレイヤーを示す図である。
【図４】１つ又は複数の記載された実施例による、ＵＩシステムがマルチレイヤーＧＵＩの第１の方向の動きを計算する、例示的な技術を示すフローチャートである。
【図５Ａ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図５Ｂ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図５Ｃ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図５Ｄ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図６Ａ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで（in tandem）移動する複数のＵＩレイヤーを示す図である。
【図６Ｂ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで移動する複数のＵＩレイヤーを示す図である。
【図６Ｃ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで移動する複数のＵＩレイヤーを示す図である。
【図６Ｄ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで移動する複数のＵＩレイヤーを示す図である。
【図６Ｅ】１つ又は複数の記載された実施例による、コンテンツレイヤーにおけるリストについて可能な上向き及び下向きの動きが示される、図６Ａ−６Ｄの複数のＵＩレイヤーを示す図である。
【図７】１つ又は複数の記載された実施例による、第１の方向に直交する第２の方向に移動するように動作可能であるＵＩ要素をもつ少なくとも１つのレイヤーを有するマルチレイヤーＧＵＩにおいてＵＩシステムが第１の方向の動きを計算する例示的な技術を示すフローチャートである。
【図８Ａ】１つ又は複数の記載された実施例による、背景レイヤーを含む複数のＵＩレイヤーを示す図である。
【図８Ｂ】１つ又は複数の記載された実施例による、背景レイヤーを含む複数のＵＩレイヤーを示す図である。
【図８Ｃ】１つ又は複数の記載された実施例による、背景レイヤーを含む複数のＵＩレイヤーを示す図である。
【図９】記載された実施例を実施することができるマルチレイヤーＵＩシステムを示す図である。
【図１０】いくつかの記載された実施例を実施することができる適切なコンピューティング環境の一般的な例を示す。
【図１１】１つ又は複数の記載された実施例を実施することができる適切な実施環境の一般的な例を示す。
【図１２】１つ又は複数の記載された実施例を実施することができるモバイルコンピューティングデバイスの一般的な例を示す。
【発明を実施するための形態】
【００１８】
互いに関連する視覚情報のレイヤーが異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。１つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さの関数である速度で同じ方向に移動する。たとえば、グラフィカルユーザーインターフェース（ＧＵＩ）は、背景レイヤー、タイトルレイヤー、コンテンツレイヤーを含む。特定の方向（例えば、水平方向に左から右へ）にコンテンツレイヤーを介してユーザーがナビゲートすることはまた、背景レイヤー及び／又はタイトルレイヤーにおける同じ方向の動きを引き起こす。動きの量及び性質は、レイヤーの相対的な長さ、又は対応するロックポイント間の相対距離などの１つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーより（ピクセルの観点から）長い場合、コンテンツレイヤーは背景レイヤーより（ピクセルベースで）速く移動する。
【００１９】
本明細書に記載の実施例に対する様々な代替手段が可能である。たとえば、フローチャート図を参照して説明される技術は、ある段階を繰り返したり省略したりすることなどによって、フローチャートに示される段階の順序を変えることにより、変更することができる。別の例として、システム図を参照して説明されるシステムは、ある段階を繰り返したり省略したりすることなどによって、図面に示す処理の段階の順序を変えることにより、変更することできる。別の例として、図面を参照して説明されるユーザーインターフェースは、ある特徴を省略することなどによって、図に示すユーザーインターフェースの機能の内容や配置を変えることにより、変更することができる。別の例として、いくつかの実施例が特定のデバイス及びユーザー入力機構（例えば、タッチスクリーンインターフェースを備えたモバイルデバイス）を参照して説明されるが、説明される技術及び手段は他のデバイス及び／又はユーザー入力機構とともに使用することができる。
【００２０】
様々な技術及び手段を組み合わせて又は独立して使用することができる。異なる実施例は記載される技術や手段のうちの１つ又は複数を実施する。
Ｉ．階層化グラフィカルユーザーインターフェース技術及び手段
効果的なユーザーインターフェースの設計には多くの課題がある。１つの課題は、ディスプレイのスペースの制約を考慮して、最適な量の視覚情報や機能をユーザーにどのように提供するか、ということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型のディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、しばしば、ディスプレイに収まらない、より多くの利用可能な情報や機能が存在するためである。
【００２１】
互いの上にデータのレイヤーを置いて、それらが異なる方法で動くことを可能にすることによって、グラフィカルユーザーインターフェースは、ディスプレイ上で可視ではないユーザーの現在の活動に関連するより多くの情報がある場合であっても、ユーザーが見ている情報のコンテキストを提供することができる。例えば、コンテンツレイヤーは少なくともある程度独立して動くことができて、ユーザーがコンテンツレイヤーの異なる部分を視界に入るように動かしたり視界の外へ動かしたりすることを可能にするが、コンテンツレイヤーに関連付けられた別のレイヤーが当該コンテンツレイヤーよりもより少ない程度に動く場合であっても、当該コンテンツレイヤーに関連付けられた別のレイヤーのある一部は可視のままである。
【００２２】
記載される技術及び手段は、グラフィカルユーザーインターフェース（ＧＵＩ）などのユーザーインターフェース（ＵＩ）における情報（例えば、視覚情報、機能情報及びメタデータ）を、レイヤー（例えば、平行なレイヤー又は少なくとも実質的に平行なレイヤー）に分離すること、及び異なる方法で（例えば、異なる速度で）このようなレイヤーを移動することに関する。たとえば、説明される実施例は、互いに対して異なる速度で移動するＵＩレイヤーを示すマルチレイヤーＵＩシステムを含む。以下により詳細に記載されるように、各レイヤーにおける移動速度は、レイヤーにおいて視覚的に提示されるべきデータ（例えば、テキスト又はグラフィックス）の量、又は対応するロックポイント間の相対距離などを含む、いくつかの要因に依存し得る。レイヤーにおいて視覚的に提示されるべきデータの量は、例えば、ディスプレイ上でレンダリングされるか又はディスプレイ上での可能なレンダリングのために配置されるようなデータの水平方向に測定される長さを決定することによって測定することができる。長さはピクセル単位で又は他の適当な尺度（例えば、テキストの文字列における文字数）によって測定することができる。より大きなデータを有しより速い速度で移動するレイヤーは、より遅い速度で移動するより小さなデータ量のレイヤーよりも大きな画素数のぶんだけ前へ進むことができる。レイヤーの移動速度はさまざまな方法で決定することができる。たとえば、低速のレイヤーの移動速度は高速のレイヤーの移動速度から導くことができ、その逆も同様である。又は、レイヤーの移動速度は互いに独立して決定することができる。
【００２３】
ＵＩの様々なレイヤーの動きは、通常、ユーザーインタラクションにある程度依存する。例えば、レイヤーのある部分から別の部分に移動しようとするユーザーは、望ましい移動方向を示すためにユーザー入力を提供する。ユーザー入力は、ディスプレイ上の１つ又は複数のレイヤーにおいて動きを引き起こすことができる。いくつかの実施例では、ユーザーは、タッチスクリーンとインタラクトすることによって、デバイスの表示領域に表示されるレイヤーの動きを引き起こす。インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及び、タッチスクリーンの表面上でそれを（例えば、フリック動作又はスイープ動作によって）移動させて所望の方向にレイヤーを移動させることを含んでもよい。また、ユーザーは、キーパッド又はキーボード上のボタン（例えば、方向ボタン）を押すこと、トラックボールを動かすこと、マウスでポイントしてクリックすること、音声コマンドを行うことなどによって、いくつかの他の方法でレイヤーとインタラクトすることができる。
【００２４】
ユーザーインタラクションがレイヤーにおける動きを引き起こすとき、レイヤーの動きは、通常、レイヤーの長さ並びにユーザーによって行われる動きの大きさ、移動速度及び方向の関数である。たとえば、タッチスクリーン上での左方向へのフリック動作は、表示領域に対するレイヤーの左方向への動きを生成する。レイヤーはまた、レイヤーが視覚的なコンテキストをユーザーに提供しつつ異なる速度で移動することができるように、互いに対して配置することができる。たとえば、セクションヘッダー（例えば、「履歴」などのテキスト文字列）は、コンテンツレイヤーにおける可視のコンテンツ及び画面の外のコンテンツ（例えば、現在再生しているメディアファイル及び最近再生されたメディアのリストを表す画像）にまたがって、コンテンツレイヤーとは異なる速度で移動するがコンテンツのコンテキストを提供することができる。
【００２５】
実施例及び／又はユーザーの好みに応じて、ユーザー入力はレイヤーにおける異なる種類の動きを生成するために異なる方法で解釈することができる。たとえば、マルチレイヤーＵＩシステムは、左又は右への任意の動き、水平面よりかなり上又は下に延在する斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができ、システムはより正確な動きを要求することができる。別の例として、マルチレイヤーＵＩシステムは、レイヤーを移動する前に、そのレイヤーが占める表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを要求してもよいし、又はシステムは、レイヤーにおける動きを引き起こすためにタッチスクリーンの他の部分とのインタラクションを可能にすることができる。別の例として、ユーザーは、要素のリストなどの一度に画面に表示されないコンテンツレイヤーの一部において上下にスクロールするために上向き又は下向きの動きを使用することができ、そのような上向き／下向きの動きはさらに斜めの動きの効果のために左／右の動きと組み合わせることができる。
【００２６】
レイヤー内の特定の動きを生成する必要があるユーザーの動きの実際の量及び方向は、実施例やユーザーの好みに応じて変わる。たとえば、マルチレイヤーＵＩシステムは、ユーザーの動きの大きさや移動速度（又は速度）に応じて（例えば、ピクセルの観点からの）レイヤーにおける運動量を計算するために使用されるデフォルト設定を含んでもよい。別の例として、ユーザーは、タッチスクリーン上での指先又はスタイラスの同じ動作がコントロールの設定に応じてレイヤーについてのより小さな又はより大きな動きを生成するように、タッチスクリーンの感度コントロールを調整することができる。
【００２７】
いくつかの実施例では、レイヤーはロックポイントを含む。レイヤーのロックポイントは、デバイスの表示領域が整列される対応する位置を示す。たとえば、表示領域の左端が左端のロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー上の位置に移動する場合、表示領域の左端はまた、他のレイヤーの各々における対応する左端のロックポイント「Ａ」において合わせられる。ロックポイントはまた、表示領域の右端（右端のロックポイント）の位置合わせ、又は他の種類の位置合わせ（例えば、ロックポイントを中央に置く）を示してもよい。通常、各レイヤーにおける対応するロックポイントは、レイヤーが異なる速度で移動するということを考慮して配置される。例えば、コンテンツレイヤーにおける第１のロックポイントと第２のロックポイントとの間の距離が背景レイヤーにおける対応する第１のロックポイントと第２のロックポイントとの間の距離の２倍である場合、背景レイヤーは、２つのロックポイント間で移行するときにコンテンツレイヤーの半分の速度で移動する。
【００２８】
図１に示す例において、背景レイヤー１１０及びコンテンツレイヤー１１２は、対応する左端ロックポイント 「Ａ」、「Ｃ」、「Ｅ」及び「Ｇ」、並びに対応する右端ロックポイント「Ｂ］、「Ｄ」、「Ｆ」及び「Ｈ」を有する。左端のロックポイントは表示領域の左端（図示せず）に合わせ、右端ロックポイントは表示領域の右端に合わせる。ロックポイントに対応する左端又は右端の位置合わせは、表示領域の端とのロックポイントの正確な位置合わせを含んでもよく、又はロックポイントと表示領域のエッジとの間のある量のパディング（padding）を含んでもよい。コンテンツレイヤー１１２において、左端のロックポイントは、コンテンツペイン（例えば、それぞれ、コンテンツペイン１２０、１２２、１２４及び１２６）の左端に合い、右端のロックポイントはコンテンツペインの右端に合う。２つのレイヤー１１０、１１２におけるロックポイント間のマッピングは２つのレイヤー間の矢印及び背景ペイン１０２内の破線によって示される。
【００２９】
図１に示すロックポイントは、一般的にロックポイントの完全な組を表すものではない。代替手段としてロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央のロックポイントは、表示領域の中央との位置合わせを示すことができる。別の代替手段として、より少ないロックポイントを使用することができ、又は表示可能な領域間のオーバーラップを提供するためにより多くのロックポイントを使用することができる。例えば、ロックポイントは左端又は右端ロックポイントのいずれかに限定されてもよいし、又はロックポイントはレイヤーのある部分について使用できるが他については使用できないものであってもよい。別の代替手段として、ロックポイントは省略することができる。
【００３０】
レイヤー内の対応する位置を示すことに加えて、ロックポイントは他の挙動を示すことができる。例えば、ロックポイントは、ロックポイントに対応するレイヤーの一部がディスプレイ上で見えてくるときにレイヤーが移動するコンテンツレイヤーにおける位置を示すことができる。これは、例えば、画像、リスト又は他のコンテンツ要素が表示領域の左端又は右端の近くで部分的に見えるようになるときに有用となる−コンテンツレイヤーは、表示領域のエッジが適切なロックポイントと合うようにレイヤーを動かすことによって自動的にコンテンツ要素を完全に見えるようにすることができる。ロックアニメーションはフリックジェスチャーやパンジェスチャーなどのナビゲーションイベントの最後に実行することができ、特定のロックポイントにレイヤーを合わせる。ロックポイントに正確に合っていないユーザーが生成した動きをナビゲーションイベントが生成する場合、ロックアニメーションはレイヤーを合わせるために使用することができる。例として、ロックアニメーションは、（例えば、２つのコンテンツペインの一部が表示領域において可視である場合に）２つのコンテンツペイン間の位置へのコンテンツレイヤーの動きを引き起こすナビゲーションイベントの最後に実行することができる。マルチレイヤーＵＩシステムは、どのコンテンツペインが表示領域においてより多くのスペースを占めているかを確認することができ、ロックアニメーションを使用してそのペインへ移行することができる。これにより、レイヤーの全体像（overall look）を向上させることができ、表示領域において情報や機能（例えば、機能的なＵＩ要素）を見えるようにするときに有効である。
【００３１】
ロックポイントはまた、ナビゲーション中にロッキング「ノッチ」又は「バンプ」効果を提供するのに役立つ。例えば、ユーザーがコンテンツレイヤーの長さに沿って移動するとき、レイヤーは、ユーザーによってなされる各ナビゲーション動作（例えば、タッチスクリーン上のフリック動作やパン動作）の後に（例えば、一定の間隔で、コンテンツ要素間など）ロックポイントにおいて停止してもよい。
【００３２】
様々なレイヤーの動きはコンテキストに応じて異なってもよい。たとえば、ユーザーは、コンテンツレイヤーの始めから左にナビゲートしてコンテンツレイヤーの端に到達したり、コンテンツレイヤーの端から右にナビゲートしてコンテンツレイヤーの始めに到達したりすることができる。このラッピング（wrapping）機能（特徴）は、コンテンツレイヤーを通じてナビゲートするときにより多くの柔軟性をもたらす。ラッピングはさまざまな方法でマルチレイヤーＵＩシステムによって扱うことができる。たとえば、ラッピングは、タイトルレイヤーや背景レイヤーなどのレイヤーの端からそのようなレイヤーの始めへの、又はその逆の、迅速な移行を示すアニメーションを生成することによって処理することができる。このようなアニメーションは、コンテンツレイヤーにおける通常のパン動作と、又はロッキングアニメーションなどの、コンテンツレイヤーにおける他のアニメーションと、組み合わせることができる。しかし、ラッピング機能は必ずしも必要ではない。
例１−複数のＵＩレイヤー
図２は、異なる速度で移動する複数のレイヤーを備えるユーザーインターフェースを提供する例示的な技術２００を示すフローチャートである。２１０において、マルチレイヤーＵＩシステムは、（例えば、コンピューティングデバイスの表示領域において）同時に表示される平行なレイヤーを含むユーザーインターフェースを提供する。一般的に、レイヤーの少なくとも１つの少なくとも一部は表示領域に表示されない。２２０において、システムはレイヤーにおいて行われるべき動きを示すユーザー入力を受信する。たとえば、コンテンツレイヤーが表示領域の右端を超える場合、ユーザーは、コンテンツレイヤーの異なる部分を見るために、コンテンツレイヤーにおけるパン動作を引き起こすべくタッチスクリーンとインタラクトすることができる。２３０において、システムは、ユーザー入力に少なくとも部分的に応じて、異なる移動速度の平行なレイヤーにおける動きをレンダリングする。たとえば、システムは、コンテンツレイヤーを、タッチスクリーン上のパンジェスチャーの速度に等しい速度で移動させ、タイトルレイヤー及び背景レイヤーを、より遅い速度で移動させることができる。
【００３３】
図３Ａ−３Ｃは、表示領域３００を備えたディスプレイを有するデバイスについてマルチレイヤーＵＩシステムによって提示されたＧＵＩにおける、複数のレイヤー３１０、３１２、３１４を示す図である。表示領域３００は、スマートフォンや同様のモバイルコンピューティングデバイスのディスプレイの通常の寸法を有する。図３Ａ−３Ｃに示した例によれば、ユーザー３０２（手のアイコンで表される）は、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー３１４とインタラクトする。このインタラクションは、例えば、指先、スタイラス又は他の物体によってタッチスクリーンに接触すること、及びタッチスクリーンの表面上で（例えば、フリック動作又はスイープ動作によって）それを移動させることを含んでもよい。
【００３４】
コンテンツレイヤー３１４はコンテンツ要素（例えば、コンテンツ画像３３０Ａ−Ｈ）を含む。レイヤー３１０、３１２はテキスト情報（それぞれ「Ｃａｔｅｇｏｒｙ（カテゴリー）」及び「Ｓｅｌｅｃｔｅｄ Ｓｕｂｃａｔｅｇｏｒｙ（選択されたサブカテゴリー）」）を含む。コンテンツレイヤー３１４の長さはレイヤー３１２の長さの約２倍であるように示され、レイヤー３１２の長さはレイヤー３１０の長さの約２倍であるように示される。
【００３５】
図３Ａ−３Ｃにおいて、ユーザー３０２によって引き起こされ得るレイヤーの動きの方向が、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー３１０、３１２、３１４の可能な動き（例えば、左又は右の水平方向の動き）を示す。
【００３６】
図３Ａ−３Ｃに示す例では、システムは、左又は右へのユーザーの動き、水平面より上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きを示す入力として解釈する。図３Ａ−３Ｃに示す例では、コンテンツレイヤー３１４に対応する表示領域３００の一部とユーザー３０２がインタラクトすることを示すが、システムは、コンテンツレイヤー３１４によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムは、レイヤー３１０、３１２、３１４における動きを引き起こすためにタッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域３００の部分に相当する部分）とのインタラクションを可能にする。
【００３７】
ユーザー入力が右または左への動きを示す場合、システムは、表示領域３００に対するレイヤー３１０、３１２、３１４の右方向又は左方向の動きを生成する。レイヤー３１０,３１２、３１４の移動量は、レイヤーにおけるデータ及びユーザーによって行われた動きの大きさや移動速度（又は速度）の関数である。
【００３８】
図３Ａ−３Ｃに示す例において、レイヤー３１０、３１２、３１４はラッピングアニメーション中を除いて、次の規則に従って動く：
１．コンテンツレイヤー３１４はレイヤー３１２の約２倍の速度で移動し、レイヤー３１２はレイヤー３１４の約半分の長さである。
【００３９】
２．レイヤー３１２はレイヤー３１０の約２倍の速度で移動し、レイヤー３１０はレイヤー３１２の約半分の長さである。
３．コンテンツレイヤー３１４はレイヤー３１０の約４倍の速度で移動し、レイヤー３１０はレイヤー３１４の約１／４の長さである。
【００４０】
レイヤー３１０、３１２、３１４の動きは、いくつかの状況では、上記の規則とは異なる場合がある。図３Ａ−３Ｃに示す例では、ラッピングが許可される。矢印は、ユーザーがコンテンツレイヤー３１４の先頭（図３Ａに示す位置）から左にナビゲートすることができ、コンテンツレイヤー３１４の終端（図３Ｃに示す位置）から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。図３Ａ−３Ｃに示す例において、レイヤー３１０及び３１２におけるテキストは、コンテンツレイヤーの先頭に巻き戻すときにより速く移動する。図３Ｃにおいて、表示領域３００は、それぞれのテキスト文字列の末尾における、レイヤー３１０及び３１２内の、それぞれ１つ及び２つの文字の一部を示す。図３Ａに示す状態へ戻るためのラッピングアニメーションは、レイヤー３１０、３１２のテキストを右から見えるようにして、図３Ａに示す状態から図３Ｂに示す状態への移行などの他のコンテキストにおけるものよりも迅速な動きをもたらすことを含んでもよい。
【００４１】
図３Ａ−３Ｃにおいて、例としての左端「ロックポイント」「Ａ」、「Ｂ」及び「Ｃ」が各レイヤーに対して示される。左端のロックポイントは、各レイヤー上の、表示領域３００の左端の対応する位置を示す。たとえば、表示領域３００の左端がロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー３１４上の位置にナビゲートする場合、表示領域の左端はまた、図３Ａに示されるように、他のレイヤー３１０、３１２のロックポイント「Ａ」において合わせられる。図３Ｂにおいて、表示領域３００の左端は、レイヤー３１０、３１２、３１４の各々におけるロックポイント「Ｂ」にある。図３Ｃにおいて、表示領域３００の左端は、各レイヤーにおけるロックポイント「Ｃ」にある。
【００４２】
図３Ａ−３Ｃに示すロックポイントは、ロックポイントの完全な組を一般に表すものではなく、簡潔にするためだけにロックポイント「Ａ」、「Ｂ」及び「Ｃ」に制限されたものである。たとえば、左端のロックポイントは、コンテンツ画像３３０Ａ−３３０Ｈの各々について設定できる。代替的に、ロックポイントをほとんど使用しなくてもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端のロックポイントは表示領域３００の右端との位置合わせを示してもよいし、中央のロックポイントは表示領域３００の中央との位置合わせを示してもよい。
例２−表示の向きの変更
記載される技術及び手段は、横方向など、異なる方向で表示画面上で使用することができる。表示方向の変化は、例えば、ＵＩが横長の形状に方向付けられるように（例えば、ユーザーの好みによって）構成される場合、又はユーザーがデバイスを物理的に回転させる場合に生じ得る。デバイス内の１つ又は複数のセンサー（例えば、加速度計）は、デバイスがいつ回転されたかを検出し、それに応じて表示方向を調整するために使用することができる。図３Ｄに示す例では、表示領域は横長の形に方向付けられ、レイヤー３１２及び３１４のみを見ることができる。ただし、コンテンツレイヤーのより多くの部分を見ることができるようになって、ユーザーが一度にコンテンツレイヤー内のより多くのコンテンツ（例えば、コンテンツ画像３３０Ａ−３３０Ｄ）を見ることを可能にする。代替的に、必要に応じて、レイヤーの高さを低減し、フォントや画像のサイズを減らすことによるなどして、すべてのレイヤーを見続けることができるよう維持するために調整を行うことができる。例えば、レイヤー３１０及び３１２の高さを低くするとともに、テキストのフォントのサイズを対応付けて小さくすることができ、その結果、コンテンツレイヤー３１４をナビゲートを容易にするために同じサイズに保ちつつ、レイヤー３１０及び３１２がなお見ることができるようにすることができる。
【００４３】
図３Ａ−３Ｃの場合のように、ユーザー３０２は、コンテンツレイヤー３１４に沿ってナビゲートするために（横方向に）左方向又は右方向の動きをすることができる。各レイヤーにおけるロックポイント「Ａ」、「Ｂ」及び「Ｃ」の位置づけ並びにレイヤーの相対的な長さは、コンテンツレイヤー３１４がその上のレイヤー３１２の約２倍の速度で移動することを示す。また、ロックポイントの位置及びロックポイント間の距離は、再配向（reorientation）の効果（例えば、表示領域の新たな有効幅）を考慮するように動的に調整することができる。しかし、このような調整は必ずしも必要ではない。例えば、表示領域が等しい高さと幅を有する場合、横方向への表示領域の再配向をしても表示領域の有効幅は変更されない。
例３−複数のＵＩレイヤーにおける動きの計算
図４は、ＵＩシステムがマルチレイヤーＧＵＩ（例えば、図３Ａ−３Ｃに示すＧＵＩ）において第１の方向（例えば、水平方向）の動きを計算する例示的な技術４００を示すフローチャートである。
【００４４】
４１０において、ＵＩシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第１のレイヤー（例えば、コンテンツレイヤー３１４）における視覚情報（例えば、図３Ａに示すコンテンツ画像３３０）の第１の部分はタッチスクリーンの表示領域（例えば、表示領域３００）内にある。４２０において、ＵＩシステムは、タッチスクリーン上のジェスチャーに対応するユーザー入力を受信する。４３０において、ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて第１の動きを計算する。第１の動きは、第１のレイヤーにおける視覚情報の第２の部分（例えば、コンテンツ画像３３０Ｃ）が表示領域の外にある最初の第１のレイヤーの位置（例えば、図３Ａに示す位置）から、第１のレイヤーにおける視覚情報の第２の部分が表示領域内にある現在の第１のレイヤーの位置（例えば、図３Ｂに示す位置）への、第１のレイヤーの動きである。第１の動きは、第１の移動速度で第１の方向（例えば、右方向、水平方向）である。第１の移動速度はジェスチャーの動きの速度に基づく。たとえば、第１の移動速度は、タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、ジェスチャーの動きの速度（例えば、タッチスクリーン上のユーザーの指や他の物体の移動速度）と実質的に等しくすることができる。４４０において、ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて、第１の動きと実質的に平行な第２の動きを計算する。第２の動きは、最初の第２のレイヤーの位置（例えば、図３Ａに示す位置）から現在の第２のレイヤーの位置（例えば、図３Ｂに示す位置）への第２のレイヤー（例えば、レイヤー３１２）における視覚情報の動きである。第２の動きは、第１の移動速度とは異なる第２の移動速度で第１の方向（例えば、右方向、水平方向）にある。
【００４５】
動きは（例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での）表示のためにアニメート及び／又はレンダリングすることができる。
例４−変化する速度で動く個々のレイヤー
図５Ａ−５Ｄは、セクションヘッダーレイヤー５１２の異なる部分がコンテンツレイヤー５１４の異なる部分に関連付けられる、３つのレイヤー５１０、５１２、５１４を備えたマルチレイヤーＵＩシステムによって提示されるＧＵＩを示す図である。図５Ａ−５Ｄに示す例によれば、ユーザー（図示せず）はコンテンツレイヤー５１４とインタラクトする。たとえば、ユーザーは、コンテンツレイヤー内の異なるセクション（例えば、セクション１ａ、１ｂ、１ｃ、１ｄ、２ａ、２ｂ、２ｃ、又は２ｄ）を強調するためにナビゲーションボタン（図示せず）を押すことによって、コンテンツレイヤー５１４をナビゲートする。また、ユーザーは、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー５１４とインタラクトする。当該インタラクションは、例えば、指先、スタイラス又は他の物体によりタッチスクリーンに接触すること、及びタッチスクリーンの表面上で（例えば、フリック動作又はスイープ動作によって）それを移動させることを含んでもよい。
【００４６】
コンテンツレイヤー５１４は、画像、アイコン、テキスト文字列やリンクのリスト、又はいくつかの他のコンテンツであってもよいセクション１ａ、１ｂ、１ｃ、１ｄ、２ａ、２ｂ、２ｃ、及び２ｄを含む。他のレイヤー５１０、５１２はテキスト情報を含む。セクションヘッダーレイヤー５１２は2つのテキスト文字列（「Ｆｅａｔｕｒｅ １（機能１）」及び「Ｆｅａｔｕｒｅ ２（機能２）」）を含む。「Ｆｅａｔｕｒｅ １」はセクション１ａ、１ｂ、１ｃ及び１ｄに関連付けられる。「Ｆｅａｔｕｒｅ ２」はセクション２ａ、２ｂ、２ｃ及び２ｄに関連付けられる。レイヤー５１０は1つのテキスト文字列（「Ａｐｐｌｉｃａｔｉｏｎ（アプリケーション）」）を含む。コンテンツレイヤー５１４の長さは、セクションヘッダーレイヤー５１２の全体の長さ（例えば、２つの文字列の合計の長さ）より長く、レイヤー５１０の長さより長くなるように示される。
【００４７】
図５Ａ−５Ｄにおいて、ユーザーによって示すことができる動きの方向は、表示領域３００の上の左向き矢印及び右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー５１０、５１２、５１４の可能な動き（左又は右の水平方向の動き）を示す。
【００４８】
図５Ａ−図５Ｄに示す例では、ユーザーは、コンテンツレイヤー５１４において左又は右にナビゲートするときに、コンテンツレイヤー５１４の異なるセクション（例えば、図５Ａのセクション１ａ、図５Ｂのセクション１ｄ、図５Ｃのセクション２ａ、図５Ｄのセクション２ｄ）を強調表示する。ユーザー入力が右又は左への動きを示す場合、システムは、表示領域３００に対するレイヤー５１０、５１２、５１４の右方向又は左方向の動きを生成する。レイヤー５１０、５１２、５１４の移動量はレイヤー内のデータ及びユーザーによって行われる動きの大きさや移動速度（又は速度）の関数である。
【００４９】
図５Ａ−５Ｄにおいて、例示的な右端ロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」が各レイヤー５１０、５１２、５１４について示される。各レイヤーの右端ロックポイントは、各レイヤーの表示領域３００の右端の対応する位置を示す。たとえば、ユーザーがコンテンツレイヤー５１４のセクション１ａにナビゲートする場合、表示領域３００の右端はロックポイント「Ａ」にあり、表示領域３００の右端は、図５Ａに示すように、他のレイヤー５１０、５１２のロックポイント「Ａ」において合わせられる。図５Ｂにおいて、表示領域３００の右端は、レイヤー５１０、５１２、５１４の各々のロックポイント「Ｂ」にある。図５Ｃにおいて、表示領域３００の右端は、レイヤー５１０、５１２、５１４の各々のロックポイント「Ｃ」にある。図５Ｄにおいて、表示領域３００の右端は、レイヤー５１０、５１２、５１４の各々のロックポイント「Ｄ」にある。
【００５０】
図５Ａ−５Ｄに示すロックポイントは、ロックポイントの完全な組を一般的に示すものではなく、単に簡潔にするためにロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」に限定されたものである。たとえば、左端ロックポイントはコンテンツレイヤー５１４における１つ又は複数のセクションに対して設定することができる。代替的に、追加の右端のロックポイントを使用してもよく、より少ないロックポイントを使用してもよく、ロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央ロックポイントを、表示領域３００の中央に合わせるために使用することができる。
【００５１】
図５Ａ−図５Ｄに示す例では、レイヤー５１０、５１２、５１４は、ラッピングアニメーション中を除き、次の規則に従って動く。
１．セクションヘッダーレイヤー５１２における「Ｆｅａｔｕｒｅ １（機能１）」というテキスト文字列に関連付けられるコンテンツレイヤー５１４の部分（セクション１ａ、１ｂ、１ｃ及び１ｄ）は、「Ｆｅａｔｕｒｅ １」というテキスト文字列の約４倍の速度で移動する。「Ｆｅａｔｕｒｅ １」というテキスト文字列は、「Ｆｅａｔｕｒｅ １」というテキスト文字列に関連付けられるコンテンツレイヤー５１４の部分（セクション１ａ、１ｂ、１ｃ及び１ｄ）の約半分の長さであり、コンテンツレイヤー５１４において右端ロックポイント「Ａ」から右端ロックポイント「Ｂ」まで移動するべき距離はセクションヘッダーレイヤー５１２における対応するロックポイント間の距離の約４倍の長さとなる。同様に、セクション・ヘッダーレイヤー５１２の「Ｆｅａｔｕｒｅ ２（機能２）」というテキスト文字列に関連付けられたコンテンツレイヤー５１４の部分（セクション２ａ、２ｂ、２ｃ及び２ｄ）は「Ｆｅａｔｕｒｅ ２」というテキスト文字列の約４倍の速度で移動する。
【００５２】
２．セクションヘッダーレイヤー５１２における「Ｆｅａｔｕｒｅ １」というテキスト文字列に関連付けられたコンテンツレイヤー５１４の部分（セクション１ａ、１ｂ、１ｃ及び１ｄ）を通じてナビゲートする場合、テキスト文字列「Ｆｅａｔｕｒｅ １」はレイヤー５１０の約２倍の速度で移動する。「Ｆｅａｔｕｒｅ １」というテキスト文字列はレイヤー５１０におけるテキスト文字列「Ａｐｐｌｉｃａｔｉｏｎ（アプリケーション）」とほぼ同じ長さであるが、レイヤー５１０において右端ロックポイント「Ａ」から右端ロックポイント「Ｂ」に移動するべき距離は、セクションヘッダーレイヤー５１２内の対応するロックポイント間の距離の約半分である。同様に、セクションヘッダーレイヤー５１２におけるテキスト文字列「Ｆｅａｔｕｒｅ ２」に関連付けられるコンテンツレイヤー５１４の部分（セクション２ａ、２ｂ、２ｃ及び２ｄ）を通じてナビゲートするとき、「Ｆｅａｔｕｒｅ ２」というテキスト文字列はレイヤー５１０の約２倍の速度で移動する。
【００５３】
３．セクションヘッダーレイヤー５１２内のテキスト文字列「Ｆｅａｔｕｒｅ １」に関連付けられたコンテンツレイヤー５１４の部分からセクションヘッダーレイヤー５１２のテキスト文字列「Ｆｅａｔｕｒｅ ２」に関連付けられたコンテンツレイヤー５１４の部分に（すなわち、図５Ｂに示すセクション１ｄから図５Ｃに示すセクション２ａに）移動するとき、セクションヘッダーレイヤー５１２は、図５Ｃにおけるレイヤー５１２の右端ロックポイント「Ｂ」と右端ロックポイント「Ｃ」との間の距離によって示されるように、より速く移動する。
【００５４】
４．コンテンツレイヤー５１４はレイヤー３１０の約８倍の速度で移動する。コンテンツレイヤー５１４における隣接する右端ロックポイント間で（例えば、「Ａ」から「Ｂ」まで）移動する距離は、レイヤー５１０内の対応する右端ロックポイント間の距離の約８倍の長さとなる。
【００５５】
レイヤー５１０、５１２、５１４における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図５Ａ−図５Ｄに示す例では、ラッピングが可能となる。表示領域３００の上の矢印は、ユーザーが、コンテンツレイヤー５１４の先頭（図５Ａに示す位置）から左にナビゲートすることができ、コンテンツレイヤー５１４の端（図５Ｄに示す位置）から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。たとえば、図５Ｄに示す状態から図５Ａに示す状態へ戻るためのラッピングアニメーションは、レイヤー５１０、５１２のテキストを右から視界にもたらすことを含み、図５Ａに示す状態から図５Ｂに示す状態への移行などの他のコンテキストにおけるものよりもより速い移動に帰着する。
例５−並行のレイヤー移動
図６Ａ−６Ｄは、レイヤー６１４の上のレイヤー６１２と並行に（すなわち、同じ方向及び同じ速度で）動くコンテンツレイヤー６１４を含むマルチレイヤーＵＩシステムによって提示されるＧＵＩを示す図である。この例では、（手のアイコンで表される）ユーザー３０２は、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー６１４を介してナビゲートする。当該インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及びタッチスクリーンの表面上で（例えば、フリック動作又はスイープ動作により）それを動かすことを含んでもよい。
【００５６】
コンテンツレイヤー６１４は、（以下でより詳細に説明される）ゲームの画像６４０、６４２、６４４、リスト６５０、６５２、６５４、及びアバター６３０を含む。他のレイヤー６１０、６１２は、テキスト情報（レイヤー６１０の「Ｇａｍｅｓ（ゲーム）」、レイヤー６１２の「Ｓｐｏｔｌｉｇｈｔ（スポットライト）」、「Ｘｂｏｘ Ｌｉｖｅ」、「Ｒｅｑｕｅｓｔｓ（リクエスト）」及び「Ｃｏｌｌｅｃｔｉｏｎ（コレクション）」）を含む。図６Ａ−６Ｄにおいて、例示的なロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」がレイヤー６１０及び６１２について示される。水平方向の動きの観点では、コンテンツレイヤー６１４はレイヤー６１２にロックされ、レイヤー６１２について示されるロックポイントはまた、レイヤー６１４に適用される。
【００５７】
各レイヤーのロックポイントは、各レイヤーの表示領域３００の左端の対応する位置を示す。たとえば、表示領域３００の左端がロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー６１４上の位置にナビゲートするとき、表示領域３００の左端はまた、図６Ａに示すように、他のレイヤー６１０、６１２のロックポイント「Ａ」に合わせられる。図６Ｂにおいて、表示領域３００の左端は、レイヤー６１０、６１２、６１４の各々のロックポイント「Ｂ」にある。図６Ｃにおいて、表示領域３００の左端は、レイヤー６１０、６１２、６１４の各々のロックポイント「Ｃ」にある。図６Ｄにおいて、表示領域３００の左端は、レイヤー６１０、６１２、６１４の各々のロックポイント「Ｄ」にある。
【００５８】
図６Ａ−６Ｄに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、単に簡潔にするためにロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」に限定されたものである。例えば、右端ロックポイントを表示領域３００の右端と合わせるために追加することができ、表示領域３００の中央と合わせるために中央ロックポイントを追加することができる。代替的に、より少ないロックポイントを使用してもよく、より多くのロックポイントを使用してもよく、ロックポイントを省略してもよい。
【００５９】
ユーザー３０２によってレイヤー６１０、６１２、６１４において引き起こされ得る動きの方向は、図６Ａ−６Ｄにおける左向きの矢印及び右向きの矢印で示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー６１０、６１２、６１４の可能な動き（左又は右の水平方向の動き）を示す。システムは、左又は右へのユーザーの動き、水平面の上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができる。図６Ａ−６Ｅに示す例はコンテンツレイヤー６１４に対応する表示領域３００の一部とユーザー３０２がインタラクトすることを示すが、システムは、コンテンツレイヤー６１４によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムはまた、レイヤー６１０、６１２、６１４において動きを引き起こすために、タッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域に対応する部分）とのインタラクションを可能にする。
【００６０】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域３００に対する、レイヤー６１０、６１２、６１４の左方向又は右方向の動きを生成する。この例では、レイヤー６１０、６１２、６１４の水平移動量は、レイヤー内のデータやユーザーによって行われる動きの大きさや速度の関数である。レイヤー６１０、６１２、６１４はラッピングアニメーション中を除いて次の規則に従って水平方向に動く。
【００６１】
１．コンテンツレイヤー６１４の水平方向の動きはレイヤー６１２にロックされる。
２．レイヤー６１２及び６１４はそれぞれ、レイヤー６１０の約３倍の速度で水平に移動し、レイヤー６１０はレイヤー６１２及び６１４の約１／３の長さである。
【００６２】
レイヤー６１０、６１２、６１４における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図６Ａ−６Ｅに示す例では、ラッピングが可能となる。矢印は、ユーザーがコンテンツレイヤー６１４の先頭（図６Ａ及び図６Ｅに示す位置）から左にナビゲートすることができ、コンテンツレイヤー６１４の端（図６Ｄに示す位置）から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。図６Ａ及び６Ｄに示す例では、コンテンツレイヤー６１４の先頭に戻ってラッピングするとき、レイヤー６１０内のテキストはより速く動く。図６Ｄにおいて、表示領域３００は、「Ｇａｍｅｓ」というテキスト文字列の末尾の、レイヤー６１０における２文字の一部を示す。図６Ａに示す状態へ戻るためのラッピングアニメーションは、レイヤー６１０のテキストを含むレイヤー６１０、６１２、６１４のデータを右から視界にもたらすことを含み、図６Ａに示す状態から図６Ｂに示す状態への移行などの他のコンテキストにおけるものよりもより速いレイヤー６１０における動きに帰着する。
例６−レイヤーの要素の動き
全体のレイヤーの動きに加えて、ユーザーはまた、レイヤー内のデータ及びレイヤーがどのように配置されるかに応じて、レイヤーの要素又は部分における動きを引き起こすことができる。たとえば、ユーザーは、全体としてレイヤーにおいて引き起こされ得る動き（例えば、水平方向の動き）に対して直交する又は実質的に直交する、レイヤーの要素（例えば、リスト）における動き（例えば、垂直方向の動き）を引き起こすことができる。リストが表示領域に表示することができるものよりも多くの情報を含む場合などには、水平に動くレイヤー内のレイヤー要素の直交する動きはコンテンツレイヤーに埋め込まれたリスト内の縦スクロールを含んでもよい。また、縦に動くレイヤーを提示するシステムは、レイヤーの要素における水平の動きを可能にし得る。
【００６３】
図６Ａ及び図６Ｅにおいて、コンテンツレイヤー６１４内のリスト６５０は、表示領域３００において表示され得るものよりも多くの情報を含む。システムは、垂直面の左又は右へと延びる斜めの動きを含むユーザー３０２によってなされる上下の動きを、リスト６５０の有効な上向き又は下向きの動きとして解釈することができる。リスト６５０の移動量は、ユーザー３０２によってなされる動作の大きさ又は速度とリスト６５０内のデータとの関数であってもよい。したがって、リスト６５０のスクロールは、項目ごと、項目のページごと、又は動きの大きさや速度に依存する中間のものであってもよい。この例では、リスト６５０は、図６Ａの表示領域３００において見ることができない唯一のリスト項目を含み、したがって、小さな又は大きな下向きの動きの範囲はリスト６５０の最後までスクロールするのに十分なものとなり得る。図６Ａ及び図６Ｅに示すように、レイヤー内の他の視覚的情報（例えば、リスト６５０の外のコンテンツレイヤー６１４における視覚情報又は他のレイヤー内の視覚情報）の垂直方向の位置は、上向き又は下向きの動きに影響されない。この例では、（全体としてレイヤーに影響を与えるラッピングアニメーション及びロッキングアニメーションを含む）全体としてのレイヤーの動きは、水平方向の動き（モーションの主軸）に制限される。リスト６５０は、全体としてのレイヤー内の動きに直交する第２の軸に沿った動き（例えば、垂直方向の動き）を可能にするレイヤー内のユーザーインターフェース要素の例である。
【００６４】
図６Ａ及び６Ｅは、コンテンツレイヤー６１４におけるリスト６５０に対応する表示領域３００の一部とユーザー３０２がインタラクトすることを示す。また、システムは、リスト６５０において上方又は下方への移動を引き起こすために、タッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域３００の部分に相当する部分）とのインタラクションを可能にしてもよい。
【００６５】
ユーザー３０２によって引き起こされ得る動きの方向は、図６Ａにおける追加の下向きの矢印及び図６Ｅにおける追加の上向き矢印と一緒に、図６Ａ及び図６Ｅにおける左向きの矢印及び右向きの矢印によって示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー６１０、６１２、６１４の可能な動きを（左又は右の水平方向の動き）示す。下向き及び上向きの矢印は、ユーザーの動きに応答するリスト６５０の可能な動き（上又は下の垂直方向の動き）を示す。ユーザー３０２は、リスト６５０における上又は下の動作を行った後、コンテンツレイヤー６１４において右又は左に移動することができる。リスト６５０からコンテンツレイヤー６１４において左又は右にナビゲートするときに、リスト６５０の現在の位置（例えば、図６Ｅに示されるリスト最下部の位置）を保存することができ、また、システムはデフォルトの位置（例えば、図６Ａに示されるリスト最上部の位置）に戻ることができる。可能な動きを示す図６Ａ−６Ｅ（及び他の図）における矢印は説明の目的のために示されるが、表示領域３００はそれ自体が、レイヤー及び／又はリストについて可能な動きについてのグラフィカルな指標（矢印やシェブロンなど）を表示してもよい。
【００６６】
例７−直交する動きが可能な要素を備えたレイヤーにおける動作
図７は、第１の方向と直交する（又は実質的に直交する）第２の方向に移動するように動作可能であるＵＩ要素を備えた少なくとも１つのレイヤーを有するマルチレイヤーＧＵＩ（例えば、図６Ａ−６Ｅに示すＧＵＩ）において第１の方向（例えば、水平方向）の動きをＵＩシステムが計算する例示的な技術７００を示すフローチャートである。
【００６７】
７１０において、ＵＩシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第１のレイヤー（例えば、コンテンツレイヤー６１４）は第１の方向（例えば、水平方向）と実質的に直交する第２の方向（例えば、垂直方向）に移動するように動作可能なユーザーインターフェース要素（例えば、リスト６５０）を含む。第１のレイヤーにおける視覚情報の第１の部分（例えば、図６Ｂに示すリスト６５２）は、タッチスクリーンの表示領域（例えば、表示領域３００）内にある。
【００６８】
７２０において、ＵＩシステムは、タッチスクリーン上の第１のジェスチャーに対応する第１のユーザー入力を受信する。７３０において、ＵＩシステムは、第１のユーザー入力に少なくとも部分的に基づいて、第１の動きを計算する。第１の動きは、第１のレイヤーにおける視覚情報（例えば、リスト６５０）の第２の部分が表示領域の外にある最初の第１のレイヤーの位置（例えば、図６Ｂに示す位置）から、第１のレイヤーにおける視覚情報の第２の部分が表示領域内にある現在の第１のレイヤーの位置（例えば、図６Ａに示す位置）への、第１のレイヤーの動きである。第１の動きは、第１の移動速度で第１の方向（例えば、左向きの水平方向）である。７４０において、ＵＩシステムは、第１のユーザー入力に少なくとも部分的に基づいて、第１の動きと実質的に平行な第２の動きを計算する。第２の動きは、最初の第２のレイヤーの位置（例えば、図６Ｂに示す位置）から現在の第２のレイヤーの位置（例えば、図６Ａに示す位置）への第２のレイヤーにおける視覚情報の動きである。第２の動きは、第１の移動速度とは異なる第２の移動速度で第１の方向（例えば、左向きの水平方向）にある。
【００６９】
７５０において、ＵＩシステムは、タッチスクリーン上の第２のジェスチャーに対応する第２のユーザー入力を受信する。７６０において、ＵＩシステムは、第２のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き（例えば、垂直方向の動き）を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第１のレイヤーのユーザーインターフェース要素の視覚情報の動きである。
【００７０】
実質的に直交する動きは、最初の垂直位置（例えば、図６Ａに示すようなリスト６５０の位置）から現在の垂直位置（例えば、図６Ｅに示すようなリスト６５０の位置）への垂直方向にスクロール可能な要素（例えば、リスト６５０）の視覚情報の動きであってもよい。現在の垂直位置は、例えば、最初の垂直位置及び第２のジェスチャーの速度に基づいて計算することができる。垂直にスクロール可能な要素の視覚情報の一部は、垂直方向にスクロール可能な要素が最初の垂直位置（例えば、図６Ａに示すようなリスト６５０の位置）にあるときには表示領域の外にあってもよく、垂直にスクロール可能な要素が現在の垂直位置（例えば、図６Ｅに示すようなリスト６５０の位置）にあるときには表示領域内にあってもよい。
【００７１】
動きは、（例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での）表示のためにアニメート及び／又はレンダリングすることができる。
例８−アバター
レイヤーは、レイヤーにおける他の要素又はレイヤーのセクションなどの他の要素間の関係を示す要素を含んでもよい。他の要素間の関係を示す要素は、別々のレイヤーに含まれてもよいし、又はそれぞれの他の要素と同じレイヤーに含まれてもよい。例えば、アバターレイヤーは、ユーザーに関連する別のレイヤーにおける２つの関連するセクションにまたがる範囲の動きを備えた視覚的な要素（アバター）を含んでもよい。他の要素はまた、要素間の関係を示すために使用することができる。たとえば、音楽アーティストの画像は、アーティストのアルバムリストとアーティストのツアー日程のリストとの間の関係を示すために使用されてもよい。
【００７２】
図６Ａ−６Ｅにおいて、アバター６３０は、コンテンツレイヤーにおけるリスト６５２、６５４、及びレイヤー６１２におけるリスト６５２、６５４の上の見出し（それぞれ、「Ｘｂｏｘ Ｌｉｖｅ」及び「Ｒｅｑｕｅｓｔｓ（リクエスト）」）に関連付けられる。アバター６３０は、コンテンツレイヤーの一部（例えば、リスト６５２、６５４）の間の関係を示したりコンテンツレイヤーの一部に対する関心を引いたりするための視覚的な指示（cue）を提供することができる。図６Ｂにおいて、アバター６３０はリスト６５２とリスト６５４との間に配置される。図６Ｃにおいて、アバター６３０はリスト６５４のテキストの後ろに浮いているが、表示領域３００内に完全に残ったままである。図６Ｄにおいて、アバター６３０は部分的にのみ表示領域３００内にあり、表示領域内にある部分はゲームアイコン６４０、６４２、６４４の背後にある。表示領域３００の左端にアバター６３０を配置することは、ユーザー３０２に対して、ユーザー３０２がアバター６３０の方向にナビゲートする場合にはアバター６３０に関連付けられた情報（例えば、リスト６５２、６５４）が利用可能であることを示すことができる。アバター６３０は様々な速度で移動することができる。たとえば、アバター６３０は、図６Ｃと６Ｄとの間の移行の場合と比べて、図６Ｂと６Ｃとの間の移行においてより速く移動する。
【００７３】
代替的に、アバター６３０は、異なる方法で移動したり、他の機能を示したりすることができる。たとえば、アバター６３０は、コンテンツレイヤー６１４又はある他のレイヤーにおける特定の位置（例えば、ロックポイント）にロックすることができ、その結果、アバター６３０はそれがロックされているレイヤーと同じ水平速度で動く。別の代替手段として、アバター６３０は、リスト６５０などの上下にスクロールすることができるリストに関連付けることができ、当該関連付けられるリストが上下にスクロールするときに上下に動くことができる。
【００７４】
例９−背景レイヤー
図８Ａ−８Ｃは、３つのレイヤー３１０、３１２、３１４及び背景レイヤー８５０を備えたマルチレイヤーＵＩシステムによって提示されるＧＵＩを示す図である。この例では、（手のアイコンで表される）ユーザー３０２は、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー３１４とインタラクトする。
【００７５】
背景レイヤー８５０は他のレイヤーの背後に浮かんでいる。背景レイヤー８５０において視覚的に提示されるデータは、例えば、表示領域３００の境界を超えて延在する画像を含んでもよい。コンテンツレイヤー３１４は、コンテンツ要素（例えば、コンテンツ画像３３０Ａ−Ｈ）を含む。レイヤー３１０、３１２は、テキスト情報（それぞれ、「Ｃａｔｅｇｏｒｙ（カテゴリー）」及び「Ｓｅｌｅｃｔｅｄ Ｓｕｂｃａｔｅｇｏｒｙ（選択したサブカテゴリー）」）を含む。コンテンツレイヤー３１４の長さはレイヤー３１２の約２倍の長さになるように示され、レイヤー３１２の長さはレイヤー３１０の約２倍の長さであることが示される。背景レイヤー８５０の長さはレイヤー３１２の長さよりわずかに小さくなるように示される。
【００７６】
図８Ａ−８Ｃにおいて、ユーザー３０２によってレイヤー３１０、３１２、３１４、８５０において引き起こされ得る動きの方向は、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザーの動きに応答して、レイヤー３１０、３１２、３１４、８５０の可能な動き（左又は右の水平方向の動き）を示す。この例において、システムは、左又は右へのユーザーの動き、さらには水平面の上又は下に延びる斜めの動きを、レイヤーの有効な左向き又は右向きの動きとして解釈する。図８Ａ−８Ｃはコンテンツレイヤー３１４に対応する表示領域３００の一部とユーザーがインタラクトすることを示すが、システムはまた、タッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域３００の部分に対応する部分）とのインタラクションがレイヤー３１０、３１２、３１４、８５０における動きを引き起こすことを可能にする。
【００７７】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域３００に対するレイヤー３１０、３１２、３１４、８５０の右方向又は左方向の動きを生成する。レイヤー３１０、３１２、３１４、８５０の移動量は、レイヤー内のデータとユーザーによって行われた動きの大きさ又は移動速度（又は速度）との関数である。
【００７８】
図８Ａ−８Ｃにおいて、例示的な左端のロックポイント「Ａ」、「Ｂ」及び「Ｃ」が、レイヤー３１０、３１２、３１４、８５０に対して示される。左端のロックポイントは、各レイヤーの表示領域３００の左端の対応する位置を示す。たとえば、表示領域３００の左端がロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー３１４上の位置にナビゲートする場合、表示領域３００の左端はまた、図８Ａに示すように、他のレイヤー３１０、３１２、８５０のロックポイント「Ａ」において合わせられる。図８Ｂにおいて、表示領域３００の左端は、レイヤー３１０、３１２、３１４、８５０の各々のロックポイント「Ｂ」にある。図８Ｃにおいて、表示領域３００の左端は、レイヤー３１０、３１２、３１４、８５０の各々のロックポイント「Ｃ」にある。
【００７９】
図８Ａ−８Ｃに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、簡潔にするためにのみロックポイント「Ａ」、「Ｂ」及び「Ｃ」に制限されるものである。たとえば、左端のロックポイントは、コンテンツ画像３３０Ａ−３３０Ｈの各々について設定することができる。また、より少ないロックポイントを使用してもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端ロックポイントは表示領域３００の右端との位置合わせを示してもよいし、中央ロックポイントは表示領域３００の中央との位置合わせを示してもよい。
【００８０】
この例では、レイヤー３１０、３１２、３１４、８５０は、ラッピングアニメーション中を除き、次の規則に従って移動する。
１．コンテンツレイヤー３１４はレイヤー３１２の約２倍の速度で移動し、レイヤー３１２はレイヤー３１４の約半分の長さである。
【００８１】
２．レイヤー３１２はレイヤー３１０の約２倍の速度で移動し、レイヤー３１０はレイヤー３１２の約半分の長さである。
３．コンテンツレイヤー３１４はレイヤー３１０の約４倍の速度で移動し、レイヤー３１０はレイヤー３１４の約１／４の長さである。
【００８２】
４．背景レイヤー８５０はレイヤー３１０よりも遅く移動する。背景レイヤー８５０はレイヤー３１０よりも長いが、レイヤー３１０における隣接するロックポイント（例えば、ロックポイント「Ａ」と「Ｂ」）の間で移動する距離は、背景レイヤー８５０における対応するロックポイント間の距離よりも大きい。
【００８３】
レイヤー３１０、３１２、３１４、８５０の動きは、いくつかの状況では、上記の規則とは異なる場合がある。この例では、ラッピングが可能となる。ユーザー３０２は、コンテンツレイヤー３１４の先頭（図８Ａに示す位置）から左にナビゲートすることができ、コンテンツレイヤー３１４の終端（図８Ｃに示す位置）から右にナビゲートすることができる。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。この例において、背景レイヤー８５０における画像並びにレイヤー３１０及び３１２におけるテキストは、ユーザー入力がコンテンツレイヤー３１４の先頭への巻き戻しを引き起こす場合により速く移動する。図８Ｃにおいて、表示領域３００は、それぞれのテキスト文字列の末尾における、レイヤー３１０及び３１２内の、それぞれ１つ及び２つの文字の一部を示す。表示領域３００はまた、背景レイヤー８５０における画像の最も右の部分を示す。図８Ａに示す状態へ戻るためのラッピングアニメーションは、背景レイヤー８５０の画像の最も左の部分及びレイヤー３１０、３１２のテキストの先頭を右から見えるようにすることを含んでもよい。これにより、図８Ａに示す状態から図８Ｂに示す状態への移行などの他のコンテキストにおけるものよりもより迅速な、レイヤー３１０、３１２及び８５０における動きがもたらされる。
【００８４】
例１０−マルチレイヤーＵＩシステム
図９は、デバイス（例えば、スマートフォンや他のモバイルコンピューティングデバイス）上で複数のＵＩレイヤーを提示する例示的なマルチレイヤーＵＩシステム９００を示すシステム図である。システム９００は、他の例で説明する機能又は他の機能を実施するために使用することができる。
【００８５】
この例では、システム９００は、平行なＵＩレイヤーの表示を制御するレイヤーコントロール９２０にハブページの宣言的記述を提供するハブモジュール９１０を含む。レイヤーコントロール９２０はまた、「パノラマ」又は「パノ（pano）」コントロールとも呼ばれる。ＵＩレイヤーがパノラマ式の又は水平な方法で移動するときにそのような記述を使用することができる。また、レイヤーコントロール９２０は、垂直に又は他の方法で移動するＵＩレイヤーを制御する。レイヤーコントロール９２０は、マークアップジェネレーター９３０及びモーションモジュール９４０を含む。
【００８６】
この例において、レイヤーコントロール９２０は、ＵＩ要素のいくつかのレイヤー、たとえば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤーを制御する。コンテンツレイヤーはコンテンツペインの組を含む。コンテンツペインは、例えば、視覚的に提示される、画像、グラフィカルなアイコン、リスト、テキスト、又は他の情報を含んでもよい。コンテンツレイヤーにおけるコンテンツペインの組はコンテンツペインの「世代（ジェネレーション）」と呼んでもよい。また、レイヤーコントロール９２０は、３つのレイヤーより多くの又は少ないレイヤーを制御し、又は異なる種類のレイヤーを制御する。ハブページの宣言的記述は、ＵＩ要素を定義する情報を含む。マルチレイヤーＵＩシステムでは、ＵＩ要素は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、コンテンツレイヤーなどの複数のレイヤーを含んでもよい。ハブページの宣言型記述は、スタイル情報及び／又は設定プロパティなどの他の情報と共に、マークアップジェネレーター９３０に提供される。マークアップジェネレーター９３０は、ＵＩレイヤーをレンダリングするために使用できるマークアップを生成する。モーションモジュール９４０は、ユーザー入力に応答して生成されたイベント（例えば、直接的なＵＩ操作イベント）を受け取り、動作コマンドを生成する。動作コマンドはマークアップととともにＵＩフレームワーク９５０に提供される。ＵＩフレームワーク９５０において、マークアップ及び動作コマンドは、デバイスのオペレーティングシステム（ＯＳ）９６０に送信されるべきＵＩレンダリング要求を生成するレイアウトモジュール９５２において受信される。デバイスＯＳ９６０は、レンダリング要求を受信し、レンダリングされたＵＩをデバイス上のディスプレイへ出力させる。ハブモジュール９１０、レイヤーコントロール９２０、及びＵＩフレームワーク９５０などのシステムコンポーネントはまた、デバイスＯＳ９６０の一部として実施することができる。１つの実施例において、デバイスＯＳ９６０はモバイルコンピューティングデバイスのＯＳである。
【００８７】
ユーザー（図示せず）はＵＩが表示される方法に影響を与えるユーザー入力を生成することができる。図９に示す例では、レイヤーコントロール９４０は、ＵＩフレームワーク９５０によって生成された直接ＵＩ操作イベントをリスンする。ＵＩフレームワーク９５０において、直接のＵＩ操作イベントは、デバイスＯＳ９６０からジェスチャーメッセージ（例えば、デバイス上のタッチスクリーンとインタラクトするユーザーによるパンジェスチャーやフリックジェスチャーに応答して生成されるメッセージ）を受信する、インタラクションモジュール９５４によって生成される。デバイスＯＳ９６０は、ユーザーのジェスチャーを認識してＵＩフレームワーク９５０で使用できるメッセージを作成するための機能を含む。ＵＩフレームワーク９５０は、ジェスチャーメッセージを、レイヤーコントロール９２０に送信するべき直接的なＵＩ操作イベントへと変換する。インタラクションモジュール９５４はまた、音声コマンド、キーパッド又はキーボード上の指示ボタン、トラックボールの動きなどの、他の種類のユーザー入力に応答して生成されるナビゲーションメッセージについての直接的なＵＩ操作イベントを受け取り、生成することができる。
【００８８】
例１１−詳細な実施例
この例では、他の側面とともに、上述の例の側面を含む詳細な実施例について説明する。この詳細な実施例は、上述したシステム９００などのマルチレイヤーＵＩシステムによって又はなんらかの他のシステムによって、実施することができる。
【００８９】
この例において、システム９００は、水平に移動する複数の並列のＵＩレイヤー（例えば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤー）を提示する。コンテンツレイヤーはいくつかのコンテンツペインを含む。各コンテンツペインは右のロックポイント及び左のロックポイントを含む。
【００９０】
Ａ．初期化
並列のＵＩレイヤーを初期化するために、システム９００は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー及びコンテンツレイヤーの有効長に関する情報を取得する。（水平に移動するＵＩレイヤーにとって、有効長は、ＵＩレイヤーの有効幅であると考えることができる。）システム９００は、表示領域に近づくときにコンテンツペインを動的に作成することによってメモリー及び処理の要求を低減することができるが、これにより、コンテンツレイヤーの有効幅を決定することはより困難になる。この例では、初期化においてコンテンツレイヤーの有効幅を決定するために、システム９００は、各コンテンツペインの最大幅に基づいて最大のコンテンツレイヤー幅を決定し、重なっていないすべてのコンテンツペインの最大幅の合計を計算する。
【００９１】
（コンテンツペインについての）コンテンツレイヤーにおけるロックポイントは、例えば、重なっていないコンテンツペインを生成するために、表示領域の幅の単位でコンテンツレイヤーを分割することによって、自動的に設定することができる。また、どれだけの数の全体のコンテンツ画像ｎがコンテンツペインに入るかを決定し、各コンテンツ画像が少なくとも１つのコンテンツペインにあるようになるまでｎ個のコンテンツ画像ごとに新たなコンテンツペインを開始する（重なったコンテンツペインをもたらす可能性がある）ことによって、ロックポイントをコンテンツレイヤーにおいて設定することができる。
【００９２】
レイヤーにおける動きは動作比率（motion ratios）に基づいて計算される。例えば、システム９００は、それぞれ、背景レイヤーの幅及びタイトルレイヤーの幅を、コンテンツレイヤーの最大幅で割ることによって、背景レイヤー及びタイトルレイヤーの動作比率を計算する。背景レイヤー及びタイトルレイヤーの幅を考慮して、システム９００は、コンテンツレイヤーにおける対応するロックポイントの位置に基づいて、それぞれ、背景レイヤー及びタイトルレイヤーにおけるロックポイントの位置をマッピングする。背景レイヤーにおけるそのような位置のマッピングの例は図１に示される。
【００９３】
対応するレイヤーを動かすときにロックポイントが使用される。たとえば、システム９００がコンテンツレイヤーにおけるペインへの移行をアニメートする場合に、システムは、背景レイヤーとタイトルレイヤーについて適切なロックポイントの位置を探し、レイヤーがそれらの位置にスクロールするためのコマンドを発行して、それぞれのレイヤーにおけるロックポイント間の距離に依存して相対的な動作速度を設定する。
【００９４】
コンテンツレイヤーの最大の長さに基づく動作比率は、実際のレンダリングされたコンテンツレイヤーと比較される場合に概算であるにすぎない。当該比率は概算である（コンテンツペインの最終的な幅は依然として不明である）ので、システム９００は、背景レイヤーやタイトルレイヤーなどのレイヤーがレンダリングされた最終的なコンテンツレイヤーにおける対応するロックポイントに合うように、背景レイヤー又はタイトルレイヤーなどのレイヤーを調整するために、ロックアニメーションを実行することができる。
【００９５】
初期化が完了すると、システム９００は、ＵＩレイヤーをレンダリングし、ユーザー入力の受信を開始することができる。
Ｂ．ユーザー入力
この例では、システム９００は、モバイルコンピューティングデバイス上のタッチスクリーンとインタラクトするユーザーからユーザー入力を受信する。システム９００は、ドラッグジェスチャー、パンジェスチャー及びフリックジェスチャーなどのタッチスクリーン上の異なるジェスチャーを区別することができる。システム９００はまた、ユーザーが特定の位置においてタッチスクリーンに触れるがタッチスクリーンとの接触を断つ前に指、スタイラスなどを動かさない場合などに、タップジェスチャーを検出することができる。代替手段として、いくつかの動きは、タップジェスチャーにおいてタッチスクリーンとの接触を断つ前に、小さな閾値の範囲内で許可される。システム９００はまた、つまんで伸ばす（pinch-and-stretch）ジェスチャーなどのマルチタッチジェスチャーを検出することができる。
【００９６】
システム９００は、インタラクションを、タッチスクリーンとの当該インタラクションの性質に応じて特定のジェスチャーとして解釈する。システム９００はユーザーのインタラクションから１つ又は複数の個別の入力を取得する。ジェスチャーは一連の入力から決定することができる。たとえば、ユーザーがタッチスクリーンに触れ、タッチスクリーンとの接触を維持しながら水平方向に移動を開始する場合、システム９００は、パン入力を発射し、レイヤーにおいて水平方向の移動を開始する。ユーザーがタッチスクリーンとの接触を維持して移動し続けている間、システム９００はパン入力を発射し続けることができる。例えば、システム９００は、ユーザーがタッチスクリーンとの接触を維持しながらＮピクセルだけ移動するたびに新たなパン入力をすることができる。このように、タッチスクリーン上での連続的な物理的なジェスチャーは、システム９００によって一連のパン入力として解釈することができる。システムは接触位置及び移動速度を連続的に更新することができる。
【００９７】
（ユーザーがタッチスクリーンとの接触を断つときなど）物理的なジェスチャーが終了すると、システム９００は、タッチスクリーンとの接触を断ったときにユーザーの指、スタイラスなどがどれだけ迅速に動いていたか、及び移動速度が閾値を超えるかどうかを決定することにより、最後の動作をフリックとして解釈すべきかどうかを決定することができる。
【００９８】
Ｃ．ユーザーのジェスチャーへの応答
システム９００は、ジェスチャーの種類に応じて、ディスプレイ上の動き（例えば、レイヤー、リスト、又は他のＵＩ要素の動き）を異なる方法でレンダリングすることができる。たとえば、水平方向のドラッグジェスチャー（ユーザーが現在タッチスクリーンとの接触を維持している）の場合には、システム９００は、ドラッグの水平方向の距離と同じ距離だけ水平方向にコンテンツレイヤーを動かす。タイトルレイヤー及び背景レイヤーはまたドラッグに応じて移動する。移動量は、それぞれのレイヤーについての動作比率にドラッグの水平方向の動きを乗じることによって決定される。例えば、０．５の動作比率がタイトルレイヤーについて決定され、ドラッグの水平方向の距離が１００ピクセルである場合、タイトルレイヤーにおける動きはドラッグの方向に５０ピクセルとなる。
【００９９】
（ユーザーがタッチスクリーンとの接触を断ったときにユーザーがよりゆっくりと移動していたか又は停止した）パンジェスチャーの場合、パンの量だけコンテンツレイヤーを移動し、デバイスの表示領域に対するコンテンツペインの現在位置をチェックして、コンテンツレイヤーにおいて追加の動きを実行するかどうかを決定する。たとえば、システムは、ロッキングアニメーション（つまり、ロックポイントにスナップするコンテンツレイヤーにおける動きのアニメーション）を実行することができ、現在のコンテンツペインに関連付けられる左又は右のロックポイントにコンテンツレイヤーを移動することができる。システム９００は、現在のペインに関連付けられたどのロックポイントがより近くにあるかを決定して、当該より近いロックポイントへ移行することができる。別の例として、システム９００は、表示領域上で部分的に見えるコンテンツペインを全体が見えるようにするために、コンテンツレイヤーを移動することができる。他のジェスチャーもまた、コンテンツペインを全体が見えるようにすることができる。例えば、垂直方向にスクロール可能なリストの左側又は右側が表示領域の外にある場合、リスト上でのジェスチャー（例えば、垂直な又は実質的に垂直なジェスチャー）は、全体のリストが見えるようになるように、コンテンツレイヤーにおける水平方向の移動（及び、必要に応じて、他のレイヤーにおける水平方向の移動）を引き起こしてもよい。レイヤーの水平方向の動きは、垂直なジェスチャーによって引き起こされるリスト内の任意の垂直方向の動きに加えてのものであってもよいが、コンテンツレイヤー及び任意の他のレイヤーの垂直方向の位置は影響を受けない。また、システム９００は、コンテンツレイヤーの現在の位置を維持してもよい。
【０１００】
１つの実施例において、システム９００は次の手順を実行する。
１．コンテンツレイヤーにおいて、現在、以前及び次のコンテンツペインのうちのどれだけの領域を見ることができるかをチェックして、端の位置を確認する。
【０１０１】
２．以前のペインの右端が（左のスクリーンの端に対して）閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、以前のペインへ移行する。１つの実施例において、閾値は「バンプ閾値変位（bump threshold displacement）」と呼ばれる。
【０１０２】
３．次のペインの左端が（右のスクリーンの端に対して）閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、次のペインへ移行する。
４．そうでなければ、現在のペインの左端又は右端をロックポイント又は「バンプ」と合わせるためにコンテンツレイヤーを移動させることができるかどうかを決定する。現在のペインの左端が左のロックポイントに十分近い場合には、左端に現在のペインをロックする。そうではなく、現在のペインの右端が右側のロックポイントに十分近く、現在のペインが画面より広い場合は、現在のペインを右端にロックする。
【０１０３】
フリックジェスチャー（ユーザーがタッチスクリーンとの接触を断ったときにユーザーがより迅速に動いていた）の場合には、システム９００は、フリックジェスチャーの方向及び速度に依存して、次のコンテンツペイン又は以前のコンテンツペインへとコンテンツレイヤーを進めることができる移行アニメーションを開始する。フリックの速度が十分に大きい場合、システム９００は、その方向で次のコンテンツペインに移行することができる。速度が十分に大きくない場合、又は現在のコンテンツペインが広い場合、システム９００は、次のコンテンツペインに実際に移行することなく、フリックの方向にコンテンツレイヤーを移動することができる。検出される（すなわち、フリックジェスチャーをパンジェスチャーと区別する）フリックの閾値速度は実施例によって変わってもよい。別のコンテンツペインへの移行を引き起こすフリックの閾値速度は実施例によって変わってもよい。
【０１０４】
Ｄ．非線形運動
ＵＩレイヤーはいくつかの状況では非線形な移動速度を示す。たとえば、全体のレイヤーは状況に応じて異なる速度で移動することができ、また、レイヤーの一部は状況に応じて同じレイヤーの他の部分とは異なる速度で移動することができる。非線形の移動速度を示し得る１つのレイヤーはセクションヘッダーレイヤーである。セクションヘッダーレイヤーはいくつかのセクションヘッダーに分けることができ、各ヘッダーはコンテンツレイヤーにおける１つ又は複数のコンテンツペインに関連付けることができる。
【０１０５】
この例では、システム９００はセクションヘッダーレイヤーを提供し、各セクションヘッダーはコンテンツペインに関連付けられる。この例において、セクションヘッダーレイヤーは、次の規則に従って移動する。
【０１０６】
１．コンテンツ・ペインが表示領域よりも広くない場合、ヘッダーはコンテンツペインにロックされたままである。そうではなく、コンテンツペインが表示領域よりも広い場合には規則２−４が適用される。
【０１０７】
２．レイヤーがペインについて左側のロックポイントにおいてロックされる場合、各ヘッダーの左端はコンテンツペインの左端と合わせられる。
３．ユーザーがコンテンツペインを左にパンする場合、ヘッダーはコンテンツペインよりも遅く移動する。これは、例えば、パンするときにユーザーがなおヘッダーの一部を見られるようにするのに役立つ。
【０１０８】
４．ユーザーが右にパンする場合、ヘッダーはコンテンツペインよりも速く移動する。これは、例えば、現在のペインから以前のペインへの移行があるときにヘッダーがコンテンツペインより少し速く移動するが両方とも左のロックポイントに合わせる場合に、移行の効果を可能にするために有用となり得る。
【０１０９】
これらの規則に従って動作を実行する際に、システム９００は、変位値を計算する。最初に、最大変位が、コンテンツペインの幅とヘッダーの幅との差をとることによって計算される。最大変位を計算する際に、システム９００はまた、ヘッダー内のテキストの幅だけではなく、ボタンやヘッダー内の他の機能項目（functional items）のための追加のマージンを含んでもよい。
【０１１０】
システム９００は、次いで、左のロックポイントに対する現在のペインの左端の位置を決定することによって、実際の変位を計算する。ペインの左端が左ロックポイントの右にある場合、システム９００は、ペインの左端の水平方向の位置（ｘ座標）から、左のロックポイントの水平方向の位置（ｘ座標）を差し引き、これは正の値ａになる。ペインの左端が左ロックポイントの左にある場合は、システム９００は、左ロックポイントの水平方向の位置（ｘ座標）から、ペインの左端の水平方向の位置（ｘ座標）を差し引き、これは正の値ｂとなる。値に定数を乗じるなどすることによって、値（ａ又はｂ）に対して調整をすることができる。なんらかの調整後、値（ａ又はｂ）が最大変位よりも大きい場合には、当該値の上限は最大変位となる。
【０１１１】
変位の計算はまた、パンアニメーションや移行アニメーションに対して使用されてもよい。後者の場合には、移行を開始する前に、ペインの最後の位置が計算され、それに基づいて、移行アニメーションで使用されるべきヘッダーの最後の位置が計算される。
【０１１２】
Ｅ．エッジタップ
システム９００はまた、エッジタップ（edge tap）機能を実施してもよい。エッジタップにおいて、ユーザーは、（例えば、次のコンテンツペイン又は以前のコンテンツペインへの）移行を引き起こすために、表示領域の端（例えば、左端又は右端）の所与のマージン（例えば、４０ピクセル）内でタップしてもよい。これは、例えば、次のペイン又は以前のペインが表示領域内で部分的に見えている場合に有用となり得る。ユーザーは、次のペイン又は以前のペインの近くでタップして、システムに、そのペインを完全に表示領域へ持ちこませることができる。
【０１１３】
ＩＩ．拡張及び代替的な実施例
本明細書に記載の実施例に対して、様々な拡張及び代替手段が可能である。
記載された例において、コンテンツレイヤーは、通常、背景レイヤーなどの他のレイヤーよりも長いものとして説明される。システム９００などのマルチレイヤーＵＩシステムはまた、タイトルレイヤー又は背景レイヤーなどのレイヤーが実際にはコンテンツレイヤーよりも広いようなシナリオを取り扱うことができる。そのようなシナリオでは、レイヤーにおける動きの速度は補償をするために自動的に調整することができる。たとえば、コンテンツレイヤーがタイトルレイヤーよりも短い場合、コンテンツレイヤーはタイトルレイヤーよりも遅く移動してもよい。
【０１１４】
記載された例においては、いくつかのレイヤーは他のレイヤーにロックされているものとして説明される。たとえば、図６Ａ−６Ｅにおいて、レイヤー６１２の一部はコンテンツレイヤー６１４の一部にロックされているものとして示される。他の実施例において、いくつかのレイヤーはより柔軟に動くものとして説明される。例えば、図５Ａ−５Ｄにおいて、セクションヘッダーレイヤー５１２のセクションは、コンテンツレイヤー５１４の特定の部分に関連付けられるものとして示されるが、セクションは、互いに独立して動き、コンテンツレイヤー５１４の一部の上で浮かぶことができる。マルチレイヤーＵＩシステムはこのような機能を組み合わせることができる。例えば、マルチレイヤーＵＩシステムは、レイヤーの他の部分が独立して動くことを可能にしつつ、当該レイヤー（例えば、セクションヘッダーレイヤーやタイトルレイヤー）のある部分をコンテンツレイヤー内のコンテンツにロックすることができる。
【０１１５】
マルチレイヤーシステムはまた、移行又はラッピングの効果を向上させるために、レイヤーを一緒にロックすることができる。たとえば、ラッピング中に同じ速度で背景レイヤー及びタイトルレイヤーが移動するように、背景レイヤーはタイトルレイヤーにロックされてもよい。レイヤーの有効長が異なる場合であっても、そのようなロックを行うことができる。
【０１１６】
記載された例は、コンテンツレイヤーなどのユーザーにとって関心があるかもしれないレイヤーの異なる位置を示す。ユーザーは、レイヤーの先頭においてマルチレイヤーＵＩシステムにおけるナビゲーションを開始してもよいし、又は、異なるエントリーポイントを使用してＵＩレイヤーのナビゲーションを開始してもよい。たとえば、ユーザーは、コンテンツレイヤーの中間、コンテンツレイヤーの最後などにおいて、ナビゲーションを開始してもよい。これは、たとえば、ユーザーが以前にレイヤーの先頭以外の位置（例えば、レイヤーの終わり）において終了した場合に有用となり、その結果、ユーザーは（例えば、ユーザーがコンテンツ画像を作動させることによって呼び出されるアプリケーションを使用した後に）以前の位置に戻ることができる。別の例として、デフォルトのロックポイントはＵＩレイヤーの以前の状態に基づいていてもよい。たとえば、ユーザーは、以前に見られていたレイヤーの一部に対応するロックポイントにおいてレイヤーに戻ることができる。別の例として、マルチレイヤーＵＩシステムは、異なるエントリーポイントを可能にするために、複数のレイヤーにおいて状態を保存したり調整を行ったりすることができる。例えば、図５Ｃに示すようにコンテンツレイヤー及び機能（feature）レイヤーを見ることができるような位置においてユーザーがエントリーをなす場合、マルチレイヤーＵＩシステムは、レイヤー５１０における「Ａｐｐｌｉｃａｔｉｏｎ（アプリケーション）」というテキストの先頭がレイヤー５１２における「Ｆｅａｔｕｒｅ ２」というテキストの先頭に合わせられるようにレイヤー５１０を調整することができる。
【０１１７】
ＩＩＩ．例示的なコンピューティング環境
図１０は、記載された実施例のうちのいくつかを実施することができる適切なコンピューティング環境１０００の一般化された例を示す。本明細書に記載された技術及び手段は多様な汎用又は特殊目的のコンピューティング環境において実施することができるので、コンピューティング環境１０００は、使用又は機能の範囲について何ら限定を示唆するものではない。
【０１１８】
図１０を参照すると、コンピューティング環境１０００は、少なくとも１つのＣＰＵ１０１０及び関連するメモリー１０２０を含む。図１０において、この最も基本的な構成１０３０は破線内に含まれる。処理装置１０１０は、コンピューター実行可能命令を実行し、実際の又は仮想的なプロセッサーであってもよい。マルチプロセッシングシステムにおいては、処理能力を高めるために複数の処理装置がコンピューター実行可能命令を実行する。図１０は、ビデオアクセラレーション又は他の処理に使用することができる、第２の処理装置１０１５（例えば、ＧＰＵ又は他のコプロセッシングユニット）及び関連するメモリー１０２５を示す。メモリー１０２０、１０２５は、揮発性メモリー（例えば、レジスター、キャッシュ、ＲＡＭ）、不揮発性メモリー（例えば、ＲＯＭ、ＥＥＰＲＯＭ、フラッシュ（登録商標）メモリーなど）、又はそれら２つの組み合わせであってもよい。メモリー１０２０、１０２５は、記載される技術及び手段のうちの１つ又は複数を備えるシステムを実施するためのソフトウェア１０８０を格納する。
【０１１９】
コンピューティング環境は追加の機能を有してもよい。たとえば、コンピューティング環境１０００は、ストレージ１０４０、１つ又は複数の入力装置１０５０、１つ又は複数の出力装置１０６０、及び１つ又は複数の通信接続１０７０を含む。バス、コントローラー、又はネットワークなどの相互接続機構（図示せず）は、コンピューティング環境１０００のコンポーネントを相互接続する。通常、オペレーティングシステムソフトウェア（図示せず）は、コンピューティング環境１０００において実行される他のソフトウェアのための動作環境を提供し、コンピューティング環境１０００のコンポーネントの活動を調整する。
【０１２０】
ストレージ１０４０は、取り外し可能であっても取り外し不能であってもよく、情報を格納するために使用することができ、コンピューティング環境１０００内でアクセスできる、磁気ディスク、磁気テープもしくはカセット、ＣＤ−ＲＯＭ、ＤＶＤ、メモリーカード、又は任意の他の媒体を含む。ストレージ１０４０は記載される技術及び手段を実施するソフトウェア１０８０のための命令を格納する。
【０１２１】
入力装置１０５０は、キーボード、マウス、ペン、トラックボール又はタッチスクリーンなどのタッチ入力装置、マイクロフォン、走査装置、デジタルカメラ、又はコンピューティング環境１０００に入力を提供する別のデバイスなどの音声入力装置であってもよい。動画については、入力装置１０５０は、ビデオカード、ＴＶチューナーカード、アナログ形式又はデジタル形式の動画入力を受け取る同様の装置、又はコンピューティング環境１０００に動画サンプルを読み込むＣＤ−ＲＯＭもしくはＣＤ−ＲＷであってもよい。出力装置１０６０は、ディスプレイ、プリンター、スピーカー、ＣＤライター、又はコンピューティング環境１０００からの出力を提供する別の装置であってもよい。
【０１２２】
通信接続１０７０は別のコンピューティングエンティティへの通信媒体を介した通信を可能にする。通信媒体は、コンピューター実行可能命令、音声もしくは動画入出力、又は変調されたデータ信号内の他のデータなどの情報を伝達する。変調されたデータ信号は、信号中で情報を符号化するようにその特性のうちの１つ又は複数が設定又は変更された信号である。限定ではなく例として、通信媒体は、電気、光、ＲＦ、赤外線、音響、又は他の搬送波によって実施される有線又は無線の技術を含む。
【０１２３】
技術及び手段は、コンピューター読み取り可能な媒体の一般的なコンテキストにおいて説明することができる。コンピューター読み取り可能な媒体は、コンピューティング環境内でアクセスできる任意の利用可能な媒体である。限定ではなく例として、コンピューティング環境１０００で、コンピューター読み取り可能な媒体は、メモリー１０２０、１０２５、ストレージ１０４０、及びそれらの組み合わせを含む。
【０１２４】
技術及び手段は、目標の実際の又は仮想的なプロセッサー上のコンピューティング環境において実行される、プログラムモジュールに含まれるものなどの、コンピューター実行可能命令の一般的なコンテキストにおいて説明することができる。一般に、プログラムモジュールは、特定のタスクを実行し又は特定の抽象データ型を実施する、ルーチン、プログラム、ライブラリー、オブジェクト、クラス、コンポーネント、データ構造などを含む。プログラムモジュールの機能は、様々な実施例において必要に応じて、組み合わせたり、プログラムモジュール間で分割されたりしてもよい。プログラムモジュールのためのコンピューター実行可能命令は、ローカルのコンピューティング環境又は分散コンピューティング環境内で実行されてもよい。本明細書中に記載される任意の方法は、１つ又は複数のコンピューター読み取り可能な媒体（例えば、コンピューター読み取り可能な記憶媒体や他の有形の媒体）上に符号化されたコンピューター実行可能命令によって実施することができる。
【０１２５】
説明のために、詳細な説明においては、コンピューティング環境におけるコンピューターの動作を説明するために「選択」及び「決定」などの用語を使用する。これらの用語は、コンピューターによって実行される動作についての高レベルの抽象的概念であり、人間によって実行される行為と混同されるべきではない。これらの用語に対応する実際のコンピューター動作は実施例に応じて異なる。
【０１２６】
ＩＶ．例示的な実施環境
図１１は、記載された実施例、技法、及び技術を実施することができる適切な実施環境１１００の一般化された例を示す。
【０１２７】
例示的な環境１１００においては、さまざまな種類のサービス（例えば、コンピューティングサービス１１１２）がクラウド１１１０によって提供される。たとえば、クラウド１１１０は、インターネットなどのネットワークを介して接続される様々な種類のユーザー及びデバイスにクラウドベースのサービスを提供する、集中的に又は分散して配置され得る一群のコンピューティングデバイスを含んでもよい。クラウドコンピューティング環境１３００は、コンピューティングタスクを達成するために、さまざまな方法で使用することができる。例えば、記載される技術及び手段を参照すると、ユーザー入力を処理することやユーザーインターフェースを提示することなどのいくつかのタスクは、ローカルのコンピューティングデバイス上で実行することができるが、後続の処理で使用されるデータの記憶などの他のタスクは、クラウド内の他の場所で実行することができる。
【０１２８】
例示的な環境１１００において、クラウド１１１０は、様々な画面機能１１２０Ａ−Ｎを備えた接続されたデバイスのためのサービスを提供する。接続されたデバイス１１２０Ａは中型の画面をもつデバイスを表す。たとえば、接続されるデバイス１１２０Ａは、デスクトップコンピューター、ラップトップ、ノートブック、ネットブックなどのパーソナルコンピューターであってもよい。接続されるデバイス１１２０Ｂは小型の画面を備えたデバイスを表す。たとえば、接続されるデバイス１１２０Ｂは、携帯電話、スマートフォン、パーソナルデジタルアシスタント、タブレットコンピューターなどであってもよい。接続されるデバイス１１２０Ｎは大型の画面を備えたデバイスを表す。たとえば、接続されるデバイス１１２０Ｎは、テレビ（例えば、スマートテレビ）又はテレビやプロジェクタースクリーンに接続される別のデバイス（例えば、セットトップボックスやゲーム機）であってもよい。
【０１２９】
様々なサービスを、１つ又は複数のサービスプロバイダー（図示せず）を介してクラウド１１１０によって提供することができる。たとえば、クラウド１１１０は、様々な接続されるデバイス１１２０Ａ−Ｎのうちの１つ又は複数に、モバイルコンピューティングに関連するサービスを提供することができる。クラウドサービスは、画面サイズ、表示能力、又は特定の接続されたデバイス（例えば、接続されたデバイス１１２０Ａ−Ｎ）の他の機能に合わせてカスタマイズすることができる。たとえば、クラウドサービスは、画面サイズ、入力装置、及び通常はモバイルデバイスと関連付けられる通信帯域幅の制限を考慮に入れることによって、モバイルデバイス用にカスタマイズすることができる。
【０１３０】
Ｖ．例示的なモバイルデバイス
図１２は、１２０２において一般的に示される、様々なオプションのハードウェアコンポーネント及びソフトウェアコンポーネントを含む、例示的なモバイルデバイス１２００を示すシステム図である。説明を容易にするために、すべての接続が示されてはいないが、モバイルデバイス内の任意のコンポーネント１２０２は任意の他のコンポーネントと通信することができる。モバイルデバイスは、様々なコンピューティングデバイス（例えば、携帯電話、スマートフォン、ハンドヘルドコンピューター、パーソナルデジタルアシスタント（ＰＤＡ）など）のうちの任意のものであってもよく、セルラーネットワークや衛星ネットワークなどの１つ又は複数の移動通信ネットワーク１２０４との無線双方向通信を可能にすることができる。
【０１３１】
図示されるモバイルデバイスは、信号の符号化、データ処理、入出力処理、電源制御、及び／又は他の機能などのタスクを実行するためのコントローラー又はプロセッサー１２１０（例えば、信号プロセッサー、マイクロプロセッサー、ＡＳＩＣ、又は他の制御及び処理論理回路）を含んでもよい。オペレーティングシステム１２１２は、コンポーネント１２０２の割り当て及び使用、並びに１つ又は複数のアプリケーションプログラム１２１４に対するサポートを制御することができる。アプリケーションプログラムは、一般的なモバイルコンピューティングアプリケーション（例えば、Ｅメールアプリケーション、カレンダー、コンタクトマネージャー、ウェブブラウザー、メッセージアプリケーションを含む）、又は任意の他のコンピューティングアプリケーションを含んでもよい。
【０１３２】
図示されるモバイルデバイスはメモリー１２２０を含んでもよい。メモリー１２２０は、取り外し不能なメモリー１２２２及び／又は取り外し可能なメモリー１２２４を含んでもよい。取り外し不能なメモリー１２２２は、ＲＡＭ、ＲＯＭ、フラッシュメモリー、ディスクドライブ、又は他の周知のメモリーストレージ技術を含んでもよい。取り外し可能なメモリー１２２４は、フラッシュメモリー又はＧＳＭ（登録商標）通信システムにおいて知られている加入者識別モジュール（ＳＩＭ）カード、又はスマートカードなどの他の周知のメモリーストレージ技術を含んでもよい。メモリー１２２０は、オペレーティングシステム１２１２及びアプリケーション１２１４を実行するためのデータ及び／又はコードを格納するために使用することができる。例示的なデータは、ウェブページ、テキスト、画像、音声ファイル、動画データ、又は１つもしくは複数の有線もしくは無線のネットワークを介して１つもしくは複数のネットワークサーバー又は他のモバイルデバイスとの間で送受信される他のデータセットを含んでもよい。メモリー１２２０は、国際移動電話加入者識別番号（ＩＭＳＩ）などの加入者識別子及び国際移動電話機器識別番号（ＩＭＥＩ）などの機器識別子を格納するために使用することができる。そのような識別子は、ユーザー及び機器を識別するためにネットワークサーバーに送信することができる。
【０１３３】
モバイルデバイスは、タッチスクリーン１２３２、マイク１２３４、カメラ１２３６、物理的なキーボード１２３８及び／又はトラックボール１２４０などの１つ又は複数の入力装置１２３０、並びに、スピーカー１２５２、ディスプレイ１２５４などの１つ又は複数の出力装置１２５０をサポートすることができる。他のあり得る出力装置（図示せず）は圧電性の又は他の触覚出力装置を含んでもよい。一部の装置は複数の入出力機能を提供することができる。たとえば、タッチスクリーン１２３２及びディスプレイ１２５４は単一の入出力装置に組み合わせることができる。
【０１３４】
タッチスクリーン１２３２はさまざまな方法で入力を受け取ることができる。例えば、物体（例えば、指先又はスタイラス）が表面にわたって流れる電流を歪ませたり遮断したりする場合、容量性タッチスクリーンはタッチ入力を検出する。別の例として、タッチスクリーンは、光センサーからのビームが遮断される場合にタッチ入力を検出する光センサーを使用してもよい。画面の表面との物理的接触は、いくつかのタッチスクリーンによって検出される入力にとっては必要がない。
【０１３５】
当技術分野においてよく理解されているように、無線モデム１２６０は、アンテナ（図示せず）に結合させることができ、プロセッサー１２１０と外部デバイスとの間の双方向通信をサポートすることができる。モデム１２６０は一般的に示されており、移動通信ネットワーク１２０４及び／又は他の無線ベースのモデム（例えば、ブルートゥース（登録商標）又はＷｉ−Ｆｉ）と通信するためのセルラーモデムを含んでもよい。無線モデム１２６０は、通常、単一のセルラーネットワーク内での、セルラーネットワーク間での、又はモバイルデバイスと公衆交換電話網（ＰＳＳＴＮ）との間でのデータ通信及び音声通信のためのＧＳＭ（登録商標）ネットワークなどの、１つ又は複数のセルラーネットワークとの通信用に構成される。
【０１３６】
モバイルデバイスは、さらに、少なくとも１つの入出力ポート１２８０、電源１２８２、全地球測位システム（ＧＰＳ）受信機などの衛星ナビゲーションシステム受信機１２８４、加速度計１２８６、（アナログ信号又はデジタル信号を無線で送信するための）トランシーバー１２８８、並びに／又は、ＵＳＢポート、ＩＥＥＥ１３９４（ファイアウォール）ポート、及び／もしくはＲＳ−２３２ポートであってもよい物理的なコネクター１２９０を含んでもよい。コンポーネントを削除してもよく、他のコンポーネントを追加してもよいので、図示されるコンポーネント１２０２は必須ではなく、すべてを網羅してはいない。
【０１３７】
すべての例からの技術は他の例の１つ又は複数において記載された技術と組み合わせることができる。開示された技術の原則を適用することができる多くの可能な実施例を考慮して、図示された実施例が開示された技術の例であって、開示された技術の範囲に対する限定として解釈されるべきではないことを認識すべきである。そのようなものではなく、開示された技術の範囲は以下の特許請求の範囲によってカバーされるものを含む。したがって、出願人は、請求項の範囲及び趣旨に含まれるすべてのものを本願の発明として請求する。
【技術分野】
【０００１】
本発明は、柔軟な平行移動及び垂直移動を備えたマルチレイヤーユーザーインターフェースに関する。
【背景技術】
【０００２】
効果的なユーザーインターフェースの設計は多くの課題をもたらす。１つの課題は、ディスプレイのスペースの制限及び特定のユーザーのニーズを考慮して、最適な量の視覚情報又は機能をどのようにしてユーザーに提供するかということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型ディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、特定のアクティビティ（例えば、ファイルのライブラリーにおける音声ファイル又はビデオファイルを閲覧する）を実行しているユーザーにとって利用できる、ディスプレイに収まりきらない多くの情報がしばしば存在するためである。
【発明の概要】
【発明が解決しようとする課題】
【０００３】
限られた量の利用可能なディスプレイスペース上で情報がどのように提示されるかについて細心の注意を払わない限り、ユーザーは簡単に迷ってしまいかねない。
従来の技術の利点が何であるにせよ、従来の技術は以下に示す技術及び手段の利点を有していない。
【課題を解決するための手段】
【０００４】
本明細書において記載される技術及び手段は、コンピューターディスプレイ上でユーザーに対して視覚情報を提示することに関し、より具体的には、スマートフォンや他のモバイルコンピューティングデバイスにおいて見られるような小型ディスプレイ上に視覚情報を提示することに関する。特に、互いに関連する視覚情報のレイヤー（層）が異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。１つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さ（レイヤーが水平に方向付けられる場合などには、レイヤーの幅と呼んでもよい）の関数である速度で同じ方向に動く。たとえば、グラフィカルユーザーインターフェース（ＧＵＩ）は、背景レイヤー、タイトルレイヤー、及びコンテンツレイヤーを含む。特定の方向に（例えば、水平方向に左から右へ）コンテンツレイヤーを通じてナビゲートするユーザーはまた、背景レイヤー及びタイトルレイヤーのうちの１つ又は複数において同じ方向での移動を引き起こす。レイヤーにおける動きの量及び性質は、レイヤー中のデータ又はレイヤーにおける対応するロックポイント間の相対距離などの１つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーよりも長い場合、コンテンツレイヤーは背景レイヤーよりも速く移動する。タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、コンテンツレイヤーの移動速度はタッチスクリーン上のジェスチャーの動きの速度と一致してもよい。
【０００５】
１つの態様において、ＵＩシステムは、少なくとも第１及び第２のレイヤーを含むＧＵＩを表示する。第１のレイヤーにおける視覚情報の第１の部分はタッチスクリーンの表示領域内にある。ＵＩシステムは、タッチスクリーン上のジェスチャーに対応する第１のユーザー入力を受信する。ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて、第１の動きを計算する。第１の動きは、第１のレイヤーにおける視覚情報の第２の部分が表示領域の外にある最初の第１のレイヤーの位置から、第１のレイヤーにおける視覚情報の第２の部分が表示領域内にある現在の第１のレイヤーの位置への、第１のレイヤーの動きを含む。第１の動きは第１の移動速度（例えば、タッチスクリーン上でユーザーの指又は他の物体によりなされるジェスチャーの動きの速度に実質的に等しい移動速度）で第１の方向にある。ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて、第１の動きと実質的に平行な第２の動きを計算する。第２の動きは、最初の第２のレイヤーの位置から現在の第２のレイヤーの位置への第２のレイヤーにおける視覚情報の動きを含む。第２の動きは第２の移動の速度で第１の方向にある。第２の移動速度は第１の移動速度とは異なる。
【０００６】
第１のレイヤーは、第１の方向（例えば、水平方向）と実質的に直交する第２の方向（例えば、垂直方向）に動くように動作可能なユーザーインターフェース要素（例えば、リンクのリストなどの縦にスクロール可能な要素）を有する。 ＵＩシステムは、タッチスクリーン上での第２のジェスチャーに対応する第２のユーザー入力を受け取り、当該第２のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き（例えば、垂直方向の動き）を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第１のレイヤーにおけるユーザーインターフェース要素の視覚情報の動きを含む。現在の要素の位置は最初の要素の位置と第２のジェスチャーの速度とに基づいて計算することができる。要素が現在の要素の位置にあるときに要素が最初の要素の位置にあって表示領域内にある場合、ユーザーインターフェース要素の視覚情報の一部は、表示領域の外にあってもよい。
【０００７】
別の態様では、コンピューティングデバイスは、コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むＧＵＩを表示する。各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第１及び第２の部分を含む。それぞれのレイヤーにおける視覚情報の第１の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の第２の部分は表示領域の外にある。コンテンツレイヤーは、表示領域内にある視覚情報の第１の部分及び表示領域外にある視覚情報の第２の部分を有する少なくとも１つのスクロール可能な要素を含む。コンピューティングデバイスは、タッチスクリーンを介して第１のユーザー入力を受信し、当該第１のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算する。コンテンツレイヤーの動きは、（ａ）コンテンツレイヤーにおける視覚情報の第２の部分が表示領域の外にある最初のコンテンツレイヤーの位置から（ｂ）コンテンツレイヤーにおける視覚情報の第２の部分が表示領域内にある現在のコンテンツレイヤーの位置へのコンテンツレイヤーの動きを含む。コンピューティングデバイスは（ａ）から（ｂ）への動きをアニメートする。コンテンツレイヤーの動きは、コンテンツレイヤーの移動速度で第１の方向にある。コンピューティングデバイスは第１のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算する。セクションヘッダーレイヤーの動きは、（ｃ）セクションヘッダーレイヤーにおける視覚情報の第２の部分が表示領域外にある最初のセクションヘッダーレイヤーの位置から（ｄ）セクションヘッダーレイヤーにおける視覚情報の第２の部分が表示領域内にある現在のセクションヘッダーレイヤーの位置へのセクションヘッダーレイヤーの動きを含む。コンピューティングデバイスは（ｃ）から（ｄ）への動きをアニメートする。セクションヘッダーレイヤーの動きは、セクションヘッダーレイヤーの移動速度で第１の方向にある。コンピューティングデバイスは第１のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算する。タイトルレイヤーの動きは、（ｅ）タイトルレイヤーにおける視覚情報の第２の部分が表示領域の外にある最初のタイトルレイヤーの位置から（ｆ）タイトルレイヤーにおける視覚情報の第２の部分が表示領域内にある現在のタイトルレイヤーの位置へのタイトルレイヤーの動きを含む。コンピューティングデバイスは（ｅ）から（ｆ）への動きをアニメートする。タイトルレイヤーの動きは、タイトルレイヤーの移動速度で第１の方向にある。コンピューティングデバイスは、タッチスクリーンを介して第２のユーザー入力を受信し、当該第２のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算する。スクロール可能な要素の動きは、（ｇ）スクロール可能な要素における視覚情報の第２の部分が表示領域外にある最初のスクロール可能な要素の位置から（ｈ）スクロール可能な要素における視覚情報の第２の部分が表示領域内にある現在のスクロール可能な要素の位置への、スクロール可能な要素における視覚情報の動きを含む。コンピューティングデバイスは（ｇ）から（ｈ）への動きをアニメートする。スクロール可能な要素の動きは第１の方向と実質的に直交する第２の方向にある。タイトルレイヤーの移動速度は、コンテンツレイヤーの移動速度及びセクションヘッダーレイヤーの移動速度とは異なる。コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは互いに実質的に並行であり、互いに対して重複しない。
【０００８】
レイヤーはロックポイントを含んでもよい。たとえば、コンテンツペインを含むコンテンツレイヤーは、コンテンツペインの数及び／又は位置に基づいて（例えば、自動的に）決定されるロックポイントを有してもよい。ロックポイントは他の方法で設定することができる。例えば、ロックポイントは、第１のレイヤーにおけるユーザーインターフェース要素の終了位置などのレイヤーの以前の状態のうちのいくつかの側面に基づいてもよい。第２のレイヤー（例えば、背景レイヤー、タイトルレイヤー、又はセクションヘッダーレイヤー）におけるロックポイントは、第１のレイヤーのロックポイントに対応する第２のレイヤーのロックポイントを有してもよい。移動速度はロックポイント間の距離に基づいてもよい。たとえば、移動速度は第２のレイヤーのロックポイント間の距離と第２のレイヤーのロックポイントに対応する第１のレイヤーのロックポイント（例えば、コンテンツレイヤーのロックポイント）間の距離との間の差に比例してもよい。
【０００９】
ロッキングアニメーション（locking animation）を実行することができる。たとえば、ロッキングアニメーションは、レイヤー内のユーザーインターフェース要素における閾値数の画素が表示領域内にあるかどうかを決定すること、及び、その決定に基づいて、ユーザーインターフェース要素が表示領域において可視であるように現在の位置からロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。別の例として、ロッキングアニメーションは、ロックポイントを選択すること、及び、現在の位置から、選択されたロックポイントが表示領域の一部と合わせられるロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。現在の第２のレイヤーの位置から第１のレイヤーのロッキングアニメーション後の位置に対応する第２のレイヤーのロッキングアニメーション後の位置（例えば、第２のレイヤーのロックポイントが選択された第１のレイヤーのロックポイントに合わせられる、第２のレイヤーの位置）への第２のレイヤーにおける遷移などの他の遷移は同様にアニメートすることができる。別の例として、ロッキングアニメーションは、第１のレイヤー（例えば、コンテンツレイヤー）におけるユーザーインターフェース要素（例えば、コンテンツペイン）に関連付けられた第１のレイヤーのロックポイントを選択すること、及び、現在の第１のレイヤーの位置から、選択された第１のレイヤーのロックポイントが表示領域の一部と合わせられてユーザーインターフェース要素が表示領域において可視となるような第１のレイヤーのロッキングアニメーション後の位置への、第１のレイヤーにおける遷移をアニメートすることを含む。ロッキングアニメーションはユーザーのジェスチャーに基づいて実行することができる。例えば、ロックポイントは、指をスライドさせる（フリック）ジェスチャーの速度又は軽くたたく（タップ）ジェスチャーの位置に基づいて選択することができる。
【００１０】
ロッキングアニメーションはレイヤーのユーザーインターフェース要素における直交する動き（例えば、垂直方向の動き）に適応させることができる。たとえば、垂直のロッキングアニメーションは垂直にスクロール可能な要素（例えば、リスト）において実行することができ、当該垂直のロッキングアニメーションは、垂直にスクロール可能な要素におけるロックポイントが表示領域の一部と垂直に合わせられるように当該垂直にスクロール可能な要素を動かすことを含む。
【００１１】
ラッピングアニメーションが実行されてもよい。たとえば、２つのレイヤーの各々が先頭と末尾を含み、これらのレイヤーの末尾が現在の位置に表示される場合、ラッピングアニメーションを実行することは、現在の第１のレイヤーの位置から第１のレイヤーの先頭が表示されるラッピングアニメーション後の第１のレイヤーの位置への第１のレイヤーにおける遷移をアニメートすること、及び、現在の第２のレイヤーの位置から第２のレイヤーの先頭が表示されるラッピングアニメーション後の第２のレイヤーの位置への第２のレイヤーにおける遷移をアニメートすることを含む。遷移をアニメートすることは、他の移動速度とは異なるラッピング移動速度で視覚情報を動かすことを含んでもよい。
【００１２】
レイヤー内の動き（例えば、移動速度、方向、及び現在の位置）は、ユーザー入力に基づいて計算することができる。たとえば、現在の位置は最初の位置、ジェスチャーの方向及び速度に基づいてもよい。レイヤーにおける動きはまた、他のレイヤーの位置に基づいて計算することができる。たとえば、現在の第２のレイヤーの位置は、第１のレイヤーのロックポイントに対応する第２のレイヤーのロックポイントの位置に基づいて現在の第２のレイヤーの位置を計算することなどにより、計算された現在の第１のレイヤーの位置に基づいて計算することができる。
【００１３】
ジェスチャーは、例えば、パン、ドラッグ、フリック、タップのインタラクションを含んでもよい。フリックは、ジェスチャーの動きの速度が閾値を超えるかどうかを決定することによって検出することができる。方向を示すジェスチャーは、示された方向に又はある他の方向に動きを引き起こすことができる。たとえば、水平方向のジェスチャーは、垂直又は水平方向の動きを引き起こしてもよい。
【００１４】
移動速度は異なる方法で決定することができる。たとえば、レイヤーの移動速度はレイヤーの動作比率に基づいて計算することができ、動作比率は別のレイヤーの最大幅で割ったレイヤーの幅である。別の例として、移動速度は第１のレイヤーの長さと第２のレイヤーの長さの差に基づいてもよい。
【００１５】
さらなるレイヤーを追加することができる。たとえば、グラフィカルユーザーインターフェースは、第１及び第２のレイヤーと実質的に平行な第３のレイヤー（又はより多くのレイヤー）を含んでもよい。レイヤーにおける移動速度はそれぞれのレイヤーの長さの違いに比例してもよい。１つの実施例において、セクションヘッダーレイヤーは表示領域内でコンテンツレイヤーより上にあり、タイトルレイヤーは表示領域内でセクションヘッダーレイヤーより上にあり、コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは背景レイヤーと重なる。
【００１６】
本発明の上記の及び他の目的、特徴及び利点は、添付の図面を参照して進められる以下の詳細な説明からより明らかになるであろう。
【図面の簡単な説明】
【００１７】
【図１】１つ又は複数の記載された実施例による、ロックポイントを有する背景レイヤー及びコンテンツレイヤーを示す図である。
【図２】１つ又は複数の記載された実施例による、異なる速度で移動する複数のレイヤーをもつユーザーインターフェースを提供する例示的な技術を示すフローチャートである。
【図３Ａ】１つ又は複数の記載された実施例による、マルチレイヤーＵＩシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図３Ｂ】１つ又は複数の記載された実施例による、マルチレイヤーＵＩシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図３Ｃ】１つ又は複数の記載された実施例による、マルチレイヤーＵＩシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図３Ｄ】１つ又は複数の記載された実施例による、表示領域が横長の形状で方向付けられる、図３Ａ−３Ｃの複数のレイヤーを示す図である。
【図４】１つ又は複数の記載された実施例による、ＵＩシステムがマルチレイヤーＧＵＩの第１の方向の動きを計算する、例示的な技術を示すフローチャートである。
【図５Ａ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図５Ｂ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図５Ｃ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図５Ｄ】１つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のＵＩレイヤーを示す図である。
【図６Ａ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで（in tandem）移動する複数のＵＩレイヤーを示す図である。
【図６Ｂ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで移動する複数のＵＩレイヤーを示す図である。
【図６Ｃ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで移動する複数のＵＩレイヤーを示す図である。
【図６Ｄ】１つ又は複数の記載された実施例による、２つのレイヤーが並んで移動する複数のＵＩレイヤーを示す図である。
【図６Ｅ】１つ又は複数の記載された実施例による、コンテンツレイヤーにおけるリストについて可能な上向き及び下向きの動きが示される、図６Ａ−６Ｄの複数のＵＩレイヤーを示す図である。
【図７】１つ又は複数の記載された実施例による、第１の方向に直交する第２の方向に移動するように動作可能であるＵＩ要素をもつ少なくとも１つのレイヤーを有するマルチレイヤーＧＵＩにおいてＵＩシステムが第１の方向の動きを計算する例示的な技術を示すフローチャートである。
【図８Ａ】１つ又は複数の記載された実施例による、背景レイヤーを含む複数のＵＩレイヤーを示す図である。
【図８Ｂ】１つ又は複数の記載された実施例による、背景レイヤーを含む複数のＵＩレイヤーを示す図である。
【図８Ｃ】１つ又は複数の記載された実施例による、背景レイヤーを含む複数のＵＩレイヤーを示す図である。
【図９】記載された実施例を実施することができるマルチレイヤーＵＩシステムを示す図である。
【図１０】いくつかの記載された実施例を実施することができる適切なコンピューティング環境の一般的な例を示す。
【図１１】１つ又は複数の記載された実施例を実施することができる適切な実施環境の一般的な例を示す。
【図１２】１つ又は複数の記載された実施例を実施することができるモバイルコンピューティングデバイスの一般的な例を示す。
【発明を実施するための形態】
【００１８】
互いに関連する視覚情報のレイヤーが異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。１つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さの関数である速度で同じ方向に移動する。たとえば、グラフィカルユーザーインターフェース（ＧＵＩ）は、背景レイヤー、タイトルレイヤー、コンテンツレイヤーを含む。特定の方向（例えば、水平方向に左から右へ）にコンテンツレイヤーを介してユーザーがナビゲートすることはまた、背景レイヤー及び／又はタイトルレイヤーにおける同じ方向の動きを引き起こす。動きの量及び性質は、レイヤーの相対的な長さ、又は対応するロックポイント間の相対距離などの１つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーより（ピクセルの観点から）長い場合、コンテンツレイヤーは背景レイヤーより（ピクセルベースで）速く移動する。
【００１９】
本明細書に記載の実施例に対する様々な代替手段が可能である。たとえば、フローチャート図を参照して説明される技術は、ある段階を繰り返したり省略したりすることなどによって、フローチャートに示される段階の順序を変えることにより、変更することができる。別の例として、システム図を参照して説明されるシステムは、ある段階を繰り返したり省略したりすることなどによって、図面に示す処理の段階の順序を変えることにより、変更することできる。別の例として、図面を参照して説明されるユーザーインターフェースは、ある特徴を省略することなどによって、図に示すユーザーインターフェースの機能の内容や配置を変えることにより、変更することができる。別の例として、いくつかの実施例が特定のデバイス及びユーザー入力機構（例えば、タッチスクリーンインターフェースを備えたモバイルデバイス）を参照して説明されるが、説明される技術及び手段は他のデバイス及び／又はユーザー入力機構とともに使用することができる。
【００２０】
様々な技術及び手段を組み合わせて又は独立して使用することができる。異なる実施例は記載される技術や手段のうちの１つ又は複数を実施する。
Ｉ．階層化グラフィカルユーザーインターフェース技術及び手段
効果的なユーザーインターフェースの設計には多くの課題がある。１つの課題は、ディスプレイのスペースの制約を考慮して、最適な量の視覚情報や機能をユーザーにどのように提供するか、ということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型のディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、しばしば、ディスプレイに収まらない、より多くの利用可能な情報や機能が存在するためである。
【００２１】
互いの上にデータのレイヤーを置いて、それらが異なる方法で動くことを可能にすることによって、グラフィカルユーザーインターフェースは、ディスプレイ上で可視ではないユーザーの現在の活動に関連するより多くの情報がある場合であっても、ユーザーが見ている情報のコンテキストを提供することができる。例えば、コンテンツレイヤーは少なくともある程度独立して動くことができて、ユーザーがコンテンツレイヤーの異なる部分を視界に入るように動かしたり視界の外へ動かしたりすることを可能にするが、コンテンツレイヤーに関連付けられた別のレイヤーが当該コンテンツレイヤーよりもより少ない程度に動く場合であっても、当該コンテンツレイヤーに関連付けられた別のレイヤーのある一部は可視のままである。
【００２２】
記載される技術及び手段は、グラフィカルユーザーインターフェース（ＧＵＩ）などのユーザーインターフェース（ＵＩ）における情報（例えば、視覚情報、機能情報及びメタデータ）を、レイヤー（例えば、平行なレイヤー又は少なくとも実質的に平行なレイヤー）に分離すること、及び異なる方法で（例えば、異なる速度で）このようなレイヤーを移動することに関する。たとえば、説明される実施例は、互いに対して異なる速度で移動するＵＩレイヤーを示すマルチレイヤーＵＩシステムを含む。以下により詳細に記載されるように、各レイヤーにおける移動速度は、レイヤーにおいて視覚的に提示されるべきデータ（例えば、テキスト又はグラフィックス）の量、又は対応するロックポイント間の相対距離などを含む、いくつかの要因に依存し得る。レイヤーにおいて視覚的に提示されるべきデータの量は、例えば、ディスプレイ上でレンダリングされるか又はディスプレイ上での可能なレンダリングのために配置されるようなデータの水平方向に測定される長さを決定することによって測定することができる。長さはピクセル単位で又は他の適当な尺度（例えば、テキストの文字列における文字数）によって測定することができる。より大きなデータを有しより速い速度で移動するレイヤーは、より遅い速度で移動するより小さなデータ量のレイヤーよりも大きな画素数のぶんだけ前へ進むことができる。レイヤーの移動速度はさまざまな方法で決定することができる。たとえば、低速のレイヤーの移動速度は高速のレイヤーの移動速度から導くことができ、その逆も同様である。又は、レイヤーの移動速度は互いに独立して決定することができる。
【００２３】
ＵＩの様々なレイヤーの動きは、通常、ユーザーインタラクションにある程度依存する。例えば、レイヤーのある部分から別の部分に移動しようとするユーザーは、望ましい移動方向を示すためにユーザー入力を提供する。ユーザー入力は、ディスプレイ上の１つ又は複数のレイヤーにおいて動きを引き起こすことができる。いくつかの実施例では、ユーザーは、タッチスクリーンとインタラクトすることによって、デバイスの表示領域に表示されるレイヤーの動きを引き起こす。インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及び、タッチスクリーンの表面上でそれを（例えば、フリック動作又はスイープ動作によって）移動させて所望の方向にレイヤーを移動させることを含んでもよい。また、ユーザーは、キーパッド又はキーボード上のボタン（例えば、方向ボタン）を押すこと、トラックボールを動かすこと、マウスでポイントしてクリックすること、音声コマンドを行うことなどによって、いくつかの他の方法でレイヤーとインタラクトすることができる。
【００２４】
ユーザーインタラクションがレイヤーにおける動きを引き起こすとき、レイヤーの動きは、通常、レイヤーの長さ並びにユーザーによって行われる動きの大きさ、移動速度及び方向の関数である。たとえば、タッチスクリーン上での左方向へのフリック動作は、表示領域に対するレイヤーの左方向への動きを生成する。レイヤーはまた、レイヤーが視覚的なコンテキストをユーザーに提供しつつ異なる速度で移動することができるように、互いに対して配置することができる。たとえば、セクションヘッダー（例えば、「履歴」などのテキスト文字列）は、コンテンツレイヤーにおける可視のコンテンツ及び画面の外のコンテンツ（例えば、現在再生しているメディアファイル及び最近再生されたメディアのリストを表す画像）にまたがって、コンテンツレイヤーとは異なる速度で移動するがコンテンツのコンテキストを提供することができる。
【００２５】
実施例及び／又はユーザーの好みに応じて、ユーザー入力はレイヤーにおける異なる種類の動きを生成するために異なる方法で解釈することができる。たとえば、マルチレイヤーＵＩシステムは、左又は右への任意の動き、水平面よりかなり上又は下に延在する斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができ、システムはより正確な動きを要求することができる。別の例として、マルチレイヤーＵＩシステムは、レイヤーを移動する前に、そのレイヤーが占める表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを要求してもよいし、又はシステムは、レイヤーにおける動きを引き起こすためにタッチスクリーンの他の部分とのインタラクションを可能にすることができる。別の例として、ユーザーは、要素のリストなどの一度に画面に表示されないコンテンツレイヤーの一部において上下にスクロールするために上向き又は下向きの動きを使用することができ、そのような上向き／下向きの動きはさらに斜めの動きの効果のために左／右の動きと組み合わせることができる。
【００２６】
レイヤー内の特定の動きを生成する必要があるユーザーの動きの実際の量及び方向は、実施例やユーザーの好みに応じて変わる。たとえば、マルチレイヤーＵＩシステムは、ユーザーの動きの大きさや移動速度（又は速度）に応じて（例えば、ピクセルの観点からの）レイヤーにおける運動量を計算するために使用されるデフォルト設定を含んでもよい。別の例として、ユーザーは、タッチスクリーン上での指先又はスタイラスの同じ動作がコントロールの設定に応じてレイヤーについてのより小さな又はより大きな動きを生成するように、タッチスクリーンの感度コントロールを調整することができる。
【００２７】
いくつかの実施例では、レイヤーはロックポイントを含む。レイヤーのロックポイントは、デバイスの表示領域が整列される対応する位置を示す。たとえば、表示領域の左端が左端のロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー上の位置に移動する場合、表示領域の左端はまた、他のレイヤーの各々における対応する左端のロックポイント「Ａ」において合わせられる。ロックポイントはまた、表示領域の右端（右端のロックポイント）の位置合わせ、又は他の種類の位置合わせ（例えば、ロックポイントを中央に置く）を示してもよい。通常、各レイヤーにおける対応するロックポイントは、レイヤーが異なる速度で移動するということを考慮して配置される。例えば、コンテンツレイヤーにおける第１のロックポイントと第２のロックポイントとの間の距離が背景レイヤーにおける対応する第１のロックポイントと第２のロックポイントとの間の距離の２倍である場合、背景レイヤーは、２つのロックポイント間で移行するときにコンテンツレイヤーの半分の速度で移動する。
【００２８】
図１に示す例において、背景レイヤー１１０及びコンテンツレイヤー１１２は、対応する左端ロックポイント 「Ａ」、「Ｃ」、「Ｅ」及び「Ｇ」、並びに対応する右端ロックポイント「Ｂ］、「Ｄ」、「Ｆ」及び「Ｈ」を有する。左端のロックポイントは表示領域の左端（図示せず）に合わせ、右端ロックポイントは表示領域の右端に合わせる。ロックポイントに対応する左端又は右端の位置合わせは、表示領域の端とのロックポイントの正確な位置合わせを含んでもよく、又はロックポイントと表示領域のエッジとの間のある量のパディング（padding）を含んでもよい。コンテンツレイヤー１１２において、左端のロックポイントは、コンテンツペイン（例えば、それぞれ、コンテンツペイン１２０、１２２、１２４及び１２６）の左端に合い、右端のロックポイントはコンテンツペインの右端に合う。２つのレイヤー１１０、１１２におけるロックポイント間のマッピングは２つのレイヤー間の矢印及び背景ペイン１０２内の破線によって示される。
【００２９】
図１に示すロックポイントは、一般的にロックポイントの完全な組を表すものではない。代替手段としてロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央のロックポイントは、表示領域の中央との位置合わせを示すことができる。別の代替手段として、より少ないロックポイントを使用することができ、又は表示可能な領域間のオーバーラップを提供するためにより多くのロックポイントを使用することができる。例えば、ロックポイントは左端又は右端ロックポイントのいずれかに限定されてもよいし、又はロックポイントはレイヤーのある部分について使用できるが他については使用できないものであってもよい。別の代替手段として、ロックポイントは省略することができる。
【００３０】
レイヤー内の対応する位置を示すことに加えて、ロックポイントは他の挙動を示すことができる。例えば、ロックポイントは、ロックポイントに対応するレイヤーの一部がディスプレイ上で見えてくるときにレイヤーが移動するコンテンツレイヤーにおける位置を示すことができる。これは、例えば、画像、リスト又は他のコンテンツ要素が表示領域の左端又は右端の近くで部分的に見えるようになるときに有用となる−コンテンツレイヤーは、表示領域のエッジが適切なロックポイントと合うようにレイヤーを動かすことによって自動的にコンテンツ要素を完全に見えるようにすることができる。ロックアニメーションはフリックジェスチャーやパンジェスチャーなどのナビゲーションイベントの最後に実行することができ、特定のロックポイントにレイヤーを合わせる。ロックポイントに正確に合っていないユーザーが生成した動きをナビゲーションイベントが生成する場合、ロックアニメーションはレイヤーを合わせるために使用することができる。例として、ロックアニメーションは、（例えば、２つのコンテンツペインの一部が表示領域において可視である場合に）２つのコンテンツペイン間の位置へのコンテンツレイヤーの動きを引き起こすナビゲーションイベントの最後に実行することができる。マルチレイヤーＵＩシステムは、どのコンテンツペインが表示領域においてより多くのスペースを占めているかを確認することができ、ロックアニメーションを使用してそのペインへ移行することができる。これにより、レイヤーの全体像（overall look）を向上させることができ、表示領域において情報や機能（例えば、機能的なＵＩ要素）を見えるようにするときに有効である。
【００３１】
ロックポイントはまた、ナビゲーション中にロッキング「ノッチ」又は「バンプ」効果を提供するのに役立つ。例えば、ユーザーがコンテンツレイヤーの長さに沿って移動するとき、レイヤーは、ユーザーによってなされる各ナビゲーション動作（例えば、タッチスクリーン上のフリック動作やパン動作）の後に（例えば、一定の間隔で、コンテンツ要素間など）ロックポイントにおいて停止してもよい。
【００３２】
様々なレイヤーの動きはコンテキストに応じて異なってもよい。たとえば、ユーザーは、コンテンツレイヤーの始めから左にナビゲートしてコンテンツレイヤーの端に到達したり、コンテンツレイヤーの端から右にナビゲートしてコンテンツレイヤーの始めに到達したりすることができる。このラッピング（wrapping）機能（特徴）は、コンテンツレイヤーを通じてナビゲートするときにより多くの柔軟性をもたらす。ラッピングはさまざまな方法でマルチレイヤーＵＩシステムによって扱うことができる。たとえば、ラッピングは、タイトルレイヤーや背景レイヤーなどのレイヤーの端からそのようなレイヤーの始めへの、又はその逆の、迅速な移行を示すアニメーションを生成することによって処理することができる。このようなアニメーションは、コンテンツレイヤーにおける通常のパン動作と、又はロッキングアニメーションなどの、コンテンツレイヤーにおける他のアニメーションと、組み合わせることができる。しかし、ラッピング機能は必ずしも必要ではない。
例１−複数のＵＩレイヤー
図２は、異なる速度で移動する複数のレイヤーを備えるユーザーインターフェースを提供する例示的な技術２００を示すフローチャートである。２１０において、マルチレイヤーＵＩシステムは、（例えば、コンピューティングデバイスの表示領域において）同時に表示される平行なレイヤーを含むユーザーインターフェースを提供する。一般的に、レイヤーの少なくとも１つの少なくとも一部は表示領域に表示されない。２２０において、システムはレイヤーにおいて行われるべき動きを示すユーザー入力を受信する。たとえば、コンテンツレイヤーが表示領域の右端を超える場合、ユーザーは、コンテンツレイヤーの異なる部分を見るために、コンテンツレイヤーにおけるパン動作を引き起こすべくタッチスクリーンとインタラクトすることができる。２３０において、システムは、ユーザー入力に少なくとも部分的に応じて、異なる移動速度の平行なレイヤーにおける動きをレンダリングする。たとえば、システムは、コンテンツレイヤーを、タッチスクリーン上のパンジェスチャーの速度に等しい速度で移動させ、タイトルレイヤー及び背景レイヤーを、より遅い速度で移動させることができる。
【００３３】
図３Ａ−３Ｃは、表示領域３００を備えたディスプレイを有するデバイスについてマルチレイヤーＵＩシステムによって提示されたＧＵＩにおける、複数のレイヤー３１０、３１２、３１４を示す図である。表示領域３００は、スマートフォンや同様のモバイルコンピューティングデバイスのディスプレイの通常の寸法を有する。図３Ａ−３Ｃに示した例によれば、ユーザー３０２（手のアイコンで表される）は、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー３１４とインタラクトする。このインタラクションは、例えば、指先、スタイラス又は他の物体によってタッチスクリーンに接触すること、及びタッチスクリーンの表面上で（例えば、フリック動作又はスイープ動作によって）それを移動させることを含んでもよい。
【００３４】
コンテンツレイヤー３１４はコンテンツ要素（例えば、コンテンツ画像３３０Ａ−Ｈ）を含む。レイヤー３１０、３１２はテキスト情報（それぞれ「Ｃａｔｅｇｏｒｙ（カテゴリー）」及び「Ｓｅｌｅｃｔｅｄ Ｓｕｂｃａｔｅｇｏｒｙ（選択されたサブカテゴリー）」）を含む。コンテンツレイヤー３１４の長さはレイヤー３１２の長さの約２倍であるように示され、レイヤー３１２の長さはレイヤー３１０の長さの約２倍であるように示される。
【００３５】
図３Ａ−３Ｃにおいて、ユーザー３０２によって引き起こされ得るレイヤーの動きの方向が、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー３１０、３１２、３１４の可能な動き（例えば、左又は右の水平方向の動き）を示す。
【００３６】
図３Ａ−３Ｃに示す例では、システムは、左又は右へのユーザーの動き、水平面より上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きを示す入力として解釈する。図３Ａ−３Ｃに示す例では、コンテンツレイヤー３１４に対応する表示領域３００の一部とユーザー３０２がインタラクトすることを示すが、システムは、コンテンツレイヤー３１４によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムは、レイヤー３１０、３１２、３１４における動きを引き起こすためにタッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域３００の部分に相当する部分）とのインタラクションを可能にする。
【００３７】
ユーザー入力が右または左への動きを示す場合、システムは、表示領域３００に対するレイヤー３１０、３１２、３１４の右方向又は左方向の動きを生成する。レイヤー３１０,３１２、３１４の移動量は、レイヤーにおけるデータ及びユーザーによって行われた動きの大きさや移動速度（又は速度）の関数である。
【００３８】
図３Ａ−３Ｃに示す例において、レイヤー３１０、３１２、３１４はラッピングアニメーション中を除いて、次の規則に従って動く：
１．コンテンツレイヤー３１４はレイヤー３１２の約２倍の速度で移動し、レイヤー３１２はレイヤー３１４の約半分の長さである。
【００３９】
２．レイヤー３１２はレイヤー３１０の約２倍の速度で移動し、レイヤー３１０はレイヤー３１２の約半分の長さである。
３．コンテンツレイヤー３１４はレイヤー３１０の約４倍の速度で移動し、レイヤー３１０はレイヤー３１４の約１／４の長さである。
【００４０】
レイヤー３１０、３１２、３１４の動きは、いくつかの状況では、上記の規則とは異なる場合がある。図３Ａ−３Ｃに示す例では、ラッピングが許可される。矢印は、ユーザーがコンテンツレイヤー３１４の先頭（図３Ａに示す位置）から左にナビゲートすることができ、コンテンツレイヤー３１４の終端（図３Ｃに示す位置）から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。図３Ａ−３Ｃに示す例において、レイヤー３１０及び３１２におけるテキストは、コンテンツレイヤーの先頭に巻き戻すときにより速く移動する。図３Ｃにおいて、表示領域３００は、それぞれのテキスト文字列の末尾における、レイヤー３１０及び３１２内の、それぞれ１つ及び２つの文字の一部を示す。図３Ａに示す状態へ戻るためのラッピングアニメーションは、レイヤー３１０、３１２のテキストを右から見えるようにして、図３Ａに示す状態から図３Ｂに示す状態への移行などの他のコンテキストにおけるものよりも迅速な動きをもたらすことを含んでもよい。
【００４１】
図３Ａ−３Ｃにおいて、例としての左端「ロックポイント」「Ａ」、「Ｂ」及び「Ｃ」が各レイヤーに対して示される。左端のロックポイントは、各レイヤー上の、表示領域３００の左端の対応する位置を示す。たとえば、表示領域３００の左端がロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー３１４上の位置にナビゲートする場合、表示領域の左端はまた、図３Ａに示されるように、他のレイヤー３１０、３１２のロックポイント「Ａ」において合わせられる。図３Ｂにおいて、表示領域３００の左端は、レイヤー３１０、３１２、３１４の各々におけるロックポイント「Ｂ」にある。図３Ｃにおいて、表示領域３００の左端は、各レイヤーにおけるロックポイント「Ｃ」にある。
【００４２】
図３Ａ−３Ｃに示すロックポイントは、ロックポイントの完全な組を一般に表すものではなく、簡潔にするためだけにロックポイント「Ａ」、「Ｂ」及び「Ｃ」に制限されたものである。たとえば、左端のロックポイントは、コンテンツ画像３３０Ａ−３３０Ｈの各々について設定できる。代替的に、ロックポイントをほとんど使用しなくてもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端のロックポイントは表示領域３００の右端との位置合わせを示してもよいし、中央のロックポイントは表示領域３００の中央との位置合わせを示してもよい。
例２−表示の向きの変更
記載される技術及び手段は、横方向など、異なる方向で表示画面上で使用することができる。表示方向の変化は、例えば、ＵＩが横長の形状に方向付けられるように（例えば、ユーザーの好みによって）構成される場合、又はユーザーがデバイスを物理的に回転させる場合に生じ得る。デバイス内の１つ又は複数のセンサー（例えば、加速度計）は、デバイスがいつ回転されたかを検出し、それに応じて表示方向を調整するために使用することができる。図３Ｄに示す例では、表示領域は横長の形に方向付けられ、レイヤー３１２及び３１４のみを見ることができる。ただし、コンテンツレイヤーのより多くの部分を見ることができるようになって、ユーザーが一度にコンテンツレイヤー内のより多くのコンテンツ（例えば、コンテンツ画像３３０Ａ−３３０Ｄ）を見ることを可能にする。代替的に、必要に応じて、レイヤーの高さを低減し、フォントや画像のサイズを減らすことによるなどして、すべてのレイヤーを見続けることができるよう維持するために調整を行うことができる。例えば、レイヤー３１０及び３１２の高さを低くするとともに、テキストのフォントのサイズを対応付けて小さくすることができ、その結果、コンテンツレイヤー３１４をナビゲートを容易にするために同じサイズに保ちつつ、レイヤー３１０及び３１２がなお見ることができるようにすることができる。
【００４３】
図３Ａ−３Ｃの場合のように、ユーザー３０２は、コンテンツレイヤー３１４に沿ってナビゲートするために（横方向に）左方向又は右方向の動きをすることができる。各レイヤーにおけるロックポイント「Ａ」、「Ｂ」及び「Ｃ」の位置づけ並びにレイヤーの相対的な長さは、コンテンツレイヤー３１４がその上のレイヤー３１２の約２倍の速度で移動することを示す。また、ロックポイントの位置及びロックポイント間の距離は、再配向（reorientation）の効果（例えば、表示領域の新たな有効幅）を考慮するように動的に調整することができる。しかし、このような調整は必ずしも必要ではない。例えば、表示領域が等しい高さと幅を有する場合、横方向への表示領域の再配向をしても表示領域の有効幅は変更されない。
例３−複数のＵＩレイヤーにおける動きの計算
図４は、ＵＩシステムがマルチレイヤーＧＵＩ（例えば、図３Ａ−３Ｃに示すＧＵＩ）において第１の方向（例えば、水平方向）の動きを計算する例示的な技術４００を示すフローチャートである。
【００４４】
４１０において、ＵＩシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第１のレイヤー（例えば、コンテンツレイヤー３１４）における視覚情報（例えば、図３Ａに示すコンテンツ画像３３０）の第１の部分はタッチスクリーンの表示領域（例えば、表示領域３００）内にある。４２０において、ＵＩシステムは、タッチスクリーン上のジェスチャーに対応するユーザー入力を受信する。４３０において、ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて第１の動きを計算する。第１の動きは、第１のレイヤーにおける視覚情報の第２の部分（例えば、コンテンツ画像３３０Ｃ）が表示領域の外にある最初の第１のレイヤーの位置（例えば、図３Ａに示す位置）から、第１のレイヤーにおける視覚情報の第２の部分が表示領域内にある現在の第１のレイヤーの位置（例えば、図３Ｂに示す位置）への、第１のレイヤーの動きである。第１の動きは、第１の移動速度で第１の方向（例えば、右方向、水平方向）である。第１の移動速度はジェスチャーの動きの速度に基づく。たとえば、第１の移動速度は、タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、ジェスチャーの動きの速度（例えば、タッチスクリーン上のユーザーの指や他の物体の移動速度）と実質的に等しくすることができる。４４０において、ＵＩシステムは、ユーザー入力に少なくとも部分的に基づいて、第１の動きと実質的に平行な第２の動きを計算する。第２の動きは、最初の第２のレイヤーの位置（例えば、図３Ａに示す位置）から現在の第２のレイヤーの位置（例えば、図３Ｂに示す位置）への第２のレイヤー（例えば、レイヤー３１２）における視覚情報の動きである。第２の動きは、第１の移動速度とは異なる第２の移動速度で第１の方向（例えば、右方向、水平方向）にある。
【００４５】
動きは（例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での）表示のためにアニメート及び／又はレンダリングすることができる。
例４−変化する速度で動く個々のレイヤー
図５Ａ−５Ｄは、セクションヘッダーレイヤー５１２の異なる部分がコンテンツレイヤー５１４の異なる部分に関連付けられる、３つのレイヤー５１０、５１２、５１４を備えたマルチレイヤーＵＩシステムによって提示されるＧＵＩを示す図である。図５Ａ−５Ｄに示す例によれば、ユーザー（図示せず）はコンテンツレイヤー５１４とインタラクトする。たとえば、ユーザーは、コンテンツレイヤー内の異なるセクション（例えば、セクション１ａ、１ｂ、１ｃ、１ｄ、２ａ、２ｂ、２ｃ、又は２ｄ）を強調するためにナビゲーションボタン（図示せず）を押すことによって、コンテンツレイヤー５１４をナビゲートする。また、ユーザーは、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー５１４とインタラクトする。当該インタラクションは、例えば、指先、スタイラス又は他の物体によりタッチスクリーンに接触すること、及びタッチスクリーンの表面上で（例えば、フリック動作又はスイープ動作によって）それを移動させることを含んでもよい。
【００４６】
コンテンツレイヤー５１４は、画像、アイコン、テキスト文字列やリンクのリスト、又はいくつかの他のコンテンツであってもよいセクション１ａ、１ｂ、１ｃ、１ｄ、２ａ、２ｂ、２ｃ、及び２ｄを含む。他のレイヤー５１０、５１２はテキスト情報を含む。セクションヘッダーレイヤー５１２は2つのテキスト文字列（「Ｆｅａｔｕｒｅ １（機能１）」及び「Ｆｅａｔｕｒｅ ２（機能２）」）を含む。「Ｆｅａｔｕｒｅ １」はセクション１ａ、１ｂ、１ｃ及び１ｄに関連付けられる。「Ｆｅａｔｕｒｅ ２」はセクション２ａ、２ｂ、２ｃ及び２ｄに関連付けられる。レイヤー５１０は1つのテキスト文字列（「Ａｐｐｌｉｃａｔｉｏｎ（アプリケーション）」）を含む。コンテンツレイヤー５１４の長さは、セクションヘッダーレイヤー５１２の全体の長さ（例えば、２つの文字列の合計の長さ）より長く、レイヤー５１０の長さより長くなるように示される。
【００４７】
図５Ａ−５Ｄにおいて、ユーザーによって示すことができる動きの方向は、表示領域３００の上の左向き矢印及び右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー５１０、５１２、５１４の可能な動き（左又は右の水平方向の動き）を示す。
【００４８】
図５Ａ−図５Ｄに示す例では、ユーザーは、コンテンツレイヤー５１４において左又は右にナビゲートするときに、コンテンツレイヤー５１４の異なるセクション（例えば、図５Ａのセクション１ａ、図５Ｂのセクション１ｄ、図５Ｃのセクション２ａ、図５Ｄのセクション２ｄ）を強調表示する。ユーザー入力が右又は左への動きを示す場合、システムは、表示領域３００に対するレイヤー５１０、５１２、５１４の右方向又は左方向の動きを生成する。レイヤー５１０、５１２、５１４の移動量はレイヤー内のデータ及びユーザーによって行われる動きの大きさや移動速度（又は速度）の関数である。
【００４９】
図５Ａ−５Ｄにおいて、例示的な右端ロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」が各レイヤー５１０、５１２、５１４について示される。各レイヤーの右端ロックポイントは、各レイヤーの表示領域３００の右端の対応する位置を示す。たとえば、ユーザーがコンテンツレイヤー５１４のセクション１ａにナビゲートする場合、表示領域３００の右端はロックポイント「Ａ」にあり、表示領域３００の右端は、図５Ａに示すように、他のレイヤー５１０、５１２のロックポイント「Ａ」において合わせられる。図５Ｂにおいて、表示領域３００の右端は、レイヤー５１０、５１２、５１４の各々のロックポイント「Ｂ」にある。図５Ｃにおいて、表示領域３００の右端は、レイヤー５１０、５１２、５１４の各々のロックポイント「Ｃ」にある。図５Ｄにおいて、表示領域３００の右端は、レイヤー５１０、５１２、５１４の各々のロックポイント「Ｄ」にある。
【００５０】
図５Ａ−５Ｄに示すロックポイントは、ロックポイントの完全な組を一般的に示すものではなく、単に簡潔にするためにロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」に限定されたものである。たとえば、左端ロックポイントはコンテンツレイヤー５１４における１つ又は複数のセクションに対して設定することができる。代替的に、追加の右端のロックポイントを使用してもよく、より少ないロックポイントを使用してもよく、ロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央ロックポイントを、表示領域３００の中央に合わせるために使用することができる。
【００５１】
図５Ａ−図５Ｄに示す例では、レイヤー５１０、５１２、５１４は、ラッピングアニメーション中を除き、次の規則に従って動く。
１．セクションヘッダーレイヤー５１２における「Ｆｅａｔｕｒｅ １（機能１）」というテキスト文字列に関連付けられるコンテンツレイヤー５１４の部分（セクション１ａ、１ｂ、１ｃ及び１ｄ）は、「Ｆｅａｔｕｒｅ １」というテキスト文字列の約４倍の速度で移動する。「Ｆｅａｔｕｒｅ １」というテキスト文字列は、「Ｆｅａｔｕｒｅ １」というテキスト文字列に関連付けられるコンテンツレイヤー５１４の部分（セクション１ａ、１ｂ、１ｃ及び１ｄ）の約半分の長さであり、コンテンツレイヤー５１４において右端ロックポイント「Ａ」から右端ロックポイント「Ｂ」まで移動するべき距離はセクションヘッダーレイヤー５１２における対応するロックポイント間の距離の約４倍の長さとなる。同様に、セクション・ヘッダーレイヤー５１２の「Ｆｅａｔｕｒｅ ２（機能２）」というテキスト文字列に関連付けられたコンテンツレイヤー５１４の部分（セクション２ａ、２ｂ、２ｃ及び２ｄ）は「Ｆｅａｔｕｒｅ ２」というテキスト文字列の約４倍の速度で移動する。
【００５２】
２．セクションヘッダーレイヤー５１２における「Ｆｅａｔｕｒｅ １」というテキスト文字列に関連付けられたコンテンツレイヤー５１４の部分（セクション１ａ、１ｂ、１ｃ及び１ｄ）を通じてナビゲートする場合、テキスト文字列「Ｆｅａｔｕｒｅ １」はレイヤー５１０の約２倍の速度で移動する。「Ｆｅａｔｕｒｅ １」というテキスト文字列はレイヤー５１０におけるテキスト文字列「Ａｐｐｌｉｃａｔｉｏｎ（アプリケーション）」とほぼ同じ長さであるが、レイヤー５１０において右端ロックポイント「Ａ」から右端ロックポイント「Ｂ」に移動するべき距離は、セクションヘッダーレイヤー５１２内の対応するロックポイント間の距離の約半分である。同様に、セクションヘッダーレイヤー５１２におけるテキスト文字列「Ｆｅａｔｕｒｅ ２」に関連付けられるコンテンツレイヤー５１４の部分（セクション２ａ、２ｂ、２ｃ及び２ｄ）を通じてナビゲートするとき、「Ｆｅａｔｕｒｅ ２」というテキスト文字列はレイヤー５１０の約２倍の速度で移動する。
【００５３】
３．セクションヘッダーレイヤー５１２内のテキスト文字列「Ｆｅａｔｕｒｅ １」に関連付けられたコンテンツレイヤー５１４の部分からセクションヘッダーレイヤー５１２のテキスト文字列「Ｆｅａｔｕｒｅ ２」に関連付けられたコンテンツレイヤー５１４の部分に（すなわち、図５Ｂに示すセクション１ｄから図５Ｃに示すセクション２ａに）移動するとき、セクションヘッダーレイヤー５１２は、図５Ｃにおけるレイヤー５１２の右端ロックポイント「Ｂ」と右端ロックポイント「Ｃ」との間の距離によって示されるように、より速く移動する。
【００５４】
４．コンテンツレイヤー５１４はレイヤー３１０の約８倍の速度で移動する。コンテンツレイヤー５１４における隣接する右端ロックポイント間で（例えば、「Ａ」から「Ｂ」まで）移動する距離は、レイヤー５１０内の対応する右端ロックポイント間の距離の約８倍の長さとなる。
【００５５】
レイヤー５１０、５１２、５１４における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図５Ａ−図５Ｄに示す例では、ラッピングが可能となる。表示領域３００の上の矢印は、ユーザーが、コンテンツレイヤー５１４の先頭（図５Ａに示す位置）から左にナビゲートすることができ、コンテンツレイヤー５１４の端（図５Ｄに示す位置）から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。たとえば、図５Ｄに示す状態から図５Ａに示す状態へ戻るためのラッピングアニメーションは、レイヤー５１０、５１２のテキストを右から視界にもたらすことを含み、図５Ａに示す状態から図５Ｂに示す状態への移行などの他のコンテキストにおけるものよりもより速い移動に帰着する。
例５−並行のレイヤー移動
図６Ａ−６Ｄは、レイヤー６１４の上のレイヤー６１２と並行に（すなわち、同じ方向及び同じ速度で）動くコンテンツレイヤー６１４を含むマルチレイヤーＵＩシステムによって提示されるＧＵＩを示す図である。この例では、（手のアイコンで表される）ユーザー３０２は、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー６１４を介してナビゲートする。当該インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及びタッチスクリーンの表面上で（例えば、フリック動作又はスイープ動作により）それを動かすことを含んでもよい。
【００５６】
コンテンツレイヤー６１４は、（以下でより詳細に説明される）ゲームの画像６４０、６４２、６４４、リスト６５０、６５２、６５４、及びアバター６３０を含む。他のレイヤー６１０、６１２は、テキスト情報（レイヤー６１０の「Ｇａｍｅｓ（ゲーム）」、レイヤー６１２の「Ｓｐｏｔｌｉｇｈｔ（スポットライト）」、「Ｘｂｏｘ Ｌｉｖｅ」、「Ｒｅｑｕｅｓｔｓ（リクエスト）」及び「Ｃｏｌｌｅｃｔｉｏｎ（コレクション）」）を含む。図６Ａ−６Ｄにおいて、例示的なロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」がレイヤー６１０及び６１２について示される。水平方向の動きの観点では、コンテンツレイヤー６１４はレイヤー６１２にロックされ、レイヤー６１２について示されるロックポイントはまた、レイヤー６１４に適用される。
【００５７】
各レイヤーのロックポイントは、各レイヤーの表示領域３００の左端の対応する位置を示す。たとえば、表示領域３００の左端がロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー６１４上の位置にナビゲートするとき、表示領域３００の左端はまた、図６Ａに示すように、他のレイヤー６１０、６１２のロックポイント「Ａ」に合わせられる。図６Ｂにおいて、表示領域３００の左端は、レイヤー６１０、６１２、６１４の各々のロックポイント「Ｂ」にある。図６Ｃにおいて、表示領域３００の左端は、レイヤー６１０、６１２、６１４の各々のロックポイント「Ｃ」にある。図６Ｄにおいて、表示領域３００の左端は、レイヤー６１０、６１２、６１４の各々のロックポイント「Ｄ」にある。
【００５８】
図６Ａ−６Ｄに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、単に簡潔にするためにロックポイント「Ａ」、「Ｂ」、「Ｃ」及び「Ｄ」に限定されたものである。例えば、右端ロックポイントを表示領域３００の右端と合わせるために追加することができ、表示領域３００の中央と合わせるために中央ロックポイントを追加することができる。代替的に、より少ないロックポイントを使用してもよく、より多くのロックポイントを使用してもよく、ロックポイントを省略してもよい。
【００５９】
ユーザー３０２によってレイヤー６１０、６１２、６１４において引き起こされ得る動きの方向は、図６Ａ−６Ｄにおける左向きの矢印及び右向きの矢印で示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー６１０、６１２、６１４の可能な動き（左又は右の水平方向の動き）を示す。システムは、左又は右へのユーザーの動き、水平面の上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができる。図６Ａ−６Ｅに示す例はコンテンツレイヤー６１４に対応する表示領域３００の一部とユーザー３０２がインタラクトすることを示すが、システムは、コンテンツレイヤー６１４によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムはまた、レイヤー６１０、６１２、６１４において動きを引き起こすために、タッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域に対応する部分）とのインタラクションを可能にする。
【００６０】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域３００に対する、レイヤー６１０、６１２、６１４の左方向又は右方向の動きを生成する。この例では、レイヤー６１０、６１２、６１４の水平移動量は、レイヤー内のデータやユーザーによって行われる動きの大きさや速度の関数である。レイヤー６１０、６１２、６１４はラッピングアニメーション中を除いて次の規則に従って水平方向に動く。
【００６１】
１．コンテンツレイヤー６１４の水平方向の動きはレイヤー６１２にロックされる。
２．レイヤー６１２及び６１４はそれぞれ、レイヤー６１０の約３倍の速度で水平に移動し、レイヤー６１０はレイヤー６１２及び６１４の約１／３の長さである。
【００６２】
レイヤー６１０、６１２、６１４における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図６Ａ−６Ｅに示す例では、ラッピングが可能となる。矢印は、ユーザーがコンテンツレイヤー６１４の先頭（図６Ａ及び図６Ｅに示す位置）から左にナビゲートすることができ、コンテンツレイヤー６１４の端（図６Ｄに示す位置）から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。図６Ａ及び６Ｄに示す例では、コンテンツレイヤー６１４の先頭に戻ってラッピングするとき、レイヤー６１０内のテキストはより速く動く。図６Ｄにおいて、表示領域３００は、「Ｇａｍｅｓ」というテキスト文字列の末尾の、レイヤー６１０における２文字の一部を示す。図６Ａに示す状態へ戻るためのラッピングアニメーションは、レイヤー６１０のテキストを含むレイヤー６１０、６１２、６１４のデータを右から視界にもたらすことを含み、図６Ａに示す状態から図６Ｂに示す状態への移行などの他のコンテキストにおけるものよりもより速いレイヤー６１０における動きに帰着する。
例６−レイヤーの要素の動き
全体のレイヤーの動きに加えて、ユーザーはまた、レイヤー内のデータ及びレイヤーがどのように配置されるかに応じて、レイヤーの要素又は部分における動きを引き起こすことができる。たとえば、ユーザーは、全体としてレイヤーにおいて引き起こされ得る動き（例えば、水平方向の動き）に対して直交する又は実質的に直交する、レイヤーの要素（例えば、リスト）における動き（例えば、垂直方向の動き）を引き起こすことができる。リストが表示領域に表示することができるものよりも多くの情報を含む場合などには、水平に動くレイヤー内のレイヤー要素の直交する動きはコンテンツレイヤーに埋め込まれたリスト内の縦スクロールを含んでもよい。また、縦に動くレイヤーを提示するシステムは、レイヤーの要素における水平の動きを可能にし得る。
【００６３】
図６Ａ及び図６Ｅにおいて、コンテンツレイヤー６１４内のリスト６５０は、表示領域３００において表示され得るものよりも多くの情報を含む。システムは、垂直面の左又は右へと延びる斜めの動きを含むユーザー３０２によってなされる上下の動きを、リスト６５０の有効な上向き又は下向きの動きとして解釈することができる。リスト６５０の移動量は、ユーザー３０２によってなされる動作の大きさ又は速度とリスト６５０内のデータとの関数であってもよい。したがって、リスト６５０のスクロールは、項目ごと、項目のページごと、又は動きの大きさや速度に依存する中間のものであってもよい。この例では、リスト６５０は、図６Ａの表示領域３００において見ることができない唯一のリスト項目を含み、したがって、小さな又は大きな下向きの動きの範囲はリスト６５０の最後までスクロールするのに十分なものとなり得る。図６Ａ及び図６Ｅに示すように、レイヤー内の他の視覚的情報（例えば、リスト６５０の外のコンテンツレイヤー６１４における視覚情報又は他のレイヤー内の視覚情報）の垂直方向の位置は、上向き又は下向きの動きに影響されない。この例では、（全体としてレイヤーに影響を与えるラッピングアニメーション及びロッキングアニメーションを含む）全体としてのレイヤーの動きは、水平方向の動き（モーションの主軸）に制限される。リスト６５０は、全体としてのレイヤー内の動きに直交する第２の軸に沿った動き（例えば、垂直方向の動き）を可能にするレイヤー内のユーザーインターフェース要素の例である。
【００６４】
図６Ａ及び６Ｅは、コンテンツレイヤー６１４におけるリスト６５０に対応する表示領域３００の一部とユーザー３０２がインタラクトすることを示す。また、システムは、リスト６５０において上方又は下方への移動を引き起こすために、タッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域３００の部分に相当する部分）とのインタラクションを可能にしてもよい。
【００６５】
ユーザー３０２によって引き起こされ得る動きの方向は、図６Ａにおける追加の下向きの矢印及び図６Ｅにおける追加の上向き矢印と一緒に、図６Ａ及び図６Ｅにおける左向きの矢印及び右向きの矢印によって示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー６１０、６１２、６１４の可能な動きを（左又は右の水平方向の動き）示す。下向き及び上向きの矢印は、ユーザーの動きに応答するリスト６５０の可能な動き（上又は下の垂直方向の動き）を示す。ユーザー３０２は、リスト６５０における上又は下の動作を行った後、コンテンツレイヤー６１４において右又は左に移動することができる。リスト６５０からコンテンツレイヤー６１４において左又は右にナビゲートするときに、リスト６５０の現在の位置（例えば、図６Ｅに示されるリスト最下部の位置）を保存することができ、また、システムはデフォルトの位置（例えば、図６Ａに示されるリスト最上部の位置）に戻ることができる。可能な動きを示す図６Ａ−６Ｅ（及び他の図）における矢印は説明の目的のために示されるが、表示領域３００はそれ自体が、レイヤー及び／又はリストについて可能な動きについてのグラフィカルな指標（矢印やシェブロンなど）を表示してもよい。
【００６６】
例７−直交する動きが可能な要素を備えたレイヤーにおける動作
図７は、第１の方向と直交する（又は実質的に直交する）第２の方向に移動するように動作可能であるＵＩ要素を備えた少なくとも１つのレイヤーを有するマルチレイヤーＧＵＩ（例えば、図６Ａ−６Ｅに示すＧＵＩ）において第１の方向（例えば、水平方向）の動きをＵＩシステムが計算する例示的な技術７００を示すフローチャートである。
【００６７】
７１０において、ＵＩシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第１のレイヤー（例えば、コンテンツレイヤー６１４）は第１の方向（例えば、水平方向）と実質的に直交する第２の方向（例えば、垂直方向）に移動するように動作可能なユーザーインターフェース要素（例えば、リスト６５０）を含む。第１のレイヤーにおける視覚情報の第１の部分（例えば、図６Ｂに示すリスト６５２）は、タッチスクリーンの表示領域（例えば、表示領域３００）内にある。
【００６８】
７２０において、ＵＩシステムは、タッチスクリーン上の第１のジェスチャーに対応する第１のユーザー入力を受信する。７３０において、ＵＩシステムは、第１のユーザー入力に少なくとも部分的に基づいて、第１の動きを計算する。第１の動きは、第１のレイヤーにおける視覚情報（例えば、リスト６５０）の第２の部分が表示領域の外にある最初の第１のレイヤーの位置（例えば、図６Ｂに示す位置）から、第１のレイヤーにおける視覚情報の第２の部分が表示領域内にある現在の第１のレイヤーの位置（例えば、図６Ａに示す位置）への、第１のレイヤーの動きである。第１の動きは、第１の移動速度で第１の方向（例えば、左向きの水平方向）である。７４０において、ＵＩシステムは、第１のユーザー入力に少なくとも部分的に基づいて、第１の動きと実質的に平行な第２の動きを計算する。第２の動きは、最初の第２のレイヤーの位置（例えば、図６Ｂに示す位置）から現在の第２のレイヤーの位置（例えば、図６Ａに示す位置）への第２のレイヤーにおける視覚情報の動きである。第２の動きは、第１の移動速度とは異なる第２の移動速度で第１の方向（例えば、左向きの水平方向）にある。
【００６９】
７５０において、ＵＩシステムは、タッチスクリーン上の第２のジェスチャーに対応する第２のユーザー入力を受信する。７６０において、ＵＩシステムは、第２のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き（例えば、垂直方向の動き）を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第１のレイヤーのユーザーインターフェース要素の視覚情報の動きである。
【００７０】
実質的に直交する動きは、最初の垂直位置（例えば、図６Ａに示すようなリスト６５０の位置）から現在の垂直位置（例えば、図６Ｅに示すようなリスト６５０の位置）への垂直方向にスクロール可能な要素（例えば、リスト６５０）の視覚情報の動きであってもよい。現在の垂直位置は、例えば、最初の垂直位置及び第２のジェスチャーの速度に基づいて計算することができる。垂直にスクロール可能な要素の視覚情報の一部は、垂直方向にスクロール可能な要素が最初の垂直位置（例えば、図６Ａに示すようなリスト６５０の位置）にあるときには表示領域の外にあってもよく、垂直にスクロール可能な要素が現在の垂直位置（例えば、図６Ｅに示すようなリスト６５０の位置）にあるときには表示領域内にあってもよい。
【００７１】
動きは、（例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での）表示のためにアニメート及び／又はレンダリングすることができる。
例８−アバター
レイヤーは、レイヤーにおける他の要素又はレイヤーのセクションなどの他の要素間の関係を示す要素を含んでもよい。他の要素間の関係を示す要素は、別々のレイヤーに含まれてもよいし、又はそれぞれの他の要素と同じレイヤーに含まれてもよい。例えば、アバターレイヤーは、ユーザーに関連する別のレイヤーにおける２つの関連するセクションにまたがる範囲の動きを備えた視覚的な要素（アバター）を含んでもよい。他の要素はまた、要素間の関係を示すために使用することができる。たとえば、音楽アーティストの画像は、アーティストのアルバムリストとアーティストのツアー日程のリストとの間の関係を示すために使用されてもよい。
【００７２】
図６Ａ−６Ｅにおいて、アバター６３０は、コンテンツレイヤーにおけるリスト６５２、６５４、及びレイヤー６１２におけるリスト６５２、６５４の上の見出し（それぞれ、「Ｘｂｏｘ Ｌｉｖｅ」及び「Ｒｅｑｕｅｓｔｓ（リクエスト）」）に関連付けられる。アバター６３０は、コンテンツレイヤーの一部（例えば、リスト６５２、６５４）の間の関係を示したりコンテンツレイヤーの一部に対する関心を引いたりするための視覚的な指示（cue）を提供することができる。図６Ｂにおいて、アバター６３０はリスト６５２とリスト６５４との間に配置される。図６Ｃにおいて、アバター６３０はリスト６５４のテキストの後ろに浮いているが、表示領域３００内に完全に残ったままである。図６Ｄにおいて、アバター６３０は部分的にのみ表示領域３００内にあり、表示領域内にある部分はゲームアイコン６４０、６４２、６４４の背後にある。表示領域３００の左端にアバター６３０を配置することは、ユーザー３０２に対して、ユーザー３０２がアバター６３０の方向にナビゲートする場合にはアバター６３０に関連付けられた情報（例えば、リスト６５２、６５４）が利用可能であることを示すことができる。アバター６３０は様々な速度で移動することができる。たとえば、アバター６３０は、図６Ｃと６Ｄとの間の移行の場合と比べて、図６Ｂと６Ｃとの間の移行においてより速く移動する。
【００７３】
代替的に、アバター６３０は、異なる方法で移動したり、他の機能を示したりすることができる。たとえば、アバター６３０は、コンテンツレイヤー６１４又はある他のレイヤーにおける特定の位置（例えば、ロックポイント）にロックすることができ、その結果、アバター６３０はそれがロックされているレイヤーと同じ水平速度で動く。別の代替手段として、アバター６３０は、リスト６５０などの上下にスクロールすることができるリストに関連付けることができ、当該関連付けられるリストが上下にスクロールするときに上下に動くことができる。
【００７４】
例９−背景レイヤー
図８Ａ−８Ｃは、３つのレイヤー３１０、３１２、３１４及び背景レイヤー８５０を備えたマルチレイヤーＵＩシステムによって提示されるＧＵＩを示す図である。この例では、（手のアイコンで表される）ユーザー３０２は、表示領域３００を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー３１４とインタラクトする。
【００７５】
背景レイヤー８５０は他のレイヤーの背後に浮かんでいる。背景レイヤー８５０において視覚的に提示されるデータは、例えば、表示領域３００の境界を超えて延在する画像を含んでもよい。コンテンツレイヤー３１４は、コンテンツ要素（例えば、コンテンツ画像３３０Ａ−Ｈ）を含む。レイヤー３１０、３１２は、テキスト情報（それぞれ、「Ｃａｔｅｇｏｒｙ（カテゴリー）」及び「Ｓｅｌｅｃｔｅｄ Ｓｕｂｃａｔｅｇｏｒｙ（選択したサブカテゴリー）」）を含む。コンテンツレイヤー３１４の長さはレイヤー３１２の約２倍の長さになるように示され、レイヤー３１２の長さはレイヤー３１０の約２倍の長さであることが示される。背景レイヤー８５０の長さはレイヤー３１２の長さよりわずかに小さくなるように示される。
【００７６】
図８Ａ−８Ｃにおいて、ユーザー３０２によってレイヤー３１０、３１２、３１４、８５０において引き起こされ得る動きの方向は、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザーの動きに応答して、レイヤー３１０、３１２、３１４、８５０の可能な動き（左又は右の水平方向の動き）を示す。この例において、システムは、左又は右へのユーザーの動き、さらには水平面の上又は下に延びる斜めの動きを、レイヤーの有効な左向き又は右向きの動きとして解釈する。図８Ａ−８Ｃはコンテンツレイヤー３１４に対応する表示領域３００の一部とユーザーがインタラクトすることを示すが、システムはまた、タッチスクリーンの他の部分（例えば、他のレイヤーが占める表示領域３００の部分に対応する部分）とのインタラクションがレイヤー３１０、３１２、３１４、８５０における動きを引き起こすことを可能にする。
【００７７】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域３００に対するレイヤー３１０、３１２、３１４、８５０の右方向又は左方向の動きを生成する。レイヤー３１０、３１２、３１４、８５０の移動量は、レイヤー内のデータとユーザーによって行われた動きの大きさ又は移動速度（又は速度）との関数である。
【００７８】
図８Ａ−８Ｃにおいて、例示的な左端のロックポイント「Ａ」、「Ｂ」及び「Ｃ」が、レイヤー３１０、３１２、３１４、８５０に対して示される。左端のロックポイントは、各レイヤーの表示領域３００の左端の対応する位置を示す。たとえば、表示領域３００の左端がロックポイント「Ａ」にあるようにユーザーがコンテンツレイヤー３１４上の位置にナビゲートする場合、表示領域３００の左端はまた、図８Ａに示すように、他のレイヤー３１０、３１２、８５０のロックポイント「Ａ」において合わせられる。図８Ｂにおいて、表示領域３００の左端は、レイヤー３１０、３１２、３１４、８５０の各々のロックポイント「Ｂ」にある。図８Ｃにおいて、表示領域３００の左端は、レイヤー３１０、３１２、３１４、８５０の各々のロックポイント「Ｃ」にある。
【００７９】
図８Ａ−８Ｃに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、簡潔にするためにのみロックポイント「Ａ」、「Ｂ」及び「Ｃ」に制限されるものである。たとえば、左端のロックポイントは、コンテンツ画像３３０Ａ−３３０Ｈの各々について設定することができる。また、より少ないロックポイントを使用してもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端ロックポイントは表示領域３００の右端との位置合わせを示してもよいし、中央ロックポイントは表示領域３００の中央との位置合わせを示してもよい。
【００８０】
この例では、レイヤー３１０、３１２、３１４、８５０は、ラッピングアニメーション中を除き、次の規則に従って移動する。
１．コンテンツレイヤー３１４はレイヤー３１２の約２倍の速度で移動し、レイヤー３１２はレイヤー３１４の約半分の長さである。
【００８１】
２．レイヤー３１２はレイヤー３１０の約２倍の速度で移動し、レイヤー３１０はレイヤー３１２の約半分の長さである。
３．コンテンツレイヤー３１４はレイヤー３１０の約４倍の速度で移動し、レイヤー３１０はレイヤー３１４の約１／４の長さである。
【００８２】
４．背景レイヤー８５０はレイヤー３１０よりも遅く移動する。背景レイヤー８５０はレイヤー３１０よりも長いが、レイヤー３１０における隣接するロックポイント（例えば、ロックポイント「Ａ」と「Ｂ」）の間で移動する距離は、背景レイヤー８５０における対応するロックポイント間の距離よりも大きい。
【００８３】
レイヤー３１０、３１２、３１４、８５０の動きは、いくつかの状況では、上記の規則とは異なる場合がある。この例では、ラッピングが可能となる。ユーザー３０２は、コンテンツレイヤー３１４の先頭（図８Ａに示す位置）から左にナビゲートすることができ、コンテンツレイヤー３１４の終端（図８Ｃに示す位置）から右にナビゲートすることができる。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。この例において、背景レイヤー８５０における画像並びにレイヤー３１０及び３１２におけるテキストは、ユーザー入力がコンテンツレイヤー３１４の先頭への巻き戻しを引き起こす場合により速く移動する。図８Ｃにおいて、表示領域３００は、それぞれのテキスト文字列の末尾における、レイヤー３１０及び３１２内の、それぞれ１つ及び２つの文字の一部を示す。表示領域３００はまた、背景レイヤー８５０における画像の最も右の部分を示す。図８Ａに示す状態へ戻るためのラッピングアニメーションは、背景レイヤー８５０の画像の最も左の部分及びレイヤー３１０、３１２のテキストの先頭を右から見えるようにすることを含んでもよい。これにより、図８Ａに示す状態から図８Ｂに示す状態への移行などの他のコンテキストにおけるものよりもより迅速な、レイヤー３１０、３１２及び８５０における動きがもたらされる。
【００８４】
例１０−マルチレイヤーＵＩシステム
図９は、デバイス（例えば、スマートフォンや他のモバイルコンピューティングデバイス）上で複数のＵＩレイヤーを提示する例示的なマルチレイヤーＵＩシステム９００を示すシステム図である。システム９００は、他の例で説明する機能又は他の機能を実施するために使用することができる。
【００８５】
この例では、システム９００は、平行なＵＩレイヤーの表示を制御するレイヤーコントロール９２０にハブページの宣言的記述を提供するハブモジュール９１０を含む。レイヤーコントロール９２０はまた、「パノラマ」又は「パノ（pano）」コントロールとも呼ばれる。ＵＩレイヤーがパノラマ式の又は水平な方法で移動するときにそのような記述を使用することができる。また、レイヤーコントロール９２０は、垂直に又は他の方法で移動するＵＩレイヤーを制御する。レイヤーコントロール９２０は、マークアップジェネレーター９３０及びモーションモジュール９４０を含む。
【００８６】
この例において、レイヤーコントロール９２０は、ＵＩ要素のいくつかのレイヤー、たとえば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤーを制御する。コンテンツレイヤーはコンテンツペインの組を含む。コンテンツペインは、例えば、視覚的に提示される、画像、グラフィカルなアイコン、リスト、テキスト、又は他の情報を含んでもよい。コンテンツレイヤーにおけるコンテンツペインの組はコンテンツペインの「世代（ジェネレーション）」と呼んでもよい。また、レイヤーコントロール９２０は、３つのレイヤーより多くの又は少ないレイヤーを制御し、又は異なる種類のレイヤーを制御する。ハブページの宣言的記述は、ＵＩ要素を定義する情報を含む。マルチレイヤーＵＩシステムでは、ＵＩ要素は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、コンテンツレイヤーなどの複数のレイヤーを含んでもよい。ハブページの宣言型記述は、スタイル情報及び／又は設定プロパティなどの他の情報と共に、マークアップジェネレーター９３０に提供される。マークアップジェネレーター９３０は、ＵＩレイヤーをレンダリングするために使用できるマークアップを生成する。モーションモジュール９４０は、ユーザー入力に応答して生成されたイベント（例えば、直接的なＵＩ操作イベント）を受け取り、動作コマンドを生成する。動作コマンドはマークアップととともにＵＩフレームワーク９５０に提供される。ＵＩフレームワーク９５０において、マークアップ及び動作コマンドは、デバイスのオペレーティングシステム（ＯＳ）９６０に送信されるべきＵＩレンダリング要求を生成するレイアウトモジュール９５２において受信される。デバイスＯＳ９６０は、レンダリング要求を受信し、レンダリングされたＵＩをデバイス上のディスプレイへ出力させる。ハブモジュール９１０、レイヤーコントロール９２０、及びＵＩフレームワーク９５０などのシステムコンポーネントはまた、デバイスＯＳ９６０の一部として実施することができる。１つの実施例において、デバイスＯＳ９６０はモバイルコンピューティングデバイスのＯＳである。
【００８７】
ユーザー（図示せず）はＵＩが表示される方法に影響を与えるユーザー入力を生成することができる。図９に示す例では、レイヤーコントロール９４０は、ＵＩフレームワーク９５０によって生成された直接ＵＩ操作イベントをリスンする。ＵＩフレームワーク９５０において、直接のＵＩ操作イベントは、デバイスＯＳ９６０からジェスチャーメッセージ（例えば、デバイス上のタッチスクリーンとインタラクトするユーザーによるパンジェスチャーやフリックジェスチャーに応答して生成されるメッセージ）を受信する、インタラクションモジュール９５４によって生成される。デバイスＯＳ９６０は、ユーザーのジェスチャーを認識してＵＩフレームワーク９５０で使用できるメッセージを作成するための機能を含む。ＵＩフレームワーク９５０は、ジェスチャーメッセージを、レイヤーコントロール９２０に送信するべき直接的なＵＩ操作イベントへと変換する。インタラクションモジュール９５４はまた、音声コマンド、キーパッド又はキーボード上の指示ボタン、トラックボールの動きなどの、他の種類のユーザー入力に応答して生成されるナビゲーションメッセージについての直接的なＵＩ操作イベントを受け取り、生成することができる。
【００８８】
例１１−詳細な実施例
この例では、他の側面とともに、上述の例の側面を含む詳細な実施例について説明する。この詳細な実施例は、上述したシステム９００などのマルチレイヤーＵＩシステムによって又はなんらかの他のシステムによって、実施することができる。
【００８９】
この例において、システム９００は、水平に移動する複数の並列のＵＩレイヤー（例えば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤー）を提示する。コンテンツレイヤーはいくつかのコンテンツペインを含む。各コンテンツペインは右のロックポイント及び左のロックポイントを含む。
【００９０】
Ａ．初期化
並列のＵＩレイヤーを初期化するために、システム９００は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー及びコンテンツレイヤーの有効長に関する情報を取得する。（水平に移動するＵＩレイヤーにとって、有効長は、ＵＩレイヤーの有効幅であると考えることができる。）システム９００は、表示領域に近づくときにコンテンツペインを動的に作成することによってメモリー及び処理の要求を低減することができるが、これにより、コンテンツレイヤーの有効幅を決定することはより困難になる。この例では、初期化においてコンテンツレイヤーの有効幅を決定するために、システム９００は、各コンテンツペインの最大幅に基づいて最大のコンテンツレイヤー幅を決定し、重なっていないすべてのコンテンツペインの最大幅の合計を計算する。
【００９１】
（コンテンツペインについての）コンテンツレイヤーにおけるロックポイントは、例えば、重なっていないコンテンツペインを生成するために、表示領域の幅の単位でコンテンツレイヤーを分割することによって、自動的に設定することができる。また、どれだけの数の全体のコンテンツ画像ｎがコンテンツペインに入るかを決定し、各コンテンツ画像が少なくとも１つのコンテンツペインにあるようになるまでｎ個のコンテンツ画像ごとに新たなコンテンツペインを開始する（重なったコンテンツペインをもたらす可能性がある）ことによって、ロックポイントをコンテンツレイヤーにおいて設定することができる。
【００９２】
レイヤーにおける動きは動作比率（motion ratios）に基づいて計算される。例えば、システム９００は、それぞれ、背景レイヤーの幅及びタイトルレイヤーの幅を、コンテンツレイヤーの最大幅で割ることによって、背景レイヤー及びタイトルレイヤーの動作比率を計算する。背景レイヤー及びタイトルレイヤーの幅を考慮して、システム９００は、コンテンツレイヤーにおける対応するロックポイントの位置に基づいて、それぞれ、背景レイヤー及びタイトルレイヤーにおけるロックポイントの位置をマッピングする。背景レイヤーにおけるそのような位置のマッピングの例は図１に示される。
【００９３】
対応するレイヤーを動かすときにロックポイントが使用される。たとえば、システム９００がコンテンツレイヤーにおけるペインへの移行をアニメートする場合に、システムは、背景レイヤーとタイトルレイヤーについて適切なロックポイントの位置を探し、レイヤーがそれらの位置にスクロールするためのコマンドを発行して、それぞれのレイヤーにおけるロックポイント間の距離に依存して相対的な動作速度を設定する。
【００９４】
コンテンツレイヤーの最大の長さに基づく動作比率は、実際のレンダリングされたコンテンツレイヤーと比較される場合に概算であるにすぎない。当該比率は概算である（コンテンツペインの最終的な幅は依然として不明である）ので、システム９００は、背景レイヤーやタイトルレイヤーなどのレイヤーがレンダリングされた最終的なコンテンツレイヤーにおける対応するロックポイントに合うように、背景レイヤー又はタイトルレイヤーなどのレイヤーを調整するために、ロックアニメーションを実行することができる。
【００９５】
初期化が完了すると、システム９００は、ＵＩレイヤーをレンダリングし、ユーザー入力の受信を開始することができる。
Ｂ．ユーザー入力
この例では、システム９００は、モバイルコンピューティングデバイス上のタッチスクリーンとインタラクトするユーザーからユーザー入力を受信する。システム９００は、ドラッグジェスチャー、パンジェスチャー及びフリックジェスチャーなどのタッチスクリーン上の異なるジェスチャーを区別することができる。システム９００はまた、ユーザーが特定の位置においてタッチスクリーンに触れるがタッチスクリーンとの接触を断つ前に指、スタイラスなどを動かさない場合などに、タップジェスチャーを検出することができる。代替手段として、いくつかの動きは、タップジェスチャーにおいてタッチスクリーンとの接触を断つ前に、小さな閾値の範囲内で許可される。システム９００はまた、つまんで伸ばす（pinch-and-stretch）ジェスチャーなどのマルチタッチジェスチャーを検出することができる。
【００９６】
システム９００は、インタラクションを、タッチスクリーンとの当該インタラクションの性質に応じて特定のジェスチャーとして解釈する。システム９００はユーザーのインタラクションから１つ又は複数の個別の入力を取得する。ジェスチャーは一連の入力から決定することができる。たとえば、ユーザーがタッチスクリーンに触れ、タッチスクリーンとの接触を維持しながら水平方向に移動を開始する場合、システム９００は、パン入力を発射し、レイヤーにおいて水平方向の移動を開始する。ユーザーがタッチスクリーンとの接触を維持して移動し続けている間、システム９００はパン入力を発射し続けることができる。例えば、システム９００は、ユーザーがタッチスクリーンとの接触を維持しながらＮピクセルだけ移動するたびに新たなパン入力をすることができる。このように、タッチスクリーン上での連続的な物理的なジェスチャーは、システム９００によって一連のパン入力として解釈することができる。システムは接触位置及び移動速度を連続的に更新することができる。
【００９７】
（ユーザーがタッチスクリーンとの接触を断つときなど）物理的なジェスチャーが終了すると、システム９００は、タッチスクリーンとの接触を断ったときにユーザーの指、スタイラスなどがどれだけ迅速に動いていたか、及び移動速度が閾値を超えるかどうかを決定することにより、最後の動作をフリックとして解釈すべきかどうかを決定することができる。
【００９８】
Ｃ．ユーザーのジェスチャーへの応答
システム９００は、ジェスチャーの種類に応じて、ディスプレイ上の動き（例えば、レイヤー、リスト、又は他のＵＩ要素の動き）を異なる方法でレンダリングすることができる。たとえば、水平方向のドラッグジェスチャー（ユーザーが現在タッチスクリーンとの接触を維持している）の場合には、システム９００は、ドラッグの水平方向の距離と同じ距離だけ水平方向にコンテンツレイヤーを動かす。タイトルレイヤー及び背景レイヤーはまたドラッグに応じて移動する。移動量は、それぞれのレイヤーについての動作比率にドラッグの水平方向の動きを乗じることによって決定される。例えば、０．５の動作比率がタイトルレイヤーについて決定され、ドラッグの水平方向の距離が１００ピクセルである場合、タイトルレイヤーにおける動きはドラッグの方向に５０ピクセルとなる。
【００９９】
（ユーザーがタッチスクリーンとの接触を断ったときにユーザーがよりゆっくりと移動していたか又は停止した）パンジェスチャーの場合、パンの量だけコンテンツレイヤーを移動し、デバイスの表示領域に対するコンテンツペインの現在位置をチェックして、コンテンツレイヤーにおいて追加の動きを実行するかどうかを決定する。たとえば、システムは、ロッキングアニメーション（つまり、ロックポイントにスナップするコンテンツレイヤーにおける動きのアニメーション）を実行することができ、現在のコンテンツペインに関連付けられる左又は右のロックポイントにコンテンツレイヤーを移動することができる。システム９００は、現在のペインに関連付けられたどのロックポイントがより近くにあるかを決定して、当該より近いロックポイントへ移行することができる。別の例として、システム９００は、表示領域上で部分的に見えるコンテンツペインを全体が見えるようにするために、コンテンツレイヤーを移動することができる。他のジェスチャーもまた、コンテンツペインを全体が見えるようにすることができる。例えば、垂直方向にスクロール可能なリストの左側又は右側が表示領域の外にある場合、リスト上でのジェスチャー（例えば、垂直な又は実質的に垂直なジェスチャー）は、全体のリストが見えるようになるように、コンテンツレイヤーにおける水平方向の移動（及び、必要に応じて、他のレイヤーにおける水平方向の移動）を引き起こしてもよい。レイヤーの水平方向の動きは、垂直なジェスチャーによって引き起こされるリスト内の任意の垂直方向の動きに加えてのものであってもよいが、コンテンツレイヤー及び任意の他のレイヤーの垂直方向の位置は影響を受けない。また、システム９００は、コンテンツレイヤーの現在の位置を維持してもよい。
【０１００】
１つの実施例において、システム９００は次の手順を実行する。
１．コンテンツレイヤーにおいて、現在、以前及び次のコンテンツペインのうちのどれだけの領域を見ることができるかをチェックして、端の位置を確認する。
【０１０１】
２．以前のペインの右端が（左のスクリーンの端に対して）閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、以前のペインへ移行する。１つの実施例において、閾値は「バンプ閾値変位（bump threshold displacement）」と呼ばれる。
【０１０２】
３．次のペインの左端が（右のスクリーンの端に対して）閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、次のペインへ移行する。
４．そうでなければ、現在のペインの左端又は右端をロックポイント又は「バンプ」と合わせるためにコンテンツレイヤーを移動させることができるかどうかを決定する。現在のペインの左端が左のロックポイントに十分近い場合には、左端に現在のペインをロックする。そうではなく、現在のペインの右端が右側のロックポイントに十分近く、現在のペインが画面より広い場合は、現在のペインを右端にロックする。
【０１０３】
フリックジェスチャー（ユーザーがタッチスクリーンとの接触を断ったときにユーザーがより迅速に動いていた）の場合には、システム９００は、フリックジェスチャーの方向及び速度に依存して、次のコンテンツペイン又は以前のコンテンツペインへとコンテンツレイヤーを進めることができる移行アニメーションを開始する。フリックの速度が十分に大きい場合、システム９００は、その方向で次のコンテンツペインに移行することができる。速度が十分に大きくない場合、又は現在のコンテンツペインが広い場合、システム９００は、次のコンテンツペインに実際に移行することなく、フリックの方向にコンテンツレイヤーを移動することができる。検出される（すなわち、フリックジェスチャーをパンジェスチャーと区別する）フリックの閾値速度は実施例によって変わってもよい。別のコンテンツペインへの移行を引き起こすフリックの閾値速度は実施例によって変わってもよい。
【０１０４】
Ｄ．非線形運動
ＵＩレイヤーはいくつかの状況では非線形な移動速度を示す。たとえば、全体のレイヤーは状況に応じて異なる速度で移動することができ、また、レイヤーの一部は状況に応じて同じレイヤーの他の部分とは異なる速度で移動することができる。非線形の移動速度を示し得る１つのレイヤーはセクションヘッダーレイヤーである。セクションヘッダーレイヤーはいくつかのセクションヘッダーに分けることができ、各ヘッダーはコンテンツレイヤーにおける１つ又は複数のコンテンツペインに関連付けることができる。
【０１０５】
この例では、システム９００はセクションヘッダーレイヤーを提供し、各セクションヘッダーはコンテンツペインに関連付けられる。この例において、セクションヘッダーレイヤーは、次の規則に従って移動する。
【０１０６】
１．コンテンツ・ペインが表示領域よりも広くない場合、ヘッダーはコンテンツペインにロックされたままである。そうではなく、コンテンツペインが表示領域よりも広い場合には規則２−４が適用される。
【０１０７】
２．レイヤーがペインについて左側のロックポイントにおいてロックされる場合、各ヘッダーの左端はコンテンツペインの左端と合わせられる。
３．ユーザーがコンテンツペインを左にパンする場合、ヘッダーはコンテンツペインよりも遅く移動する。これは、例えば、パンするときにユーザーがなおヘッダーの一部を見られるようにするのに役立つ。
【０１０８】
４．ユーザーが右にパンする場合、ヘッダーはコンテンツペインよりも速く移動する。これは、例えば、現在のペインから以前のペインへの移行があるときにヘッダーがコンテンツペインより少し速く移動するが両方とも左のロックポイントに合わせる場合に、移行の効果を可能にするために有用となり得る。
【０１０９】
これらの規則に従って動作を実行する際に、システム９００は、変位値を計算する。最初に、最大変位が、コンテンツペインの幅とヘッダーの幅との差をとることによって計算される。最大変位を計算する際に、システム９００はまた、ヘッダー内のテキストの幅だけではなく、ボタンやヘッダー内の他の機能項目（functional items）のための追加のマージンを含んでもよい。
【０１１０】
システム９００は、次いで、左のロックポイントに対する現在のペインの左端の位置を決定することによって、実際の変位を計算する。ペインの左端が左ロックポイントの右にある場合、システム９００は、ペインの左端の水平方向の位置（ｘ座標）から、左のロックポイントの水平方向の位置（ｘ座標）を差し引き、これは正の値ａになる。ペインの左端が左ロックポイントの左にある場合は、システム９００は、左ロックポイントの水平方向の位置（ｘ座標）から、ペインの左端の水平方向の位置（ｘ座標）を差し引き、これは正の値ｂとなる。値に定数を乗じるなどすることによって、値（ａ又はｂ）に対して調整をすることができる。なんらかの調整後、値（ａ又はｂ）が最大変位よりも大きい場合には、当該値の上限は最大変位となる。
【０１１１】
変位の計算はまた、パンアニメーションや移行アニメーションに対して使用されてもよい。後者の場合には、移行を開始する前に、ペインの最後の位置が計算され、それに基づいて、移行アニメーションで使用されるべきヘッダーの最後の位置が計算される。
【０１１２】
Ｅ．エッジタップ
システム９００はまた、エッジタップ（edge tap）機能を実施してもよい。エッジタップにおいて、ユーザーは、（例えば、次のコンテンツペイン又は以前のコンテンツペインへの）移行を引き起こすために、表示領域の端（例えば、左端又は右端）の所与のマージン（例えば、４０ピクセル）内でタップしてもよい。これは、例えば、次のペイン又は以前のペインが表示領域内で部分的に見えている場合に有用となり得る。ユーザーは、次のペイン又は以前のペインの近くでタップして、システムに、そのペインを完全に表示領域へ持ちこませることができる。
【０１１３】
ＩＩ．拡張及び代替的な実施例
本明細書に記載の実施例に対して、様々な拡張及び代替手段が可能である。
記載された例において、コンテンツレイヤーは、通常、背景レイヤーなどの他のレイヤーよりも長いものとして説明される。システム９００などのマルチレイヤーＵＩシステムはまた、タイトルレイヤー又は背景レイヤーなどのレイヤーが実際にはコンテンツレイヤーよりも広いようなシナリオを取り扱うことができる。そのようなシナリオでは、レイヤーにおける動きの速度は補償をするために自動的に調整することができる。たとえば、コンテンツレイヤーがタイトルレイヤーよりも短い場合、コンテンツレイヤーはタイトルレイヤーよりも遅く移動してもよい。
【０１１４】
記載された例においては、いくつかのレイヤーは他のレイヤーにロックされているものとして説明される。たとえば、図６Ａ−６Ｅにおいて、レイヤー６１２の一部はコンテンツレイヤー６１４の一部にロックされているものとして示される。他の実施例において、いくつかのレイヤーはより柔軟に動くものとして説明される。例えば、図５Ａ−５Ｄにおいて、セクションヘッダーレイヤー５１２のセクションは、コンテンツレイヤー５１４の特定の部分に関連付けられるものとして示されるが、セクションは、互いに独立して動き、コンテンツレイヤー５１４の一部の上で浮かぶことができる。マルチレイヤーＵＩシステムはこのような機能を組み合わせることができる。例えば、マルチレイヤーＵＩシステムは、レイヤーの他の部分が独立して動くことを可能にしつつ、当該レイヤー（例えば、セクションヘッダーレイヤーやタイトルレイヤー）のある部分をコンテンツレイヤー内のコンテンツにロックすることができる。
【０１１５】
マルチレイヤーシステムはまた、移行又はラッピングの効果を向上させるために、レイヤーを一緒にロックすることができる。たとえば、ラッピング中に同じ速度で背景レイヤー及びタイトルレイヤーが移動するように、背景レイヤーはタイトルレイヤーにロックされてもよい。レイヤーの有効長が異なる場合であっても、そのようなロックを行うことができる。
【０１１６】
記載された例は、コンテンツレイヤーなどのユーザーにとって関心があるかもしれないレイヤーの異なる位置を示す。ユーザーは、レイヤーの先頭においてマルチレイヤーＵＩシステムにおけるナビゲーションを開始してもよいし、又は、異なるエントリーポイントを使用してＵＩレイヤーのナビゲーションを開始してもよい。たとえば、ユーザーは、コンテンツレイヤーの中間、コンテンツレイヤーの最後などにおいて、ナビゲーションを開始してもよい。これは、たとえば、ユーザーが以前にレイヤーの先頭以外の位置（例えば、レイヤーの終わり）において終了した場合に有用となり、その結果、ユーザーは（例えば、ユーザーがコンテンツ画像を作動させることによって呼び出されるアプリケーションを使用した後に）以前の位置に戻ることができる。別の例として、デフォルトのロックポイントはＵＩレイヤーの以前の状態に基づいていてもよい。たとえば、ユーザーは、以前に見られていたレイヤーの一部に対応するロックポイントにおいてレイヤーに戻ることができる。別の例として、マルチレイヤーＵＩシステムは、異なるエントリーポイントを可能にするために、複数のレイヤーにおいて状態を保存したり調整を行ったりすることができる。例えば、図５Ｃに示すようにコンテンツレイヤー及び機能（feature）レイヤーを見ることができるような位置においてユーザーがエントリーをなす場合、マルチレイヤーＵＩシステムは、レイヤー５１０における「Ａｐｐｌｉｃａｔｉｏｎ（アプリケーション）」というテキストの先頭がレイヤー５１２における「Ｆｅａｔｕｒｅ ２」というテキストの先頭に合わせられるようにレイヤー５１０を調整することができる。
【０１１７】
ＩＩＩ．例示的なコンピューティング環境
図１０は、記載された実施例のうちのいくつかを実施することができる適切なコンピューティング環境１０００の一般化された例を示す。本明細書に記載された技術及び手段は多様な汎用又は特殊目的のコンピューティング環境において実施することができるので、コンピューティング環境１０００は、使用又は機能の範囲について何ら限定を示唆するものではない。
【０１１８】
図１０を参照すると、コンピューティング環境１０００は、少なくとも１つのＣＰＵ１０１０及び関連するメモリー１０２０を含む。図１０において、この最も基本的な構成１０３０は破線内に含まれる。処理装置１０１０は、コンピューター実行可能命令を実行し、実際の又は仮想的なプロセッサーであってもよい。マルチプロセッシングシステムにおいては、処理能力を高めるために複数の処理装置がコンピューター実行可能命令を実行する。図１０は、ビデオアクセラレーション又は他の処理に使用することができる、第２の処理装置１０１５（例えば、ＧＰＵ又は他のコプロセッシングユニット）及び関連するメモリー１０２５を示す。メモリー１０２０、１０２５は、揮発性メモリー（例えば、レジスター、キャッシュ、ＲＡＭ）、不揮発性メモリー（例えば、ＲＯＭ、ＥＥＰＲＯＭ、フラッシュ（登録商標）メモリーなど）、又はそれら２つの組み合わせであってもよい。メモリー１０２０、１０２５は、記載される技術及び手段のうちの１つ又は複数を備えるシステムを実施するためのソフトウェア１０８０を格納する。
【０１１９】
コンピューティング環境は追加の機能を有してもよい。たとえば、コンピューティング環境１０００は、ストレージ１０４０、１つ又は複数の入力装置１０５０、１つ又は複数の出力装置１０６０、及び１つ又は複数の通信接続１０７０を含む。バス、コントローラー、又はネットワークなどの相互接続機構（図示せず）は、コンピューティング環境１０００のコンポーネントを相互接続する。通常、オペレーティングシステムソフトウェア（図示せず）は、コンピューティング環境１０００において実行される他のソフトウェアのための動作環境を提供し、コンピューティング環境１０００のコンポーネントの活動を調整する。
【０１２０】
ストレージ１０４０は、取り外し可能であっても取り外し不能であってもよく、情報を格納するために使用することができ、コンピューティング環境１０００内でアクセスできる、磁気ディスク、磁気テープもしくはカセット、ＣＤ−ＲＯＭ、ＤＶＤ、メモリーカード、又は任意の他の媒体を含む。ストレージ１０４０は記載される技術及び手段を実施するソフトウェア１０８０のための命令を格納する。
【０１２１】
入力装置１０５０は、キーボード、マウス、ペン、トラックボール又はタッチスクリーンなどのタッチ入力装置、マイクロフォン、走査装置、デジタルカメラ、又はコンピューティング環境１０００に入力を提供する別のデバイスなどの音声入力装置であってもよい。動画については、入力装置１０５０は、ビデオカード、ＴＶチューナーカード、アナログ形式又はデジタル形式の動画入力を受け取る同様の装置、又はコンピューティング環境１０００に動画サンプルを読み込むＣＤ−ＲＯＭもしくはＣＤ−ＲＷであってもよい。出力装置１０６０は、ディスプレイ、プリンター、スピーカー、ＣＤライター、又はコンピューティング環境１０００からの出力を提供する別の装置であってもよい。
【０１２２】
通信接続１０７０は別のコンピューティングエンティティへの通信媒体を介した通信を可能にする。通信媒体は、コンピューター実行可能命令、音声もしくは動画入出力、又は変調されたデータ信号内の他のデータなどの情報を伝達する。変調されたデータ信号は、信号中で情報を符号化するようにその特性のうちの１つ又は複数が設定又は変更された信号である。限定ではなく例として、通信媒体は、電気、光、ＲＦ、赤外線、音響、又は他の搬送波によって実施される有線又は無線の技術を含む。
【０１２３】
技術及び手段は、コンピューター読み取り可能な媒体の一般的なコンテキストにおいて説明することができる。コンピューター読み取り可能な媒体は、コンピューティング環境内でアクセスできる任意の利用可能な媒体である。限定ではなく例として、コンピューティング環境１０００で、コンピューター読み取り可能な媒体は、メモリー１０２０、１０２５、ストレージ１０４０、及びそれらの組み合わせを含む。
【０１２４】
技術及び手段は、目標の実際の又は仮想的なプロセッサー上のコンピューティング環境において実行される、プログラムモジュールに含まれるものなどの、コンピューター実行可能命令の一般的なコンテキストにおいて説明することができる。一般に、プログラムモジュールは、特定のタスクを実行し又は特定の抽象データ型を実施する、ルーチン、プログラム、ライブラリー、オブジェクト、クラス、コンポーネント、データ構造などを含む。プログラムモジュールの機能は、様々な実施例において必要に応じて、組み合わせたり、プログラムモジュール間で分割されたりしてもよい。プログラムモジュールのためのコンピューター実行可能命令は、ローカルのコンピューティング環境又は分散コンピューティング環境内で実行されてもよい。本明細書中に記載される任意の方法は、１つ又は複数のコンピューター読み取り可能な媒体（例えば、コンピューター読み取り可能な記憶媒体や他の有形の媒体）上に符号化されたコンピューター実行可能命令によって実施することができる。
【０１２５】
説明のために、詳細な説明においては、コンピューティング環境におけるコンピューターの動作を説明するために「選択」及び「決定」などの用語を使用する。これらの用語は、コンピューターによって実行される動作についての高レベルの抽象的概念であり、人間によって実行される行為と混同されるべきではない。これらの用語に対応する実際のコンピューター動作は実施例に応じて異なる。
【０１２６】
ＩＶ．例示的な実施環境
図１１は、記載された実施例、技法、及び技術を実施することができる適切な実施環境１１００の一般化された例を示す。
【０１２７】
例示的な環境１１００においては、さまざまな種類のサービス（例えば、コンピューティングサービス１１１２）がクラウド１１１０によって提供される。たとえば、クラウド１１１０は、インターネットなどのネットワークを介して接続される様々な種類のユーザー及びデバイスにクラウドベースのサービスを提供する、集中的に又は分散して配置され得る一群のコンピューティングデバイスを含んでもよい。クラウドコンピューティング環境１３００は、コンピューティングタスクを達成するために、さまざまな方法で使用することができる。例えば、記載される技術及び手段を参照すると、ユーザー入力を処理することやユーザーインターフェースを提示することなどのいくつかのタスクは、ローカルのコンピューティングデバイス上で実行することができるが、後続の処理で使用されるデータの記憶などの他のタスクは、クラウド内の他の場所で実行することができる。
【０１２８】
例示的な環境１１００において、クラウド１１１０は、様々な画面機能１１２０Ａ−Ｎを備えた接続されたデバイスのためのサービスを提供する。接続されたデバイス１１２０Ａは中型の画面をもつデバイスを表す。たとえば、接続されるデバイス１１２０Ａは、デスクトップコンピューター、ラップトップ、ノートブック、ネットブックなどのパーソナルコンピューターであってもよい。接続されるデバイス１１２０Ｂは小型の画面を備えたデバイスを表す。たとえば、接続されるデバイス１１２０Ｂは、携帯電話、スマートフォン、パーソナルデジタルアシスタント、タブレットコンピューターなどであってもよい。接続されるデバイス１１２０Ｎは大型の画面を備えたデバイスを表す。たとえば、接続されるデバイス１１２０Ｎは、テレビ（例えば、スマートテレビ）又はテレビやプロジェクタースクリーンに接続される別のデバイス（例えば、セットトップボックスやゲーム機）であってもよい。
【０１２９】
様々なサービスを、１つ又は複数のサービスプロバイダー（図示せず）を介してクラウド１１１０によって提供することができる。たとえば、クラウド１１１０は、様々な接続されるデバイス１１２０Ａ−Ｎのうちの１つ又は複数に、モバイルコンピューティングに関連するサービスを提供することができる。クラウドサービスは、画面サイズ、表示能力、又は特定の接続されたデバイス（例えば、接続されたデバイス１１２０Ａ−Ｎ）の他の機能に合わせてカスタマイズすることができる。たとえば、クラウドサービスは、画面サイズ、入力装置、及び通常はモバイルデバイスと関連付けられる通信帯域幅の制限を考慮に入れることによって、モバイルデバイス用にカスタマイズすることができる。
【０１３０】
Ｖ．例示的なモバイルデバイス
図１２は、１２０２において一般的に示される、様々なオプションのハードウェアコンポーネント及びソフトウェアコンポーネントを含む、例示的なモバイルデバイス１２００を示すシステム図である。説明を容易にするために、すべての接続が示されてはいないが、モバイルデバイス内の任意のコンポーネント１２０２は任意の他のコンポーネントと通信することができる。モバイルデバイスは、様々なコンピューティングデバイス（例えば、携帯電話、スマートフォン、ハンドヘルドコンピューター、パーソナルデジタルアシスタント（ＰＤＡ）など）のうちの任意のものであってもよく、セルラーネットワークや衛星ネットワークなどの１つ又は複数の移動通信ネットワーク１２０４との無線双方向通信を可能にすることができる。
【０１３１】
図示されるモバイルデバイスは、信号の符号化、データ処理、入出力処理、電源制御、及び／又は他の機能などのタスクを実行するためのコントローラー又はプロセッサー１２１０（例えば、信号プロセッサー、マイクロプロセッサー、ＡＳＩＣ、又は他の制御及び処理論理回路）を含んでもよい。オペレーティングシステム１２１２は、コンポーネント１２０２の割り当て及び使用、並びに１つ又は複数のアプリケーションプログラム１２１４に対するサポートを制御することができる。アプリケーションプログラムは、一般的なモバイルコンピューティングアプリケーション（例えば、Ｅメールアプリケーション、カレンダー、コンタクトマネージャー、ウェブブラウザー、メッセージアプリケーションを含む）、又は任意の他のコンピューティングアプリケーションを含んでもよい。
【０１３２】
図示されるモバイルデバイスはメモリー１２２０を含んでもよい。メモリー１２２０は、取り外し不能なメモリー１２２２及び／又は取り外し可能なメモリー１２２４を含んでもよい。取り外し不能なメモリー１２２２は、ＲＡＭ、ＲＯＭ、フラッシュメモリー、ディスクドライブ、又は他の周知のメモリーストレージ技術を含んでもよい。取り外し可能なメモリー１２２４は、フラッシュメモリー又はＧＳＭ（登録商標）通信システムにおいて知られている加入者識別モジュール（ＳＩＭ）カード、又はスマートカードなどの他の周知のメモリーストレージ技術を含んでもよい。メモリー１２２０は、オペレーティングシステム１２１２及びアプリケーション１２１４を実行するためのデータ及び／又はコードを格納するために使用することができる。例示的なデータは、ウェブページ、テキスト、画像、音声ファイル、動画データ、又は１つもしくは複数の有線もしくは無線のネットワークを介して１つもしくは複数のネットワークサーバー又は他のモバイルデバイスとの間で送受信される他のデータセットを含んでもよい。メモリー１２２０は、国際移動電話加入者識別番号（ＩＭＳＩ）などの加入者識別子及び国際移動電話機器識別番号（ＩＭＥＩ）などの機器識別子を格納するために使用することができる。そのような識別子は、ユーザー及び機器を識別するためにネットワークサーバーに送信することができる。
【０１３３】
モバイルデバイスは、タッチスクリーン１２３２、マイク１２３４、カメラ１２３６、物理的なキーボード１２３８及び／又はトラックボール１２４０などの１つ又は複数の入力装置１２３０、並びに、スピーカー１２５２、ディスプレイ１２５４などの１つ又は複数の出力装置１２５０をサポートすることができる。他のあり得る出力装置（図示せず）は圧電性の又は他の触覚出力装置を含んでもよい。一部の装置は複数の入出力機能を提供することができる。たとえば、タッチスクリーン１２３２及びディスプレイ１２５４は単一の入出力装置に組み合わせることができる。
【０１３４】
タッチスクリーン１２３２はさまざまな方法で入力を受け取ることができる。例えば、物体（例えば、指先又はスタイラス）が表面にわたって流れる電流を歪ませたり遮断したりする場合、容量性タッチスクリーンはタッチ入力を検出する。別の例として、タッチスクリーンは、光センサーからのビームが遮断される場合にタッチ入力を検出する光センサーを使用してもよい。画面の表面との物理的接触は、いくつかのタッチスクリーンによって検出される入力にとっては必要がない。
【０１３５】
当技術分野においてよく理解されているように、無線モデム１２６０は、アンテナ（図示せず）に結合させることができ、プロセッサー１２１０と外部デバイスとの間の双方向通信をサポートすることができる。モデム１２６０は一般的に示されており、移動通信ネットワーク１２０４及び／又は他の無線ベースのモデム（例えば、ブルートゥース（登録商標）又はＷｉ−Ｆｉ）と通信するためのセルラーモデムを含んでもよい。無線モデム１２６０は、通常、単一のセルラーネットワーク内での、セルラーネットワーク間での、又はモバイルデバイスと公衆交換電話網（ＰＳＳＴＮ）との間でのデータ通信及び音声通信のためのＧＳＭ（登録商標）ネットワークなどの、１つ又は複数のセルラーネットワークとの通信用に構成される。
【０１３６】
モバイルデバイスは、さらに、少なくとも１つの入出力ポート１２８０、電源１２８２、全地球測位システム（ＧＰＳ）受信機などの衛星ナビゲーションシステム受信機１２８４、加速度計１２８６、（アナログ信号又はデジタル信号を無線で送信するための）トランシーバー１２８８、並びに／又は、ＵＳＢポート、ＩＥＥＥ１３９４（ファイアウォール）ポート、及び／もしくはＲＳ−２３２ポートであってもよい物理的なコネクター１２９０を含んでもよい。コンポーネントを削除してもよく、他のコンポーネントを追加してもよいので、図示されるコンポーネント１２０２は必須ではなく、すべてを網羅してはいない。
【０１３７】
すべての例からの技術は他の例の１つ又は複数において記載された技術と組み合わせることができる。開示された技術の原則を適用することができる多くの可能な実施例を考慮して、図示された実施例が開示された技術の例であって、開示された技術の範囲に対する限定として解釈されるべきではないことを認識すべきである。そのようなものではなく、開示された技術の範囲は以下の特許請求の範囲によってカバーされるものを含む。したがって、出願人は、請求項の範囲及び趣旨に含まれるすべてのものを本願の発明として請求する。
【特許請求の範囲】
【請求項１】
コンピューターシステムにおいて、
少なくとも第１及び第２のレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、前記第１のレイヤーにおける視覚情報の第１の部分がタッチスクリーンの表示領域内にあり、前記第１のレイヤーは第１の方向と実質的に直交する第２の方向に移動するように動作可能なユーザーインターフェース要素を含む、ステップと、
前記タッチスクリーン上での第１のジェスチャーに対応する第１のユーザー入力を受信するステップと、
前記第１のユーザー入力に少なくとも部分的に基づいて第１の動きを計算するステップであって、前記第１の動きは、前記第１のレイヤーにおける視覚情報の第２の部分が前記表示領域の外にある最初の第１のレイヤーの位置から、前記第１のレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在の第１のレイヤーの位置への、前記第１のレイヤーの動きを含み、前記第１の動きは第１の移動速度で第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいて前記第１の動きと実質的に平行な第２の動きを計算するステップであって、前記第２の動きは最初の第２のレイヤーの位置から現在の第２のレイヤーの位置への前記第２のレイヤーにおける視覚情報の動きを含み、前記第２の動きは第２の移動速度で前記第１の方向にある、ステップと、
前記タッチスクリーン上での第２のジェスチャーに対応する第２のユーザー入力を受信するステップと、
前記第２のユーザー入力に少なくとも部分的に基づいて実質的に垂直な動きを計算するステップであって、前記実質的に垂直な動きは最初の要素の位置から現在の要素の位置への前記ユーザーインターフェース要素における視覚情報の動きを含む、ステップと
を含み、前記第２の移動速度は前記第１の移動速度とは異なる方法。
【請求項２】
前記第１のジェスチャーはジェスチャーの移動速度を有し、前記第１の移動速度は前記ジェスチャー移動速度に基づく請求項１に記載の方法。
【請求項３】
前記第１の移動速度は前記ジェスチャーの移動速度に実質的に等しい請求項２に記載の方法。
【請求項４】
前記第１のジェスチャーによって示される方向は前記第１の方向とは異なり、前記第１のジェスチャーによって示される方向は斜め方向であり、前記第１の方向は水平方向である請求項１に記載の方法。
【請求項５】
前記第１の方向は水平方向であり、前記第２の方向は垂直方向である請求項１に記載の方法。
【請求項６】
前記ユーザーインターフェース要素が垂直方向にスクロール可能な要素である請求項５に記載の方法。
【請求項７】
前記第２のジェスチャーの方向が前記垂直方向とは異なり、前記第２のジェスチャーによって示される方向が斜め方向である請求項６に記載の方法。
【請求項８】
前記垂直方向にスクロール可能な要素における垂直なロッキングアニメーションを実行するステップをさらに含み、
前記垂直なロッキングアニメーションは、前記垂直方向にスクロール可能な要素におけるロックポイントが前記表示領域の一部と垂直に合わせられるように、前記垂直方向にスクロール可能な要素を動かすことを含む請求項６に記載の方法。
【請求項９】
前記垂直方向にスクロール可能な要素は項目のリストであり、前記ロックポイントは前記リスト内の項目に関連付けられる請求項８に記載の方法。
【請求項１０】
前記項目のリストはリンクのリストであり、前記ロックポイントは前記リスト内のリンクに関連付けられる請求項９に記載の方法。
【請求項１１】
前記実質的に垂直な動きを計算するステップは、
前記最初の要素の位置及び前記第２のジェスチャーの速度に少なくとも部分的に基づいて前記現在の要素の位置を計算する請求項１に記載の方法。
【請求項１２】
前記タッチスクリーンを備える携帯電話上での表示のために前記第１の動き、前記第２の動き及び前記実質的に垂直な動きをレンダリングするステップをさらに含む請求項１に記載の方法。
【請求項１３】
１つ又は複数のプロセッサーと、
表示領域を有するタッチスクリーンと、
コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第１及び第２の部分を含み、それぞれのレイヤーにおける視覚情報の前記第１の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第２の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第１の部分及び前記表示領域の外にある視覚情報の第２の部分を有する少なくとも１つのスクロール可能な要素を含む、ステップ、
前記タッチスクリーンを介して第１のユーザー入力を受信するステップ、
前記第１のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、（ａ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から（ｂ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップ、
（ａ）から（ｂ）への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第１の方向にある、ステップ、
前記第１のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、（ｃ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から（ｄ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップ、
（ｃ）から（ｄ）への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第１の方向にある、ステップ、
前記第１のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、（ｅ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から（ｆ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップ、
（ｅ）から（ｆ）への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第１の方向にある、ステップ、
前記タッチスクリーンを介して第２のユーザー入力を受信するステップ、
前記第２のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、（ｇ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から（ｈ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップ、並びに、
（ｇ）から（ｈ）への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第１の方向と実質的に直交する第２の方向である、ステップ
を含む方法を実行するためのコンピューター実行可能な命令を格納する１つ又は複数のコンピューター読み取り可能な記憶媒体と
を具備し、
前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複しない、コンピューティングデバイス。
【請求項１４】
前記第１のユーザー入力が前記タッチスクリーン上の第１のジェスチャーに対応し、前記第２のユーザー入力が前記タッチスクリーン上の第２のジェスチャーに対応する請求項１３に記載のコンピューティングデバイス。
【請求項１５】
タッチスクリーン上でのジェスチャーを介してユーザー入力を受信するように動作可能なタッチスクリーン上にグラフィカルユーザーインターフェースを表示するステップであって、前記グラフィカルユーザーインターフェースは、コンテンツレイヤー、セクションヘッダーレイヤー、タイトルレイヤー及び背景レイヤーを含み、各レイヤーはそれぞれのレイヤーにおける視覚情報の少なくとも第１及び第２の部分を含み、それぞれのレイヤーにおける視覚情報の前記第１の部分は前記タッチスクリーンの表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第２の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第１の部分及び前記表示領域の外にある視覚情報の第２の部分を有する少なくとも１つのスクロール可能な要素を含む、ステップと、
前記タッチスクリーン上のジェスチャーに対応する第１のユーザー入力を受信するステップと、
前記第１のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、（ａ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から（ｂ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップと、
（ａ）から（ｂ）への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、（ｃ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から（ｄ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップと、
（ｃ）から（ｄ）への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、（ｅ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から（ｆ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップと、
（ｅ）から（ｆ）への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいて背景レイヤーの動きを計算するステップであって、前記背景レイヤーの動きは、（ｇ）前記背景レイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初の背景レイヤーの位置から（ｈ）前記背景レイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在の背景レイヤーの位置への前記背景レイヤーの動きを含む、ステップと、
（ｇ）から（ｈ）への動きをアニメートするステップであって、前記背景レイヤーの動きは背景レイヤーの移動速度で前記第１の方向にある、ステップと、
前記タッチスクリーン上の第２のジェスチャーに対応する第２のユーザー入力を受信するステップと、
前記第２のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、（ｉ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から（ｊ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップと、
（ｉ）から（ｊ）への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第１の方向と実質的に直交する第２の方向である、ステップと
を含む方法であって、
前記コンテンツレイヤーの移動速度は前記セクションヘッダーレイヤーの移動速度と等しく、前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複せず、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーの各々は前記背景レイヤーと重なる、方法を実行するためのコンピューター実行可能な命令を格納する１つ又は複数のコンピューター読み取り可能な媒体。
【請求項１】
コンピューターシステムにおいて、
少なくとも第１及び第２のレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、前記第１のレイヤーにおける視覚情報の第１の部分がタッチスクリーンの表示領域内にあり、前記第１のレイヤーは第１の方向と実質的に直交する第２の方向に移動するように動作可能なユーザーインターフェース要素を含む、ステップと、
前記タッチスクリーン上での第１のジェスチャーに対応する第１のユーザー入力を受信するステップと、
前記第１のユーザー入力に少なくとも部分的に基づいて第１の動きを計算するステップであって、前記第１の動きは、前記第１のレイヤーにおける視覚情報の第２の部分が前記表示領域の外にある最初の第１のレイヤーの位置から、前記第１のレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在の第１のレイヤーの位置への、前記第１のレイヤーの動きを含み、前記第１の動きは第１の移動速度で第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいて前記第１の動きと実質的に平行な第２の動きを計算するステップであって、前記第２の動きは最初の第２のレイヤーの位置から現在の第２のレイヤーの位置への前記第２のレイヤーにおける視覚情報の動きを含み、前記第２の動きは第２の移動速度で前記第１の方向にある、ステップと、
前記タッチスクリーン上での第２のジェスチャーに対応する第２のユーザー入力を受信するステップと、
前記第２のユーザー入力に少なくとも部分的に基づいて実質的に垂直な動きを計算するステップであって、前記実質的に垂直な動きは最初の要素の位置から現在の要素の位置への前記ユーザーインターフェース要素における視覚情報の動きを含む、ステップと
を含み、前記第２の移動速度は前記第１の移動速度とは異なる方法。
【請求項２】
前記第１のジェスチャーはジェスチャーの移動速度を有し、前記第１の移動速度は前記ジェスチャー移動速度に基づく請求項１に記載の方法。
【請求項３】
前記第１の移動速度は前記ジェスチャーの移動速度に実質的に等しい請求項２に記載の方法。
【請求項４】
前記第１のジェスチャーによって示される方向は前記第１の方向とは異なり、前記第１のジェスチャーによって示される方向は斜め方向であり、前記第１の方向は水平方向である請求項１に記載の方法。
【請求項５】
前記第１の方向は水平方向であり、前記第２の方向は垂直方向である請求項１に記載の方法。
【請求項６】
前記ユーザーインターフェース要素が垂直方向にスクロール可能な要素である請求項５に記載の方法。
【請求項７】
前記第２のジェスチャーの方向が前記垂直方向とは異なり、前記第２のジェスチャーによって示される方向が斜め方向である請求項６に記載の方法。
【請求項８】
前記垂直方向にスクロール可能な要素における垂直なロッキングアニメーションを実行するステップをさらに含み、
前記垂直なロッキングアニメーションは、前記垂直方向にスクロール可能な要素におけるロックポイントが前記表示領域の一部と垂直に合わせられるように、前記垂直方向にスクロール可能な要素を動かすことを含む請求項６に記載の方法。
【請求項９】
前記垂直方向にスクロール可能な要素は項目のリストであり、前記ロックポイントは前記リスト内の項目に関連付けられる請求項８に記載の方法。
【請求項１０】
前記項目のリストはリンクのリストであり、前記ロックポイントは前記リスト内のリンクに関連付けられる請求項９に記載の方法。
【請求項１１】
前記実質的に垂直な動きを計算するステップは、
前記最初の要素の位置及び前記第２のジェスチャーの速度に少なくとも部分的に基づいて前記現在の要素の位置を計算する請求項１に記載の方法。
【請求項１２】
前記タッチスクリーンを備える携帯電話上での表示のために前記第１の動き、前記第２の動き及び前記実質的に垂直な動きをレンダリングするステップをさらに含む請求項１に記載の方法。
【請求項１３】
１つ又は複数のプロセッサーと、
表示領域を有するタッチスクリーンと、
コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第１及び第２の部分を含み、それぞれのレイヤーにおける視覚情報の前記第１の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第２の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第１の部分及び前記表示領域の外にある視覚情報の第２の部分を有する少なくとも１つのスクロール可能な要素を含む、ステップ、
前記タッチスクリーンを介して第１のユーザー入力を受信するステップ、
前記第１のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、（ａ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から（ｂ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップ、
（ａ）から（ｂ）への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第１の方向にある、ステップ、
前記第１のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、（ｃ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から（ｄ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップ、
（ｃ）から（ｄ）への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第１の方向にある、ステップ、
前記第１のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、（ｅ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から（ｆ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップ、
（ｅ）から（ｆ）への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第１の方向にある、ステップ、
前記タッチスクリーンを介して第２のユーザー入力を受信するステップ、
前記第２のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、（ｇ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から（ｈ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップ、並びに、
（ｇ）から（ｈ）への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第１の方向と実質的に直交する第２の方向である、ステップ
を含む方法を実行するためのコンピューター実行可能な命令を格納する１つ又は複数のコンピューター読み取り可能な記憶媒体と
を具備し、
前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複しない、コンピューティングデバイス。
【請求項１４】
前記第１のユーザー入力が前記タッチスクリーン上の第１のジェスチャーに対応し、前記第２のユーザー入力が前記タッチスクリーン上の第２のジェスチャーに対応する請求項１３に記載のコンピューティングデバイス。
【請求項１５】
タッチスクリーン上でのジェスチャーを介してユーザー入力を受信するように動作可能なタッチスクリーン上にグラフィカルユーザーインターフェースを表示するステップであって、前記グラフィカルユーザーインターフェースは、コンテンツレイヤー、セクションヘッダーレイヤー、タイトルレイヤー及び背景レイヤーを含み、各レイヤーはそれぞれのレイヤーにおける視覚情報の少なくとも第１及び第２の部分を含み、それぞれのレイヤーにおける視覚情報の前記第１の部分は前記タッチスクリーンの表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第２の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第１の部分及び前記表示領域の外にある視覚情報の第２の部分を有する少なくとも１つのスクロール可能な要素を含む、ステップと、
前記タッチスクリーン上のジェスチャーに対応する第１のユーザー入力を受信するステップと、
前記第１のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、（ａ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から（ｂ）前記コンテンツレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップと、
（ａ）から（ｂ）への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、（ｃ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から（ｄ）前記セクションヘッダーレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップと、
（ｃ）から（ｄ）への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、（ｅ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から（ｆ）前記タイトルレイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップと、
（ｅ）から（ｆ）への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第１の方向にある、ステップと、
前記第１のユーザー入力に少なくとも部分的に基づいて背景レイヤーの動きを計算するステップであって、前記背景レイヤーの動きは、（ｇ）前記背景レイヤーにおける視覚情報の前記第２の部分が前記表示領域の外にある最初の背景レイヤーの位置から（ｈ）前記背景レイヤーにおける視覚情報の前記第２の部分が前記表示領域内にある現在の背景レイヤーの位置への前記背景レイヤーの動きを含む、ステップと、
（ｇ）から（ｈ）への動きをアニメートするステップであって、前記背景レイヤーの動きは背景レイヤーの移動速度で前記第１の方向にある、ステップと、
前記タッチスクリーン上の第２のジェスチャーに対応する第２のユーザー入力を受信するステップと、
前記第２のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、（ｉ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から（ｊ）前記スクロール可能な要素における視覚情報の前記第２の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップと、
（ｉ）から（ｊ）への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第１の方向と実質的に直交する第２の方向である、ステップと
を含む方法であって、
前記コンテンツレイヤーの移動速度は前記セクションヘッダーレイヤーの移動速度と等しく、前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複せず、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーの各々は前記背景レイヤーと重なる、方法を実行するためのコンピューター実行可能な命令を格納する１つ又は複数のコンピューター読み取り可能な媒体。
【図１】
【図２】
【図３Ａ】
【図３Ｂ】
【図３Ｃ】
【図３Ｄ】
【図４】
【図５Ａ】
【図５Ｂ】
【図５Ｃ】
【図５Ｄ】
【図６Ａ】
【図６Ｂ】
【図６Ｃ】
【図６Ｄ】
【図６Ｅ】
【図７】
【図８Ａ】
【図８Ｂ】
【図８Ｃ】
【図９】
【図１０】
【図１１】
【図１２】
【図２】
【図３Ａ】
【図３Ｂ】
【図３Ｃ】
【図３Ｄ】
【図４】
【図５Ａ】
【図５Ｂ】
【図５Ｃ】
【図５Ｄ】
【図６Ａ】
【図６Ｂ】
【図６Ｃ】
【図６Ｄ】
【図６Ｅ】
【図７】
【図８Ａ】
【図８Ｂ】
【図８Ｃ】
【図９】
【図１０】
【図１１】
【図１２】
【公表番号】特表２０１３−５１９９５３（Ｐ２０１３−５１９９５３Ａ）
【公表日】平成２５年５月３０日（２０１３．５．３０）
【国際特許分類】
【出願番号】特願２０１２−５５３０５６（Ｐ２０１２−５５３０５６）
【出願日】平成２３年２月１１日（２０１１．２．１１）
【国際出願番号】ＰＣＴ／ＵＳ２０１１／０２４６３９
【国際公開番号】ＷＯ２０１１／１００６２３
【国際公開日】平成２３年８月１８日（２０１１．８．１８）
【出願人】（５０００４６４３８）マイクロソフト コーポレーション (3,165)
【Ｆターム（参考）】
【公表日】平成２５年５月３０日（２０１３．５．３０）
【国際特許分類】
【出願日】平成２３年２月１１日（２０１１．２．１１）
【国際出願番号】ＰＣＴ／ＵＳ２０１１／０２４６３９
【国際公開番号】ＷＯ２０１１／１００６２３
【国際公開日】平成２３年８月１８日（２０１１．８．１８）
【出願人】（５０００４６４３８）マイクロソフト コーポレーション (3,165)
【Ｆターム（参考）】
[ Back to top ]