CN110018763B - 页面展示的方法和装置 - Google Patents

Abstract

本说明书实施例提供页面展示的方法和装置，在页面上具有未查看的更新信息的情况下，将这些未查看的更新信息的各个信息主体对应的目标图像按照在页面上的排列顺序生成展示列表，通过第一展示区域沿第一方向滑动地展示页面，通过第二展示区域沿第二方向展示展示列表上的目标图像。并且，第二展示区域上展示的目标图像与第一展示区域当前展示的目标图像按照目标图像在页面上的排列顺序进行衔接。如此，在页面展示过程中向用户提供更丰富的展示信息，从而提高页面展示的有效性。在进一步地互动中，这种页面展示的方式还可以通过第一展示区域和第二展示区域的目标图像的联动，提供更好的用户体验。

Description

页面展示的方法和装置

技术领域

本说明书一个或多个实施例涉及计算机技术领域，尤其涉及针对一个应用，通过计算机进行页面展示的方法和装置。

背景技术

在终端设备的页面展示过程中，由于设备展示窗口大小等的限制，往往通过半隐藏信息方式展示。这种信息展示方式通常按顺序展示待展示的信息内容，每个展示主体的具体信息可以收起或仅展示摘要以进行篇幅隐藏。对于当前窗口不能展示的内容，通过用户的滑动操作拉动页面进行展示。常规技术中，对于当前窗口不能展示的页面部分，还可以通过锚点来定位和跳转。然而，这些锚点展示形式和/或内容往往比较单一。

因此，需要更多样化的页面展示方式，给用户提供更好的体验过程，使得在当前展示窗口展示更加丰富的信息。

发明内容

本说明书一个或多个实施例描述的页面展示的方法和装置，可以用于解决背景技术部分提到的一个或多个问题。

根据第一方面，提供了一种页面展示的方法，用于展示所述页面的窗口包括第一展示区域和第二展示区域，其中，所述第一展示区域用于沿第一方向滑动地展示所述页面，所述方法包括：检测所述页面中的至少一个目标图像，所述至少一个目标图像分别对应于具有未查看的更新信息的各个信息主体；基于所述至少一个目标图像在所述页面的排列顺序，生成展示列表，所述展示列表包括顺序排列的至少一个目标图像；基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表中的目标图像按照第一位置进行展示，使得所述第二展示区域上展示的目标图像与所述第一展示区域当前展示的目标图像按照所述至少一个目标图像在所述页面上的排列顺序进行衔接。

在一个实施例中，所述第二方向垂直于所述第一方向，所述第二展示区域位于所述第一展示区域沿所述第一方向的末端；所述基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表中的目标图像按照第一位置进行展示包括：将所述展示列表上排在所述第一展示区域当前展示的最后一个目标图像之后、并与所述最后一个目标图像相邻的第一目标图像，展示到所述第二展示区域排在最前的展示位置。

在一个实施例中，所述第二方向垂直于所述第一方向，所述第二展示区域位于所述第一展示区域沿所述第一方向的前端；所述基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表中的目标图像按照第一位置进行展示包括：将所述展示列表上排在所述第一展示区域当前展示的第一个目标图像之前、并与所述第一个目标图像相邻的第二目标图像，展示到第二展示区域排在最后的展示位置。

在一个实施例中，所述方法还包括：检测所述第一展示区域上沿所述第一方向的滑动事件，所述滑动事件是所述页面在所述第一展示区域滑动的事件；在检测到所述滑动事件的情况下，扫描所述第一展示区域中可见的目标图像；响应于所述第一展示区域可见的目标图像发生改变，令所述展示列表在所述第二展示区域进行相应滑动，以保持所述第二展示区域上的目标图像与所述第一展示区域当前展示的目标图像按照所述至少一个目标图像在所述页面上的排列顺序进行衔接。

在一个实施例中，在所述页面在所述第一展示区域沿背离所述第二展示区域的方向滑动的情况下，所述方法还包括：检测所述页面中的下一个到达第一展示区域的第三目标图像的位置；在所述页面中的第三目标图像与所述第二展示区域中的第三目标图像在第一方向上的位置一致时，在所述第二展示区域生成与所述第三目标图像一致的第三悬浮视图，并在所述第二展示区域隐藏所述第三目标图像，所述第三悬浮视图用于覆盖在所述页面中的第三目标图像的上方；随着所述页面的滑动，移动所述第三悬浮视图，使得所述第三悬浮视图始终覆盖在所述页面中的第三目标图像上方；当所述第三目标图像完全滑动到所述第一展示区域时，隐藏所述第三悬浮视图，同时在所述第二展示区域沿所述第二方向将所述展示列表滑动一个目标图像的位置，使得所述展示列表上的第三目标图像滑出所述第二展示区域。

在一个实施例中，在所述页面在所述第一展示区域沿指向所述第二展示区域的方向滑动的情况下，所述方法还包括：检测所述页面中的下一个离开所述第一展示区域的第四目标图像的位置；在所述页面上的第四目标图像到达所述第二展示区域相应的位置时，在所述第一展示区域生成与所述第四目标图像一致的第四悬浮视图，同时在将所述展示列表上的第四目标图像滑入第二展示区域，并在所述第二展示区域隐藏所述第四目标图像，所述第四悬浮视图用于覆盖在所述页面上的第四目标图像的上方；随着所述页面的滑动，移动所述第四悬浮视图，使得所述第四悬浮视图始终覆盖在所述页面的第四目标图像上方；当所述第四目标图像完全滑动到所述第二展示区域对应的位置时，隐藏所述第四悬浮视图，同时在所述第二展示区域展示所述第四目标图像。

在一个实施例中，所述方法还包括：检测所述第二展示区域上的点击事件；响应于检测到针对所述第二展示区域上的第五目标图像的第一点击事件，滑动所述页面，使得在所述第一展示区域的预定位置展示所述第五目标图像。

