CN103678646A - 一种页面呈现方法及装置 - Google Patents

Abstract

本发明公开了一种页面呈现方法及装置，该方法为：接收页面浏览请求，并呈现第一界面，所述第一界面为呈现相应页面时的初始界面；根据用户的输入指令确定用户指示浏览所述第一界面之外的页面时，设置一浮层，并在所述浮层中嵌入设定的导航模块；呈现所述第一界面之外的页面，并将所述浮层平移至当前界面中的指定位置。该方法在用户浏览页面时，始终在屏幕可见的范围内显示一浮层导航栏，令用户在浏览页面的过程可以随时通过该浮层导航栏达到快速切换页面的目的，与传统的导航栏相比，减少了切换页面时所做的冗余操作，提高了页面快速切换的效率。

Description

一种页面呈现方法及装置

技术领域

本发明涉及计算机网络领域，尤其涉及一种页面呈现方法及装置。

背景技术

导航栏是指位于页眉区域，在页眉横幅图片上边或下边的一水平工具栏，导航栏由一排水平导航模块组成，每一个导航模块在网页中都是一个超链接，其链接的目的端都是网页中的重要页面。用户在浏览页面时，通过导航栏可以方便快速地找到想要浏览的页面。导航栏是用户在浏览页面时快速从一个页面转到另一个页面的通道。

然而，传统的导航栏往往只在向用户呈现的初始页面的顶部位置显示，当用户下拉页面时，导航栏不随着页面的滚动而移动，而是始终固定于初始页面的顶部位置。当用户需要切换页面时，首先需要上拉页面至初始页面，再通过点击导航栏的导航模块进行切换。这种冗余操作，为用户浏览带来了不便，增加了浏览需求的成本，耗费的处理资源较多。

发明内容

本发明实施例提供一种页面呈现方法及装置，用以解决现有技术中利用传统导航栏进行页面切换时，用户需要先回到页面的顶部位置再通过位于顶部位置的导航栏进行切换，会耗费较多的处理资源,且给用户浏览带来不便的问题。

本发明实施例提供的具体技术方案如下：

第一方面，一种页面呈现方法，包括：

接收页面浏览请求，并呈现第一界面，其中，所述第一界面为呈现相应页面部分时的初始界面；

根据用户的输入指令确定用户指示浏览与所述页面部分同属同一页面但位于所述第一界面之外的其他页面部分时，设置一浮层，并在所述浮层中嵌入设定的导航模块；

呈现其他页面部分，并将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置。

通过这种实现方式，令用户在浏览页面的过程可以随时通过该浮层导航栏达到快速切换页面的目的，减少了切换页面时所做的冗余操作，提高了页面快速切换的效率。

结合第一方面，在第一种可能的实现方式中，根据用户的输入指令确定用户指示浏览与所述页面部分同属同一页面但位于所述第一界面之外的其他页面部分时，设置一浮层，包括:

根据用户的输入指令确定用户指示上拉或下拉所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示平移所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示扩大或缩小所述第一界面时，设置一浮层。

通过这种实现方式，通过设置一浮层，并将原导航栏中的导航模块嵌入该浮层中，避免了因第一界面的原导航栏因不在屏幕可见范围内而造成切换不便的问题，使得用户可以利用该浮层中的导航模块达到快速切换页面的目的。

结合第一方面或第一方面的第一种可能的实现方式，在第二种可能的实现方式中，在所述浮层中嵌入设定的导航模块，包括：

在所述浮层中嵌入第一界面中包含的全部导航模块；或者，

在所述浮层中嵌入预设的导航模块。

通过这种实现方式，可以让浮层导航栏的显示更简洁，以及让浮层导航栏的设置更加灵活、更加个性化。

结合第一方面或第一方面的第一种可能的实现方式，在第三种可能的实现方式中，呈现其他页面部分，并将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置，包括：

根据系统默认配置中的第一预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第一预设坐标所表示的位置；或者，

