CN107305462A - 一种界面切换方法及装置 - Google Patents

Abstract

本发明实施例提供了一种界面切换方法及装置，其中，所述方法包括：在接收到用户触发当前界面中预设区域产生的滑动指令时，获取所述滑动指令对应的滑动距离；判断所述滑动距离是否大于等于第一预设阈值；若所述滑动距离大于等于第一预设阈值，则在所述当前界面上展示并列排布的第一子界面和第二子界面，并在第一子界面上展示预设内容，在第二子界面上展示所述当前界面的原始内容。本发明能够在不影响当前界面显示的原始内容的情况下同时显示新的预设内容，而且在显示过程中通过动态方式展示预设的第一子界面，则本发明能够提高用户的使用体验，增加页面显示的灵动性。

Description

一种界面切换方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种界面切换方法及装置。

背景技术

侧边栏是应用程序(Application，简称APP)最常见的导航方式之一，很多必须但又不常用的功能导航都可以收缩在侧边栏里，不影响常规操作又能在必要时快速找到，甚至是推广的广告也可以放置于侧边栏中。左抽屉式的侧边栏是最常见的方式，右抽屉、全屏等变种侧边栏也相继的出现，侧边栏里的展示方式也越来越多样。

目前，用户点击或拖动终端上预设区域时，会激活预设的信息界面，使得该信息界面以侧边栏的形成展示，而信息界面展开时通常是横向匀速地出现。由此可见，现有的界面切换方式单一，不容易满足用户需求，不利于提升用户体验。

发明内容

针对现有技术的缺陷，本发明提供了一种界面切换方法及装置，通过动态方式展示预设的信息界面，提高用户的使用体验，增加页面显示的灵动性。

第一方面，本发明提供了一种界面切换方法，所述方法包括：

在接收到用户触发当前界面中预设区域产生的滑动指令时，获取所述滑动指令对应的滑动距离；

判断所述滑动距离是否大于等于第一预设阈值；

若所述滑动距离大于等于第一预设阈值，则在所述当前界面上展示并列排布的第一子界面和第二子界面，并在第一子界面上展示预设内容，在第二子界面上展示所述当前界面的原始内容。

优选地，所述方法还包括：

若所述滑动距离小于第一预设阈值，则判断所述滑动距离是否大于等于第二预设阈值；

若所述滑动距离大于等于第二预设阈值，则显示随着所述滑动距离变化的动态图形。

优选地，所述方法还包括：

若所述滑动距离小于第二预设阈值，则收起所述动态图形。

优选地，所述动态图形为可缩放矢量图形SVG椭圆弧，所述椭圆弧为半径与所述滑动距离实时匹配的动态变化弧线。

优选地，所述展示并列排布的第一子界面和第二子界面，包括：

确定第一子界面和第二子界面的分界线；

根据所述分界线，控制所述第一子界面的部分边界逐渐向所述分界线移动，直至完全重合。

优选地，所述方法还包括：

在接收到用户触发所述第二子界面的非操作区域产生的指令时，隐藏所述第一子界面。

第二方面，本发明提供了一种界面切换装置，所述装置包括：

获取单元，用于在接收到用户触发当前界面中预设区域产生的滑动指令时，获取所述滑动指令对应的滑动距离；

第一判断单元，用于判断所述滑动距离是否大于等于第一预设阈值；

第一显示单元，用于在所述滑动距离大于等于第一预设阈值时，在所述当前界面上展示并列排布的第一子界面和第二子界面，并在第一子界面上展示预设内容，在第二子界面上展示所述当前界面的原始内容。

优选地，所述装置还包括：

第二判断单元，用于在所述滑动距离小于第一预设阈值时，判断所述滑动距离是否大于等于第二预设阈值；

第二显示单元，用于在所述滑动距离大于等于第二预设阈值时，显示随着所述滑动距离变化的动态图形。

优选地，所述装置还包括：

图形收起单元，用于在所述滑动距离小于第二预设阈值时，收起所述动态图形。

