CN102782633B - 灵活的平行和正交移动的视觉信息呈现的方法 - Google Patents

Abstract

用户界面（UI）系统计算多层图形用户界面中的移动。UI系统接收与触摸屏上的手势相对应的用户输入。UI系统计算第一层以第一移动速率在第一方向上（例如，水平方向）的移动。UI系统计算第二层与第一层的移动基本平行的以不同于第一移动速率的第二移动速率进行的移动。UI系统计算各层之一的UI元素中在与第一方向基本正交的方向上的移动（例如，垂直移动）。

Description

灵活的平行和正交移动的视觉信息呈现的方法

背景技术

有效用户界面的设计提出许多挑战。一个挑战是给定了显示器的空间限制和特定用户的需求，如何为用户提供最优量的视觉信息或功能。这个挑战对于具有小型显示器的设备(诸如，智能电话或其他移动计算设备)会尤其棘手。这是因为对于进行特定活动的用户通常存在比适合于显示器的更多的可用信息。用户会容易变得迷惑，除非认真地注意信息是如何呈现在有限量的可用显示空间中的。 

不论先前的技术的好处如何，它们都没有以下呈现的技术和工具的优点。 

发明内容

此处描述的技术和工具涉及在计算机显示器上向用户呈现视觉信息，并且更具体地涉及在小型显示器上呈现视觉信息，小型显示器诸如是在智能电话和其他移动计算设备上找到的那些显示器。具体而言，描述了涉及用户界面的不同方面的技术和工具，在该用户界面中，彼此相关的视觉信息层以不同的速率移动。在一个实现中，各层响应于用户输入，在同一个方向上以是层的长度(也被称为层的宽度，诸如当层被水平地定向时)的函数的速率移动。例如，图形用户界面(GUI)包括背景层、标题层和内容层。在特定方向上(例如，在水平维度中从左向右)用户导航通过内容层也导致在背景层和标题层的一个或多个中的同一方向上的移动。层中移动的量和性质依赖于一个或多个因素，诸如，层中的数据、或层中对应锁点(lock points)之间的相对距离。例如，如果内容层比背景层长，则内容层比背景层移动得快。内容层的移动速率可以与触摸屏上手势的移动速率相匹配，以便给用户直接操纵触摸屏上的内容的感觉。 

一个方面，UI系统显示包括至少第一和第二层的GUI。第一层中视觉信息的第一部分位于触摸屏的显示区域内。UI系统接收与触摸屏上的第一手势相对应的第一用户输入。UI系统至少部分地基于用户输入来计算第一移动，第一移动包括从初始第一层位置到当前第一层位置的第一层的移动，在初始第一层位置中，第一层中视觉信息的第二部分位于显示区域以外，在当前第一层位置中，第一层中视觉信息的第二部分位于显示区域内。第一移动以第一移动速率在第一方向上（例如，移动速率基本等于用户的手指或触摸屏上其他物体摆出的手势的移动速率）进行。UI系统至少部分地基于用户输入来计算与第一移动基本平行的第二移动，第二移动包括从初始第二层位置到当前第二层位置的第二层中视觉信息的移动。第二移动以第二移动速率在第一方向上进行。第二移动速率与第一移动速率不同。 

第一层具有可用于在与第一方向（例如，水平方向）基本正交的第二方向（例如，垂直方向）上移动的用户界面元素（例如，可垂直滚动的元素，诸如链接列表）。UI系统接收与触摸屏上的第二手势相对应的第二用户输入，并至少部分地基于第二用户输入来计算基本正交的移动（例如，垂直移动）。基本正交的移动包括第一层中用户界面元素中的视觉信息从初始元素位置到当前元素位置的的移动。可基于初始元素位置和第二手势的速度来计算当前元素位置。当元素位于初始元素位置时，用户界面元素中视觉信息的一部分可以位于显示区域以外，而在元素位于当前元素位置时用户界面元素中视觉信息的这一部分位于显示区域以内。 

另一方面，计算设备显示包括内容层、段首层和标题层的GUI。每层包括相应层中视觉信息的至少第一和第二部分。相应层中视觉信息的第一部分位于显示区域中，而相应层中视觉信息的第二部分位于显示区域以外。内容层包括至少一个可滚动的元素，该元素具有视觉信息在显示区域中的第一部分以及视觉信息在显示区域以外的第二部分。计算设备通过触摸屏接收第一用户输入，并至少部分地基于该第一用户输入来计算内容层的移动。内容层的移动包括从（a）初始内容层位置到（b）当前内容层位置的内容层的移动，在初始内容层位置中，内容层中视觉信息的第二部分位于显示区域以外，在当前内容层位置中，内容层中视觉信息的第二部分位于显示区域内。计算设备动画化从（a）到（b）的移动。内容层移动以内容层移动速率在第一方向上进行。计算设备至少部分地基于第一用户输入来计算段首层的移动。段首层的移动包括从（c）初始段首层位置到（d）当前段首层位置的段首层的移动，在初始段首层位置中，段首层中视觉信息的第二部分位于显示区域以外，在当前段首层位置中， 段首层中视觉信息的第二部分位于显示区域内。计算设备动画化从（c）到（d）的移动。段首层移动以段首层移动速率在第一方向上进行。计算设备至少部分地基于第一用户输入来计算标题层的移动。标题层的移动包括标题层从（e）初始标题层位置到（f）当前标题层位置的移动，在初始标题层位置中，标题层中视觉信息的第二部分位于显示区域以外，在当前标题层位置中，标题层中视觉信息的第二部分位于显示区域内。计算设备动画化从（e）到（f）的移动。标题层移动以标题层移动速率在第一方向上进行。计算设备通过触摸屏接收第二用户输入，并至少部分地基于该第二用户输入来计算可滚动元素的移动。可滚动元素的移动包括可滚动元素中视觉信息从（g）初始可滚动元素位置到（h）当前可滚动元素位置的移动，在初始可滚动元素位置中，该可滚动元素中视觉信息的第二部分位于显示区域以外，而在当前可滚动元素位置中，该可滚动元素中视觉信息的第二部分位于显示区域内。计算设备动画化从（g）到（h）的移动。可滚动元素的移动是在与第一方向基本正交的第二方向上。标题层移动速率与内容层移动速率、段首层移动速率不相同。内容层、段首层和标题层彼此基本平行，并且相对于彼此不重叠。 

各层可包括锁点。例如，包括内容窗格的内容层可具有基于内容窗格的数量和/或位置来（自动地）确定的锁点。可以以其他方式来设置锁点。例如，锁点可以基于一层前一状态的某些方面，诸如，第一层中用户界面元素的退出位置。第二层（例如，背景层、标题层或段首层）中的锁点可具有与第一层锁点相对应的第二层锁点。移动速率可以基于锁点之间的距离。例如，移动速率可以与第二层锁点间的距离和对应于第二层锁点的第一层锁点（例如，内容层锁点）间的距离之间的差成比例。 

可以执行锁定动画。例如，锁定动画包括确定一层中用户界面元素中的阈值数量的像素是否位于显示区域以内，并且基于该判定，动画化该层中从当前位置到锁定动画后位置的转移，使得该用户界面元素在显示区域中是可见的。作为另一个示例，锁定动画包括选择一锁点并动画化一层中从当前位置到锁定动画后位置的转移，在锁定动画后位置中，所选择的锁点与显示区域的一部分对齐。还可以动画化其他转移，诸如，第二层中从当前第二层位置到对应于第一层锁定动画后位置的第二层锁定动画后位置（例如，其中第二层锁点与所选 择的第一层锁点对齐的第二层位置）的转移。作为另一个示例，锁定动画包括选择与第一层（例如，内容层）中的用户界面元素（例如，内容窗格）相关联的第一层锁点，以及动画化该第一层中从当前第一层位置到第一层锁定动画后位置的转移，在该第一层锁定动画后位置中，所选择的第一层锁点与显示区域的一部分对齐，使得该用户界面元素在该显示区域中是可见的。锁定动画可以基于用户手势来执行。例如，可以基于轻拂手指的速度或轻击手势的位置来选择锁点。 

锁定动画可适于层中用户界面元素中的正交移动（例如，垂直移动）。例如，可在可垂直滚动的元素（例如，列表）中执行垂直的锁定动画，其中垂直的锁定动画包括移动可垂直滚动的元素，使得可垂直滚动的元素中的锁点与显示区域的一部分垂直地对齐。 

可以执行包装动画。例如，在两层中每一个包括起始和结束，并且在当前位置显示各层的结束时，执行包装动画包括动画化第一层中从当前第一层位置到显示第一层起始的包装动画后第一层位置的转移，并且动画化第二层中从当前第二层位置到显示第二层起始的包装动画后第二层位置的转移。动画化转移可包括以与其他移动速率不同的包装移动速率来移动视觉信息。 

可以基于用户输入来计算各层中的移动（例如，移动速率、方向、和当前位置）。例如，当前位置可以基于手势的初始位置、以及方向和速度。还可基于其他层的位置来计算各层中的移动。例如，可以基于已计算的当前第一层位置来计算当前的第二层位置，诸如通过基于与第一层锁点相对应的第二层锁点的位置来计算当前第二层位置。 

手势可包括例如平移、拖动、轻拂和轻击交互。可通过确定手势移动的速率是否超过一阈值来检测轻拂。指示方向的手势可导致所指示的方向或某个其他方向上的移动。例如，水平方向上的手势可导致垂直或水平方向上的移动。 

可以用不同的方式来确定移动速率。例如，可以基于一层的运动比率来计算该层的移动速率，其中运动比率是该层的宽度除以另一层的最大宽度。作为另一个示例，移动速率可以基于第一层的长度与第二层的长度之间的差。 

可以添加附加层。例如，图形用户界面可包括与第一和第二层基本平行的第三层（或更多层）。各层中的移动速率可以与相应层的长度之间的差成比例。 在一个实现中，段首层位于显示区域中的内容层上面，标题层位于显示区域中的段首层上面，并且内容层、段首层和标题层与背景层重叠。 

参考附图阅读以下详细描述，将更清楚本发明的前述和其他目标、特征和优点。 

附图简述 

图1是示出根据一个或多个所描述的实施例的具有锁点的背景层和内容层的图示。 

图2是示出根据一个或多个所描述的实施例的用于提供具有以不同速率移动的多层的用户界面的示例技术的流程图。 

图3A-3C是示出根据一个或多个所描述的实施例的由多层UI系统呈现的图形用户界面中的多层的图示。 

图3D是示出根据一个或多个所描述的实施例的图3A-3C的多层的图示，其中显示区域以横向方式来定位。 