在一个实施例中，所述方法还包括：检测所述第一展示区域上的点击事件；响应于检测到针对所述第一展示区域当前展示的第六目标图像的第二点击事件，在所述第一展示区域展示所述第六目标图像对应的消息页面；同时，更新所述展示列表。

在一个实施例中，所述更新所述展示列表包括：在所述展示列表上删除所述第六目标图像，从而将所述展示列表上的第六目标图像之后的各个目标图像前移一个位置，或者将所述第六目标图像之前的各个目标图像后移一个位置。

在一个实施例中，所述目标图像还包括，相应信息主体对应的未查看的更新信息的条数。

根据第二方面，提供一种用于页面展示的装置，用于展示所述页面的窗口包括第一展示区域和第二展示区域，其中，所述第一展示区域用于沿第一方向滑动地展示所述页面，所述装置包括：

第一检测单元，配置为检测所述页面中的至少一个目标图像，所述至少一个目标图像分别对应于具有未查看的更新信息的各个信息主体；

第一生成单元，配置为基于所述至少一个目标图像在所述页面的排列顺序，生成展示列表，所述展示列表包括顺序排列的至少一个目标图像；

展示控制单元，配置为基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表上的目标图像按照第一位置进行展示，使得所述第二展示区域上展示的目标图像与所述第一展示区域当前展示的目标图像按照所述至少一个目标图像在所述页面上的排列顺序进行衔接。

根据第三方面，提供了一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行上述第一方面的方法。

根据第四方面，提供了一种计算设备，包括存储器和处理器，其特征在于，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现上述第一方面的方法。

通过本说明书实施例提供的页面展示的方法和装置，在页面上具有未查看的更新信息的情况下，将这些未查看的更新信息的各个信息主体对应的目标图像按照在页面上的排列顺序生成展示列表，通过第一展示区域沿第一方向滑动地展示页面，通过第二展示区域沿第二方向展示展示列表上的目标图像。并且，第二展示区域上展示的目标图像与第一展示区域当前展示的目标图像按照目标图像在页面上的排列顺序进行衔接。如此，在页面展示过程中向用户提供更丰富的展示信息，从而提高页面展示的有效性。在进一步地互动中，这种页面展示的方式还可以通过第一展示区域和第二展示区域的目标图像的联动，提高用户体验。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1示出本说明书实施例的应用场景示意图；

图2示出根据一个实施例的页面展示的方法流程图；

图3示出根据一个具体例子的页面展示过程中页面滑动时的效果示意图；

图4示出根据一个具体例子的页面信息展示过程中目标图像在第一展示区域和第二展示区域之间过渡的效果示意图；

图5示出根据一个具体例子的页面信息展示过程中第二展示区域发生点击事件的效果示意图；

图6示出根据一个具体例子的页面信息展示过程中第一展示区域发生点击事件的效果示意图；

图7示出根据一个实施例的用于页面展示的装置的示意性框图。

具体实施方式

下面结合附图，对本说明书提供的方案进行描述。为了便于说明，结合图1示出的本说明书实施例的一个具体适用场景进行说明。在图1示出的场景中，网络架构为终端和服务器。如图1所示，终端可以是智能手机、笔记本电脑、台式计算机等等，其上可以安装并运行各种终端应用，例如购物类应用、资讯类应用等。服务器可以为终端上运行的某一个或一些应用提供相应服务。终端和服务器之间通过网络连接。服务器可以从多个信息主体获取发布的信息，并通过终端应用推送给用户。

进一步地，终端可以通过应用的信息推送页面，将各个信息主体发布的信息推送给终端用户。如图1所示，终端上示出一个信息流页面。该信息流由各个信息主体所发布的信息组成。这些信息可以是推送的商品、资讯等，这些信息在信息流页面上可以按照最后更新的时间顺序进行排列，也可以按照用户感兴趣的类别进行排列，在此并不做限定。

可以理解，对于用户而言，上一次打开信息流页面的时间不同，打开信息流页面后浏览的信息内容也不同。为了便于用户对展示的信息是否浏览进行记录和把握，页面展示时，可以对于未浏览的页面进行标记，形成目标图像。该目标图像例如可以包括信息主体的专用图标(如商家的产品商标等)和未浏览标识(如红色小点等，在图1中示出为灰色小点)。在一些实施例中，目标图像中的未浏览标识还可以包括未浏览信息的条数等。

这样，用户在打开信息流页面时，对于哪个信息主体的信息有未浏览的更新信息，哪个信息主体所发布的信息已全部浏览等问题非常明确。在实际使用中，由于终端展示模块大小有限，信息流页面上的信息可能无法完全展示。因此，常规技术中通常采用在页面顶部通过提示条提示更新信息，或者在页面某个位置设置锚点，快速定位到页面的某个位置(如顶部)。这些设置方式，形式通常比较单一，例如在页面顶部通过提示条提示更新信息，占用顶部区域，对于习惯从页面顶部阅读的用户来说，影响用户体验。如果提示条内容固定，只能提示有限个更新信息，提示条中提示的信息与页面当前战士的信息也有可能重复，同样不能进行有效提示。

为了解决这些问题，如图1所示，本说明书采用的页面展示方法，将用于展示信息流页面的窗口区分第一展示区域和第二展示区域。在第一展示区域，可以在第一方向上滑动地展示页面中的信息流内容。在第二展示区域，则可以在第二方向上滑动地展示第一展示区域无法展示的目标图像(对应有信息主体的更新信息)。如此，由于第一展示区域和第二展示区域上的目标图像没有重复，且都可以滑动地展示页面上的目标图像，因此可以实现联合展示，不仅向用户展现更多信息内容，还可以提供更加丰富的展现形式，提高用户体验。

下面具体描述相关技术方案的实现过程。