优选地，所述动态图形为可缩放矢量图形SVG椭圆弧，所述椭圆弧为半径与所述滑动距离实时匹配的动态变化弧线。

优选地，所述第一显示单元，具体用于：

确定第一子界面和第二子界面的分界线；

根据所述分界线，控制所述第一子界面的部分边界逐渐向所述分界线移动，直至完全重合。

优选地，所述装置还包括：

隐藏单元，用于在接收到用户触发所述第二子界面的非操作区域产生的指令时，隐藏所述第一子界面。

由上述技术方案可知，本发明提供一种界面切换方法及装置，通过在接收到用户触发预设区域的滑动指令时，判断滑动距离是否大于等于第一预设阈值，若是则在当前界面上展示并列排布的第一子界面和第二子界面，在第一界面上显示预设内容，同时在第二子界面上显示当前界面的原始内容，如此，本发明能够在不影响当前界面显示的原始内容的情况下，同时显示新的预设内容，有利于提高用户体验。而且在显示过程中通过动态方式展示预设的第一子界面，如此，本发明能够提高用户的使用体验，增加页面显示的灵动性。

附图说明

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

图1是本公开一实施例提供的一种界面切换方法的流程示意图；

图2是本公开另一实施例提供的一种界面切换方法的流程示意图；

图3是本公开另一实施例提供的界面切换方法中初始态的示意图；

图4是本公开另一实施例提供的界面切换方法中SVG椭圆弧展开时的示意图；

图5是本公开另一实施例提供的界面切换方法中SVG椭圆弧完全展开时的示意图；

图6是本公开另一实施例提供的界面切换方法中第一子界面完全展开时的示意图；

图7是本公开一实施例提供的一种界面切换装置的结构示意图；

图8是本公开另一实施例提供的一种界面切换装置的结构示意图。

具体实施方式

下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

图1是本公开一实施例提供的一种界面切换方法的流程示意图，如图1所示，所述方法包括如下步骤：

S1：在接收到用户触发当前界面中预设区域产生的滑动指令时，获取所述滑动指令对应的滑动距离。

可理解地，所述当前界面即为终端的当前显示界面。当前界面的预设区域可为显示界面边缘区域，本实施例对此不加以限制。

在实际应用中，当前界面的预设区域即为触控区域，可包括：预设形状的可视化区域和透明区域，如图3所示的sidebar即为预设形状的可视化区域，用户触碰所述可视化区域或者透明区域并拖动时产生滑动指令，以显示第一子界面。可理解地，侧边栏，即可触控区域可以是显示界面的左、上、右、下方向，本实施例对此不加以限制。

需要说明的是，在获取所述滑动指令对应的滑动距离之前，该方法还包括如下步骤：判断所述操作指令的滑动方向是否符合预设的滑动方向，若符合则执行获取所述滑动指令对应的滑动距离的步骤。

S2：判断所述滑动距离是否大于等于第一预设阈值。

具体来说，第一预设阈值，即为第一子界面与第二子界面的分界线处与初始位置间的差值。举例来说，第一预设阈值可设置为150mm。

S3：若所述滑动距离大于等于第一预设阈值，则在所述当前界面上展示并列排布的第一子界面和第二子界面，并在第一子界面上展示预设内容，在第二子界面上展示所述当前界面的原始内容。

举例来说，如图3所示，在第一子界面未被触发且显示之前，当前界面上显示的原始内容为main content。而如图6所示，当滑动距离大于等于第一预设阈值，第一子界面sidebar显示预设的内容，而第二子界面则显示上述当前界面的原始内容main content。

由此可见，本实施例中的界面切换方法，通过在接收到用户触发预设区域的滑动指令时，判断滑动距离是否大于等于第一预设阈值，若是则在当前界面上展示并列排布的第一子界面和第二子界面，在第一界面上显示预设内容，同时在第二子界面上显示当前界面的原始内容，如此，本实施例中的界面切换方法能够在不影响当前界面显示的原始内容的情况下，同时显示新的预设内容，有利于提高用户体验。