图4是示出根据一个或多个所描述的实施例的其中UI系统计算多层GUI中第一方向上的移动的示例技术的流程图。 

图5A-5D是示出根据一个或多个所描述的实施例的多个UI层的图示，层具有能够以不同速率移动的不同部分。 

图6A-6D是示出根据一个或多个所描述的实施例的多个UI层的图示，其中两个层前后移动。 

图6E是示出根据一个或多个所描述的实施例的图6A-6D的具有为内容层中列表指示的可能向上和向下运动的多个UI层的图示。 

图7是示出根据一个或多个所描述的实施例的示例技术的流程图，其中UI系统计算多层GUI中第一方向上的移动，该多层GUI具有包含可在与第一方向正交的第二方向上移动的UI元素的至少一层。 

图8A-8C是示出根据一个或多个所描述的实施例的包括背景层的多个UI层的图示。 

图9是示出了其中可实现所描述的实施例的多层UI系统的系统图示。 

图10示出了可在其中实现若干所描述的实施例的合适计算环境的一个通 用示例。 

图11示出了可在其中实现一个或多个所描述的实施例的合适实现环境的通用示例。 

图12示出了可在其中实现一个或多个所描述的实施例的移动计算设备的通用示例。 

具体实施方式

描述了涉及用户界面的不同方面的技术和工具，在该用户界面中，彼此相关的视觉信息层以不同的速率移动。在一个实现中，响应于用户输入，各层在同一方向上以是该层长度的函数的速率进行移动。例如，图形用户界面（GUI）包括背景层、标题层和内容层。在特定方向上（例如，在水平维度中从左向右）用户导航通过内容层也导致在背景层和/或标题层中的同一方向上的移动。移动的量和性质依赖于一个或多个因素，诸如，层的相对长度、或对应锁点之间的相对距离。例如，如果内容层比背景层长（就像素而言），则内容层比背景层（在像素的基础上）移动得快。 

对此处所描述的实现的各种替换是可能的。例如，参考流程图所描述的技术可以通过改变流程图中所示的级的排序，通过重复或省略某些级等来改变。作为另一个示例，参考系统图示所描述的系统可以通过改变图中所示的处理阶段的排序，通过重复或省略某些阶段等来改变。作为另一个示例，参考图示所描述的用户界面可以通过改变图中所示的用户界面特征的内容或安排，通过省略某些特征等来改变。作为另一个示例，虽然参考特定的设备和用户输入机制（例如，具有触摸屏界面的移动设备）描述了某些实现，但所描述的技术和工具还可与其他设备和/或用户输入机制一同使用。 

各种技术和工具可组合或单独使用。不同的实施例实现所描述的技术和工具的一个或多个。 

I.分层图形用户界面技术和工具

有效用户界面的设计提出许多挑战。一个挑战是给定了显示器的空间限制，如何为用户提供最优量的视觉信息或功能。这个挑战对于具有小型显示器的设备（诸如，智能电话或其他移动计算设备）会尤其棘手。这是因为通常存 在比适合于显示器更多的可用信息或功能。 

通过将数据层放在彼此顶部并允许它们以不同的方式移动，图形用户界面能提供用户正在查看的信息的上下文，即使存在与用户当前活动相关的、显示器上不可见的更多信息。例如，内容层可在至少某种程度上独立地移动，允许用户将内容层的不同部分移入视图和移出视图，而与内容层相关联的另一层的某个部分保持可见，即使该其他层比内容层移动程度小。 

所描述的技术和工具涉及将诸如图形用户界面（GUI）的用户界面（UI）中的信息（例如，视觉信息、功能信息和元数据）分隔成层（例如，平行的层或至少基本平行的层），并以不同的方式（例如，以不同的速度）移动这些层。例如，所描述的实施例涉及多层UI系统，该系统呈现以相对于彼此不同速度移动的UI层。每层中移动的速率可依赖于若干因素，包括层中要可视地呈现（例如，文本或图形）的数据量、或对应锁点之间的相对距离，这将在下面更详细地描述。层中要可视地呈现的数据量可通过例如确定如在数据的水平方向上测量的、如在显示器上呈现的、或如为显示器上可能呈现所布局的长度来测量。长度可以以像素或某个其他合适的度量（例如，文本串中字符的数量）来测量。具有较大数据量且以较快速率移动的层可比具有较小数据量且以较慢速率移动的层提前多个像素。层移动速率可以用不同的方式来确定。例如，可以从较快层的移动速率导出较慢层的移动速率，反之亦然。或者，可以彼此独立地确定层移动速率。 

UI各层中的移动通常在某种程度上依赖于用户交互。例如，希望从层的一个部分导航到另一个部分的用户提供指示所期望的移动方向的用户输入。该用户输入随后可导致显示器上一个或多个层中的移动。在某些实施例中，用户通过与触摸屏交互来引起在设备的显示区域中可见的层的移动。该交互可包括例如用指尖、指示笔、或其他物体接触触摸屏（例如，轻拂或滑动运动），移动它穿过触摸屏的表面以引起层在所期望的方向上移动。另选地，用户可通过某些其它方式与层交互，诸如通过按压键区或键盘上的按钮（例如，方向性按钮）、移动跟踪球、用鼠标定点并点击、作出语音命令等。 

当用户交互引起层中的移动时，该层的移动通常是层的长度、用户作出的运动的尺寸、移动速率和方向的函数。例如，触摸屏上的向左轻拂运动产生各 层相对于显示区域的向左的移动。还可以相对于彼此来排列各层，使得各层在向用户提供视觉上下文的同时能以不同的速率移动。例如，段首（例如，诸如“历史”的文本串）可跨越内容层中可见的和屏幕外的内容（例如，表示当前正在播放的媒体文件和最近播放过的媒体列表的图像），以与内容层不同的速率移动，但提供内容的上下文。 

可以依赖于实现和/或用户偏好，用不同的方式来解释用户输入以在各层中产生不同种类的移动。例如，多层UI系统可将向左或向右的任何移动，甚至在水平平面以上或以下延伸的对角线移动解释为一层的有效的向左或向右运动，或者系统可要求更精确的移动。作为另一个示例，多层UI系统可以要求在移动一层之前，用户同与由该层占据的显示区域相对应的触摸屏的部分进行交互，或者该系统可允许与触摸屏的其他部分进行交互以引起一层中的移动。作为另一个示例，用户可使用向上或向下的运动在未一次全部在显示器上出现的内容层的部分（诸如元素列表）中向上或向下滚动，并且这种向上/向下运动甚至可与左/右运动相组合以得到对角线移动效果。 

在各层中产生特定移动所必要的用户运动的实际量和方向可取决于实现或用户偏好而变化。例如，多层UI系统可包括默认设置，该默认设置用于根据用户移动的大小或移动速率（或速度）来计算一层中的运动量（例如，按像素）。作为另一个示例，用户可以调整触摸屏敏感度控件，使得触摸屏上指尖或指示笔的相同的运动依赖于控件的设置而产生各层的或小或或大的移动。 

在某些实施例中，各层包括锁点。各层中的锁点指示设备的显示区域将与之对齐的对应位置。例如，当用户导航至内容层上的一位置使得显示区域的左边缘位于左边缘锁点“Ａ”时，该显示区域的左边缘也将与其他层中每一个的对应的左边缘锁点“Ａ”对齐。锁点还可指示显示区域的右边缘的对齐（右边缘锁点），或其它类型的对齐（例如，中央锁点）。一般而言，定位每层中的对应锁点以便说明各层将以不同速度移动的事实。例如，如果内容层中第一锁点与第二锁点之间的距离是背景层中对应的第一和第二锁点之间的距离的两倍，则背景层在两个锁点之间转移时以内容层一半的速率在移动。 

在图1所示的示例中，背景层110和内容层112具有对应的左边缘锁点“A”、“C”、“E”和“G”，以及对应的右边缘锁点“B”、“D”、“F” 和“H”。左边缘锁点与显示区域的左边缘对齐（未示出），并且右边缘锁点与显示区域的右边缘对齐。与锁点相对应的左边缘或右边缘对齐可包括锁点与显示区域边缘的精确对齐，或者可包括锁点与显示区域边缘之间的某些量的填充。在内容层112中，左边缘锁点与内容窗格（例如，分别是内容窗格120、122、124和126）的左边缘对齐，并且右边缘锁点与内容窗格的右边缘对齐。两层110、112中的锁点之间的映射由两层之间的箭头和背景窗格102中的虚线来指示。 

图1中所示的锁点通常不表示锁点的完整集合。作为替换方案，锁点可以指示其他种类的对齐。例如，中心锁点可以指示与显示区域的中心的对齐。作为另一个替换方案，可以使用更少的锁点，或者可以使用更多的锁点以便提供可显示的区域之间的重叠。例如，锁点可被限制为左边缘或右边缘锁点，或者锁点可用于一层的某些部分，而不用于其他部分。作为另一个替换方案，可以省略锁点。 

除了指示层中的对应位置以外，锁点可以展示其他行为。例如，锁点可以指示当与该锁点相对应的层的部分进入显示器上的视图时内容层将移至的该层中的位置。例如当图像、列表或其他内容元素部分地靠近显示区域的左或右边缘进入视图时，这是有用的——内容层可通过移动该层使得显示区域的边缘与适当的锁点对齐，自动地将内容元素完整地带入视图。可在导航事件（诸如，轻拂或平移手势）的结束处执行锁定动画，以将各层与特定的锁点对齐。在导航事件产生不与锁点精确对齐的用户生成的移动的情况下，锁定动画可用于对齐各层。作为示例，可在导航事件的结束处执行锁定动画，该导航事件使内容层移至两个内容窗格之间的位置（例如，两个内容窗格的部分在显示区域中是可见的地方）。多层UI系统可以检查哪个内容窗格占据显示区域中的更多空间，并使用锁定动画来转移到该窗格。这可改善各层的总体外观，并可有效地将信息或功能（例如，功能UI元素）带入显示区域的视图中。 

锁点还可用于在导航期间提供锁定“凹槽”或“凸起”效果。例如，用户沿着内容层的长度导航时，该层可在用户作出的每个导航移动（例如，触摸屏上的轻拂或平移运动）之后停在锁点处（例如，在规律地隔开的间隔处、在内容元素之间等）。 

各个层的移动可依赖于上下文而不同。例如，用户可从内容层的起始向左导航以到达内容层的结束，并可从内容层的结束向右导航以到达内容层的起始。该包装特征在导航通过内容层时提供更多的灵活性。多层UI系统可用不同的方式来处理包装。例如，可通过生成动画来处理包装，该动画示出从层（诸如，标题层或背景层）的结束回到层的起始的快速转移，反之亦然。这种动画可与内容层中普通的平移移动、或内容层中的其他动画（诸如，锁定动画）相组合。然而，包装功能不是必需的。 