根据用户配置信息中的第二预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第二预设坐标所表示的位置。

通过这种实现方式，可以根据系统或者用户的配置，灵活地将浮层导航栏显示在界面的任何位置。

结合第一方面或第一方面的第一种可能实现的方式，在第四种可能的实现方式中，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置之后，进一步包括：

确定用户在设定时长内未使用所述浮层中嵌入的导航模块时，隐藏所述浮层。

通过这种实现方式，在确定用户暂时不需要使用浮层导航栏时，自动隐藏该浮层导航栏，便于用户浏览页面的正文内容。

第二方面，一种页面呈现装置，包括：

第一呈现单元，用于接收页面浏览请求，并呈现第一界面，其中，所述第一界面为呈现相应页面部分时的初始界面；

设置单元，用于根据用户的输入指令确定用户指示浏览与所述页面部分同属同一页面但位于所述第一界面之外的其他页面部分时，设置一浮层，并在所述浮层中嵌入设定的导航模块；

第二呈现单元，用于呈现其他页面部分，并将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置。

这样，通过上述各单元的相互协作，令用户在浏览页面的过程可以随时通过该浮层导航栏达到快速切换页面的目的，减少了切换页面时所做的冗余操作，提高了页面快速切换的效率。

结合第二方面，在第一种可能的实现方式中，所述设置单元具体用于：

根据用户的输入指令确定用户指示上拉或下拉所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示平移所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示扩大或缩小所述第一界面时，设置一浮层。

这样，设置单元通过设置一浮层，并将原导航栏中的导航模块嵌入该浮层中，避免了因第一界面的原导航栏因不在屏幕可见范围内而造成切换不便的问题，使得用户可以利用该浮层中的导航模块达到快速切换页面的目的。

结合第二方面或第二方面的第一种可能的实现方式，在第二种可能的实现方式中，所述设置单元具体用于：

在所述浮层中嵌入第一界面中包含的全部导航模块；或者，

在所述浮层中嵌入预设的导航模块。

这样，设置单元可以让浮层导航栏的显示更简洁，以及让浮层导航栏的设置更加灵活、更加个性化。

结合第二方面或第二方面的第一种可能的实现方式，在第三种可能的实现方式中，所述第二呈现单元具体用于：

根据系统默认配置中的第一预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第一预设坐标所表示的位置；或者，

根据用户配置信息中的第二预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第一预设坐标所表示的位置。

这样，第二呈现单元可以根据系统或者用户的配置，灵活地将浮层导航栏显示在界面的任何位置。

结合第二方面或第二方面的第一种可能实现的方式，在第四种可能的实现方式中，所述第二呈现单元进一步用于：

在将所述浮层平移至当前界面中的指定位置之后，确定用户在设定时长内未使用所述浮层中嵌入的导航模块时，隐藏所述浮层。

这样，第二呈现单元在确定用户暂时不需要使用浮层导航栏时，自动隐藏该浮层导航栏，便于用户浏览页面的正文内容。

附图说明

图1为本发明实施例提供的一种页面呈现方法的具体流程图；

图2为本发明实施例中第一界面示意图；

图3为本发明实施例中用户下拉第一界面时的页面示意图；

图4为本发明实施例中用户平移第一界面时的页面示意图；

图5为本发明实施例中用户扩大第一界面时的页面示意图；

图6为本发明实施例中用户缩小第一界面时的页面示意图；

图7为本发明实施例中显示有浮动导航栏的页面示意图；

图8为本发明实施例提供的一种页面呈现装置的示意图。

具体实施方式

采用本发明技术方案，能够有效的解决现有技术中传统导航栏只能在初始页面的顶部位置显示，需要切换页面时，用户只能先上拉页面至页面的顶部位置，才能通过传统导航栏进行切换，因此增加了多余的浏览操作、降低了浏览效率的问题。

本发明实施例提供了一种页面呈现方法及装置，下面结合附图对本发明优选的实施方式进行详细说明。

