显示页面视差的方法、装置及移动终端与流程

本发明涉及移动终端技术领域，尤其是涉及一种显示页面视差的方法、装置及移动终端。

背景技术：

随着手机、平板等移动终端在人们生活中的重要性越来越大，如何给用户带来一款体验良好的应用程序一直是各应用商家的追求目标。

移动终端的应用程序的一应用场景如图1所示，应用程序的顶部显示菜单栏，在菜单栏下方的第一区域显示图片或动画，在位于第一区域下方的第二区域显示主要功能对应的内容。第一区域需占用一定的显示区域，但第一区域的功能用户并不经常使用到，因此，在用户使用常用的第二区域时，有必要缩减第一区域在页面的占比。

技术实现要素：

本发明旨在至少在一定程度上解决相关技术中的技术问题之一。为此，本发明的一个目的是提供一种显示页面视差的方法、装置及移动终端，以灵活调整显示区域的显示范围大小。

本发明所采用的技术方案是：

第一方面，本发明提供一种显示页面视差的方法，该方法包括：在移动终端的页面显示相邻的第一区域和第二区域；当接收到第一滑动操作时，扩大一个区域的显示范围，相应缩小另一个区域的显示范围。

其中，扩大一个区域的显示范围，相应缩小另一个区域的显示范围之后，还包括：在缩小区域缩小到预定的比例时，隐藏该缩小区域，使扩大区域占据该缩小区域。

其中，当缩小区域缩小到预定的比例时，隐藏该缩小区域，使扩大区域占据该缩小区域之后，还包括：在接收到与该第一滑动操作相反的第二滑动操作时，重新显示该缩小区域。

其中，扩大一个区域的显示范围，相应缩小另一个区域的显示范围，包括：设置缩小区域的透明度相应降低。

其中，扩大一个区域的显示范围，相应缩小另一个区域的显示范围，包括：如果扩大区域的显示层级高于缩小区域的显示层级，则使该缩小区域保持不动，该扩大区域逐渐遮盖该缩小区域；如果该扩大区域的显示层级等于该缩小区域的显示层级，则使该第一区域和该第二区域的分界线向该第一滑动操作方向移动。

第二方面，本发明提供一种显示页面视差的装置，该装置包括：初始显示模块，用于在移动终端的页面显示相邻的第一区域和第二区域；和滑动显示模块，用于当接收到第一滑动操作时，扩大一个区域的显示范围，相应缩小另一个区域的显示范围。

其中，该装置还包括：隐藏显示模块，用于在缩小区域缩小到预定的比例时，隐藏该缩小区域，使扩大区域占据该缩小区域。

其中，该装置还包括：恢复显示模块，用于在接收到与该第一滑动操作相反的第二滑动操作时，重新显示该缩小区域。

其中，该滑动显示模块包括：显示层级设置单元，用于分别设置扩大区域和缩小区域的显示层级；和滑动单元，用于如果扩大区域的显示层级高于缩小区域的显示层级，则使该缩小区域保持不动，该扩大区域逐渐遮盖该缩小区域；如果该扩大区域的显示层级等于该缩小区域的显示层级，则使该第一区域和该第二区域的分界线向该第一滑动操作方向移动。

第三方面，本发明提供一种移动终端，该移动终端包括如上述的装置。

本发明的实施例的技术方案通过采用使相邻的两个区域中的第一区域增大、第二区域缩小从而增大第二区域的可视化区域，克服现有技术中存在第一区域和第二区域固定不变的技术问题，实现了在用户常用的第二区域上显示更多内容，方便用户操作和浏览。

进一步地，本发明通过在第一区域缩小到一定的比例时，隐藏第一区域、仅显示第二区域，将第二区域的可视化区域设置为最大区域，从而进一步优化了显示布局，进而提高用户操作和浏览体验。

另外，本发明还通过采用在第一区域隐藏后，滑动显示页面向第二区域滑动，该第一区域重新显示，方便重新显示该第一区域。

本发明广泛应用于移动终端的页面显示。

附图说明

图1为移动终端的应用程序的一应用场景示意图；

图2是本发明显示页面视差方法的一实施例的流程示意图；