示例1——多个UI层

图2是示出用于提供具有以不同速率移动的多层的用户界面的示例技术200的流程图。在210，多层UI系统提供用户界面，该用户界面包括（例如，在计算设备的显示区域中）同时显示的平行层。一般地，各层中至少一个的至少部分在显示区域中是不可见的。在220，系统接收指示了要在一层中进行移动的用户输入。例如，在内容层延伸超出显示区域的右边缘时，用户可与触摸屏进行交互以引起内容层中的平移运动，以便查看内容层的不同部分。在230，系统至少部分地基于依赖于用户输入，在平行层中以不同移动速率呈现移动。例如，系统可使内容层以与触摸屏上的平移手势的速率相等的速率移动，并使标题层和背景层以较慢的速率移动。 

图3Ａ-3Ｃ是示出设备的多层UI系统所呈现的GUI中的多个层310、312、314的图示，该设备具有带有显示区域300的显示器。显示区域300具有智能电话或类似的移动计算设备上的显示器典型的尺寸。根据图3Ａ-3Ｃ中所示的示例，（手部图标所表示的）用户302通过与具有显示区域300的触摸屏交互来与内容层314进行交互。该交互可包括例如用指尖、指示笔、或其他物体接触触摸屏，并移动它（例如，用轻拂或滑动运动）穿过触摸屏的表面。 

内容层314包括内容元素（例如，内容图像300A-H）。层310、312包括文本信息（分别是“Category（类别）”和“Selected Subcategory（所选择的子类别）”）。内容层314的长度被指示约为层312的长度的两倍，而层312的长度被指示约为层310的长度的两倍。 

在图3A-3C中，可由用户302引起的层的运动方向由指向左的箭头和指向右的箭头来指示。这些箭头响应于用户输入，指示层310、312、314的可能 的移动（例如，左或右水平移动）。 

在图3A-3C所示的示例中，系统将用户向左或右的移动、甚至是在水平面以上或以下延伸的对角线移动解释为指示一层的有效的向左或向右运动的输入。虽然图3A-3C中所示的示例示出了用户302与对应于内容层314的显示区域300部分进行交互，但是系统不要求用户与对应于内容层314所占据的显示区域的触摸屏部分进行交互。相反，系统允许与触摸屏的其他部分（例如，与其他层占据的显示区域300部分相对应的部分）进行交互，以引起层310、312、314中的移动。 

当用户输入指示向右或向左的运动时，系统生成相对于显示区域300的层310、312、314的向右或向左的移动。层310、312、314的移动量是各层中的数据以及用户进行的运动的大小或移动速率（或速度）的函数。 

在图3A-3C所示的示例中，除在包装动画期间以外，层310、312、314根据以下规则移动： 

1.内容层314将以层312速率的大约两倍的速率移动，层312是层314长度的大约一半。 

2.内容层312将以层310速率的大约两倍的速率移动，层310是层312长度的大约一半。 

3.内容层314将以层310速率的大约四倍的速率移动，层310是层314长度的大约1/4。 

在某些情况下，层310、312、314中的移动可与上面描述的规则不同。在图3A-3C所示的示例中，许可包装。箭头指示用户可从内容层314的起始处（图3A中示出的位置）向左导航，并可从内容层314的结束处（图3C中示出的位置）向右导航。在包装动画期间，一些层可比在其他种类的移动期间移动得更快或更慢。在图3A-3C所示示例中，层310和层312中的文本在包装回到内容层的起始处时移动得更快。在图3C中，显示区域300分别示出层310和312中相应文本串的结束处的一个或两个字母的部分。返回到图3A中所示状态的包装动画可包括将层310、312的文本从右侧带入视图，得到比在其他上下文中更快速的移动，诸如从图3A示出的状态转移到图3B示出的状态。 

在图3A-3C中，为每层指示示例左边缘“锁点”“A”、“B”和“C”。 左边缘锁点指示在每层上显示区域300的左边缘的对应位置。例如，当用户导航至内容层314上的一位置使得显示区域300的左边缘位于锁点“Ａ”处时，该显示区域的左边缘也将在其他层310、312的锁点“Ａ”处对齐，如图3Ａ所示。在图3B中，显示区域300的左边缘位于层310、312、314的每一个中的锁点“B”处。在图3C中，显示区域300的左边缘位于各层每一个中的锁点“C”处。 

图3A-3C中所示的锁点通常不表示锁点的完整集合，并且仅为简明起见被限制为锁点“A”、“B”和“C”。例如，可为内容图像330A-330H的每一个设置左边缘锁点。或者，可以使用更少的锁点，或者可以省略锁点。作为替换方案，锁点可指示其他种类的对齐。例如，右边缘锁点可指示与显示区域300的右边缘的对齐，或者中心锁点可指示与显示区域300的中心的对齐。 

示例2——显示方向中的改变

所描述的技术和工具可按照不同的方向（诸如横向）被用在显示屏幕上。例如UI已被（例如用户偏好）配置为以横向方式来定向，或者用户已物理地旋转了设备时，显示方向中的改变会发生。设备中的一个或多个传感器（例如，加速计）可用于检测设备何时已被旋转，并由此调整显示方向。在图3D所示的示例中，以横向方式来定向显示区域，并且仅有层312和314是可见的。然而，内容层的更多部分是可见的，允许用户一次查看内容层中的更多内容（例如，内容图像330A-330D）。或者，可以在适当时作出调整以保持所有层是可见的，诸如通过降低层的高度并减小字体和图像大小。例如，可以降低层310和312的高度，并对应地减小文本中字体的大小，使得在为便于导航使内容层314保持相同大小的同时，层310和312仍是可见的。 

像图3A-3C中那样，用户302可作出（横向）向左或向右的运动以沿着内容层314导航。每层中锁点“A”、“B”和“C”的定位以及各层的相对长度示出了内容层314将以其上的层312的约两倍的速率来移动。或者，可以动态地调整锁点的位置和各锁点之间的距离，以考虑重新定向的效果（例如，显示区域的新的有效宽度）。但是，这些调整不是必需的。例如，如果显示区域具有相等的高度和宽度，则将显示区域重新定向为横向将不会改变显示区域的有效宽度。 

示例3——计算多个UI层中的移动

图4是示出其中UI系统计算多层GUI（例如，图3A-3C中所示的GUI）中第一方向（例如，水平方向）上的移动的示例技术400的流程图。 

在410，UI系统显示包括多个层的图形用户界面。第一层（例如，内容层314）中视觉信息的第一部分（例如，如图3A中所示的内容图像330）位于触摸屏的显示区域（例如，显示区域300）内。在420，UI系统接收与触摸屏上的手势相对应的用户输入。在430，UI系统至少部分地基于用户输入来计算第一移动。第一移动是第一层从初始第一层位置（例如，图3A中所示的位置）到当前第一层位置（例如，图3Ｂ中所示的位置）的移动，在初始第一层位置中，第一层中视觉信息的第二部分（例如，内容图像330C）位于显示区域以外，在当前第一层位置中，第一层中视觉信息的第二部分位于显示区域内。第一移动以第一移动速率在第一方向上（例如，向右，水平方向）进行。第一移动速率基于手势的移动速率。例如，第一移动速率可基本上等于手势移动速率（例如，用户的手指或触摸屏上其他物体的移动速率），以便给用户直接操纵触摸屏上的内容的感觉。在440，UI系统至少部分地基于用户输入来计算与第一移动基本平行的第二移动。第二移动是第二层（例如，层312）中视觉信息从初始第二层位置（例如，图3A中所示的位置）到当前第二层位置（例如，图3B中所示的位置）的移动。第二移动以与第一移动速率不同的第二移动速率在第一方向上（例如，向右，水平方向）进行。 

该移动可（例如，在移动电话或其他计算设备的触摸屏上）被动画化和/或呈现以供显示。 

示例4——以变化速度移动的各个层

图5A-5D是示出由具有三层510、512、514的多层UI系统所呈现的GUI的图示，其中段首层512的不同部分与内容层514的不同部分相关联。根据图5A-5D所示的示例，用户（未示出）与内容层514交互。例如，用户通过按压导航按钮（未示出）以突出显示内容层中的不同段（例如，段1a、1b、1c、1d、2a、2b、2c、或2d）来对内容层514导航。或者，用户通过与具有显示区域300的触摸屏交互来与内容层514进行交互。该交互可包括例如用指尖、指示笔、或其他物体接触触摸屏，并移动它（例如，用轻拂或滑动运动）穿过触摸 屏的表面。 

内容层514包括段1a、1b、1c、1d、2a、2b、2c、和2d，这些段可以是图像、图标、文本串或链接的列表、或某些其它内容。其他层510、512包括文本信息。段首层512包括两个文本串（“Feature1（特征1）”和“Feature2（特征2）”）。“特征1”与段1a、1b、1c和1d相关联。“Feature 2”与段2a、2b、2c和2d相关联。层510包括一个文本串（“Application（应用）”）。内容层514的长度被指示为比段首层512的总长度（例如，两个串的组合长度）长，并且比层510的长度长。 

在图5A-5D中，可由用户指示的运动方向由显示区域300上的指向左和指向右的箭头来指示。这些箭头响应于用户输入，指示层510、512、514的可能的移动（左或右水平的移动）。 

在图5A-5D所示的示例中，用户在内容层514中向左或向右导航时，突出显示内容层514的不同段（例如，图5A中的段1a、图5B中的段1d、图5C中的段2a、图5D中的段2d）。当用户输入指示向右或向左的运动时，系统生成相对于显示区域300的层510、512、514的向右或向左的移动。层510、512、514的移动量是各层中的数据以及用户进行的运动的大小或移动速率（或速度）的函数。 

在图5A-5D中，为每层510、512、514指示示例右边缘“锁点”“A”、“B”、“C”和“D”。每层的右边缘锁点指示在每层上显示区域300的右边缘的对应位置。例如，当用户导航至内容层514上的段1a，且显示区域300的右边缘位于锁点“Ａ”处时，该显示区域300的右边缘还将在其他层510、512的锁点“Ａ”处对齐，如图5Ａ所示。在图5B中，显示区域300的右边缘位于层510、512、514的每一个中的锁点“B”处。在图5C中，显示区域300的右边缘位于层510、512、514的每一个中的锁点“C”处。在图5D中，显示区域300的右边缘位于层510、512、514的每一个中的锁点“D”处。 