图2示出一个实施例的页面展示的过程。图2示出的页面展示方法适用于具有展示功能的终端，例如包括触摸屏的智能手机等。在描述图2示出的方法流程之前需要明确的是，在页面展示过程中，终端上用于展示页面的窗口可以包括第一展示区域和第二展示区域。这里的第一展示区域和第二展示区域可以是窗口中相互独立的不同区域，也可以是具有重合部分的区域，在此不作限定。“第一”、“第二”是按照不同的展示功能进行区分，而不对名称或顺序进行限定。其中，第一展示区域用于在第一方向滑动地展示上述页面，第二展示区域相对于第一区域，在第二方向上滑动地辅助展示第一展示区域当前无法展示的页面信息。根据不同的预期效果，第一方向、第二方向可以是相互垂直的方向，也可以是相互平行但方向相反的方向，还可以是按照一定角度设置的方向，在此不做限定。

该页面展示方法具体包括以下步骤：步骤22，检测页面中的至少一个目标图像，至少一个目标图像分别对应于具有未查看的更新信息的各个信息主体；步骤24，基于至少一个目标图像在页面的排列顺序，生成展示列表，展示列表包括顺序排列的至少一个目标图像；步骤26，基于在第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表按照第一位置进行展示，以使得第二展示区域上展示的目标图像与第一展示区域当前展示的目标图像按照上述至少一个目标图像在页面上的排列顺序进行衔接。

首先，在步骤22中，检测页面中的至少一个目标图像。

可以理解，页面中展示的各条信息，可以对应不同的信息主体。信息主体可以是信息的发布者，或者信息所涉及的组织、平台、用户等等，例如可以是商户、会议主办方、体育比赛等。每个信息主体都可以对应有相应的标志性图像。该标志性图像可以是商品对应的品牌商标，也可以是专用的标志性图标。例如，某世界级的体育比赛可以对应一个奖杯图标，某电信运营商对应一个手机图标，等等。

对于用户来说，查看过的信息已经没有新的信息可以获取，因此更关注的可能是未查看过的信息。在本步骤22中，目标图像可以对应于具有未查看的更新信息的各个信息主体。

在一个实现方式中，目标图像可以包括信息主体的标志性图标/专用图标、信息未查看标识等。其中，信息未查看标识可以通过预设的统一标识来描述，例如信息主体的标志性图标/专用图标右上角的特定颜色的小圆点、五角星等。可选地，信息未查看标识上还可以具有用于标识未查看信息条数的数字，如5代表该信息主体具有5条未查看信息。可选地，还可以通过信息未查看标识的数量来标记未查看信息条数，例如，标记有5个小圆点的信息主体具有5条未查看信息。

在用户打开应用页面时，应用可以先对页面上包含未查看的更新信息的各个信息主体进行检测。在一个实施例中，可以对信息主体的信息未查看标识进行检测，当检测到信息未查看标识时，确定对应的图像为目标图像。如此，可以对具有未查看的更新信息的各个信息主体进行统计。当页面中不存在目标图像时，流程结束，正常展示页面即可。当页面中存在至少一个目标图像时，可以进行如图2所示的后续步骤。

接着，在步骤24，基于上述至少一个目标图像在上述页面的排列顺序，生成展示列表。这里，展示列表上可以通过一定的存储格式存储各个目标图像。例如，展示列表可以是包括图片格式的各个目标图像的展示条。该展示条可以是矩形条的，此时展示条有明确的起始点和终点。展示条也可以是类似矩形两端首尾相接形成的圆条，此时，展示条没有明确的端部。此外，展示列表还可以是通过数组描述各个目标图像的列表。其中一条数据对应的数组的各个元素分别对应目标图像的展示格式、像素等数据。当展示列表中的一条数据滑动到对应屏幕上的可展示位置时，根据相应展示格式在展示位置展示成目标图像。本说明书对展示列表的具体形式不做限定。可以理解，展示列表上的各个目标图像可以按照目标图像在页面上的位置顺序排列。

进一步地，通过步骤26，基于在第一展示区域当前展示的目标图像，在第二展示区域沿第二方向将所述展示列表中的目标图像按照第一位置进行展示。可以理解，第二展示区域用于辅助展示第一展示区域无法展示的信息提示，而展示列表可以在第二展示区域沿第二方向滑动，因此，展示列表在第二展示区域的展示位置可以根据第一展示区域所展示的内容而确定。

具体地，第一展示区域沿第一方向展示页面的部分内容，这部分内容可以包括上述至少一个目标图像中的一个或多个，也可以不包括目标图像。为了展示内容的连贯性，可以使得展示列表上的目标图像与第一展示区域当前展示的目标图像按照各个目标图像在页面上的排列顺序进行衔接。

在用户打开页面时，页面还未成功渲染，此时，可以先根据用于展示页面的窗口大小，以及终端设置的字体等信息，确定页面上各个信息主体对应的展示位置，从而可以确定出当前可以在第一展示区域展示的各个目标图像。如图1所示。

在用户打开页面时，可以假设展示列表中的目标图像在第二展示区域按照第一位置进行展示。可以理解，这里的第一位置用于表示展示列表上的目标图像在第二展示区域的展示位置，可以通过展示列表当前可展示出的所有目标图像来描述，也可以通过展示列表在第二展示区域当前展示出的第一个目标图像来描述，在此不作限定。

如果第二展示区域在第一展示区域的后面，用于展示页面上在第一展示区域展示出的目标图像之后的目标图像，则：

在第一展示区域当前可以展示的目标图像数量为零时，上述第一位置可以描述为：在第二展示区域展示出的第一个目标图像是页面中的第一个目标图像，也就是展示列表中的第一个目标图像；