图3是图2的步骤s22的一应用实施例的结构示意图；

图4是图2的步骤s22的一实施例的流程示意图；

图5是图2的步骤s22的另一实施例的流程示意图；

图6是本发明显示页面视差方法的另一实施例的流程示意图；

图7是本发明显示页面视差方法的一应用实施例的初始页面示意图；

图8是图7的第一区域缩小10％的状态示意图；

图9是图7的第一区域缩小20％的状态示意图；

图10是图7的第一区域缩小50％的状态示意图；

图11是图7的第一区域缩小100％的状态示意图；

图12是图11的第一区域重新显示的状态示意图；

图13是本发明显示页面视差装置的一实施例的结构示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。本发明的基本构思是通过缩小其中一个区域的显示范围，相应增大另一个区域的显示范围，能灵活调整显示区域的显示范围。以下实施例以第一区域位于第二区域的下方，在显示页面上向上或向下滑动屏幕为例，详细说明本发明的实施方式。显然地，第一区域和第二区域也可以是其它排布关系，如左右排列；对应的，第一滑动操作可以是其它类型的滑动操作，如向左或向右滑动操作。下面结合说明书附图和具体实施方式对本发明做出详细说明。

实施例一：

请参阅图2，图2是本发明显示页面视差的方法的一实施例的流程示意图。如图2所示，该方法包括步骤：

s21：在移动终端的页面显示相邻的第一区域和第二区域；

其中，如图1所示，第二区域位于第一区域的下方。并且，假设第二区域的使用频繁度高于第一区域的使用频繁度，例如，第二区域用于展示网站的商品内容，第一区域用于展示网站的广告图片。

s22：当接收到第一滑动操作时，扩大一个区域的显示范围(第一区域或第二区域)，相应缩小另一个区域的显示范围(第二区域或第一区域)。

其中，第一滑动操作为在第一区域、第二区域向上或向下的滑动显示页面的滑动操作。在其他实施例中，如果第一区域和第二区域左右排列，则第一滑动操作也可以是在第一区域或第二区域向左或向右的滑动页面的滑动操作。第一滑动操作的滑动操作方向根据第一区域和第二区域的排列位置而进行调整。

在步骤s22中，如图3所示，图3相较于图1，第二区域的显示范围逐渐扩大，第一区域的显示范围相应逐渐减小，随着区域显示范围的缩小，该区域的下半部分显示的内容逐渐消失，相应的，随着区域显示范围的扩大，在该区域底部逐渐添加新的显示内容。

其中，步骤s22具有两种实现方式。

第一种实现方式，如图4所示，步骤s22包括如下子步骤：

s41：设置扩大区域的显示层级高于缩小区域的显示层级；

s42：使该缩小区域显示范围保持不动，该扩大区域显示范围增加并逐渐遮盖该缩小区域。

第二种实现方式，如图5所示，步骤s22包括如下子步骤：

s51：设置扩大区域的显示层级等于缩小区域的显示层级；

s52：使该第一区域和该第二区域的分界线向该第一滑动操作方向移动，缩小区域显示范围变小，扩大区域显示范围增加。

值得注意的是，步骤s22的上述两种实现方式在用户操作层面无区别。

在步骤s22中，设置该缩小区域的透明度相应降低，以降低该缩小区域的显示效果。当然，如果该缩小区域被恢复放大后，该缩小区域的透明度也随之恢复增加。通常用户利用第一滑动操作使得第二区域扩大时，用户浏览页面的注意力主要在第二区域，因此，通过降低第一区域的透明度，可以更加凸显第二区域的内容，便于用户浏览。

在本实施例中，通过采用使相邻的两个区域中的第二区域增大、第一区域缩小从而增大常用区域(第二区域)的显示范围，克服现有技术中存在第一区域和第二区域固定不变的技术问题，实现了在常用区域上显示更多内容，方便用户操作。

实施例二：

请参阅图6，图6是本发明显示页面视差的方法的另一实施例的流程示意图。如图6所示，该方法包括如下步骤：

s61：在移动终端的页面显示相邻的第一区域和第二区域；

其中，步骤s61与实施例的步骤s21相同。