图5A-5D中所示的锁点通常不表示锁点的完整集合，并且仅为简明起见被限制为锁点“A”、“B”、“C”和“D”。例如，可为内容层514中的一个或多个段设置左边缘锁点。或者，可以使用附加的右边缘锁点，可使用更少的锁点，或者可以省略锁点。作为替换方案，锁点可指示其他种类的对齐。例 如，中心锁点可用于获得与显示区域300的中心的对齐。 

在图5A-5D所示的示例中，除在包装动画期间以外，层510、512、514根据以下规则移动： 

1.与段首层512中“Feature 1”文本串相关联的内容层514的部分（段1a、1b、1c和1d）将以约四倍于“Feature 1”文本串的速率来移动。虽然“Feature 1”文本串是与该“Feature 1”文本串相关联的内容层514的部分（段1a、1b、1c和1d）的长度的约一半，但在内容层中要从右边缘锁点“A”移动到右边缘锁点“B”的距离是段首层512中对应锁点之间的距离约四倍长。类似地，与段首层512中“Feature 2”文本串相关联的内容层514的部分（段2a、2b、2c和2d）将以约四倍于“Feature 2”文本串的速率来移动。 

2.当导航通过与段首层512中“Feature 1”文本串相关联的内容层514的部分（段1a、1b、1c和1d）时，“Feature 1”文本串将以约两倍于层510的速率来移动。虽然“Feature 1”文本串与层510中的“Application”文本串几乎一样长，但在层510中要从右边缘锁点“A”移动到右边缘锁点“B”的距离是段首层512中对应锁点之间距离的约一半。类似地，当导航通过与段首层512中“Feature 2”文本串相关联的内容层514的部分（段2a、2b、2c和2d）时，“Feature 2”文本串将以约两倍于层510的速率来移动。 

3.当从与段首层512中“Feature 1”文本串相关联的内容层514的部分导航至与段首层512中“Feature 2”文本串相关联的内容层514的部分（即，从图5B所示的段1d到图5C所示的段2a）时，段首层512移动得更快，如由图5C的层512中右边缘锁点“B”与右边缘锁点“C”之间的距离所示。 

4.内容层514将以约八倍于层310的速率来移动。在内容层514中相邻右边缘锁点之间（例如，从“A”到“B”）移动的距离是层510中对应右边缘锁点之间的距离约八倍长。 

在某些情况下，层510、512、514中的移动可与上面描述的规则不同。在图5A-5D所示的示例中，许可包装。显示区域300上面的箭头指示了用户可从内容层514的起始处（图5A中示出的位置）向左导航，并可从内容层514的结束处（图5D中示出的位置）向右导航。在包装动画期间，一些层可比在其他种类的移动期间移动得更快或更慢。例如，从图5D中所示状态返回到图5A 中所示状态的包装动画可包括将层510、512的文本从右侧带入视图，得到比在其他上下文中更快的移动，诸如从图5A中所示的状态转移到图5B中所示的状态。 

示例5——前后移动的层

图6A-6D是示出多层UI系统所呈现的GUI的图示，该多层UI系统包括与其上的层612前后（即，在同一方向上且以同一速率）移动的内容层614。在该示例中，（手部图标所表示的）用户302通过与具有显示区域300的触摸屏进行交互来导航通过内容层614。该交互可包括例如用指尖、指示笔、或其他物体接触触摸屏，并移动它（例如，用轻拂或滑动运动）穿过触摸屏的表面。 

内容层614包括游戏图像640、642、644，列表650、652、654，以及化身630（下面更详细地描述）。其他层610、612包括文本信息（层610中的“Games（游戏）”，层612中的“Spotlight（焦点）”、“Xbox Live”、“Requests（请求）”和“Collection（集合）”）。在图6A-6D中，为层610和612指示示例锁点“A”、“B”、“C”和“D”。就水平运动而言，内容层614被锁定到层612，为层612指示的锁点也应用到层614。 

每层的锁点指示每层上的显示区域300的左边缘的对应位置。例如，当用户导航至内容层614上的一位置使得显示区域300的左边缘位于锁点“Ａ”处时，该显示区域300的左边缘也将在其他层610、612的锁点“Ａ”处对齐，如图6Ａ所示。在图6B中，显示区域300的左边缘位于层610、612、614的每一个中的锁点“B”处。在图6C中，显示区域300的左边缘位于层610、612、614的每一个中的锁点“C”处。在图6D中，显示区域300的左边缘位于层610、612、614的每一个中的锁点“D”处。 

图6A-6D中所示的锁点通常不表示锁点的完整集合，并且仅为简明起见被限制为锁点“A”、“B”、“C”和“D”。例如，可以添加右边缘锁点以获得与显示区域300的右边缘的对齐，或者可以添加中心锁点以获得与显示区域300的中心的对齐。或者，可使用更少的锁点，可使用更多的锁点，或者可以省略锁点。 

可由用户302在层610、612、614中引起的运动的方向由图6A-6D中指向左的箭头和指向右的箭头来指示。指向右和指向左的箭头响应于用户移动， 指示层610、612、614的可能的移动（左或右的水平的移动）。系统将用户向左或右的移动、甚至在水平面以上或以下延伸的对角线移动解释为指示一层的有效的向左或向右运动。虽然图6A-6E中所示的示例示出了用户302与对应于内容层614的显示区域300的部分进行交互，但是系统不要求用户与对应于内容层614所占据的显示区域的触摸屏部分进行交互。相反，系统还允许与触摸屏的其他部分（例如，与其他层占据的显示区域相对应的部分）进行交互，以引起层610、612、614中的移动。 

当用户输入指示向右或向左的运动时，系统生成相对于显示区域300的层610、612、614的向右或向左的移动。在该示例中，层610、612、614的水平移动量是各层中的数据以及用户进行的运动的大小或速率的函数。除在包装动画期间以外，层610、612、614根据以下规则水平地移动： 

1.内容层614的水平移动被锁定到层612。 

2.层612和614每一个将以约三倍于层610的速率水平地移动，层610是层612和614的长度的约1/3。 

在某些情况下，层610、612、614中的移动可与上面描述的规则不同。在图6A-6E所示的示例中，许可包装。箭头指示了用户可从内容层614的起始处（图6A和6E中示出的位置）向左导航，并可从内容层614的结束处（图6D中示出的位置）向右导航。在包装动画期间，一些层可比在其他种类的移动期间移动得更快或更慢。在图6A和6D所示的示例中，层610中的文本在包装回到内容层614的起始处时移动得更快。在图6D中，显示区域300在“Games”文本串的结束处示出层610中两个字母的部分。返回到图6A中所示状态的包装动画可包括将层610、612、614中的数据（包括层610的文本）从右侧带入视图，得到比在其他上下文中更快的移动，诸如从图6A示出的状态转移到图6B示出的状态。 

示例6——层元素的移动

除了整个层的移动以外，用户还可依赖于层中的数据以及如何排列该层，来引起层的元素或部分中的移动。例如，用户可在层元素（例如，列表）中引起与作为整体在一层中被引起的移动（例如，水平移动）正交或基本正交的移动（例如，垂直移动）。水平移动的层中层元素的正交移动可包括诸如当嵌入 到内容层中的列表包含了比可被显示在显示区域中的更多的信息时，在列表中垂直地滚动。或者，呈现垂直移动的层的系统可允许层元素中的水平移动。 

在图6A和6E中，内容层614中的列表650包含比在显示区域300中可见的更多的信息。系统可将用户302作出的向上或向下移动（包括延伸到垂直平面的左侧或右侧的对角线移动）解释为列表650的有效的向上或向下运动。列表650的移动量可以是用户302作出的运动的大小或速率、以及列表650中数据的函数。因此，列表650的滚动可以是逐项的、逐项的页的、或其间的依赖于运动的大小或速率的某个依据。在该示例中，在图6A中，列表650包括在显示区域300中不可见的仅一个列表项，因此一系列小的或大的向下移动足以滚动到列表650的结束。如图6A和6E中所示，层中其他视觉信息（例如，内容层614中列表650以外的视觉信息，或其他层中的视觉信息）的垂直位置不受向上或向下移动的影响。在该示例中，各层作为整体的移动（包括作为整体影响各层的包装动画和锁定动画）被约束为水平运动（运动的主轴）。列表650是还许可沿着次轴的运动（例如，垂直运动）的一层中用户界面元素的示例，该沿着次轴的运动与层中作为整体的运动正交。 

图6A和6E示出了用户302与对应于内容层614中列表650的显示区域300的一部分进行交互。或者，系统可允许与触摸屏的其他部分（例如，与其他层占据的显示区域300的部分相对应的部分）的交互，以引起列表650中的向上或向下移动。 

在图6A和6E中，可由用户302引起的运动方向由指向左的箭头和指向右的箭头、以及图6A中附加的指向下的箭头和图6E中附加的指向上的箭头来指示。指向右和指向左的箭头响应于用户移动，指示层610、612、614的可能的移动（左或右的水平的移动）。指向下和指向上的箭头响应于用户移动，指示列表650的可能的移动（上或下的垂直的移动）。用户302可在列表650中作出向上或向下移动之后在内容层614中向左或向右移动。可以保存列表650的当前位置（例如，图6E中指示的列表底部的位置），或者系统可在从列表650向左或向右在内容层614中导航时回复到默认位置（例如，图6A中指示的列表顶部的位置）。虽然在图6A-6E（和其他附图）中出于解释目的示出了指示可能的移动的箭头，但显示区域300本身可显示层和/或列表的可能移 动的图形指示符（诸如箭头或人字形符号）。 

示例7——具有能够正交移动的元素的层中的移动

图7是示出其中UI系统计算多层GUI（图6A-6E中示出的GUI）中第一方向（例如，水平方向）上的移动的示例技术700的流程图，该多层GUI具有包含可在与第一方向正交（或基本正交）的第二方向上移动的UI元素的至少一层。 

在710，UI系统显示包括多个层的图形用户界面。第一层（例如，内容层614）包括可用于在与第一方向（例如，水平方向）基本正交的第二方向（例如，垂直方向）上移动的用户界面元素（例如，列表650）。第一层中视觉信息的第一部分（例如，如图6B所示的列表652）位于触摸屏的显示区域（例如，显示区域300）内。 