在第一展示区域当前可以展示的目标图像数量为n时，上述第一位置可以描述为：在第二展示区域展示出的第一个目标图像是页面(或展示列表)中的第n+1个目标图像；等等。此时，如果把展示列表上排在第一展示区域当前展示的最后一个目标图像之后、并与该最后一个目标图像相邻的目标图像称为第一目标图像，则在该步骤26中可以在第二展示区域将第一目标图像展示在排在最前的展示位置。

如果第二展示区域在第一展示区域的前面，用于展示页面上在第一展示区域展示出的目标图像之前的目标图像，则由于页面加载时往往先展示页面最前面的内容，从而在第二展示区域可以不展示任何目标图像。此时，第二展示区域可以是隐藏状态，只有需要展示内容时第二展示区域才可见。在一个实施例中，此时第二展示区域的位置还可以暂时用于展示第一展示区域的展示内容，当第二展示区域需要展示目标图像时，将第一展示区域的展示内容下移，从而在第二展示区域展示上述展示列表中的目标图像。

在第二展示区域位于第一展示区域沿第一方向的前端的情况下，如果将展示列表上排在第一展示区域当前展示的第一个目标图像之前、并与该第一个目标图像相邻的目标图像称为第二目标图像，则该步骤26中可以将该第二目标图像展示在第二展示区域排在最后的展示位置。

可以理解，在滑动展示页面的过程中，滑动方向往往是双向的，也就是说，不是特定一个上或下这样的方向，而是上下这样的滑动方向，也就是说，一个滑动方向是包含严格意义上的正向、反向两种方向。例如对于手机屏幕来说，按照用户的阅读习惯，从前到后的方向称为上下方向，也可以称之为竖向，与之垂直的方向可以称为左右方向，或者横向。第一方向、第二方向可以用于表示这样的滑动方向。在前文的例子中，第二展示区域可以位于第一展示区域的顶端或底端，第一方向和第二方向可以是相互垂直的，例如，第一方向是竖向，第二方向是横向。除此之外，第一方向和第二方向也可以是一致的，例如第二展示区域设置在第一展示区域的一侧，第一方向和第二方向都是竖向。

值得说明的是，在一些实施例中，第二展示区域可以有多个，例如在第一展示区域顶端和底端分别可以设置一个，在此不作限定。

在一个实施例中，第一展示区域还可以被第二展示区域分成两部分，两个部分可以独立滑动，第二展示区域位于两个部分的中间，用于展示中间隐藏掉的目标图像。可选地，当两个部分展示的内容发生重叠或衔接时，第二展示区域可以隐藏，这样两个部分可以合并在一起连续地展示相关内容。

可以理解，如图2示出的流程主要发生在页面刚刚加载或渲染阶段。页面展示出来的效果如图1所示。进一步地，随着与用户的交互，第一展示区域和第二展示区域展示的内容也会随着发生变化。

例如，在一个实施例中，用户可以点击第一展示区域当前所展示的某个目标图像，从而打开相应信息主体的信息页面进行浏览。用户点击浏览相应信息主体的信息页面之后，相应信息主体的未查看的更新信息由于被查看，此时，相应信息主体对应的标志性图标/专用图标上不再有未查看标识，从而可以不再对应目标图像。这样，可以对展示列表进行更新，删除相应的目标图像。可选地，信息主体的未查看的更新信息被部分查看时，目标图像上的未查看标识中示意的未查看条数减少，也可以对展示列表进行更新，减少展示列表中相应目标图像对应的未查看条数。当展示列表进行更新时，由于当前发生变化的目标图像往往不是在第二展示区域当前展示的目标图像，因此，不能立即看到更新效果，只有当展示列表上的相应目标图像滑动到相关位置时，才能看到相关更新。

下面介绍用户与终端进行其他交互时的情形。

请参考图3，示出了第一展示区域展示的页面产生滑动时的页面展示变化示意图。

如图3所示，通过用户操作触摸屏、滚动条等方式，页面在第一展示区域沿第一方向(如竖直方向)滑动，从而产生页面的滑动事件。如图3中，终端为智能手机，用户通过操作触摸屏，用手沿箭头方向滑动时产生的滑动事件。如此，终端可以对第一展示区域上产生沿第一方向的滑动事件进行监听。终端可以按照预定事件间隔(如10毫秒)对第一展示区域的页面滑动事件进行检测，也可以在检测到用户产生滑动页面的操作时，主动向相关进程发送滑动事件。

在检测到滑动事件的情况下，由于页面在第一展示区域产生滑动，终端可以进一步实时(按照预定时间间隔，例如10毫秒)检测第一展示区域中可见的目标图像。当第一展示区域可见的目标图像发生改变时，令第二展示区域展示的目标图像也按照展示列表中的顺序进行相应滑动。这样，可以保持第一展示区域和第二展示区域当前所展示的目标图像是按照在页面上的排列顺序进行衔接的。

结合图3所示，在该滑动事件中，假设本来就展示在第一展示区域的目标图像301被滑动到了第一展示区域的最上方，并且在第一展示区域中展示了目标图像301、一个非目标展示图像，以及后一个目标图像302，则在第二展示区域展示的目标图像也相应地被向左移动一个目标图像的位置，从而在第二展示区域展示出的第一个目标图像变成排在目标图像302之后的目标图像303。

从图3中可以看出，页面被滑动而当前不再在第一展示区域展示的目标图像，如小汽车目标图像、旗帜目标图像，由于位于第一展示区域当前展示的目标图像301的前面，从而不在第二展示区域展示。在一些实施例中，在第一展示区域的顶端还可以设置另一个第二展示区域(例如位于页面顶端)，来展示这些被滑动而隐藏在前面的目标图像。

根据一个可能的设计，为了第一展示区域和第二展示区域展示的目标图像的连贯性，页面在第一展示区域滑动的情况下，终端还可以通过悬浮图标进一步对第一展示区域和第二展示区域的目标图像进行过渡。

