專利名稱：具有靈活的平行移動的多層用戶界面的制作方法
具有靈活的平行移動的多層用戶界面
背景技術(shù)：
有效用戶界面的設(shè)計(jì)提出許多挑戰(zhàn)。一個挑戰(zhàn)是給定了顯示器的空間限制和特定用戶的需求，如何為用戶提供最優(yōu)量的視覺信息或功能。這個挑戰(zhàn)對于具有小型顯示器的設(shè)備(諸如，智能電話或其他移動計(jì)算設(shè)備)會尤其棘手。這是因?yàn)閷τ谶M(jìn)行特定活動的用戶通常存在比適合于顯示器的更多的可用信息。用戶會容易變得迷惑，除非認(rèn)真地注意信息是如何呈現(xiàn)在有限量的可用顯示空間中的。不論先前的技術(shù)的好處如何，它們都沒有以下呈現(xiàn)的技術(shù)和工具的優(yōu)點(diǎn)。

發(fā)明內(nèi)容
此處描述的技術(shù)和工具涉及在計(jì)算機(jī)顯示器上向用戶呈現(xiàn)視覺信息，并且更具體地涉及在小型顯示器上呈現(xiàn)視覺信息，小型顯示器諸如是在智能電話和其他移動計(jì)算設(shè)備 上找到的那些顯示器。具體而言，描述了涉及用戶界面的不同方面的技術(shù)和工具，在該用戶界面中，彼此相關(guān)的視覺信息層以不同的速率移動。在一個實(shí)現(xiàn)中，各層響應(yīng)于用戶輸入，在同一個方向上以是層的長度(也被稱為層的寬度，諸如當(dāng)層被水平地定向時)的函數(shù)的速率移動。例如，圖形用戶界面(GUI)包括背景層、標(biāo)題層和內(nèi)容層。在特定方向上(例如，在水平維度中從左向右)用戶導(dǎo)航通過內(nèi)容層也導(dǎo)致在背景層和標(biāo)題層的一個或多個中的同一方向上的移動。層中移動的量和性質(zhì)依賴于一個或多個因素，諸如，層中的數(shù)據(jù)、或?qū)又袑?yīng)鎖點(diǎn)(lock points)之間的相對距離。例如，如果內(nèi)容層比背景層長，則內(nèi)容層比背景層移動得快。內(nèi)容層的移動速率可以與觸摸屏上手勢的移動速率相匹配，以便給用戶直接操縱觸摸屏上的內(nèi)容的感覺。一個方面，UI系統(tǒng)顯示包括至少第一和第二層的⑶I。第一層中視覺信息的第一部分位于觸摸屏的顯示區(qū)域內(nèi)，并且各層基本上彼此平行。UI系統(tǒng)接收與觸摸屏上的手勢相對應(yīng)的用戶輸入。UI系統(tǒng)至少部分地基于用戶輸入來計(jì)算第一移動。第一移動包括第一層從初始第一層位置到當(dāng)前第一層位置的移動，在初始第一層位置中，第一層中視覺信息的第二部分位于顯示區(qū)域以外，在當(dāng)前第一層位置中，第一層中視覺信息的第二部分位于顯不區(qū)域內(nèi)。第一移動以第一移動速率在第一方向上進(jìn)行。UI系統(tǒng)至少部分地基于用戶輸入來計(jì)算第二移動。第二移動包括第二層中的視覺信息從初始第二層位置到當(dāng)前第二層位置的移動。第二移動以第二移動速率在第一方向上進(jìn)行。第二移動速率與第一移動速率不同。例如，第一層是內(nèi)容層，并且第二層(例如，段首層或標(biāo)題層)是顯示區(qū)域中內(nèi)容層上面的層。另一方面，在計(jì)算設(shè)備的觸摸屏上顯示的⑶I至少包括第一層(例如，內(nèi)容層)和第二層(例如，內(nèi)容層上面的段首層)。第二層包括第一部分(例如，第一段首部)和第二部分(例如，第二段首部)。計(jì)算設(shè)備經(jīng)由觸摸屏接收指示第一層中的移動的用戶輸入。計(jì)算設(shè)備至少部分地基于用戶輸入來計(jì)算第一移動。第一移動包括第一層以第一移動速率的移動(例如，移動速率基本等于用戶的手指或觸摸屏上其他物體擺出的手勢的移動速率)。計(jì)算設(shè)備至少部分地基于第一移動來計(jì)算第二移動。第二移動包括第二層的第一部分的移動。第二移動與第一移動基本平行，并且第二移動是以第二移動速率進(jìn)行的。計(jì)算設(shè)備至少部分地基于用戶輸入來計(jì)算第三移動。第三移動包括第一層以第三移動速率的移動。計(jì)算設(shè)備至少部分地基于第三移動來計(jì)算第四移動。第四移動包括第二層的第二部分的移動。第四移動與第三移動基本平行，并且第四移動是以第四移動速率進(jìn)行的。第二移動速率與第四移動速率、第一移動速率不同。例如，第一段首部與內(nèi)容層中一個或多個內(nèi)容窗格的第一集合相關(guān)聯(lián)，并且第二段首部與內(nèi)容層中一個或多個內(nèi)容窗格的第二集合相關(guān)聯(lián)。段首部的移動速率可以不同。例如，移動速率可以基于段首部的寬度、相關(guān)聯(lián)的內(nèi)容窗格、和/或顯示區(qū)域的寬度。另一方面，Π系統(tǒng)在觸摸屏上顯示⑶I，該⑶I用于經(jīng)由觸摸屏上的手勢來接收用戶輸入。該⑶I包括內(nèi)容層、段首層、標(biāo)題層和背景層。每層包括相應(yīng)層中視覺信息的至少第一和第二部分。相應(yīng)層中視覺信息的第一部分位于觸摸屏的顯示區(qū)域中，而相應(yīng)層中視覺信息的第二部分位于顯示區(qū)域以外。Π系統(tǒng)接收與觸摸屏上的手勢相對應(yīng)的用戶輸入。UI系統(tǒng)至少部分地基于用戶輸入來計(jì)算內(nèi)容層的移動。內(nèi)容層的移動包括從(a)初始內(nèi)容層位置到(b)當(dāng)前內(nèi)容層位置的內(nèi)容層的移動，在初始內(nèi)容層位置中，內(nèi)容層中視覺信息的第二部分位于顯示區(qū)域以外，在當(dāng)前內(nèi)容層位置中，內(nèi)容層中視覺信息的第二部分位于顯 示區(qū)域內(nèi)。Π系統(tǒng)動畫化從(a)到(b)的移動。內(nèi)容層移動以內(nèi)容層移動速率在第一方向上進(jìn)行。Π系統(tǒng)至少部分地基于用戶輸入來計(jì)算段首層的移動。段首層的移動包括從(C)初始段首層位置到(d)當(dāng)前段首層位置的段首層的移動，在初始段首層位置中，段首層中視覺信息的第二部分位于顯示區(qū)域以外，在當(dāng)前段首層位置中，段首層中視覺信息的第二部分位于顯示區(qū)域內(nèi)。Π系統(tǒng)動畫化從(C)到(d)的移動。段首層移動以段首層移動速率在第一方向上進(jìn)行。UI系統(tǒng)至少部分地基于用戶輸入來計(jì)算標(biāo)題層的移動。標(biāo)題層的移動包括從(e)初始標(biāo)題層位置到(f )當(dāng)前標(biāo)題層位置的標(biāo)題層的移動，在初始標(biāo)題層位置中，標(biāo)題層中視覺信息的第二部分位于顯示區(qū)域以外，在當(dāng)前標(biāo)題層位置中，標(biāo)題層中視覺信息的第二部分位于顯示區(qū)域內(nèi)。Π系統(tǒng)動畫化從(e)到(f)的移動。標(biāo)題層移動以標(biāo)題層移動速率在第一方向上進(jìn)行。Π系統(tǒng)至少部分地基于用戶輸入來計(jì)算背景層的移動。背景層的移動包括從(g)初始背景層位置到(h)當(dāng)前背景層位置的背景層的移動，在初始背景層位置中，背景層中視覺信息的第二部分位于顯示區(qū)域以外，在當(dāng)前背景層位置中，背景層中視覺信息的第二部分位于顯示區(qū)域內(nèi)。Π系統(tǒng)動畫化從(g)到(h)的移動。背景層移動以背景層移動速率在第一方向上進(jìn)行。內(nèi)容層移動速率等于段首層移動速率，并且標(biāo)題層移動速率與內(nèi)容層移動速率、以及與段首層移動速率都不同。內(nèi)容層、段首層和標(biāo)題層彼此基本平行，并且彼此不重疊。內(nèi)容層、段首層和標(biāo)題層中的每一個都與背景層重疊。各層可包括鎖點(diǎn)。例如，包括內(nèi)容窗格的內(nèi)容層可具有基于內(nèi)容窗格的數(shù)量和/或位置來(自動地)確定的鎖點(diǎn)。可以以其他方式來設(shè)置鎖點(diǎn)。例如，鎖點(diǎn)可以基于一層前一狀態(tài)的某些方面，諸如，第一層中用戶界面元素的退出位置。第二層(例如，背景層、標(biāo)題層或段首層)中的鎖點(diǎn)可具有與第一層鎖點(diǎn)相對應(yīng)的第二層鎖點(diǎn)。移動速率可以基于鎖點(diǎn)之間的距離。例如，移動速率可以與第二層鎖點(diǎn)間的距離和對應(yīng)于第二層鎖點(diǎn)的第一層鎖點(diǎn)(例如，內(nèi)容層鎖點(diǎn))間的距離之間的差成比例。可以執(zhí)行鎖定動畫。例如，鎖定動畫包括確定一層中用戶界面元素中的閾值數(shù)量的像素是否位于顯示區(qū)域以內(nèi)，并且基于該判定，動畫化該層中從當(dāng)前位置到鎖定動畫后位置的轉(zhuǎn)移，使得該用戶界面元素在顯示區(qū)域中是可見的。作為另一個示例，鎖定動畫包括選擇一鎖點(diǎn)并動畫化一層中從當(dāng)前位置到鎖定動畫后位置的轉(zhuǎn)移，在鎖定動畫后位置中，所選擇的鎖點(diǎn)與顯示區(qū)域的一部分對齊。還可以動畫化其他轉(zhuǎn)移，諸如，第二層中從當(dāng)前第二層位置到對應(yīng)于第一層鎖定動畫后位置的第二層鎖定動畫后位置(例如，其中第二層鎖點(diǎn)與所選擇的第一層鎖點(diǎn)對齊的第二層位置)的轉(zhuǎn)移。作為另一個示例，鎖定動畫包括選擇與第一層(例如，內(nèi)容層)中的用戶界面元素(例如，內(nèi)容窗格)相關(guān)聯(lián)的第一層鎖點(diǎn)，以及動畫化該第一層中從當(dāng)前第一層位置到第一層鎖定動畫后位置的轉(zhuǎn)移，在該第一層鎖定動畫后位置中，所選擇的第一層鎖點(diǎn)與顯示區(qū)域的一部分對齊，使得該用戶界面元素在該顯示區(qū)域中是可見的。鎖定動畫可以基于用戶手勢來執(zhí)行。例如，可以基于輕拂手指的速度或輕擊手勢的位置來選擇鎖點(diǎn)?？梢詧?zhí)行包裝動畫。例如，在兩層中每一個包括起始和結(jié)束，并且在當(dāng)前位置顯示各層的結(jié)束時，執(zhí)行包裝動畫包括動畫化第一層中從當(dāng)前第一層位置到顯示第一層起始的包裝動畫后第一層位置的轉(zhuǎn)移，并且動畫化第二層中從當(dāng)前第二層位置到顯示第二層起始的包裝動畫后第二層位置的轉(zhuǎn)移。動畫化轉(zhuǎn)移可包括以與其他移動速率不同的包裝移動速 率來移動視覺信息?？梢曰谟脩糨斎雭碛?jì)算各層中的移動(例如，移動速率、方向、和當(dāng)前位置)。例如，當(dāng)前位置可以基于手勢的初始位置、以及方向和速度。還可基于其他層的位置來計(jì)算各層中的移動。例如，可以基于已計(jì)算的當(dāng)前第一層位置來計(jì)算當(dāng)前的第二層位置，諸如通過基于與第一層鎖點(diǎn)相對應(yīng)的第二層鎖點(diǎn)的位置來計(jì)算當(dāng)前第二層位置。手勢可包括例如平移、拖動、輕拂和輕擊交互?？赏ㄟ^確定手勢移動的速率是否超過一閾值來檢測輕拂。指示方向的手勢可導(dǎo)致所指示的方向或某個其他方向上的移動。例如，水平方向上的手勢可導(dǎo)致垂直或水平方向上的移動?？梢杂貌煌姆绞絹泶_定移動速率。例如，可以基于一層的運(yùn)動比率來計(jì)算該層的移動速率，其中運(yùn)動比率是該層的寬度除以另一層的最大寬度。作為另一個示例，移動速率可以基于第一層的長度與第二層的長度之間的差?？梢蕴砑痈郊訉印＠?，圖形用戶界面可包括與第一和第二層基本平行的第三層(或更多層)。各層中的移動速率可以與相應(yīng)層的長度之間的差成比例。在一個實(shí)現(xiàn)中，段首層位于顯示區(qū)域中的內(nèi)容層上面，標(biāo)題層位于顯示區(qū)域中的段首層上面，并且內(nèi)容層、段首層和標(biāo)題層與背景層重疊。參考附圖閱讀以下詳細(xì)描述，將更清楚本發(fā)明的前述和其他目標(biāo)、特征和優(yōu)點(diǎn)。附圖簡述圖I是示出根據(jù)一個或多個所描述的實(shí)施例的具有鎖點(diǎn)的背景層和內(nèi)容層的圖
/Jn ο圖2是示出根據(jù)一個或多個所描述的實(shí)施例的用于提供具有以不同速率移動的多層的用戶界面的示例技術(shù)的流程圖。圖3A-3C是示出根據(jù)一個或多個所描述的實(shí)施例的由多層UI系統(tǒng)呈現(xiàn)的圖形用戶界面中的多層的圖示。圖3D是示出根據(jù)一個或多個所描述的實(shí)施例的圖3A-3C的多層的圖示，其中顯示區(qū)域以橫向方式來定位。
圖4是示出根據(jù)一個或多個所描述的實(shí)施例的其中Π系統(tǒng)計(jì)算多層GUI中第一方向上的移動的示例技術(shù)的流程圖。圖5A- 是示出根據(jù)一個或多個所描述的實(shí)施例的多個Π層的圖示，層具有能夠以不同速率移動的不同部分。圖6A-6D是示出根據(jù)一個或多個所描述的實(shí)施例的多個Π層的圖示，其中兩個層前后移動。圖6E是不出根據(jù)一個或多個所描述的實(shí)施例的圖6A-6D的具有為內(nèi)容層中
圖7是示出根據(jù)一個或多個所描述的實(shí)施例的示例技術(shù)的流程圖，其中UI系統(tǒng)計(jì)算多層⑶I中第一方向上的移動，該多層⑶I具有包含可在與第一方向正交的第二方向上移動的UI元素的至少一層。圖8A-8C是示出根據(jù)一個或多個所描述的實(shí)施例的包括背景層的多個UI層的圖
/Jn ο圖9是示出了其中可實(shí)現(xiàn)所描述的實(shí)施例的多層UI系統(tǒng)的系統(tǒng)圖示。