进一步地，如图2所示，步骤S2之后，所述方法还包括如下步骤：

S4：若所述滑动距离小于第一预设阈值，则判断所述滑动距离是否大于等于第二预设阈值。

S5：若所述滑动距离大于等于第二预设阈值，则显示随着所述滑动距离变化的动态图形。

具体来说，在用户滑动时的滑动距离小于第一预设阈值且大于等于第二预设阈值时，控制sidebar以随着滑动距离变化的动态图形。举例来说，第一预设阈值可设置为150mm，第二预设阈值可设置为40mm。

由此可见，本实施例中在滑动过程中且滑动距离并未达到第一预设阈值时，通过动态方式展示预设的第一子界面，如此，本实施例中的界面切换方法能够提高用户的使用体验，增加页面显示的灵动性。

在本公开的一个可选实施例中，如图4所示，步骤S5中的所述动态图形可为：可缩放矢量图形SVG椭圆弧，且所述椭圆弧为半径与所述滑动距离实时匹配的动态变化弧线。

举例来说，椭圆弧的半径为滑动距离的1/2，随着滑动距离的变化为实时变化。

进一步地，基于上述实施例，步骤S4之后，所述方法还包括如下步骤：

若所述滑动距离小于第二预设阈值，则收起所述动态图形。

举例来说，当用户停止拖动时，滑动距离小于40mm，则收起上述动态图形，恢复至初始状态。如此，只有当滑动距离大于等于第二预设阈值时，才显示动态图形，直至最终展示第一子界面及第二子界面，则能够防止用户误触发。

在本公开的一个可选实施例中，上述步骤S3中的所述展示并列排布的第一子界面和第二子界面的步骤，具体可包括如下子步骤：

S31：确定第一子界面和第二子界面的分界线。

S32：根据所述分界线，控制所述第一子界面的部分边界逐渐向所述分界线移动，直至完全重合。

举例来说，当滑动距离大于等于第二预设阈值，且逐渐增大至第一预设阈值时，如图5所示，分界线即为200处，SVG椭圆弧半径增大至与分界线相切时，该椭圆弧的弧线进一步向分界线移动，直至弧线与分界线完全重合，如图6所示。如此，实现了SVG椭圆弧到预设第一子界面的平缓过渡。

在本公开的一个可选实施例中，在所述步骤S3之后，所述方法还包括如下步骤：

在接收到用户触发所述第二子界面的非操作区域产生的指令时，隐藏所述第一子界面。

具体地，当用户点击或触碰第二子界面的非操作区域时，第一子界面迅速收起，且恢复至初始状态。举例来说，用户点击第二子界面的非操作区时，用户信息侧边栏(第一子界面)还原初始态。还原过程中，svg椭圆弧半径按原来变化过程逆向变化，即svg椭圆弧半径值逐渐变小到初始值，侧边栏中的预设信息隐藏。如此，第一子界面的关闭也十分便利，有利于提升用户体验。

为了更清楚地说明本公开的技术方案，下面通过一个较为具体的实施例来说明一种界面切换方法。

本实施例中的界面切换方法，具体包括如下步骤：

步骤一：显示初始态。

如图3所示，用户无操作时。终端的显示界面处于初始态。左侧侧边栏是50x500的svg区块，对应第一子界面，并且和中间原始内容main content无CSS定位相对关系。

步骤二：用户拖拽可操作区(第二信息面板的收起态)，在拖动过程中，计算在X轴方向的移动距离，并且修改椭圆的半径大小。

如图4所示，其中，用户拖拽左侧可拖拽区时，记录用户触碰开始(touchstart)时的x值startX。当用户拖着移动时，动态计算touchmove的x值touchX，它们之间的差值diffX：

diffX＝touchX-startX；

同时，限定用户拖拽的区域是0-300，即：

if(diffX<0)diffX＝0；

if(diffX>300)diffX＝300；