根据一方面的实施例，页面在第一展示区域沿背离第二展示区域的方向滑动，例如，在图4的示例中，第二展示区域在第一展示区域的底端，页面沿箭头所指方向，即第一展示区域的顶端滑动。此时，终端可以检测页面中的下一个到达第一展示区域的第三目标图像的位置。如图4所示，一个表盘的目标图像是下一个到达第一展示区域的目标图像，该表盘的目标图像可以暂时称为第三目标图像。在第三目标图像与第二展示区域中的目标图像在第一方向上的位置一致(如竖向的高度一致)时，终端可以在第二展示区域生成与第三目标图像一致(内容一样)的悬浮视图(如图4中的悬浮视图401)，并在第二展示区域隐藏相应的第三目标图像。可以理解，页面通过终端的第一展示区域滑动地展示的过程中，第三目标图像虽然还未到达第一展示区域从而无法在第一展示区域展示出来，但其实其位置已经可能确定，该位置例如可以通过页面在相应展示区域的虚拟展示效果中的位置来描述。终端可以通过后台进程获取第三目标图像的位置，从而判断该位置与第二展示区域中的第三目标图像的位置之间的关系。在位置关系判断的过程中，可以选择目标图像在第一展示区域和第二展示区域中的同一个位置点(例如页面上的第三目标图像右上角，与展示列表上第三目标图像右上角)作为参考点的进行坐标对比，在此不再赘述。

其中，悬浮视图是悬浮在第一展示区域和/或第二展示区域之上的视图(view)，其例如可以通过展示图层实现。与目标图像对应地，该悬浮视图可以称为第三悬浮视图。第三悬浮视图用于覆盖在页面中的第三目标图像的上方，这样，随着页面的滑动，移动第三悬浮视图，使得第三悬浮视图始终覆盖在页面中的第三目标图像上方。这样，从用户角度看起来就像第二展示区域上的第三目标图像随着页面滑动，向第一展示区域滑动。

当页面中的第三目标图像完全滑动到第一展示区域时，终端可以隐藏第三悬浮视图，此时页面上的第三目标图像已经可以正常完整地展示给用户。这样，从用户视觉角度来看，就像第二展示区域上的第三目标图像完全滑动到第一展示区域。此时，还可以在第二展示区域沿第二方向将展示列表上的目标图像滑动一个目标图像的位置，使得展示列表中的第三目标图像滑出第二展示区域。例如图4中，展示列表可以向左滑动一个目标图像的距离，从而，在第二展示区域中首个展示位置展示第三目标图像的下一个目标图像。如此，使得前述的第二展示区域上的第三目标图像完全滑动到第一展示区域的视觉效果更加连贯和完整。

根据另一方面的实施例，页面在第一展示区域还可以沿指向第二展示区域的方向滑动，例如在图4中，沿箭头方向相反的方向(如向下)滑动。此时，终端可以检测页面中的下一个离开第一展示区域的第四目标图像的位置，并在第四目标图像到达第二展示区域相应的位置时，在第一展示区域生成与第四目标图像一致的第四悬浮视图，第四悬浮视图用于覆盖在页面上的第四目标图像的上方。同时在第二展示区域沿第二方向将展示列表上的目标图像滑动一个目标图像的位置，并在第二展示区域上隐藏第四目标图像。这样，使得第四目标图像在第二展示区域暂时不可见。随着页面的滑动，移动第四悬浮视图，使得第四悬浮视图始终覆盖在页面的第四目标图像上方。当第四目标图像完全滑动到第二展示区域对应的位置时，隐藏第四悬浮视图。同时，在第二展示区域展示第四目标图像使得第二展示区域的第四目标图像可见。

与前一方面的实施例类似地，在该方面的实施例中，实现的视觉效果是，第四目标图像由第一展示区域向第二展示区域移动。其中，不同的是，第四目标图像到达第二展示区域，可以是第四目标图像与第二展示区域靠近的一侧到达第二展示区域与第一展示区域的边界。可选地，该边界可以通过第一方向上的竖向坐标表示。

根据一种实施方式，终端还可以对第二展示区域上的点击事件进行检测。在检测到针对第二展示区域上的第五目标图像的第一点击事件时，终端可以滑动页面，使得在第一展示区域的预定位置展示第五目标图像。作为示例，请参考图5，用户点击图5中页面51对应的第二展示区域内的目标图像501时，目标图像501展示在第一展示区域左上角的位置。如图5所示，此时，在一个实施例中，第一展示区域可以展示页面52，页面52仍是信息流页面，即页面51，仅仅是页面51滑动到页面52所示的位置，即将目标图像501作为首个展示在第一展示区域的目标图像。在另一个实施例中，第一展示区域的页面51也可以发生跳转，跳转到页面53，即目标图像501所对应的信息主体的信息页面。该实施方式可以帮助用户快速定位到感兴趣的信息，在信息推送场景下，提高信息推送的有效性。

根据另一种实施方式，终端还可以检测第一展示区域上的点击事件。在检测到针对第一展示区域当前展示的第六目标图像的第二点击事件的情况下，在第一展示区域展示第六目标图像对应的消息页面；同时，更新第二展示区域的展示列表。作为示例，如图6所示，在用户在第一展示区域展示的页面61上进行针对目标图像601的点击操作时，终端响应于该操作事件，跳转到页面62，即目标图像601对应的信息页面。

同时，由于目标图像601对应的信息主体的未查看信息被查看，目标图像601可能不再是目标图像，即不再是展示列表所展示的对象，因此，终端还可以更新展示列表。在一个实施例中，终端可以从展示列表中删除第六目标图像，并将第六目标图像之后的各个目标图像前移一个位置，或者将第六目标图像之前的各个目标图像后移一个位置。可以理解，展示列表当前没有展示出第六目标图像，因此图6无法示出展示列表的更新状态。其中，在将第六目标图像之后的各个目标图像前移一个位置的情况下，还需要移动展示列表的位置，以保证展示列表上的目标图像当前在第二展示区域内的展示状态不变。在另一个实施例中，终端还可以不删除展示列表中的第六目标图像，而仅仅将第六目标图像(如目标图像601)变成灰色，并设置不可点击属性，等等。在更多实施例中，对展示列表的更新还可以是其他方式，在此不再赘述。