在720，UI系统接收与触摸屏上的第一手势相对应的第一用户输入。在730，UI系统至少部分地基于第一用户输入来计算第一移动。第一移动是第一层从初始第一层位置（例如，图6B中所示的位置）到当前第一层位置（例如，图6A中所示的位置）的移动，在初始第一层位置中，第一层中视觉信息的第二部分（例如，列表650）位于显示区域以外，在当前第一层位置中，第一层中视觉信息的第二部分位于显示区域内。第一移动以第一移动速率在第一方向上（例如，向左，水平方向）进行。在740，UI系统至少部分地基于第一用户输入来计算与第一移动基本平行的第二移动。第二移动是第二层中的视觉信息从初始第二层位置（例如，图6B中所示的位置）到当前第二层位置（例如，图6A中所示的位置）的移动。第二移动以与第一移动速率不同的第二移动速率在第一方向上（例如，向左，水平方向）进行。 

在750，UI系统接收与触摸屏上的第二手势相对应的第二用户输入。在760，UI系统至少部分地基于第二用户输入来计算基本正交的移动（例如，垂直移动）。该基本正交的移动是第一层的用户界面元素中的视觉信息从初始元素位置到当前元素位置的的移动。 

基本正交的移动可以是可垂直滚动的元素（例如，列表650）中的视觉信息从初始垂直位置（例如，图6A中所示的列表650的位置）到当前垂直位置（例如，图6E中所示的列表650的位置）的移动。可基于例如初始垂直位置 和第二手势的速度来计算当前垂直位置。可垂直滚动的元素中的视觉信息的一部分可在可垂直滚动的元素在初始垂直位置（例如，图6A中所示的列表650的位置）时位于显示区域以外，并在可垂直滚动的元素在当前垂直位置（例如，图6E中所示的列表650的位置）时位于显示区域内。 

该移动可（例如，在移动电话或其他计算设备的触摸屏上）被动画化和/或呈现以供显示。 

示例8——化身

层可包括指示其他元素（诸如，一层中的其他元素或一层的各段）之间的关系的元素。指示其他元素之间的关系的元素可被包含在单独的层中、或与相应的其他元素相同的层中。例如，化身层可包括视觉元素（化身），该视觉元素的运动范围横跨与用户有关的另一层中的两个相关段。其他元素也可用于指示元素之间的关系。例如，音乐艺术家的图像可用于指示该艺术家的专辑列表与该艺术家的巡演日期列表之间的关系。 

在图6A-6E中，化身630与内容层中的列表652、654，以及层612中的列表652、654上面的首部（分别是“Xbox Live”和“Requests”）相关联。化身630可提供视觉线索以指示内容层的各部分（例如，列表652、654）之间的关系或吸引对内容层的各部分的注意力。在图6B中，将化身630定位在列表652和列表654之间。在图6C中，化身630浮在列表654的文本后面，但仍全部保留在显示区域300内。在图6D中，化身630仅部分地位于显示区域300内，并且位于显示区域300内的部分浮在游戏图标640、642、644后面。在显示区域300左边缘的化身630的定位可向用户302指示若该用户302在化身630的方向上导航，则与该化身630相关联的信息（例如，列表652、654）是可用的。化身630可以按变化的速度移动。例如，化身630在图6B与图6C之间的转移中比在图6C与图6D之间的转移中移动得快。 

或者，化身630可按不同的方式来移动，或展示其他功能。例如，化身630可被锁定到内容层614或某个其他层中的特定位置（例如，锁点），使得化身630以与其被锁定到的层相同的水平速率来移动。作为另一个替换方案，化身630可与可被向上或向下滚动的列表（诸如，列表650）相关联，并在相关联的列表被向上或向下滚动时向上或向下移动。 

示例9——背景层

图8A-8C是示出由具有三层310、312、314和背景层850的多层UI系统所呈现的GUI的图示。在该示例中，（手部图标所表示的）用户302通过与具有显示区域300的触摸屏交互来与内容层314进行交互。 

背景层850浮在其他层后面。要在背景层850中视觉地呈现的数据可包括例如延伸到显示区域300的边界以外的图像。内容层314包括内容元素（例如，内容图像300A-H）。层310、312包括文本信息（分别是“Category”和“Selected Subcategory”）。内容层314的长度被指示约为层312的长度的两倍，而层312的长度进而被指示约为层310的长度的两倍。背景层850的长度被指示为比层312的长度稍短。 

在图8A-8C中，可由用户302引起的层310、312、314、850中的运动的方向由指向左的箭头和指向右的箭头来指示。这些箭头响应于用户移动，指示层310、312、314、850的可能的移动（左或右的水平的移动）。在该示例中，系统将用户向左或右的移动、甚至在水平面以上或以下延伸的对角线移动解释为指示一层的有效的向左或向右运动。虽然图8A-8C示出了用户302与对应于内容层314的显示区域300的一部分进行交互，但系统还允许与触摸屏的其他部分（例如，与其他层所占据的显示区域300的部分相对应的部分）交互以引起层310、312、314、850中的移动。 

当用户输入指示向右或向左运动时，系统生成相对于显示区域300的层310、312、314、850的向右或向左的移动。层310、312、314、850的移动量是各层中的数据以及用户进行的运动的大小或移动速率（或速度）的函数。 

在图8A-8C中，为层310、312、314、850指示示例左边缘锁点“A”、“B”和“C”。左边缘锁点指示在每层上显示区域300的左边缘的对应位置。例如，当用户导航至内容层314上的一位置使得显示区域300的左边缘位于锁点“Ａ”处时，该显示区域300的左边缘也将在其他层310、312、850的锁点“Ａ”处对齐，如图8Ａ所示。在图8B中，显示区域300的左边缘位于层310、312、314、850的每一个中的锁点“B”处。在图8C中，显示区域300的左边缘位于层310、312、314、850的每一个中的锁点“C”处。 

图8A-8C中所示的锁点通常不表示锁点的完整集合，并且仅为简明起见 被限制为锁点“A”、“B”和“C”。例如，可为内容图像330A-330H的每一个设置左边缘锁点。或者，可以使用更少的锁点，或者可以省略锁点。作为替换方案，锁点可指示其他种类的对齐。例如，右边缘锁点可指示与显示区域300的右边缘的对齐，或者中心锁点可指示与显示区域300的中心的对齐。 

在该示例中，除在包装动画期间以外，层310、312、314、850根据以下规则来移动： 

1.内容层314将以约两倍于层312的速率移动，层312是层314的长度的大约一半。 

2.层312将以约两倍于层310的速率移动，层310是层312的长度的大约一半。 

3.内容层314将以约四倍于层310的速率移动，层310是层314的长度的约1/4。 

4.背景层850将比层310移动得更慢。虽然背景层850比层310长，但要在层310中相邻锁点（例如，锁点“A”和“B”）之间移动的距离比背景层850中对应锁点之间的距离大。 

在某些情况下，层310、312、314、850的移动可与上面描述的规则不同。在该示例中，许可包装。用户可从内容层314的起始处（图8A中示出的位置）向左导航，并可从内容层314的结束处（图8C中示出的位置）向右导航。在包装动画期间，一些层可比在其他种类的移动期间移动得更快或更慢。在该示例中，当用户输入引起回到内容层314的起始的包装时，背景层850中的图像和层310、312中的文本移动得更快。在图8C中，显示区域300分别示出层310和312中相应文本串的结束处的一个和两个字母的部分。显示区域300还示出背景层850中的图像的最右侧部分。返回图8A中所示状态的包装动画可包括将背景层850中图像的最左侧部分、和层310、312中文本的起始从右侧带入视图。这引起层310、312和850中比在其他上下文中更快的移动，诸如从图8A所示的状态转移到图8B所示的状态。 

示例10——多层UI系统

图9是示出在设备（例如，智能电话或其他移动计算设备）上呈现多个UI层的示例多层UI系统900的系统图示。系统900可用于实现在其他示例中 描述的功能、或其他功能。 

在该示例中，系统900包括中枢（hub）模块910，该中枢模块910向层控件920提供中枢页的声明性描述，该层控件920控制对平行UI层的显示。层控件920也可被称为“全景（panorama）”或“全（pano）”控件。当UI层以全景或水平方式移动时，可使用这样的描述。或者，层控件920控制垂直地或以某种其他方式移动的UI层。层控件920包括标记生成器930和运动模块940。 

在该示例中，层控件920控制UI元素的若干层：例如，背景层、标题层、段首层和内容层。内容层包括内容窗格集合。内容窗格可包括例如图像、图形图标、列表、文本或要被视觉地呈现的其他信息。内容层中的内容窗格集合可被称为一代内容窗格。或者，层控件920控制比三层更多或更少的层、或不同种类的层。中枢页的声明性描述包括定义UI元素的信息。在多层UI系统中，UI元素可包括多个层，诸如背景层、标题层、段首层和内容层。向标记生成器930提供中枢页的声明性描述、以及其他信息，诸如样式信息和/或配置属性。标记生成器930生成可用于呈现UI层的标记。运动模块940接受响应于用户输入而生成的事件（例如，直接的UI操纵事件），并生成运动命令。向UI框架950提供运动命令以及标记。在UI框架950中，在布局模块952中接收该标记和运动命令，该布局模块952生成要被发送到设备操作系统（OS）960的UI呈现请求。设备OS 960接收呈现请求，并使所呈现的UI被输出到设备上的显示器。还可将诸如中枢模块910、层控件920和UI框架950的系统组件实现为设备OS 960的一部分。在一个实现中，设备OS 960是移动计算设备OS。 

用户（未示出）可生成影响呈现UI的方式的用户输入。在图9所示的示例中，层控件940监听UI框架950所生成的直接UI操纵事件。在UI框架950中，直接UI操纵事件由交互模块954生成，该交互模块从设备OS 960接收手势消息（例如，响应于与设备上的触摸屏交互的用户的平移或轻拂手势而生成的消息）。设备OS 960包括用于识别用户手势并创建可由UI框架950使用的消息的功能。UI框架950将手势消息转换成要发送到层控件920的直接UI操纵事件。交互模块954还可接受并生成直接UI操纵事件，以得到响应于其他 种类的用户输入（诸如，语音命令、小键盘或键盘上的方向按钮、跟踪球运动等）而生成的导航消息。 

示例11——详细的实现

该示例描述了包括上面描述的示例的各方面以及其他方面的详细的实现。该详细的实现可由多层UI系统（诸如，上面描述的系统900）或某个其他系统来实现。 

在该示例中，系统900呈现水平地移动的多个平行的UI层（例如，背景层、标题层、段首层和内容层）。内容层包括若干内容窗格。每个内容窗格包括右锁点和左锁点。 

A.初始化 