参阅图1所示，本实施例提供的一种页面呈现方法的具体处理流程包括：

步骤100：客户端接收页面浏览请求，并呈现第一界面，其中，该第一界面为呈现相应页面部分时的初始界面。

参阅图2所示，界面1就是客户端根据用户请求向其呈现的初始展示画面，即在未下拉页面2的状态下，在屏幕3中能够看到的从页面2的顶部到屏幕3自身遮挡住的部分。此时，在界面1的顶部位置有一导航栏4，导航栏4中有多个导航模块（如图2所示的A、B、C、D），用户可以通过该导航栏4中的导航模块快速切换至其他页面。

步骤110：客户端根据用户的输入指令确定用户指示浏览与上述页面部分同属同一页面但位于第一界面之外的其他页面部分时，设置一浮层，并在该浮层中嵌入设定的导航模块。

具体地，本发明实施例中，当客户端根据用户的输入指令确定用户指示上拉或下拉该第一界面时，设置一浮层，并在该浮层中嵌入设定的导航模块。例如，参阅图3所示，以用户下拉界面1为例，此时由于用户下拉界面1的操作，造成位于界面1顶部的导航栏4并不在屏幕3可见的范围内。为了避免在用户想使用导航栏时需要先通过纵向滚动条上拉页面2这一冗余的操作，于是，客户端通过设置一浮层，并将导航栏4中的导航模块嵌入该浮层中，使得用户可以利用该浮层中的导航模块达到快速切换页面的目的。

或者，当客户端根据用户的输入指令确定用户指示平移该第一界面时，设置一浮层，并在该浮层中嵌入设定的导航模块。例如，参阅图4所示，以用户平移界面1为例，此时由于用户平移界面1的行为，造成导航栏4的导航模块D处于屏幕3之外。为了避免在用户想使用屏幕之外的导航模块D时需要先通过横向滚动条平移页面2至屏幕3中央这一冗余的操作，客户端也会设置一浮层，并将导航模块嵌入。

或者，当客户端根据用户的输入指令确定用户指示扩大或缩小该第一界面时，设置一浮层，并在该浮层中嵌入设定的导航模块。例如，参阅图5所示，当用户扩大界面1时，导航栏4的导航模块D处于屏幕3可视范围之外。参阅图6所示，当用户缩小界面1时，导航栏4因整个页面2的缩小而缩小导致导航模块过小难于辨识和选择。为了避免在用户想使用导航栏时需要先将页面2恢复正常大小这一冗余的操作，客户端同样设置一浮层，并在该浮层中嵌入正常大小的导航模块。

较佳地，在浮层中嵌入导航模块时，可以嵌入包含第一界面中原导航栏中的全部导航模块，也可以只嵌入预设的导航模块，如此，一来可以让浮层导航栏的显示更简洁，二来可以使浮层导航栏的设置更加灵活、更加个性化，更符合用户的使用需求。

步骤120：客户端呈现其他页面部分，并将上述浮层平移至当前用于呈现其他页面部分的当前界面中的指定位置。

具体地，客户端可以根据系统默认配置中的第一坐标，将上述浮层平移至当前用于呈现其他页面部分的当前界面中的第一预设坐标所表示的位置，或者，客户端也可以根据用户配置信息中的第二预设坐标，将上述浮层平移至当前用于呈现其他页面部分的当前界面中的第二预设坐标所表示的位置。例如，参阅图7所示，例如，客户端可以根据大多数用户的习惯默认将浮动导航栏5显示在屏幕3左侧中部位置。但个别用户可以根据自己的喜好将浮动导航栏移至屏幕的其他任何位置。

进一步地，当客户端将上述浮层平移至当前用于呈现其他页面部分的当前界面中的指定位置之后，确定用户在设定时长内未使用浮层中嵌入的导航模块时，隐藏该浮层。具体地，客户端隐藏浮层的方式，可以是将该浮层移出界面，也可以是将该浮层做透明化处理。在客户端检测到预先约定的用户操作行为，如点击行为或者移动行为时，客户端便重新将该浮层呈现在界面上。

