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

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

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