柔軟な平行移動及び垂直移動を備えたマルチレイヤーユーザーインターフェース
ユーザーインターフェース(UI)システムはマルチレイヤーグラフィカルユーザーインターフェースにおける動きを計算する。UIシステムはタッチスクリーン上でのジェスチャーに対応するユーザー入力を受信する。UIシステムは、第1の移動速度での第1の方向(例えば、水平方向)における第1のレイヤーの動きを計算する。UIシステムは、第1の移動速度とは異なる第2の移動速度での、第1のレイヤーの動きと実質的に平行な第2のレイヤーの動きを計算する。UIシステムは、レイヤーのうちの1つのレイヤーのUI要素における、第1の方向と実質的に直交する方向の動き(例えば、垂直方向の動き)を計算する。
【発明の詳細な説明】
【技術分野】
【0001】
本発明は、柔軟な平行移動及び垂直移動を備えたマルチレイヤーユーザーインターフェースに関する。
【背景技術】
【0002】
効果的なユーザーインターフェースの設計は多くの課題をもたらす。1つの課題は、ディスプレイのスペースの制限及び特定のユーザーのニーズを考慮して、最適な量の視覚情報又は機能をどのようにしてユーザーに提供するかということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型ディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、特定のアクティビティ(例えば、ファイルのライブラリーにおける音声ファイル又はビデオファイルを閲覧する)を実行しているユーザーにとって利用できる、ディスプレイに収まりきらない多くの情報がしばしば存在するためである。
【発明の概要】
【発明が解決しようとする課題】
【0003】
限られた量の利用可能なディスプレイスペース上で情報がどのように提示されるかについて細心の注意を払わない限り、ユーザーは簡単に迷ってしまいかねない。
従来の技術の利点が何であるにせよ、従来の技術は以下に示す技術及び手段の利点を有していない。
【課題を解決するための手段】
【0004】
本明細書において記載される技術及び手段は、コンピューターディスプレイ上でユーザーに対して視覚情報を提示することに関し、より具体的には、スマートフォンや他のモバイルコンピューティングデバイスにおいて見られるような小型ディスプレイ上に視覚情報を提示することに関する。特に、互いに関連する視覚情報のレイヤー(層)が異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。1つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さ(レイヤーが水平に方向付けられる場合などには、レイヤーの幅と呼んでもよい)の関数である速度で同じ方向に動く。たとえば、グラフィカルユーザーインターフェース(GUI)は、背景レイヤー、タイトルレイヤー、及びコンテンツレイヤーを含む。特定の方向に(例えば、水平方向に左から右へ)コンテンツレイヤーを通じてナビゲートするユーザーはまた、背景レイヤー及びタイトルレイヤーのうちの1つ又は複数において同じ方向での移動を引き起こす。レイヤーにおける動きの量及び性質は、レイヤー中のデータ又はレイヤーにおける対応するロックポイント間の相対距離などの1つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーよりも長い場合、コンテンツレイヤーは背景レイヤーよりも速く移動する。タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、コンテンツレイヤーの移動速度はタッチスクリーン上のジェスチャーの動きの速度と一致してもよい。
【0005】
1つの態様において、UIシステムは、少なくとも第1及び第2のレイヤーを含むGUIを表示する。第1のレイヤーにおける視覚情報の第1の部分はタッチスクリーンの表示領域内にある。UIシステムは、タッチスクリーン上のジェスチャーに対応する第1のユーザー入力を受信する。UIシステムは、ユーザー入力に少なくとも部分的に基づいて、第1の動きを計算する。第1の動きは、第1のレイヤーにおける視覚情報の第2の部分が表示領域の外にある最初の第1のレイヤーの位置から、第1のレイヤーにおける視覚情報の第2の部分が表示領域内にある現在の第1のレイヤーの位置への、第1のレイヤーの動きを含む。第1の動きは第1の移動速度(例えば、タッチスクリーン上でユーザーの指又は他の物体によりなされるジェスチャーの動きの速度に実質的に等しい移動速度)で第1の方向にある。UIシステムは、ユーザー入力に少なくとも部分的に基づいて、第1の動きと実質的に平行な第2の動きを計算する。第2の動きは、最初の第2のレイヤーの位置から現在の第2のレイヤーの位置への第2のレイヤーにおける視覚情報の動きを含む。第2の動きは第2の移動の速度で第1の方向にある。第2の移動速度は第1の移動速度とは異なる。
【0006】
第1のレイヤーは、第1の方向(例えば、水平方向)と実質的に直交する第2の方向(例えば、垂直方向)に動くように動作可能なユーザーインターフェース要素(例えば、リンクのリストなどの縦にスクロール可能な要素)を有する。 UIシステムは、タッチスクリーン上での第2のジェスチャーに対応する第2のユーザー入力を受け取り、当該第2のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き(例えば、垂直方向の動き)を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第1のレイヤーにおけるユーザーインターフェース要素の視覚情報の動きを含む。現在の要素の位置は最初の要素の位置と第2のジェスチャーの速度とに基づいて計算することができる。要素が現在の要素の位置にあるときに要素が最初の要素の位置にあって表示領域内にある場合、ユーザーインターフェース要素の視覚情報の一部は、表示領域の外にあってもよい。
【0007】
別の態様では、コンピューティングデバイスは、コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むGUIを表示する。各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第1及び第2の部分を含む。それぞれのレイヤーにおける視覚情報の第1の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の第2の部分は表示領域の外にある。コンテンツレイヤーは、表示領域内にある視覚情報の第1の部分及び表示領域外にある視覚情報の第2の部分を有する少なくとも1つのスクロール可能な要素を含む。コンピューティングデバイスは、タッチスクリーンを介して第1のユーザー入力を受信し、当該第1のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算する。コンテンツレイヤーの動きは、(a)コンテンツレイヤーにおける視覚情報の第2の部分が表示領域の外にある最初のコンテンツレイヤーの位置から(b)コンテンツレイヤーにおける視覚情報の第2の部分が表示領域内にある現在のコンテンツレイヤーの位置へのコンテンツレイヤーの動きを含む。コンピューティングデバイスは(a)から(b)への動きをアニメートする。コンテンツレイヤーの動きは、コンテンツレイヤーの移動速度で第1の方向にある。コンピューティングデバイスは第1のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算する。セクションヘッダーレイヤーの動きは、(c)セクションヘッダーレイヤーにおける視覚情報の第2の部分が表示領域外にある最初のセクションヘッダーレイヤーの位置から(d)セクションヘッダーレイヤーにおける視覚情報の第2の部分が表示領域内にある現在のセクションヘッダーレイヤーの位置へのセクションヘッダーレイヤーの動きを含む。コンピューティングデバイスは(c)から(d)への動きをアニメートする。セクションヘッダーレイヤーの動きは、セクションヘッダーレイヤーの移動速度で第1の方向にある。コンピューティングデバイスは第1のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算する。タイトルレイヤーの動きは、(e)タイトルレイヤーにおける視覚情報の第2の部分が表示領域の外にある最初のタイトルレイヤーの位置から(f)タイトルレイヤーにおける視覚情報の第2の部分が表示領域内にある現在のタイトルレイヤーの位置へのタイトルレイヤーの動きを含む。コンピューティングデバイスは(e)から(f)への動きをアニメートする。タイトルレイヤーの動きは、タイトルレイヤーの移動速度で第1の方向にある。コンピューティングデバイスは、タッチスクリーンを介して第2のユーザー入力を受信し、当該第2のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算する。スクロール可能な要素の動きは、(g)スクロール可能な要素における視覚情報の第2の部分が表示領域外にある最初のスクロール可能な要素の位置から(h)スクロール可能な要素における視覚情報の第2の部分が表示領域内にある現在のスクロール可能な要素の位置への、スクロール可能な要素における視覚情報の動きを含む。コンピューティングデバイスは(g)から(h)への動きをアニメートする。スクロール可能な要素の動きは第1の方向と実質的に直交する第2の方向にある。タイトルレイヤーの移動速度は、コンテンツレイヤーの移動速度及びセクションヘッダーレイヤーの移動速度とは異なる。コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは互いに実質的に並行であり、互いに対して重複しない。
【0008】
レイヤーはロックポイントを含んでもよい。たとえば、コンテンツペインを含むコンテンツレイヤーは、コンテンツペインの数及び/又は位置に基づいて(例えば、自動的に)決定されるロックポイントを有してもよい。ロックポイントは他の方法で設定することができる。例えば、ロックポイントは、第1のレイヤーにおけるユーザーインターフェース要素の終了位置などのレイヤーの以前の状態のうちのいくつかの側面に基づいてもよい。第2のレイヤー(例えば、背景レイヤー、タイトルレイヤー、又はセクションヘッダーレイヤー)におけるロックポイントは、第1のレイヤーのロックポイントに対応する第2のレイヤーのロックポイントを有してもよい。移動速度はロックポイント間の距離に基づいてもよい。たとえば、移動速度は第2のレイヤーのロックポイント間の距離と第2のレイヤーのロックポイントに対応する第1のレイヤーのロックポイント(例えば、コンテンツレイヤーのロックポイント)間の距離との間の差に比例してもよい。
【0009】
ロッキングアニメーション(locking animation)を実行することができる。たとえば、ロッキングアニメーションは、レイヤー内のユーザーインターフェース要素における閾値数の画素が表示領域内にあるかどうかを決定すること、及び、その決定に基づいて、ユーザーインターフェース要素が表示領域において可視であるように現在の位置からロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。別の例として、ロッキングアニメーションは、ロックポイントを選択すること、及び、現在の位置から、選択されたロックポイントが表示領域の一部と合わせられるロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。現在の第2のレイヤーの位置から第1のレイヤーのロッキングアニメーション後の位置に対応する第2のレイヤーのロッキングアニメーション後の位置(例えば、第2のレイヤーのロックポイントが選択された第1のレイヤーのロックポイントに合わせられる、第2のレイヤーの位置)への第2のレイヤーにおける遷移などの他の遷移は同様にアニメートすることができる。別の例として、ロッキングアニメーションは、第1のレイヤー(例えば、コンテンツレイヤー)におけるユーザーインターフェース要素(例えば、コンテンツペイン)に関連付けられた第1のレイヤーのロックポイントを選択すること、及び、現在の第1のレイヤーの位置から、選択された第1のレイヤーのロックポイントが表示領域の一部と合わせられてユーザーインターフェース要素が表示領域において可視となるような第1のレイヤーのロッキングアニメーション後の位置への、第1のレイヤーにおける遷移をアニメートすることを含む。ロッキングアニメーションはユーザーのジェスチャーに基づいて実行することができる。例えば、ロックポイントは、指をスライドさせる(フリック)ジェスチャーの速度又は軽くたたく(タップ)ジェスチャーの位置に基づいて選択することができる。
【0010】
ロッキングアニメーションはレイヤーのユーザーインターフェース要素における直交する動き(例えば、垂直方向の動き)に適応させることができる。たとえば、垂直のロッキングアニメーションは垂直にスクロール可能な要素(例えば、リスト)において実行することができ、当該垂直のロッキングアニメーションは、垂直にスクロール可能な要素におけるロックポイントが表示領域の一部と垂直に合わせられるように当該垂直にスクロール可能な要素を動かすことを含む。
【0011】
ラッピングアニメーションが実行されてもよい。たとえば、2つのレイヤーの各々が先頭と末尾を含み、これらのレイヤーの末尾が現在の位置に表示される場合、ラッピングアニメーションを実行することは、現在の第1のレイヤーの位置から第1のレイヤーの先頭が表示されるラッピングアニメーション後の第1のレイヤーの位置への第1のレイヤーにおける遷移をアニメートすること、及び、現在の第2のレイヤーの位置から第2のレイヤーの先頭が表示されるラッピングアニメーション後の第2のレイヤーの位置への第2のレイヤーにおける遷移をアニメートすることを含む。遷移をアニメートすることは、他の移動速度とは異なるラッピング移動速度で視覚情報を動かすことを含んでもよい。
【0012】
レイヤー内の動き(例えば、移動速度、方向、及び現在の位置)は、ユーザー入力に基づいて計算することができる。たとえば、現在の位置は最初の位置、ジェスチャーの方向及び速度に基づいてもよい。レイヤーにおける動きはまた、他のレイヤーの位置に基づいて計算することができる。たとえば、現在の第2のレイヤーの位置は、第1のレイヤーのロックポイントに対応する第2のレイヤーのロックポイントの位置に基づいて現在の第2のレイヤーの位置を計算することなどにより、計算された現在の第1のレイヤーの位置に基づいて計算することができる。
【0013】
ジェスチャーは、例えば、パン、ドラッグ、フリック、タップのインタラクションを含んでもよい。フリックは、ジェスチャーの動きの速度が閾値を超えるかどうかを決定することによって検出することができる。方向を示すジェスチャーは、示された方向に又はある他の方向に動きを引き起こすことができる。たとえば、水平方向のジェスチャーは、垂直又は水平方向の動きを引き起こしてもよい。
【0014】
移動速度は異なる方法で決定することができる。たとえば、レイヤーの移動速度はレイヤーの動作比率に基づいて計算することができ、動作比率は別のレイヤーの最大幅で割ったレイヤーの幅である。別の例として、移動速度は第1のレイヤーの長さと第2のレイヤーの長さの差に基づいてもよい。
【0015】
さらなるレイヤーを追加することができる。たとえば、グラフィカルユーザーインターフェースは、第1及び第2のレイヤーと実質的に平行な第3のレイヤー(又はより多くのレイヤー)を含んでもよい。レイヤーにおける移動速度はそれぞれのレイヤーの長さの違いに比例してもよい。1つの実施例において、セクションヘッダーレイヤーは表示領域内でコンテンツレイヤーより上にあり、タイトルレイヤーは表示領域内でセクションヘッダーレイヤーより上にあり、コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは背景レイヤーと重なる。
【0016】
本発明の上記の及び他の目的、特徴及び利点は、添付の図面を参照して進められる以下の詳細な説明からより明らかになるであろう。
【図面の簡単な説明】
【0017】
【図1】1つ又は複数の記載された実施例による、ロックポイントを有する背景レイヤー及びコンテンツレイヤーを示す図である。
【図2】1つ又は複数の記載された実施例による、異なる速度で移動する複数のレイヤーをもつユーザーインターフェースを提供する例示的な技術を示すフローチャートである。
【図3A】1つ又は複数の記載された実施例による、マルチレイヤーUIシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図3B】1つ又は複数の記載された実施例による、マルチレイヤーUIシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図3C】1つ又は複数の記載された実施例による、マルチレイヤーUIシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図3D】1つ又は複数の記載された実施例による、表示領域が横長の形状で方向付けられる、図3A−3Cの複数のレイヤーを示す図である。
【図4】1つ又は複数の記載された実施例による、UIシステムがマルチレイヤーGUIの第1の方向の動きを計算する、例示的な技術を示すフローチャートである。
【図5A】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図5B】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図5C】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図5D】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図6A】1つ又は複数の記載された実施例による、2つのレイヤーが並んで(in tandem)移動する複数のUIレイヤーを示す図である。
【図6B】1つ又は複数の記載された実施例による、2つのレイヤーが並んで移動する複数のUIレイヤーを示す図である。
【図6C】1つ又は複数の記載された実施例による、2つのレイヤーが並んで移動する複数のUIレイヤーを示す図である。
【図6D】1つ又は複数の記載された実施例による、2つのレイヤーが並んで移動する複数のUIレイヤーを示す図である。
【図6E】1つ又は複数の記載された実施例による、コンテンツレイヤーにおけるリストについて可能な上向き及び下向きの動きが示される、図6A−6Dの複数のUIレイヤーを示す図である。
【図7】1つ又は複数の記載された実施例による、第1の方向に直交する第2の方向に移動するように動作可能であるUI要素をもつ少なくとも1つのレイヤーを有するマルチレイヤーGUIにおいてUIシステムが第1の方向の動きを計算する例示的な技術を示すフローチャートである。
【図8A】1つ又は複数の記載された実施例による、背景レイヤーを含む複数のUIレイヤーを示す図である。
【図8B】1つ又は複数の記載された実施例による、背景レイヤーを含む複数のUIレイヤーを示す図である。
【図8C】1つ又は複数の記載された実施例による、背景レイヤーを含む複数のUIレイヤーを示す図である。
【図9】記載された実施例を実施することができるマルチレイヤーUIシステムを示す図である。
【図10】いくつかの記載された実施例を実施することができる適切なコンピューティング環境の一般的な例を示す。
【図11】1つ又は複数の記載された実施例を実施することができる適切な実施環境の一般的な例を示す。
【図12】1つ又は複数の記載された実施例を実施することができるモバイルコンピューティングデバイスの一般的な例を示す。
【発明を実施するための形態】
【0018】
互いに関連する視覚情報のレイヤーが異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。1つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さの関数である速度で同じ方向に移動する。たとえば、グラフィカルユーザーインターフェース(GUI)は、背景レイヤー、タイトルレイヤー、コンテンツレイヤーを含む。特定の方向(例えば、水平方向に左から右へ)にコンテンツレイヤーを介してユーザーがナビゲートすることはまた、背景レイヤー及び/又はタイトルレイヤーにおける同じ方向の動きを引き起こす。動きの量及び性質は、レイヤーの相対的な長さ、又は対応するロックポイント間の相対距離などの1つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーより(ピクセルの観点から)長い場合、コンテンツレイヤーは背景レイヤーより(ピクセルベースで)速く移動する。
【0019】
本明細書に記載の実施例に対する様々な代替手段が可能である。たとえば、フローチャート図を参照して説明される技術は、ある段階を繰り返したり省略したりすることなどによって、フローチャートに示される段階の順序を変えることにより、変更することができる。別の例として、システム図を参照して説明されるシステムは、ある段階を繰り返したり省略したりすることなどによって、図面に示す処理の段階の順序を変えることにより、変更することできる。別の例として、図面を参照して説明されるユーザーインターフェースは、ある特徴を省略することなどによって、図に示すユーザーインターフェースの機能の内容や配置を変えることにより、変更することができる。別の例として、いくつかの実施例が特定のデバイス及びユーザー入力機構(例えば、タッチスクリーンインターフェースを備えたモバイルデバイス)を参照して説明されるが、説明される技術及び手段は他のデバイス及び/又はユーザー入力機構とともに使用することができる。
【0020】
様々な技術及び手段を組み合わせて又は独立して使用することができる。異なる実施例は記載される技術や手段のうちの1つ又は複数を実施する。
I.階層化グラフィカルユーザーインターフェース技術及び手段
効果的なユーザーインターフェースの設計には多くの課題がある。1つの課題は、ディスプレイのスペースの制約を考慮して、最適な量の視覚情報や機能をユーザーにどのように提供するか、ということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型のディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、しばしば、ディスプレイに収まらない、より多くの利用可能な情報や機能が存在するためである。
【0021】
互いの上にデータのレイヤーを置いて、それらが異なる方法で動くことを可能にすることによって、グラフィカルユーザーインターフェースは、ディスプレイ上で可視ではないユーザーの現在の活動に関連するより多くの情報がある場合であっても、ユーザーが見ている情報のコンテキストを提供することができる。例えば、コンテンツレイヤーは少なくともある程度独立して動くことができて、ユーザーがコンテンツレイヤーの異なる部分を視界に入るように動かしたり視界の外へ動かしたりすることを可能にするが、コンテンツレイヤーに関連付けられた別のレイヤーが当該コンテンツレイヤーよりもより少ない程度に動く場合であっても、当該コンテンツレイヤーに関連付けられた別のレイヤーのある一部は可視のままである。
【0022】
記載される技術及び手段は、グラフィカルユーザーインターフェース(GUI)などのユーザーインターフェース(UI)における情報(例えば、視覚情報、機能情報及びメタデータ)を、レイヤー(例えば、平行なレイヤー又は少なくとも実質的に平行なレイヤー)に分離すること、及び異なる方法で(例えば、異なる速度で)このようなレイヤーを移動することに関する。たとえば、説明される実施例は、互いに対して異なる速度で移動するUIレイヤーを示すマルチレイヤーUIシステムを含む。以下により詳細に記載されるように、各レイヤーにおける移動速度は、レイヤーにおいて視覚的に提示されるべきデータ(例えば、テキスト又はグラフィックス)の量、又は対応するロックポイント間の相対距離などを含む、いくつかの要因に依存し得る。レイヤーにおいて視覚的に提示されるべきデータの量は、例えば、ディスプレイ上でレンダリングされるか又はディスプレイ上での可能なレンダリングのために配置されるようなデータの水平方向に測定される長さを決定することによって測定することができる。長さはピクセル単位で又は他の適当な尺度(例えば、テキストの文字列における文字数)によって測定することができる。より大きなデータを有しより速い速度で移動するレイヤーは、より遅い速度で移動するより小さなデータ量のレイヤーよりも大きな画素数のぶんだけ前へ進むことができる。レイヤーの移動速度はさまざまな方法で決定することができる。たとえば、低速のレイヤーの移動速度は高速のレイヤーの移動速度から導くことができ、その逆も同様である。又は、レイヤーの移動速度は互いに独立して決定することができる。
【0023】
UIの様々なレイヤーの動きは、通常、ユーザーインタラクションにある程度依存する。例えば、レイヤーのある部分から別の部分に移動しようとするユーザーは、望ましい移動方向を示すためにユーザー入力を提供する。ユーザー入力は、ディスプレイ上の1つ又は複数のレイヤーにおいて動きを引き起こすことができる。いくつかの実施例では、ユーザーは、タッチスクリーンとインタラクトすることによって、デバイスの表示領域に表示されるレイヤーの動きを引き起こす。インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及び、タッチスクリーンの表面上でそれを(例えば、フリック動作又はスイープ動作によって)移動させて所望の方向にレイヤーを移動させることを含んでもよい。また、ユーザーは、キーパッド又はキーボード上のボタン(例えば、方向ボタン)を押すこと、トラックボールを動かすこと、マウスでポイントしてクリックすること、音声コマンドを行うことなどによって、いくつかの他の方法でレイヤーとインタラクトすることができる。
【0024】
ユーザーインタラクションがレイヤーにおける動きを引き起こすとき、レイヤーの動きは、通常、レイヤーの長さ並びにユーザーによって行われる動きの大きさ、移動速度及び方向の関数である。たとえば、タッチスクリーン上での左方向へのフリック動作は、表示領域に対するレイヤーの左方向への動きを生成する。レイヤーはまた、レイヤーが視覚的なコンテキストをユーザーに提供しつつ異なる速度で移動することができるように、互いに対して配置することができる。たとえば、セクションヘッダー(例えば、「履歴」などのテキスト文字列)は、コンテンツレイヤーにおける可視のコンテンツ及び画面の外のコンテンツ(例えば、現在再生しているメディアファイル及び最近再生されたメディアのリストを表す画像)にまたがって、コンテンツレイヤーとは異なる速度で移動するがコンテンツのコンテキストを提供することができる。
【0025】
実施例及び/又はユーザーの好みに応じて、ユーザー入力はレイヤーにおける異なる種類の動きを生成するために異なる方法で解釈することができる。たとえば、マルチレイヤーUIシステムは、左又は右への任意の動き、水平面よりかなり上又は下に延在する斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができ、システムはより正確な動きを要求することができる。別の例として、マルチレイヤーUIシステムは、レイヤーを移動する前に、そのレイヤーが占める表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを要求してもよいし、又はシステムは、レイヤーにおける動きを引き起こすためにタッチスクリーンの他の部分とのインタラクションを可能にすることができる。別の例として、ユーザーは、要素のリストなどの一度に画面に表示されないコンテンツレイヤーの一部において上下にスクロールするために上向き又は下向きの動きを使用することができ、そのような上向き/下向きの動きはさらに斜めの動きの効果のために左/右の動きと組み合わせることができる。
【0026】
レイヤー内の特定の動きを生成する必要があるユーザーの動きの実際の量及び方向は、実施例やユーザーの好みに応じて変わる。たとえば、マルチレイヤーUIシステムは、ユーザーの動きの大きさや移動速度(又は速度)に応じて(例えば、ピクセルの観点からの)レイヤーにおける運動量を計算するために使用されるデフォルト設定を含んでもよい。別の例として、ユーザーは、タッチスクリーン上での指先又はスタイラスの同じ動作がコントロールの設定に応じてレイヤーについてのより小さな又はより大きな動きを生成するように、タッチスクリーンの感度コントロールを調整することができる。
【0027】
いくつかの実施例では、レイヤーはロックポイントを含む。レイヤーのロックポイントは、デバイスの表示領域が整列される対応する位置を示す。たとえば、表示領域の左端が左端のロックポイント「A」にあるようにユーザーがコンテンツレイヤー上の位置に移動する場合、表示領域の左端はまた、他のレイヤーの各々における対応する左端のロックポイント「A」において合わせられる。ロックポイントはまた、表示領域の右端(右端のロックポイント)の位置合わせ、又は他の種類の位置合わせ(例えば、ロックポイントを中央に置く)を示してもよい。通常、各レイヤーにおける対応するロックポイントは、レイヤーが異なる速度で移動するということを考慮して配置される。例えば、コンテンツレイヤーにおける第1のロックポイントと第2のロックポイントとの間の距離が背景レイヤーにおける対応する第1のロックポイントと第2のロックポイントとの間の距離の2倍である場合、背景レイヤーは、2つのロックポイント間で移行するときにコンテンツレイヤーの半分の速度で移動する。
【0028】
図1に示す例において、背景レイヤー110及びコンテンツレイヤー112は、対応する左端ロックポイント 「A」、「C」、「E」及び「G」、並びに対応する右端ロックポイント「B]、「D」、「F」及び「H」を有する。左端のロックポイントは表示領域の左端(図示せず)に合わせ、右端ロックポイントは表示領域の右端に合わせる。ロックポイントに対応する左端又は右端の位置合わせは、表示領域の端とのロックポイントの正確な位置合わせを含んでもよく、又はロックポイントと表示領域のエッジとの間のある量のパディング(padding)を含んでもよい。コンテンツレイヤー112において、左端のロックポイントは、コンテンツペイン(例えば、それぞれ、コンテンツペイン120、122、124及び126)の左端に合い、右端のロックポイントはコンテンツペインの右端に合う。2つのレイヤー110、112におけるロックポイント間のマッピングは2つのレイヤー間の矢印及び背景ペイン102内の破線によって示される。
【0029】
図1に示すロックポイントは、一般的にロックポイントの完全な組を表すものではない。代替手段としてロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央のロックポイントは、表示領域の中央との位置合わせを示すことができる。別の代替手段として、より少ないロックポイントを使用することができ、又は表示可能な領域間のオーバーラップを提供するためにより多くのロックポイントを使用することができる。例えば、ロックポイントは左端又は右端ロックポイントのいずれかに限定されてもよいし、又はロックポイントはレイヤーのある部分について使用できるが他については使用できないものであってもよい。別の代替手段として、ロックポイントは省略することができる。
【0030】
レイヤー内の対応する位置を示すことに加えて、ロックポイントは他の挙動を示すことができる。例えば、ロックポイントは、ロックポイントに対応するレイヤーの一部がディスプレイ上で見えてくるときにレイヤーが移動するコンテンツレイヤーにおける位置を示すことができる。これは、例えば、画像、リスト又は他のコンテンツ要素が表示領域の左端又は右端の近くで部分的に見えるようになるときに有用となる−コンテンツレイヤーは、表示領域のエッジが適切なロックポイントと合うようにレイヤーを動かすことによって自動的にコンテンツ要素を完全に見えるようにすることができる。ロックアニメーションはフリックジェスチャーやパンジェスチャーなどのナビゲーションイベントの最後に実行することができ、特定のロックポイントにレイヤーを合わせる。ロックポイントに正確に合っていないユーザーが生成した動きをナビゲーションイベントが生成する場合、ロックアニメーションはレイヤーを合わせるために使用することができる。例として、ロックアニメーションは、(例えば、2つのコンテンツペインの一部が表示領域において可視である場合に)2つのコンテンツペイン間の位置へのコンテンツレイヤーの動きを引き起こすナビゲーションイベントの最後に実行することができる。マルチレイヤーUIシステムは、どのコンテンツペインが表示領域においてより多くのスペースを占めているかを確認することができ、ロックアニメーションを使用してそのペインへ移行することができる。これにより、レイヤーの全体像(overall look)を向上させることができ、表示領域において情報や機能(例えば、機能的なUI要素)を見えるようにするときに有効である。
【0031】
ロックポイントはまた、ナビゲーション中にロッキング「ノッチ」又は「バンプ」効果を提供するのに役立つ。例えば、ユーザーがコンテンツレイヤーの長さに沿って移動するとき、レイヤーは、ユーザーによってなされる各ナビゲーション動作(例えば、タッチスクリーン上のフリック動作やパン動作)の後に(例えば、一定の間隔で、コンテンツ要素間など)ロックポイントにおいて停止してもよい。
【0032】
様々なレイヤーの動きはコンテキストに応じて異なってもよい。たとえば、ユーザーは、コンテンツレイヤーの始めから左にナビゲートしてコンテンツレイヤーの端に到達したり、コンテンツレイヤーの端から右にナビゲートしてコンテンツレイヤーの始めに到達したりすることができる。このラッピング(wrapping)機能(特徴)は、コンテンツレイヤーを通じてナビゲートするときにより多くの柔軟性をもたらす。ラッピングはさまざまな方法でマルチレイヤーUIシステムによって扱うことができる。たとえば、ラッピングは、タイトルレイヤーや背景レイヤーなどのレイヤーの端からそのようなレイヤーの始めへの、又はその逆の、迅速な移行を示すアニメーションを生成することによって処理することができる。このようなアニメーションは、コンテンツレイヤーにおける通常のパン動作と、又はロッキングアニメーションなどの、コンテンツレイヤーにおける他のアニメーションと、組み合わせることができる。しかし、ラッピング機能は必ずしも必要ではない。
例1−複数のUIレイヤー
図2は、異なる速度で移動する複数のレイヤーを備えるユーザーインターフェースを提供する例示的な技術200を示すフローチャートである。210において、マルチレイヤーUIシステムは、(例えば、コンピューティングデバイスの表示領域において)同時に表示される平行なレイヤーを含むユーザーインターフェースを提供する。一般的に、レイヤーの少なくとも1つの少なくとも一部は表示領域に表示されない。220において、システムはレイヤーにおいて行われるべき動きを示すユーザー入力を受信する。たとえば、コンテンツレイヤーが表示領域の右端を超える場合、ユーザーは、コンテンツレイヤーの異なる部分を見るために、コンテンツレイヤーにおけるパン動作を引き起こすべくタッチスクリーンとインタラクトすることができる。230において、システムは、ユーザー入力に少なくとも部分的に応じて、異なる移動速度の平行なレイヤーにおける動きをレンダリングする。たとえば、システムは、コンテンツレイヤーを、タッチスクリーン上のパンジェスチャーの速度に等しい速度で移動させ、タイトルレイヤー及び背景レイヤーを、より遅い速度で移動させることができる。
【0033】
図3A−3Cは、表示領域300を備えたディスプレイを有するデバイスについてマルチレイヤーUIシステムによって提示されたGUIにおける、複数のレイヤー310、312、314を示す図である。表示領域300は、スマートフォンや同様のモバイルコンピューティングデバイスのディスプレイの通常の寸法を有する。図3A−3Cに示した例によれば、ユーザー302(手のアイコンで表される)は、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー314とインタラクトする。このインタラクションは、例えば、指先、スタイラス又は他の物体によってタッチスクリーンに接触すること、及びタッチスクリーンの表面上で(例えば、フリック動作又はスイープ動作によって)それを移動させることを含んでもよい。
【0034】
コンテンツレイヤー314はコンテンツ要素(例えば、コンテンツ画像330A−H)を含む。レイヤー310、312はテキスト情報(それぞれ「Category(カテゴリー)」及び「Selected Subcategory(選択されたサブカテゴリー)」)を含む。コンテンツレイヤー314の長さはレイヤー312の長さの約2倍であるように示され、レイヤー312の長さはレイヤー310の長さの約2倍であるように示される。
【0035】
図3A−3Cにおいて、ユーザー302によって引き起こされ得るレイヤーの動きの方向が、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー310、312、314の可能な動き(例えば、左又は右の水平方向の動き)を示す。
【0036】
図3A−3Cに示す例では、システムは、左又は右へのユーザーの動き、水平面より上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きを示す入力として解釈する。図3A−3Cに示す例では、コンテンツレイヤー314に対応する表示領域300の一部とユーザー302がインタラクトすることを示すが、システムは、コンテンツレイヤー314によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムは、レイヤー310、312、314における動きを引き起こすためにタッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域300の部分に相当する部分)とのインタラクションを可能にする。
【0037】
ユーザー入力が右または左への動きを示す場合、システムは、表示領域300に対するレイヤー310、312、314の右方向又は左方向の動きを生成する。レイヤー310,312、314の移動量は、レイヤーにおけるデータ及びユーザーによって行われた動きの大きさや移動速度(又は速度)の関数である。
【0038】
図3A−3Cに示す例において、レイヤー310、312、314はラッピングアニメーション中を除いて、次の規則に従って動く:
1.コンテンツレイヤー314はレイヤー312の約2倍の速度で移動し、レイヤー312はレイヤー314の約半分の長さである。
【0039】
2.レイヤー312はレイヤー310の約2倍の速度で移動し、レイヤー310はレイヤー312の約半分の長さである。
3.コンテンツレイヤー314はレイヤー310の約4倍の速度で移動し、レイヤー310はレイヤー314の約1/4の長さである。
【0040】
レイヤー310、312、314の動きは、いくつかの状況では、上記の規則とは異なる場合がある。図3A−3Cに示す例では、ラッピングが許可される。矢印は、ユーザーがコンテンツレイヤー314の先頭(図3Aに示す位置)から左にナビゲートすることができ、コンテンツレイヤー314の終端(図3Cに示す位置)から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。図3A−3Cに示す例において、レイヤー310及び312におけるテキストは、コンテンツレイヤーの先頭に巻き戻すときにより速く移動する。図3Cにおいて、表示領域300は、それぞれのテキスト文字列の末尾における、レイヤー310及び312内の、それぞれ1つ及び2つの文字の一部を示す。図3Aに示す状態へ戻るためのラッピングアニメーションは、レイヤー310、312のテキストを右から見えるようにして、図3Aに示す状態から図3Bに示す状態への移行などの他のコンテキストにおけるものよりも迅速な動きをもたらすことを含んでもよい。
【0041】
図3A−3Cにおいて、例としての左端「ロックポイント」「A」、「B」及び「C」が各レイヤーに対して示される。左端のロックポイントは、各レイヤー上の、表示領域300の左端の対応する位置を示す。たとえば、表示領域300の左端がロックポイント「A」にあるようにユーザーがコンテンツレイヤー314上の位置にナビゲートする場合、表示領域の左端はまた、図3Aに示されるように、他のレイヤー310、312のロックポイント「A」において合わせられる。図3Bにおいて、表示領域300の左端は、レイヤー310、312、314の各々におけるロックポイント「B」にある。図3Cにおいて、表示領域300の左端は、各レイヤーにおけるロックポイント「C」にある。
【0042】
図3A−3Cに示すロックポイントは、ロックポイントの完全な組を一般に表すものではなく、簡潔にするためだけにロックポイント「A」、「B」及び「C」に制限されたものである。たとえば、左端のロックポイントは、コンテンツ画像330A−330Hの各々について設定できる。代替的に、ロックポイントをほとんど使用しなくてもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端のロックポイントは表示領域300の右端との位置合わせを示してもよいし、中央のロックポイントは表示領域300の中央との位置合わせを示してもよい。
例2−表示の向きの変更
記載される技術及び手段は、横方向など、異なる方向で表示画面上で使用することができる。表示方向の変化は、例えば、UIが横長の形状に方向付けられるように(例えば、ユーザーの好みによって)構成される場合、又はユーザーがデバイスを物理的に回転させる場合に生じ得る。デバイス内の1つ又は複数のセンサー(例えば、加速度計)は、デバイスがいつ回転されたかを検出し、それに応じて表示方向を調整するために使用することができる。図3Dに示す例では、表示領域は横長の形に方向付けられ、レイヤー312及び314のみを見ることができる。ただし、コンテンツレイヤーのより多くの部分を見ることができるようになって、ユーザーが一度にコンテンツレイヤー内のより多くのコンテンツ(例えば、コンテンツ画像330A−330D)を見ることを可能にする。代替的に、必要に応じて、レイヤーの高さを低減し、フォントや画像のサイズを減らすことによるなどして、すべてのレイヤーを見続けることができるよう維持するために調整を行うことができる。例えば、レイヤー310及び312の高さを低くするとともに、テキストのフォントのサイズを対応付けて小さくすることができ、その結果、コンテンツレイヤー314をナビゲートを容易にするために同じサイズに保ちつつ、レイヤー310及び312がなお見ることができるようにすることができる。
【0043】
図3A−3Cの場合のように、ユーザー302は、コンテンツレイヤー314に沿ってナビゲートするために(横方向に)左方向又は右方向の動きをすることができる。各レイヤーにおけるロックポイント「A」、「B」及び「C」の位置づけ並びにレイヤーの相対的な長さは、コンテンツレイヤー314がその上のレイヤー312の約2倍の速度で移動することを示す。また、ロックポイントの位置及びロックポイント間の距離は、再配向(reorientation)の効果(例えば、表示領域の新たな有効幅)を考慮するように動的に調整することができる。しかし、このような調整は必ずしも必要ではない。例えば、表示領域が等しい高さと幅を有する場合、横方向への表示領域の再配向をしても表示領域の有効幅は変更されない。
例3−複数のUIレイヤーにおける動きの計算
図4は、UIシステムがマルチレイヤーGUI(例えば、図3A−3Cに示すGUI)において第1の方向(例えば、水平方向)の動きを計算する例示的な技術400を示すフローチャートである。
【0044】
410において、UIシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第1のレイヤー(例えば、コンテンツレイヤー314)における視覚情報(例えば、図3Aに示すコンテンツ画像330)の第1の部分はタッチスクリーンの表示領域(例えば、表示領域300)内にある。420において、UIシステムは、タッチスクリーン上のジェスチャーに対応するユーザー入力を受信する。430において、UIシステムは、ユーザー入力に少なくとも部分的に基づいて第1の動きを計算する。第1の動きは、第1のレイヤーにおける視覚情報の第2の部分(例えば、コンテンツ画像330C)が表示領域の外にある最初の第1のレイヤーの位置(例えば、図3Aに示す位置)から、第1のレイヤーにおける視覚情報の第2の部分が表示領域内にある現在の第1のレイヤーの位置(例えば、図3Bに示す位置)への、第1のレイヤーの動きである。第1の動きは、第1の移動速度で第1の方向(例えば、右方向、水平方向)である。第1の移動速度はジェスチャーの動きの速度に基づく。たとえば、第1の移動速度は、タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、ジェスチャーの動きの速度(例えば、タッチスクリーン上のユーザーの指や他の物体の移動速度)と実質的に等しくすることができる。440において、UIシステムは、ユーザー入力に少なくとも部分的に基づいて、第1の動きと実質的に平行な第2の動きを計算する。第2の動きは、最初の第2のレイヤーの位置(例えば、図3Aに示す位置)から現在の第2のレイヤーの位置(例えば、図3Bに示す位置)への第2のレイヤー(例えば、レイヤー312)における視覚情報の動きである。第2の動きは、第1の移動速度とは異なる第2の移動速度で第1の方向(例えば、右方向、水平方向)にある。
【0045】
動きは(例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での)表示のためにアニメート及び/又はレンダリングすることができる。
例4−変化する速度で動く個々のレイヤー
図5A−5Dは、セクションヘッダーレイヤー512の異なる部分がコンテンツレイヤー514の異なる部分に関連付けられる、3つのレイヤー510、512、514を備えたマルチレイヤーUIシステムによって提示されるGUIを示す図である。図5A−5Dに示す例によれば、ユーザー(図示せず)はコンテンツレイヤー514とインタラクトする。たとえば、ユーザーは、コンテンツレイヤー内の異なるセクション(例えば、セクション1a、1b、1c、1d、2a、2b、2c、又は2d)を強調するためにナビゲーションボタン(図示せず)を押すことによって、コンテンツレイヤー514をナビゲートする。また、ユーザーは、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー514とインタラクトする。当該インタラクションは、例えば、指先、スタイラス又は他の物体によりタッチスクリーンに接触すること、及びタッチスクリーンの表面上で(例えば、フリック動作又はスイープ動作によって)それを移動させることを含んでもよい。
【0046】
コンテンツレイヤー514は、画像、アイコン、テキスト文字列やリンクのリスト、又はいくつかの他のコンテンツであってもよいセクション1a、1b、1c、1d、2a、2b、2c、及び2dを含む。他のレイヤー510、512はテキスト情報を含む。セクションヘッダーレイヤー512は2つのテキスト文字列(「Feature 1(機能1)」及び「Feature 2(機能2)」)を含む。「Feature 1」はセクション1a、1b、1c及び1dに関連付けられる。「Feature 2」はセクション2a、2b、2c及び2dに関連付けられる。レイヤー510は1つのテキスト文字列(「Application(アプリケーション)」)を含む。コンテンツレイヤー514の長さは、セクションヘッダーレイヤー512の全体の長さ(例えば、2つの文字列の合計の長さ)より長く、レイヤー510の長さより長くなるように示される。
【0047】
図5A−5Dにおいて、ユーザーによって示すことができる動きの方向は、表示領域300の上の左向き矢印及び右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー510、512、514の可能な動き(左又は右の水平方向の動き)を示す。
【0048】
図5A−図5Dに示す例では、ユーザーは、コンテンツレイヤー514において左又は右にナビゲートするときに、コンテンツレイヤー514の異なるセクション(例えば、図5Aのセクション1a、図5Bのセクション1d、図5Cのセクション2a、図5Dのセクション2d)を強調表示する。ユーザー入力が右又は左への動きを示す場合、システムは、表示領域300に対するレイヤー510、512、514の右方向又は左方向の動きを生成する。レイヤー510、512、514の移動量はレイヤー内のデータ及びユーザーによって行われる動きの大きさや移動速度(又は速度)の関数である。
【0049】
図5A−5Dにおいて、例示的な右端ロックポイント「A」、「B」、「C」及び「D」が各レイヤー510、512、514について示される。各レイヤーの右端ロックポイントは、各レイヤーの表示領域300の右端の対応する位置を示す。たとえば、ユーザーがコンテンツレイヤー514のセクション1aにナビゲートする場合、表示領域300の右端はロックポイント「A」にあり、表示領域300の右端は、図5Aに示すように、他のレイヤー510、512のロックポイント「A」において合わせられる。図5Bにおいて、表示領域300の右端は、レイヤー510、512、514の各々のロックポイント「B」にある。図5Cにおいて、表示領域300の右端は、レイヤー510、512、514の各々のロックポイント「C」にある。図5Dにおいて、表示領域300の右端は、レイヤー510、512、514の各々のロックポイント「D」にある。
【0050】
図5A−5Dに示すロックポイントは、ロックポイントの完全な組を一般的に示すものではなく、単に簡潔にするためにロックポイント「A」、「B」、「C」及び「D」に限定されたものである。たとえば、左端ロックポイントはコンテンツレイヤー514における1つ又は複数のセクションに対して設定することができる。代替的に、追加の右端のロックポイントを使用してもよく、より少ないロックポイントを使用してもよく、ロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央ロックポイントを、表示領域300の中央に合わせるために使用することができる。
【0051】
図5A−図5Dに示す例では、レイヤー510、512、514は、ラッピングアニメーション中を除き、次の規則に従って動く。
1.セクションヘッダーレイヤー512における「Feature 1(機能1)」というテキスト文字列に関連付けられるコンテンツレイヤー514の部分(セクション1a、1b、1c及び1d)は、「Feature 1」というテキスト文字列の約4倍の速度で移動する。「Feature 1」というテキスト文字列は、「Feature 1」というテキスト文字列に関連付けられるコンテンツレイヤー514の部分(セクション1a、1b、1c及び1d)の約半分の長さであり、コンテンツレイヤー514において右端ロックポイント「A」から右端ロックポイント「B」まで移動するべき距離はセクションヘッダーレイヤー512における対応するロックポイント間の距離の約4倍の長さとなる。同様に、セクション・ヘッダーレイヤー512の「Feature 2(機能2)」というテキスト文字列に関連付けられたコンテンツレイヤー514の部分(セクション2a、2b、2c及び2d)は「Feature 2」というテキスト文字列の約4倍の速度で移動する。
【0052】
2.セクションヘッダーレイヤー512における「Feature 1」というテキスト文字列に関連付けられたコンテンツレイヤー514の部分(セクション1a、1b、1c及び1d)を通じてナビゲートする場合、テキスト文字列「Feature 1」はレイヤー510の約2倍の速度で移動する。「Feature 1」というテキスト文字列はレイヤー510におけるテキスト文字列「Application(アプリケーション)」とほぼ同じ長さであるが、レイヤー510において右端ロックポイント「A」から右端ロックポイント「B」に移動するべき距離は、セクションヘッダーレイヤー512内の対応するロックポイント間の距離の約半分である。同様に、セクションヘッダーレイヤー512におけるテキスト文字列「Feature 2」に関連付けられるコンテンツレイヤー514の部分(セクション2a、2b、2c及び2d)を通じてナビゲートするとき、「Feature 2」というテキスト文字列はレイヤー510の約2倍の速度で移動する。
【0053】
3.セクションヘッダーレイヤー512内のテキスト文字列「Feature 1」に関連付けられたコンテンツレイヤー514の部分からセクションヘッダーレイヤー512のテキスト文字列「Feature 2」に関連付けられたコンテンツレイヤー514の部分に(すなわち、図5Bに示すセクション1dから図5Cに示すセクション2aに)移動するとき、セクションヘッダーレイヤー512は、図5Cにおけるレイヤー512の右端ロックポイント「B」と右端ロックポイント「C」との間の距離によって示されるように、より速く移動する。
【0054】
4.コンテンツレイヤー514はレイヤー310の約8倍の速度で移動する。コンテンツレイヤー514における隣接する右端ロックポイント間で(例えば、「A」から「B」まで)移動する距離は、レイヤー510内の対応する右端ロックポイント間の距離の約8倍の長さとなる。
【0055】
レイヤー510、512、514における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図5A−図5Dに示す例では、ラッピングが可能となる。表示領域300の上の矢印は、ユーザーが、コンテンツレイヤー514の先頭(図5Aに示す位置)から左にナビゲートすることができ、コンテンツレイヤー514の端(図5Dに示す位置)から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。たとえば、図5Dに示す状態から図5Aに示す状態へ戻るためのラッピングアニメーションは、レイヤー510、512のテキストを右から視界にもたらすことを含み、図5Aに示す状態から図5Bに示す状態への移行などの他のコンテキストにおけるものよりもより速い移動に帰着する。
例5−並行のレイヤー移動
図6A−6Dは、レイヤー614の上のレイヤー612と並行に(すなわち、同じ方向及び同じ速度で)動くコンテンツレイヤー614を含むマルチレイヤーUIシステムによって提示されるGUIを示す図である。この例では、(手のアイコンで表される)ユーザー302は、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー614を介してナビゲートする。当該インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及びタッチスクリーンの表面上で(例えば、フリック動作又はスイープ動作により)それを動かすことを含んでもよい。
【0056】
コンテンツレイヤー614は、(以下でより詳細に説明される)ゲームの画像640、642、644、リスト650、652、654、及びアバター630を含む。他のレイヤー610、612は、テキスト情報(レイヤー610の「Games(ゲーム)」、レイヤー612の「Spotlight(スポットライト)」、「Xbox Live」、「Requests(リクエスト)」及び「Collection(コレクション)」)を含む。図6A−6Dにおいて、例示的なロックポイント「A」、「B」、「C」及び「D」がレイヤー610及び612について示される。水平方向の動きの観点では、コンテンツレイヤー614はレイヤー612にロックされ、レイヤー612について示されるロックポイントはまた、レイヤー614に適用される。
【0057】
各レイヤーのロックポイントは、各レイヤーの表示領域300の左端の対応する位置を示す。たとえば、表示領域300の左端がロックポイント「A」にあるようにユーザーがコンテンツレイヤー614上の位置にナビゲートするとき、表示領域300の左端はまた、図6Aに示すように、他のレイヤー610、612のロックポイント「A」に合わせられる。図6Bにおいて、表示領域300の左端は、レイヤー610、612、614の各々のロックポイント「B」にある。図6Cにおいて、表示領域300の左端は、レイヤー610、612、614の各々のロックポイント「C」にある。図6Dにおいて、表示領域300の左端は、レイヤー610、612、614の各々のロックポイント「D」にある。
【0058】
図6A−6Dに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、単に簡潔にするためにロックポイント「A」、「B」、「C」及び「D」に限定されたものである。例えば、右端ロックポイントを表示領域300の右端と合わせるために追加することができ、表示領域300の中央と合わせるために中央ロックポイントを追加することができる。代替的に、より少ないロックポイントを使用してもよく、より多くのロックポイントを使用してもよく、ロックポイントを省略してもよい。
【0059】
ユーザー302によってレイヤー610、612、614において引き起こされ得る動きの方向は、図6A−6Dにおける左向きの矢印及び右向きの矢印で示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー610、612、614の可能な動き(左又は右の水平方向の動き)を示す。システムは、左又は右へのユーザーの動き、水平面の上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができる。図6A−6Eに示す例はコンテンツレイヤー614に対応する表示領域300の一部とユーザー302がインタラクトすることを示すが、システムは、コンテンツレイヤー614によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムはまた、レイヤー610、612、614において動きを引き起こすために、タッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域に対応する部分)とのインタラクションを可能にする。
【0060】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域300に対する、レイヤー610、612、614の左方向又は右方向の動きを生成する。この例では、レイヤー610、612、614の水平移動量は、レイヤー内のデータやユーザーによって行われる動きの大きさや速度の関数である。レイヤー610、612、614はラッピングアニメーション中を除いて次の規則に従って水平方向に動く。
【0061】
1.コンテンツレイヤー614の水平方向の動きはレイヤー612にロックされる。
2.レイヤー612及び614はそれぞれ、レイヤー610の約3倍の速度で水平に移動し、レイヤー610はレイヤー612及び614の約1/3の長さである。
【0062】
レイヤー610、612、614における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図6A−6Eに示す例では、ラッピングが可能となる。矢印は、ユーザーがコンテンツレイヤー614の先頭(図6A及び図6Eに示す位置)から左にナビゲートすることができ、コンテンツレイヤー614の端(図6Dに示す位置)から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。図6A及び6Dに示す例では、コンテンツレイヤー614の先頭に戻ってラッピングするとき、レイヤー610内のテキストはより速く動く。図6Dにおいて、表示領域300は、「Games」というテキスト文字列の末尾の、レイヤー610における2文字の一部を示す。図6Aに示す状態へ戻るためのラッピングアニメーションは、レイヤー610のテキストを含むレイヤー610、612、614のデータを右から視界にもたらすことを含み、図6Aに示す状態から図6Bに示す状態への移行などの他のコンテキストにおけるものよりもより速いレイヤー610における動きに帰着する。
例6−レイヤーの要素の動き
全体のレイヤーの動きに加えて、ユーザーはまた、レイヤー内のデータ及びレイヤーがどのように配置されるかに応じて、レイヤーの要素又は部分における動きを引き起こすことができる。たとえば、ユーザーは、全体としてレイヤーにおいて引き起こされ得る動き(例えば、水平方向の動き)に対して直交する又は実質的に直交する、レイヤーの要素(例えば、リスト)における動き(例えば、垂直方向の動き)を引き起こすことができる。リストが表示領域に表示することができるものよりも多くの情報を含む場合などには、水平に動くレイヤー内のレイヤー要素の直交する動きはコンテンツレイヤーに埋め込まれたリスト内の縦スクロールを含んでもよい。また、縦に動くレイヤーを提示するシステムは、レイヤーの要素における水平の動きを可能にし得る。
【0063】
図6A及び図6Eにおいて、コンテンツレイヤー614内のリスト650は、表示領域300において表示され得るものよりも多くの情報を含む。システムは、垂直面の左又は右へと延びる斜めの動きを含むユーザー302によってなされる上下の動きを、リスト650の有効な上向き又は下向きの動きとして解釈することができる。リスト650の移動量は、ユーザー302によってなされる動作の大きさ又は速度とリスト650内のデータとの関数であってもよい。したがって、リスト650のスクロールは、項目ごと、項目のページごと、又は動きの大きさや速度に依存する中間のものであってもよい。この例では、リスト650は、図6Aの表示領域300において見ることができない唯一のリスト項目を含み、したがって、小さな又は大きな下向きの動きの範囲はリスト650の最後までスクロールするのに十分なものとなり得る。図6A及び図6Eに示すように、レイヤー内の他の視覚的情報(例えば、リスト650の外のコンテンツレイヤー614における視覚情報又は他のレイヤー内の視覚情報)の垂直方向の位置は、上向き又は下向きの動きに影響されない。この例では、(全体としてレイヤーに影響を与えるラッピングアニメーション及びロッキングアニメーションを含む)全体としてのレイヤーの動きは、水平方向の動き(モーションの主軸)に制限される。リスト650は、全体としてのレイヤー内の動きに直交する第2の軸に沿った動き(例えば、垂直方向の動き)を可能にするレイヤー内のユーザーインターフェース要素の例である。
【0064】
図6A及び6Eは、コンテンツレイヤー614におけるリスト650に対応する表示領域300の一部とユーザー302がインタラクトすることを示す。また、システムは、リスト650において上方又は下方への移動を引き起こすために、タッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域300の部分に相当する部分)とのインタラクションを可能にしてもよい。
【0065】
ユーザー302によって引き起こされ得る動きの方向は、図6Aにおける追加の下向きの矢印及び図6Eにおける追加の上向き矢印と一緒に、図6A及び図6Eにおける左向きの矢印及び右向きの矢印によって示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー610、612、614の可能な動きを(左又は右の水平方向の動き)示す。下向き及び上向きの矢印は、ユーザーの動きに応答するリスト650の可能な動き(上又は下の垂直方向の動き)を示す。ユーザー302は、リスト650における上又は下の動作を行った後、コンテンツレイヤー614において右又は左に移動することができる。リスト650からコンテンツレイヤー614において左又は右にナビゲートするときに、リスト650の現在の位置(例えば、図6Eに示されるリスト最下部の位置)を保存することができ、また、システムはデフォルトの位置(例えば、図6Aに示されるリスト最上部の位置)に戻ることができる。可能な動きを示す図6A−6E(及び他の図)における矢印は説明の目的のために示されるが、表示領域300はそれ自体が、レイヤー及び/又はリストについて可能な動きについてのグラフィカルな指標(矢印やシェブロンなど)を表示してもよい。
【0066】
例7−直交する動きが可能な要素を備えたレイヤーにおける動作
図7は、第1の方向と直交する(又は実質的に直交する)第2の方向に移動するように動作可能であるUI要素を備えた少なくとも1つのレイヤーを有するマルチレイヤーGUI(例えば、図6A−6Eに示すGUI)において第1の方向(例えば、水平方向)の動きをUIシステムが計算する例示的な技術700を示すフローチャートである。
【0067】
710において、UIシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第1のレイヤー(例えば、コンテンツレイヤー614)は第1の方向(例えば、水平方向)と実質的に直交する第2の方向(例えば、垂直方向)に移動するように動作可能なユーザーインターフェース要素(例えば、リスト650)を含む。第1のレイヤーにおける視覚情報の第1の部分(例えば、図6Bに示すリスト652)は、タッチスクリーンの表示領域(例えば、表示領域300)内にある。
【0068】
720において、UIシステムは、タッチスクリーン上の第1のジェスチャーに対応する第1のユーザー入力を受信する。730において、UIシステムは、第1のユーザー入力に少なくとも部分的に基づいて、第1の動きを計算する。第1の動きは、第1のレイヤーにおける視覚情報(例えば、リスト650)の第2の部分が表示領域の外にある最初の第1のレイヤーの位置(例えば、図6Bに示す位置)から、第1のレイヤーにおける視覚情報の第2の部分が表示領域内にある現在の第1のレイヤーの位置(例えば、図6Aに示す位置)への、第1のレイヤーの動きである。第1の動きは、第1の移動速度で第1の方向(例えば、左向きの水平方向)である。740において、UIシステムは、第1のユーザー入力に少なくとも部分的に基づいて、第1の動きと実質的に平行な第2の動きを計算する。第2の動きは、最初の第2のレイヤーの位置(例えば、図6Bに示す位置)から現在の第2のレイヤーの位置(例えば、図6Aに示す位置)への第2のレイヤーにおける視覚情報の動きである。第2の動きは、第1の移動速度とは異なる第2の移動速度で第1の方向(例えば、左向きの水平方向)にある。
【0069】
750において、UIシステムは、タッチスクリーン上の第2のジェスチャーに対応する第2のユーザー入力を受信する。760において、UIシステムは、第2のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き(例えば、垂直方向の動き)を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第1のレイヤーのユーザーインターフェース要素の視覚情報の動きである。
【0070】
実質的に直交する動きは、最初の垂直位置(例えば、図6Aに示すようなリスト650の位置)から現在の垂直位置(例えば、図6Eに示すようなリスト650の位置)への垂直方向にスクロール可能な要素(例えば、リスト650)の視覚情報の動きであってもよい。現在の垂直位置は、例えば、最初の垂直位置及び第2のジェスチャーの速度に基づいて計算することができる。垂直にスクロール可能な要素の視覚情報の一部は、垂直方向にスクロール可能な要素が最初の垂直位置(例えば、図6Aに示すようなリスト650の位置)にあるときには表示領域の外にあってもよく、垂直にスクロール可能な要素が現在の垂直位置(例えば、図6Eに示すようなリスト650の位置)にあるときには表示領域内にあってもよい。
【0071】
動きは、(例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での)表示のためにアニメート及び/又はレンダリングすることができる。
例8−アバター
レイヤーは、レイヤーにおける他の要素又はレイヤーのセクションなどの他の要素間の関係を示す要素を含んでもよい。他の要素間の関係を示す要素は、別々のレイヤーに含まれてもよいし、又はそれぞれの他の要素と同じレイヤーに含まれてもよい。例えば、アバターレイヤーは、ユーザーに関連する別のレイヤーにおける2つの関連するセクションにまたがる範囲の動きを備えた視覚的な要素(アバター)を含んでもよい。他の要素はまた、要素間の関係を示すために使用することができる。たとえば、音楽アーティストの画像は、アーティストのアルバムリストとアーティストのツアー日程のリストとの間の関係を示すために使用されてもよい。
【0072】
図6A−6Eにおいて、アバター630は、コンテンツレイヤーにおけるリスト652、654、及びレイヤー612におけるリスト652、654の上の見出し(それぞれ、「Xbox Live」及び「Requests(リクエスト)」)に関連付けられる。アバター630は、コンテンツレイヤーの一部(例えば、リスト652、654)の間の関係を示したりコンテンツレイヤーの一部に対する関心を引いたりするための視覚的な指示(cue)を提供することができる。図6Bにおいて、アバター630はリスト652とリスト654との間に配置される。図6Cにおいて、アバター630はリスト654のテキストの後ろに浮いているが、表示領域300内に完全に残ったままである。図6Dにおいて、アバター630は部分的にのみ表示領域300内にあり、表示領域内にある部分はゲームアイコン640、642、644の背後にある。表示領域300の左端にアバター630を配置することは、ユーザー302に対して、ユーザー302がアバター630の方向にナビゲートする場合にはアバター630に関連付けられた情報(例えば、リスト652、654)が利用可能であることを示すことができる。アバター630は様々な速度で移動することができる。たとえば、アバター630は、図6Cと6Dとの間の移行の場合と比べて、図6Bと6Cとの間の移行においてより速く移動する。
【0073】
代替的に、アバター630は、異なる方法で移動したり、他の機能を示したりすることができる。たとえば、アバター630は、コンテンツレイヤー614又はある他のレイヤーにおける特定の位置(例えば、ロックポイント)にロックすることができ、その結果、アバター630はそれがロックされているレイヤーと同じ水平速度で動く。別の代替手段として、アバター630は、リスト650などの上下にスクロールすることができるリストに関連付けることができ、当該関連付けられるリストが上下にスクロールするときに上下に動くことができる。
【0074】
例9−背景レイヤー
図8A−8Cは、3つのレイヤー310、312、314及び背景レイヤー850を備えたマルチレイヤーUIシステムによって提示されるGUIを示す図である。この例では、(手のアイコンで表される)ユーザー302は、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー314とインタラクトする。
【0075】
背景レイヤー850は他のレイヤーの背後に浮かんでいる。背景レイヤー850において視覚的に提示されるデータは、例えば、表示領域300の境界を超えて延在する画像を含んでもよい。コンテンツレイヤー314は、コンテンツ要素(例えば、コンテンツ画像330A−H)を含む。レイヤー310、312は、テキスト情報(それぞれ、「Category(カテゴリー)」及び「Selected Subcategory(選択したサブカテゴリー)」)を含む。コンテンツレイヤー314の長さはレイヤー312の約2倍の長さになるように示され、レイヤー312の長さはレイヤー310の約2倍の長さであることが示される。背景レイヤー850の長さはレイヤー312の長さよりわずかに小さくなるように示される。
【0076】
図8A−8Cにおいて、ユーザー302によってレイヤー310、312、314、850において引き起こされ得る動きの方向は、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザーの動きに応答して、レイヤー310、312、314、850の可能な動き(左又は右の水平方向の動き)を示す。この例において、システムは、左又は右へのユーザーの動き、さらには水平面の上又は下に延びる斜めの動きを、レイヤーの有効な左向き又は右向きの動きとして解釈する。図8A−8Cはコンテンツレイヤー314に対応する表示領域300の一部とユーザーがインタラクトすることを示すが、システムはまた、タッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域300の部分に対応する部分)とのインタラクションがレイヤー310、312、314、850における動きを引き起こすことを可能にする。
【0077】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域300に対するレイヤー310、312、314、850の右方向又は左方向の動きを生成する。レイヤー310、312、314、850の移動量は、レイヤー内のデータとユーザーによって行われた動きの大きさ又は移動速度(又は速度)との関数である。
【0078】
図8A−8Cにおいて、例示的な左端のロックポイント「A」、「B」及び「C」が、レイヤー310、312、314、850に対して示される。左端のロックポイントは、各レイヤーの表示領域300の左端の対応する位置を示す。たとえば、表示領域300の左端がロックポイント「A」にあるようにユーザーがコンテンツレイヤー314上の位置にナビゲートする場合、表示領域300の左端はまた、図8Aに示すように、他のレイヤー310、312、850のロックポイント「A」において合わせられる。図8Bにおいて、表示領域300の左端は、レイヤー310、312、314、850の各々のロックポイント「B」にある。図8Cにおいて、表示領域300の左端は、レイヤー310、312、314、850の各々のロックポイント「C」にある。
【0079】
図8A−8Cに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、簡潔にするためにのみロックポイント「A」、「B」及び「C」に制限されるものである。たとえば、左端のロックポイントは、コンテンツ画像330A−330Hの各々について設定することができる。また、より少ないロックポイントを使用してもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端ロックポイントは表示領域300の右端との位置合わせを示してもよいし、中央ロックポイントは表示領域300の中央との位置合わせを示してもよい。
【0080】
この例では、レイヤー310、312、314、850は、ラッピングアニメーション中を除き、次の規則に従って移動する。
1.コンテンツレイヤー314はレイヤー312の約2倍の速度で移動し、レイヤー312はレイヤー314の約半分の長さである。
【0081】
2.レイヤー312はレイヤー310の約2倍の速度で移動し、レイヤー310はレイヤー312の約半分の長さである。
3.コンテンツレイヤー314はレイヤー310の約4倍の速度で移動し、レイヤー310はレイヤー314の約1/4の長さである。
【0082】
4.背景レイヤー850はレイヤー310よりも遅く移動する。背景レイヤー850はレイヤー310よりも長いが、レイヤー310における隣接するロックポイント(例えば、ロックポイント「A」と「B」)の間で移動する距離は、背景レイヤー850における対応するロックポイント間の距離よりも大きい。
【0083】
レイヤー310、312、314、850の動きは、いくつかの状況では、上記の規則とは異なる場合がある。この例では、ラッピングが可能となる。ユーザー302は、コンテンツレイヤー314の先頭(図8Aに示す位置)から左にナビゲートすることができ、コンテンツレイヤー314の終端(図8Cに示す位置)から右にナビゲートすることができる。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。この例において、背景レイヤー850における画像並びにレイヤー310及び312におけるテキストは、ユーザー入力がコンテンツレイヤー314の先頭への巻き戻しを引き起こす場合により速く移動する。図8Cにおいて、表示領域300は、それぞれのテキスト文字列の末尾における、レイヤー310及び312内の、それぞれ1つ及び2つの文字の一部を示す。表示領域300はまた、背景レイヤー850における画像の最も右の部分を示す。図8Aに示す状態へ戻るためのラッピングアニメーションは、背景レイヤー850の画像の最も左の部分及びレイヤー310、312のテキストの先頭を右から見えるようにすることを含んでもよい。これにより、図8Aに示す状態から図8Bに示す状態への移行などの他のコンテキストにおけるものよりもより迅速な、レイヤー310、312及び850における動きがもたらされる。
【0084】
例10−マルチレイヤーUIシステム
図9は、デバイス(例えば、スマートフォンや他のモバイルコンピューティングデバイス)上で複数のUIレイヤーを提示する例示的なマルチレイヤーUIシステム900を示すシステム図である。システム900は、他の例で説明する機能又は他の機能を実施するために使用することができる。
【0085】
この例では、システム900は、平行なUIレイヤーの表示を制御するレイヤーコントロール920にハブページの宣言的記述を提供するハブモジュール910を含む。レイヤーコントロール920はまた、「パノラマ」又は「パノ(pano)」コントロールとも呼ばれる。UIレイヤーがパノラマ式の又は水平な方法で移動するときにそのような記述を使用することができる。また、レイヤーコントロール920は、垂直に又は他の方法で移動するUIレイヤーを制御する。レイヤーコントロール920は、マークアップジェネレーター930及びモーションモジュール940を含む。
【0086】
この例において、レイヤーコントロール920は、UI要素のいくつかのレイヤー、たとえば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤーを制御する。コンテンツレイヤーはコンテンツペインの組を含む。コンテンツペインは、例えば、視覚的に提示される、画像、グラフィカルなアイコン、リスト、テキスト、又は他の情報を含んでもよい。コンテンツレイヤーにおけるコンテンツペインの組はコンテンツペインの「世代(ジェネレーション)」と呼んでもよい。また、レイヤーコントロール920は、3つのレイヤーより多くの又は少ないレイヤーを制御し、又は異なる種類のレイヤーを制御する。ハブページの宣言的記述は、UI要素を定義する情報を含む。マルチレイヤーUIシステムでは、UI要素は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、コンテンツレイヤーなどの複数のレイヤーを含んでもよい。ハブページの宣言型記述は、スタイル情報及び/又は設定プロパティなどの他の情報と共に、マークアップジェネレーター930に提供される。マークアップジェネレーター930は、UIレイヤーをレンダリングするために使用できるマークアップを生成する。モーションモジュール940は、ユーザー入力に応答して生成されたイベント(例えば、直接的なUI操作イベント)を受け取り、動作コマンドを生成する。動作コマンドはマークアップととともにUIフレームワーク950に提供される。UIフレームワーク950において、マークアップ及び動作コマンドは、デバイスのオペレーティングシステム(OS)960に送信されるべきUIレンダリング要求を生成するレイアウトモジュール952において受信される。デバイスOS960は、レンダリング要求を受信し、レンダリングされたUIをデバイス上のディスプレイへ出力させる。ハブモジュール910、レイヤーコントロール920、及びUIフレームワーク950などのシステムコンポーネントはまた、デバイスOS960の一部として実施することができる。1つの実施例において、デバイスOS960はモバイルコンピューティングデバイスのOSである。
【0087】
ユーザー(図示せず)はUIが表示される方法に影響を与えるユーザー入力を生成することができる。図9に示す例では、レイヤーコントロール940は、UIフレームワーク950によって生成された直接UI操作イベントをリスンする。UIフレームワーク950において、直接のUI操作イベントは、デバイスOS960からジェスチャーメッセージ(例えば、デバイス上のタッチスクリーンとインタラクトするユーザーによるパンジェスチャーやフリックジェスチャーに応答して生成されるメッセージ)を受信する、インタラクションモジュール954によって生成される。デバイスOS960は、ユーザーのジェスチャーを認識してUIフレームワーク950で使用できるメッセージを作成するための機能を含む。UIフレームワーク950は、ジェスチャーメッセージを、レイヤーコントロール920に送信するべき直接的なUI操作イベントへと変換する。インタラクションモジュール954はまた、音声コマンド、キーパッド又はキーボード上の指示ボタン、トラックボールの動きなどの、他の種類のユーザー入力に応答して生成されるナビゲーションメッセージについての直接的なUI操作イベントを受け取り、生成することができる。
【0088】
例11−詳細な実施例
この例では、他の側面とともに、上述の例の側面を含む詳細な実施例について説明する。この詳細な実施例は、上述したシステム900などのマルチレイヤーUIシステムによって又はなんらかの他のシステムによって、実施することができる。
【0089】
この例において、システム900は、水平に移動する複数の並列のUIレイヤー(例えば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤー)を提示する。コンテンツレイヤーはいくつかのコンテンツペインを含む。各コンテンツペインは右のロックポイント及び左のロックポイントを含む。
【0090】
A.初期化
並列のUIレイヤーを初期化するために、システム900は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー及びコンテンツレイヤーの有効長に関する情報を取得する。(水平に移動するUIレイヤーにとって、有効長は、UIレイヤーの有効幅であると考えることができる。)システム900は、表示領域に近づくときにコンテンツペインを動的に作成することによってメモリー及び処理の要求を低減することができるが、これにより、コンテンツレイヤーの有効幅を決定することはより困難になる。この例では、初期化においてコンテンツレイヤーの有効幅を決定するために、システム900は、各コンテンツペインの最大幅に基づいて最大のコンテンツレイヤー幅を決定し、重なっていないすべてのコンテンツペインの最大幅の合計を計算する。
【0091】
(コンテンツペインについての)コンテンツレイヤーにおけるロックポイントは、例えば、重なっていないコンテンツペインを生成するために、表示領域の幅の単位でコンテンツレイヤーを分割することによって、自動的に設定することができる。また、どれだけの数の全体のコンテンツ画像nがコンテンツペインに入るかを決定し、各コンテンツ画像が少なくとも1つのコンテンツペインにあるようになるまでn個のコンテンツ画像ごとに新たなコンテンツペインを開始する(重なったコンテンツペインをもたらす可能性がある)ことによって、ロックポイントをコンテンツレイヤーにおいて設定することができる。
【0092】
レイヤーにおける動きは動作比率(motion ratios)に基づいて計算される。例えば、システム900は、それぞれ、背景レイヤーの幅及びタイトルレイヤーの幅を、コンテンツレイヤーの最大幅で割ることによって、背景レイヤー及びタイトルレイヤーの動作比率を計算する。背景レイヤー及びタイトルレイヤーの幅を考慮して、システム900は、コンテンツレイヤーにおける対応するロックポイントの位置に基づいて、それぞれ、背景レイヤー及びタイトルレイヤーにおけるロックポイントの位置をマッピングする。背景レイヤーにおけるそのような位置のマッピングの例は図1に示される。
【0093】
対応するレイヤーを動かすときにロックポイントが使用される。たとえば、システム900がコンテンツレイヤーにおけるペインへの移行をアニメートする場合に、システムは、背景レイヤーとタイトルレイヤーについて適切なロックポイントの位置を探し、レイヤーがそれらの位置にスクロールするためのコマンドを発行して、それぞれのレイヤーにおけるロックポイント間の距離に依存して相対的な動作速度を設定する。
【0094】
コンテンツレイヤーの最大の長さに基づく動作比率は、実際のレンダリングされたコンテンツレイヤーと比較される場合に概算であるにすぎない。当該比率は概算である(コンテンツペインの最終的な幅は依然として不明である)ので、システム900は、背景レイヤーやタイトルレイヤーなどのレイヤーがレンダリングされた最終的なコンテンツレイヤーにおける対応するロックポイントに合うように、背景レイヤー又はタイトルレイヤーなどのレイヤーを調整するために、ロックアニメーションを実行することができる。
【0095】
初期化が完了すると、システム900は、UIレイヤーをレンダリングし、ユーザー入力の受信を開始することができる。
B.ユーザー入力
この例では、システム900は、モバイルコンピューティングデバイス上のタッチスクリーンとインタラクトするユーザーからユーザー入力を受信する。システム900は、ドラッグジェスチャー、パンジェスチャー及びフリックジェスチャーなどのタッチスクリーン上の異なるジェスチャーを区別することができる。システム900はまた、ユーザーが特定の位置においてタッチスクリーンに触れるがタッチスクリーンとの接触を断つ前に指、スタイラスなどを動かさない場合などに、タップジェスチャーを検出することができる。代替手段として、いくつかの動きは、タップジェスチャーにおいてタッチスクリーンとの接触を断つ前に、小さな閾値の範囲内で許可される。システム900はまた、つまんで伸ばす(pinch-and-stretch)ジェスチャーなどのマルチタッチジェスチャーを検出することができる。
【0096】
システム900は、インタラクションを、タッチスクリーンとの当該インタラクションの性質に応じて特定のジェスチャーとして解釈する。システム900はユーザーのインタラクションから1つ又は複数の個別の入力を取得する。ジェスチャーは一連の入力から決定することができる。たとえば、ユーザーがタッチスクリーンに触れ、タッチスクリーンとの接触を維持しながら水平方向に移動を開始する場合、システム900は、パン入力を発射し、レイヤーにおいて水平方向の移動を開始する。ユーザーがタッチスクリーンとの接触を維持して移動し続けている間、システム900はパン入力を発射し続けることができる。例えば、システム900は、ユーザーがタッチスクリーンとの接触を維持しながらNピクセルだけ移動するたびに新たなパン入力をすることができる。このように、タッチスクリーン上での連続的な物理的なジェスチャーは、システム900によって一連のパン入力として解釈することができる。システムは接触位置及び移動速度を連続的に更新することができる。
【0097】
(ユーザーがタッチスクリーンとの接触を断つときなど)物理的なジェスチャーが終了すると、システム900は、タッチスクリーンとの接触を断ったときにユーザーの指、スタイラスなどがどれだけ迅速に動いていたか、及び移動速度が閾値を超えるかどうかを決定することにより、最後の動作をフリックとして解釈すべきかどうかを決定することができる。
【0098】
C.ユーザーのジェスチャーへの応答
システム900は、ジェスチャーの種類に応じて、ディスプレイ上の動き(例えば、レイヤー、リスト、又は他のUI要素の動き)を異なる方法でレンダリングすることができる。たとえば、水平方向のドラッグジェスチャー(ユーザーが現在タッチスクリーンとの接触を維持している)の場合には、システム900は、ドラッグの水平方向の距離と同じ距離だけ水平方向にコンテンツレイヤーを動かす。タイトルレイヤー及び背景レイヤーはまたドラッグに応じて移動する。移動量は、それぞれのレイヤーについての動作比率にドラッグの水平方向の動きを乗じることによって決定される。例えば、0.5の動作比率がタイトルレイヤーについて決定され、ドラッグの水平方向の距離が100ピクセルである場合、タイトルレイヤーにおける動きはドラッグの方向に50ピクセルとなる。
【0099】
(ユーザーがタッチスクリーンとの接触を断ったときにユーザーがよりゆっくりと移動していたか又は停止した)パンジェスチャーの場合、パンの量だけコンテンツレイヤーを移動し、デバイスの表示領域に対するコンテンツペインの現在位置をチェックして、コンテンツレイヤーにおいて追加の動きを実行するかどうかを決定する。たとえば、システムは、ロッキングアニメーション(つまり、ロックポイントにスナップするコンテンツレイヤーにおける動きのアニメーション)を実行することができ、現在のコンテンツペインに関連付けられる左又は右のロックポイントにコンテンツレイヤーを移動することができる。システム900は、現在のペインに関連付けられたどのロックポイントがより近くにあるかを決定して、当該より近いロックポイントへ移行することができる。別の例として、システム900は、表示領域上で部分的に見えるコンテンツペインを全体が見えるようにするために、コンテンツレイヤーを移動することができる。他のジェスチャーもまた、コンテンツペインを全体が見えるようにすることができる。例えば、垂直方向にスクロール可能なリストの左側又は右側が表示領域の外にある場合、リスト上でのジェスチャー(例えば、垂直な又は実質的に垂直なジェスチャー)は、全体のリストが見えるようになるように、コンテンツレイヤーにおける水平方向の移動(及び、必要に応じて、他のレイヤーにおける水平方向の移動)を引き起こしてもよい。レイヤーの水平方向の動きは、垂直なジェスチャーによって引き起こされるリスト内の任意の垂直方向の動きに加えてのものであってもよいが、コンテンツレイヤー及び任意の他のレイヤーの垂直方向の位置は影響を受けない。また、システム900は、コンテンツレイヤーの現在の位置を維持してもよい。
【0100】
1つの実施例において、システム900は次の手順を実行する。
1.コンテンツレイヤーにおいて、現在、以前及び次のコンテンツペインのうちのどれだけの領域を見ることができるかをチェックして、端の位置を確認する。
【0101】
2.以前のペインの右端が(左のスクリーンの端に対して)閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、以前のペインへ移行する。1つの実施例において、閾値は「バンプ閾値変位(bump threshold displacement)」と呼ばれる。
【0102】
3.次のペインの左端が(右のスクリーンの端に対して)閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、次のペインへ移行する。
4.そうでなければ、現在のペインの左端又は右端をロックポイント又は「バンプ」と合わせるためにコンテンツレイヤーを移動させることができるかどうかを決定する。現在のペインの左端が左のロックポイントに十分近い場合には、左端に現在のペインをロックする。そうではなく、現在のペインの右端が右側のロックポイントに十分近く、現在のペインが画面より広い場合は、現在のペインを右端にロックする。
【0103】
フリックジェスチャー(ユーザーがタッチスクリーンとの接触を断ったときにユーザーがより迅速に動いていた)の場合には、システム900は、フリックジェスチャーの方向及び速度に依存して、次のコンテンツペイン又は以前のコンテンツペインへとコンテンツレイヤーを進めることができる移行アニメーションを開始する。フリックの速度が十分に大きい場合、システム900は、その方向で次のコンテンツペインに移行することができる。速度が十分に大きくない場合、又は現在のコンテンツペインが広い場合、システム900は、次のコンテンツペインに実際に移行することなく、フリックの方向にコンテンツレイヤーを移動することができる。検出される(すなわち、フリックジェスチャーをパンジェスチャーと区別する)フリックの閾値速度は実施例によって変わってもよい。別のコンテンツペインへの移行を引き起こすフリックの閾値速度は実施例によって変わってもよい。
【0104】
D.非線形運動
UIレイヤーはいくつかの状況では非線形な移動速度を示す。たとえば、全体のレイヤーは状況に応じて異なる速度で移動することができ、また、レイヤーの一部は状況に応じて同じレイヤーの他の部分とは異なる速度で移動することができる。非線形の移動速度を示し得る1つのレイヤーはセクションヘッダーレイヤーである。セクションヘッダーレイヤーはいくつかのセクションヘッダーに分けることができ、各ヘッダーはコンテンツレイヤーにおける1つ又は複数のコンテンツペインに関連付けることができる。
【0105】
この例では、システム900はセクションヘッダーレイヤーを提供し、各セクションヘッダーはコンテンツペインに関連付けられる。この例において、セクションヘッダーレイヤーは、次の規則に従って移動する。
【0106】
1.コンテンツ・ペインが表示領域よりも広くない場合、ヘッダーはコンテンツペインにロックされたままである。そうではなく、コンテンツペインが表示領域よりも広い場合には規則2−4が適用される。
【0107】
2.レイヤーがペインについて左側のロックポイントにおいてロックされる場合、各ヘッダーの左端はコンテンツペインの左端と合わせられる。
3.ユーザーがコンテンツペインを左にパンする場合、ヘッダーはコンテンツペインよりも遅く移動する。これは、例えば、パンするときにユーザーがなおヘッダーの一部を見られるようにするのに役立つ。
【0108】
4.ユーザーが右にパンする場合、ヘッダーはコンテンツペインよりも速く移動する。これは、例えば、現在のペインから以前のペインへの移行があるときにヘッダーがコンテンツペインより少し速く移動するが両方とも左のロックポイントに合わせる場合に、移行の効果を可能にするために有用となり得る。
【0109】
これらの規則に従って動作を実行する際に、システム900は、変位値を計算する。最初に、最大変位が、コンテンツペインの幅とヘッダーの幅との差をとることによって計算される。最大変位を計算する際に、システム900はまた、ヘッダー内のテキストの幅だけではなく、ボタンやヘッダー内の他の機能項目(functional items)のための追加のマージンを含んでもよい。
【0110】
システム900は、次いで、左のロックポイントに対する現在のペインの左端の位置を決定することによって、実際の変位を計算する。ペインの左端が左ロックポイントの右にある場合、システム900は、ペインの左端の水平方向の位置(x座標)から、左のロックポイントの水平方向の位置(x座標)を差し引き、これは正の値aになる。ペインの左端が左ロックポイントの左にある場合は、システム900は、左ロックポイントの水平方向の位置(x座標)から、ペインの左端の水平方向の位置(x座標)を差し引き、これは正の値bとなる。値に定数を乗じるなどすることによって、値(a又はb)に対して調整をすることができる。なんらかの調整後、値(a又はb)が最大変位よりも大きい場合には、当該値の上限は最大変位となる。
【0111】
変位の計算はまた、パンアニメーションや移行アニメーションに対して使用されてもよい。後者の場合には、移行を開始する前に、ペインの最後の位置が計算され、それに基づいて、移行アニメーションで使用されるべきヘッダーの最後の位置が計算される。
【0112】
E.エッジタップ
システム900はまた、エッジタップ(edge tap)機能を実施してもよい。エッジタップにおいて、ユーザーは、(例えば、次のコンテンツペイン又は以前のコンテンツペインへの)移行を引き起こすために、表示領域の端(例えば、左端又は右端)の所与のマージン(例えば、40ピクセル)内でタップしてもよい。これは、例えば、次のペイン又は以前のペインが表示領域内で部分的に見えている場合に有用となり得る。ユーザーは、次のペイン又は以前のペインの近くでタップして、システムに、そのペインを完全に表示領域へ持ちこませることができる。
【0113】
II.拡張及び代替的な実施例
本明細書に記載の実施例に対して、様々な拡張及び代替手段が可能である。
記載された例において、コンテンツレイヤーは、通常、背景レイヤーなどの他のレイヤーよりも長いものとして説明される。システム900などのマルチレイヤーUIシステムはまた、タイトルレイヤー又は背景レイヤーなどのレイヤーが実際にはコンテンツレイヤーよりも広いようなシナリオを取り扱うことができる。そのようなシナリオでは、レイヤーにおける動きの速度は補償をするために自動的に調整することができる。たとえば、コンテンツレイヤーがタイトルレイヤーよりも短い場合、コンテンツレイヤーはタイトルレイヤーよりも遅く移動してもよい。
【0114】
記載された例においては、いくつかのレイヤーは他のレイヤーにロックされているものとして説明される。たとえば、図6A−6Eにおいて、レイヤー612の一部はコンテンツレイヤー614の一部にロックされているものとして示される。他の実施例において、いくつかのレイヤーはより柔軟に動くものとして説明される。例えば、図5A−5Dにおいて、セクションヘッダーレイヤー512のセクションは、コンテンツレイヤー514の特定の部分に関連付けられるものとして示されるが、セクションは、互いに独立して動き、コンテンツレイヤー514の一部の上で浮かぶことができる。マルチレイヤーUIシステムはこのような機能を組み合わせることができる。例えば、マルチレイヤーUIシステムは、レイヤーの他の部分が独立して動くことを可能にしつつ、当該レイヤー(例えば、セクションヘッダーレイヤーやタイトルレイヤー)のある部分をコンテンツレイヤー内のコンテンツにロックすることができる。
【0115】
マルチレイヤーシステムはまた、移行又はラッピングの効果を向上させるために、レイヤーを一緒にロックすることができる。たとえば、ラッピング中に同じ速度で背景レイヤー及びタイトルレイヤーが移動するように、背景レイヤーはタイトルレイヤーにロックされてもよい。レイヤーの有効長が異なる場合であっても、そのようなロックを行うことができる。
【0116】
記載された例は、コンテンツレイヤーなどのユーザーにとって関心があるかもしれないレイヤーの異なる位置を示す。ユーザーは、レイヤーの先頭においてマルチレイヤーUIシステムにおけるナビゲーションを開始してもよいし、又は、異なるエントリーポイントを使用してUIレイヤーのナビゲーションを開始してもよい。たとえば、ユーザーは、コンテンツレイヤーの中間、コンテンツレイヤーの最後などにおいて、ナビゲーションを開始してもよい。これは、たとえば、ユーザーが以前にレイヤーの先頭以外の位置(例えば、レイヤーの終わり)において終了した場合に有用となり、その結果、ユーザーは(例えば、ユーザーがコンテンツ画像を作動させることによって呼び出されるアプリケーションを使用した後に)以前の位置に戻ることができる。別の例として、デフォルトのロックポイントはUIレイヤーの以前の状態に基づいていてもよい。たとえば、ユーザーは、以前に見られていたレイヤーの一部に対応するロックポイントにおいてレイヤーに戻ることができる。別の例として、マルチレイヤーUIシステムは、異なるエントリーポイントを可能にするために、複数のレイヤーにおいて状態を保存したり調整を行ったりすることができる。例えば、図5Cに示すようにコンテンツレイヤー及び機能(feature)レイヤーを見ることができるような位置においてユーザーがエントリーをなす場合、マルチレイヤーUIシステムは、レイヤー510における「Application(アプリケーション)」というテキストの先頭がレイヤー512における「Feature 2」というテキストの先頭に合わせられるようにレイヤー510を調整することができる。
【0117】
III.例示的なコンピューティング環境
図10は、記載された実施例のうちのいくつかを実施することができる適切なコンピューティング環境1000の一般化された例を示す。本明細書に記載された技術及び手段は多様な汎用又は特殊目的のコンピューティング環境において実施することができるので、コンピューティング環境1000は、使用又は機能の範囲について何ら限定を示唆するものではない。
【0118】
図10を参照すると、コンピューティング環境1000は、少なくとも1つのCPU1010及び関連するメモリー1020を含む。図10において、この最も基本的な構成1030は破線内に含まれる。処理装置1010は、コンピューター実行可能命令を実行し、実際の又は仮想的なプロセッサーであってもよい。マルチプロセッシングシステムにおいては、処理能力を高めるために複数の処理装置がコンピューター実行可能命令を実行する。図10は、ビデオアクセラレーション又は他の処理に使用することができる、第2の処理装置1015(例えば、GPU又は他のコプロセッシングユニット)及び関連するメモリー1025を示す。メモリー1020、1025は、揮発性メモリー(例えば、レジスター、キャッシュ、RAM)、不揮発性メモリー(例えば、ROM、EEPROM、フラッシュ(登録商標)メモリーなど)、又はそれら2つの組み合わせであってもよい。メモリー1020、1025は、記載される技術及び手段のうちの1つ又は複数を備えるシステムを実施するためのソフトウェア1080を格納する。
【0119】
コンピューティング環境は追加の機能を有してもよい。たとえば、コンピューティング環境1000は、ストレージ1040、1つ又は複数の入力装置1050、1つ又は複数の出力装置1060、及び1つ又は複数の通信接続1070を含む。バス、コントローラー、又はネットワークなどの相互接続機構(図示せず)は、コンピューティング環境1000のコンポーネントを相互接続する。通常、オペレーティングシステムソフトウェア(図示せず)は、コンピューティング環境1000において実行される他のソフトウェアのための動作環境を提供し、コンピューティング環境1000のコンポーネントの活動を調整する。
【0120】
ストレージ1040は、取り外し可能であっても取り外し不能であってもよく、情報を格納するために使用することができ、コンピューティング環境1000内でアクセスできる、磁気ディスク、磁気テープもしくはカセット、CD−ROM、DVD、メモリーカード、又は任意の他の媒体を含む。ストレージ1040は記載される技術及び手段を実施するソフトウェア1080のための命令を格納する。
【0121】
入力装置1050は、キーボード、マウス、ペン、トラックボール又はタッチスクリーンなどのタッチ入力装置、マイクロフォン、走査装置、デジタルカメラ、又はコンピューティング環境1000に入力を提供する別のデバイスなどの音声入力装置であってもよい。動画については、入力装置1050は、ビデオカード、TVチューナーカード、アナログ形式又はデジタル形式の動画入力を受け取る同様の装置、又はコンピューティング環境1000に動画サンプルを読み込むCD−ROMもしくはCD−RWであってもよい。出力装置1060は、ディスプレイ、プリンター、スピーカー、CDライター、又はコンピューティング環境1000からの出力を提供する別の装置であってもよい。
【0122】
通信接続1070は別のコンピューティングエンティティへの通信媒体を介した通信を可能にする。通信媒体は、コンピューター実行可能命令、音声もしくは動画入出力、又は変調されたデータ信号内の他のデータなどの情報を伝達する。変調されたデータ信号は、信号中で情報を符号化するようにその特性のうちの1つ又は複数が設定又は変更された信号である。限定ではなく例として、通信媒体は、電気、光、RF、赤外線、音響、又は他の搬送波によって実施される有線又は無線の技術を含む。
【0123】
技術及び手段は、コンピューター読み取り可能な媒体の一般的なコンテキストにおいて説明することができる。コンピューター読み取り可能な媒体は、コンピューティング環境内でアクセスできる任意の利用可能な媒体である。限定ではなく例として、コンピューティング環境1000で、コンピューター読み取り可能な媒体は、メモリー1020、1025、ストレージ1040、及びそれらの組み合わせを含む。
【0124】
技術及び手段は、目標の実際の又は仮想的なプロセッサー上のコンピューティング環境において実行される、プログラムモジュールに含まれるものなどの、コンピューター実行可能命令の一般的なコンテキストにおいて説明することができる。一般に、プログラムモジュールは、特定のタスクを実行し又は特定の抽象データ型を実施する、ルーチン、プログラム、ライブラリー、オブジェクト、クラス、コンポーネント、データ構造などを含む。プログラムモジュールの機能は、様々な実施例において必要に応じて、組み合わせたり、プログラムモジュール間で分割されたりしてもよい。プログラムモジュールのためのコンピューター実行可能命令は、ローカルのコンピューティング環境又は分散コンピューティング環境内で実行されてもよい。本明細書中に記載される任意の方法は、1つ又は複数のコンピューター読み取り可能な媒体(例えば、コンピューター読み取り可能な記憶媒体や他の有形の媒体)上に符号化されたコンピューター実行可能命令によって実施することができる。
【0125】
説明のために、詳細な説明においては、コンピューティング環境におけるコンピューターの動作を説明するために「選択」及び「決定」などの用語を使用する。これらの用語は、コンピューターによって実行される動作についての高レベルの抽象的概念であり、人間によって実行される行為と混同されるべきではない。これらの用語に対応する実際のコンピューター動作は実施例に応じて異なる。
【0126】
IV.例示的な実施環境
図11は、記載された実施例、技法、及び技術を実施することができる適切な実施環境1100の一般化された例を示す。
【0127】
例示的な環境1100においては、さまざまな種類のサービス(例えば、コンピューティングサービス1112)がクラウド1110によって提供される。たとえば、クラウド1110は、インターネットなどのネットワークを介して接続される様々な種類のユーザー及びデバイスにクラウドベースのサービスを提供する、集中的に又は分散して配置され得る一群のコンピューティングデバイスを含んでもよい。クラウドコンピューティング環境1300は、コンピューティングタスクを達成するために、さまざまな方法で使用することができる。例えば、記載される技術及び手段を参照すると、ユーザー入力を処理することやユーザーインターフェースを提示することなどのいくつかのタスクは、ローカルのコンピューティングデバイス上で実行することができるが、後続の処理で使用されるデータの記憶などの他のタスクは、クラウド内の他の場所で実行することができる。
【0128】
例示的な環境1100において、クラウド1110は、様々な画面機能1120A−Nを備えた接続されたデバイスのためのサービスを提供する。接続されたデバイス1120Aは中型の画面をもつデバイスを表す。たとえば、接続されるデバイス1120Aは、デスクトップコンピューター、ラップトップ、ノートブック、ネットブックなどのパーソナルコンピューターであってもよい。接続されるデバイス1120Bは小型の画面を備えたデバイスを表す。たとえば、接続されるデバイス1120Bは、携帯電話、スマートフォン、パーソナルデジタルアシスタント、タブレットコンピューターなどであってもよい。接続されるデバイス1120Nは大型の画面を備えたデバイスを表す。たとえば、接続されるデバイス1120Nは、テレビ(例えば、スマートテレビ)又はテレビやプロジェクタースクリーンに接続される別のデバイス(例えば、セットトップボックスやゲーム機)であってもよい。
【0129】
様々なサービスを、1つ又は複数のサービスプロバイダー(図示せず)を介してクラウド1110によって提供することができる。たとえば、クラウド1110は、様々な接続されるデバイス1120A−Nのうちの1つ又は複数に、モバイルコンピューティングに関連するサービスを提供することができる。クラウドサービスは、画面サイズ、表示能力、又は特定の接続されたデバイス(例えば、接続されたデバイス1120A−N)の他の機能に合わせてカスタマイズすることができる。たとえば、クラウドサービスは、画面サイズ、入力装置、及び通常はモバイルデバイスと関連付けられる通信帯域幅の制限を考慮に入れることによって、モバイルデバイス用にカスタマイズすることができる。
【0130】
V.例示的なモバイルデバイス
図12は、1202において一般的に示される、様々なオプションのハードウェアコンポーネント及びソフトウェアコンポーネントを含む、例示的なモバイルデバイス1200を示すシステム図である。説明を容易にするために、すべての接続が示されてはいないが、モバイルデバイス内の任意のコンポーネント1202は任意の他のコンポーネントと通信することができる。モバイルデバイスは、様々なコンピューティングデバイス(例えば、携帯電話、スマートフォン、ハンドヘルドコンピューター、パーソナルデジタルアシスタント(PDA)など)のうちの任意のものであってもよく、セルラーネットワークや衛星ネットワークなどの1つ又は複数の移動通信ネットワーク1204との無線双方向通信を可能にすることができる。
【0131】
図示されるモバイルデバイスは、信号の符号化、データ処理、入出力処理、電源制御、及び/又は他の機能などのタスクを実行するためのコントローラー又はプロセッサー1210(例えば、信号プロセッサー、マイクロプロセッサー、ASIC、又は他の制御及び処理論理回路)を含んでもよい。オペレーティングシステム1212は、コンポーネント1202の割り当て及び使用、並びに1つ又は複数のアプリケーションプログラム1214に対するサポートを制御することができる。アプリケーションプログラムは、一般的なモバイルコンピューティングアプリケーション(例えば、Eメールアプリケーション、カレンダー、コンタクトマネージャー、ウェブブラウザー、メッセージアプリケーションを含む)、又は任意の他のコンピューティングアプリケーションを含んでもよい。
【0132】
図示されるモバイルデバイスはメモリー1220を含んでもよい。メモリー1220は、取り外し不能なメモリー1222及び/又は取り外し可能なメモリー1224を含んでもよい。取り外し不能なメモリー1222は、RAM、ROM、フラッシュメモリー、ディスクドライブ、又は他の周知のメモリーストレージ技術を含んでもよい。取り外し可能なメモリー1224は、フラッシュメモリー又はGSM(登録商標)通信システムにおいて知られている加入者識別モジュール(SIM)カード、又はスマートカードなどの他の周知のメモリーストレージ技術を含んでもよい。メモリー1220は、オペレーティングシステム1212及びアプリケーション1214を実行するためのデータ及び/又はコードを格納するために使用することができる。例示的なデータは、ウェブページ、テキスト、画像、音声ファイル、動画データ、又は1つもしくは複数の有線もしくは無線のネットワークを介して1つもしくは複数のネットワークサーバー又は他のモバイルデバイスとの間で送受信される他のデータセットを含んでもよい。メモリー1220は、国際移動電話加入者識別番号(IMSI)などの加入者識別子及び国際移動電話機器識別番号(IMEI)などの機器識別子を格納するために使用することができる。そのような識別子は、ユーザー及び機器を識別するためにネットワークサーバーに送信することができる。
【0133】
モバイルデバイスは、タッチスクリーン1232、マイク1234、カメラ1236、物理的なキーボード1238及び/又はトラックボール1240などの1つ又は複数の入力装置1230、並びに、スピーカー1252、ディスプレイ1254などの1つ又は複数の出力装置1250をサポートすることができる。他のあり得る出力装置(図示せず)は圧電性の又は他の触覚出力装置を含んでもよい。一部の装置は複数の入出力機能を提供することができる。たとえば、タッチスクリーン1232及びディスプレイ1254は単一の入出力装置に組み合わせることができる。
【0134】
タッチスクリーン1232はさまざまな方法で入力を受け取ることができる。例えば、物体(例えば、指先又はスタイラス)が表面にわたって流れる電流を歪ませたり遮断したりする場合、容量性タッチスクリーンはタッチ入力を検出する。別の例として、タッチスクリーンは、光センサーからのビームが遮断される場合にタッチ入力を検出する光センサーを使用してもよい。画面の表面との物理的接触は、いくつかのタッチスクリーンによって検出される入力にとっては必要がない。
【0135】
当技術分野においてよく理解されているように、無線モデム1260は、アンテナ(図示せず)に結合させることができ、プロセッサー1210と外部デバイスとの間の双方向通信をサポートすることができる。モデム1260は一般的に示されており、移動通信ネットワーク1204及び/又は他の無線ベースのモデム(例えば、ブルートゥース(登録商標)又はWi−Fi)と通信するためのセルラーモデムを含んでもよい。無線モデム1260は、通常、単一のセルラーネットワーク内での、セルラーネットワーク間での、又はモバイルデバイスと公衆交換電話網(PSSTN)との間でのデータ通信及び音声通信のためのGSM(登録商標)ネットワークなどの、1つ又は複数のセルラーネットワークとの通信用に構成される。
【0136】
モバイルデバイスは、さらに、少なくとも1つの入出力ポート1280、電源1282、全地球測位システム(GPS)受信機などの衛星ナビゲーションシステム受信機1284、加速度計1286、(アナログ信号又はデジタル信号を無線で送信するための)トランシーバー1288、並びに/又は、USBポート、IEEE1394(ファイアウォール)ポート、及び/もしくはRS−232ポートであってもよい物理的なコネクター1290を含んでもよい。コンポーネントを削除してもよく、他のコンポーネントを追加してもよいので、図示されるコンポーネント1202は必須ではなく、すべてを網羅してはいない。
【0137】
すべての例からの技術は他の例の1つ又は複数において記載された技術と組み合わせることができる。開示された技術の原則を適用することができる多くの可能な実施例を考慮して、図示された実施例が開示された技術の例であって、開示された技術の範囲に対する限定として解釈されるべきではないことを認識すべきである。そのようなものではなく、開示された技術の範囲は以下の特許請求の範囲によってカバーされるものを含む。したがって、出願人は、請求項の範囲及び趣旨に含まれるすべてのものを本願の発明として請求する。
【技術分野】
【0001】
本発明は、柔軟な平行移動及び垂直移動を備えたマルチレイヤーユーザーインターフェースに関する。
【背景技術】
【0002】
効果的なユーザーインターフェースの設計は多くの課題をもたらす。1つの課題は、ディスプレイのスペースの制限及び特定のユーザーのニーズを考慮して、最適な量の視覚情報又は機能をどのようにしてユーザーに提供するかということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型ディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、特定のアクティビティ(例えば、ファイルのライブラリーにおける音声ファイル又はビデオファイルを閲覧する)を実行しているユーザーにとって利用できる、ディスプレイに収まりきらない多くの情報がしばしば存在するためである。
【発明の概要】
【発明が解決しようとする課題】
【0003】
限られた量の利用可能なディスプレイスペース上で情報がどのように提示されるかについて細心の注意を払わない限り、ユーザーは簡単に迷ってしまいかねない。
従来の技術の利点が何であるにせよ、従来の技術は以下に示す技術及び手段の利点を有していない。
【課題を解決するための手段】
【0004】
本明細書において記載される技術及び手段は、コンピューターディスプレイ上でユーザーに対して視覚情報を提示することに関し、より具体的には、スマートフォンや他のモバイルコンピューティングデバイスにおいて見られるような小型ディスプレイ上に視覚情報を提示することに関する。特に、互いに関連する視覚情報のレイヤー(層)が異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。1つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さ(レイヤーが水平に方向付けられる場合などには、レイヤーの幅と呼んでもよい)の関数である速度で同じ方向に動く。たとえば、グラフィカルユーザーインターフェース(GUI)は、背景レイヤー、タイトルレイヤー、及びコンテンツレイヤーを含む。特定の方向に(例えば、水平方向に左から右へ)コンテンツレイヤーを通じてナビゲートするユーザーはまた、背景レイヤー及びタイトルレイヤーのうちの1つ又は複数において同じ方向での移動を引き起こす。レイヤーにおける動きの量及び性質は、レイヤー中のデータ又はレイヤーにおける対応するロックポイント間の相対距離などの1つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーよりも長い場合、コンテンツレイヤーは背景レイヤーよりも速く移動する。タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、コンテンツレイヤーの移動速度はタッチスクリーン上のジェスチャーの動きの速度と一致してもよい。
【0005】
1つの態様において、UIシステムは、少なくとも第1及び第2のレイヤーを含むGUIを表示する。第1のレイヤーにおける視覚情報の第1の部分はタッチスクリーンの表示領域内にある。UIシステムは、タッチスクリーン上のジェスチャーに対応する第1のユーザー入力を受信する。UIシステムは、ユーザー入力に少なくとも部分的に基づいて、第1の動きを計算する。第1の動きは、第1のレイヤーにおける視覚情報の第2の部分が表示領域の外にある最初の第1のレイヤーの位置から、第1のレイヤーにおける視覚情報の第2の部分が表示領域内にある現在の第1のレイヤーの位置への、第1のレイヤーの動きを含む。第1の動きは第1の移動速度(例えば、タッチスクリーン上でユーザーの指又は他の物体によりなされるジェスチャーの動きの速度に実質的に等しい移動速度)で第1の方向にある。UIシステムは、ユーザー入力に少なくとも部分的に基づいて、第1の動きと実質的に平行な第2の動きを計算する。第2の動きは、最初の第2のレイヤーの位置から現在の第2のレイヤーの位置への第2のレイヤーにおける視覚情報の動きを含む。第2の動きは第2の移動の速度で第1の方向にある。第2の移動速度は第1の移動速度とは異なる。
【0006】
第1のレイヤーは、第1の方向(例えば、水平方向)と実質的に直交する第2の方向(例えば、垂直方向)に動くように動作可能なユーザーインターフェース要素(例えば、リンクのリストなどの縦にスクロール可能な要素)を有する。 UIシステムは、タッチスクリーン上での第2のジェスチャーに対応する第2のユーザー入力を受け取り、当該第2のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き(例えば、垂直方向の動き)を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第1のレイヤーにおけるユーザーインターフェース要素の視覚情報の動きを含む。現在の要素の位置は最初の要素の位置と第2のジェスチャーの速度とに基づいて計算することができる。要素が現在の要素の位置にあるときに要素が最初の要素の位置にあって表示領域内にある場合、ユーザーインターフェース要素の視覚情報の一部は、表示領域の外にあってもよい。
【0007】
別の態様では、コンピューティングデバイスは、コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むGUIを表示する。各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第1及び第2の部分を含む。それぞれのレイヤーにおける視覚情報の第1の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の第2の部分は表示領域の外にある。コンテンツレイヤーは、表示領域内にある視覚情報の第1の部分及び表示領域外にある視覚情報の第2の部分を有する少なくとも1つのスクロール可能な要素を含む。コンピューティングデバイスは、タッチスクリーンを介して第1のユーザー入力を受信し、当該第1のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算する。コンテンツレイヤーの動きは、(a)コンテンツレイヤーにおける視覚情報の第2の部分が表示領域の外にある最初のコンテンツレイヤーの位置から(b)コンテンツレイヤーにおける視覚情報の第2の部分が表示領域内にある現在のコンテンツレイヤーの位置へのコンテンツレイヤーの動きを含む。コンピューティングデバイスは(a)から(b)への動きをアニメートする。コンテンツレイヤーの動きは、コンテンツレイヤーの移動速度で第1の方向にある。コンピューティングデバイスは第1のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算する。セクションヘッダーレイヤーの動きは、(c)セクションヘッダーレイヤーにおける視覚情報の第2の部分が表示領域外にある最初のセクションヘッダーレイヤーの位置から(d)セクションヘッダーレイヤーにおける視覚情報の第2の部分が表示領域内にある現在のセクションヘッダーレイヤーの位置へのセクションヘッダーレイヤーの動きを含む。コンピューティングデバイスは(c)から(d)への動きをアニメートする。セクションヘッダーレイヤーの動きは、セクションヘッダーレイヤーの移動速度で第1の方向にある。コンピューティングデバイスは第1のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算する。タイトルレイヤーの動きは、(e)タイトルレイヤーにおける視覚情報の第2の部分が表示領域の外にある最初のタイトルレイヤーの位置から(f)タイトルレイヤーにおける視覚情報の第2の部分が表示領域内にある現在のタイトルレイヤーの位置へのタイトルレイヤーの動きを含む。コンピューティングデバイスは(e)から(f)への動きをアニメートする。タイトルレイヤーの動きは、タイトルレイヤーの移動速度で第1の方向にある。コンピューティングデバイスは、タッチスクリーンを介して第2のユーザー入力を受信し、当該第2のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算する。スクロール可能な要素の動きは、(g)スクロール可能な要素における視覚情報の第2の部分が表示領域外にある最初のスクロール可能な要素の位置から(h)スクロール可能な要素における視覚情報の第2の部分が表示領域内にある現在のスクロール可能な要素の位置への、スクロール可能な要素における視覚情報の動きを含む。コンピューティングデバイスは(g)から(h)への動きをアニメートする。スクロール可能な要素の動きは第1の方向と実質的に直交する第2の方向にある。タイトルレイヤーの移動速度は、コンテンツレイヤーの移動速度及びセクションヘッダーレイヤーの移動速度とは異なる。コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは互いに実質的に並行であり、互いに対して重複しない。
【0008】
レイヤーはロックポイントを含んでもよい。たとえば、コンテンツペインを含むコンテンツレイヤーは、コンテンツペインの数及び/又は位置に基づいて(例えば、自動的に)決定されるロックポイントを有してもよい。ロックポイントは他の方法で設定することができる。例えば、ロックポイントは、第1のレイヤーにおけるユーザーインターフェース要素の終了位置などのレイヤーの以前の状態のうちのいくつかの側面に基づいてもよい。第2のレイヤー(例えば、背景レイヤー、タイトルレイヤー、又はセクションヘッダーレイヤー)におけるロックポイントは、第1のレイヤーのロックポイントに対応する第2のレイヤーのロックポイントを有してもよい。移動速度はロックポイント間の距離に基づいてもよい。たとえば、移動速度は第2のレイヤーのロックポイント間の距離と第2のレイヤーのロックポイントに対応する第1のレイヤーのロックポイント(例えば、コンテンツレイヤーのロックポイント)間の距離との間の差に比例してもよい。
【0009】
ロッキングアニメーション(locking animation)を実行することができる。たとえば、ロッキングアニメーションは、レイヤー内のユーザーインターフェース要素における閾値数の画素が表示領域内にあるかどうかを決定すること、及び、その決定に基づいて、ユーザーインターフェース要素が表示領域において可視であるように現在の位置からロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。別の例として、ロッキングアニメーションは、ロックポイントを選択すること、及び、現在の位置から、選択されたロックポイントが表示領域の一部と合わせられるロッキングアニメーション後の位置へのレイヤーにおける遷移をアニメートすることを含む。現在の第2のレイヤーの位置から第1のレイヤーのロッキングアニメーション後の位置に対応する第2のレイヤーのロッキングアニメーション後の位置(例えば、第2のレイヤーのロックポイントが選択された第1のレイヤーのロックポイントに合わせられる、第2のレイヤーの位置)への第2のレイヤーにおける遷移などの他の遷移は同様にアニメートすることができる。別の例として、ロッキングアニメーションは、第1のレイヤー(例えば、コンテンツレイヤー)におけるユーザーインターフェース要素(例えば、コンテンツペイン)に関連付けられた第1のレイヤーのロックポイントを選択すること、及び、現在の第1のレイヤーの位置から、選択された第1のレイヤーのロックポイントが表示領域の一部と合わせられてユーザーインターフェース要素が表示領域において可視となるような第1のレイヤーのロッキングアニメーション後の位置への、第1のレイヤーにおける遷移をアニメートすることを含む。ロッキングアニメーションはユーザーのジェスチャーに基づいて実行することができる。例えば、ロックポイントは、指をスライドさせる(フリック)ジェスチャーの速度又は軽くたたく(タップ)ジェスチャーの位置に基づいて選択することができる。
【0010】
ロッキングアニメーションはレイヤーのユーザーインターフェース要素における直交する動き(例えば、垂直方向の動き)に適応させることができる。たとえば、垂直のロッキングアニメーションは垂直にスクロール可能な要素(例えば、リスト)において実行することができ、当該垂直のロッキングアニメーションは、垂直にスクロール可能な要素におけるロックポイントが表示領域の一部と垂直に合わせられるように当該垂直にスクロール可能な要素を動かすことを含む。
【0011】
ラッピングアニメーションが実行されてもよい。たとえば、2つのレイヤーの各々が先頭と末尾を含み、これらのレイヤーの末尾が現在の位置に表示される場合、ラッピングアニメーションを実行することは、現在の第1のレイヤーの位置から第1のレイヤーの先頭が表示されるラッピングアニメーション後の第1のレイヤーの位置への第1のレイヤーにおける遷移をアニメートすること、及び、現在の第2のレイヤーの位置から第2のレイヤーの先頭が表示されるラッピングアニメーション後の第2のレイヤーの位置への第2のレイヤーにおける遷移をアニメートすることを含む。遷移をアニメートすることは、他の移動速度とは異なるラッピング移動速度で視覚情報を動かすことを含んでもよい。
【0012】
レイヤー内の動き(例えば、移動速度、方向、及び現在の位置)は、ユーザー入力に基づいて計算することができる。たとえば、現在の位置は最初の位置、ジェスチャーの方向及び速度に基づいてもよい。レイヤーにおける動きはまた、他のレイヤーの位置に基づいて計算することができる。たとえば、現在の第2のレイヤーの位置は、第1のレイヤーのロックポイントに対応する第2のレイヤーのロックポイントの位置に基づいて現在の第2のレイヤーの位置を計算することなどにより、計算された現在の第1のレイヤーの位置に基づいて計算することができる。
【0013】
ジェスチャーは、例えば、パン、ドラッグ、フリック、タップのインタラクションを含んでもよい。フリックは、ジェスチャーの動きの速度が閾値を超えるかどうかを決定することによって検出することができる。方向を示すジェスチャーは、示された方向に又はある他の方向に動きを引き起こすことができる。たとえば、水平方向のジェスチャーは、垂直又は水平方向の動きを引き起こしてもよい。
【0014】
移動速度は異なる方法で決定することができる。たとえば、レイヤーの移動速度はレイヤーの動作比率に基づいて計算することができ、動作比率は別のレイヤーの最大幅で割ったレイヤーの幅である。別の例として、移動速度は第1のレイヤーの長さと第2のレイヤーの長さの差に基づいてもよい。
【0015】
さらなるレイヤーを追加することができる。たとえば、グラフィカルユーザーインターフェースは、第1及び第2のレイヤーと実質的に平行な第3のレイヤー(又はより多くのレイヤー)を含んでもよい。レイヤーにおける移動速度はそれぞれのレイヤーの長さの違いに比例してもよい。1つの実施例において、セクションヘッダーレイヤーは表示領域内でコンテンツレイヤーより上にあり、タイトルレイヤーは表示領域内でセクションヘッダーレイヤーより上にあり、コンテンツレイヤー、セクションヘッダーレイヤー及びタイトルレイヤーは背景レイヤーと重なる。
【0016】
本発明の上記の及び他の目的、特徴及び利点は、添付の図面を参照して進められる以下の詳細な説明からより明らかになるであろう。
【図面の簡単な説明】
【0017】
【図1】1つ又は複数の記載された実施例による、ロックポイントを有する背景レイヤー及びコンテンツレイヤーを示す図である。
【図2】1つ又は複数の記載された実施例による、異なる速度で移動する複数のレイヤーをもつユーザーインターフェースを提供する例示的な技術を示すフローチャートである。
【図3A】1つ又は複数の記載された実施例による、マルチレイヤーUIシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図3B】1つ又は複数の記載された実施例による、マルチレイヤーUIシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図3C】1つ又は複数の記載された実施例による、マルチレイヤーUIシステムによって提示されるグラフィカルユーザーインターフェースにおける複数のレイヤーを示す図である。
【図3D】1つ又は複数の記載された実施例による、表示領域が横長の形状で方向付けられる、図3A−3Cの複数のレイヤーを示す図である。
【図4】1つ又は複数の記載された実施例による、UIシステムがマルチレイヤーGUIの第1の方向の動きを計算する、例示的な技術を示すフローチャートである。
【図5A】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図5B】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図5C】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図5D】1つ又は複数の記載された実施例による、異なる速度で移動することができる異なる部分を有するレイヤーをもつ、複数のUIレイヤーを示す図である。
【図6A】1つ又は複数の記載された実施例による、2つのレイヤーが並んで(in tandem)移動する複数のUIレイヤーを示す図である。
【図6B】1つ又は複数の記載された実施例による、2つのレイヤーが並んで移動する複数のUIレイヤーを示す図である。
【図6C】1つ又は複数の記載された実施例による、2つのレイヤーが並んで移動する複数のUIレイヤーを示す図である。
【図6D】1つ又は複数の記載された実施例による、2つのレイヤーが並んで移動する複数のUIレイヤーを示す図である。
【図6E】1つ又は複数の記載された実施例による、コンテンツレイヤーにおけるリストについて可能な上向き及び下向きの動きが示される、図6A−6Dの複数のUIレイヤーを示す図である。
【図7】1つ又は複数の記載された実施例による、第1の方向に直交する第2の方向に移動するように動作可能であるUI要素をもつ少なくとも1つのレイヤーを有するマルチレイヤーGUIにおいてUIシステムが第1の方向の動きを計算する例示的な技術を示すフローチャートである。
【図8A】1つ又は複数の記載された実施例による、背景レイヤーを含む複数のUIレイヤーを示す図である。
【図8B】1つ又は複数の記載された実施例による、背景レイヤーを含む複数のUIレイヤーを示す図である。
【図8C】1つ又は複数の記載された実施例による、背景レイヤーを含む複数のUIレイヤーを示す図である。
【図9】記載された実施例を実施することができるマルチレイヤーUIシステムを示す図である。
【図10】いくつかの記載された実施例を実施することができる適切なコンピューティング環境の一般的な例を示す。
【図11】1つ又は複数の記載された実施例を実施することができる適切な実施環境の一般的な例を示す。
【図12】1つ又は複数の記載された実施例を実施することができるモバイルコンピューティングデバイスの一般的な例を示す。
【発明を実施するための形態】
【0018】
互いに関連する視覚情報のレイヤーが異なる速度で動くユーザーインターフェースの異なる態様に関連する技術及び手段が記載される。1つの実施例において、レイヤーは、ユーザー入力に応答して、レイヤーの長さの関数である速度で同じ方向に移動する。たとえば、グラフィカルユーザーインターフェース(GUI)は、背景レイヤー、タイトルレイヤー、コンテンツレイヤーを含む。特定の方向(例えば、水平方向に左から右へ)にコンテンツレイヤーを介してユーザーがナビゲートすることはまた、背景レイヤー及び/又はタイトルレイヤーにおける同じ方向の動きを引き起こす。動きの量及び性質は、レイヤーの相対的な長さ、又は対応するロックポイント間の相対距離などの1つ又は複数のファクターに依存する。例えば、コンテンツレイヤーが背景レイヤーより(ピクセルの観点から)長い場合、コンテンツレイヤーは背景レイヤーより(ピクセルベースで)速く移動する。
【0019】
本明細書に記載の実施例に対する様々な代替手段が可能である。たとえば、フローチャート図を参照して説明される技術は、ある段階を繰り返したり省略したりすることなどによって、フローチャートに示される段階の順序を変えることにより、変更することができる。別の例として、システム図を参照して説明されるシステムは、ある段階を繰り返したり省略したりすることなどによって、図面に示す処理の段階の順序を変えることにより、変更することできる。別の例として、図面を参照して説明されるユーザーインターフェースは、ある特徴を省略することなどによって、図に示すユーザーインターフェースの機能の内容や配置を変えることにより、変更することができる。別の例として、いくつかの実施例が特定のデバイス及びユーザー入力機構(例えば、タッチスクリーンインターフェースを備えたモバイルデバイス)を参照して説明されるが、説明される技術及び手段は他のデバイス及び/又はユーザー入力機構とともに使用することができる。
【0020】
様々な技術及び手段を組み合わせて又は独立して使用することができる。異なる実施例は記載される技術や手段のうちの1つ又は複数を実施する。
I.階層化グラフィカルユーザーインターフェース技術及び手段
効果的なユーザーインターフェースの設計には多くの課題がある。1つの課題は、ディスプレイのスペースの制約を考慮して、最適な量の視覚情報や機能をユーザーにどのように提供するか、ということである。この課題は、スマートフォンや他のモバイルコンピューティングデバイスなどの小型のディスプレイを持つデバイスにとって特に深刻なものとなり得る。これは、しばしば、ディスプレイに収まらない、より多くの利用可能な情報や機能が存在するためである。
【0021】
互いの上にデータのレイヤーを置いて、それらが異なる方法で動くことを可能にすることによって、グラフィカルユーザーインターフェースは、ディスプレイ上で可視ではないユーザーの現在の活動に関連するより多くの情報がある場合であっても、ユーザーが見ている情報のコンテキストを提供することができる。例えば、コンテンツレイヤーは少なくともある程度独立して動くことができて、ユーザーがコンテンツレイヤーの異なる部分を視界に入るように動かしたり視界の外へ動かしたりすることを可能にするが、コンテンツレイヤーに関連付けられた別のレイヤーが当該コンテンツレイヤーよりもより少ない程度に動く場合であっても、当該コンテンツレイヤーに関連付けられた別のレイヤーのある一部は可視のままである。
【0022】
記載される技術及び手段は、グラフィカルユーザーインターフェース(GUI)などのユーザーインターフェース(UI)における情報(例えば、視覚情報、機能情報及びメタデータ)を、レイヤー(例えば、平行なレイヤー又は少なくとも実質的に平行なレイヤー)に分離すること、及び異なる方法で(例えば、異なる速度で)このようなレイヤーを移動することに関する。たとえば、説明される実施例は、互いに対して異なる速度で移動するUIレイヤーを示すマルチレイヤーUIシステムを含む。以下により詳細に記載されるように、各レイヤーにおける移動速度は、レイヤーにおいて視覚的に提示されるべきデータ(例えば、テキスト又はグラフィックス)の量、又は対応するロックポイント間の相対距離などを含む、いくつかの要因に依存し得る。レイヤーにおいて視覚的に提示されるべきデータの量は、例えば、ディスプレイ上でレンダリングされるか又はディスプレイ上での可能なレンダリングのために配置されるようなデータの水平方向に測定される長さを決定することによって測定することができる。長さはピクセル単位で又は他の適当な尺度(例えば、テキストの文字列における文字数)によって測定することができる。より大きなデータを有しより速い速度で移動するレイヤーは、より遅い速度で移動するより小さなデータ量のレイヤーよりも大きな画素数のぶんだけ前へ進むことができる。レイヤーの移動速度はさまざまな方法で決定することができる。たとえば、低速のレイヤーの移動速度は高速のレイヤーの移動速度から導くことができ、その逆も同様である。又は、レイヤーの移動速度は互いに独立して決定することができる。
【0023】
UIの様々なレイヤーの動きは、通常、ユーザーインタラクションにある程度依存する。例えば、レイヤーのある部分から別の部分に移動しようとするユーザーは、望ましい移動方向を示すためにユーザー入力を提供する。ユーザー入力は、ディスプレイ上の1つ又は複数のレイヤーにおいて動きを引き起こすことができる。いくつかの実施例では、ユーザーは、タッチスクリーンとインタラクトすることによって、デバイスの表示領域に表示されるレイヤーの動きを引き起こす。インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及び、タッチスクリーンの表面上でそれを(例えば、フリック動作又はスイープ動作によって)移動させて所望の方向にレイヤーを移動させることを含んでもよい。また、ユーザーは、キーパッド又はキーボード上のボタン(例えば、方向ボタン)を押すこと、トラックボールを動かすこと、マウスでポイントしてクリックすること、音声コマンドを行うことなどによって、いくつかの他の方法でレイヤーとインタラクトすることができる。
【0024】
ユーザーインタラクションがレイヤーにおける動きを引き起こすとき、レイヤーの動きは、通常、レイヤーの長さ並びにユーザーによって行われる動きの大きさ、移動速度及び方向の関数である。たとえば、タッチスクリーン上での左方向へのフリック動作は、表示領域に対するレイヤーの左方向への動きを生成する。レイヤーはまた、レイヤーが視覚的なコンテキストをユーザーに提供しつつ異なる速度で移動することができるように、互いに対して配置することができる。たとえば、セクションヘッダー(例えば、「履歴」などのテキスト文字列)は、コンテンツレイヤーにおける可視のコンテンツ及び画面の外のコンテンツ(例えば、現在再生しているメディアファイル及び最近再生されたメディアのリストを表す画像)にまたがって、コンテンツレイヤーとは異なる速度で移動するがコンテンツのコンテキストを提供することができる。
【0025】
実施例及び/又はユーザーの好みに応じて、ユーザー入力はレイヤーにおける異なる種類の動きを生成するために異なる方法で解釈することができる。たとえば、マルチレイヤーUIシステムは、左又は右への任意の動き、水平面よりかなり上又は下に延在する斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができ、システムはより正確な動きを要求することができる。別の例として、マルチレイヤーUIシステムは、レイヤーを移動する前に、そのレイヤーが占める表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを要求してもよいし、又はシステムは、レイヤーにおける動きを引き起こすためにタッチスクリーンの他の部分とのインタラクションを可能にすることができる。別の例として、ユーザーは、要素のリストなどの一度に画面に表示されないコンテンツレイヤーの一部において上下にスクロールするために上向き又は下向きの動きを使用することができ、そのような上向き/下向きの動きはさらに斜めの動きの効果のために左/右の動きと組み合わせることができる。
【0026】
レイヤー内の特定の動きを生成する必要があるユーザーの動きの実際の量及び方向は、実施例やユーザーの好みに応じて変わる。たとえば、マルチレイヤーUIシステムは、ユーザーの動きの大きさや移動速度(又は速度)に応じて(例えば、ピクセルの観点からの)レイヤーにおける運動量を計算するために使用されるデフォルト設定を含んでもよい。別の例として、ユーザーは、タッチスクリーン上での指先又はスタイラスの同じ動作がコントロールの設定に応じてレイヤーについてのより小さな又はより大きな動きを生成するように、タッチスクリーンの感度コントロールを調整することができる。
【0027】
いくつかの実施例では、レイヤーはロックポイントを含む。レイヤーのロックポイントは、デバイスの表示領域が整列される対応する位置を示す。たとえば、表示領域の左端が左端のロックポイント「A」にあるようにユーザーがコンテンツレイヤー上の位置に移動する場合、表示領域の左端はまた、他のレイヤーの各々における対応する左端のロックポイント「A」において合わせられる。ロックポイントはまた、表示領域の右端(右端のロックポイント)の位置合わせ、又は他の種類の位置合わせ(例えば、ロックポイントを中央に置く)を示してもよい。通常、各レイヤーにおける対応するロックポイントは、レイヤーが異なる速度で移動するということを考慮して配置される。例えば、コンテンツレイヤーにおける第1のロックポイントと第2のロックポイントとの間の距離が背景レイヤーにおける対応する第1のロックポイントと第2のロックポイントとの間の距離の2倍である場合、背景レイヤーは、2つのロックポイント間で移行するときにコンテンツレイヤーの半分の速度で移動する。
【0028】
図1に示す例において、背景レイヤー110及びコンテンツレイヤー112は、対応する左端ロックポイント 「A」、「C」、「E」及び「G」、並びに対応する右端ロックポイント「B]、「D」、「F」及び「H」を有する。左端のロックポイントは表示領域の左端(図示せず)に合わせ、右端ロックポイントは表示領域の右端に合わせる。ロックポイントに対応する左端又は右端の位置合わせは、表示領域の端とのロックポイントの正確な位置合わせを含んでもよく、又はロックポイントと表示領域のエッジとの間のある量のパディング(padding)を含んでもよい。コンテンツレイヤー112において、左端のロックポイントは、コンテンツペイン(例えば、それぞれ、コンテンツペイン120、122、124及び126)の左端に合い、右端のロックポイントはコンテンツペインの右端に合う。2つのレイヤー110、112におけるロックポイント間のマッピングは2つのレイヤー間の矢印及び背景ペイン102内の破線によって示される。
【0029】
図1に示すロックポイントは、一般的にロックポイントの完全な組を表すものではない。代替手段としてロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央のロックポイントは、表示領域の中央との位置合わせを示すことができる。別の代替手段として、より少ないロックポイントを使用することができ、又は表示可能な領域間のオーバーラップを提供するためにより多くのロックポイントを使用することができる。例えば、ロックポイントは左端又は右端ロックポイントのいずれかに限定されてもよいし、又はロックポイントはレイヤーのある部分について使用できるが他については使用できないものであってもよい。別の代替手段として、ロックポイントは省略することができる。
【0030】
レイヤー内の対応する位置を示すことに加えて、ロックポイントは他の挙動を示すことができる。例えば、ロックポイントは、ロックポイントに対応するレイヤーの一部がディスプレイ上で見えてくるときにレイヤーが移動するコンテンツレイヤーにおける位置を示すことができる。これは、例えば、画像、リスト又は他のコンテンツ要素が表示領域の左端又は右端の近くで部分的に見えるようになるときに有用となる−コンテンツレイヤーは、表示領域のエッジが適切なロックポイントと合うようにレイヤーを動かすことによって自動的にコンテンツ要素を完全に見えるようにすることができる。ロックアニメーションはフリックジェスチャーやパンジェスチャーなどのナビゲーションイベントの最後に実行することができ、特定のロックポイントにレイヤーを合わせる。ロックポイントに正確に合っていないユーザーが生成した動きをナビゲーションイベントが生成する場合、ロックアニメーションはレイヤーを合わせるために使用することができる。例として、ロックアニメーションは、(例えば、2つのコンテンツペインの一部が表示領域において可視である場合に)2つのコンテンツペイン間の位置へのコンテンツレイヤーの動きを引き起こすナビゲーションイベントの最後に実行することができる。マルチレイヤーUIシステムは、どのコンテンツペインが表示領域においてより多くのスペースを占めているかを確認することができ、ロックアニメーションを使用してそのペインへ移行することができる。これにより、レイヤーの全体像(overall look)を向上させることができ、表示領域において情報や機能(例えば、機能的なUI要素)を見えるようにするときに有効である。
【0031】
ロックポイントはまた、ナビゲーション中にロッキング「ノッチ」又は「バンプ」効果を提供するのに役立つ。例えば、ユーザーがコンテンツレイヤーの長さに沿って移動するとき、レイヤーは、ユーザーによってなされる各ナビゲーション動作(例えば、タッチスクリーン上のフリック動作やパン動作)の後に(例えば、一定の間隔で、コンテンツ要素間など)ロックポイントにおいて停止してもよい。
【0032】
様々なレイヤーの動きはコンテキストに応じて異なってもよい。たとえば、ユーザーは、コンテンツレイヤーの始めから左にナビゲートしてコンテンツレイヤーの端に到達したり、コンテンツレイヤーの端から右にナビゲートしてコンテンツレイヤーの始めに到達したりすることができる。このラッピング(wrapping)機能(特徴)は、コンテンツレイヤーを通じてナビゲートするときにより多くの柔軟性をもたらす。ラッピングはさまざまな方法でマルチレイヤーUIシステムによって扱うことができる。たとえば、ラッピングは、タイトルレイヤーや背景レイヤーなどのレイヤーの端からそのようなレイヤーの始めへの、又はその逆の、迅速な移行を示すアニメーションを生成することによって処理することができる。このようなアニメーションは、コンテンツレイヤーにおける通常のパン動作と、又はロッキングアニメーションなどの、コンテンツレイヤーにおける他のアニメーションと、組み合わせることができる。しかし、ラッピング機能は必ずしも必要ではない。
例1−複数のUIレイヤー
図2は、異なる速度で移動する複数のレイヤーを備えるユーザーインターフェースを提供する例示的な技術200を示すフローチャートである。210において、マルチレイヤーUIシステムは、(例えば、コンピューティングデバイスの表示領域において)同時に表示される平行なレイヤーを含むユーザーインターフェースを提供する。一般的に、レイヤーの少なくとも1つの少なくとも一部は表示領域に表示されない。220において、システムはレイヤーにおいて行われるべき動きを示すユーザー入力を受信する。たとえば、コンテンツレイヤーが表示領域の右端を超える場合、ユーザーは、コンテンツレイヤーの異なる部分を見るために、コンテンツレイヤーにおけるパン動作を引き起こすべくタッチスクリーンとインタラクトすることができる。230において、システムは、ユーザー入力に少なくとも部分的に応じて、異なる移動速度の平行なレイヤーにおける動きをレンダリングする。たとえば、システムは、コンテンツレイヤーを、タッチスクリーン上のパンジェスチャーの速度に等しい速度で移動させ、タイトルレイヤー及び背景レイヤーを、より遅い速度で移動させることができる。
【0033】
図3A−3Cは、表示領域300を備えたディスプレイを有するデバイスについてマルチレイヤーUIシステムによって提示されたGUIにおける、複数のレイヤー310、312、314を示す図である。表示領域300は、スマートフォンや同様のモバイルコンピューティングデバイスのディスプレイの通常の寸法を有する。図3A−3Cに示した例によれば、ユーザー302(手のアイコンで表される)は、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー314とインタラクトする。このインタラクションは、例えば、指先、スタイラス又は他の物体によってタッチスクリーンに接触すること、及びタッチスクリーンの表面上で(例えば、フリック動作又はスイープ動作によって)それを移動させることを含んでもよい。
【0034】
コンテンツレイヤー314はコンテンツ要素(例えば、コンテンツ画像330A−H)を含む。レイヤー310、312はテキスト情報(それぞれ「Category(カテゴリー)」及び「Selected Subcategory(選択されたサブカテゴリー)」)を含む。コンテンツレイヤー314の長さはレイヤー312の長さの約2倍であるように示され、レイヤー312の長さはレイヤー310の長さの約2倍であるように示される。
【0035】
図3A−3Cにおいて、ユーザー302によって引き起こされ得るレイヤーの動きの方向が、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー310、312、314の可能な動き(例えば、左又は右の水平方向の動き)を示す。
【0036】
図3A−3Cに示す例では、システムは、左又は右へのユーザーの動き、水平面より上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きを示す入力として解釈する。図3A−3Cに示す例では、コンテンツレイヤー314に対応する表示領域300の一部とユーザー302がインタラクトすることを示すが、システムは、コンテンツレイヤー314によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムは、レイヤー310、312、314における動きを引き起こすためにタッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域300の部分に相当する部分)とのインタラクションを可能にする。
【0037】
ユーザー入力が右または左への動きを示す場合、システムは、表示領域300に対するレイヤー310、312、314の右方向又は左方向の動きを生成する。レイヤー310,312、314の移動量は、レイヤーにおけるデータ及びユーザーによって行われた動きの大きさや移動速度(又は速度)の関数である。
【0038】
図3A−3Cに示す例において、レイヤー310、312、314はラッピングアニメーション中を除いて、次の規則に従って動く:
1.コンテンツレイヤー314はレイヤー312の約2倍の速度で移動し、レイヤー312はレイヤー314の約半分の長さである。
【0039】
2.レイヤー312はレイヤー310の約2倍の速度で移動し、レイヤー310はレイヤー312の約半分の長さである。
3.コンテンツレイヤー314はレイヤー310の約4倍の速度で移動し、レイヤー310はレイヤー314の約1/4の長さである。
【0040】
レイヤー310、312、314の動きは、いくつかの状況では、上記の規則とは異なる場合がある。図3A−3Cに示す例では、ラッピングが許可される。矢印は、ユーザーがコンテンツレイヤー314の先頭(図3Aに示す位置)から左にナビゲートすることができ、コンテンツレイヤー314の終端(図3Cに示す位置)から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。図3A−3Cに示す例において、レイヤー310及び312におけるテキストは、コンテンツレイヤーの先頭に巻き戻すときにより速く移動する。図3Cにおいて、表示領域300は、それぞれのテキスト文字列の末尾における、レイヤー310及び312内の、それぞれ1つ及び2つの文字の一部を示す。図3Aに示す状態へ戻るためのラッピングアニメーションは、レイヤー310、312のテキストを右から見えるようにして、図3Aに示す状態から図3Bに示す状態への移行などの他のコンテキストにおけるものよりも迅速な動きをもたらすことを含んでもよい。
【0041】
図3A−3Cにおいて、例としての左端「ロックポイント」「A」、「B」及び「C」が各レイヤーに対して示される。左端のロックポイントは、各レイヤー上の、表示領域300の左端の対応する位置を示す。たとえば、表示領域300の左端がロックポイント「A」にあるようにユーザーがコンテンツレイヤー314上の位置にナビゲートする場合、表示領域の左端はまた、図3Aに示されるように、他のレイヤー310、312のロックポイント「A」において合わせられる。図3Bにおいて、表示領域300の左端は、レイヤー310、312、314の各々におけるロックポイント「B」にある。図3Cにおいて、表示領域300の左端は、各レイヤーにおけるロックポイント「C」にある。
【0042】
図3A−3Cに示すロックポイントは、ロックポイントの完全な組を一般に表すものではなく、簡潔にするためだけにロックポイント「A」、「B」及び「C」に制限されたものである。たとえば、左端のロックポイントは、コンテンツ画像330A−330Hの各々について設定できる。代替的に、ロックポイントをほとんど使用しなくてもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端のロックポイントは表示領域300の右端との位置合わせを示してもよいし、中央のロックポイントは表示領域300の中央との位置合わせを示してもよい。
例2−表示の向きの変更
記載される技術及び手段は、横方向など、異なる方向で表示画面上で使用することができる。表示方向の変化は、例えば、UIが横長の形状に方向付けられるように(例えば、ユーザーの好みによって)構成される場合、又はユーザーがデバイスを物理的に回転させる場合に生じ得る。デバイス内の1つ又は複数のセンサー(例えば、加速度計)は、デバイスがいつ回転されたかを検出し、それに応じて表示方向を調整するために使用することができる。図3Dに示す例では、表示領域は横長の形に方向付けられ、レイヤー312及び314のみを見ることができる。ただし、コンテンツレイヤーのより多くの部分を見ることができるようになって、ユーザーが一度にコンテンツレイヤー内のより多くのコンテンツ(例えば、コンテンツ画像330A−330D)を見ることを可能にする。代替的に、必要に応じて、レイヤーの高さを低減し、フォントや画像のサイズを減らすことによるなどして、すべてのレイヤーを見続けることができるよう維持するために調整を行うことができる。例えば、レイヤー310及び312の高さを低くするとともに、テキストのフォントのサイズを対応付けて小さくすることができ、その結果、コンテンツレイヤー314をナビゲートを容易にするために同じサイズに保ちつつ、レイヤー310及び312がなお見ることができるようにすることができる。
【0043】
図3A−3Cの場合のように、ユーザー302は、コンテンツレイヤー314に沿ってナビゲートするために(横方向に)左方向又は右方向の動きをすることができる。各レイヤーにおけるロックポイント「A」、「B」及び「C」の位置づけ並びにレイヤーの相対的な長さは、コンテンツレイヤー314がその上のレイヤー312の約2倍の速度で移動することを示す。また、ロックポイントの位置及びロックポイント間の距離は、再配向(reorientation)の効果(例えば、表示領域の新たな有効幅)を考慮するように動的に調整することができる。しかし、このような調整は必ずしも必要ではない。例えば、表示領域が等しい高さと幅を有する場合、横方向への表示領域の再配向をしても表示領域の有効幅は変更されない。
例3−複数のUIレイヤーにおける動きの計算
図4は、UIシステムがマルチレイヤーGUI(例えば、図3A−3Cに示すGUI)において第1の方向(例えば、水平方向)の動きを計算する例示的な技術400を示すフローチャートである。
【0044】
410において、UIシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第1のレイヤー(例えば、コンテンツレイヤー314)における視覚情報(例えば、図3Aに示すコンテンツ画像330)の第1の部分はタッチスクリーンの表示領域(例えば、表示領域300)内にある。420において、UIシステムは、タッチスクリーン上のジェスチャーに対応するユーザー入力を受信する。430において、UIシステムは、ユーザー入力に少なくとも部分的に基づいて第1の動きを計算する。第1の動きは、第1のレイヤーにおける視覚情報の第2の部分(例えば、コンテンツ画像330C)が表示領域の外にある最初の第1のレイヤーの位置(例えば、図3Aに示す位置)から、第1のレイヤーにおける視覚情報の第2の部分が表示領域内にある現在の第1のレイヤーの位置(例えば、図3Bに示す位置)への、第1のレイヤーの動きである。第1の動きは、第1の移動速度で第1の方向(例えば、右方向、水平方向)である。第1の移動速度はジェスチャーの動きの速度に基づく。たとえば、第1の移動速度は、タッチスクリーン上のコンテンツを直接的に操作する感覚をユーザーに与えるために、ジェスチャーの動きの速度(例えば、タッチスクリーン上のユーザーの指や他の物体の移動速度)と実質的に等しくすることができる。440において、UIシステムは、ユーザー入力に少なくとも部分的に基づいて、第1の動きと実質的に平行な第2の動きを計算する。第2の動きは、最初の第2のレイヤーの位置(例えば、図3Aに示す位置)から現在の第2のレイヤーの位置(例えば、図3Bに示す位置)への第2のレイヤー(例えば、レイヤー312)における視覚情報の動きである。第2の動きは、第1の移動速度とは異なる第2の移動速度で第1の方向(例えば、右方向、水平方向)にある。
【0045】
動きは(例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での)表示のためにアニメート及び/又はレンダリングすることができる。
例4−変化する速度で動く個々のレイヤー
図5A−5Dは、セクションヘッダーレイヤー512の異なる部分がコンテンツレイヤー514の異なる部分に関連付けられる、3つのレイヤー510、512、514を備えたマルチレイヤーUIシステムによって提示されるGUIを示す図である。図5A−5Dに示す例によれば、ユーザー(図示せず)はコンテンツレイヤー514とインタラクトする。たとえば、ユーザーは、コンテンツレイヤー内の異なるセクション(例えば、セクション1a、1b、1c、1d、2a、2b、2c、又は2d)を強調するためにナビゲーションボタン(図示せず)を押すことによって、コンテンツレイヤー514をナビゲートする。また、ユーザーは、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー514とインタラクトする。当該インタラクションは、例えば、指先、スタイラス又は他の物体によりタッチスクリーンに接触すること、及びタッチスクリーンの表面上で(例えば、フリック動作又はスイープ動作によって)それを移動させることを含んでもよい。
【0046】
コンテンツレイヤー514は、画像、アイコン、テキスト文字列やリンクのリスト、又はいくつかの他のコンテンツであってもよいセクション1a、1b、1c、1d、2a、2b、2c、及び2dを含む。他のレイヤー510、512はテキスト情報を含む。セクションヘッダーレイヤー512は2つのテキスト文字列(「Feature 1(機能1)」及び「Feature 2(機能2)」)を含む。「Feature 1」はセクション1a、1b、1c及び1dに関連付けられる。「Feature 2」はセクション2a、2b、2c及び2dに関連付けられる。レイヤー510は1つのテキスト文字列(「Application(アプリケーション)」)を含む。コンテンツレイヤー514の長さは、セクションヘッダーレイヤー512の全体の長さ(例えば、2つの文字列の合計の長さ)より長く、レイヤー510の長さより長くなるように示される。
【0047】
図5A−5Dにおいて、ユーザーによって示すことができる動きの方向は、表示領域300の上の左向き矢印及び右向き矢印で示される。これらの矢印は、ユーザー入力に応答するレイヤー510、512、514の可能な動き(左又は右の水平方向の動き)を示す。
【0048】
図5A−図5Dに示す例では、ユーザーは、コンテンツレイヤー514において左又は右にナビゲートするときに、コンテンツレイヤー514の異なるセクション(例えば、図5Aのセクション1a、図5Bのセクション1d、図5Cのセクション2a、図5Dのセクション2d)を強調表示する。ユーザー入力が右又は左への動きを示す場合、システムは、表示領域300に対するレイヤー510、512、514の右方向又は左方向の動きを生成する。レイヤー510、512、514の移動量はレイヤー内のデータ及びユーザーによって行われる動きの大きさや移動速度(又は速度)の関数である。
【0049】
図5A−5Dにおいて、例示的な右端ロックポイント「A」、「B」、「C」及び「D」が各レイヤー510、512、514について示される。各レイヤーの右端ロックポイントは、各レイヤーの表示領域300の右端の対応する位置を示す。たとえば、ユーザーがコンテンツレイヤー514のセクション1aにナビゲートする場合、表示領域300の右端はロックポイント「A」にあり、表示領域300の右端は、図5Aに示すように、他のレイヤー510、512のロックポイント「A」において合わせられる。図5Bにおいて、表示領域300の右端は、レイヤー510、512、514の各々のロックポイント「B」にある。図5Cにおいて、表示領域300の右端は、レイヤー510、512、514の各々のロックポイント「C」にある。図5Dにおいて、表示領域300の右端は、レイヤー510、512、514の各々のロックポイント「D」にある。
【0050】
図5A−5Dに示すロックポイントは、ロックポイントの完全な組を一般的に示すものではなく、単に簡潔にするためにロックポイント「A」、「B」、「C」及び「D」に限定されたものである。たとえば、左端ロックポイントはコンテンツレイヤー514における1つ又は複数のセクションに対して設定することができる。代替的に、追加の右端のロックポイントを使用してもよく、より少ないロックポイントを使用してもよく、ロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。たとえば、中央ロックポイントを、表示領域300の中央に合わせるために使用することができる。
【0051】
図5A−図5Dに示す例では、レイヤー510、512、514は、ラッピングアニメーション中を除き、次の規則に従って動く。
1.セクションヘッダーレイヤー512における「Feature 1(機能1)」というテキスト文字列に関連付けられるコンテンツレイヤー514の部分(セクション1a、1b、1c及び1d)は、「Feature 1」というテキスト文字列の約4倍の速度で移動する。「Feature 1」というテキスト文字列は、「Feature 1」というテキスト文字列に関連付けられるコンテンツレイヤー514の部分(セクション1a、1b、1c及び1d)の約半分の長さであり、コンテンツレイヤー514において右端ロックポイント「A」から右端ロックポイント「B」まで移動するべき距離はセクションヘッダーレイヤー512における対応するロックポイント間の距離の約4倍の長さとなる。同様に、セクション・ヘッダーレイヤー512の「Feature 2(機能2)」というテキスト文字列に関連付けられたコンテンツレイヤー514の部分(セクション2a、2b、2c及び2d)は「Feature 2」というテキスト文字列の約4倍の速度で移動する。
【0052】
2.セクションヘッダーレイヤー512における「Feature 1」というテキスト文字列に関連付けられたコンテンツレイヤー514の部分(セクション1a、1b、1c及び1d)を通じてナビゲートする場合、テキスト文字列「Feature 1」はレイヤー510の約2倍の速度で移動する。「Feature 1」というテキスト文字列はレイヤー510におけるテキスト文字列「Application(アプリケーション)」とほぼ同じ長さであるが、レイヤー510において右端ロックポイント「A」から右端ロックポイント「B」に移動するべき距離は、セクションヘッダーレイヤー512内の対応するロックポイント間の距離の約半分である。同様に、セクションヘッダーレイヤー512におけるテキスト文字列「Feature 2」に関連付けられるコンテンツレイヤー514の部分(セクション2a、2b、2c及び2d)を通じてナビゲートするとき、「Feature 2」というテキスト文字列はレイヤー510の約2倍の速度で移動する。
【0053】
3.セクションヘッダーレイヤー512内のテキスト文字列「Feature 1」に関連付けられたコンテンツレイヤー514の部分からセクションヘッダーレイヤー512のテキスト文字列「Feature 2」に関連付けられたコンテンツレイヤー514の部分に(すなわち、図5Bに示すセクション1dから図5Cに示すセクション2aに)移動するとき、セクションヘッダーレイヤー512は、図5Cにおけるレイヤー512の右端ロックポイント「B」と右端ロックポイント「C」との間の距離によって示されるように、より速く移動する。
【0054】
4.コンテンツレイヤー514はレイヤー310の約8倍の速度で移動する。コンテンツレイヤー514における隣接する右端ロックポイント間で(例えば、「A」から「B」まで)移動する距離は、レイヤー510内の対応する右端ロックポイント間の距離の約8倍の長さとなる。
【0055】
レイヤー510、512、514における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図5A−図5Dに示す例では、ラッピングが可能となる。表示領域300の上の矢印は、ユーザーが、コンテンツレイヤー514の先頭(図5Aに示す位置)から左にナビゲートすることができ、コンテンツレイヤー514の端(図5Dに示す位置)から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。たとえば、図5Dに示す状態から図5Aに示す状態へ戻るためのラッピングアニメーションは、レイヤー510、512のテキストを右から視界にもたらすことを含み、図5Aに示す状態から図5Bに示す状態への移行などの他のコンテキストにおけるものよりもより速い移動に帰着する。
例5−並行のレイヤー移動
図6A−6Dは、レイヤー614の上のレイヤー612と並行に(すなわち、同じ方向及び同じ速度で)動くコンテンツレイヤー614を含むマルチレイヤーUIシステムによって提示されるGUIを示す図である。この例では、(手のアイコンで表される)ユーザー302は、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー614を介してナビゲートする。当該インタラクションは、例えば、指先、スタイラス又は他の物体でタッチスクリーンに接触すること、及びタッチスクリーンの表面上で(例えば、フリック動作又はスイープ動作により)それを動かすことを含んでもよい。
【0056】
コンテンツレイヤー614は、(以下でより詳細に説明される)ゲームの画像640、642、644、リスト650、652、654、及びアバター630を含む。他のレイヤー610、612は、テキスト情報(レイヤー610の「Games(ゲーム)」、レイヤー612の「Spotlight(スポットライト)」、「Xbox Live」、「Requests(リクエスト)」及び「Collection(コレクション)」)を含む。図6A−6Dにおいて、例示的なロックポイント「A」、「B」、「C」及び「D」がレイヤー610及び612について示される。水平方向の動きの観点では、コンテンツレイヤー614はレイヤー612にロックされ、レイヤー612について示されるロックポイントはまた、レイヤー614に適用される。
【0057】
各レイヤーのロックポイントは、各レイヤーの表示領域300の左端の対応する位置を示す。たとえば、表示領域300の左端がロックポイント「A」にあるようにユーザーがコンテンツレイヤー614上の位置にナビゲートするとき、表示領域300の左端はまた、図6Aに示すように、他のレイヤー610、612のロックポイント「A」に合わせられる。図6Bにおいて、表示領域300の左端は、レイヤー610、612、614の各々のロックポイント「B」にある。図6Cにおいて、表示領域300の左端は、レイヤー610、612、614の各々のロックポイント「C」にある。図6Dにおいて、表示領域300の左端は、レイヤー610、612、614の各々のロックポイント「D」にある。
【0058】
図6A−6Dに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、単に簡潔にするためにロックポイント「A」、「B」、「C」及び「D」に限定されたものである。例えば、右端ロックポイントを表示領域300の右端と合わせるために追加することができ、表示領域300の中央と合わせるために中央ロックポイントを追加することができる。代替的に、より少ないロックポイントを使用してもよく、より多くのロックポイントを使用してもよく、ロックポイントを省略してもよい。
【0059】
ユーザー302によってレイヤー610、612、614において引き起こされ得る動きの方向は、図6A−6Dにおける左向きの矢印及び右向きの矢印で示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー610、612、614の可能な動き(左又は右の水平方向の動き)を示す。システムは、左又は右へのユーザーの動き、水平面の上又は下に伸びる斜めの動きでさえ、レイヤーの有効な左方向又は右方向の動きとして解釈することができる。図6A−6Eに示す例はコンテンツレイヤー614に対応する表示領域300の一部とユーザー302がインタラクトすることを示すが、システムは、コンテンツレイヤー614によって占められる表示領域に対応するタッチスクリーンの一部とユーザーがインタラクトすることを必ずしも必要としない。代わりに、システムはまた、レイヤー610、612、614において動きを引き起こすために、タッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域に対応する部分)とのインタラクションを可能にする。
【0060】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域300に対する、レイヤー610、612、614の左方向又は右方向の動きを生成する。この例では、レイヤー610、612、614の水平移動量は、レイヤー内のデータやユーザーによって行われる動きの大きさや速度の関数である。レイヤー610、612、614はラッピングアニメーション中を除いて次の規則に従って水平方向に動く。
【0061】
1.コンテンツレイヤー614の水平方向の動きはレイヤー612にロックされる。
2.レイヤー612及び614はそれぞれ、レイヤー610の約3倍の速度で水平に移動し、レイヤー610はレイヤー612及び614の約1/3の長さである。
【0062】
レイヤー610、612、614における動きは、いくつかの状況では、上記の規則とは異なる場合がある。図6A−6Eに示す例では、ラッピングが可能となる。矢印は、ユーザーがコンテンツレイヤー614の先頭(図6A及び図6Eに示す位置)から左にナビゲートすることができ、コンテンツレイヤー614の端(図6Dに示す位置)から右にナビゲートすることができることを示す。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の移動中よりも速く又は遅く移動してもよい。図6A及び6Dに示す例では、コンテンツレイヤー614の先頭に戻ってラッピングするとき、レイヤー610内のテキストはより速く動く。図6Dにおいて、表示領域300は、「Games」というテキスト文字列の末尾の、レイヤー610における2文字の一部を示す。図6Aに示す状態へ戻るためのラッピングアニメーションは、レイヤー610のテキストを含むレイヤー610、612、614のデータを右から視界にもたらすことを含み、図6Aに示す状態から図6Bに示す状態への移行などの他のコンテキストにおけるものよりもより速いレイヤー610における動きに帰着する。
例6−レイヤーの要素の動き
全体のレイヤーの動きに加えて、ユーザーはまた、レイヤー内のデータ及びレイヤーがどのように配置されるかに応じて、レイヤーの要素又は部分における動きを引き起こすことができる。たとえば、ユーザーは、全体としてレイヤーにおいて引き起こされ得る動き(例えば、水平方向の動き)に対して直交する又は実質的に直交する、レイヤーの要素(例えば、リスト)における動き(例えば、垂直方向の動き)を引き起こすことができる。リストが表示領域に表示することができるものよりも多くの情報を含む場合などには、水平に動くレイヤー内のレイヤー要素の直交する動きはコンテンツレイヤーに埋め込まれたリスト内の縦スクロールを含んでもよい。また、縦に動くレイヤーを提示するシステムは、レイヤーの要素における水平の動きを可能にし得る。
【0063】
図6A及び図6Eにおいて、コンテンツレイヤー614内のリスト650は、表示領域300において表示され得るものよりも多くの情報を含む。システムは、垂直面の左又は右へと延びる斜めの動きを含むユーザー302によってなされる上下の動きを、リスト650の有効な上向き又は下向きの動きとして解釈することができる。リスト650の移動量は、ユーザー302によってなされる動作の大きさ又は速度とリスト650内のデータとの関数であってもよい。したがって、リスト650のスクロールは、項目ごと、項目のページごと、又は動きの大きさや速度に依存する中間のものであってもよい。この例では、リスト650は、図6Aの表示領域300において見ることができない唯一のリスト項目を含み、したがって、小さな又は大きな下向きの動きの範囲はリスト650の最後までスクロールするのに十分なものとなり得る。図6A及び図6Eに示すように、レイヤー内の他の視覚的情報(例えば、リスト650の外のコンテンツレイヤー614における視覚情報又は他のレイヤー内の視覚情報)の垂直方向の位置は、上向き又は下向きの動きに影響されない。この例では、(全体としてレイヤーに影響を与えるラッピングアニメーション及びロッキングアニメーションを含む)全体としてのレイヤーの動きは、水平方向の動き(モーションの主軸)に制限される。リスト650は、全体としてのレイヤー内の動きに直交する第2の軸に沿った動き(例えば、垂直方向の動き)を可能にするレイヤー内のユーザーインターフェース要素の例である。
【0064】
図6A及び6Eは、コンテンツレイヤー614におけるリスト650に対応する表示領域300の一部とユーザー302がインタラクトすることを示す。また、システムは、リスト650において上方又は下方への移動を引き起こすために、タッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域300の部分に相当する部分)とのインタラクションを可能にしてもよい。
【0065】
ユーザー302によって引き起こされ得る動きの方向は、図6Aにおける追加の下向きの矢印及び図6Eにおける追加の上向き矢印と一緒に、図6A及び図6Eにおける左向きの矢印及び右向きの矢印によって示される。右向き及び左向きの矢印は、ユーザーの動きに応答するレイヤー610、612、614の可能な動きを(左又は右の水平方向の動き)示す。下向き及び上向きの矢印は、ユーザーの動きに応答するリスト650の可能な動き(上又は下の垂直方向の動き)を示す。ユーザー302は、リスト650における上又は下の動作を行った後、コンテンツレイヤー614において右又は左に移動することができる。リスト650からコンテンツレイヤー614において左又は右にナビゲートするときに、リスト650の現在の位置(例えば、図6Eに示されるリスト最下部の位置)を保存することができ、また、システムはデフォルトの位置(例えば、図6Aに示されるリスト最上部の位置)に戻ることができる。可能な動きを示す図6A−6E(及び他の図)における矢印は説明の目的のために示されるが、表示領域300はそれ自体が、レイヤー及び/又はリストについて可能な動きについてのグラフィカルな指標(矢印やシェブロンなど)を表示してもよい。
【0066】
例7−直交する動きが可能な要素を備えたレイヤーにおける動作
図7は、第1の方向と直交する(又は実質的に直交する)第2の方向に移動するように動作可能であるUI要素を備えた少なくとも1つのレイヤーを有するマルチレイヤーGUI(例えば、図6A−6Eに示すGUI)において第1の方向(例えば、水平方向)の動きをUIシステムが計算する例示的な技術700を示すフローチャートである。
【0067】
710において、UIシステムは、複数のレイヤーを含むグラフィカルユーザーインターフェースを表示する。第1のレイヤー(例えば、コンテンツレイヤー614)は第1の方向(例えば、水平方向)と実質的に直交する第2の方向(例えば、垂直方向)に移動するように動作可能なユーザーインターフェース要素(例えば、リスト650)を含む。第1のレイヤーにおける視覚情報の第1の部分(例えば、図6Bに示すリスト652)は、タッチスクリーンの表示領域(例えば、表示領域300)内にある。
【0068】
720において、UIシステムは、タッチスクリーン上の第1のジェスチャーに対応する第1のユーザー入力を受信する。730において、UIシステムは、第1のユーザー入力に少なくとも部分的に基づいて、第1の動きを計算する。第1の動きは、第1のレイヤーにおける視覚情報(例えば、リスト650)の第2の部分が表示領域の外にある最初の第1のレイヤーの位置(例えば、図6Bに示す位置)から、第1のレイヤーにおける視覚情報の第2の部分が表示領域内にある現在の第1のレイヤーの位置(例えば、図6Aに示す位置)への、第1のレイヤーの動きである。第1の動きは、第1の移動速度で第1の方向(例えば、左向きの水平方向)である。740において、UIシステムは、第1のユーザー入力に少なくとも部分的に基づいて、第1の動きと実質的に平行な第2の動きを計算する。第2の動きは、最初の第2のレイヤーの位置(例えば、図6Bに示す位置)から現在の第2のレイヤーの位置(例えば、図6Aに示す位置)への第2のレイヤーにおける視覚情報の動きである。第2の動きは、第1の移動速度とは異なる第2の移動速度で第1の方向(例えば、左向きの水平方向)にある。
【0069】
750において、UIシステムは、タッチスクリーン上の第2のジェスチャーに対応する第2のユーザー入力を受信する。760において、UIシステムは、第2のユーザー入力に少なくとも部分的に基づいて実質的に直交する動き(例えば、垂直方向の動き)を計算する。実質的に直交する動きは、最初の要素の位置から現在の要素の位置への第1のレイヤーのユーザーインターフェース要素の視覚情報の動きである。
【0070】
実質的に直交する動きは、最初の垂直位置(例えば、図6Aに示すようなリスト650の位置)から現在の垂直位置(例えば、図6Eに示すようなリスト650の位置)への垂直方向にスクロール可能な要素(例えば、リスト650)の視覚情報の動きであってもよい。現在の垂直位置は、例えば、最初の垂直位置及び第2のジェスチャーの速度に基づいて計算することができる。垂直にスクロール可能な要素の視覚情報の一部は、垂直方向にスクロール可能な要素が最初の垂直位置(例えば、図6Aに示すようなリスト650の位置)にあるときには表示領域の外にあってもよく、垂直にスクロール可能な要素が現在の垂直位置(例えば、図6Eに示すようなリスト650の位置)にあるときには表示領域内にあってもよい。
【0071】
動きは、(例えば、携帯電話や他のコンピューティングデバイスのタッチスクリーン上での)表示のためにアニメート及び/又はレンダリングすることができる。
例8−アバター
レイヤーは、レイヤーにおける他の要素又はレイヤーのセクションなどの他の要素間の関係を示す要素を含んでもよい。他の要素間の関係を示す要素は、別々のレイヤーに含まれてもよいし、又はそれぞれの他の要素と同じレイヤーに含まれてもよい。例えば、アバターレイヤーは、ユーザーに関連する別のレイヤーにおける2つの関連するセクションにまたがる範囲の動きを備えた視覚的な要素(アバター)を含んでもよい。他の要素はまた、要素間の関係を示すために使用することができる。たとえば、音楽アーティストの画像は、アーティストのアルバムリストとアーティストのツアー日程のリストとの間の関係を示すために使用されてもよい。
【0072】
図6A−6Eにおいて、アバター630は、コンテンツレイヤーにおけるリスト652、654、及びレイヤー612におけるリスト652、654の上の見出し(それぞれ、「Xbox Live」及び「Requests(リクエスト)」)に関連付けられる。アバター630は、コンテンツレイヤーの一部(例えば、リスト652、654)の間の関係を示したりコンテンツレイヤーの一部に対する関心を引いたりするための視覚的な指示(cue)を提供することができる。図6Bにおいて、アバター630はリスト652とリスト654との間に配置される。図6Cにおいて、アバター630はリスト654のテキストの後ろに浮いているが、表示領域300内に完全に残ったままである。図6Dにおいて、アバター630は部分的にのみ表示領域300内にあり、表示領域内にある部分はゲームアイコン640、642、644の背後にある。表示領域300の左端にアバター630を配置することは、ユーザー302に対して、ユーザー302がアバター630の方向にナビゲートする場合にはアバター630に関連付けられた情報(例えば、リスト652、654)が利用可能であることを示すことができる。アバター630は様々な速度で移動することができる。たとえば、アバター630は、図6Cと6Dとの間の移行の場合と比べて、図6Bと6Cとの間の移行においてより速く移動する。
【0073】
代替的に、アバター630は、異なる方法で移動したり、他の機能を示したりすることができる。たとえば、アバター630は、コンテンツレイヤー614又はある他のレイヤーにおける特定の位置(例えば、ロックポイント)にロックすることができ、その結果、アバター630はそれがロックされているレイヤーと同じ水平速度で動く。別の代替手段として、アバター630は、リスト650などの上下にスクロールすることができるリストに関連付けることができ、当該関連付けられるリストが上下にスクロールするときに上下に動くことができる。
【0074】
例9−背景レイヤー
図8A−8Cは、3つのレイヤー310、312、314及び背景レイヤー850を備えたマルチレイヤーUIシステムによって提示されるGUIを示す図である。この例では、(手のアイコンで表される)ユーザー302は、表示領域300を有するタッチスクリーンとインタラクトすることにより、コンテンツレイヤー314とインタラクトする。
【0075】
背景レイヤー850は他のレイヤーの背後に浮かんでいる。背景レイヤー850において視覚的に提示されるデータは、例えば、表示領域300の境界を超えて延在する画像を含んでもよい。コンテンツレイヤー314は、コンテンツ要素(例えば、コンテンツ画像330A−H)を含む。レイヤー310、312は、テキスト情報(それぞれ、「Category(カテゴリー)」及び「Selected Subcategory(選択したサブカテゴリー)」)を含む。コンテンツレイヤー314の長さはレイヤー312の約2倍の長さになるように示され、レイヤー312の長さはレイヤー310の約2倍の長さであることが示される。背景レイヤー850の長さはレイヤー312の長さよりわずかに小さくなるように示される。
【0076】
図8A−8Cにおいて、ユーザー302によってレイヤー310、312、314、850において引き起こされ得る動きの方向は、左向き矢印と右向き矢印で示される。これらの矢印は、ユーザーの動きに応答して、レイヤー310、312、314、850の可能な動き(左又は右の水平方向の動き)を示す。この例において、システムは、左又は右へのユーザーの動き、さらには水平面の上又は下に延びる斜めの動きを、レイヤーの有効な左向き又は右向きの動きとして解釈する。図8A−8Cはコンテンツレイヤー314に対応する表示領域300の一部とユーザーがインタラクトすることを示すが、システムはまた、タッチスクリーンの他の部分(例えば、他のレイヤーが占める表示領域300の部分に対応する部分)とのインタラクションがレイヤー310、312、314、850における動きを引き起こすことを可能にする。
【0077】
ユーザー入力が右又は左への動きを示す場合、システムは、表示領域300に対するレイヤー310、312、314、850の右方向又は左方向の動きを生成する。レイヤー310、312、314、850の移動量は、レイヤー内のデータとユーザーによって行われた動きの大きさ又は移動速度(又は速度)との関数である。
【0078】
図8A−8Cにおいて、例示的な左端のロックポイント「A」、「B」及び「C」が、レイヤー310、312、314、850に対して示される。左端のロックポイントは、各レイヤーの表示領域300の左端の対応する位置を示す。たとえば、表示領域300の左端がロックポイント「A」にあるようにユーザーがコンテンツレイヤー314上の位置にナビゲートする場合、表示領域300の左端はまた、図8Aに示すように、他のレイヤー310、312、850のロックポイント「A」において合わせられる。図8Bにおいて、表示領域300の左端は、レイヤー310、312、314、850の各々のロックポイント「B」にある。図8Cにおいて、表示領域300の左端は、レイヤー310、312、314、850の各々のロックポイント「C」にある。
【0079】
図8A−8Cに示すロックポイントは、ロックポイントの完全な組を一般的に表すものではなく、簡潔にするためにのみロックポイント「A」、「B」及び「C」に制限されるものである。たとえば、左端のロックポイントは、コンテンツ画像330A−330Hの各々について設定することができる。また、より少ないロックポイントを使用してもよく、又はロックポイントを省略してもよい。別の代替手段として、ロックポイントは他の種類の位置合わせを示してもよい。例えば、右端ロックポイントは表示領域300の右端との位置合わせを示してもよいし、中央ロックポイントは表示領域300の中央との位置合わせを示してもよい。
【0080】
この例では、レイヤー310、312、314、850は、ラッピングアニメーション中を除き、次の規則に従って移動する。
1.コンテンツレイヤー314はレイヤー312の約2倍の速度で移動し、レイヤー312はレイヤー314の約半分の長さである。
【0081】
2.レイヤー312はレイヤー310の約2倍の速度で移動し、レイヤー310はレイヤー312の約半分の長さである。
3.コンテンツレイヤー314はレイヤー310の約4倍の速度で移動し、レイヤー310はレイヤー314の約1/4の長さである。
【0082】
4.背景レイヤー850はレイヤー310よりも遅く移動する。背景レイヤー850はレイヤー310よりも長いが、レイヤー310における隣接するロックポイント(例えば、ロックポイント「A」と「B」)の間で移動する距離は、背景レイヤー850における対応するロックポイント間の距離よりも大きい。
【0083】
レイヤー310、312、314、850の動きは、いくつかの状況では、上記の規則とは異なる場合がある。この例では、ラッピングが可能となる。ユーザー302は、コンテンツレイヤー314の先頭(図8Aに示す位置)から左にナビゲートすることができ、コンテンツレイヤー314の終端(図8Cに示す位置)から右にナビゲートすることができる。ラッピングアニメーション中、いくつかのレイヤーは、他の種類の動作中よりも速く又は遅く移動してもよい。この例において、背景レイヤー850における画像並びにレイヤー310及び312におけるテキストは、ユーザー入力がコンテンツレイヤー314の先頭への巻き戻しを引き起こす場合により速く移動する。図8Cにおいて、表示領域300は、それぞれのテキスト文字列の末尾における、レイヤー310及び312内の、それぞれ1つ及び2つの文字の一部を示す。表示領域300はまた、背景レイヤー850における画像の最も右の部分を示す。図8Aに示す状態へ戻るためのラッピングアニメーションは、背景レイヤー850の画像の最も左の部分及びレイヤー310、312のテキストの先頭を右から見えるようにすることを含んでもよい。これにより、図8Aに示す状態から図8Bに示す状態への移行などの他のコンテキストにおけるものよりもより迅速な、レイヤー310、312及び850における動きがもたらされる。
【0084】
例10−マルチレイヤーUIシステム
図9は、デバイス(例えば、スマートフォンや他のモバイルコンピューティングデバイス)上で複数のUIレイヤーを提示する例示的なマルチレイヤーUIシステム900を示すシステム図である。システム900は、他の例で説明する機能又は他の機能を実施するために使用することができる。
【0085】
この例では、システム900は、平行なUIレイヤーの表示を制御するレイヤーコントロール920にハブページの宣言的記述を提供するハブモジュール910を含む。レイヤーコントロール920はまた、「パノラマ」又は「パノ(pano)」コントロールとも呼ばれる。UIレイヤーがパノラマ式の又は水平な方法で移動するときにそのような記述を使用することができる。また、レイヤーコントロール920は、垂直に又は他の方法で移動するUIレイヤーを制御する。レイヤーコントロール920は、マークアップジェネレーター930及びモーションモジュール940を含む。
【0086】
この例において、レイヤーコントロール920は、UI要素のいくつかのレイヤー、たとえば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤーを制御する。コンテンツレイヤーはコンテンツペインの組を含む。コンテンツペインは、例えば、視覚的に提示される、画像、グラフィカルなアイコン、リスト、テキスト、又は他の情報を含んでもよい。コンテンツレイヤーにおけるコンテンツペインの組はコンテンツペインの「世代(ジェネレーション)」と呼んでもよい。また、レイヤーコントロール920は、3つのレイヤーより多くの又は少ないレイヤーを制御し、又は異なる種類のレイヤーを制御する。ハブページの宣言的記述は、UI要素を定義する情報を含む。マルチレイヤーUIシステムでは、UI要素は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、コンテンツレイヤーなどの複数のレイヤーを含んでもよい。ハブページの宣言型記述は、スタイル情報及び/又は設定プロパティなどの他の情報と共に、マークアップジェネレーター930に提供される。マークアップジェネレーター930は、UIレイヤーをレンダリングするために使用できるマークアップを生成する。モーションモジュール940は、ユーザー入力に応答して生成されたイベント(例えば、直接的なUI操作イベント)を受け取り、動作コマンドを生成する。動作コマンドはマークアップととともにUIフレームワーク950に提供される。UIフレームワーク950において、マークアップ及び動作コマンドは、デバイスのオペレーティングシステム(OS)960に送信されるべきUIレンダリング要求を生成するレイアウトモジュール952において受信される。デバイスOS960は、レンダリング要求を受信し、レンダリングされたUIをデバイス上のディスプレイへ出力させる。ハブモジュール910、レイヤーコントロール920、及びUIフレームワーク950などのシステムコンポーネントはまた、デバイスOS960の一部として実施することができる。1つの実施例において、デバイスOS960はモバイルコンピューティングデバイスのOSである。
【0087】
ユーザー(図示せず)はUIが表示される方法に影響を与えるユーザー入力を生成することができる。図9に示す例では、レイヤーコントロール940は、UIフレームワーク950によって生成された直接UI操作イベントをリスンする。UIフレームワーク950において、直接のUI操作イベントは、デバイスOS960からジェスチャーメッセージ(例えば、デバイス上のタッチスクリーンとインタラクトするユーザーによるパンジェスチャーやフリックジェスチャーに応答して生成されるメッセージ)を受信する、インタラクションモジュール954によって生成される。デバイスOS960は、ユーザーのジェスチャーを認識してUIフレームワーク950で使用できるメッセージを作成するための機能を含む。UIフレームワーク950は、ジェスチャーメッセージを、レイヤーコントロール920に送信するべき直接的なUI操作イベントへと変換する。インタラクションモジュール954はまた、音声コマンド、キーパッド又はキーボード上の指示ボタン、トラックボールの動きなどの、他の種類のユーザー入力に応答して生成されるナビゲーションメッセージについての直接的なUI操作イベントを受け取り、生成することができる。
【0088】
例11−詳細な実施例
この例では、他の側面とともに、上述の例の側面を含む詳細な実施例について説明する。この詳細な実施例は、上述したシステム900などのマルチレイヤーUIシステムによって又はなんらかの他のシステムによって、実施することができる。
【0089】
この例において、システム900は、水平に移動する複数の並列のUIレイヤー(例えば、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー、及びコンテンツレイヤー)を提示する。コンテンツレイヤーはいくつかのコンテンツペインを含む。各コンテンツペインは右のロックポイント及び左のロックポイントを含む。
【0090】
A.初期化
並列のUIレイヤーを初期化するために、システム900は、背景レイヤー、タイトルレイヤー、セクションヘッダーレイヤー及びコンテンツレイヤーの有効長に関する情報を取得する。(水平に移動するUIレイヤーにとって、有効長は、UIレイヤーの有効幅であると考えることができる。)システム900は、表示領域に近づくときにコンテンツペインを動的に作成することによってメモリー及び処理の要求を低減することができるが、これにより、コンテンツレイヤーの有効幅を決定することはより困難になる。この例では、初期化においてコンテンツレイヤーの有効幅を決定するために、システム900は、各コンテンツペインの最大幅に基づいて最大のコンテンツレイヤー幅を決定し、重なっていないすべてのコンテンツペインの最大幅の合計を計算する。
【0091】
(コンテンツペインについての)コンテンツレイヤーにおけるロックポイントは、例えば、重なっていないコンテンツペインを生成するために、表示領域の幅の単位でコンテンツレイヤーを分割することによって、自動的に設定することができる。また、どれだけの数の全体のコンテンツ画像nがコンテンツペインに入るかを決定し、各コンテンツ画像が少なくとも1つのコンテンツペインにあるようになるまでn個のコンテンツ画像ごとに新たなコンテンツペインを開始する(重なったコンテンツペインをもたらす可能性がある)ことによって、ロックポイントをコンテンツレイヤーにおいて設定することができる。
【0092】
レイヤーにおける動きは動作比率(motion ratios)に基づいて計算される。例えば、システム900は、それぞれ、背景レイヤーの幅及びタイトルレイヤーの幅を、コンテンツレイヤーの最大幅で割ることによって、背景レイヤー及びタイトルレイヤーの動作比率を計算する。背景レイヤー及びタイトルレイヤーの幅を考慮して、システム900は、コンテンツレイヤーにおける対応するロックポイントの位置に基づいて、それぞれ、背景レイヤー及びタイトルレイヤーにおけるロックポイントの位置をマッピングする。背景レイヤーにおけるそのような位置のマッピングの例は図1に示される。
【0093】
対応するレイヤーを動かすときにロックポイントが使用される。たとえば、システム900がコンテンツレイヤーにおけるペインへの移行をアニメートする場合に、システムは、背景レイヤーとタイトルレイヤーについて適切なロックポイントの位置を探し、レイヤーがそれらの位置にスクロールするためのコマンドを発行して、それぞれのレイヤーにおけるロックポイント間の距離に依存して相対的な動作速度を設定する。
【0094】
コンテンツレイヤーの最大の長さに基づく動作比率は、実際のレンダリングされたコンテンツレイヤーと比較される場合に概算であるにすぎない。当該比率は概算である(コンテンツペインの最終的な幅は依然として不明である)ので、システム900は、背景レイヤーやタイトルレイヤーなどのレイヤーがレンダリングされた最終的なコンテンツレイヤーにおける対応するロックポイントに合うように、背景レイヤー又はタイトルレイヤーなどのレイヤーを調整するために、ロックアニメーションを実行することができる。
【0095】
初期化が完了すると、システム900は、UIレイヤーをレンダリングし、ユーザー入力の受信を開始することができる。
B.ユーザー入力
この例では、システム900は、モバイルコンピューティングデバイス上のタッチスクリーンとインタラクトするユーザーからユーザー入力を受信する。システム900は、ドラッグジェスチャー、パンジェスチャー及びフリックジェスチャーなどのタッチスクリーン上の異なるジェスチャーを区別することができる。システム900はまた、ユーザーが特定の位置においてタッチスクリーンに触れるがタッチスクリーンとの接触を断つ前に指、スタイラスなどを動かさない場合などに、タップジェスチャーを検出することができる。代替手段として、いくつかの動きは、タップジェスチャーにおいてタッチスクリーンとの接触を断つ前に、小さな閾値の範囲内で許可される。システム900はまた、つまんで伸ばす(pinch-and-stretch)ジェスチャーなどのマルチタッチジェスチャーを検出することができる。
【0096】
システム900は、インタラクションを、タッチスクリーンとの当該インタラクションの性質に応じて特定のジェスチャーとして解釈する。システム900はユーザーのインタラクションから1つ又は複数の個別の入力を取得する。ジェスチャーは一連の入力から決定することができる。たとえば、ユーザーがタッチスクリーンに触れ、タッチスクリーンとの接触を維持しながら水平方向に移動を開始する場合、システム900は、パン入力を発射し、レイヤーにおいて水平方向の移動を開始する。ユーザーがタッチスクリーンとの接触を維持して移動し続けている間、システム900はパン入力を発射し続けることができる。例えば、システム900は、ユーザーがタッチスクリーンとの接触を維持しながらNピクセルだけ移動するたびに新たなパン入力をすることができる。このように、タッチスクリーン上での連続的な物理的なジェスチャーは、システム900によって一連のパン入力として解釈することができる。システムは接触位置及び移動速度を連続的に更新することができる。
【0097】
(ユーザーがタッチスクリーンとの接触を断つときなど)物理的なジェスチャーが終了すると、システム900は、タッチスクリーンとの接触を断ったときにユーザーの指、スタイラスなどがどれだけ迅速に動いていたか、及び移動速度が閾値を超えるかどうかを決定することにより、最後の動作をフリックとして解釈すべきかどうかを決定することができる。
【0098】
C.ユーザーのジェスチャーへの応答
システム900は、ジェスチャーの種類に応じて、ディスプレイ上の動き(例えば、レイヤー、リスト、又は他のUI要素の動き)を異なる方法でレンダリングすることができる。たとえば、水平方向のドラッグジェスチャー(ユーザーが現在タッチスクリーンとの接触を維持している)の場合には、システム900は、ドラッグの水平方向の距離と同じ距離だけ水平方向にコンテンツレイヤーを動かす。タイトルレイヤー及び背景レイヤーはまたドラッグに応じて移動する。移動量は、それぞれのレイヤーについての動作比率にドラッグの水平方向の動きを乗じることによって決定される。例えば、0.5の動作比率がタイトルレイヤーについて決定され、ドラッグの水平方向の距離が100ピクセルである場合、タイトルレイヤーにおける動きはドラッグの方向に50ピクセルとなる。
【0099】
(ユーザーがタッチスクリーンとの接触を断ったときにユーザーがよりゆっくりと移動していたか又は停止した)パンジェスチャーの場合、パンの量だけコンテンツレイヤーを移動し、デバイスの表示領域に対するコンテンツペインの現在位置をチェックして、コンテンツレイヤーにおいて追加の動きを実行するかどうかを決定する。たとえば、システムは、ロッキングアニメーション(つまり、ロックポイントにスナップするコンテンツレイヤーにおける動きのアニメーション)を実行することができ、現在のコンテンツペインに関連付けられる左又は右のロックポイントにコンテンツレイヤーを移動することができる。システム900は、現在のペインに関連付けられたどのロックポイントがより近くにあるかを決定して、当該より近いロックポイントへ移行することができる。別の例として、システム900は、表示領域上で部分的に見えるコンテンツペインを全体が見えるようにするために、コンテンツレイヤーを移動することができる。他のジェスチャーもまた、コンテンツペインを全体が見えるようにすることができる。例えば、垂直方向にスクロール可能なリストの左側又は右側が表示領域の外にある場合、リスト上でのジェスチャー(例えば、垂直な又は実質的に垂直なジェスチャー)は、全体のリストが見えるようになるように、コンテンツレイヤーにおける水平方向の移動(及び、必要に応じて、他のレイヤーにおける水平方向の移動)を引き起こしてもよい。レイヤーの水平方向の動きは、垂直なジェスチャーによって引き起こされるリスト内の任意の垂直方向の動きに加えてのものであってもよいが、コンテンツレイヤー及び任意の他のレイヤーの垂直方向の位置は影響を受けない。また、システム900は、コンテンツレイヤーの現在の位置を維持してもよい。
【0100】
1つの実施例において、システム900は次の手順を実行する。
1.コンテンツレイヤーにおいて、現在、以前及び次のコンテンツペインのうちのどれだけの領域を見ることができるかをチェックして、端の位置を確認する。
【0101】
2.以前のペインの右端が(左のスクリーンの端に対して)閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、以前のペインへ移行する。1つの実施例において、閾値は「バンプ閾値変位(bump threshold displacement)」と呼ばれる。
【0102】
3.次のペインの左端が(右のスクリーンの端に対して)閾値のピクセル数より大きく表示領域へとさらに移動された場合には、その後、次のペインへ移行する。
4.そうでなければ、現在のペインの左端又は右端をロックポイント又は「バンプ」と合わせるためにコンテンツレイヤーを移動させることができるかどうかを決定する。現在のペインの左端が左のロックポイントに十分近い場合には、左端に現在のペインをロックする。そうではなく、現在のペインの右端が右側のロックポイントに十分近く、現在のペインが画面より広い場合は、現在のペインを右端にロックする。
【0103】
フリックジェスチャー(ユーザーがタッチスクリーンとの接触を断ったときにユーザーがより迅速に動いていた)の場合には、システム900は、フリックジェスチャーの方向及び速度に依存して、次のコンテンツペイン又は以前のコンテンツペインへとコンテンツレイヤーを進めることができる移行アニメーションを開始する。フリックの速度が十分に大きい場合、システム900は、その方向で次のコンテンツペインに移行することができる。速度が十分に大きくない場合、又は現在のコンテンツペインが広い場合、システム900は、次のコンテンツペインに実際に移行することなく、フリックの方向にコンテンツレイヤーを移動することができる。検出される(すなわち、フリックジェスチャーをパンジェスチャーと区別する)フリックの閾値速度は実施例によって変わってもよい。別のコンテンツペインへの移行を引き起こすフリックの閾値速度は実施例によって変わってもよい。
【0104】
D.非線形運動
UIレイヤーはいくつかの状況では非線形な移動速度を示す。たとえば、全体のレイヤーは状況に応じて異なる速度で移動することができ、また、レイヤーの一部は状況に応じて同じレイヤーの他の部分とは異なる速度で移動することができる。非線形の移動速度を示し得る1つのレイヤーはセクションヘッダーレイヤーである。セクションヘッダーレイヤーはいくつかのセクションヘッダーに分けることができ、各ヘッダーはコンテンツレイヤーにおける1つ又は複数のコンテンツペインに関連付けることができる。
【0105】
この例では、システム900はセクションヘッダーレイヤーを提供し、各セクションヘッダーはコンテンツペインに関連付けられる。この例において、セクションヘッダーレイヤーは、次の規則に従って移動する。
【0106】
1.コンテンツ・ペインが表示領域よりも広くない場合、ヘッダーはコンテンツペインにロックされたままである。そうではなく、コンテンツペインが表示領域よりも広い場合には規則2−4が適用される。
【0107】
2.レイヤーがペインについて左側のロックポイントにおいてロックされる場合、各ヘッダーの左端はコンテンツペインの左端と合わせられる。
3.ユーザーがコンテンツペインを左にパンする場合、ヘッダーはコンテンツペインよりも遅く移動する。これは、例えば、パンするときにユーザーがなおヘッダーの一部を見られるようにするのに役立つ。
【0108】
4.ユーザーが右にパンする場合、ヘッダーはコンテンツペインよりも速く移動する。これは、例えば、現在のペインから以前のペインへの移行があるときにヘッダーがコンテンツペインより少し速く移動するが両方とも左のロックポイントに合わせる場合に、移行の効果を可能にするために有用となり得る。
【0109】
これらの規則に従って動作を実行する際に、システム900は、変位値を計算する。最初に、最大変位が、コンテンツペインの幅とヘッダーの幅との差をとることによって計算される。最大変位を計算する際に、システム900はまた、ヘッダー内のテキストの幅だけではなく、ボタンやヘッダー内の他の機能項目(functional items)のための追加のマージンを含んでもよい。
【0110】
システム900は、次いで、左のロックポイントに対する現在のペインの左端の位置を決定することによって、実際の変位を計算する。ペインの左端が左ロックポイントの右にある場合、システム900は、ペインの左端の水平方向の位置(x座標)から、左のロックポイントの水平方向の位置(x座標)を差し引き、これは正の値aになる。ペインの左端が左ロックポイントの左にある場合は、システム900は、左ロックポイントの水平方向の位置(x座標)から、ペインの左端の水平方向の位置(x座標)を差し引き、これは正の値bとなる。値に定数を乗じるなどすることによって、値(a又はb)に対して調整をすることができる。なんらかの調整後、値(a又はb)が最大変位よりも大きい場合には、当該値の上限は最大変位となる。
【0111】
変位の計算はまた、パンアニメーションや移行アニメーションに対して使用されてもよい。後者の場合には、移行を開始する前に、ペインの最後の位置が計算され、それに基づいて、移行アニメーションで使用されるべきヘッダーの最後の位置が計算される。
【0112】
E.エッジタップ
システム900はまた、エッジタップ(edge tap)機能を実施してもよい。エッジタップにおいて、ユーザーは、(例えば、次のコンテンツペイン又は以前のコンテンツペインへの)移行を引き起こすために、表示領域の端(例えば、左端又は右端)の所与のマージン(例えば、40ピクセル)内でタップしてもよい。これは、例えば、次のペイン又は以前のペインが表示領域内で部分的に見えている場合に有用となり得る。ユーザーは、次のペイン又は以前のペインの近くでタップして、システムに、そのペインを完全に表示領域へ持ちこませることができる。
【0113】
II.拡張及び代替的な実施例
本明細書に記載の実施例に対して、様々な拡張及び代替手段が可能である。
記載された例において、コンテンツレイヤーは、通常、背景レイヤーなどの他のレイヤーよりも長いものとして説明される。システム900などのマルチレイヤーUIシステムはまた、タイトルレイヤー又は背景レイヤーなどのレイヤーが実際にはコンテンツレイヤーよりも広いようなシナリオを取り扱うことができる。そのようなシナリオでは、レイヤーにおける動きの速度は補償をするために自動的に調整することができる。たとえば、コンテンツレイヤーがタイトルレイヤーよりも短い場合、コンテンツレイヤーはタイトルレイヤーよりも遅く移動してもよい。
【0114】
記載された例においては、いくつかのレイヤーは他のレイヤーにロックされているものとして説明される。たとえば、図6A−6Eにおいて、レイヤー612の一部はコンテンツレイヤー614の一部にロックされているものとして示される。他の実施例において、いくつかのレイヤーはより柔軟に動くものとして説明される。例えば、図5A−5Dにおいて、セクションヘッダーレイヤー512のセクションは、コンテンツレイヤー514の特定の部分に関連付けられるものとして示されるが、セクションは、互いに独立して動き、コンテンツレイヤー514の一部の上で浮かぶことができる。マルチレイヤーUIシステムはこのような機能を組み合わせることができる。例えば、マルチレイヤーUIシステムは、レイヤーの他の部分が独立して動くことを可能にしつつ、当該レイヤー(例えば、セクションヘッダーレイヤーやタイトルレイヤー)のある部分をコンテンツレイヤー内のコンテンツにロックすることができる。
【0115】
マルチレイヤーシステムはまた、移行又はラッピングの効果を向上させるために、レイヤーを一緒にロックすることができる。たとえば、ラッピング中に同じ速度で背景レイヤー及びタイトルレイヤーが移動するように、背景レイヤーはタイトルレイヤーにロックされてもよい。レイヤーの有効長が異なる場合であっても、そのようなロックを行うことができる。
【0116】
記載された例は、コンテンツレイヤーなどのユーザーにとって関心があるかもしれないレイヤーの異なる位置を示す。ユーザーは、レイヤーの先頭においてマルチレイヤーUIシステムにおけるナビゲーションを開始してもよいし、又は、異なるエントリーポイントを使用してUIレイヤーのナビゲーションを開始してもよい。たとえば、ユーザーは、コンテンツレイヤーの中間、コンテンツレイヤーの最後などにおいて、ナビゲーションを開始してもよい。これは、たとえば、ユーザーが以前にレイヤーの先頭以外の位置(例えば、レイヤーの終わり)において終了した場合に有用となり、その結果、ユーザーは(例えば、ユーザーがコンテンツ画像を作動させることによって呼び出されるアプリケーションを使用した後に)以前の位置に戻ることができる。別の例として、デフォルトのロックポイントはUIレイヤーの以前の状態に基づいていてもよい。たとえば、ユーザーは、以前に見られていたレイヤーの一部に対応するロックポイントにおいてレイヤーに戻ることができる。別の例として、マルチレイヤーUIシステムは、異なるエントリーポイントを可能にするために、複数のレイヤーにおいて状態を保存したり調整を行ったりすることができる。例えば、図5Cに示すようにコンテンツレイヤー及び機能(feature)レイヤーを見ることができるような位置においてユーザーがエントリーをなす場合、マルチレイヤーUIシステムは、レイヤー510における「Application(アプリケーション)」というテキストの先頭がレイヤー512における「Feature 2」というテキストの先頭に合わせられるようにレイヤー510を調整することができる。
【0117】
III.例示的なコンピューティング環境
図10は、記載された実施例のうちのいくつかを実施することができる適切なコンピューティング環境1000の一般化された例を示す。本明細書に記載された技術及び手段は多様な汎用又は特殊目的のコンピューティング環境において実施することができるので、コンピューティング環境1000は、使用又は機能の範囲について何ら限定を示唆するものではない。
【0118】
図10を参照すると、コンピューティング環境1000は、少なくとも1つのCPU1010及び関連するメモリー1020を含む。図10において、この最も基本的な構成1030は破線内に含まれる。処理装置1010は、コンピューター実行可能命令を実行し、実際の又は仮想的なプロセッサーであってもよい。マルチプロセッシングシステムにおいては、処理能力を高めるために複数の処理装置がコンピューター実行可能命令を実行する。図10は、ビデオアクセラレーション又は他の処理に使用することができる、第2の処理装置1015(例えば、GPU又は他のコプロセッシングユニット)及び関連するメモリー1025を示す。メモリー1020、1025は、揮発性メモリー(例えば、レジスター、キャッシュ、RAM)、不揮発性メモリー(例えば、ROM、EEPROM、フラッシュ(登録商標)メモリーなど)、又はそれら2つの組み合わせであってもよい。メモリー1020、1025は、記載される技術及び手段のうちの1つ又は複数を備えるシステムを実施するためのソフトウェア1080を格納する。
【0119】
コンピューティング環境は追加の機能を有してもよい。たとえば、コンピューティング環境1000は、ストレージ1040、1つ又は複数の入力装置1050、1つ又は複数の出力装置1060、及び1つ又は複数の通信接続1070を含む。バス、コントローラー、又はネットワークなどの相互接続機構(図示せず)は、コンピューティング環境1000のコンポーネントを相互接続する。通常、オペレーティングシステムソフトウェア(図示せず)は、コンピューティング環境1000において実行される他のソフトウェアのための動作環境を提供し、コンピューティング環境1000のコンポーネントの活動を調整する。
【0120】
ストレージ1040は、取り外し可能であっても取り外し不能であってもよく、情報を格納するために使用することができ、コンピューティング環境1000内でアクセスできる、磁気ディスク、磁気テープもしくはカセット、CD−ROM、DVD、メモリーカード、又は任意の他の媒体を含む。ストレージ1040は記載される技術及び手段を実施するソフトウェア1080のための命令を格納する。
【0121】
入力装置1050は、キーボード、マウス、ペン、トラックボール又はタッチスクリーンなどのタッチ入力装置、マイクロフォン、走査装置、デジタルカメラ、又はコンピューティング環境1000に入力を提供する別のデバイスなどの音声入力装置であってもよい。動画については、入力装置1050は、ビデオカード、TVチューナーカード、アナログ形式又はデジタル形式の動画入力を受け取る同様の装置、又はコンピューティング環境1000に動画サンプルを読み込むCD−ROMもしくはCD−RWであってもよい。出力装置1060は、ディスプレイ、プリンター、スピーカー、CDライター、又はコンピューティング環境1000からの出力を提供する別の装置であってもよい。
【0122】
通信接続1070は別のコンピューティングエンティティへの通信媒体を介した通信を可能にする。通信媒体は、コンピューター実行可能命令、音声もしくは動画入出力、又は変調されたデータ信号内の他のデータなどの情報を伝達する。変調されたデータ信号は、信号中で情報を符号化するようにその特性のうちの1つ又は複数が設定又は変更された信号である。限定ではなく例として、通信媒体は、電気、光、RF、赤外線、音響、又は他の搬送波によって実施される有線又は無線の技術を含む。
【0123】
技術及び手段は、コンピューター読み取り可能な媒体の一般的なコンテキストにおいて説明することができる。コンピューター読み取り可能な媒体は、コンピューティング環境内でアクセスできる任意の利用可能な媒体である。限定ではなく例として、コンピューティング環境1000で、コンピューター読み取り可能な媒体は、メモリー1020、1025、ストレージ1040、及びそれらの組み合わせを含む。
【0124】
技術及び手段は、目標の実際の又は仮想的なプロセッサー上のコンピューティング環境において実行される、プログラムモジュールに含まれるものなどの、コンピューター実行可能命令の一般的なコンテキストにおいて説明することができる。一般に、プログラムモジュールは、特定のタスクを実行し又は特定の抽象データ型を実施する、ルーチン、プログラム、ライブラリー、オブジェクト、クラス、コンポーネント、データ構造などを含む。プログラムモジュールの機能は、様々な実施例において必要に応じて、組み合わせたり、プログラムモジュール間で分割されたりしてもよい。プログラムモジュールのためのコンピューター実行可能命令は、ローカルのコンピューティング環境又は分散コンピューティング環境内で実行されてもよい。本明細書中に記載される任意の方法は、1つ又は複数のコンピューター読み取り可能な媒体(例えば、コンピューター読み取り可能な記憶媒体や他の有形の媒体)上に符号化されたコンピューター実行可能命令によって実施することができる。
【0125】
説明のために、詳細な説明においては、コンピューティング環境におけるコンピューターの動作を説明するために「選択」及び「決定」などの用語を使用する。これらの用語は、コンピューターによって実行される動作についての高レベルの抽象的概念であり、人間によって実行される行為と混同されるべきではない。これらの用語に対応する実際のコンピューター動作は実施例に応じて異なる。
【0126】
IV.例示的な実施環境
図11は、記載された実施例、技法、及び技術を実施することができる適切な実施環境1100の一般化された例を示す。
【0127】
例示的な環境1100においては、さまざまな種類のサービス(例えば、コンピューティングサービス1112)がクラウド1110によって提供される。たとえば、クラウド1110は、インターネットなどのネットワークを介して接続される様々な種類のユーザー及びデバイスにクラウドベースのサービスを提供する、集中的に又は分散して配置され得る一群のコンピューティングデバイスを含んでもよい。クラウドコンピューティング環境1300は、コンピューティングタスクを達成するために、さまざまな方法で使用することができる。例えば、記載される技術及び手段を参照すると、ユーザー入力を処理することやユーザーインターフェースを提示することなどのいくつかのタスクは、ローカルのコンピューティングデバイス上で実行することができるが、後続の処理で使用されるデータの記憶などの他のタスクは、クラウド内の他の場所で実行することができる。
【0128】
例示的な環境1100において、クラウド1110は、様々な画面機能1120A−Nを備えた接続されたデバイスのためのサービスを提供する。接続されたデバイス1120Aは中型の画面をもつデバイスを表す。たとえば、接続されるデバイス1120Aは、デスクトップコンピューター、ラップトップ、ノートブック、ネットブックなどのパーソナルコンピューターであってもよい。接続されるデバイス1120Bは小型の画面を備えたデバイスを表す。たとえば、接続されるデバイス1120Bは、携帯電話、スマートフォン、パーソナルデジタルアシスタント、タブレットコンピューターなどであってもよい。接続されるデバイス1120Nは大型の画面を備えたデバイスを表す。たとえば、接続されるデバイス1120Nは、テレビ(例えば、スマートテレビ)又はテレビやプロジェクタースクリーンに接続される別のデバイス(例えば、セットトップボックスやゲーム機)であってもよい。
【0129】
様々なサービスを、1つ又は複数のサービスプロバイダー(図示せず)を介してクラウド1110によって提供することができる。たとえば、クラウド1110は、様々な接続されるデバイス1120A−Nのうちの1つ又は複数に、モバイルコンピューティングに関連するサービスを提供することができる。クラウドサービスは、画面サイズ、表示能力、又は特定の接続されたデバイス(例えば、接続されたデバイス1120A−N)の他の機能に合わせてカスタマイズすることができる。たとえば、クラウドサービスは、画面サイズ、入力装置、及び通常はモバイルデバイスと関連付けられる通信帯域幅の制限を考慮に入れることによって、モバイルデバイス用にカスタマイズすることができる。
【0130】
V.例示的なモバイルデバイス
図12は、1202において一般的に示される、様々なオプションのハードウェアコンポーネント及びソフトウェアコンポーネントを含む、例示的なモバイルデバイス1200を示すシステム図である。説明を容易にするために、すべての接続が示されてはいないが、モバイルデバイス内の任意のコンポーネント1202は任意の他のコンポーネントと通信することができる。モバイルデバイスは、様々なコンピューティングデバイス(例えば、携帯電話、スマートフォン、ハンドヘルドコンピューター、パーソナルデジタルアシスタント(PDA)など)のうちの任意のものであってもよく、セルラーネットワークや衛星ネットワークなどの1つ又は複数の移動通信ネットワーク1204との無線双方向通信を可能にすることができる。
【0131】
図示されるモバイルデバイスは、信号の符号化、データ処理、入出力処理、電源制御、及び/又は他の機能などのタスクを実行するためのコントローラー又はプロセッサー1210(例えば、信号プロセッサー、マイクロプロセッサー、ASIC、又は他の制御及び処理論理回路)を含んでもよい。オペレーティングシステム1212は、コンポーネント1202の割り当て及び使用、並びに1つ又は複数のアプリケーションプログラム1214に対するサポートを制御することができる。アプリケーションプログラムは、一般的なモバイルコンピューティングアプリケーション(例えば、Eメールアプリケーション、カレンダー、コンタクトマネージャー、ウェブブラウザー、メッセージアプリケーションを含む)、又は任意の他のコンピューティングアプリケーションを含んでもよい。
【0132】
図示されるモバイルデバイスはメモリー1220を含んでもよい。メモリー1220は、取り外し不能なメモリー1222及び/又は取り外し可能なメモリー1224を含んでもよい。取り外し不能なメモリー1222は、RAM、ROM、フラッシュメモリー、ディスクドライブ、又は他の周知のメモリーストレージ技術を含んでもよい。取り外し可能なメモリー1224は、フラッシュメモリー又はGSM(登録商標)通信システムにおいて知られている加入者識別モジュール(SIM)カード、又はスマートカードなどの他の周知のメモリーストレージ技術を含んでもよい。メモリー1220は、オペレーティングシステム1212及びアプリケーション1214を実行するためのデータ及び/又はコードを格納するために使用することができる。例示的なデータは、ウェブページ、テキスト、画像、音声ファイル、動画データ、又は1つもしくは複数の有線もしくは無線のネットワークを介して1つもしくは複数のネットワークサーバー又は他のモバイルデバイスとの間で送受信される他のデータセットを含んでもよい。メモリー1220は、国際移動電話加入者識別番号(IMSI)などの加入者識別子及び国際移動電話機器識別番号(IMEI)などの機器識別子を格納するために使用することができる。そのような識別子は、ユーザー及び機器を識別するためにネットワークサーバーに送信することができる。
【0133】
モバイルデバイスは、タッチスクリーン1232、マイク1234、カメラ1236、物理的なキーボード1238及び/又はトラックボール1240などの1つ又は複数の入力装置1230、並びに、スピーカー1252、ディスプレイ1254などの1つ又は複数の出力装置1250をサポートすることができる。他のあり得る出力装置(図示せず)は圧電性の又は他の触覚出力装置を含んでもよい。一部の装置は複数の入出力機能を提供することができる。たとえば、タッチスクリーン1232及びディスプレイ1254は単一の入出力装置に組み合わせることができる。
【0134】
タッチスクリーン1232はさまざまな方法で入力を受け取ることができる。例えば、物体(例えば、指先又はスタイラス)が表面にわたって流れる電流を歪ませたり遮断したりする場合、容量性タッチスクリーンはタッチ入力を検出する。別の例として、タッチスクリーンは、光センサーからのビームが遮断される場合にタッチ入力を検出する光センサーを使用してもよい。画面の表面との物理的接触は、いくつかのタッチスクリーンによって検出される入力にとっては必要がない。
【0135】
当技術分野においてよく理解されているように、無線モデム1260は、アンテナ(図示せず)に結合させることができ、プロセッサー1210と外部デバイスとの間の双方向通信をサポートすることができる。モデム1260は一般的に示されており、移動通信ネットワーク1204及び/又は他の無線ベースのモデム(例えば、ブルートゥース(登録商標)又はWi−Fi)と通信するためのセルラーモデムを含んでもよい。無線モデム1260は、通常、単一のセルラーネットワーク内での、セルラーネットワーク間での、又はモバイルデバイスと公衆交換電話網(PSSTN)との間でのデータ通信及び音声通信のためのGSM(登録商標)ネットワークなどの、1つ又は複数のセルラーネットワークとの通信用に構成される。
【0136】
モバイルデバイスは、さらに、少なくとも1つの入出力ポート1280、電源1282、全地球測位システム(GPS)受信機などの衛星ナビゲーションシステム受信機1284、加速度計1286、(アナログ信号又はデジタル信号を無線で送信するための)トランシーバー1288、並びに/又は、USBポート、IEEE1394(ファイアウォール)ポート、及び/もしくはRS−232ポートであってもよい物理的なコネクター1290を含んでもよい。コンポーネントを削除してもよく、他のコンポーネントを追加してもよいので、図示されるコンポーネント1202は必須ではなく、すべてを網羅してはいない。
【0137】
すべての例からの技術は他の例の1つ又は複数において記載された技術と組み合わせることができる。開示された技術の原則を適用することができる多くの可能な実施例を考慮して、図示された実施例が開示された技術の例であって、開示された技術の範囲に対する限定として解釈されるべきではないことを認識すべきである。そのようなものではなく、開示された技術の範囲は以下の特許請求の範囲によってカバーされるものを含む。したがって、出願人は、請求項の範囲及び趣旨に含まれるすべてのものを本願の発明として請求する。
【特許請求の範囲】
【請求項1】
コンピューターシステムにおいて、
少なくとも第1及び第2のレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、前記第1のレイヤーにおける視覚情報の第1の部分がタッチスクリーンの表示領域内にあり、前記第1のレイヤーは第1の方向と実質的に直交する第2の方向に移動するように動作可能なユーザーインターフェース要素を含む、ステップと、
前記タッチスクリーン上での第1のジェスチャーに対応する第1のユーザー入力を受信するステップと、
前記第1のユーザー入力に少なくとも部分的に基づいて第1の動きを計算するステップであって、前記第1の動きは、前記第1のレイヤーにおける視覚情報の第2の部分が前記表示領域の外にある最初の第1のレイヤーの位置から、前記第1のレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在の第1のレイヤーの位置への、前記第1のレイヤーの動きを含み、前記第1の動きは第1の移動速度で第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいて前記第1の動きと実質的に平行な第2の動きを計算するステップであって、前記第2の動きは最初の第2のレイヤーの位置から現在の第2のレイヤーの位置への前記第2のレイヤーにおける視覚情報の動きを含み、前記第2の動きは第2の移動速度で前記第1の方向にある、ステップと、
前記タッチスクリーン上での第2のジェスチャーに対応する第2のユーザー入力を受信するステップと、
前記第2のユーザー入力に少なくとも部分的に基づいて実質的に垂直な動きを計算するステップであって、前記実質的に垂直な動きは最初の要素の位置から現在の要素の位置への前記ユーザーインターフェース要素における視覚情報の動きを含む、ステップと
を含み、前記第2の移動速度は前記第1の移動速度とは異なる方法。
【請求項2】
前記第1のジェスチャーはジェスチャーの移動速度を有し、前記第1の移動速度は前記ジェスチャー移動速度に基づく請求項1に記載の方法。
【請求項3】
前記第1の移動速度は前記ジェスチャーの移動速度に実質的に等しい請求項2に記載の方法。
【請求項4】
前記第1のジェスチャーによって示される方向は前記第1の方向とは異なり、前記第1のジェスチャーによって示される方向は斜め方向であり、前記第1の方向は水平方向である請求項1に記載の方法。
【請求項5】
前記第1の方向は水平方向であり、前記第2の方向は垂直方向である請求項1に記載の方法。
【請求項6】
前記ユーザーインターフェース要素が垂直方向にスクロール可能な要素である請求項5に記載の方法。
【請求項7】
前記第2のジェスチャーの方向が前記垂直方向とは異なり、前記第2のジェスチャーによって示される方向が斜め方向である請求項6に記載の方法。
【請求項8】
前記垂直方向にスクロール可能な要素における垂直なロッキングアニメーションを実行するステップをさらに含み、
前記垂直なロッキングアニメーションは、前記垂直方向にスクロール可能な要素におけるロックポイントが前記表示領域の一部と垂直に合わせられるように、前記垂直方向にスクロール可能な要素を動かすことを含む請求項6に記載の方法。
【請求項9】
前記垂直方向にスクロール可能な要素は項目のリストであり、前記ロックポイントは前記リスト内の項目に関連付けられる請求項8に記載の方法。
【請求項10】
前記項目のリストはリンクのリストであり、前記ロックポイントは前記リスト内のリンクに関連付けられる請求項9に記載の方法。
【請求項11】
前記実質的に垂直な動きを計算するステップは、
前記最初の要素の位置及び前記第2のジェスチャーの速度に少なくとも部分的に基づいて前記現在の要素の位置を計算する請求項1に記載の方法。
【請求項12】
前記タッチスクリーンを備える携帯電話上での表示のために前記第1の動き、前記第2の動き及び前記実質的に垂直な動きをレンダリングするステップをさらに含む請求項1に記載の方法。
【請求項13】
1つ又は複数のプロセッサーと、
表示領域を有するタッチスクリーンと、
コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第1及び第2の部分を含み、それぞれのレイヤーにおける視覚情報の前記第1の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第2の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第1の部分及び前記表示領域の外にある視覚情報の第2の部分を有する少なくとも1つのスクロール可能な要素を含む、ステップ、
前記タッチスクリーンを介して第1のユーザー入力を受信するステップ、
前記第1のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、(a)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から(b)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップ、
(a)から(b)への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第1の方向にある、ステップ、
前記第1のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、(c)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から(d)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップ、
(c)から(d)への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第1の方向にある、ステップ、
前記第1のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、(e)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から(f)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップ、
(e)から(f)への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第1の方向にある、ステップ、
前記タッチスクリーンを介して第2のユーザー入力を受信するステップ、
前記第2のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、(g)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から(h)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップ、並びに、
(g)から(h)への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第1の方向と実質的に直交する第2の方向である、ステップ
を含む方法を実行するためのコンピューター実行可能な命令を格納する1つ又は複数のコンピューター読み取り可能な記憶媒体と
を具備し、
前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複しない、コンピューティングデバイス。
【請求項14】
前記第1のユーザー入力が前記タッチスクリーン上の第1のジェスチャーに対応し、前記第2のユーザー入力が前記タッチスクリーン上の第2のジェスチャーに対応する請求項13に記載のコンピューティングデバイス。
【請求項15】
タッチスクリーン上でのジェスチャーを介してユーザー入力を受信するように動作可能なタッチスクリーン上にグラフィカルユーザーインターフェースを表示するステップであって、前記グラフィカルユーザーインターフェースは、コンテンツレイヤー、セクションヘッダーレイヤー、タイトルレイヤー及び背景レイヤーを含み、各レイヤーはそれぞれのレイヤーにおける視覚情報の少なくとも第1及び第2の部分を含み、それぞれのレイヤーにおける視覚情報の前記第1の部分は前記タッチスクリーンの表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第2の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第1の部分及び前記表示領域の外にある視覚情報の第2の部分を有する少なくとも1つのスクロール可能な要素を含む、ステップと、
前記タッチスクリーン上のジェスチャーに対応する第1のユーザー入力を受信するステップと、
前記第1のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、(a)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から(b)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップと、
(a)から(b)への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、(c)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から(d)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップと、
(c)から(d)への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、(e)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から(f)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップと、
(e)から(f)への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいて背景レイヤーの動きを計算するステップであって、前記背景レイヤーの動きは、(g)前記背景レイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初の背景レイヤーの位置から(h)前記背景レイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在の背景レイヤーの位置への前記背景レイヤーの動きを含む、ステップと、
(g)から(h)への動きをアニメートするステップであって、前記背景レイヤーの動きは背景レイヤーの移動速度で前記第1の方向にある、ステップと、
前記タッチスクリーン上の第2のジェスチャーに対応する第2のユーザー入力を受信するステップと、
前記第2のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、(i)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から(j)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップと、
(i)から(j)への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第1の方向と実質的に直交する第2の方向である、ステップと
を含む方法であって、
前記コンテンツレイヤーの移動速度は前記セクションヘッダーレイヤーの移動速度と等しく、前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複せず、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーの各々は前記背景レイヤーと重なる、方法を実行するためのコンピューター実行可能な命令を格納する1つ又は複数のコンピューター読み取り可能な媒体。
【請求項1】
コンピューターシステムにおいて、
少なくとも第1及び第2のレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、前記第1のレイヤーにおける視覚情報の第1の部分がタッチスクリーンの表示領域内にあり、前記第1のレイヤーは第1の方向と実質的に直交する第2の方向に移動するように動作可能なユーザーインターフェース要素を含む、ステップと、
前記タッチスクリーン上での第1のジェスチャーに対応する第1のユーザー入力を受信するステップと、
前記第1のユーザー入力に少なくとも部分的に基づいて第1の動きを計算するステップであって、前記第1の動きは、前記第1のレイヤーにおける視覚情報の第2の部分が前記表示領域の外にある最初の第1のレイヤーの位置から、前記第1のレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在の第1のレイヤーの位置への、前記第1のレイヤーの動きを含み、前記第1の動きは第1の移動速度で第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいて前記第1の動きと実質的に平行な第2の動きを計算するステップであって、前記第2の動きは最初の第2のレイヤーの位置から現在の第2のレイヤーの位置への前記第2のレイヤーにおける視覚情報の動きを含み、前記第2の動きは第2の移動速度で前記第1の方向にある、ステップと、
前記タッチスクリーン上での第2のジェスチャーに対応する第2のユーザー入力を受信するステップと、
前記第2のユーザー入力に少なくとも部分的に基づいて実質的に垂直な動きを計算するステップであって、前記実質的に垂直な動きは最初の要素の位置から現在の要素の位置への前記ユーザーインターフェース要素における視覚情報の動きを含む、ステップと
を含み、前記第2の移動速度は前記第1の移動速度とは異なる方法。
【請求項2】
前記第1のジェスチャーはジェスチャーの移動速度を有し、前記第1の移動速度は前記ジェスチャー移動速度に基づく請求項1に記載の方法。
【請求項3】
前記第1の移動速度は前記ジェスチャーの移動速度に実質的に等しい請求項2に記載の方法。
【請求項4】
前記第1のジェスチャーによって示される方向は前記第1の方向とは異なり、前記第1のジェスチャーによって示される方向は斜め方向であり、前記第1の方向は水平方向である請求項1に記載の方法。
【請求項5】
前記第1の方向は水平方向であり、前記第2の方向は垂直方向である請求項1に記載の方法。
【請求項6】
前記ユーザーインターフェース要素が垂直方向にスクロール可能な要素である請求項5に記載の方法。
【請求項7】
前記第2のジェスチャーの方向が前記垂直方向とは異なり、前記第2のジェスチャーによって示される方向が斜め方向である請求項6に記載の方法。
【請求項8】
前記垂直方向にスクロール可能な要素における垂直なロッキングアニメーションを実行するステップをさらに含み、
前記垂直なロッキングアニメーションは、前記垂直方向にスクロール可能な要素におけるロックポイントが前記表示領域の一部と垂直に合わせられるように、前記垂直方向にスクロール可能な要素を動かすことを含む請求項6に記載の方法。
【請求項9】
前記垂直方向にスクロール可能な要素は項目のリストであり、前記ロックポイントは前記リスト内の項目に関連付けられる請求項8に記載の方法。
【請求項10】
前記項目のリストはリンクのリストであり、前記ロックポイントは前記リスト内のリンクに関連付けられる請求項9に記載の方法。
【請求項11】
前記実質的に垂直な動きを計算するステップは、
前記最初の要素の位置及び前記第2のジェスチャーの速度に少なくとも部分的に基づいて前記現在の要素の位置を計算する請求項1に記載の方法。
【請求項12】
前記タッチスクリーンを備える携帯電話上での表示のために前記第1の動き、前記第2の動き及び前記実質的に垂直な動きをレンダリングするステップをさらに含む請求項1に記載の方法。
【請求項13】
1つ又は複数のプロセッサーと、
表示領域を有するタッチスクリーンと、
コンテンツレイヤー、セクションヘッダーレイヤー、及びタイトルレイヤーを含むグラフィカルユーザーインターフェースを表示するステップであって、各レイヤーは、それぞれのレイヤーにおける視覚情報の少なくとも第1及び第2の部分を含み、それぞれのレイヤーにおける視覚情報の前記第1の部分は表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第2の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第1の部分及び前記表示領域の外にある視覚情報の第2の部分を有する少なくとも1つのスクロール可能な要素を含む、ステップ、
前記タッチスクリーンを介して第1のユーザー入力を受信するステップ、
前記第1のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、(a)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から(b)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップ、
(a)から(b)への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第1の方向にある、ステップ、
前記第1のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、(c)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から(d)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップ、
(c)から(d)への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第1の方向にある、ステップ、
前記第1のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、(e)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から(f)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップ、
(e)から(f)への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第1の方向にある、ステップ、
前記タッチスクリーンを介して第2のユーザー入力を受信するステップ、
前記第2のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、(g)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から(h)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップ、並びに、
(g)から(h)への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第1の方向と実質的に直交する第2の方向である、ステップ
を含む方法を実行するためのコンピューター実行可能な命令を格納する1つ又は複数のコンピューター読み取り可能な記憶媒体と
を具備し、
前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複しない、コンピューティングデバイス。
【請求項14】
前記第1のユーザー入力が前記タッチスクリーン上の第1のジェスチャーに対応し、前記第2のユーザー入力が前記タッチスクリーン上の第2のジェスチャーに対応する請求項13に記載のコンピューティングデバイス。
【請求項15】
タッチスクリーン上でのジェスチャーを介してユーザー入力を受信するように動作可能なタッチスクリーン上にグラフィカルユーザーインターフェースを表示するステップであって、前記グラフィカルユーザーインターフェースは、コンテンツレイヤー、セクションヘッダーレイヤー、タイトルレイヤー及び背景レイヤーを含み、各レイヤーはそれぞれのレイヤーにおける視覚情報の少なくとも第1及び第2の部分を含み、それぞれのレイヤーにおける視覚情報の前記第1の部分は前記タッチスクリーンの表示領域にあり、それぞれのレイヤーにおける視覚情報の前記第2の部分は前記表示領域の外にあり、前記コンテンツレイヤーは前記表示領域内にある視覚情報の第1の部分及び前記表示領域の外にある視覚情報の第2の部分を有する少なくとも1つのスクロール可能な要素を含む、ステップと、
前記タッチスクリーン上のジェスチャーに対応する第1のユーザー入力を受信するステップと、
前記第1のユーザー入力に少なくとも部分的に基づいてコンテンツレイヤーの動きを計算するステップであって、前記コンテンツレイヤーの動きは、(a)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のコンテンツレイヤーの位置から(b)前記コンテンツレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のコンテンツレイヤーの位置への前記コンテンツレイヤーの動きを含む、ステップと、
(a)から(b)への動きをアニメートするステップであって、前記コンテンツレイヤーの動きはコンテンツレイヤーの移動速度で第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいてセクションヘッダーレイヤーの動きを計算するステップであって、前記セクションヘッダーレイヤーの動きは、(c)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のセクションヘッダーレイヤーの位置から(d)前記セクションヘッダーレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のセクションヘッダーレイヤーの位置への前記セクションヘッダーレイヤーの動きを含む、ステップと、
(c)から(d)への動きをアニメートするステップであって、前記セクションヘッダーレイヤーの動きはセクションヘッダーレイヤーの移動速度で前記第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいてタイトルレイヤーの動きを計算するステップであって、前記タイトルレイヤーの動きは、(e)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初のタイトルレイヤーの位置から(f)前記タイトルレイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在のタイトルレイヤーの位置への前記タイトルレイヤーの動きを含む、ステップと、
(e)から(f)への動きをアニメートするステップであって、前記タイトルレイヤーの動きはタイトルレイヤーの移動速度で前記第1の方向にある、ステップと、
前記第1のユーザー入力に少なくとも部分的に基づいて背景レイヤーの動きを計算するステップであって、前記背景レイヤーの動きは、(g)前記背景レイヤーにおける視覚情報の前記第2の部分が前記表示領域の外にある最初の背景レイヤーの位置から(h)前記背景レイヤーにおける視覚情報の前記第2の部分が前記表示領域内にある現在の背景レイヤーの位置への前記背景レイヤーの動きを含む、ステップと、
(g)から(h)への動きをアニメートするステップであって、前記背景レイヤーの動きは背景レイヤーの移動速度で前記第1の方向にある、ステップと、
前記タッチスクリーン上の第2のジェスチャーに対応する第2のユーザー入力を受信するステップと、
前記第2のユーザー入力に少なくとも部分的に基づいて、スクロール可能な要素の動きを計算するステップであって、前記スクロール可能な要素の動きは、(i)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域の外にある最初のスクロール可能な要素の位置から(j)前記スクロール可能な要素における視覚情報の前記第2の部分が前記表示領域内にある現在のスクロール可能な要素の位置への前記スクロール可能な要素における視覚情報の動きを含む、ステップと、
(i)から(j)への動きをアニメートするステップであって、前記スクロール可能な要素の動きは前記第1の方向と実質的に直交する第2の方向である、ステップと
を含む方法であって、
前記コンテンツレイヤーの移動速度は前記セクションヘッダーレイヤーの移動速度と等しく、前記タイトルレイヤーの移動速度は前記コンテンツレイヤーの移動速度及び前記セクションヘッダーレイヤーの移動速度とは異なり、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーは互いに実質的に平行であり、互いに対して重複せず、前記コンテンツレイヤー、前記セクションヘッダーレイヤー及び前記タイトルレイヤーの各々は前記背景レイヤーと重なる、方法を実行するためのコンピューター実行可能な命令を格納する1つ又は複数のコンピューター読み取り可能な媒体。
【図1】
【図2】
【図3A】
【図3B】
【図3C】
【図3D】
【図4】
【図5A】
【図5B】
【図5C】
【図5D】
【図6A】
【図6B】
【図6C】
【図6D】
【図6E】
【図7】
【図8A】
【図8B】
【図8C】
【図9】
【図10】
【図11】
【図12】
【図2】
【図3A】
【図3B】
【図3C】
【図3D】
【図4】
【図5A】
【図5B】
【図5C】
【図5D】
【図6A】
【図6B】
【図6C】
【図6D】
【図6E】
【図7】
【図8A】
【図8B】
【図8C】
【図9】
【図10】
【図11】
【図12】
【公表番号】特表2013−519953(P2013−519953A)
【公表日】平成25年5月30日(2013.5.30)
【国際特許分類】
【出願番号】特願2012−553056(P2012−553056)
【出願日】平成23年2月11日(2011.2.11)
【国際出願番号】PCT/US2011/024639
【国際公開番号】WO2011/100623
【国際公開日】平成23年8月18日(2011.8.18)
【出願人】(500046438)マイクロソフト コーポレーション (3,165)
【Fターム(参考)】
【公表日】平成25年5月30日(2013.5.30)
【国際特許分類】
【出願日】平成23年2月11日(2011.2.11)
【国際出願番号】PCT/US2011/024639
【国際公開番号】WO2011/100623
【国際公開日】平成23年8月18日(2011.8.18)
【出願人】(500046438)マイクロソフト コーポレーション (3,165)
【Fターム(参考)】
[ Back to top ]