基于上述实施例，以用户浏览网络页面为例，客户端向用户呈现网页页面的详细过程如下：

用户向客户端发起浏览一个网页页面的请求，客户端接收请求，将该网页页面打开，并呈现给用户。此时用户从屏幕上可以看到的刚刚打开时的网页页面部分的初始界面，就是第一界面，在第一界面的页眉区域，通常有一导航栏。

在未对该网页做任何操作（比如下拉）的情况下，用户若不想继续浏览该网页的内容，可以通过网页顶部的导航栏找到想要浏览的页面并实现跳转；若用户对该网页进行了上拉、下拉、平移、扩大或者缩小等操作，当前呈现的网页页面部分不再是初始的第一界面，有可能部分或者全部的导航栏在屏幕的可见范围之外，为了便于用户通过导航栏进行切换同时无需再对网页进行上拉、下拉、平移、扩大或者缩小等操作，客户端将导航栏中的导航模块，嵌入到一个浮层中，并将该浮层随时显示在当前界面的指定位置。

当用户在浏览该网页时，通过滚轮或者纵向滚动条上拉或下拉网页、或者通过横向滚动条平移网页时，该浮层导航栏始终显示在当前界面的特定位置，并给予用户一种随着网页的上拉、下拉或者平移进行相应的滑动的感觉。当用户扩大或者缩小网页时，该浮动导航栏并不随着网页的放大或缩小而变化，仍保持正常的大小。其中，客户端提供的该浮动导航栏，可以根据系统默认的配置嵌入原导航栏中的全部导航模块，并在当前界面的指定位置显示；也可以根据用户的配置信息，只嵌入用户预设的导航模块，并在用户指定的当前界面的网页区域显示，从而订制一个符合用户自身使用的习惯的独一无二的浮动导航栏。另外，该导航栏在当前界面上显示时，可以选择浮动在网页正文内容之外，也可以选择嵌入整个网页中，故该浮动导航栏的出现并不会覆盖网页的正文内容，不会对用户浏览造成影响。

当用户在设定的时间内未使用该浮层导航栏，客户端将该浮层导航栏自动隐藏，隐藏的形式可以是将该浮层导航栏移出界面，也可以使将该浮层做透明化处理。在客户端检测到预先设置的用户行为，比如用户将鼠标移动到浮层导航栏隐藏的区域范围内，或者捕捉到用户同时单击鼠标左右键时，便重新呈现该浮层导航栏。

基于上述实施例，参阅图8所示，本发明实施例还提供了一种页面呈现装置，具体包括：第一呈现单元800、设置单元801以及第二呈现单元802，其中

第一呈现单元800，用于接收页面浏览请求，并呈现第一界面，其中，该第一界面为呈现相应页面部分时的初始界面。

设置单元801，用于根据用户的输入指令确定用户指示浏览与上述页面部分同属同一页面但位于第一界面之外的其他页面部分时，设置一浮层，并在该浮层中嵌入设定的导航模块。

第二呈现单元802，用于呈现其他页面部分，并将上述浮层平移至当前用于呈现其他页面部分的当前界面中的指定位置。

具体地，设置单元801可以根据用户的输入指令确定用户指示上拉或下拉第一界面时，设置一浮层。或者，设置单元801可以根据用户的输入指令确定用户指示平移第一界面时，设置一浮层。或者，设置单元801根据用户的输入指令确定用户指示扩大或缩小第一界面时，设置一浮层。

具体地，设置单元801可以在上述浮层中嵌入第一界面中包含的全部导航模块；或者，设置单元801在上述浮层中嵌入预设的导航模块。

具体地，第二呈现单元802可以根据系统默认配置中的第一预设坐标，将上述浮层平移至当前用于呈现其他页面部分的当前界面中的第一预设坐标所表示的位置；或者，第二呈现单元802可以根据用户配置信息中的第二预设坐标，将上述浮层平移至当前用于呈现其他页面部分的当前界面中的第二预设坐标所表示的位置。