为了初始化平行的UI层，系统900获得关于背景层、标题层、段首层和内容层的有效长度的信息。（对于水平地移动的UI层，有效长度可被认为是UI层的有效宽度。）系统900可通过在内容窗格接近显示区域时动态地创建内容窗格时来减少存储器和处理需求，但是这会使确定内容层的有效宽度更为困难。在该示例中，为了在初始化时确定内容层的有效宽度，系统900基于每个内容窗格的最大宽度来确定最大的内容层宽度，并且计算不重叠的全部内容窗格的最大宽度的总和。 

可通过例如将内容层划分成显示区域宽度的增量来产生不重叠的内容窗格，自动地设置内容层中（内容窗格）的锁点。或者，可通过确定有多少个完整的内容图像n适于一个内容窗格，并且每ｎ个内容图像开始一个新的内容窗格直到每个内容图像位于至少一个内容窗格中（这潜在地生成重叠的内容窗格），来在内容层中设置锁点。 

基于运动比率来计算层中的运动。例如，系统900通过将背景层的宽度和标题层的宽度分别除以内容层的最大宽度来计算背景层和标题层的运动比率。考虑到背景层和标题层的宽度，系统900基于内容层中对应锁点的位置分别映射背景层和标题层中的锁点的位置。在图1中示出背景层中的这种位置映射的示例。 

在移动对应层时使用锁点。例如，当系统900动画化到内容层中的窗格的转移时，该系统为背景层和标题层查找合适的锁点位置，并向各层发出滚动到 那些位置的命令，依赖于相应层中锁点之间的距离来设置相对的运动速率。 

基于内容层的最大长度的运动比率在与实际呈现的内容层进行比较时将仅是近似的。由于比率是近似的（内容窗格的最终宽度仍是未知的），因此系统900可执行锁定动画以调整诸如背景层或标题层的层，使得它们与所呈现的最终内容层中的对应锁点对齐。 

一旦初始化已完成，系统900可呈现UI层并开始接受用户输入。 

B.用户输入 

在该示例中，系统900从与移动计算设备上的触摸屏交互的用户接受用户输入。系统900可在触摸屏上的不同手势（诸如拖动手势、平移手势和轻拂手势）间进行区分。系统900还可检测轻击手势，诸如用户在特定位置触摸触摸屏但在中断与触摸屏的接触之前不移动手指、指示笔等的情况。作为替换，在中断轻击手势中与触摸屏的接触之前许可较小的阈值内的某种移动。系统900还可检测多触摸手势，诸如屈伸手势。 

系统900依赖于与触摸屏的交互的本质，将该交互解释为特定的手势。系统900从用户的交互获得一个或多个离散的输入。可从一系列输入中确定手势。例如，当用户触摸触摸屏并在维持与该触摸屏接触的同时开始在水平方向上的移动时，系统900引发平移输入并在层中开始水平移动。当用户维持与触摸屏接触并继续移动时，系统900可继续引发平移输入。例如，每一次用户在维持与触摸屏接触的同时移动Ｎ个像素，系统900可引发新的平移输入。以此方式，系统900可将触摸屏上的连续物理手势解释为一系列平移输入。系统可持续地更新移动的接触位置和速率。 

当物理手势结束（例如，当用户中断与触摸屏的接触）时，系统900可通过确定在用户的手指、指示笔等在其中断与触摸屏的接触时移动得多快、以及移动的速率是否超过阈值来最终确定是否将结束处的运动解释为轻拂。 

C.响应于用户手势 

系统900可依赖于手势的类型在显示器上有差别地呈现运动（例如，层、列表、或其他UI元素中的运动）。例如，在（用户当前正在维持与触摸屏的接触的）水平拖动手势的情况中，系统900在水平方向上将内容层移动与拖动的水平距离相同的距离。标题层和背景层也响应于拖动而移动。通过将相应层 的运动比率乘以拖动的水平移动来确定移动量。例如，如果已经确定了标题层的运动比率为0.5，并且拖动的水平距离为100个像素，则标题层中的移动在拖动方向上是50个像素。 

在（在该用户中断了与触摸屏的接触时用户移动得更慢或停止的）平移手势的情况中，将内容层移动平移的量，并相对于设备的显示区域来检查内容窗格的当前位置，以确定是否要在内容层中执行额外的移动。例如，系统可执行锁定动画（即，内容层中咬合到锁点的移动的动画），并将内容层移至与当前内容窗格相关联的左或右锁点。系统900可确定与当前窗格相关联的哪个锁点更接近，并转移到更接近的锁点。作为另一个示例，系统900可移动内容层以便将部分地位于显示区域上的视图中的内容窗格全部带入视图。其他手势也可使内容窗格被全部带入视图。例如，如果可垂直滚动的列表的左侧或右侧位于显示区域以外，则列表上的手势（例如，垂直的或基本垂直的手势）可引起内容层中的水平移动（以及在适当时其他层中的水平移动），使得整个列表变为可见。层的水平移动可作为由垂直手势引起的列表中的任何垂直移动的补充，但是内容层和任何其他层的垂直位置不受影响。或者，系统900可维持内容层的当前位置。 

在一个实现中，系统900执行以下步骤： 

1.在内容层中，检查当前、前一个和下一个内容窗格有多少区域是可见的，并且检查边缘的位置。 

2.如果前一个窗格的右边缘已被进一步移入显示区域（相对于左屏幕边缘）超过阈值数量的像素，则转移到前一个窗格。在一个实现中，该阈值被称为“凸起阈值位移”。 

3.如果下一个窗格的左边缘已被进一步移入显示区域（相对于右屏幕边缘）超过阈值数量的像素，则转移到下一个窗格。 

4.否则，确定内容层是否可被移动以与具有锁点或“凸起”的当前窗格的左或右边缘对齐。如果当前窗格的左边缘与左锁定位置足够接近，则将当前窗格锁定到左边缘。否则，如果当前窗格的右边缘与右锁定位置足够接近，并且当前窗格比屏幕宽，则将其锁定到右边缘。 

在轻拂手势的情况（其中在用户中断与触摸屏的接触时用户正在更快地移 动的情况）中，系统900初始化转移动画，该转移动画可依赖于轻拂手势的方向和速度，使内容层前进至下一个内容窗格或前一个内容窗格。如果轻拂的速度足够大，则系统900可转移到该方向上的下一个内容窗格。如果速度不够强，或如果当前的内容窗格较宽，则系统900可在轻拂的方向上移动内容层，而不必实际转移到下一个内容窗格。要检测的轻拂的阈值速度（即，将轻拂姿势与平移姿势区分开来）可取决于实现而变化。引起转移到另一个内容窗格的轻拂的阈值速度也可依赖于实现而改变。 

D.非线性运动 

在某些情况中，UI层展示非线性移动速率。例如，全部层可依赖于上下文以不同的速率移动，或者层的一部分依赖于上下文以与同一层其他部分不同的速率移动。可展示非线性移动速率的一个层是段首层。段首层可被划分为若干段首部，并且每个首部可与内容层中的一个或多个内容窗格相关联。 

在该示例中，系统900提供段首层，并且每个段首部与内容窗格相关联。该示例中的段首层根据以下规则来移动： 

1.如果内容窗格不比显示区域宽，则首部保持被锁定到该内容窗格。否则，在内容窗格比显示区域宽时应用规则2-4。 

2.当层被锁定到内容窗格的左侧锁点时，每个首部的左边缘与该窗格的左边缘对齐。 

3.当用户向左平移内容窗格时，首部比该内容窗格移动得慢。这可用于例如允许用户在平移时仍能看到首部的某些部分。 

4.当用户向右平移时，首部比内容窗格移动得快。这可用于例如在当存在从当前窗格到前一个窗格的转移时，首部比内容窗格移动得稍快但二者在左锁点对齐的情况下允许转移效果。 

在根据这些规则来执行移动时，系统900计算位移值。首先，通过取得内容窗格宽度与首部宽度之间的差来计算最大位移。在计算最大位移时，系统900也可包括按钮或首部中其他功能项的额外边距，而不仅是首部中文本的宽度。 

系统900随后通过确定当前窗格的左边缘相对于左锁点的位置来计算实际位移。如果窗格的左边缘位于左锁点的右侧，则系统900从该窗格左边缘的水平位置（ｘ坐标）减去左锁点的水平位置（ｘ坐标），将得到正值a。如果 窗格的左边缘位于左锁点的左侧，则系统900从左锁点的水平位置（ｘ坐标）减去窗格左边缘的水平位置（ｘ坐标），将得到正值b。可诸如通过将该值（a或b）乘以一常数，对该值进行调整。任意调整之后，如果该值（a或b）大于最大位移，则在最大位移处对该值设限。 

位移计算也可用于平移和转移动画。在后一情形中，在转移开始之前，计算窗格的最终位置，并基于此来计算要在转移动画中使用的首部的最终位置。 

E.边缘轻击 

系统900还可实现边缘轻击功能。在边缘轻击中，用户可在显示区域的边缘（例如，左或右边缘）的给定边距（例如，40个像素）内轻击，以引起转移（例如，到下一个内容窗格或前一个内容窗格）。这可在例如下一个窗格或前一个窗格在显示区域中部分可视时是有用的。用户可在下一个或前一个窗格附近轻击以使系统将该窗格完整地带入显示区域。 

II.扩展和替换实现

对此处所描述的实施例的各种扩展和替换是可能的。 

在所描述的示例中，内容层通常被描述为比其他层（诸如，背景层）长。诸如系统900的多层UI系统还可处理其中诸如标题层或背景层的层实际上比内容层宽的场景。在该场景中，层中运动的速度可被自动地调整以便补偿。例如，在内容层比标题层短时，内容层可比标题层移动得慢。 

在所描述的示例中，一些层被描述为被锁定到其他层。例如，在图6A-6E中，层312的各部分被指示为被锁定到内容层614的各部分。在其他所描述的示例中，一些层被描述为更灵活地移动。例如，在图5A-5D中，段首层512的各段被指示为与内容层514的特定部分相关联，但各段能够彼此独立地移动并浮在内容层514各部分之上。多层UI系统可组合这些功能。例如，多层UI系统可在允许一层（例如，段首层或标题层）的某些部分独立地移动的同时，将该层的其他部分锁定到内容层中的内容。 

多层系统也可将各层锁定到一起以改善转移或包装效果。例如，背景层可被锁定到标题层，使得该背景层与标题层在包装期间以相同的速度移动。即使在各层的有效长度不同时，也能完成这种锁定。 