值得说明的是，上述记载中对目标图像的标号“第一”、“第二”、“第三”等等，并不代表目标图像的顺序限定或区分，而是为了描述的方便，对不同场景下的目标图像进行区分。除了特殊情况，这些标号所指的目标图像一般可以是页面上的任意一个目标图像。

回顾以上过程，在页面展示过程中，在页面上具有未查看的更新信息的情况下，将这些未查看的更新信息的各个信息主体对应的目标图像按照在页面上的排列顺序生成展示列表，通过第一展示区域沿第一方向滑动地展示页面，通过第二展示区域沿第二方向展示展示列表上的目标图像。并且，第二展示区域上展示的目标图像与第一展示区域当前展示的目标图像按照目标图像在页面上的排列顺序进行衔接。如此，在页面展示过程中向用户提供更丰富的展示信息，从而提高页面展示的有效性。在进一步地互动中，这种页面展示的方式还可以通过第一展示区域和第二展示区域的目标图像的联动，提高用户体验。

图7示出用于页面展示的装置700。装置700中用于展示页面的窗口包括第一展示区域和第二展示区域，其中，第一展示区域用于沿第一方向滑动地展示页面。该装置700可以包括：

第一检测单元71，配置为检测页面中的至少一个目标图像，至少一个目标图像分别对应于具有未查看的更新信息的各个信息主体；

第一生成单元72，配置为基于至少一个目标图像在页面的排列顺序，生成展示列表，展示列表包括顺序排列的至少一个目标图像；

展示控制单元73，配置为基于在第一展示区域当前展示的目标图像，在第二展示区域沿第二方向将所述展示列表中的目标图像按照第一位置进行展示，使得第二展示区域上展示的目标图像与第一展示区域当前展示的目标图像按照至少一个目标图像在页面上的排列顺序进行衔接。

根据一个实施例，所述第二方向垂直于所述第一方向，第二展示区域位于第一展示区域沿第一方向的末端；展示控制单元73还配置为：

将展示列表上排在第一展示区域当前展示的最后一个目标图像之后、并与最后一个目标图像相邻的第一目标图像，展示在第二展示区域排在最前的展示位置。

根据另一个实施例，所述第二方向垂直于所述第一方向，第二展示区域位于第一展示区域沿第一方向的前端；展示控制单元73还配置为：

将展示列表上排在第一展示区域当前展示的第一个目标图像之前、并与第一个目标图像相邻的第二目标图像，展示在第二展示区域中排在最后的展示位置。

在一个可能的设计中，装置700还可以包括：

第二检测单元，配置为检测第一展示区域上沿第一方向的滑动事件，滑动事件是页面在第一展示区域滑动的事件；

扫描单元，配置为在第二检测单元检测到滑动事件的情况下，扫描第一展示区域中可见的目标图像；

展示控制单元73还配置为，响应于第一展示区域可见的目标图像发生改变，令展示列表上的目标图像在第二展示区域进行相应滑动，以保持第二展示区域上的目标图像与第一展示区域当前展示的目标图像按照至少一个目标图像在页面上的排列顺序进行衔接。

在另一个可能的设计中，在页面在第一展示区域沿背离第二展示区域的方向滑动的情况下，装置700还包括：

第三检测单元，配置为检测页面中的下一个到达第一展示区域的第三目标图像的位置；

第二生成单元，配置为在页面上的第三目标图像与第二展示区域中的第三目标图像在第一方向上的位置一致时，在第二展示区域生成与第三目标图像一致的第三悬浮视图，并由展示控制单元在第二展示区域隐藏第三目标图像，第三悬浮视图用于覆盖在页面中的第三目标图像的上方；

展示控制单元73，还配置为随着页面的滑动，移动第三悬浮视图，使得第三悬浮视图始终覆盖在页面中的第三目标图像上方；以及

当第三目标图像完全滑动到第一展示区域时，隐藏第三悬浮视图，同时在第二展示区域沿第二方向将展示列表滑动一个目标图像的位置，使得展示列表上的第三目标图像滑出第二展示区域。

在有一个可能的设计中，在页面在第一展示区域沿指向第二展示区域的方向滑动的情况下，装置还包括：

第四检测单元，配置为检测页面中的下一个离开第一展示区域的第四目标图像的位置；

第三生成单元，配置为在页面上的第四目标图像开始进入第二展示区域相应的位置时，在第一展示区域生成与第四目标图像一致的第四悬浮视图，同时由展示控制单元73将所述展示列表上的第四目标图像滑入第二展示区域，，并在第二展示区域隐藏第四目标图像，第四悬浮视图用于覆盖在页面上的第四目标图像的上方；

展示控制单元73还配置为，随着页面的滑动，移动第四悬浮视图，使得第四悬浮视图始终覆盖在页面的第四目标图像上方；以及

当第四目标图像完全滑动到第二展示区域对应的位置时，隐藏第四悬浮视图，同时在第二展示区域展示第四目标图像。

在一个实施例中，装置700还包括：

第五检测单元，配置为检测第二展示区域上的点击事件；

展示控制单元73还配置为，响应于检测到针对第二展示区域上的第五目标图像的第一点击事件，滑动页面，使得在第一展示区域的预定位置展示第五目标图像。

在另一个实施例中，装置700还包括：

第六展示单元，配置为检测第一展示区域上的点击事件；

展示控制单元73，还配置为响应于检测到针对第一展示区域当前展示的第六目标图像的第二点击事件，在第一展示区域展示第六目标图像对应的消息页面；以及，