另外，diffX的1/2为svg椭圆弧的x轴半径大小：

curX＝Math.floor(diffX/2)；

var d＝$path.attr("d"),

$path.attr(‘d’,d.replace(/\ba(\d+),(\d+)\b/gi,"a"+curX+","+0)。

步骤三：用户停止拖拽，判断手指在X轴方向的移动距离是否达到预设的阈值大小，如果达到则第一子界面经过动画展示全部信息。

如图5所述，判断手指在X轴方向的移动距离是否达到第一预设阈值大小，若大于，椭圆弧的半径逐渐增大，直至达到第二预设阈值，即300处，显示第一子界面。

其中，第一预设阈值可设置为40，则：

如果滑动距离diffX小于40，则回到初始位置。

如果滑动距离diffX大于40，则开始动画，直至达到第二预设阈值，即最终位置，显示最终的第一子界面，如图6。

由此可见，本实施例中，当用户无操作时，显示界面处于初始态，展示当前界面，用户侧边栏(第一子界面)处于收起的状态。当用户拖动当前界面中第一子界面对应的可操作区域时，达到预定的横向坐标差值阈值(第一预设阈值)，装置切换到拖动态，根据用户横向坐标差值阈值，动态修改svg椭圆弧的半径值。第一子界面随svg右侧半圆弧出现，用户拖动结束，判断横向坐标差值是否达到预设阀值(第二预设阈值)，是则第一子界面处于激活态。至此，用户信息侧边栏(第一子界面)全部展示。

图7时本公开一实施例提供的一种界面切换装置的结构示意图，如图7所示，所述装置包括：获取单元701、第一判断单元702、第一显示单元703。其中：

获取单元701，用于在接收到用户触发当前界面中预设区域产生的滑动指令时，获取所述滑动指令对应的滑动距离；

第一判断单元702，用于判断所述滑动距离是否大于等于第一预设阈值；

第一显示单元703，用于在所述滑动距离大于等于第一预设阈值时，在所述当前界面上展示并列排布的第一子界面和第二子界面，并在第一子界面上展示预设内容。

由此可见，本实施例中的界面切换装置，通过获取单元701在接收到用户触发预设区域的滑动指令时确定滑动距离，第一判断单元702判断滑动距离是否大于等于第一预设阈值，若是，则通过第一显示单元在当前界面上展示并列排布的第一子界面和第二子界面，在第一界面上显示预设内容，同时在第二子界面上显示当前界面的原始内容，如此，本实施例中的界面切换装置能够在不影响当前界面显示的原始内容的情况下，同时显示新的预设内容，有利于提高用户体验。

在本公开的一个可选实施例中，如图8所示，本实施例中的界面切换装置处了包括上述各单元，还包括：第二判断单元704及第二显示单元705。其中：

第二判断单元704，用于在所述滑动距离小于第一预设阈值时，判断所述滑动距离是否大于等于第二预设阈值；

第二显示单元705，用于在所述滑动距离大于等于第二预设阈值时，显示随着所述滑动距离变化的动态图形。

由此可见，本实施例中第二判断单元704判断在滑动过程中且滑动距离并未达到第一预设阈值时，第二显示单元705通过动态方式展示预设的第一子界面，如此，本实施例中的界面切换装置能够提高用户的使用体验，增加页面显示的灵动性。

进一步地，处了上述实施例中的各单元，所述装置还包括：

图形收起单元，用于在所述滑动距离小于第二预设阈值时，收起所述动态图形。

举例来说，本实施例中的所述动态图形为可缩放矢量图形SVG椭圆弧，所述椭圆弧为半径与所述滑动距离实时匹配的动态变化弧线。

在本公开的一个可选实施例中，所述第一显示单元703，具体用于：

确定第一子界面和第二子界面的分界线；根据所述分界线，控制所述第一子界面的部分边界逐渐向所述分界线移动，直至完全重合。

在本公开的一个可选实施例中，除了上述实施例中的各单元，本实施例中的界面切换装置还包括：

隐藏单元，用于在接收到用户触发所述第二子界面的非操作区域产生的指令时，隐藏所述第一子界面。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

应当注意的是，在本公开的系统的各个部件中，根据其要实现的功能而对其中的部件进行了逻辑划分，但是，本公开不受限于此，可以根据需要对各个部件进行重新划分或者组合，例如，可以将一些部件组合为单个部件，或者可以将一些部件进一步分解为更多的子部件。

本公开的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本公开实施例的系统中的一些或者全部部件的一些或者全部功能。本公开还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本公开的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本公开进行说明而不是对本公开进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本公开可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

以上实施方式仅适于说明本公开，而并非对本公开的限制，有关技术领域的普通技术人员，在不脱离本公开的精神和范围的情况下，还可以做出各种变化和变型，因此所有等同的技术方案也属于本公开的范畴，本公开的专利保护范围应由权利要求限定。

Claims (12)

1.一种界面切换方法，其特征在于，所述方法包括：

在接收到用户触发当前界面中预设区域产生的滑动指令时，获取所述滑动指令对应的滑动距离；

判断所述滑动距离是否大于等于第一预设阈值；

若所述滑动距离大于等于第一预设阈值，则在所述当前界面上展示并列排布的第一子界面和第二子界面，并在第一子界面上展示预设内容，在第二子界面上展示所述当前界面的原始内容。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

若所述滑动距离小于第一预设阈值，则判断所述滑动距离是否大于等于第二预设阈值；

若所述滑动距离大于等于第二预设阈值，则显示随着所述滑动距离变化的动态图形。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

若所述滑动距离小于第二预设阈值，则收起所述动态图形。

4.根据权利要求2所述的方法，其特征在于，所述动态图形为可缩放矢量图形SVG椭圆弧，所述椭圆弧为半径与所述滑动距离实时匹配的动态变化弧线。

5.根据权利要求1所述的方法，其特征在于，所述展示并列排布的第一子界面和第二子界面，包括：

确定第一子界面和第二子界面的分界线；

根据所述分界线，控制所述第一子界面的部分边界逐渐向所述分界线移动，直至完全重合。

6.根据权利要求1～5中任一项所述的方法，其特征在于，所述方法还包括：

在接收到用户触发所述第二子界面的非操作区域产生的指令时，隐藏所述第一子界面。

7.一种界面切换装置，其特征在于，所述装置包括：

获取单元，用于在接收到用户触发当前界面中预设区域产生的滑动指令时，获取所述滑动指令对应的滑动距离；

第一判断单元，用于判断所述滑动距离是否大于等于第一预设阈值；

第一显示单元，用于在所述滑动距离大于等于第一预设阈值时，在所述当前界面上展示并列排布的第一子界面和第二子界面，并在第一子界面上展示预设内容，在第二子界面上展示所述当前界面的原始内容。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

第二判断单元，用于在所述滑动距离小于第一预设阈值时，判断所述滑动距离是否大于等于第二预设阈值；

第二显示单元，用于在所述滑动距离大于等于第二预设阈值时，显示随着所述滑动距离变化的动态图形。

9.根据权利要求8所述的装置，其特征在于，所述装置还包括：

图形收起单元，用于在所述滑动距离小于第二预设阈值时，收起所述动态图形。

10.根据权利要求8所述的装置，其特征在于，所述动态图形为可缩放矢量图形SVG椭圆弧，所述椭圆弧为半径与所述滑动距离实时匹配的动态变化弧线。

11.根据权利要求7所述的装置，其特征在于，所述第一显示单元，具体用于：

确定第一子界面和第二子界面的分界线；

根据所述分界线，控制所述第一子界面的部分边界逐渐向所述分界线移动，直至完全重合。

12.根据权利要求7～11中任一项所述的装置，其特征在于，所述装置还包括：

隐藏单元，用于在接收到用户触发所述第二子界面的非操作区域产生的指令时，隐藏所述第一子界面。