所描述的示例示出用户可能感兴趣的层（诸如，内容层）的不同位置。用 户可在层的起始处开始多层UI系统中的导航，或者可使用不同的入口点来开始UI层导航。例如，用户可在内容层的中间、在内容层的结束处等开始导航。这可在例如用户之前已在除一层的开始处以外的位置（例如，一层的结束）退出时是有用的，使得用户可返回到之前的位置（例如，在用户使用通过启动内容图像所调用的应用之后）。作为另一个示例，默认的锁点可以基于UI层的之前的状态。例如，用户可在与之前被查看过的层的部分相对应的锁点处返回到一层。作为另一个示例，多层UI系统可保存状态，或在一个以上的层中作出调整以允许不同的入口点。例如，如果用户如在图5C中所示的内容层和特征层可见之处进入，则多层UI系统可调整层510，使得层510中“Application”文本的起始与层512中“Feature 2”文本的起始对齐。 

III.示例计算环境

图10示出了可在其中实现所描述的若干实施例的合适计算环境1000的一个通用示例。计算环境1000并非旨在对使用范围或功能提出任何限制，因为此处描述的技术和工具可以在完全不同的通用或专用计算环境中实现。 

参考图10，计算环境1000包括至少一个CPU 1010和相关联的存储器1020。在图10中，这一最基本配置1030包括在虚线内。处理单元1010执行计算机可执行指令，且可以是真实或虚拟处理器。在多处理系统中，多个处理单元执行计算机可执行指令以提高处理能力。图10示出可用于视频加速或其他处理的第二处理单元1015（例如，GPU或其他协处理单元）和相关联的存储器1025。存储器1020、1025可以是易失性存储器（例如，寄存器、高速缓存、RAM）、非易失性存储器（例如，ROM、EEPROM、闪存等）或两者的某一组合。存储器1020、1025存储用一个或多个所描述的技术和工具来实现系统的软件1080。 

计算环境可以具有附加特征。例如，计算环境1000包括存储1040、一个或多个输入设备1050、一个或多个输出设备1060以及一个或多个通信连接1070。诸如总线、控制器或网络等互连机制（未示出）将计算环境1000的各组件互连。通常，操作系统软件（未示出）为在计算环境1000中执行的其他软件提供了操作环境，并协调计算环境1000的组件的活动。 

存储1040可以是可移动或不可移动的，且包括磁盘、磁带或磁带盒、 CD-ROM、DVD、存储卡或可用于储存信息并可在计算环境1000内访问的任何其它介质。存储1040存储实现所描述的技术和工具的软件1080的指令。 

输入设备1050可以是诸如键盘、鼠标、笔、跟踪球或触摸屏等触摸输入设备、诸如话筒的音频输入设备、扫描设备、数码相机、或向计算环境1000提供输入的另一设备。对于视频，输入设备1050可以是显卡、TV调谐卡、或接受模拟或数字形式的视频输入的类似的设备、或将视频样值读入计算环境1000的CD-ROM或CD-RW。输出设备1060可以是显示器、打印机、扬声器、CD刻录机、或从计算环境1000提供输出的另一设备。 

通信连接1070允许通过通信介质到另一计算实体的通信。通信介质传达诸如已调制数据信号形式的计算机可执行指令、音频或视频输入或输出、或其他数据等信息。已调制数据信号是其一个或多个特征以在信号中编码信息的方式设置或改变的信号。作为示例而非局限，通信介质包括以电、光、RF、红外、声学或其他载波实现的有线或无线技术。 

各种技术和工具可以在计算机可读介质的一般上下文中描述。计算机可读介质可以是可在计算环境内访问的任何可用介质。作为示例而非局限，对于计算环境1000，计算机可读介质包括存储器1020、1025，存储1040，及其组合。 

该技术和工具可在诸如程序模块中所包括的在目标真实或虚拟处理器上的计算环境中执行的计算机可执行指令的一般上下文中描述。一般而言，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、库、对象、类、组件、数据结构等。程序模块的功能可以如各实施例中所需的组合或在程序模块之间分离。用于程序模块的计算机可执行指令可以在本地或分布式计算环境中执行。此处描述的各方法中的任一方法可通过在一个或多个计算机可读介质（例如，计算机可读存储介质或其他有形介质）上编码的计算机可执行指令来实现。 

为了呈现起见，本详细描述使用了如“选择”和“确定”等术语来描述计算环境中的计算机操作。这些术语是由计算机执行的操作的高级抽象，且不应与人类所执行的动作混淆。对应于这些术语的实际的计算机操作取决于实现而不同。 

IV.示例实现环境

图11示出了其中可实现所描述的实施例、技术、和技艺的合适实现环境1100的一般化示例。 

在示例环境1100中，由云1110提供各种类型的服务（例如，计算服务1112）。例如，云1110可包括可位于中央或是分布式的计算设备集，其向经由诸如因特网等网络连接的各种类型的用户和设备提供基于云的服务。云计算环境1300可用于以不同的方式来实现计算任务。例如，参考所述技术和工具，可对本地计算设备执行诸如处理用户输入以及呈现用户界面之类的某些任务，同时可在云中的别处执行诸如存储要在后续处理中使用的数据之类的其他任务。 

在示例环境1100中，云1110向具有各种屏幕能力的连接的设备1120A-N提供服务。连接的设备1120A表示具有中型屏幕的设备。例如，连接的设备1120A可以是个人计算机，诸如台式计算机、膝上型计算机、笔记本、上网本等。连接的设备1120B表示具有小型屏幕的设备。例如，连接的设备1120B可以是移动电话、智能电话、个人数字助理、平板计算机等。连接的设备1120N表示具有大屏幕的设备。例如，连接的设备1120N可以是电视机（例如，智能电视机）或连接到电视机或投影仪屏幕的另一设备（例如，机顶盒或游戏控制台）等。 

云1110可通过一个或多个服务提供者（未示出）来提供各种服务。例如，云1110可将与移动计算有关的服务提供给各个连接的设备1120A-N中的一个或多个。可针对特定的连接的设备（例如，连接的设备1120A-N）的屏幕大小、显示能力或其他功能来定制云服务。例如，可通过将屏幕大小、输入设备以及通常与移动设备相关联的通信带宽限制纳入考虑来为移动设备定制云服务。 

V.示例移动设备

图12是描绘示例性移动设备1200的系统图，该移动设备包括各种可选的硬件和软件组件，总地示于1202处。该移动设备中的任何组件1202可与任何其他组件通信，但出于容易例示的目的而未示出所有连接。该移动设备可以是各种计算设备（例如，蜂窝电话、智能电话、手持式计算机、个人数字助理（PDA）等）中的任一个，并且可允许与诸如蜂窝或卫星网络等一个或多个移动通信网络1204进行无线双向通信。 

所示移动设备可包括用于执行如信号编码、数据处理、输入/输出处理、电力控制和/或其他功能等任务的控制器或处理器1210（例如，信号处理器、微处理器、ASIC、或其他控制和处理逻辑电路）。操作系统1212可控制对组件1202的分配和使用，并支持一个或多个应用程序1214。应用程序可包括公共移动计算应用（例如，包括电子邮件应用、日历、联系人管理器、web浏览器、消息收发应用）、或任何其他计算应用。 

所示移动设备可包括存储器1220。存储器1220可包括不可移动存储器1222和/或可移动存储器1224。不可移动存储器1222可包括RAM、ROM、闪存、盘驱动器、或其他众所周知的存储器存储技术。可移动存储器1224可包括闪存或订户身份模块（SIM）卡，SIM卡是GSM通信系统中众所周知的，或者其他众所周知的存储器存储技术，诸如智能卡。存储器1220可用于存储数据和/或用于运行操作系统1212和应用1214的代码。示例数据可包括经由一个或多个有线或无线网络发送给和/或接收自一个或多个网络服务器或其他移动设备的网页、文本、图像、声音文件、视频数据、或其他数据集。存储器1220可用于存储诸如国际移动订户身份（IMSI）等订户标识符，以及诸如国际移动设备标识符（IMEI）等设备标识符。这些标识符可被传送给网络服务器以标识用户和装备。 

移动设备可支持诸如触摸屏1232、话筒1234、相机1236、物理键盘1238、和/或跟踪球1240的一个或多个输入设备1230，以及诸如扬声器1252和显示器1254的一个或多个输出设备1250。其他可能的输出设备（未示出）可包括压电或其他触觉输出设备。一些设备可服务超过一个输入/输出功能。例如，触摸屏1232和显示器1254可被组合在单个输入/输出设备中。 

触摸屏1232可用不同的方式接受输入。例如，电容式触摸屏在物体（例如，指尖或指示笔）扭曲或中断流过表面的电流时检测到触摸输入。作为另一示例，触摸屏可使用光学传感器，在来自光学传感器的光束被中断时检测到触摸输入。对于要使某些触摸屏检测到的输入来说，与屏幕表面的物理接触并不是必需的。 

无线调制解调器1260可被耦合至天线（未示出），并且可支持处理器1210与外置设备间的双向通信，如本领域中充分理解的那样。调制解调器1260被 一般性地示出，并且可包括用于与移动通信网络1204进行通信的蜂窝调制解调器和/或其它基于无线电的调制解调器（例如蓝牙或Wi-Fi）。无线调制解调器1260通常被配置成与一个或多个蜂窝网络进行通信，蜂窝网络如用于单个蜂窝网络内、蜂窝网络之间、或移动设备与公共交换电话网络（PSTN）之间的数据和语音通信的GSM网络。 

移动设备可进一步包括至少一个输入/输出端口1280、电源1282、卫星导航系统接收机1284（诸如全球定位系统（GPS）接收机）、加速计1286、收发机1288（用于无线发射模拟或数字信号）和/或物理连接器1290，它可以是USB端口、IEEE 1394（防火墙）端口、和/或RS-232端口。所示组件1202不是必需的或穷举的，因为可删除组件并且可添加其他组件。 

来自任何示例的技术可以与在其他示例中的任何一个或多个中描述的技术相组合。鉴于可应用所公开的技术的原理的许多可能的实施例，应当认识到，所示实施例仅是所公开的技术的示例，并且不应该被认为限制所公开的技术的范围。相反，所公开的技术的范围包括所附权利要求所涵盖的内容。因此，要求保护落入这些权利要求的精神和范围内的所有内容作为本发明。 

Claims (15)

1.在计算机系统中，一种呈现视觉信息的方法包括：

显示包括至少第一、第二和第三层的图形用户界面，其中所述第一层中视觉信息的第一部分位于触摸屏的显示区域内，并且所述第一层包括用于在与第一方向正交的第二方向上移动的用户界面元素以及在所述第一部分的边缘的第一层锁点；

接收与所述触摸屏上的第一手势相对应的第一用户输入；

至少部分地基于所述第一用户输入来计算第一移动，所述第一移动包括所述第一层从初始第一层位置到当前第一层位置的移动，在所述初始第一层位置中，所述第一层中视觉信息的第二部分位于所述显示区域以外，在所述当前第一层位置中，所述第一层中视觉信息的第二部分位于所述显示区域内，其中所述第一移动以第一移动速率在第一方向上进行；以及