更新单元，配置为更新展示列表。

进一步地，更新单元还可以配置为：

在展示列表上删除第六目标图像，从而将展示列表上的第六目标图像之后的各个目标图像前移一个位置，或者将展示列表上的第六目标图像之前的各个目标图像后移一个位置。

值得说明的是，图7所示的装置700是与图2示出的方法实施例相对应的装置实施例，图2示出的方法实施例中的相应描述同样适用于装置700，在此不再赘述。

根据另一方面的实施例，还提供一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行相应描述的方法。

根据再一方面的实施例，还提供一种计算设备，包括存储器和处理器，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现相应描述的方法。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本发明所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。

以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的技术方案的基础之上，所做的任何修改、等同替换、改进等，均应包括在本发明的保护范围之内。

Claims (22)

1.一种页面展示的方法，用于展示所述页面的窗口包括第一展示区域和第二展示区域，其中，所述第一展示区域用于沿第一方向滑动地展示所述页面，所述方法包括：

检测所述页面中的至少一个目标图像，所述至少一个目标图像分别对应于具有未查看的更新信息的各个信息主体；

基于所述至少一个目标图像在所述页面的排列顺序，生成展示列表，所述展示列表包括顺序排列的至少一个目标图像；

基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表中的目标图像按照第一位置进行展示，使得所述第二展示区域上展示的目标图像与所述第一展示区域当前展示的目标图像按照所述至少一个目标图像在所述页面上的排列顺序进行衔接。

2.根据权利要求1所述的方法，其中，所述第二方向垂直于所述第一方向，所述第二展示区域位于所述第一展示区域沿所述第一方向的末端；

所述基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表上的目标图像按照第一位置进行展示包括：

将所述展示列表上排在所述第一展示区域当前展示的最后一个目标图像之后、并与所述最后一个目标图像相邻的第一目标图像，展示到所述第二展示区域中排在最前的展示位置。

3.根据权利要求1所述的方法，其中，所述第二方向垂直于所述第一方向，所述第二展示区域位于所述第一展示区域沿所述第一方向的前端；

所述基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表上的目标图像按照第一位置进行展示包括：

将所述展示列表上排在所述第一展示区域当前展示的第一个目标图像之前、并与所述第一个目标图像相邻的第二目标图像，展示到第二展示区域中排在最后的展示位置。

4.根据权利要求1所述的方法，其中，所述方法还包括：

检测所述第一展示区域上沿所述第一方向的滑动事件，所述滑动事件是所述页面在所述第一展示区域滑动的事件；

在检测到所述滑动事件的情况下，扫描所述第一展示区域中可见的目标图像；

响应于所述第一展示区域可见的目标图像发生改变，令所述展示列表上的目标图像在所述第二展示区域进行相应滑动，以保持所述第二展示区域上的目标图像与所述第一展示区域当前展示的目标图像按照所述至少一个目标图像在所述页面上的排列顺序进行衔接。

5.根据权利要求1所述的方法，其中，在所述页面在所述第一展示区域沿背离所述第二展示区域的方向滑动的情况下，所述方法还包括：

检测所述页面中的下一个到达第一展示区域的第三目标图像的位置；

在所述页面中的第三目标图像与所述第二展示区域中的第三目标图像在第一方向上的位置一致时，在所述第二展示区域生成与第三目标图像一致的第三悬浮视图，并在所述第二展示区域隐藏第三目标图像，所述第三悬浮视图用于覆盖在所述页面中的第三目标图像的上方；

随着所述页面的滑动，移动所述第三悬浮视图，使得所述第三悬浮视图始终覆盖在所述页面中的第三目标图像上方；

当所述第三目标图像完全滑动到所述第一展示区域时，隐藏所述第三悬浮视图，同时在所述第二展示区域沿所述第二方向将所述展示列表滑动一个目标图像的位置，使得所述展示列表上的第三目标图像滑出所述第二展示区域。

6.根据权利要求1所述的方法，其中，在所述页面在所述第一展示区域沿指向所述第二展示区域的方向滑动的情况下，所述方法还包括：

检测所述页面中的下一个离开所述第一展示区域的第四目标图像的位置；

在所述页面上的第四目标图像到达所述第二展示区域时，在所述第一展示区域生成与所述第四目标图像一致的第四悬浮视图，同时将所述展示列表上的第四目标图像滑入第二展示区域，并在所述第二展示区域隐藏所述第四目标图像，所述第四悬浮视图用于覆盖在所述页面上的第四目标图像的上方；

随着所述页面的滑动，移动所述第四悬浮视图，使得所述第四悬浮视图始终覆盖在所述页面的第四目标图像上方；

当所述第四目标图像完全滑动到所述第二展示区域对应的位置时，隐藏所述第四悬浮视图，同时在所述第二展示区域展示所述第四目标图像。

7.根据权利要求1所述的方法，其中，所述方法还包括：

检测所述第二展示区域上的点击事件；

响应于检测到针对所述第二展示区域上的第五目标图像的第一点击事件，滑动所述页面，使得在所述第一展示区域的预定位置展示所述第五目标图像。

8.根据权利要求1所述的方法，其中，所述方法还包括：

检测所述第一展示区域上的点击事件；

响应于检测到针对所述第一展示区域当前展示的第六目标图像的第二点击事件，在所述第一展示区域展示所述第六目标图像对应的消息页面；同时，

更新所述展示列表。

9.根据权利要求8所述的方法，其中，所述更新所述展示列表包括：

在所述展示列表上删除所述第六目标图像，从而将所述展示列表上的第六目标图像之后的各个目标图像向前滑动一个位置，或者将所述第六目标图像之前的各个目标图像向后滑动一个位置。

10.根据权利要求1所述的方法，其中，所述目标图像还包括，相应信息主体对应的未查看的更新信息的条数。