s62：当接收到第一滑动操作时，扩大一个区域的显示范围，相应缩小另一个区域的显示范围；

s63：在缩小区域缩小到预定的比例时，隐藏该缩小区域，使扩大区域占据该缩小区域；

也就是说，页面显示区域全为第二区域。

s64：在接收到与该第一滑动操作相反的第二滑动操作时，重新显示该缩小区域。

其中，如果第一滑动操作方向为向上，则第二滑动操作方向为向下；第一滑动操作方向为向下，则第二滑动操作方向为向上；如果第一滑动操作方向为向左，则第二滑动操作方向为向右；第一滑动操作方向为向右，则第二滑动操作方向为向左。

具体地，图7至图12动态展示在步骤s61～步骤s64各个阶段，第一区域和第二区域的状态变化过程。

如图7所示，显示页面为初始状态，显示页面包括第一区域和第二区域，例如，第一区域用于播放视频或广告图片，第二区域用于展示当前页面功能，比如不同的商家链接入口、不同的产品链接入口。

如图8所示，在图7的页面向上滑动时，第一区域缩小10％，且透明度降低10％。

如图9所示，在图8的页面继续向上滑动，第一区域缩小20％，且透明度降低20％。

如图10所示，在图9的页面继续向上滑动，第一区域缩小50％，且透明度降低50％。

如图11所示，在图10的页面继续向上滑动，即第一区域缩小的比例达到50％之后，在显示页面进一步向上滑动时，第二区域吸顶，即，第一区域隐藏，第二区域占据第一区域的显示区域。用户浏览页面的注意力已经全部落在第二区域。因此，通过让第二区域吸顶，完全遮盖第一区域，占据全部显示页面，实现智能化的显示区域扩大操作，便于用户操作和浏览。

如图12所示，在图11的页面向下滑动时，第一区域重新显示。可选地，第一区域的显示区域为图7的原始第一区域显示范围的90％，第一区域的透明度为图7的原始第一区域透明度的90％。也可以将页面恢复显示第一区域和第二区域的最初位置和状态，即恢复为图7所示的位置，第一区域的透明度恢复为100％。

需要说明的是，在本实施例中，透明度表示该区域的显示亮度，透明度0％表示不透明，透明度100％表示完全透明。

在本实施例中，通过在第一区域缩小到一定的比例时，隐藏第一区域、仅显示第二区域，将第二区域的可视化区域设置为最大区域。另外，本发明在第一区域隐藏后，滑动显示页面向第二区域滑动，该第一区域重新显示。

实施例三：

请参阅图13，图13是本发明显示页面视差的装置的一实施例的流程示意图。如图13所示，该装置包括初始显示模块131、滑动显示模块132、隐藏显示模块133以及恢复显示模块134，其中，滑动显示模块132包括透明度设置单元1321、显示层级设置单元1322及滑动单元1323。

初始显示模块131，用于在移动终端的页面显示相邻的第一区域和第二区域。

滑动显示模块132，用于当接收到第一滑动操作时，扩大一个区域的显示范围，相应缩小另一个区域的显示范围。

隐藏显示模块133，用于在缩小区域缩小到预定的比例时，隐藏该缩小区域，使扩大区域占据该缩小区域。

恢复显示模块134，用于在接收到与该第一滑动操作相反的第二滑动操作时，重新显示该缩小区域。

透明度设置单元1321，用于设置该缩小区域的透明度，显示范围缩小透明度相应降低。

显示层级设置单元1322，用于分别设置扩大区域和缩小区域的显示层级。

滑动单元1323，用于根据设置的扩大区域和缩小区域的显示层级大小，执行相应显示策略，显示策略为：

如果扩大区域高于缩小区域的显示层级，则使该缩小区域保持不动，该扩大区域逐渐遮盖该缩小区域；

如果扩大区域等于缩小区域的显示层级，则使该第一区域和该第二区域的分界线向该第一滑动操作方向移动。

具体地，图13的各模块的工作方法在实施一中已详细阐述，在此不再赘述。

实施例四：

本发明还提供一种移动终端，该移动终端包括如实施例三所述的装置，用于执行如实施例一或实施例二所述的方法。

以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。