进一步地，第二呈现单元802在将上述浮层平移至当前界面中的指定位置之后，在确定用户在设定时长内未使用该浮层中嵌入的导航模块时，便隐藏该浮层。

综上所述，本发明实施例提供的技术方案，在用户浏览页面时，在屏幕可见范围内始终显示一浮层导航栏，令用户在浏览页面的过程可以随时通过该浮层导航栏达到快速切换页面的目的，与传统的导航栏相比，减少了切换页面时所做的冗余操作，提高了页面快速切换的效率。此外，本发明实施例中提供的浮层导航栏，可以根据用户的兴趣设置所显示的导航模块和呈现位置，使得导航栏更加灵活、更加个性化。

显然，本领域的技术人员可以对本发明实施例进行各种改动和变型而不脱离本发明实施例的精神和范围。这样，倘若本发明实施例的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种页面呈现方法，其特征在于，包括：

接收页面浏览请求，并呈现第一界面，其中，所述第一界面为呈现相应页面部分时的初始界面；

根据用户的输入指令确定用户指示浏览与所述页面部分同属同一页面但位于所述第一界面之外的其他页面部分时，设置一浮层，并在所述浮层中嵌入设定的导航模块；

呈现其他页面部分，并将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置。

2.如权利要求1所述的方法，其特征在于，根据用户的输入指令确定用户指示浏览与所述页面部分同属同一页面但位于所述第一界面之外的其他页面部分时，设置一浮层，包括:

根据用户的输入指令确定用户指示上拉或下拉所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示平移所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示扩大或缩小所述第一界面时，设置一浮层。

3.如权利要求1或2所述的方法，其特征在于，在所述浮层中嵌入设定的导航模块，包括：

在所述浮层中嵌入第一界面中包含的全部导航模块；或者，

在所述浮层中嵌入预设的导航模块。

4.如权利要求1或2所述的方法，其特征在于，呈现其他页面部分，并将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置，包括：

根据系统默认配置中的第一预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第一预设坐标所表示的位置；或者，

根据用户配置信息中的第二预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第二预设坐标所表示的位置。

5.如权利要求1或2所述的方法，其特征在于，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置之后，进一步包括：

确定用户在设定时长内未使用所述浮层中嵌入的导航模块时，隐藏所述浮层。

6.一种页面呈现装置，其特征在于，包括：

第一呈现单元，用于接收页面浏览请求，并呈现第一界面，其中，所述第一界面为呈现相应页面部分时的初始界面；

设置单元，用于根据用户的输入指令确定用户指示浏览与所述页面部分同属同一页面但位于所述第一界面之外的其他页面部分时，设置一浮层，并在所述浮层中嵌入设定的导航模块；

第二呈现单元，用于呈现其他页面部分，并将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的指定位置。

7.如权利要求6所述的装置，其特征在于，所述设置单元具体用于：

根据用户的输入指令确定用户指示上拉或下拉所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示平移所述第一界面时，设置一浮层；或者，

根据用户的输入指令确定用户指示扩大或缩小所述第一界面时，设置一浮层。

8.如权利要求6或7所述的装置，其特征在于，所述设置单元具体用于：

在所述浮层中嵌入第一界面中包含的全部导航模块；或者，

在所述浮层中嵌入预设的导航模块。

9.如权利要求6或7所述的装置，其特征在于，所述第二呈现单元具体用于：

根据系统默认配置中的第一预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第一预设坐标所表示的位置；或者，

根据用户配置信息中的第二预设坐标，将所述浮层平移至当前用于呈现所述其他页面部分的当前界面中的所述第二预设坐标所表示的位置。

10.如权利要求6或7所述的装置，其特征在于，所述第二呈现单元进一步用于：

在将所述浮层平移至当前界面中的指定位置之后，确定用户在设定时长内未使用所述浮层中嵌入的导航模块时，隐藏所述浮层。

Images