至少部分地基于所述第一用户输入来计算与所述第一移动平行的第二移动，所述第二移动包括所述第二层中视觉信息从初始第二层位置到当前第二层位置的移动，其中所述第二移动以第二移动速率在所述第一方向上进行，且其中所述第二层包括第二层锁点；

至少部分地基于所述第一用户输入来计算与所述第一和第二移动平行的第三移动，所述第三移动包括所述第三层中视觉信息从初始第三层位置到当前第三层位置的移动，其中所述第三移动以第三移动速率在所述第一方向上进行，且其中所述第三层包括第三层锁点；

至少部分基于所述锁点和当前第一层位置执行锁定动画，其中锁定动画包括将所述第一、第二、第三层从各自当前位置移动到锁定动画后位置，各层在所述锁定动画后位置处停止移动且各部分的边缘与显示区域的对应边缘对齐；

接收与所述触摸屏上的第二手势相对应的第二用户输入；以及

至少部分地基于所述第二用户输入来计算正交的移动，所述正交的移动包括所述用户界面元素中视觉信息从初始元素位置到当前元素位置的移动；

其中所述第三移动速率、第二移动速率与所述第一移动速率相互之间不同。

2.如权利要求1所述的方法，其特征在于，所述第一手势具有手势移动速率，其中所述第一移动速率基于所述手势移动速率。

3.如权利要求2所述的方法，其特征在于，所述第一移动速率等于所述手势移动速率。

4.如权利要求1所述的方法，其特征在于，所述第一手势所指示的方向与所述第一方向不相同，其中所述第一手势所指示的方向是对角线方向，而所述第一方向是水平方向。

5.如权利要求1所述的方法，其特征在于，所述第一方向是水平方向，并且所述第二方向是垂直方向。

6.如权利要求5所述的方法，其特征在于，所述用户界面元素是可垂直滚动的元素。

7.如权利要求6所述的方法，其特征在于，所述第二手势的方向与所述垂直方向不同，并且所述第二手势指示的方向是对角线方向。

8.如权利要求6所述的方法，其特征在于，还包括：

在可垂直滚动的元素中执行垂直的锁定动画，其中所述垂直的锁定动画包括移动所述可垂直滚动的元素，使得所述可垂直滚动的元素中的锁点与所述显示区域的一部分垂直地对齐。

9.如权利要求8所述的方法，其特征在于，所述可垂直滚动的元素是项的列表，并且所述锁点与所述列表中的项相关联。

10.如权利要求9所述的方法，其特征在于，所述项的列表是链接列表，并且所述锁点与所述列表中的链接相关联。

11.如权利要求1所述的方法，其特征在于，计算所述正交的移动包括：

至少部分地基于所述初始元素位置和所述第二手势的速度来计算所述当前元素位置。

12.如权利要求1所述的方法，其特征在于，还包括呈现所述第一移动、所述第二移动和所述正交的移动，以供在包括所述触摸屏的移动电话上显示。

13.一种呈现视觉信息的方法，包括：

显示包括内容层、段首层和标题层的图形用户界面，其中每层包括相应层中视觉信息的至少第一和第二部分，所述相应层中视觉信息的所述第一部分位于显示区域中，所述相应层中视觉信息的所述第二部分位于所述显示区域以外，并且所述内容层包括至少一个可滚动的元素，所述可滚动的元素具有位于所述显示区域中的视觉信息的第一部分以及位于所述显示区域以外的视觉信息的第二部分；

通过触摸屏接收第一用户输入；

至少部分地基于所述第一用户输入来计算内容层移动，所述内容层移动包括所述内容层从(a)初始内容层位置到(b)当前内容层位置的移动，在所述初始内容层位置中，所述内容层中视觉信息的所述第二部分位于所述显示区域以外，在所述当前内容层位置中，所述内容层中视觉信息的所述第二部分位于所述显示区域内，其中所述内容层还包括在所述可滚动元素的边缘的内容层锁点；

动画化从(a)到(b)的所述移动，其中所述内容层移动以内容层移动速率在第一方向上进行；

至少部分地基于所述第一用户输入来计算段首层移动，所述段首层移动包括所述段首层从(c)初始段首层位置到(d)当前段首层位置的移动，在所述初始段首层位置中，所述段首层中视觉信息的所述第二部分位于所述显示区域以外，在所述当前段首层位置中，所述段首层中视觉信息的所述第二部分位于所述显示区域内，其中所述段首层包括段首和在所述段首的边缘的段首层锁点；

动画化从(c)到(d)的所述移动，其中所述段首层移动以段首层移动速率在所述第一方向上进行；

至少部分地基于所述第一用户输入来计算标题层移动，所述标题层移动包括所述标题层从(e)初始标题层位置到(f)当前标题层位置的移动，在所述初始标题层位置中，所述标题层中视觉信息的所述第二部分位于所述显示区域以外，在所述当前标题层位置中，所述标题层中视觉信息的所述第二部分位于所述显示区域内，其中所述标题层包括标题和在所述标题的边缘的标题层锁点；

动画化从(e)到(f)的所述移动，其中所述标题层移动以标题层移动速率在所述第一方向上进行；

至少部分基于锁点和当前内容层位置执行锁定动画，其中锁定动画包括将所述内容层、段首层和标题层从各自当前位置移动到锁定动画后位置，各层在所述锁定动画后位置处停止移动且可滚动元素的边缘、段首的边缘和标题的边缘与显示区域的对应边缘对齐；

通过所述触摸屏接收第二用户输入；

至少部分地基于所述第二用户输入来计算可滚动元素的移动，所述可滚动元素的移动包括可滚动元素中视觉信息从(g)初始可滚动元素位置到(h)当前可滚动元素位置的移动，在初始可滚动元素位置中，所述可滚动元素中视觉信息的第二部分位于所述显示区域以外，在所述当前可滚动元素位置中，所述可滚动元素中视觉信息的第二部分位于所述显示区域内；以及

动画化从(g)到(h)的所述移动，其中所述可滚动元素的移动位于与所述第一方向正交的第二方向上；

其中所述标题层移动速率与所述内容层移动速率、所述段首层移动速率不相同，并且所述内容层、所述段首层和所述标题层彼此平行且相对于彼此不重叠。

14.如权利要求13所述的方法，其特征在于，所述第一用户输入与所述触摸屏上的第一手势相对应，并且所述第二用户输入与所述触摸屏上的第二手势相对应。

15.一种呈现视觉信息的方法，包括：

在触摸屏上显示图形用户界面，所述图形用户界面用于通过所述触摸屏上的手势来接收用户输入，所述图形用户界面包括内容层、段首层、标题层和背景层，其中每层包括相应层中视觉信息的至少第一和第二部分，所述相应层中视觉信息的所述第一部分位于所述触摸屏的显示区域中，所述相应层中视觉信息的所述第二部分位于所述显示区域以外，并且所述内容层包括至少一个可滚动的元素，所述可滚动的元素具有位于所述显示区域中的视觉信息的第一部分以及位于所述显示区域以外的视觉信息的第二部分；

接收与所述触摸屏上的手势相对应的第一用户输入；

至少部分地基于所述第一用户输入来计算内容层移动，所述内容层移动包括所述内容层从(a)初始内容层位置到(b)当前内容层位置的移动，在所述初始内容层位置中，所述内容层中视觉信息的所述第二部分位于所述显示区域以外，在所述当前内容层位置中，所述内容层中视觉信息的所述第二部分位于所述显示区域内，其中所述内容层还包括在所述可滚动元素的边缘的内容层锁点；

动画化从(a)到(b)的所述移动，其中所述内容层移动以内容层移动速率在第一方向上进行；

至少部分地基于所述第一用户输入来计算段首层移动，所述段首层移动包括所述段首层从(c)初始段首层位置到(d)当前段首层位置的移动，在所述初始段首层位置中，所述段首层中视觉信息的所述第二部分位于所述显示区域以外，在所述当前段首层位置中，所述段首层中视觉信息的所述第二部分位于所述显示区域内，其中所述段首层还包括段首和在所述段首的边缘的段首层锁点；

动画化从(c)到(d)的所述移动，其中所述段首层移动以段首层移动速率在所述第一方向上进行；

至少部分地基于所述第一用户输入来计算标题层移动，所述标题层移动包括所述标题层从(e)初始标题层位置到(f)当前标题层位置的移动，在所述初始标题层位置中，所述标题层中视觉信息的所述第二部分位于所述显示区域以外，在所述当前标题层位置中，所述标题层中视觉信息的所述第二部分位于所述显示区域内，其中所述标题层还包括标题和在所述标题的边缘的标题层锁点；

动画化从(e)到(f)的所述移动，其中所述标题层移动以标题层移动速率在所述第一方向上进行；

至少部分地基于所述第一用户输入来计算背景层移动，所述背景层移动包括所述背景层从(g)初始背景层位置到(h)当前背景层位置的移动，在所述初始背景层位置中，所述背景层中视觉信息的第二部分位于所述显示区域以外，在所述当前背景层位置中，所述背景层中视觉信息的所述第二部分位于所述显示区域内；

动画化从(g)到(h)的所述移动，其中所述背景层移动以背景层移动速率在所述第一方向上进行；

至少部分基于锁点和当前内容层位置执行锁定动画，其中锁定动画包括将所述内容层、段首层和标题层从各自当前位置移动到锁定动画后位置，各层在所述锁定动画后位置处停止移动且可滚动元素的边缘、段首的边缘和标题的边缘与显示区域的对应边缘对齐；

接收与所述触摸屏上的第二手势相对应的第二用户输入；

至少部分地基于所述第二用户输入来计算可滚动元素的移动，所述可滚动元素的移动包括所述可滚动元素中视觉信息从(i)初始可滚动元素位置到(j)当前可滚动元素位置的移动，在初始可滚动元素位置中，所述可滚动元素中视觉信息的第二部分位于所述显示区域以外，在所述当前可滚动元素位置中，所述可滚动元素中视觉信息的第二部分位于所述显示区域内；以及

动画化从(i)到(j)的所述移动，其中所述可滚动元素的移动位于与所述第一方向正交的第二方向上；

其中所述内容层移动速率等于所述段首层移动速率，所述标题层移动速率与所述内容层移动速率、所述段首层移动速率不同，所述内容层、所述段首层和所述标题层彼此平行且相对于彼此不重叠，并且所述内容层、所述段首层和所述标题层每一个与所述背景层重叠。