圖10示出了可在其中實(shí)現(xiàn)若干所描述的實(shí)施例的合適計(jì)算環(huán)境的一個通用示例。圖11示出了可在其中實(shí)現(xiàn)一個或多個所描述的實(shí)施例的合適實(shí)現(xiàn)環(huán)境的通用示例。圖12示出了可在其中實(shí)現(xiàn)一個或多個所描述的實(shí)施例的移動計(jì)算設(shè)備的通用示例。
具體實(shí)施例方式描述了涉及用戶界面的不同方面的技術(shù)和工具，在該用戶界面中，彼此相關(guān)的視覺信息層以不同的速率移動。在一個實(shí)現(xiàn)中，響應(yīng)于用戶輸入，各層在同一方向上以是該層長度的函數(shù)的速率進(jìn)行移動。例如，圖形用戶界面(GUI)包括背景層、標(biāo)題層和內(nèi)容層。在特定方向上(例如，在水平維度中從左向右)用戶導(dǎo)航通過內(nèi)容層也導(dǎo)致在背景層和/或標(biāo)題層中的同一方向上的移動。移動的量和性質(zhì)依賴于一個或多個因素，諸如，層的相對長度、或?qū)?yīng)鎖點(diǎn)之間的相對距離。例如，如果內(nèi)容層比背景層長(就像素而言)，則內(nèi)容層比背景層(在像素的基礎(chǔ)上)移動得快。對此處所描述的實(shí)現(xiàn)的各種替換是可能的。例如，參考流程圖所描述的技術(shù)可以通過改變流程圖中所示的級的排序，通過重復(fù)或省略某些級等來改變。作為另一個示例，參考系統(tǒng)圖示所描述的系統(tǒng)可以通過改變圖中所示的處理階段的排序，通過重復(fù)或省略某些階段等來改變。作為另一個示例，參考圖示所描述的用戶界面可以通過改變圖中所示的用戶界面特征的內(nèi)容或安排，通過省略某些特征等來改變。作為另一個示例，雖然參考特定的設(shè)備和用戶輸入機(jī)制(例如，具有觸摸屏界面的移動設(shè)備)描述了某些實(shí)現(xiàn)，但所描述的技術(shù)和工具還可與其他設(shè)備和/或用戶輸入機(jī)制一同使用。各種技術(shù)和工具可組合或單獨(dú)使用。不同的實(shí)施例實(shí)現(xiàn)所描述的技術(shù)和工具的一個或多個。I.分層圖形用戶界面技術(shù)和工具
有效用戶界面的設(shè)計(jì)提出許多挑戰(zhàn)。一個挑戰(zhàn)是給定了顯示器的空間限制，如何為用戶提供最優(yōu)量的視覺信息或功能。這個挑戰(zhàn)對于具有小型顯示器的設(shè)備(諸如，智能電話或其他移動計(jì)算設(shè)備)會尤其棘手。這是因?yàn)橥ǔ４嬖诒冗m合于顯示器更多的可用信息或功能。通過將數(shù)據(jù)層放在彼此頂部并允許它們以不同的方式移動，圖形用戶界面能提供用戶正在查看的信息的上下文，即使存在與用戶當(dāng)前活動相關(guān)的、顯示器上不可見的更多信息。例如，內(nèi)容層可在至少某種程度上獨(dú)立地移動，允許用戶將內(nèi)容層的不同部分移入視圖和移出視圖，而與內(nèi)容層相關(guān)聯(lián)的另一層的某個部分保持可見，即使該其他層比內(nèi)容層移動程度小。所描述的技術(shù)和工具涉及將諸如圖形用戶界面(GUI)的用戶界面(UI)中的信息(例如，視覺信息、功能信息和元數(shù)據(jù))分隔成層(例如，平行的層或至少基本平行的層)，并以不同的方式(例如，以不同的速度)移動這些層。例如，所描述的實(shí)施例涉及多層UI系統(tǒng)，該系統(tǒng)呈現(xiàn)以相對于彼此不同速度移動的Π層。每層中移動的速率可依賴于若干因素，包括層中要可視地呈現(xiàn)(例如，文本或圖形)的數(shù)據(jù)量、或?qū)?yīng)鎖點(diǎn)之間的相對距離，這將在下 面更詳細(xì)地描述。層中要可視地呈現(xiàn)的數(shù)據(jù)量可通過例如確定如在數(shù)據(jù)的水平方向上測量的、如在顯示器上呈現(xiàn)的、或如為顯示器上可能呈現(xiàn)所布局的長度來測量。長度可以以像素或某個其他合適的度量(例如，文本串中字符的數(shù)量)來測量。具有較大數(shù)據(jù)量且以較快速率移動的層可比具有較小數(shù)據(jù)量且以較慢速率移動的層提前多個像素。層移動速率可以用不同的方式來確定。例如，可以從較快層的移動速率導(dǎo)出較慢層的移動速率，反之亦然?；蛘撸梢员舜霜?dú)立地確定層移動速率。UI各層中的移動通常在某種程度上依賴于用戶交互。例如，希望從層的一個部分導(dǎo)航到另一個部分的用戶提供指示所期望的移動方向的用戶輸入。該用戶輸入隨后可導(dǎo)致顯示器上一個或多個層中的移動。在某些實(shí)施例中，用戶通過與觸摸屏交互來引起在設(shè)備的顯示區(qū)域中可見的層的移動。該交互可包括例如用指尖、指示筆、或其他物體接觸觸摸屏(例如，輕拂或滑動運(yùn)動)，移動它穿過觸摸屏的表面以引起層在所期望的方向上移動。另選地，用戶可通過某些其它方式與層交互，諸如通過按壓鍵區(qū)或鍵盤上的按鈕(例如，方向性按鈕)、移動跟蹤球、用鼠標(biāo)定點(diǎn)并點(diǎn)擊、作出語音命令等。當(dāng)用戶交互引起層中的移動時，該層的移動通常是層的長度、用戶作出的運(yùn)動的尺寸、移動速率和方向的函數(shù)。例如，觸摸屏上的向左輕拂運(yùn)動產(chǎn)生各層相對于顯示區(qū)域的向左的移動。還可以相對于彼此來排列各層，使得各層在向用戶提供視覺上下文的同時能以不同的速率移動。例如，段首(例如，諸如“歷史”的文本串)可跨越內(nèi)容層中可見的和屏幕外的內(nèi)容(例如，表示當(dāng)前正在播放的媒體文件和最近播放過的媒體列表的圖像)，以與內(nèi)容層不同的速率移動，但提供內(nèi)容的上下文?？梢砸蕾囉趯?shí)現(xiàn)和/或用戶偏好，用不同的方式來解釋用戶輸入以在各層中產(chǎn)生不同種類的移動。例如，多層Π系統(tǒng)可將向左或向右的任何移動，甚至在水平平面以上或以下延伸的對角線移動解釋為一層的有效的向左或向右運(yùn)動，或者系統(tǒng)可要求更精確的移動。作為另一個示例，多層UI系統(tǒng)可以要求在移動一層之前，用戶同與由該層占據(jù)的顯示區(qū)域相對應(yīng)的觸摸屏的部分進(jìn)行交互，或者該系統(tǒng)可允許與觸摸屏的其他部分進(jìn)行交互以引起一層中的移動。作為另一個示例，用戶可使用向上或向下的運(yùn)動在未一次全部在顯示器上出現(xiàn)的內(nèi)容層的部分(諸如元素列表)中向上或向下滾動，并且這種向上/向下運(yùn)動甚至可與左/右運(yùn)動相組合以得到對角線移動效果。在各層中產(chǎn)生特定移動所必要的用戶運(yùn)動的實(shí)際量和方向可取決于實(shí)現(xiàn)或用戶偏好而變化。例如，多層UI系統(tǒng)可包括默認(rèn)設(shè)置，該默認(rèn)設(shè)置用于根據(jù)用戶移動的大小或移動速率(或速度)來計(jì)算一層中的運(yùn)動量(例如，按像素)。作為另一個示例，用戶可以調(diào)整觸摸屏敏感度控件，使得觸摸屏上指尖或指示筆的相同的運(yùn)動依賴于控件的設(shè)置而產(chǎn)生各層的或小或或大的移動。在某些實(shí)施例中，各層包括鎖點(diǎn)。各層中的鎖點(diǎn)指示設(shè)備的顯示區(qū)域?qū)⑴c之對齊的對應(yīng)位置。例如，當(dāng)用戶導(dǎo)航至內(nèi)容層上的一位置使得顯示區(qū)域的左邊緣位于左邊緣鎖點(diǎn)“A”時，該顯示區(qū)域的左邊緣也將與其他層中每一個的對應(yīng)的左邊緣鎖點(diǎn)“A”對齊。鎖點(diǎn)還可指示顯示區(qū)域的右邊緣的對齊(右邊緣鎖點(diǎn))，或其它類型的對齊(例如，中央鎖點(diǎn))。一般而言，定位每層中的對應(yīng)鎖點(diǎn)以便說明各層將以不同速度移動的事實(shí)。例如，如果內(nèi)容層中第一鎖點(diǎn)與第二鎖點(diǎn)之間的距離是背景層中對應(yīng)的第一和第二鎖點(diǎn)之間的距離的兩 倍，則背景層在兩個鎖點(diǎn)之間轉(zhuǎn)移時以內(nèi)容層一半的速率在移動。在圖I所示的示例中，背景層110和內(nèi)容層112具有對應(yīng)的左邊緣鎖點(diǎn)“A”、“C”、“E”和“G”，以及對應(yīng)的右邊緣鎖點(diǎn)“B”、“D”、“F”和“H”。左邊緣鎖點(diǎn)與顯示區(qū)域的左邊緣對齊(未示出)，并且右邊緣鎖點(diǎn)與顯示區(qū)域的右邊緣對齊。與鎖點(diǎn)相對應(yīng)的左邊緣或右邊緣對齊可包括鎖點(diǎn)與顯示區(qū)域邊緣的精確對齊，或者可包括鎖點(diǎn)與顯示區(qū)域邊緣之間的某些量的填充。在內(nèi)容層112中，左邊緣鎖點(diǎn)與內(nèi)容窗格(例如，分別是內(nèi)容窗格120、122、124和126)的左邊緣對齊，并且右邊緣鎖點(diǎn)與內(nèi)容窗格的右邊緣對齊。兩層110、112中的鎖點(diǎn)之間的映射由兩層之間的箭頭和背景窗格102中的虛線來指示。圖I中所示的鎖點(diǎn)通常不表示鎖點(diǎn)的完整集合。作為替換方案，鎖點(diǎn)可以指示其他種類的對齊。例如，中心鎖點(diǎn)可以指示與顯示區(qū)域的中心的對齊。作為另一個替換方案，可以使用更少的鎖點(diǎn)，或者可以使用更多的鎖點(diǎn)以便提供可顯示的區(qū)域之間的重疊。例如，鎖點(diǎn)可被限制為左邊緣或右邊緣鎖點(diǎn)，或者鎖點(diǎn)可用于一層的某些部分，而不用于其他部分。作為另一個替換方案，可以省略鎖點(diǎn)。除了指示層中的對應(yīng)位置以外，鎖點(diǎn)可以展示其他行為。例如，鎖點(diǎn)可以指示當(dāng)與該鎖點(diǎn)相對應(yīng)的層的部分進(jìn)入顯示器上的視圖時內(nèi)容層將移至的該層中的位置。例如當(dāng)圖像、列表或其他內(nèi)容元素部分地靠近顯示區(qū)域的左或右邊緣進(jìn)入視圖時，這是有用的——內(nèi)容層可通過移動該層使得顯示區(qū)域的邊緣與適當(dāng)?shù)逆i點(diǎn)對齊，自動地將內(nèi)容元素完整地帶入視圖。可在導(dǎo)航事件(諸如，輕拂或平移手勢)的結(jié)束處執(zhí)行鎖定動畫，以將各層與特定的鎖點(diǎn)對齊。在導(dǎo)航事件產(chǎn)生不與鎖點(diǎn)精確對齊的用戶生成的移動的情況下，鎖定動畫可用于對齊各層。作為示例，可在導(dǎo)航事件的結(jié)束處執(zhí)行鎖定動畫，該導(dǎo)航事件使內(nèi)容層移至兩個內(nèi)容窗格之間的位置(例如，兩個內(nèi)容窗格的部分在顯示區(qū)域中是可見的地方)。多層UI系統(tǒng)可以檢查哪個內(nèi)容窗格占據(jù)顯示區(qū)域中的更多空間，并使用鎖定動畫來轉(zhuǎn)移到該窗格。這可改善各層的總體外觀，并可有效地將信息或功能(例如，功能Π元素)帶入顯示區(qū)域的視圖中。鎖點(diǎn)還可用于在導(dǎo)航期間提供鎖定“凹槽”或“凸起”效果。例如，用戶沿著內(nèi)容層的長度導(dǎo)航時，該層可在用戶作出的每個導(dǎo)航移動(例如，觸摸屏上的輕拂或平移運(yùn)動)之后停在鎖點(diǎn)處(例如，在規(guī)律地隔開的間隔處、在內(nèi)容元素之間等)。各個層的移動可依賴于上下文而不同。例如，用戶可從內(nèi)容層的起始向左導(dǎo)航以到達(dá)內(nèi)容層的結(jié)束，并可從內(nèi)容層的結(jié)束向右導(dǎo)航以到達(dá)內(nèi)容層的起始。該包裝特征在導(dǎo)航通過內(nèi)容層時提供更多的靈活性。多層Π系統(tǒng)可用不同的方式來處理包裝。例如，可通過生成動畫來處理包裝，該動畫示出從層(諸如，標(biāo)題層或背景層)的結(jié)束回到層的起始的快速轉(zhuǎn)移，反之亦然。這種動畫可與內(nèi)容層中普通的平移移動、或內(nèi)容層中的其他動畫(諸如，鎖定動畫)相組合。然而，包裝功能不是必需的。示例I——多個UI層圖2是示出用于提供具有以不同速率移動的多層的用戶界面的示例技術(shù)200的流程圖。在210，多層Π系統(tǒng)提供用戶界面，該用戶界面包括(例如，在計(jì)算設(shè)備的顯示區(qū)域中)同時顯示的平行層。一般地，各層中至少一個的至少部分在顯示區(qū)域中是不可見的。在220，系統(tǒng)接收指示了要在一層中進(jìn)行移動的用戶輸入。例如，在內(nèi)容層延伸超出顯示區(qū)域 的右邊緣時，用戶可與觸摸屏進(jìn)行交互以引起內(nèi)容層中的平移運(yùn)動，以便查看內(nèi)容層的不同部分。在230，系統(tǒng)至少部分地基于依賴于用戶輸入，在平行層中以不同移動速率呈現(xiàn)移動。例如，系統(tǒng)可使內(nèi)容層以與觸摸屏上的平移手勢的速率相等的速率移動，并使標(biāo)題層和背景層以較慢的速率移動。圖3 A-3 C是示出設(shè)備的多層Π系統(tǒng)所呈現(xiàn)的⑶I中的多個層310、312、314的圖示，該設(shè)備具有帶有顯示區(qū)域300的顯示器。顯示區(qū)域300具有智能電話或類似的移動計(jì)算設(shè)備上的顯示器典型的尺寸。根據(jù)圖3 A -3 C中所示的示例，(手部圖標(biāo)所表示的)用戶302通過與具有顯示區(qū)域300的觸摸屏交互來與內(nèi)容層314進(jìn)行交互。該交互可包括例如用指尖、指示筆、或其他物體接觸觸摸屏，并移動它(例如，用輕拂或滑動運(yùn)動)穿過觸摸屏的表面。內(nèi)容層314包括內(nèi)容元素(例如，內(nèi)容圖像300A-H)。層310、312包括文本信息(分別是“Category (類別)”和“Selected Subcategory (所選擇的子類別)”)。內(nèi)容層314的長度被指示約為層312的長度的兩倍，而層312的長度被指示約為層310的長度的兩倍。在圖3A-3C中，可由用戶302引起的層的運(yùn)動方向由指向左的箭頭和指向右的箭頭來指示。這些箭頭響應(yīng)于用戶輸入，指示層310、312、314的可能的移動(例如，左或右水平移動)。在圖3A-3C所示的示例中，系統(tǒng)將用戶向左或右的移動、甚至是在水平面以上或以下延伸的對角線移動解釋為指示一層的有效的向左或向右運(yùn)動的輸入。雖然圖3A-3C中所示的示例示出了用戶302與對應(yīng)于內(nèi)容層314的顯示區(qū)域300部分進(jìn)行交互，但是系統(tǒng)不要求用戶與對應(yīng)于內(nèi)容層314所占據(jù)的顯示區(qū)域的觸摸屏部分進(jìn)行交互。相反，系統(tǒng)允許與觸摸屏的其他部分(例如，與其他層占據(jù)的顯示區(qū)域300部分相對應(yīng)的部分)進(jìn)行交互，以引起層310、312、314中的移動。當(dāng)用戶輸入指示向右或向左的運(yùn)動時，系統(tǒng)生成相對于顯示區(qū)域300的層310、312,314的向右或向左的移動。層310、312、314的移動量是各層中的數(shù)據(jù)以及用戶進(jìn)行的運(yùn)動的大小或移動速率(或速度)的函數(shù)。在圖3A-3C所示的示例中，除在包裝動畫期間以外，層310、312、314根據(jù)以下規(guī)則移動
I.內(nèi)容層314將以層312速率的大約兩倍的速率移動，層312是層314長度的大
約一半。2.內(nèi)容層312將以層310速率的大約兩倍的速率移動，層310是層312長度的大
約一半。3.內(nèi)容層314將以層310速率的大約四倍的速率移動，層310是層314長度的大約 1/4。在某些情況下，層310、312、314中的移動可與上面描述的規(guī)則不同。在圖3A-3C所示的示例中，許可包裝。箭頭指示用戶可從內(nèi)容層314的起始處(圖3A中示出的位置)向左導(dǎo)航，并可從內(nèi)容層314的結(jié)束處(圖3C中示出的位置)向右導(dǎo)航。在包裝動畫期間，一些層可比在其他種類的移動期間移動得更快或更慢。在圖3A-3C所示示例中，層310和層312中的文本在包裝回到內(nèi)容層的起始處時移動得更快。在圖3C中，顯示區(qū)域300分別示 出層310和312中相應(yīng)文本串的結(jié)束處的一個或兩個字母的部分。返回到圖3A中所示狀態(tài)的包裝動畫可包括將層310、312的文本從右側(cè)帶入視圖，得到比在其他上下文中更快速的移動，諸如從圖3A示出的狀態(tài)轉(zhuǎn)移到圖3B示出的狀態(tài)。在圖3A-3C中，為每層指示示例左邊緣“鎖點(diǎn)”和“C”。左邊緣鎖點(diǎn)指示在每層上顯示區(qū)域300的左邊緣的對應(yīng)位置。例如，當(dāng)用戶導(dǎo)航至內(nèi)容層314上的一位置使得顯示區(qū)域300的左邊緣位于鎖點(diǎn)“ A ”處時，該顯示區(qū)域的左邊緣也將在其他層310、312的鎖點(diǎn)“A”處對齊，如圖3 A所示。在圖3B中，顯示區(qū)域300的左邊緣位于層310、312、314的每一個中的鎖點(diǎn)“B”處。在圖3C中，顯示區(qū)域300的左邊緣位于各層每一個中的鎖點(diǎn)“C”處。圖3A-3C中所示的鎖點(diǎn)通常不表示鎖點(diǎn)的完整集合，并且僅為簡明起見被限制為鎖點(diǎn)和“C”。例如，可為內(nèi)容圖像330A-330H的每一個設(shè)置左邊緣鎖點(diǎn)?；蛘?，可以使用更少的鎖點(diǎn)，或者可以省略鎖點(diǎn)。作為替換方案，鎖點(diǎn)可指示其他種類的對齊。例如，右邊緣鎖點(diǎn)可指示與顯示區(qū)域300的右邊緣的對齊,或者中心鎖點(diǎn)可指示與顯示區(qū)域300的中心的對齊。示例2——顯示方向中的改變所描述的技術(shù)和工具可按照不同的方向(諸如橫向)被用在顯示屏幕上。例如Π已被(例如用戶偏好)配置為以橫向方式來定向，或者用戶已物理地旋轉(zhuǎn)了設(shè)備時，顯示方向中的改變會發(fā)生。設(shè)備中的一個或多個傳感器(例如，加速計(jì))可用于檢測設(shè)備何時已被旋轉(zhuǎn)，并由此調(diào)整顯示方向。在圖3D所示的示例中，以橫向方式來定向顯示區(qū)域，并且僅有層312和314是可見的。然而，內(nèi)容層的更多部分是可見的，允許用戶一次查看內(nèi)容層中的更多內(nèi)容(例如，內(nèi)容圖像330A-330D)?；蛘撸梢栽谶m當(dāng)時作出調(diào)整以保持所有層是可見的，諸如通過降低層的高度并減小字體和圖像大小。例如，可以降低層310和312的高度，并對應(yīng)地減小文本中字體的大小，使得在為便于導(dǎo)航使內(nèi)容層314保持相同大小的同時，層310和312仍是可見的。像圖3A-3C中那樣，用戶302可作出(橫向)向左或向右的運(yùn)動以沿著內(nèi)容層314導(dǎo)航。每層中鎖點(diǎn)和“C”的定位以及各層的相對長度示出了內(nèi)容層314將以其上的層312的約兩倍的速率來移動?；蛘?，可以動態(tài)地調(diào)整鎖點(diǎn)的位置和各鎖點(diǎn)之間的距離，以考慮重新定向的效果(例如，顯示區(qū)域的新的有效寬度)。但是，這些調(diào)整不是必需的。例如，如果顯示區(qū)域具有相等的高度和寬度，則將顯示區(qū)域重新定向?yàn)闄M向?qū)⒉粫淖冿@示區(qū)域的有效寬度。示例3——計(jì)算多個UI層中的移動圖4是示出其中Π系統(tǒng)計(jì)算多層⑶I (例如，圖3A-3C中所示的⑶I)中第一方向(例如，水平方向)上的移動的示例技術(shù)400的流程圖。在410，Π系統(tǒng)顯示包括多個層的圖形用戶界面。第一層(例如，內(nèi)容層314)中視覺信息的第一部分(例如，如圖3Α中所示的內(nèi)容圖像330)位于觸摸屏的顯示區(qū)域(例如，顯示區(qū)域300)內(nèi)。在420，UI系統(tǒng)接收與觸摸屏上的手勢相對應(yīng)的用戶輸入。在430，UI系統(tǒng)至少部分地基于用戶輸入來計(jì)算第一移動。第一移動是第一層從初始第一層位置(例如，圖3Α中所示的位置)到當(dāng)前第一層位置(例如，圖3 B中所示的位置)的移動，在初始第一層位置中，第一層中視覺信息的第二部分(例如，內(nèi)容圖像330C)位于顯示區(qū)域以外，在當(dāng)前第一層位置中，第一層中視覺信息的第二部分位于顯不區(qū)域內(nèi)。第一移動以第一移動速率 在第一方向上(例如，向右，水平方向)進(jìn)行。第一移動速率基于手勢的移動速率。例如，第一移動速率可基本上等于手勢移動速率(例如，用戶的手指或觸摸屏上其他物體的移動速率)，以便給用戶直接操縱觸摸屏上的內(nèi)容的感覺。在440，UI系統(tǒng)至少部分地基于用戶輸入來計(jì)算與第一移動基本平行的第二移動。第二移動是第二層(例如，層312)中視覺信息從初始第二層位置(例如，圖3Α中所示的位置)到當(dāng)前第二層位置(例如，圖3Β中所示的位置)的移動。第二移動以與第一移動速率不同的第二移動速率在第一方向上(例如，向右，水平方向)進(jìn)行。該移動可(例如，在移動電話或其他計(jì)算設(shè)備的觸摸屏上)被動畫化和/或呈現(xiàn)以
供顯示。示例4—以變化速度移動的各個層圖5Α- 是示出由具有三層510、512、514的多層Π系統(tǒng)所呈現(xiàn)的⑶I的圖示，其中段首層512的不同部分與內(nèi)容層514的不同部分相關(guān)聯(lián)。根據(jù)圖5Α- 所示的示例，用戶(未示出)與內(nèi)容層514交互。例如，用戶通過按壓導(dǎo)航按鈕(未示出)以突出顯示內(nèi)容層中的不同段(例如，段la、lb、lc、ld、2a、2b、2c、或2d)來對內(nèi)容層514導(dǎo)航?；蛘?，用戶通過與具有顯示區(qū)域300的觸摸屏交互來與內(nèi)容層514進(jìn)行交互。該交互可包括例如用指尖、指示筆、或其他物體接觸觸摸屏，并移動它(例如，用輕拂或滑動運(yùn)動)穿過觸摸屏的表面。內(nèi)容層514包括段la、lb、lc、ld、2a、2b、2c、和2d，這些段可以是圖像、圖標(biāo)、文本串或鏈接的列表、或某些其它內(nèi)容。其他層510、512包括文本信息。段首層512包括兩個文本串(“Feature I (特征I)”和“Feature2 (特征2)”)。“特征I”與段la、lb、Ic和Id相關(guān)聯(lián)?！癋eature 2”與段2a、2b、2c和2d相關(guān)聯(lián)。層510包括一個文本串(“Application(應(yīng)用)”)。內(nèi)容層514的長度被指示為比段首層512的總長度(例如，兩個串的組合長度)長，并且比層510的長度長。在圖5A-5D中，可由用戶指示的運(yùn)動方向由顯示區(qū)域300上的指向左和指向右的箭頭來指示。這些箭頭響應(yīng)于用戶輸入，指示層510、512、514的可能的移動(左或右水平的移動)。在圖5A- 所示的示例中，用戶在內(nèi)容層514中向左或向右導(dǎo)航時，突出顯示內(nèi)容層514的不同段(例如，圖5A中的段la、圖5B中的段Id、圖5C中的段2a、圖中的段2d)。當(dāng)用戶輸入指示向右或向左的運(yùn)動時，系統(tǒng)生成相對于顯示區(qū)域300的層510、512、514的向右或向左的移動。層510、512、514的移動量是各層中的數(shù)據(jù)以及用戶進(jìn)行的運(yùn)動的大小或移動速率(或速度)的函數(shù)。在圖5A-5D中，為每層510、512、514指示示例右邊緣“鎖點(diǎn)” “A”、“B”、“C”和“D”。每層的右邊緣鎖點(diǎn)指示在每層上顯示區(qū)域300的右邊緣的對應(yīng)位置。例如，當(dāng)用戶導(dǎo)航至內(nèi)容層514上的段la，且顯示區(qū)域300的右邊緣位于鎖點(diǎn)“ A ”處時，該顯示區(qū)域300的右邊緣還將在其他層510、512的鎖點(diǎn)“ A ”處對齊，如圖5 A所示。在圖5B中，顯示區(qū)域300的右邊緣位于層510、512、514的每一個中的鎖點(diǎn)“B”處。在圖5C中，顯示區(qū)域300的右邊緣位于層510、512、514的每一個中的鎖點(diǎn)“C”處。在圖中，顯示區(qū)域300的右邊緣位于層510、512、514的每一個中的鎖點(diǎn)“D”處。圖5A-5D中所示的鎖點(diǎn)通常不表示鎖點(diǎn)的完整集合，并且僅為簡明起見被限制為鎖點(diǎn)“A”、“B”、“C”和“D”。例如，可為內(nèi)容層514中的一個或多個段設(shè)置左邊緣鎖點(diǎn)?；蛘?，可以使用附加的右邊緣鎖點(diǎn)，可使用更少的鎖點(diǎn)，或者可以省略鎖點(diǎn)。作為替換方案，鎖點(diǎn)可指示其他種類的對齊。例如，中心鎖點(diǎn)可用于獲得與顯示區(qū)域300的中心的對齊。 在圖5A- 所示的示例中，除在包裝動畫期間以外，層510、512、514根據(jù)以下規(guī)則移動I.與段首層512中“Feature I”文本串相關(guān)聯(lián)的內(nèi)容層514的部分(段la、lb、Ic和Id)將以約四倍于“Feature I”文本串的速率來移動。雖然“Feature I”文本串是與該“Feature I”文本串相關(guān)聯(lián)的內(nèi)容層514的部分(段la、lb、Ic和Id)的長度的約一半,但在內(nèi)容層中要從右邊緣鎖點(diǎn)“A”移動到右邊緣鎖點(diǎn)“B”的距離是段首層512中對應(yīng)鎖點(diǎn)之間的距離約四倍長。類似地，與段首層512中“Feature 2”文本串相關(guān)聯(lián)的內(nèi)容層514的部分(段2a、2b、2c和2d)將以約四倍于“ Feature 2 ”文本串的速率來移動。2.當(dāng)導(dǎo)航通過與段首層512中“Feature I”文本串相關(guān)聯(lián)的內(nèi)容層514的部分(段la、lb、Ic和Id)時，“Feature I”文本串將以約兩倍于層510的速率來移動。雖然“Feature I”文本串與層510中的“Application”文本串幾乎一樣長，但在層510中要從右邊緣鎖點(diǎn)“A”移動到右邊緣鎖點(diǎn)“B”的距離是段首層512中對應(yīng)鎖點(diǎn)之間距離的約一半。類似地，當(dāng)導(dǎo)航通過與段首層512中“Feature 2”文本串相關(guān)聯(lián)的內(nèi)容層514的部分(段2a、2b、2c和2d)時，“Feature 2”文本串將以約兩倍于層510的速率來移動。3.當(dāng)從與段首層512中“Feature I”文本串相關(guān)聯(lián)的內(nèi)容層514的部分導(dǎo)航至與段首層512中“Feature 2”文本串相關(guān)聯(lián)的內(nèi)容層514的部分(即，從圖5B所示的段Id到圖5C所示的段2a)時，段首層512移動得更快，如由圖5C的層512中右邊緣鎖點(diǎn)“B”與右邊緣鎖點(diǎn)“C”之間的距離所示。4.內(nèi)容層514將以約八倍于層310的速率來移動。在內(nèi)容層514中相鄰右邊緣鎖點(diǎn)之間(例如，從“A”到“B”)移動的距離是層510中對應(yīng)右邊緣鎖點(diǎn)之間的距離約八倍長。在某些情況下，層510、512、514中的移動可與上面描述的規(guī)則不同。在圖5A- 所示的示例中，許可包裝。顯示區(qū)域300上面的箭頭指示了用戶可從內(nèi)容層514的起始處(圖5A中示出的位置)向左導(dǎo)航，并可從內(nèi)容層514的結(jié)束處(圖中示出的位置)向右導(dǎo)航。在包裝動畫期間，一些層可比在其他種類的移動期間移動得更快或更慢。例如，從圖中所示狀態(tài)返回到圖5A中所示狀態(tài)的包裝動畫可包括將層510、512的文本從右側(cè)帶入視圖，得到比在其他上下文中更快的移動，諸如從圖5A中所示的狀態(tài)轉(zhuǎn)移到圖5B中所示的狀態(tài)。示例5——前后移動的層圖6A-6D是示出多層Π系統(tǒng)所呈現(xiàn)的⑶I的圖示，該多層Π系統(tǒng)包括與其上的層612前后(B卩，在同一方向上且以同一速率)移動的內(nèi)容層614。在該示例中，(手部圖標(biāo)所表示的)用戶302通過與具有顯示區(qū)域300的觸摸屏進(jìn)行交互來導(dǎo)航通過內(nèi)容層614。該交互可包括例如用指尖、指示筆、或其他物體接觸觸摸屏，并移動它(例如，用輕拂或滑動運(yùn)動)穿過觸摸屏的表面。內(nèi)容層614包括游戲圖像640、642、644，列表650、652、654，以及化身630 (下面更詳細(xì)地描述)。其他層610、612包括文本信息(層610中的“Games (游戲)”，層612中的“Spotlight (焦點(diǎn))”、“Xbox Live”、“Requests (請求)”和 “Collection (集合)”)。在圖6A-6D中，為層610和612指示示例鎖點(diǎn)“A”、“B”、“C”和“D”。就水平運(yùn)動而言，內(nèi)容層614被鎖定到層612，為層612指示的鎖點(diǎn)也應(yīng)用到層614。
每層的鎖點(diǎn)指示每層上的顯示區(qū)域300的左邊緣的對應(yīng)位置。例如，當(dāng)用戶導(dǎo)航至內(nèi)容層614上的一位置使得顯示區(qū)域300的左邊緣位于鎖點(diǎn)“ A ”處時，該顯示區(qū)域300的左邊緣也將在其他層610、612的鎖點(diǎn)“A”處對齊，如圖6 A所示。在圖6B中，顯示區(qū)域300的左邊緣位于層610、612、614的每一個中的鎖點(diǎn)“B”處。在圖6C中，顯示區(qū)域300的左邊緣位于層610、612、614的每一個中的鎖點(diǎn)“C”處。在圖6D中，顯示區(qū)域300的左邊緣位于層610、612、614的每一個中的鎖點(diǎn)“D”處。圖6A-6D中所示的鎖點(diǎn)通常不表示鎖點(diǎn)的完整集合，并且僅為簡明起見被限制為鎖點(diǎn)“A”、“B”、“C”和“D”。例如，可以添加右邊緣鎖點(diǎn)以獲得與顯示區(qū)域300的右邊緣的對齊，或者可以添加中心鎖點(diǎn)以獲得與顯示區(qū)域300的中心的對齊?；蛘撸墒褂酶俚逆i點(diǎn)，可使用更多的鎖點(diǎn)，或者可以省略鎖點(diǎn)。可由用戶302在層610、612、614中引起的運(yùn)動的方向由圖6A-6D中指向左的箭頭和指向右的箭頭來指示。指向右和指向左的箭頭響應(yīng)于用戶移動，指示層610、612、614的可能的移動(左或右的水平的移動)。系統(tǒng)將用戶向左或右的移動、甚至在水平面以上或以下延伸的對角線移動解釋為指示一層的有效的向左或向右運(yùn)動。雖然圖6A-6E中所示的示例示出了用戶302與對應(yīng)于內(nèi)容層614的顯示區(qū)域300的部分進(jìn)行交互，但是系統(tǒng)不要求用戶與對應(yīng)于內(nèi)容層614所占據(jù)的顯示區(qū)域的觸摸屏部分進(jìn)行交互。相反，系統(tǒng)還允許與觸摸屏的其他部分(例如，與其他層占據(jù)的顯示區(qū)域相對應(yīng)的部分)進(jìn)行交互，以引起層610、612、614中的移動。當(dāng)用戶輸入指示向右或向左的運(yùn)動時，系統(tǒng)生成相對于顯示區(qū)域300的層610、612、614的向右或向左的移動。在該示例中，層610、612、614的水平移動量是各層中的數(shù)據(jù)以及用戶進(jìn)行的運(yùn)動的大小或速率的函數(shù)。除在包裝動畫期間以外，層610、612、614根據(jù)以下規(guī)則水平地移動I.內(nèi)容層614的水平移動被鎖定到層612。2.層612和614每一個將以約三倍于層610的速率水平地移動，層610是層612和614的長度的約1/3。在某些情況下，層610、612、614中的移動可與上面描述的規(guī)則不同。在圖6A-6E所示的示例中，許可包裝。箭頭指示了用戶可從內(nèi)容層614的起始處(圖6A和6E中示出的位置)向左導(dǎo)航，并可從內(nèi)容層614的結(jié)束處(圖6D中示出的位置)向右導(dǎo)航。在包裝動畫期間，一些層可比在其他種類的移動期間移動得更快或更慢。在圖6A和6D所示的示例中，層610中的文本在包裝回到內(nèi)容層614的起始處時移動得更快。在圖6D中，顯示區(qū)域300在“Games”文本串的結(jié)束處示出層610中兩個字母的部分。返回到圖6A中所示狀態(tài)的包裝動畫可包括將層610、612、614中的數(shù)據(jù)(包括層610的文本)從右側(cè)帶入視圖，得到比在其他上下文中更快的移動，諸如從圖6A示出的狀態(tài)轉(zhuǎn)移到圖6B示出的狀態(tài)。
_ 1 ] 示例6——層元素的移動除了整個層的移動以外，用戶還可依賴于層中的數(shù)據(jù)以及如何排列該層，來引起層的元素或部分中的移動。例如，用戶可在層元素(例如，列表)中引起與作為整體在一層中被引起的移動(例如，水平移動)正交或基本正交的移動(例如，垂直移動)。水平移動的層中層元素的正交移動可包括諸如當(dāng)嵌入到內(nèi)容層中的列表包含了比可被顯示在顯示區(qū)域中的更多的信息時，在列表中垂直地滾動。或者，呈現(xiàn)垂直移動的層的系統(tǒng)可允許層元素中的水平移動。在圖6A和6E中，內(nèi)容層614中的列表650包含比在顯示區(qū)域300中可見的更多的信息。系統(tǒng)可將用戶302作出的向上或向下移動(包括延伸到垂直平面的左側(cè)或右側(cè)的對角線移動)解釋為列表650的有效的向上或向下運(yùn)動。列表650的移動量可以是用戶302作出的運(yùn)動的大小或速率、以及列表650中數(shù)據(jù)的函數(shù)。因此，列表650的滾動可以是逐項(xiàng)的、逐項(xiàng)的頁的、或其間的依賴于運(yùn)動的大小或速率的某個依據(jù)。在該示例中，在圖6A中，列表650包括在顯不區(qū)域300中不可見的僅一個列表項(xiàng)，因此一系列小的或大的向下移動足以滾動到列表650的結(jié)束。如圖6A和6E中所示，層中其他視覺信息(例如，內(nèi)容層614中列表650以外的視覺信息，或其他層中的視覺信息)的垂直位置不受向上或向下移動的影響。在該示例中，各層作為整體的移動(包括作為整體影響各層的包裝動畫和鎖定動畫)被約束為水平運(yùn)動(運(yùn)動的主軸)。列表650是還許可沿著次軸的運(yùn)動(例如，垂直運(yùn)動)的一層中用戶界面元素的示例，該沿著次軸的運(yùn)動與層中作為整體的運(yùn)動正交。圖6A和6E示出了用戶302與對應(yīng)于內(nèi)容層614中列表650的顯示區(qū)域300的一部分進(jìn)行交互?；蛘?，系統(tǒng)可允許與觸摸屏的其他部分(例如，與其他層占據(jù)的顯示區(qū)域300的部分相對應(yīng)的部分)的交互，以引起列表650中的向上或向下移動。在圖6A和6E中，可由用戶302引起的運(yùn)動方向由指向左的箭頭和指向右的箭頭、以及圖6A中附加的指向下的箭頭和圖6E中附加的指向上的箭頭來指示。指向右和指向左的箭頭響應(yīng)于用戶移動，指示層610、612、614的可能的移動(左或右的水平的移動)。指向下和指向上的箭頭響應(yīng)于用戶移動，指示列表650的可能的移動(上或下的垂直的移動)。用戶302可在列表650中作出向上或向下移動之后在內(nèi)容層614中向左或向右移動。可以保存列表650的當(dāng)前位置(例如，圖6E中指示的列表底部的位置)，或者系統(tǒng)可在從列表650向左或向右在內(nèi)容層614中導(dǎo)航時回復(fù)到默認(rèn)位置(例如，圖6A中指示的列表頂部的位置)。雖然在圖6A-6E (和其他附圖)中出于解釋目的示出了指示可能的移動的箭頭，但顯示區(qū)域300本身可顯示層和/或列表的可能移動的圖形指示符(諸如箭頭或人字形符號)。示例7——具有能夠正交移動的元素的層中的移動、圖7是示出其中Π系統(tǒng)計(jì)算多層⑶I (圖6A-6E中示出的⑶I)中第一方向(例如，水平方向)上的移動的不例技術(shù)700的流程圖,該多層GUI具有包含可在與第一方向正交(或基本正交)的第二方向上移動的π元素的至少一層。在710，UI系統(tǒng)顯示包括多個層的圖形用戶界面。第一層(例如，內(nèi)容層614)包括可用于在與第一方向(例如，水平方向)基本正交的第二方向(例如，垂直方向)上移動的用戶界面兀素(例如，列表650)。第一層中視覺信息的第一部分(例如,如圖6B所不的列表652)位于觸摸屏的顯示區(qū)域(例如,顯示區(qū)域300)內(nèi)。在720，UI系統(tǒng)接收與觸摸屏上的第一手勢相對應(yīng)的第一用戶輸入。在730，UI系統(tǒng)至少部分地基于第一用戶輸入來計(jì)算第一移動。第一移動是第一層從初始第一層位置(例如，圖6B中所示的位置)到當(dāng)前第一層位置(例如，圖6A中所示的位置)的移動，在初始第一層位置中，第一層中視覺信息的第二部分(例如，列表650)位于顯示區(qū)域以外，在當(dāng)前第一層位置中，第一層中視覺信息的第二部分位于顯不區(qū)域內(nèi)。第一移動以第一移動速率在第一方向上(例如，向左，水平方向)進(jìn)行。在740, UI系統(tǒng)至少部分地基于第一用戶輸入來計(jì)算與第一移動基本平行的第二移動。第二移動是第二層中的視覺信息從初始第二層位置(例如，圖6B中所示的位置)到當(dāng)前第二層位置(例如，圖6A中所示的位置)的移動。第二移動以與第一移動速率不同的第二移動速率在第一方向上(例如，向左，水平方向)進(jìn)行。在750，Π系統(tǒng)接收與觸摸屏上的第二手勢相對應(yīng)的第二用戶輸入。在760，Π系統(tǒng)至少部分地基于第二用戶輸入來計(jì)算基本正交的移動(例如，垂直移動)。該基本正交的移動是第一層的用戶界面元素中的視覺信息從初始元素位置到當(dāng)前元素位置的的移動?；菊坏囊苿涌梢允强纱怪睗L動的元素(例如，列表650)中的視覺信息從初始垂直位置(例如，圖6Α中所示的列表650的位置)到當(dāng)前垂直位置(例如，圖6Ε中所示的列表650的位置)的移動?？苫诶绯跏即怪蔽恢煤偷诙謩莸乃俣葋碛?jì)算當(dāng)前垂直位置?？纱怪睗L動的元素中的視覺信息的一部分可在可垂直滾動的元素在初始垂直位置(例如，圖6Α中所示的列表650的位置)時位于顯示區(qū)域以外，并在可垂直滾動的元素在當(dāng)前垂直位置(例如，圖6Ε中所不的列表650的位置)時位于顯不區(qū)域內(nèi)。
該移動可(例如，在移動電話或其他計(jì)算設(shè)備的觸摸屏上)被動畫化和/或呈現(xiàn)以
供顯示。示例8——化身層可包括指示其他元素(諸如，一層中的其他元素或一層的各段)之間的關(guān)系的元素。指示其他元素之間的關(guān)系的元素可被包含在單獨(dú)的層中、或與相應(yīng)的其他元素相同的層中。例如，化身層可包括視覺元素(化身)，該視覺元素的運(yùn)動范圍橫跨與用戶有關(guān)的另一層中的兩個相關(guān)段。其他元素也可用于指示元素之間的關(guān)系。例如，音樂藝術(shù)家的圖像可用于指示該藝術(shù)家的專輯列表與該藝術(shù)家的巡演日期列表之間的關(guān)系。在圖6Α-6Ε中，化身630與內(nèi)容層中的列表652、654，以及層612中的列表652、654上面的首部(分別是“Xbox Live”和“Requests”)相關(guān)聯(lián)?；?30可提供視覺線索以指示內(nèi)容層的各部分(例如，列表652、654)之間的關(guān)系或吸引對內(nèi)容層的各部分的注意力。在圖6B中，將化身630定位在列表652和列表654之間。在圖6C中，化身630浮在列表654的文本后面，但仍全部保留在顯示區(qū)域300內(nèi)。在圖6D中，化身630僅部分地位于顯示區(qū)域300內(nèi)，并且位于顯示區(qū)域300內(nèi)的部分浮在游戲圖標(biāo)640、642、644后面。在顯示區(qū)域300左邊緣的化身630的定位可向用戶302指示若該用戶302在化身630的方向上導(dǎo)航，則與該化身630相關(guān)聯(lián)的信息(例如,列表652、654)是可用的?；?30可以按變化的速度移動。例如，化身630在圖6B與圖6C之間的轉(zhuǎn)移中比在圖6C與圖6D之間的轉(zhuǎn)移
中移動得快?；蛘?，化身630可按不同的方式來移動，或展示其他功能。例如，化身630可被鎖定到內(nèi)容層614或某個其他層中的特定位置(例如，鎖點(diǎn))，使得化身630以與其被鎖定到的層相同的水平速率來移動。作為另一個替換方案，化身630可與可被向上或向下滾動的列表(諸如，列表650)相關(guān)聯(lián)，并在相關(guān)聯(lián)的列表被向上或向下滾動時向上或向下移動。示例9——背景層圖8A-8C是示出由具有三層310、312、314和背景層850的多層Π系統(tǒng)所呈現(xiàn)的GUI的圖示。在該示例中，(手部圖標(biāo)所表示的)用戶302通過與具有顯示區(qū)域300的觸摸屏交互來與內(nèi)容層314進(jìn)行交互。 背景層850浮在其他層后面。要在背景層850中視覺地呈現(xiàn)的數(shù)據(jù)可包括例如延伸到顯示區(qū)域300的邊界以外的圖像。內(nèi)容層314包括內(nèi)容元素(例如，內(nèi)容圖像300A-H)。層 310、312 包括文本信息(分別是“Category”和“Selected Subcategory”)。內(nèi)容層 314的長度被指示約為層312的長度的兩倍，而層312的長度進(jìn)而被指示約為層310的長度的兩倍。背景層850的長度被指示為比層312的長度稍短。在圖8A-8C中，可由用戶302引起的層310、312、314、850中的運(yùn)動的方向由指向左的箭頭和指向右的箭頭來指示。這些箭頭響應(yīng)于用戶移動，指示層310、312、314、850的可能的移動(左或右的水平的移動)。在該示例中，系統(tǒng)將用戶向左或右的移動、甚至在水平面以上或以下延伸的對角線移動解釋為指示一層的有效的向左或向右運(yùn)動。雖然圖8A-8C示出了用戶302與對應(yīng)于內(nèi)容層314的顯示區(qū)域300的一部分進(jìn)行交互，但系統(tǒng)還允許與觸摸屏的其他部分(例如，與其他層所占據(jù)的顯示區(qū)域300的部分相對應(yīng)的部分)交互以引起層310、312、314、850中的移動。當(dāng)用戶輸入指示向右或向左運(yùn)動時，系統(tǒng)生成相對于顯示區(qū)域300的層310、312、314,850的向右或向左的移動。層310、312、314、850的移動量是各層中的數(shù)據(jù)以及用戶進(jìn)行的運(yùn)動的大小或移動速率(或速度)的函數(shù)。在圖8A-8C中，為層310、312、314、850指示示例左邊緣鎖點(diǎn)“A”、“B”和“C”。左邊緣鎖點(diǎn)指示在每層上顯示區(qū)域300的左邊緣的對應(yīng)位置。例如，當(dāng)用戶導(dǎo)航至內(nèi)容層314上的一位置使得顯示區(qū)域300的左邊緣位于鎖點(diǎn)“ A”處時，該顯示區(qū)域300的左邊緣也將在其他層310、312、850的鎖點(diǎn)“ A”處對齊，如圖8 A所示。在圖8B中，顯示區(qū)域300的左邊緣位于層310、312、314、850的每一個中的鎖點(diǎn)“B”處。在圖8C中，顯示區(qū)域300的左邊緣位于層310、312、314、850的每一個中的鎖點(diǎn)“C”處。圖8A-8C中所示的鎖點(diǎn)通常不表示鎖點(diǎn)的完整集合，并且僅為簡明起見被限制為鎖點(diǎn)和“C”。例如，可為內(nèi)容圖像330A-330H的每一個設(shè)置左邊緣鎖點(diǎn)?；蛘撸梢允褂酶俚逆i點(diǎn)，或者可以省略鎖點(diǎn)。作為替換方案，鎖點(diǎn)可指示其他種類的對齊。例如，右邊緣鎖點(diǎn)可指示與顯示區(qū)域300的右邊緣的對齊,或者中心鎖點(diǎn)可指示與顯示區(qū)域300的中心的對齊。在該示例中，除在包裝動畫期間以外，層310、312、314、850根據(jù)以下規(guī)則來移動I.內(nèi)容層314將以約兩倍于層312的速率移動，層312是層314的長度的大約一半。
2.層312將以約兩倍于層310的速率移動，層310是層312的長度的大約一半。3.內(nèi)容層314將以約四倍于層310的速率移動，層310是層314的長度的約1/4。4.背景層850將比層310移動得更慢。雖然背景層850比層310長，但要在層310中相鄰鎖點(diǎn)(例如，鎖點(diǎn)“A”和“B”)之間移動的距離比背景層850中對應(yīng)鎖點(diǎn)之間的距離大。在某些情況下，層310、312、314、850的移動可與上面描述的規(guī)則不同。在該示例中，許可包裝。用戶可從內(nèi)容層314的起始處(圖8A中示出的位置)向左導(dǎo)航，并可從內(nèi)容層314的結(jié)束處(圖SC中示出的位置)向右導(dǎo)航。在包裝動畫期間，一些層可比在其他種類的移動期間移動得更快或更慢。在該示例中，當(dāng)用戶輸入引起回到內(nèi)容層314的起始的包 裝時，背景層850中的圖像和層310、312中的文本移動得更快。在圖8C中，顯示區(qū)域300分別示出層310和312中相應(yīng)文本串的結(jié)束處的一個和兩個字母的部分。顯示區(qū)域300還示出背景層850中的圖像的最右側(cè)部分。返回圖8A中所示狀態(tài)的包裝動畫可包括將背景層850中圖像的最左側(cè)部分、和層310、312中文本的起始從右側(cè)帶入視圖。這引起層310、312和850中比在其他上下文中更快的移動，諸如從圖8A所示的狀態(tài)轉(zhuǎn)移到圖SB所示的狀態(tài)。示例10-多層UI系統(tǒng)圖9是示出在設(shè)備(例如，智能電話或其他移動計(jì)算設(shè)備)上呈現(xiàn)多個Π層的示例多層UI系統(tǒng)900的系統(tǒng)圖示。系統(tǒng)900可用于實(shí)現(xiàn)在其他示例中描述的功能、或其他功倉泛。在該示例中，系統(tǒng)900包括中樞(hub)模塊910，該中樞模塊910向?qū)涌丶?20提供中樞頁的聲明性描述，該層控件920控制對平行UI層的顯示。層控件920也可被稱為“全景(panorama)”或“全(pano)”控件。當(dāng)UI層以全景或水平方式移動時，可使用這樣的描述。或者，層控件920控制垂直地或以某種其他方式移動的UI層。層控件920包括標(biāo)記生成器930和運(yùn)動模塊940。在該示例中，層控件920控制UI元素的若干層例如，背景層、標(biāo)題層、段首層和內(nèi)容層。內(nèi)容層包括內(nèi)容窗格集合。內(nèi)容窗格可包括例如圖像、圖形圖標(biāo)、列表、文本或要被視覺地呈現(xiàn)的其他信息。內(nèi)容層中的內(nèi)容窗格集合可被稱為一代內(nèi)容窗格?；蛘?，層控件920控制比三層更多或更少的層、或不同種類的層。中樞頁的聲明性描述包括定義Π元素的信息。在多層Π系統(tǒng)中，Π元素可包括多個層，諸如背景層、標(biāo)題層、段首層和內(nèi)容層。向標(biāo)記生成器930提供中樞頁的聲明性描述、以及其他信息，諸如樣式信息和/或配置屬性。標(biāo)記生成器930生成可用于呈現(xiàn)UI層的標(biāo)記。運(yùn)動模塊940接受響應(yīng)于用戶輸入而生成的事件(例如，直接的UI操縱事件)，并生成運(yùn)動命令。向UI框架950提供運(yùn)動命令以及標(biāo)記。在UI框架950中，在布局模塊952中接收該標(biāo)記和運(yùn)動命令，該布局模塊952生成要被發(fā)送到設(shè)備操作系統(tǒng)(0S)960的UI呈現(xiàn)請求。設(shè)備OS 960接收呈現(xiàn)請求，并使所呈現(xiàn)的UI被輸出到設(shè)備上的顯示器。還可將諸如中樞模塊910、層控件920和UI框架950的系統(tǒng)組件實(shí)現(xiàn)為設(shè)備OS 960的一部分。在一個實(shí)現(xiàn)中，設(shè)備OS 960是移動計(jì)算設(shè)備OS。用戶(未示出)可生成影響呈現(xiàn)Π的方式的用戶輸入。在圖9所示的示例中，層控件940監(jiān)聽UI框架950所生成的直接UI操縱事件。在UI框架950中，直接Π操縱事件由交互模塊954生成，該交互模塊從設(shè)備OS 960接收手勢消息(例如，響應(yīng)于與設(shè)備上的觸摸屏交互的用戶的平移或輕拂手勢而生成的消息)。設(shè)備OS 960包括用于識別用戶手勢并創(chuàng)建可由UI框架950使用的消息的功能。UI框架950將手勢消息轉(zhuǎn)換成要發(fā)送到層控件920的直接UI操縱事件。交互模塊954還可接受并生成直接UI操縱事件，以得到響應(yīng)于其他種類的用戶輸入(諸如，語音命令、小鍵盤或鍵盤上的方向按鈕、跟蹤球運(yùn)動等)而生成的導(dǎo)航消息。示例11——詳細(xì)的實(shí)現(xiàn)該示例描述了包括上面描述的示例的各方面以及其他方面的詳細(xì)的實(shí)現(xiàn)。該詳細(xì)的實(shí)現(xiàn)可由多層UI系統(tǒng)(諸如，上面描述的系統(tǒng)900)或某個其他系統(tǒng)來實(shí)現(xiàn)。在該示例中，系統(tǒng)900呈現(xiàn)水平地移動的多個平行的UI層(例如，背景層、標(biāo)題層、段首層和內(nèi)容層)。內(nèi)容層包括若干內(nèi)容窗格。每個內(nèi)容窗格包括右鎖點(diǎn)和左鎖點(diǎn)。A.初始化
為了初始化平行的Π層，系統(tǒng)900獲得關(guān)于背景層、標(biāo)題層、段首層和內(nèi)容層的有效長度的信息。(對于水平地移動的UI層，有效長度可被認(rèn)為是Π層的有效寬度。)系統(tǒng)900可通過在內(nèi)容窗格接近顯示區(qū)域時動態(tài)地創(chuàng)建內(nèi)容窗格時來減少存儲器和處理需求，但是這會使確定內(nèi)容層的有效寬度更為困難。在該示例中，為了在初始化時確定內(nèi)容層的有效寬度，系統(tǒng)900基于每個內(nèi)容窗格的最大寬度來確定最大的內(nèi)容層寬度，并且計(jì)算不重疊的全部內(nèi)容窗格的最大寬度的總和?？赏ㄟ^例如將內(nèi)容層劃分成顯示區(qū)域?qū)挾鹊脑隽縼懋a(chǎn)生不重疊的內(nèi)容窗格，自動地設(shè)置內(nèi)容層中(內(nèi)容窗格)的鎖點(diǎn)?；蛘?，可通過確定有多少個完整的內(nèi)容圖像η適于一個內(nèi)容窗格，并且每η個內(nèi)容圖像開始一個新的內(nèi)容窗格直到每個內(nèi)容圖像位于至少一個內(nèi)容窗格中(這潛在地生成重疊的內(nèi)容窗格)，來在內(nèi)容層中設(shè)置鎖點(diǎn)?；谶\(yùn)動比率來計(jì)算層中的運(yùn)動。例如，系統(tǒng)900通過將背景層的寬度和標(biāo)題層的寬度分別除以內(nèi)容層的最大寬度來計(jì)算背景層和標(biāo)題層的運(yùn)動比率?？紤]到背景層和標(biāo)題層的寬度，系統(tǒng)900基于內(nèi)容層中對應(yīng)鎖點(diǎn)的位置分別映射背景層和標(biāo)題層中的鎖點(diǎn)的位置。在圖I中示出背景層中的這種位置映射的示例。在移動對應(yīng)層時使用鎖點(diǎn)。例如，當(dāng)系統(tǒng)900動畫化到內(nèi)容層中的窗格的轉(zhuǎn)移時，該系統(tǒng)為背景層和標(biāo)題層查找合適的鎖點(diǎn)位置，并向各層發(fā)出滾動到那些位置的命令，依賴于相應(yīng)層中鎖點(diǎn)之間的距離來設(shè)置相對的運(yùn)動速率。基于內(nèi)容層的最大長度的運(yùn)動比率在與實(shí)際呈現(xiàn)的內(nèi)容層進(jìn)行比較時將僅是近似的。由于比率是近似的(內(nèi)容窗格的最終寬度仍是未知的)，因此系統(tǒng)900可執(zhí)行鎖定動畫以調(diào)整諸如背景層或標(biāo)題層的層，使得它們與所呈現(xiàn)的最終內(nèi)容層中的對應(yīng)鎖點(diǎn)對齊。一旦初始化已完成，系統(tǒng)900可呈現(xiàn)UI層并開始接受用戶輸入。B.用戶輸入在該示例中，系統(tǒng)900從與移動計(jì)算設(shè)備上的觸摸屏交互的用戶接受用戶輸入。系統(tǒng)900可在觸摸屏上的不同手勢(諸如拖動手勢、平移手勢和輕拂手勢)間進(jìn)行區(qū)分。系統(tǒng)900還可檢測輕擊手勢，諸如用戶在特定位置觸摸觸摸屏但在中斷與觸摸屏的接觸之前不移動手指、指示筆等的情況。作為替換，在中斷輕擊手勢中與觸摸屏的接觸之前許可較小的閾值內(nèi)的某種移動。系統(tǒng)900還可檢測多觸摸手勢，諸如屈伸手勢。系統(tǒng)900依賴于與觸摸屏的交互的本質(zhì)，將該交互解釋為特定的手勢。系統(tǒng)900從用戶的交互獲得一個或多個離散的輸入。可從一系列輸入中確定手勢。例如，當(dāng)用戶觸摸觸摸屏并在維持與該觸摸屏接觸的同時開始在水平方向上的移動時，系統(tǒng)900引發(fā)平移輸入并在層中開始水平移動。當(dāng)用戶維持與觸摸屏接觸并繼續(xù)移動時，系統(tǒng)900可繼續(xù)引發(fā)平移輸入。例如，每一次用戶在維持與觸摸屏接觸的同時移動N個像素，系統(tǒng)900可引發(fā)新的平移輸入。以此方式，系統(tǒng)900可將觸摸屏上的連續(xù)物理手勢解釋為一系列平移輸入。系統(tǒng)可持續(xù)地更新移動的接觸位置和速率。當(dāng)物理手勢結(jié)束(例如，當(dāng)用戶中斷與觸摸屏的接觸)時，系統(tǒng)900可通過確定在用戶的手指、指示筆等在其中斷與觸摸屏的接觸時移動得多快、以及移動的速率是否超過閾值來最終確定是否將結(jié)束處的運(yùn)動解釋為輕拂。C.響應(yīng)于用戶手勢系統(tǒng)900可依賴于手勢的類型在顯示器上有差別地呈現(xiàn)運(yùn)動(例如，層、列表、或其他Π元素中的運(yùn)動)。例如，在(用戶當(dāng)前正在維持與觸摸屏的接觸的)水平拖動手勢的情況中，系統(tǒng)900在水平方向上將內(nèi)容層移動與拖動的水平距離相同的距離。標(biāo)題層和背 景層也響應(yīng)于拖動而移動。通過將相應(yīng)層的運(yùn)動比率乘以拖動的水平移動來確定移動量。例如，如果已經(jīng)確定了標(biāo)題層的運(yùn)動比率為O. 5，并且拖動的水平距離為100個像素，則標(biāo)題層中的移動在拖動方向上是50個像素。在(在該用戶中斷了與觸摸屏的接觸時用戶移動得更慢或停止的)平移手勢的情況中，將內(nèi)容層移動平移的量，并相對于設(shè)備的顯示區(qū)域來檢查內(nèi)容窗格的當(dāng)前位置，以確定是否要在內(nèi)容層中執(zhí)行額外的移動。例如，系統(tǒng)可執(zhí)行鎖定動畫(即，內(nèi)容層中咬合到鎖點(diǎn)的移動的動畫)，并將內(nèi)容層移至與當(dāng)前內(nèi)容窗格相關(guān)聯(lián)的左或右鎖點(diǎn)。系統(tǒng)900可確定與當(dāng)前窗格相關(guān)聯(lián)的哪個鎖點(diǎn)更接近，并轉(zhuǎn)移到更接近的鎖點(diǎn)。作為另一個示例，系統(tǒng)900可移動內(nèi)容層以便將部分地位于顯示區(qū)域上的視圖中的內(nèi)容窗格全部帶入視圖。其他手勢也可使內(nèi)容窗格被全部帶入視圖。例如，如果可垂直滾動的列表的左側(cè)或右側(cè)位于顯示區(qū)域以外，則列表上的手勢(例如，垂直的或基本垂直的手勢)可引起內(nèi)容層中的水平移動(以及在適當(dāng)時其他層中的水平移動)，使得整個列表變?yōu)榭梢?。層的水平移動可作為由垂直手勢引起的列表中的任何垂直移動的補(bǔ)充，但是內(nèi)容層和任何其他層的垂直位置不受影響?；蛘撸到y(tǒng)900可維持內(nèi)容層的當(dāng)前位置。在一個實(shí)現(xiàn)中，系統(tǒng)900執(zhí)行以下步驟I.在內(nèi)容層中，檢查當(dāng)前、前一個和下一個內(nèi)容窗格有多少區(qū)域是可見的，并且檢查邊緣的位置。2.如果前一個窗格的右邊緣已被進(jìn)一步移入顯示區(qū)域(相對于左屏幕邊緣)超過閾值數(shù)量的像素，則轉(zhuǎn)移到前一個窗格。在一個實(shí)現(xiàn)中，該閾值被稱為“凸起閾值位移”。3.如果下一個窗格的左邊緣已被進(jìn)一步移入顯示區(qū)域(相對于右屏幕邊緣)超過閾值數(shù)量的像素，則轉(zhuǎn)移到下一個窗格。4.否則，確定內(nèi)容層是否可被移動以與具有鎖點(diǎn)或“凸起”的當(dāng)前窗格的左或右邊緣對齊。如果當(dāng)前窗格的左邊緣與左鎖定位置足夠接近，則將當(dāng)前窗格鎖定到左邊緣。否貝U，如果當(dāng)前窗格的右邊緣與右鎖定位置足夠接近，并且當(dāng)前窗格比屏幕寬，則將其鎖定到右邊緣。在輕拂手勢的情況(其中在用戶中斷與觸摸屏的接觸時用戶正在更快地移動的情況)中，系統(tǒng)900初始化轉(zhuǎn)移動畫，該轉(zhuǎn)移動畫可依賴于輕拂手勢的方向和速度，使內(nèi)容層前進(jìn)至下一個內(nèi)容窗格或前一個內(nèi)容窗格。如果輕拂的速度足夠大，則系統(tǒng)900可轉(zhuǎn)移到該方向上的下一個內(nèi)容窗格。如果速度不夠強(qiáng)，或如果當(dāng)前的內(nèi)容窗格較寬，則系統(tǒng)900可在輕拂的方向上移動內(nèi)容層，而不必實(shí)際轉(zhuǎn)移到下一個內(nèi)容窗格。要檢測的輕拂的閾值速度(即，將輕拂姿勢與平移姿勢區(qū)分開來)可取決于實(shí)現(xiàn)而變化。引起轉(zhuǎn)移到另一個內(nèi)容窗格的輕拂的閾值速度也可依賴于實(shí)現(xiàn)而改變。D.非線性運(yùn)動在某些情況中，UI層展示非線性移動速率。例如，全部層可依賴于上下文 以不同的速率移動，或者層的一部分依賴于上下文以與同一層其他部分不同的速率移動?？烧故痉蔷€性移動速率的一個層是段首層。段首層可被劃分為若干段首部，并且每個首部可與內(nèi)容層中的一個或多個內(nèi)容窗格相關(guān)聯(lián)。在該示例中，系統(tǒng)900提供段首層，并且每個段首部與內(nèi)容窗格相關(guān)聯(lián)。該示例中的段首層根據(jù)以下規(guī)則來移動I.如果內(nèi)容窗格不比顯示區(qū)域?qū)?，則首部保持被鎖定到該內(nèi)容窗格。否則，在內(nèi)容窗格比顯示區(qū)域?qū)挄r應(yīng)用規(guī)則2-4。2.當(dāng)層被鎖定到內(nèi)容窗格的左側(cè)鎖點(diǎn)時，每個首部的左邊緣與該窗格的左邊緣對齊。3.當(dāng)用戶向左平移內(nèi)容窗格時，首部比該內(nèi)容窗格移動得慢。這可用于例如允許用戶在平移時仍能看到首部的某些部分。4.當(dāng)用戶向右平移時，首部比內(nèi)容窗格移動得快。這可用于例如在當(dāng)存在從當(dāng)前窗格到前一個窗格的轉(zhuǎn)移時，首部比內(nèi)容窗格移動得稍快但二者在左鎖點(diǎn)對齊的情況下允許轉(zhuǎn)移效果。在根據(jù)這些規(guī)則來執(zhí)行移動時，系統(tǒng)900計(jì)算位移值。首先，通過取得內(nèi)容窗格寬度與首部寬度之間的差來計(jì)算最大位移。在計(jì)算最大位移時，系統(tǒng)900也可包括按鈕或首部中其他功能項(xiàng)的額外邊距，而不僅是首部中文本的寬度。系統(tǒng)900隨后通過確定當(dāng)前窗格的左邊緣相對于左鎖點(diǎn)的位置來計(jì)算實(shí)際位移。如果窗格的左邊緣位于左鎖點(diǎn)的右側(cè)，則系統(tǒng)900從該窗格左邊緣的水平位置(X坐標(biāo))減去左鎖點(diǎn)的水平位置(X坐標(biāo))，將得到正值a。如果窗格的左邊緣位于左鎖點(diǎn)的左側(cè)，則系統(tǒng)900從左鎖點(diǎn)的水平位置(X坐標(biāo))減去窗格左邊緣的水平位置(X坐標(biāo))，將得到正值b?？芍T如通過將該值(a或b)乘以一常數(shù)，對該值進(jìn)行調(diào)整。任意調(diào)整之后，如果該值(a或b)大于最大位移，則在最大位移處對該值設(shè)限。位移計(jì)算也可用于平移和轉(zhuǎn)移動畫。在后一情形中，在轉(zhuǎn)移開始之前，計(jì)算窗格的最終位置，并基于此來計(jì)算要在轉(zhuǎn)移動畫中使用的首部的最終位置。E.邊緣輕擊系統(tǒng)900還可實(shí)現(xiàn)邊緣輕擊功能。在邊緣輕擊中，用戶可在顯示區(qū)域的邊緣(例如，左或右邊緣)的給定邊距(例如，40個像素)內(nèi)輕擊，以引起轉(zhuǎn)移(例如，到下一個內(nèi)容窗格或前一個內(nèi)容窗格)。這可在例如下一個窗格或前一個窗格在顯示區(qū)域中部分可視時是有用的。用戶可在下一個或前一個窗格附近輕擊以使系統(tǒng)將該窗格完整地帶入顯示區(qū)域。II.擴(kuò)展和替換實(shí)現(xiàn)
對此處所描述的實(shí)施例的各種擴(kuò)展和替換是可能的。在所描述的示例中，內(nèi)容層通常被描述為比其他層(諸如，背景層)長。諸如系統(tǒng)900的多層Π系統(tǒng)還可處理其中諸如標(biāo)題層或背景層的層實(shí)際上比內(nèi)容層寬的場景。在該場景中，層中運(yùn)動的速度可被自動地調(diào)整以便補(bǔ)償。例如，在內(nèi)容層比標(biāo)題層短時，內(nèi)容層可比標(biāo)題層移動得慢。在所描述的示例中，一些層被描述為被鎖定到其他層。例如，在圖6A-6E中，層312的各部分被指不為被鎖定到內(nèi)容層614的各部分。在其他所描述的不例中，一些層被描述為更靈活地移動。例如，在圖5A-5D中，段首層512的各段被指示為與內(nèi)容層514的特定部分相關(guān)聯(lián)，但各段能夠彼此獨(dú)立地移動并浮在內(nèi)容層514各部分之上。多層Π系統(tǒng)可組合這些功能。例如，多層UI系統(tǒng)可在允許一層(例如，段首層或標(biāo)題層)的某些部分獨(dú)立地移動的同時，將該層的其他部分鎖定到內(nèi)容層中的內(nèi)容。多層系統(tǒng)也可將各層鎖定到一起以改善轉(zhuǎn)移或包裝效果。例如，背景層可被鎖定到標(biāo)題層，使得該背景層與標(biāo)題層在包裝期間以相同的速度移動。即使在各層的有效長度 不同時，也能完成這種鎖定。所描述的示例示出用戶可能感興趣的層(諸如，內(nèi)容層)的不同位置。用戶可在層的起始處開始多層Π系統(tǒng)中的導(dǎo)航，或者可使用不同的入口點(diǎn)來開始Π層導(dǎo)航。例如，用戶可在內(nèi)容層的中間、在內(nèi)容層的結(jié)束處等開始導(dǎo)航。這可在例如用戶之前已在除一層的開始處以外的位置(例如，一層的結(jié)束)退出時是有用的，使得用戶可返回到之前的位置(例如，在用戶使用通過啟動內(nèi)容圖像所調(diào)用的應(yīng)用之后)。作為另一個示例，默認(rèn)的鎖點(diǎn)可以基于Π層的之前的狀態(tài)。例如，用戶可在與之前被查看過的層的部分相對應(yīng)的鎖點(diǎn)處返回到一層。作為另一個示例，多層Π系統(tǒng)可保存狀態(tài)，或在一個以上的層中作出調(diào)整以允許不同的入口點(diǎn)。例如，如果用戶如在圖5C中所示的內(nèi)容層和特征層可見之處進(jìn)入，則多層UI系統(tǒng)可調(diào)整層510，使得層510中“Application”文本的起始與層512中“Feature 2”文本的起始對齊。III.示例計(jì)算環(huán)境圖10示出了可在其中實(shí)現(xiàn)所描述的若干實(shí)施例的合適計(jì)算環(huán)境1000的一個通用示例。計(jì)算環(huán)境1000并非旨在對使用范圍或功能提出任何限制，因?yàn)榇颂幟枋龅募夹g(shù)和工具可以在完全不同的通用或?qū)Ｓ糜?jì)算環(huán)境中實(shí)現(xiàn)。參考圖10，計(jì)算環(huán)境1000包括至少一個CPU 1010和相關(guān)聯(lián)的存儲器1020。在圖10中，這一最基本配置1030包括在虛線內(nèi)。處理單元1010執(zhí)行計(jì)算機(jī)可執(zhí)行指令，且可以是真實(shí)或虛擬處理器。在多處理系統(tǒng)中，多個處理單元執(zhí)行計(jì)算機(jī)可執(zhí)行指令以提高處理能力。圖10示出可用于視頻加速或其他處理的第二處理單元1015 (例如，GPU或其他協(xié)處理單元)和相關(guān)聯(lián)的存儲器1025。存儲器1020、1025可以是易失性存儲器(例如，寄存器、高速緩存、RAM)、非易失性存儲器(例如，R0M、EEPR0M、閃存等)或兩者的某一組合。存儲器1020、1025存儲用一個或多個所描述的技術(shù)和工具來實(shí)現(xiàn)系統(tǒng)的軟件1080。計(jì)算環(huán)境可以具有附加特征。例如，計(jì)算環(huán)境1000包括存儲1040、一個或多個輸入設(shè)備1050、一個或多個輸出設(shè)備1060以及一個或多個通信連接1070。諸如總線、控制器或網(wǎng)絡(luò)等互連機(jī)制(未示出)將計(jì)算環(huán)境1000的各組件互連。通常，操作系統(tǒng)軟件(未示出)為在計(jì)算環(huán)境1000中執(zhí)行的其他軟件提供了操作環(huán)境，并協(xié)調(diào)計(jì)算環(huán)境1000的組件的活動。存儲1040可以是可移動或不可移動的，且包括磁盤、磁帶或磁帶盒、⑶-ROM、DVD、存儲卡或可用于儲存信息并可在計(jì)算環(huán)境1000內(nèi)訪問的任何其它介質(zhì)。存儲1040存儲實(shí)現(xiàn)所描述的技術(shù)和工具的軟件1080的指令。輸入設(shè)備1050可以是諸如鍵盤、鼠標(biāo)、筆、跟蹤球或觸摸屏等觸摸輸入設(shè)備、諸如話筒的音頻輸入設(shè)備、掃描設(shè)備、數(shù)碼相機(jī)、或向計(jì)算環(huán)境1000提供輸入的另一設(shè)備。對于視頻，輸入設(shè)備1050可以是顯卡、TV調(diào)諧卡、或接受模擬或數(shù)字形式的視頻輸入的類似的設(shè)備、或?qū)⒁曨l樣值讀入計(jì)算環(huán)境1000的⑶-ROM或⑶-RW。輸出設(shè)備1060可以是顯示器、打印機(jī)、揚(yáng)聲器、CD刻錄機(jī)、或從計(jì)算環(huán)境1000提供輸出的另一設(shè)備。通信連接1070允許通過通信介質(zhì)到另一計(jì)算實(shí)體的通信。通信介質(zhì)傳達(dá)諸如 已調(diào)制數(shù)據(jù)信號形式的計(jì)算機(jī)可執(zhí)行指令、音頻或視頻輸入或輸出、或其他數(shù)據(jù)等信息。已調(diào)制數(shù)據(jù)信號是其一個或多個特征以在信號中編碼信息的方式設(shè)置或改變的信號。作為示例而非局限，通信介質(zhì)包括以電、光、RF、紅外、聲學(xué)或其他載波實(shí)現(xiàn)的有線或無線技術(shù)。各種技術(shù)和工具可以在計(jì)算機(jī)可讀介質(zhì)的一般上下文中描述。計(jì)算機(jī)可讀介質(zhì)可以是可在計(jì)算環(huán)境內(nèi)訪問的任何可用介質(zhì)。作為示例而非局限，對于計(jì)算環(huán)境1000，計(jì)算機(jī)可讀介質(zhì)包括存儲器1020、1025，存儲1040，及其組合。該技術(shù)和工具可在諸如程序模塊中所包括的在目標(biāo)真實(shí)或虛擬處理器上的計(jì)算環(huán)境中執(zhí)行的計(jì)算機(jī)可執(zhí)行指令的一般上下文中描述。一般而言，程序模塊包括執(zhí)行特定任務(wù)或?qū)崿F(xiàn)特定抽象數(shù)據(jù)類型的例程、程序、庫、對象、類、組件、數(shù)據(jù)結(jié)構(gòu)等。程序模塊的功能可以如各實(shí)施例中所需的組合或在程序模塊之間分離。用于程序模塊的計(jì)算機(jī)可執(zhí)行指令可以在本地或分布式計(jì)算環(huán)境中執(zhí)行。此處描述的各方法中的任一方法可通過在一個或多個計(jì)算機(jī)可讀介質(zhì)(例如，計(jì)算機(jī)可讀存儲介質(zhì)或其他有形介質(zhì))上編碼的計(jì)算機(jī)可執(zhí)行指令來實(shí)現(xiàn)。為了呈現(xiàn)起見，本詳細(xì)描述使用了如“選擇”和“確定”等術(shù)語來描述計(jì)算環(huán)境中的計(jì)算機(jī)操作。這些術(shù)語是由計(jì)算機(jī)執(zhí)行的操作的高級抽象，且不應(yīng)與人類所執(zhí)行的動作混淆。對應(yīng)于這些術(shù)語的實(shí)際的計(jì)算機(jī)操作取決于實(shí)現(xiàn)而不同。IV.示例實(shí)現(xiàn)環(huán)境圖11示出了其中可實(shí)現(xiàn)所描述的實(shí)施例、技術(shù)、和技藝的合適實(shí)現(xiàn)環(huán)境1100的一
般化示例。在示例環(huán)境1100中，由云1110提供各種類型的服務(wù)(例如，計(jì)算服務(wù)1112)。例如，云1110可包括可位于中央或是分布式的計(jì)算設(shè)備集，其向經(jīng)由諸如因特網(wǎng)等網(wǎng)絡(luò)連接的各種類型的用戶和設(shè)備提供基于云的服務(wù)。云計(jì)算環(huán)境1300可用于以不同的方式來實(shí)現(xiàn)計(jì)算任務(wù)。例如，參考所述技術(shù)和工具，可對本地計(jì)算設(shè)備執(zhí)行諸如處理用戶輸入以及呈現(xiàn)用戶界面之類的某些任務(wù)，同時可在云中的別處執(zhí)行諸如存儲要在后續(xù)處理中使用的數(shù)據(jù)之類的其他任務(wù)。在示例環(huán)境1100中，云1110向具有各種屏幕能力的連接的設(shè)備1120A-N提供服務(wù)。連接的設(shè)備1120A表示具有中型屏幕的設(shè)備。例如，連接的設(shè)備1120A可以是個人計(jì)算機(jī)，諸如臺式計(jì)算機(jī)、膝上型計(jì)算機(jī)、筆記本、上網(wǎng)本等。連接的設(shè)備1120B表示具有小型屏幕的設(shè)備。例如，連接的設(shè)備1120B可以是移動電話、智能電話、個人數(shù)字助理、平板計(jì)算機(jī)等。連接的設(shè)備1120N表示具有大屏幕的設(shè)備。例如，連接的設(shè)備1120N可以是電視機(jī)(例如，智能電視機(jī))或連接到電視機(jī)或投影儀屏幕的另一設(shè)備(例如，機(jī)頂盒或游戲控制臺)
坐寸ο云1110可通過一個或多個服務(wù)提供者(未示出)來提供各種服務(wù)。例如，云1110可將與移動計(jì)算有關(guān)的服務(wù)提供給各個連接的設(shè)備1120A-N中的一個或多個?？舍槍μ囟ǖ倪B接的設(shè)備(例如，連接的設(shè)備1120A-N)的屏幕大小、顯示能力或其他功能來定制云服務(wù)。例如，可通過將屏幕大小、輸入設(shè)備以及通常與移動設(shè)備相關(guān)聯(lián)的通信帶寬限制納入考慮來為移動設(shè)備定制云服務(wù)。V.示例移動設(shè)各圖12是描繪示例性移動設(shè)備1200的系統(tǒng)圖，該移動設(shè)備包括各種可選的硬件和 軟件組件，總地示于1202處。該移動設(shè)備中的任何組件1202可與任何其他組件通信，但出于容易例示的目的而未示出所有連接。該移動設(shè)備可以是各種計(jì)算設(shè)備(例如，蜂窩電話、智能電話、手持式計(jì)算機(jī)、個人數(shù)字助理(PDA)等)中的任一個，并且可允許與諸如蜂窩或衛(wèi)星網(wǎng)絡(luò)等一個或多個移動通信網(wǎng)絡(luò)1204進(jìn)行無線雙向通信。所示移動設(shè)備可包括用于執(zhí)行如信號編碼、數(shù)據(jù)處理、輸入/輸出處理、電力控制和/或其他功能等任務(wù)的控制器或處理器1210(例如，信號處理器、微處理器、ASIC、或其他控制和處理邏輯電路)。操作系統(tǒng)1212可控制對組件1202的分配和使用，并支持一個或多個應(yīng)用程序1214。應(yīng)用程序可包括公共移動計(jì)算應(yīng)用(例如，包括電子郵件應(yīng)用、日歷、聯(lián)系人管理器、web瀏覽器、消息收發(fā)應(yīng)用)、或任何其他計(jì)算應(yīng)用。所示移動設(shè)備可包括存儲器1220。存儲器1220可包括不可移動存儲器1222和/或可移動存儲器1224。不可移動存儲器1222可包括RAM、ROM、閃存、盤驅(qū)動器、或其他眾所周知的存儲器存儲技術(shù)。可移動存儲器1224可包括閃存或訂戶身份模塊(SM)卡，SIM卡是GSM通信系統(tǒng)中眾所周知的，或者其他眾所周知的存儲器存儲技術(shù)，諸如智能卡。存儲器1220可用于存儲數(shù)據(jù)和/或用于運(yùn)行操作系統(tǒng)1212和應(yīng)用1214的代碼。示例數(shù)據(jù)可包括經(jīng)由一個或多個有線或無線網(wǎng)絡(luò)發(fā)送給和/或接收自一個或多個網(wǎng)絡(luò)服務(wù)器或其他移動設(shè)備的網(wǎng)頁、文本、圖像、聲音文件、視頻數(shù)據(jù)、或其他數(shù)據(jù)集。存儲器1220可用于存儲諸如國際移動訂戶身份(IMSI)等訂戶標(biāo)識符，以及諸如國際移動設(shè)備標(biāo)識符(IMEI)等設(shè)備標(biāo)識符。這些標(biāo)識符可被傳送給網(wǎng)絡(luò)服務(wù)器以標(biāo)識用戶和裝備。移動設(shè)備可支持諸如觸摸屏1232、話筒1234、相機(jī)1236、物理鍵盤1238、和/或跟蹤球1240的一個或多個輸入設(shè)備1230,以及諸如揚(yáng)聲器1252和顯不器1254的一個或多個輸出設(shè)備1250。其他可能的輸出設(shè)備(未示出)可包括壓電或其他觸覺輸出設(shè)備。一些設(shè)備可服務(wù)超過一個輸入/輸出功能。例如，觸摸屏1232和顯示器1254可被組合在單個輸入/輸出設(shè)備中。觸摸屏1232可用不同的方式接受輸入。例如，電容式觸摸屏在物體(例如，指尖或指示筆)扭曲或中斷流過表面的電流時檢測到觸摸輸入。作為另一示例，觸摸屏可使用光學(xué)傳感器，在來自光學(xué)傳感器的光束被中斷時檢測到觸摸輸入。對于要使某些觸摸屏檢測到的輸入來說，與屏幕表面的物理接觸并不是必需的。無線調(diào)制解調(diào)器1260可被耦合至天線(未示出)，并且可支持處理器1210與外置設(shè)備間的雙向通信，如本領(lǐng)域中充分理解的那樣。調(diào)制解調(diào)器1260被一般性地示出，并且可包括用于與移動通信網(wǎng)絡(luò)1204進(jìn)行通信的蜂窩調(diào)制解調(diào)器和/或其它基于無線電的調(diào)制解調(diào)器(例如藍(lán)牙或Wi-Fi)。無線調(diào)制解調(diào)器1260通常被配置成與一個或多個蜂窩網(wǎng)絡(luò)進(jìn)行通信，蜂窩網(wǎng)絡(luò)如用于單個蜂窩網(wǎng)絡(luò)內(nèi)、蜂窩網(wǎng)絡(luò)之間、或移動設(shè)備與公共交換電話網(wǎng)絡(luò)(PSTN)之間的數(shù)據(jù)和語音通信的GSM網(wǎng)絡(luò)。移動設(shè)備可進(jìn)一步包括至少一個輸入/輸出端口 1280、電源1282、衛(wèi)星導(dǎo)航系統(tǒng)接收機(jī)1284 (諸如全球定位系統(tǒng)(GPS)接收機(jī))、加速計(jì)1286、收發(fā)機(jī)1288 (用于無線發(fā)射模擬或數(shù)字信號)和/或物理連接器1290，它可以是USB端口、IEEE 1394 (防火墻)端口、和/或RS-232端口。所示組件1202不是必需的或窮舉的，因?yàn)榭蓜h除組件并且可添加其他組件。來自任何示例的技術(shù)可以與在其他示例中的任何一個或多個中描述的技術(shù)相組合。鑒于可應(yīng)用所公開的技術(shù)的原理的許多可能的實(shí)施例，應(yīng)當(dāng)認(rèn)識到，所示實(shí)施例僅是所公開的技術(shù)的示例，并且不應(yīng)該被認(rèn)為限制所公開的技術(shù)的范圍。相反，所公開的技術(shù)的范圍包括所附權(quán)利要求所涵蓋的內(nèi)容。因此，要求保護(hù)落入這些權(quán)利要求的精神和范圍內(nèi)的 所有內(nèi)容作為本發(fā)明。
權(quán)利要求
1.在計(jì)算機(jī)系統(tǒng)中，ー種方法包括 顯示包括至少第一和第二層的圖形用戶界面，其中所述第一層中視覺信息的第一部分位于觸摸屏的顯示區(qū)域內(nèi)，并且其中各層彼此基本平行； 接收與所述觸摸屏上的手勢相對應(yīng)的用戶輸入，所述手勢具有手勢移動速率； 至少部分地基于所述用戶輸入來計(jì)算第一移動，所述第一移動包括所述第一層從初始第一層位置到當(dāng)前第一層位置的移動，在所述初始第一層位置中，所述第一層中視覺信息的第二部分位于所述顯示區(qū)域以外，在所述當(dāng)前第一層位置中，所述第一層中視覺信息的第二部分位于所述顯示區(qū)域內(nèi)，其中所述第一移動以第一移動速率在第一方向上進(jìn)行，并且其中所述第一移動速率基于所述手勢移動速率；以及 至少部分地基于所述用戶輸入來計(jì)算第二移動，所述第二移動包括所述第二層中視覺信息從初始第二層位置到當(dāng)前第二層位置的移動，其中所述第二移動以第二移動速率在所述第一方向上進(jìn)行； 其中所述第二移動速率與所述第一移動速率不同。
2.如權(quán)利要求I所述的方法，其特征在于，所述第一層包括多個第一層鎖點(diǎn)。
3.如權(quán)利要求2所述的方法，其特征在于，所述第一層包括處于內(nèi)容窗格位置的多個內(nèi)容窗格，并且其中至少部分地基于內(nèi)容窗格的數(shù)量和所述內(nèi)容窗格位置自動地確定所述第一層鎖點(diǎn)。
4.如權(quán)利要求2所述的方法，其特征在于，還包括 基于所述第一層鎖點(diǎn)中的至少ー個的位置來執(zhí)行鎖定動畫，其中執(zhí)行所述鎖定動畫包括 選擇與所述第一層中用戶界面元素相關(guān)聯(lián)的第一層鎖點(diǎn)； 動畫化所述第一層中從所述當(dāng)前第一層位置到第一層鎖定動畫后位置的轉(zhuǎn)移，在所述第一層鎖定動畫后位置中，所選擇的第一層鎖點(diǎn)與所述顯示區(qū)域的一部分對齊，使得所述用戶界面元素在所述顯示區(qū)域中是可見的；以及 動畫化所述第二層中從所述當(dāng)前第二層位置到對應(yīng)于所述第一層鎖定動畫后位置的第二層鎖定動畫后位置的轉(zhuǎn)移，其中所述第二層鎖定動畫后位置是第二層鎖點(diǎn)與所選擇的第一層鎖點(diǎn)對齊的位置； 其中所述第一層是內(nèi)容層，所述用戶界面元素是內(nèi)容窗格，所述手勢包括輕拂，并且所述選擇至少部分地基于所述輕拂的速度。
5.如權(quán)利要求I所述的方法，其特征在于，所述第一層和所述第二層各自包括起始和結(jié)束，其中在所述當(dāng)前第一層位置中顯示所述第一層的結(jié)束，在所述當(dāng)前第二層位置中顯示所述第二層的結(jié)束，所述方法還包括 執(zhí)行包裝動畫，其中執(zhí)行所述包裝動畫包括 動畫化所述第一層中從所述當(dāng)前第一層位置到顯示所述第一層的起始的包裝動畫后第一層位置的轉(zhuǎn)移；以及 動畫化所述第二層中從所述當(dāng)前第二層位置到顯示所述第二層的起始的包裝動畫后第二層位置的轉(zhuǎn)移。
6.如權(quán)利要求I所述的方法，其特征在于，所述第一層中的所述視覺信息包括化身元素，并且其中所述化身元素指示所述第一層中兩個其他元素之間的關(guān)系，所述方法還包括計(jì)算第三移動，所述第三移動包括所述化身元素以不同于所述第一移動速率的第三移動速率的移動。
7.如權(quán)利要求I所述的方法，其特征在于，所述第一移動速率基本等于所述手勢移動速率。
8.如權(quán)利要求I所述的方法，其特征在于，計(jì)算所述第一移動包括至少部分地基于所述初始第一層位置、所述第一方向、和所述手勢移動速率來計(jì)算所述當(dāng)前第一層位置，并且其中計(jì)算所述第二移動包括至少部分地基于已計(jì)算的當(dāng)前第一層位置來計(jì)算所述當(dāng)前第ニ層位置。
9.如權(quán)利要求I所述的方法，其特征在于，還包括 至少部分地基于所述第二層的運(yùn)動比率來計(jì)算所述第二移動速率，其中所述運(yùn)動比率是所述第二層的寬度除以所述第一層的最大寬度。
10.如權(quán)利要求I所述的方法，其特征在于，所述手勢所指示的方向與所述第一方向不相同，其中所述手勢所指示的方向是對角線方向，并且所述第一方向是水平方向。
11.如權(quán)利要求I所述的方法，其特征在于，還包括呈現(xiàn)所述第一移動和所述第二移動，以供在包括所述觸摸屏的移動電話上顯示。
12.—種計(jì)算設(shè)備，包括 一個或多個處理器； 具有顯示區(qū)域的觸摸屏；以及 其上存儲有用于執(zhí)行ー種方法的計(jì)算機(jī)可執(zhí)行指令的一個或多個計(jì)算機(jī)可讀存儲介質(zhì)，所述方法包括 在所述觸摸屏上顯示圖形用戶界面，所述圖形用戶界面包括至少第一和第二層，所述第二層包括第一部分和第二部分； 接收與所述觸摸屏上的至少ー個手勢相對應(yīng)的、指示所述第一層中移動的用戶輸入，所述至少一個手勢具有手勢移動速率； 至少部分地基于所述用戶輸入來計(jì)算第一移動，所述第一移動包括所述第一層的移動，其中所述第一移動以第一移動速率進(jìn)行，并且其中所述第一移動速率基于所述手勢移動速率； 至少部分地基于所述第一移動來計(jì)算第二移動，所述第二移動包括所述第二層的所述第一部分的移動，其中所述第二移動與所述第一移動基本平行，并且所述第二移動以第二移動速率進(jìn)行； 至少部分地基于所述用戶輸入來計(jì)算第三移動，所述第三移動包括所述第一層的移動，其中所述第二移動以第二移動速率進(jìn)行； 至少部分地基于所述第三移動來計(jì)算第四移動，所述第四移動包括所述第二層的所述第二部分的移動，其中所述第四移動與所述第三移動基本平行，并且所述第四移動以第四移動速率進(jìn)行； 其中所述第二移動速率與所述第四移動速率不相同，并且所述第二移動速率與第一移動速率不相同。
13.如權(quán)利要求12所述的計(jì)算設(shè)備，其特征在于，所述第一層是內(nèi)容層，其中所述第二層是所述內(nèi)容層上面的段首層，所述第二層的所述第一部分是第一段首部，并且所述第二層的所述第二部分是第二段首部。
14.如權(quán)利要求13所述的計(jì)算設(shè)備，其特征在于，所述第一段首部與所述內(nèi)容層中ー個或多個內(nèi)容窗格的第一集合相關(guān)聯(lián)，所述第二段首部與所述內(nèi)容層中ー個或多個內(nèi)容窗格的第二集合相關(guān)聯(lián)，所述第二移動速率基于所述第一段首部的寬度與所述內(nèi)容窗格的第一集合的寬度之間的差，并且所述第四移動速率基于所述第二段首部的寬度與所述內(nèi)容窗格的第二集合的寬度之間的差。
15.其上存儲有用于執(zhí)行ー種方法的計(jì)算機(jī)可執(zhí)行指令的一個或多個計(jì)算機(jī)可讀介質(zhì)，所述方法包括 在觸摸屏上顯示圖形用戶界面，所述圖形用戶界面用于經(jīng)由所述觸摸屏上的手勢來接收用戶輸入，所述圖形用戶界面包括內(nèi)容層、段首層、標(biāo)題層和背景層，其中每層包括相應(yīng)層中視覺信息的至少第一和第二部分，所述相應(yīng)層中視覺信息的所述第一部分位于所述觸摸屏的顯示區(qū)域中，并且所述相應(yīng)層中視覺信息的所述第二部分位于所述顯示區(qū)域以外； 接收與所述觸摸屏上的手勢相對應(yīng)的用戶輸入； 至少部分地基于所述用戶輸入來計(jì)算內(nèi)容層移動，所述內(nèi)容層移動包括所述內(nèi)容層從(a)初始內(nèi)容層位置到(b)當(dāng)前內(nèi)容層位置的移動，在所述初始內(nèi)容層位置中，所述內(nèi)容層中視覺信息的所述第二部分位于所述顯示區(qū)域以外，在所述當(dāng)前內(nèi)容層位置中，所述內(nèi)容層中視覺信息的所述第二部分位于所述顯示區(qū)域內(nèi)； 動畫化從(a)到(b)的所述移動，其中所述內(nèi)容層移動以內(nèi)容層移動速率在第一方向上進(jìn)行； 至少部分地基于所述用戶輸入來計(jì)算段首層移動，所述段首層移動包括所述段首層從(C)初始段首層位置到(d)當(dāng)前段首層位置的移動，在所述初始段首層位置中，所述段首層中視覺信息的所述第二部分位于所述顯示區(qū)域以外，在所述當(dāng)前段首層位置中，所述段首層中視覺信息的所述第二部分位于所述顯示區(qū)域內(nèi)； 動畫化從(c) IlJ Cd)的所述移動，其中所述段首層移動以段首層移動速率在所述第一方向上進(jìn)行； 至少部分地基于所述用戶輸入來計(jì)算標(biāo)題層移動，所述標(biāo)題層移動包括所述標(biāo)題層從Ce)初始標(biāo)題層位置到(f)當(dāng)前標(biāo)題層位置的移動，在所述初始標(biāo)題層位置中，所述標(biāo)題層中視覺信息的所述第二部分位于所述顯示區(qū)域以外，在所述當(dāng)前標(biāo)題層位置中，所述標(biāo)題層中視覺信息的所述第二部分位于所述顯示區(qū)域內(nèi)； 動畫化從(e) IlJ Cf)的所述移動，其中所述標(biāo)題層移動以標(biāo)題層移動速率在所述第一方向上進(jìn)行； 至少部分地基于所述用戶輸入來計(jì)算背景層移動，所述背景層移動包括所述背景層從(g)初始背景層位置到(h)當(dāng)前背景層位置的移動，在所述初始背景層位置中，所述背景層中視覺信息的所述第二部分位于所述顯示區(qū)域以外，在所述當(dāng)前背景層位置中，所述背景層中視覺信息的所述第二部分位于所述顯示區(qū)域內(nèi)；以及 動畫化從(g)到(h)的所述移動，其中所述背景層移動以背景層移動速率在所述第一方向上進(jìn)行； 其中所述內(nèi)容層移動速率等于所述段首層移動速率，所述標(biāo)題層移動速率與所述內(nèi)容層移動速率、所述段首層移動速率不同，所述內(nèi)容層、所述段首層和所述標(biāo)題層彼此基本平行且相對于彼此不重疊，并且所述內(nèi)容層、所述段首層和 所述標(biāo)題層中的每ー個與所述背 景層重疊。
全文摘要
用戶界面(UI)系統(tǒng)計(jì)算多層圖形用戶界面中的移動。UI系統(tǒng)接收與觸摸屏上的手勢相對應(yīng)的用戶輸入。UI系統(tǒng)計(jì)算第一層以第一移動速率在第一方向上(例如，水平方向)的移動。例如，第一移動速率可以基本等于用戶的手指或觸摸屏上其他物體作出的手勢的移動速率。UI系統(tǒng)計(jì)算與第一層的移動基本平行的其他層以不同于第一移動速率的移動速率的移動。
文檔編號G06F3/048GK102782632SQ201180009131
公開日2012年11月14日 申請日期2011年2月11日 優(yōu)先權(quán)日2010年2月12日
發(fā)明者E·J·豪爾, J·C-Y·馮, S·丘布 申請人:微軟公司