11.一种页面展示的装置，所述装置中用于展示所述页面的窗口包括第一展示区域和第二展示区域，其中，所述第一展示区域用于沿第一方向滑动地展示所述页面，所述装置包括：

第一检测单元，配置为检测所述页面中的至少一个目标图像，所述至少一个目标图像分别对应于具有未查看的更新信息的各个信息主体；

第一生成单元，配置为基于所述至少一个目标图像在所述页面的排列顺序，生成展示列表，所述展示列表包括顺序排列的至少一个目标图像；

展示控制单元，配置为基于在所述第一展示区域当前展示的目标图像，在所述第二展示区域沿第二方向将所述展示列表中的目标图像按照第一位置进行展示，使得所述第二展示区域上展示的目标图像与所述第一展示区域当前展示的目标图像按照所述至少一个目标图像在所述页面上的排列顺序进行衔接。

12.根据权利要求11所述的装置，其中，所述第二方向垂直于所述第一方向，所述第二展示区域位于所述第一展示区域沿所述第一方向的末端；

所述展示控制单元还配置为：

将所述展示列表上排在所述第一展示区域当前展示的最后一个目标图像之后、并与所述最后一个目标图像相邻的第一目标图像，展示到所述第二展示区域中排在最前的展示位置。

13.根据权利要求11所述的装置，其中，所述第二方向垂直于所述第一方向，所述第二展示区域位于所述第一展示区域沿所述第一方向的前端；

所述展示控制单元还配置为：

将所述展示列表上排在所述第一展示区域当前展示的第一个目标图像之前、并与所述第一个目标图像相邻的第二目标图像，展示到所述第二展示区域中排在最后的展示位置。

14.根据权利要求11所述的装置，其中，所述装置还包括：

第二检测单元，配置为检测所述第一展示区域上沿所述第一方向的滑动事件，所述滑动事件是所述页面在所述第一展示区域滑动的事件；

扫描单元，配置为在所述第二检测单元检测到所述滑动事件的情况下，扫描所述第一展示区域中可见的目标图像；

所述展示控制单元还配置为，响应于所述第一展示区域可见的目标图像发生改变，令所述展示列表上的目标图像在所述第二展示区域进行相应滑动，以保持所述第二展示区域上的目标图像与所述第一展示区域当前展示的目标图像按照所述至少一个目标图像在所述页面上的排列顺序进行衔接。

15.根据权利要求11所述的装置，其中，在所述页面在所述第一展示区域沿背离所述第二展示区域的方向滑动的情况下，所述装置还包括：

第三检测单元，配置为检测所述页面中的下一个到达第一展示区域的第三目标图像的位置；

第二生成单元，配置为在所述页面中的第三目标图像与所述第二展示区域中的第三目标图像在第一方向上的位置一致时，在所述第二展示区域生成与所述第三目标图像一致的第三悬浮视图，并由所述展示控制单元在所述第二展示区域隐藏所述展示列表上的第三目标图像，所述第三悬浮视图用于覆盖在所述页面中的第三目标图像的上方；

所述展示控制单元，还配置为随着所述页面的滑动，移动所述第三悬浮视图，使得所述第三悬浮视图始终覆盖在所述页面中的第三目标图像上方；以及

当所述第三目标图像完全滑动到所述第一展示区域时，隐藏所述第三悬浮视图，同时在所述第二展示区域沿所述第二方向将所述展示列表滑动一个目标图像的位置，使得所述展示列表上的第三目标图像滑出所述第二展示区域。

16.根据权利要求11所述的装置，其中，在所述页面在所述第一展示区域沿指向所述第二展示区域的方向滑动的情况下，所述装置还包括：

第四检测单元，配置为检测所述页面中的下一个离开所述第一展示区域的第四目标图像的位置；

第三生成单元，配置为在所述页面上的第四目标图像到达所述第二展示区域时，在所述第一展示区域生成与所述第四目标图像一致的第四悬浮视图，同时由所述展示控制单元将所述展示列表上的第四目标图像滑入第二展示区域，并在所述第二展示区域隐藏所述第四目标图像，所述第四悬浮视图用于覆盖在所述页面上的第四目标图像的上方；

所述展示控制单元还配置为，随着所述页面的滑动，移动所述第四悬浮视图，使得所述第四悬浮视图始终覆盖在所述页面的第四目标图像上方；以及

当所述第四目标图像完全滑动到所述第二展示区域对应的位置时，隐藏所述第四悬浮视图，同时在所述第二展示区域展示所述第四目标图像。

17.根据权利要求11所述的装置，其中，所述装置还包括：

第五检测单元，配置为检测所述第二展示区域上的点击事件；

所述展示控制单元还配置为，响应于检测到针对所述第二展示区域上的第五目标图像的第一点击事件，滑动所述页面，使得在所述第一展示区域的预定位置展示所述第五目标图像。

18.根据权利要求11所述的装置，其中，所述装置还包括：

第六展示单元，配置为检测所述第一展示区域上的点击事件；

所述展示控制单元，还配置为响应于检测到针对所述第一展示区域当前展示的第六目标图像的第二点击事件，在所述第一展示区域展示所述第六目标图像对应的消息页面；以及，

更新单元，配置为更新所述展示列表。

19.根据权利要求18所述的装置，其中，所述更新单元进一步配置为：

在所述展示列表上删除所述第六目标图像，从而将所述展示列表上的第六目标图像之后的各个目标图像向前滑动一个位置，或者将所述展示列表上的第六目标图像之前的各个目标图像向后滑动一个位置。

20.根据权利要求11所述的装置，其中，所述目标图像还包括，相应信息主体对应的未查看的更新信息的条数。

21.一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行权利要求1-10中任一项的所述的方法。

22.一种计算设备，包括存储器和处理器，其特征在于，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现权利要求1-10中任一项所述的方法。

Images