CN110119296A - 切换父页面和子页面的方法、相关装置 - Google Patents

Abstract

本申请公开了一种切换父页面和子页面的方法及相关装置。电子设备检测到用于从父页面切换至子页面的操作时，响应于该操作，电子设备由全屏显示父页面切换为在显示屏的第一侧叠加显示子页面的中间部分，并控制子页面逐渐向显示屏的第二侧移动，同时，增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。这样的从父页面切换至子页面的过程，可以缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

Description

切换父页面和子页面的方法、相关装置

技术领域

本申请涉及终端领域及计算机图形处理技术领域，特别涉及切换父页面和子页面的方法、相关装置。

背景技术

在使用手机、平板电脑等电子设备的过程中，用户在操作电子设备上安装的应用程序(application，APP)时，经常从父页面切换到子页面，或者从子页面切换到父页面。例如，用户在操控电子设备上安装的“联系人(contacts)”应用时，可以从“联系人(contacts)”应用提供的主页面切换到用于展示某个具体联系人的通讯录详情的页面。

目前，搭载安卓(Android)操作系统的电子设备在切换父子页面时，一般有两种切换方式。以从父页面切换至子页面为例进行说明：

现有方式一：子页面从屏幕底部往顶部移动显示的方式。这样的切换方式，用户的视觉移动路径为屏幕底部至顶部，该视觉移动路径较长，体验不佳。

现有方式二：子页面从屏幕右侧往左侧移动并变换透明度的显示方式。由于切换父子级页面是常用操作，耗费时长一般较短。这样的切换方式，用户可以看到父页面的残影，切换效果较突兀，体验不佳。

基于目前用户频繁切换父子页面的情况，有必要提出相应的技术方案，使得父子级页面的切换更加符合用户预期，给用户更好的视觉效果，从而提升用户体验。

发明内容

本申请提供了切换父页面和子页面的方法、相关装置，在从父页面切换至子页面时，缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

第一方面，本申请提供了切换父页面和子页面的方法，该方法应用于电子设备。该方法可包括：电子设备在显示屏上全屏显示应用程序提供的父页面；其中，该应用程序还提供子页面，父页面是子页面的上级页面，且，父页面和子页面的大小相同；电子设备检测到用于从父页面切换至子页面的操作，响应于用于从父页面切换至子页面的操作，电子设备自动执行以下步骤：

由全屏显示父页面切换为在显示屏的第一侧叠加显示子页面的中间部分，子页面的中间部分的高度与子页面的高度相同，子页面的中间部分的宽度小于子页面的宽度；

控制子页面逐渐向显示屏的第二侧移动，同时，逐渐增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上，其中，第二侧与第一侧相反。

实施第一方面的方法，用户可以看到子页面向第二侧移动并且子页面在显示屏上显示的部分逐渐增加，父页面在显示屏中显示的部分逐渐减少，直至子页面全屏显示在显示屏上。电子设备提供的这种从父页面切换至子页面的方式，符合用户预期，视觉效果自然，用户的视觉运动动线较短，可以给用户最优的使用体验。

结合第一方面，在一些实施例中，父页面中可包括一个或多个条目。该一个或多个条目可接收打开对应界面的操作(如触摸操作)。该从父页面切换至子页面的操作可以包括作用于该条目上的操作(例如触摸操作)。不限于作用于该条目上的操作，用于从父页面切换至子页面的操作还可以包括用户输入的语音指令等，本申请对此不做限制。

结合第一方面，本申请对子页面的中间部分的面积大小不做限制。在一些实施例中，子页面的中间部分不包含子页面两侧的边缘。

结合第一方面，在一些实施例中，显示屏的第一侧为显示屏的右侧，显示屏的第二侧为显示屏的左侧。也就是说，在第一方面提供的从父页面切换至子页面的方法中，子页面向显示屏的左侧移动并且子页面在显示屏上显示的内容逐渐增加，直至子页面全屏显示在显示屏上。

结合第一方面，在一些实施例中，电子设备可以逐渐往第一侧和第二侧增加子页面在显示屏上显示的部分。具体的，电子设备增加子页面在显示屏上显示的部分时有以下几种策略：

1.电子设备首先往第一侧增加子页面在显示屏上显示的部分，再往第二侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

2.电子设备首先往第二侧增加子页面在显示屏上显示的部分，再往第一侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

3.电子设备同时往第一侧和第二侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

电子设备通过上述任意一种策略来增加子页面在显示屏上显示的部分，从而从父页面切换至子页面时，都可以增加父子页面切换时的趣味性。

结合第一方面，在一些实施例中，电子设备在从父页面切换到子页面的过程中，还可以提示用户当前正在从父页面切换到子页面。该提示方式可以包括：

1.在电子设备检测到用于从父页面切换至子页面的操作之后，在子页面全屏显示在显示屏上之前，显示屏上的父页面和子页面的显示形式不同。该显示形式包括：背景颜色、透明度或者边框中的一项或多项。

2.电子设备在控制子页面逐渐向显示屏的第二侧移动的过程中，显示屏上显示的父页面的背景颜色逐渐变深，或者，显示屏上显示的父页面的透明度逐渐变高。

3.电子设备在控制子页面逐渐向显示屏的第二侧移动的过程中，显示屏上显示的子页面的透明度越来越低。

结合第一方面，在一些实施例中，电子设备在从父页面切换到子页面的过程中，显示屏上显示的子页面通过遮罩实现。遮罩由遮罩层和被遮罩层组成。遮罩层和被遮罩层中只有相重叠的区域才能被显示在显示屏上，也就是说，用户只能看到遮罩层和被遮罩层重合的区域，其余区域对用户不可见。遮罩不影响显示屏中其他图层的显示。具体的，响应于用于从父页面切换至子页面的操作，电子设备还可自动执行以下步骤：生成遮罩，遮罩由遮罩层和子页面组成；控制遮罩层和子页面向显示屏的第二侧移动；其中，子页面和遮罩层相重叠并且位于显示屏内的部分，为，显示屏上显示的子页面的部分。在一些实施例中，遮罩层和子页面向显示屏的第二侧移动的过程为减速运动过程。减速运动过程可以使得从父页面切换至子页面的过程更加符合用户预期。

结合第一方面，在一些实施例中，在子页面全屏显示在显示屏上之后，电子设备还可从子页面切换回父页面。具体的，本申请中可通过以下两种方式从子页面切换回父页面：

1、第一种方式：在子页面全屏显示在显示屏上之后，电子设备检测到用于从子页面切换至父页面的操作，响应于用于从子页面切换至父页面的操作，电子设备自动执行以下步骤：由全屏显示子页面切换为在显示屏上显示父页面，并且，在显示屏的第一侧叠加显示子页面的一部分；该子页面的一部分的高度与子页面的高度相同，该子页面的一部分的宽度小于子页面的宽度；控制子页面逐渐向显示屏的第一侧移动，同时，逐渐减少子页面在显示屏上显示的部分，直至父页面全屏显示在显示屏上。

本申请对该子页面的一部分的面积大小不做限制。在一些实施例中，该子页面的一部分可以是子页面的中间部分。在一种具体的实施方式中，该子页面的一部分可以是第一方面中提及的子页面的中间部分，可参照相关描述。在另一些实施例中，该子页面的一部分也可以是子页面的左侧部分或者右侧部分。

在第一种方式中，子页面上可包括返回键，用于从子页面切换至父页面的操作可以包括作用于该返回键上的操作(例如触摸操作)。不限于作用于返回键上的操作，用于从子页面切换至父页面的操作还可以包括用户输入的语音指令等，本申请对此不做限制。

在一些实施例中，电子设备可以逐渐往第一侧和/或第二侧减少子页面在显示屏上显示的部分。具体的，电子设备减少子页面在显示屏上显示的部分时有以下几种策略：

(1)电子设备逐渐往第一侧减少子页面在显示屏上显示的部分，或者，电子设备逐渐往第二侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

(2)电子设备首先往第一侧减少子页面在显示屏上显示的部分，再往第二侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

(3)电子设备首先往第二侧减少子页面在显示屏上显示的部分，再往第一侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

(4)电子设备同时往第一侧和第二侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

电子设备通过上述任意一种策略来减少子页面在显示屏上显示的部分，从而从子页面切换至父页面时，都可以增加父子页面切换时的趣味性。

2、第二种方式：在子页面全屏显示在显示屏上之后，电子设备检测到用于从子页面切换至父页面的操作，响应于用于从子页面切换至父页面的操作，电子设备自动执行以下步骤：由全屏显示子页面切换为在显示屏上显示父页面，并且，在显示屏的第一侧叠加显示子页面的左侧部分；子页面的左侧部分的高度与子页面的高度相同，子页面的左侧部分的宽度小于子页面的宽度；控制子页面逐渐向显示屏的第一侧移动，同时，逐渐减少子页面在显示屏上显示的部分，直至父页面全屏显示在显示屏上。

本申请对子页面的左侧部分的面积大小不做限制。在一些实施例中，子页面的左侧部分包含子页面的左侧边缘。

在第二种方式中，用于从子页面切换至父页面的用户操作可包括：1.作用于显示屏上往第一侧的拖移手势；该拖移手势的持续时长大于预设时长。在一些实施例中，电子设备控制子页面逐渐向显示屏的第一侧移动的过程中，该子页面的移动速度由该拖移手势的移动速度决定。2.作用于显示屏上往第一侧的快速滑动手势，该快速滑动手势的持续时长小于预设时长。

在一些实施例中，电子设备在从子页面切换到父页面的过程中，还可以提示用户当前正在从子页面切换到父页面。该提示方式可以包括：

1.电子设备在控制子页面逐渐向显示屏的第一侧移动的过程中，以不同的显示形式显示该子页面和该父页面。页面的显示形式可包括：页面的背景颜色、页面的透明度或页面的边框等。

2.电子设备在控制子页面逐渐向显示屏的第一侧移动的过程中，显示屏上显示的父页面的背景颜色逐渐变浅，或者，该父页面的透明度越来越低。

3.电子设备在控制子页面逐渐向显示屏的第一侧移动的过程中，显示屏上显示的子页面的透明度越来越高。

在一些实施例中，电子设备在从子页面切换到父页面的过程中，显示屏上显示的子页面通过遮罩实现。具体的，响应于用于从子页面切换至父页面的操作，电子设备还可自动执行以下步骤：控制遮罩层和子页面向显示屏的第一侧移动；遮罩层和子页面组成遮罩，遮罩是由电子设备响应于用于从父页面切换至子页面的操作而生成的；其中，子页面和遮罩层相重叠并且位于显示屏内的部分，为，显示屏上显示的子页面的部分。在一些实施例中，遮罩层和子页面向显示屏的第一侧移动的过程为减速运动过程。减速运动过程可以使得从子页面切换至父页面的过程更加符合用户预期。

结合第一方面，在一些实施例中，该父页面和子页面均由联系人(contacts)应用提供。该父页面为联系人应用提供的用于展示电子设备存储的一个或多个联系人信息的用户界面，该子页面为联系人应用提供的用于展示第一联系人的通讯录详情的用户界面。

第二方面，本申请提供了一种电子设备，该电子设备可包括：一个或多个处理器、存储器和显示屏；

存储器、显示屏与一个或多个处理器耦合，存储器用于存储计算机程序代码，该计算机程序代码包括计算机指令，一个或多个处理器调用该计算机指令以使得电子设备执行：

在显示屏上全屏显示应用程序提供的父页面；其中，该应用程序还提供子页面，父页面是子页面的上级页面，且，父页面和子页面的大小相同；

检测到用于从父页面切换至子页面的操作，响应于用于从父页面切换至子页面的操作，自动执行以下步骤：

由全屏显示父页面切换为在显示屏的第一侧叠加显示子页面的中间部分，子页面的中间部分的高度与子页面的高度相同，子页面的中间部分的宽度小于子页面的宽度；

控制子页面逐渐向显示屏的第二侧移动，同时，逐渐增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上，其中，第二侧与第一侧相反。

第二方面的电子设备在从父页面切换至子页面时，可以使用户看到子页面向第二侧移动并且子页面在显示屏上显示的部分逐渐增加，父页面在显示屏中显示的部分逐渐减少，直至子页面全屏显示在显示屏上。这样的切换方式符合用户预期，视觉效果自然，用户的视觉运动动线较短，可以给用户最优的使用体验。

结合第二方面，在一些实施例中，父页面中可包括一个或多个条目。该一个或多个条目可接收打开对应界面的操作(如触摸操作)。该从父页面切换至子页面的操作可以包括作用于该条目上的操作(例如触摸操作)。不限于作用于该条目上的操作，用于从父页面切换至子页面的操作还可以包括用户输入的语音指令等，本申请对此不做限制。

结合第二方面，本申请对子页面的中间部分的面积大小不做限制。在一些实施例中，子页面的中间部分不包含子页面两侧的边缘。

结合第二方面，在一些实施例中，显示屏的第一侧为显示屏的右侧，显示屏的第二侧为显示屏的左侧。

结合第二方面，在一些实施例中，电子设备可以逐渐往第一侧和第二侧增加子页面在显示屏上显示的部分。具体的，电子设备增加子页面在显示屏上显示的部分时有以下几种策略：

1.电子设备首先往第一侧增加子页面在显示屏上显示的部分，再往第二侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

2.电子设备首先往第二侧增加子页面在显示屏上显示的部分，再往第一侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

3.电子设备同时往第一侧和第二侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

电子设备通过上述任意一种策略来增加子页面在显示屏上显示的部分，从而从父页面切换至子页面时，都可以增加父子页面切换时的趣味性。

结合第二方面，在一些实施例中，该一个或多个处理器还用于调用计算机指令以使得电子设备提示用户当前正在从父页面切换到子页面。该提示方式可以包括：

1.在电子设备检测到用于从父页面切换至子页面的操作之后，在子页面全屏显示在显示屏上之前，显示屏上的父页面和子页面的显示形式不同。该显示形式包括：背景颜色、透明度或者边框中的一项或多项。

2.电子设备在控制子页面逐渐向显示屏的第二侧移动的过程中，显示屏上显示的父页面的背景颜色逐渐变深，或者，显示屏上显示的父页面的透明度逐渐变高。

3.电子设备在控制子页面逐渐向显示屏的第二侧移动的过程中，显示屏上显示的子页面的透明度越来越低。

结合第二方面，在一些实施例中，电子设备通过遮罩实现在从父页面切换到子页面的过程中显示屏上显示的子页面。具体的，该一个或多个处理器还用于调用计算机指令以使得电子设备执行：响应于用于从父页面切换至子页面的操作，自动执行以下步骤：生成遮罩，遮罩由遮罩层和子页面组成；控制遮罩层和子页面向显示屏的第二侧移动；其中，子页面和遮罩层相重叠并且位于显示屏内的部分，为，显示屏上显示的子页面的部分。在一些实施例中，遮罩层和子页面向显示屏的第二侧移动的过程为减速运动过程。减速运动过程可以使得从父页面切换至子页面的过程更加符合用户预期。

结合第二方面，在一些实施例中，在子页面全屏显示在显示屏上之后，该一个或多个处理器还用于调用计算机指令以使得电子设备执行从子页面切换回父页面的过程。具体的，本申请中的电子设备从子页面切换回父页面的过程可包括以下两种：

1、第一种从子页面切换回父页面的过程：在子页面全屏显示在显示屏上之后，检测到用于从子页面切换至父页面的操作，响应于用于从子页面切换至父页面的操作，自动执行以下步骤：由全屏显示子页面切换为在显示屏上显示父页面，并且，在显示屏的第一侧叠加显示子页面的一部分；该子页面的一部分的高度与子页面的高度相同，该子页面的一部分的宽度小于子页面的宽度；控制子页面逐渐向显示屏的第一侧移动，同时，逐渐减少子页面在显示屏上显示的部分，直至父页面全屏显示在显示屏上。

本申请对该子页面的一部分的面积大小不做限制。在一些实施例中，该子页面的一部分可以是子页面的中间部分。在一种具体的实施方式中，该子页面的一部分可以是第一方面中提及的子页面的中间部分，可参照相关描述。在另一些实施例中，该子页面的一部分也可以是子页面的左侧部分或者右侧部分。

在第一种从子页面切换回父页面的过程中，子页面上可包括返回键，用于从子页面切换至父页面的操作可以包括作用于该返回键上的操作(例如触摸操作)。不限于作用于返回键上的操作，用于从子页面切换至父页面的操作还可以包括用户输入的语音指令等，本申请对此不做限制。

在一些实施例中，电子设备可以逐渐往第一侧和/或第二侧减少子页面在显示屏上显示的部分。具体的，电子设备减少子页面在显示屏上显示的部分时有以下几种策略：

(1)电子设备逐渐往第一侧减少子页面在显示屏上显示的部分，或者，电子设备逐渐往第二侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

(2)电子设备首先往第一侧减少子页面在显示屏上显示的部分，再往第二侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

(3)电子设备首先往第二侧减少子页面在显示屏上显示的部分，再往第一侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

(4)电子设备同时往第一侧和第二侧减少子页面在显示屏上显示的部分，直至子页面不再显示在显示屏上并且父页面全屏显示在显示屏上。

电子设备通过上述任意一种策略来减少子页面在显示屏上显示的部分，从而从子页面切换至父页面时，都可以增加父子页面切换时的趣味性。

2、第二种从子页面切换回父页面的过程：在子页面全屏显示在显示屏上之后，电子设备检测到用于从子页面切换至父页面的操作，响应于用于从子页面切换至父页面的操作，电子设备自动执行以下步骤：由全屏显示子页面切换为在显示屏上显示父页面，并且，在显示屏的第一侧叠加显示子页面的左侧部分；子页面的左侧部分的高度与子页面的高度相同，子页面的左侧部分的宽度小于子页面的宽度；控制子页面逐渐向显示屏的第一侧移动，同时，逐渐减少子页面在显示屏上显示的部分，直至父页面全屏显示在显示屏上。

本申请对子页面的左侧部分的面积大小不做限制。在一些实施例中，子页面的左侧部分包含子页面的左侧边缘。

在第二种从子页面切换回父页面的过程中，用于从子页面切换至父页面的用户操作可包括：1.作用于显示屏上往第一侧的拖移手势；该拖移手势的持续时长大于预设时长。在一些实施例中，电子设备控制子页面逐渐向显示屏的第一侧移动的过程中，该子页面的移动速度由该拖移手势时的移动速度决定。2.作用于显示屏上往第一侧的快速滑动手势，该快速滑动手势的持续时长小于预设时长。

在一些实施例中，该一个或多个处理器还用于调用计算机指令以使得电子设备提示用户当前正在从子页面切换到父页面。该提示方式可以包括：

1.电子设备在控制子页面逐渐向显示屏的第一侧移动的过程中，以不同的显示形式显示该子页面和该父页面。页面的显示形式可包括：页面的背景颜色、页面的透明度或页面的边框等。

2.电子设备在控制子页面逐渐向显示屏的第一侧移动的过程中，显示屏上显示的父页面的背景颜色逐渐变浅，或者，该父页面的透明度越来越低。

3.电子设备在控制子页面逐渐向显示屏的第一侧移动的过程中，显示屏上显示的子页面的透明度越来越高。

在一些实施例中，电子设备通过遮罩实现在从子页面切换到父页面的过程中显示屏上显示的子页面。具体的，该一个或多个处理器还用于调用计算机指令以使得电子设备执行：响应于用于从子页面切换至父页面的操作，自动执行以下步骤：控制遮罩层和子页面向显示屏的第一侧移动；遮罩层和子页面组成遮罩，遮罩是由电子设备响应于用于从父页面切换至子页面的操作而生成的；其中，子页面和遮罩层相重叠并且位于显示屏内的部分，为，显示屏上显示的子页面的部分。在一些实施例中，遮罩层和子页面向显示屏的第一侧移动的过程为减速运动过程。减速运动过程可以使得从子页面切换至父页面的过程更加符合用户预期。

结合第二方面，在一些实施例中，该父页面和子页面均由联系人(contacts)应用提供。该父页面为联系人应用提供的用于展示电子设备存储的一个或多个联系人信息的用户界面，该子页面为联系人应用提供的用于展示第一联系人的通讯录详情的用户界面。

第三方面，本申请提供了一种计算机存储介质，包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如第一方面提供的方法。

第四方面，本申请提供了一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如第一方面的方法。

第五方面，本申请提供了一种电子设备，包括用于执行上述第一方面的方法的功能单元。

实施本申请，电子设备在显示屏上全屏显示父页面时，检测到用于从父页面切换至子页面的操作，响应于该操作电子设备可以由全屏显示父页面切换为在显示屏的第一侧叠加显示子页面的中间部分，并控制子页面逐渐向显示屏的第二侧移动，同时，增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。这样的从父页面切换至子页面的过程，可以缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

附图说明

图1A是本申请提供的父页面的示例性示意图；

图1B是本申请提供的子页面的示例性示意图；

图2是本申请提供的遮罩示意图；

图3A是本申请提供的电子设备的结构示意图；

图3B是本申请提供的电子设备的软件结构框图；

图4是本申请提供的电子设备上的主界面示意图；

图5A-图5D是本申请提供的从父页面切换至子页面过程中涉及的人机交互示意图；

图6A-图6D是本申请提供的从父页面切换至子页面过程中涉及的图层运动示意图；

图7是本申请提供的一个贝塞尔曲线示意图；

图8A-图8D是本申请提供的一种从子页面切换至父页面过程中涉及的人机交互示意图；

图9A-图9D是本申请提供的另一种从子页面切换至父页面过程中涉及的人机交互示意图；

图10A-图10D是本申请提供的又一种从子页面切换至父页面过程中涉及的人机交互示意图；

图11是本申请涉及的手势示意图；

图12A-图12D是本申请提供的从子页面切换至父页面过程中涉及的图层运动示意图；

图13是本申请提供的另一个贝塞尔曲线示意图；

图14是本申请提供的电子设备在切换父子页面时，各个软件模块及硬件模块之间的交互流程示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

其中，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；本文中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，在本申请实施例的描述中，“多个”是指两个或多于两个。

以下，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。

本申请的说明书和权利要求书及附图中的术语“页面”也可以被称为“用户界面(user interface，UI)”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。应用程序的用户界面是通过java、可扩展标记语言(extensible markup language，XML)等特定计算机语言编写的源代码，界面源代码在终端设备上经过解析，渲染，最终呈现为用户可以识别的内容，比如图片、文字、按钮等控件。控件(control)也称为部件(widget)，是用户界面的基本元素，典型的控件有工具栏(toolbar)、菜单栏(menu bar)、文本框(text box)、按钮(button)、滚动条(scrollbar)、图片和文本。界面中的控件的属性和内容是通过标签或者节点来定义的，比如XML通过<Textview>、<ImgView>、<VideoView>等节点来规定界面所包含的控件。一个节点对应界面中一个控件或属性，节点经过解析和渲染之后呈现为用户可视的内容。此外，很多应用程序，比如混合应用(hybrid application)的界面中通常还包含有网页。网页可以理解为内嵌在应用程序界面中的一个特殊的控件，网页是通过特定计算机语言编写的源代码，例如超文本标记语言(hyper text markup language，HTML)，层叠样式表(cascadingstyle sheets，CSS)，java脚本(JavaScript，JS)等，网页源代码可以由浏览器或与浏览器功能类似的网页显示组件加载和显示为用户可识别的内容。网页所包含的具体内容也是通过网页源代码中的标签或者节点来定义的，比如HTML通过<p>、<img>、<video>、<canvas>来定义网页的元素和属性。

用户界面常用的表现形式是图形用户界面(graphic user interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。

本申请以下实施例提供了一种切换父页面和子页面的方法、相关装置，该切换父页面和子页面的方法可包括：从父页面切换至子页面的方法，以及，从子页面切换至父页面的方法。以从父页面切换至子页面为例，当电子设备检测到用户输入的用于从父页面切换至子页面的操作时，电子设备在显示屏上显示子页面，该子页面从显示屏右侧边缘平移滑动至左侧边缘，直至全屏显示在显示屏上。这样的切换方式，可以缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

在本申请以下实施例中，父页面和子页面是电子设备中的应用程序运行时所涉及的相对概念。父页面和子页面通常由同一个应用程序所提供。父页面和子页面的大小相同，即父页面的高度和子页面的高度相同且父页面的宽度和子页面的宽度相同。本领域技术人员可以理解，一个页面的逻辑父页面是固定的，在应用程序设计时便已确定。一个页面作为父页面时，可对应有多个子页面；一个页面作为子页面时，仅对应有一个父页面。在一些可能的实施方式中，若应用程序提供的某一页面可以通过返回键(该应用程序提供的APP级返回键或者系统导航栏提供的返回键)，切换到显示另一页面，则该页面和另一页面可以组成父子页面，该页面为子页面，另一页面为父页面。

在本申请以下实施例中，父页面、子页面均由电子设备中安装的应用程序提供，并且不包括电子设备的操作系统所提供的系统级别的界面元素。系统级别的界面元素可包括但不限于：状态栏、导航栏、悬浮导航球等等。

举例来说，“联系人(contacts)”应用提供的用户界面中，用于展示已存储的一个或多个联系人信息的主页面可以为父页面，用于展示任意一个具体联系人的通讯录详情的页面可以为子页面。参见图1A，其示出了电子设备提供的用户界面11，该用户界面11中包括：状态栏、用于展示电子设备存储的一个或多个联系人信息的用户界面(即父页面)。参见图1B，其示出了电子设备提供的用户界面12，该用户界面12中包括：状态栏、用于展示任意一个具体联系人的通讯录详情的用户界面(即子页面)。其中，用于展示电子设备已存储的一个或多个联系人信息的主页面(即父页面)、用于展示任意一个具体联系人的通讯录详情的页面(即子页面)均由“联系人(contacts)”应用提供，状态栏由电子设备的操作系统提供。

再举例来说，“微信(WeChat)”应用提供的用户界面中，用于展示最近联系人的页面可以为父页面，用于展示用户和最近联系人中的一个具体联系人的聊天详情的页面可以为子页面。类似的，用于展示用户和最近联系人中的一个具体联系人的聊天详情的页面也可以为父页面，用于设置用户和该具体联系人的聊天背景、聊天消息的提示方式等等的页面可以为子页面。

可以理解的是，“父页面”、“子页面”只是本申请实施例中所使用的一个词语，其代表的含义在本申请实施例中已经记载，其名称并不能对本申请构成任何限制。另外，在本申请其他一些实施例中，“父页面”也可以被称为例如“上一级页面”“N级界面(例如一级界面)”等其他名词。同样的，在本申请其他一些实施例中，“子页面”也可以被称为例如“下一级页面”“N+1级界面(例如二级界面)”等其他名词。N为大于等于1的正整数。

本申请实施例提供的从父页面切换至子页面的方法中，电子设备首先显示父页面，当电子设备检测到用户从父页面切换到子页面的操作时，电子设备生成遮罩(mask)，该遮罩由遮罩层和被遮罩层(即子页面)组成，该遮罩使得子页面的部分区域可以覆盖并且不透明地显示在父页面的右侧区域；遮罩层和被遮罩层以相同或不同的速度往屏幕左侧移动，直至显示屏全屏显示该子页面。在此过程中用户可以看到子页面从屏幕右侧边缘往左侧边缘移动显示，直至该子页面被全屏显示在显示屏上。

类似的，在本申请实施例提供的从子页面切换至父页面的方法中，电子设备首先显示子页面，当电子设备检测到用户从子页面切换到父页面的操作时，电子设备生成父页面以及遮罩(mask)，该遮罩由遮罩层和被遮罩层(即子页面)组成；该遮罩使得子页面的部分区域可以覆盖并且不透明地显示在父页面的右侧区域；遮罩层和被遮罩层以相同或不同的速度往屏幕右侧移动，直至显示屏全屏显示该父页面。在此过程中用户可以看到子页面从屏幕左侧边缘往右侧边缘移动显示，直至子页面不再显示在显示屏上、父页面被全屏显示在显示屏上。

本申请实施例提供的父子页面的切换方式，可以缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

在本申请实施例中，遮罩(mask)是由至少两个图层形成的组合，最上面的一个图层被称为遮罩层，下面的图层被称为被遮罩层。参见图2，图2示出了遮罩(mask)的示意图。如图2所示，遮罩层和被遮罩层中只有相重叠的区域才能被显示在显示屏上，也就是说，用户只能看到遮罩层和被遮罩层重合的区域，其余区域对用户不可见。在本申请实施例中，图层是指含有文字或图形等元素的胶片。一个或多个图层可以叠加组合形成显示屏上显示的用户界面。

在本申请以下实施例中，电子设备全屏显示父页面或子页面可以包括以下任意一种情况：1.该父页面或子页面可以占用显示屏的全部显示区域。2.该父页面或子页面仅占用显示屏的部分显示区域。例如，当电子设备的显示屏为异形切割屏(Notch屏)时，异形切割屏的中间部分显示该父页面或子页面，一侧或两侧边缘部分黑屏时，也可看作显示屏全屏显示该父页面或子页面。又例如，电子设备在显示父页面或子页面的同时，还同时显示有系统级别的界面元素(例如状态栏、导航栏、悬浮导航球等等)时，也可看做显示屏全屏显示该父页面或子页面。

下面，首先介绍本申请实施例中涉及的电子设备。本申请对提及的电子设备的类型不做具体限定，电子设备可以为手机、平板电脑、个人数字助理(personal digitalassistant，PDA)、可穿戴设备、膝上型计算机(laptop)等便携式电子设备。便携式电子设备的示例性实施例包括但不限于搭载iOS、android、microsoft或者其他操作系统的便携式电子设备。上述便携式电子设备也可以是其他便携式电子设备，诸如具有触敏表面(例如触控面板)的膝上型计算机(laptop)等。还应当理解的是，在本申请其他一些实施例中，电子设备也可以不是便携式电子设备，而是具有触敏表面(例如触控面板)的台式计算机，或者是智能电视机等。

参见图3A，图3A示出了本申请实施例提供的示例性电子设备100的结构示意图。

如图3A所示，电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K，充电器，闪光灯，摄像头193等。例如：处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。

I2S接口可以用于音频通信。在一些实施例中，处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合，实现处理器110与音频模块170之间的通信。在一些实施例中，音频模块170可以通过I2S接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。

PCM接口也可以用于音频通信，将模拟信号抽样，量化和编码。在一些实施例中，音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中，音频模块170也可以通过PCM接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。

UART接口是一种通用串行数据总线，用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中，UART接口通常被用于连接处理器110与无线通信模块160。例如：处理器110通过UART接口与无线通信模块160中的蓝牙模块通信，实现蓝牙功能。在一些实施例中，音频模块170可以通过UART接口向无线通信模块160传递音频信号，实现通过蓝牙耳机播放音乐的功能。

MIPI接口可以被用于连接处理器110与显示屏194，摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)，显示屏串行接口(displayserial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。

GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号，也可被配置为数据信号。在一些实施例中，GPIO接口可以用于连接处理器110与摄像头193，显示屏194，无线通信模块160，音频模块170，传感器模块180等。GPIO接口还可以被配置为I2C接口，I2S接口，UART接口，MIPI接口等。

USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。

可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。

电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。

电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。

无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)，通用分组无线服务(general packet radio service，GPRS)，码分多址接入(codedivision multiple access，CDMA)，宽带码分多址(wideband code division multipleaccess，WCDMA)，时分码分多址(time-division code division multiple access，TD-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidounavigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellitesystem，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。

电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。

摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。

数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。

视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。

NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。

外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。处理器110通过运行存储在内部存储器121的指令，和/或存储在设置于处理器中的存储器的指令，执行电子设备100的各种功能应用以及数据处理。

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。

扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。

受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。

耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。

压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。

陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即，x，y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。

气压传感器180C用于测量气压。在一些实施例中，电子设备100通过气压传感器180C测得的气压值计算海拔高度，辅助定位和导航。

磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中，当电子设备100是翻盖机时，电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态，设置翻盖自动解锁等特性。

加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。

距离传感器180F，用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中，拍摄场景，电子设备100可以利用距离传感器180F测距以实现快速对焦。

接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定电子设备100附近有物体。当检测到不充分的反射光时，电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话，以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式，口袋模式自动解锁与锁屏。

环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。

指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。

温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。

触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。

骨传导传感器180M可以获取振动信号。在一些实施例中，骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏，接收血压跳动信号。在一些实施例中，骨传导传感器180M也可以设置于耳机中，结合成骨传导耳机。音频模块170可以基于所述骨传导传感器180M获取的声部振动骨块的振动信号，解析出语音信号，实现语音功能。应用处理器可以基于所述骨传导传感器180M获取的血压跳动信号解析心率信息，实现心率检测功能。

按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。

马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作，马达191也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，接收信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。

指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。

SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡，Micro SIM卡，SIM卡等。同一个SIM卡接口195可以同时插入多张卡。所述多张卡的类型可以相同，也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互，实现通话以及数据通信等功能。在一些实施例中，电子设备100采用eSIM，即：嵌入式SIM卡。eSIM卡可以嵌在电子设备100中，不能和电子设备100分离。

电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。

图3B是本申请实施例的电子设备100的软件结构框图。

分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。

应用程序层可以包括一系列应用程序包。

如图3B所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。

如图3B所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。

Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。

核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。

应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

下面结合捕获拍照场景，示例性说明电子设备100软件以及硬件的工作流程。

当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件所对应的控件。以该触摸操作是触摸单击操作，该单击操作所对应的控件为相机应用图标的控件为例，相机应用调用应用框架层的接口，启动相机应用，进而通过调用内核层启动摄像头驱动，通过摄像头193捕获静态图像或视频。

下面介绍本申请实施例提供的一些在电子设备100上实现的示例性图形用户界面。

图4示例性示出了电子设备100上的用于展示电子设备100安装的应用程序的示例性用户界面41。

用户界面41可包括：状态栏401，日历指示符402，天气指示符403，具有常用应用程序图标的托盘404，导航栏405，以及其他应用程序图标。其中：

状态栏401可包括：移动通信信号(又可称为蜂窝信号)的一个或多个信号强度指示符401A、运营商名称(例如“中国移动”)401B、无线高保真(wireless fidelity，Wi-Fi)信号的一个或多个信号强度指示符401C，电池状态指示符401D、时间指示符401E。

日历指示符402可用于指示当前时间，例如日期、星期几、时分信息等。

天气指示符403可用于指示天气类型，例如多云转晴、小雨等，还可以用于指示气温等信息。

具有常用应用程序图标的托盘404可展示：电话图标404A、联系人图标404B、短信图标404C、相机图标404D。

导航栏405可包括：返回键405A、主屏幕键405B、多任务键405C等系统导航键。当检测到用户点击返回键405A时，电子设备100可显示当前页面的上一个页面。当检测到用户点击主屏幕键405B时，电子设备100可显示主界面。当检测到用户点击多任务键405C时，电子设备100可显示用户最近打开的任务。各导航键的命名还可以为其他，本申请对此不做限制。不限于虚拟按键，导航栏405中的各导航键也可以实现为物理按键。

其他应用程序图标可例如：微信(Wechat)的图标406、QQ的图标407、推特(Twitter)的图标408、脸书(Facebook)的图标409、邮箱的图标210、云共享的图标211、备忘录的图标212、支付宝的图标213、图库的图标214、设置的图标215。用户界面41还可包括页面指示符216。其他应用程序图标可分布在多个页面，页面指示符216可用于指示用户当前浏览的是哪一个页面中的应用程序。用户可以左右滑动其他应用程序图标的区域，来浏览其他页面中的应用程序图标。

在一些实施例中，图4示例性所示的用户界面41可以为主界面(Home screen)。可以理解的是，图4仅仅示例性示出了电子设备100上的用户界面，不应构成对本申请实施例的限定。

下面以电子设备上安装的“联系人(contacts)”应用提供的用户界面为例，分别介绍本申请提供的从父页面切换至子页面的方法，和，从子页面切换至父页面的方法。

(一)从父页面切换至子页面的方法

在本申请实施例提供的从父页面切换至子页面的过程中，电子设备首先在显示屏上全屏显示父页面，然后在显示屏的第一侧叠加显示子页面并且往显示屏的第二侧移动子页面，在移动过程中该子页面在显示屏上显示的部分逐渐增加，直至该子页面全屏显示在显示屏上。其中，第一侧和第二侧相反。

图5A-图5D以电子设备上安装的“联系人(contacts)”应用为例，示出了本申请实施例提供的从父页面切换至子页面的过程示意图。“联系人(contacts)”是安装于智能手机、平板电脑等电子设备上的一款用于展示联系人信息的应用程序，本申请实施例对该应用程序的名称不做限制。

在图5A-图5D实施例中，用于展示一个或多个联系人条目的用户界面(也可以被称为“联系人主页”)，和，用于展示某个具体联系人的通讯录详情的用户界面组成一对父子页面。该用于展示一个或多个联系人条目的用户界面为父页面，用于展示某个具体联系人的通讯录详情的用户界面为子页面。

下面说明图5A示例性示出的UI实施例提供的用户界面51。该用户界面51可以是用户点击图4中的联系人图标404B打开的用户界面。

如图5A所示，电子设备可以在显示屏上全屏显示用户界面51。该用户界面51可包括：状态栏501、用于展示一个或多个联系人条目的用户界面(即父页面)。

状态栏501可参照图4所示用户界面41中的状态栏401，这里不再赘述。

用于展示一个或多个联系人条目的用户界面(即父页面)可包括：应用程序标题栏502、控件503、搜索框504、字母显示栏505、“群组”条目506、“名片夹”条目507、“我的名片”条目508、一个或多个联系人条目例如509A-509E、菜单510及控件511。

应用程序标题栏502可用于指示当前页面用于展示电子设备存储的一个或多个联系人信息。应用程序标题栏502的表现形式可以为文本信息“联系人”、图标或其他形式。

控件503可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以显示其他控件，例如用于设置联系人主页的控件等。

“群组”条目506可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以显示用户创建的一个或多个群组的信息。一个群组由一个或多个联系人组成。

“名片夹”条目507可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以显示已扫描(例如通过摄像头扫描)到的一个或多个纸质名片携带的信息。

“我的名片”条目508可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以显示用户创建的自己的名片的信息。

联系人条目用于展示电子设备存储的一个或多个联系人的信息，联系人的信息可包括头像、姓名、昵称、电话号码等。用于展示一个或多个联系人条目的用户界面中显示有多个联系人条目时，该多个联系人条目可以根据联系人的姓名首字母从“A”至“Z”的顺序，从上往下排列。用户可以上下滑动用户界面51中用于展示联系人条目的区域，从而查看更多的联系人条目。

联系人条目还可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以显示用于展示该条目对应的联系人的通讯录详情的页面。

菜单510中包括控件510A、控件510B和控件510C。用于展示一个或多个联系人条目的用户界面中显示的内容和菜单510中当前被选中的控件相关。如图5A所示，当前菜单510中控件510B被选中，用户界面51用于展示电子设备存储的一个或多个联系人条目。若控件510A被选中，即控件510A接收到用户操作(例如触摸操作)时，响应于检测到的该用户操作，电子设备可以显示拨号界面。若控件510C被选中，即控件510C接收到用户操作(例如触摸操作)时，响应于检测到的该用户操作，电子设备可以显示收藏的联系人的信息。

控件511可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以显示用于添加新联系人的界面。

如图5A所示，联系人条目509B可接收到用户操作(例如触摸操作)，响应于该用户操作，电子设备可在显示屏上全屏显示用于展示该联系人条目509B对应的联系人“Andy”的通讯录详情页面(即子页面)。电子设备在用户界面51的联系人条目509B上接收到的用户操作(例如触摸操作)为用于从父页面切换到子页面的用户操作。

图5D示出的用户界面54示出了联系人条目509B对应的联系人“Andy”的通讯录详情页面(即子页面)的一种实现方式。

如图5D所示，该用户界面54可包括：状态栏512、用于展示某个具体联系人的通讯录详情的用户界面(即子页面)。

状态栏512可参照图4所示用户界面41中的状态栏401，这里不再赘述。

用于展示某个具体联系人的通讯录详情的用户界面(即子页面)可包括：返回键513、联系人头像514、联系人姓名515、手机号码或座机号码显示区域516、控件517、控件518、来电铃声信息显示区域519、最近通话记录显示区域520、控件521A、控件521B和控件521C。

返回键513可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可返回显示用户界面51。

联系人头像514可以为电子设备存储的联系人(例如联系人“Andy”)的头像。

联系人姓名515可以为电子设备存储的联系人(例如联系人“Andy”)的姓名，例如文本信息“Andy”。

手机号码或座机号码显示区域516用于显示电子设备存储的联系人(例如联系人“Andy”)的手机号码或者座机号码。控件517可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以发起和该联系人的视频通话。控件518可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以显示和该联系人的短信聊天界面。

来电铃声信息显示区域519可以显示电子设备接收到该联系人发起的来电时所响应的铃声的信息。

最近通话记录显示区域520可以显示电子设备最近一次和该联系人通话的详细记录，该记录可包括通话时间、呼入/呼出、通话时长、来电号码等。该记录例如可以是图5D所示用户界面54中的文本信息“昨天11：30，呼入电话，34秒”。

控件521A可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可以收藏该联系人(例如联系人“Andy”)。

控件521B可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备显示编辑该联系人(例如联系人“Andy”)的信息的界面，该联系人的信息可包括头像、姓名、电话号码、座机号码等等。

控件521C可接收用户操作(例如触摸操作)，响应于检测到的该用户操作，电子设备可显示更多控件，例如用于删除该联系人的控件、将该联系人加入黑名单的控件等等。

在本申请实施例中，电子设备的显示屏从显示用户界面51切换到显示用户界面54的过程，即从父页面切换到子页面的过程，符合用户预期，视觉效果自然，用户的视觉运动动线较短，可以给用户最优的使用体验。

图5A-图5D示出了从用于展示一个或多个联系人条目的用户界面切换至用于展示某个具体联系人的通讯录详情的用户界面的过程，即从父页面切换至子页面的过程。

参考图5A-图5D，响应于在用户界面51中的联系人条目509B上检测到的用户操作，电子设备生成或者打开对应的子页面(即联系人“Andy”的通讯录详情页面)，并从显示屏右侧往左侧的方向移动显示该子页面，直至该子页面全屏显示在显示屏上。

图5B-图5D示出了在从显示屏右侧往左侧的方向移动显示子页面过程中的三个不同时间点上，电子设备在显示屏上提供的用户界面。

参考图5B示出的用户界面52，电子设备可以在显示屏的第一区域持续显示父页面的第一部分，在显示屏的第二区域显示子页面的第一部分。这里，图5B示出的用户界面52中，可以看作电子设备在显示屏的第二区域叠加显示子页面的第一部分。

在本申请实施例中，显示屏的第一区域为显示屏的左侧区域，显示屏的第二区域为显示屏的右侧区域。第一区域和第二区域互不重叠且组合形成显示屏的显示区域。在一种可能的实施方式中，参考图5B，该第一区域为显示屏的左半部分，该第二区域为显示屏的右半部分。在其他可能的实施方式中，第一区域或第二区域可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、半椭圆形或其他不规整形状等，例如第一区域也可以为显示屏的左上方的扇形区域等。

第一区域和第二区域在显示屏中的位置可以通过以下几种方式确定：1.第一区域和第二区域在显示屏中的位置可以由电子设备预先设置。例如，电子设备可以将显示屏的左半部分设置为第一区域，将显示屏的右半部分设置为第二区域。2.第一区域和第二区域在显示屏中的位置可以由用户根据自身喜好自主设置。例如，用户可以将显示屏的左半部分设置为第一区域，将显示屏的右半部分设置为第二区域。

在本申请实施例中，父页面的第一部分为父页面在显示屏的第一区域显示的部分。例如，参考图5B，该父页面的第一部分可以为父页面的左半部分。

在本申请实施例中，子页面的第一部分为子页面中的任意一部分。在一些实施例中，该子页面的第一部分可以为子页面的中间部分。在本申请实施例中，子页面的中间部分的高度与子页面的高度相同，子页面的中间部分的宽度小于子页面的宽度。本申请实施例对子页面的中间部分的面积大小不做限制。在一些实施例中，子页面的中间部分不包含子页面两侧的边缘。不限于子页面的中间部分，该子页面的第一部分还可以为子页面的左半部分、右半部分或其他任意部分。在本申请的一些实施例中，该子页面的第一部分可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、版椭圆形或其他不规整形状等，例如该子页面的第一部分也可以为子页面右上方的扇形部分等。

子页面的第一部分可以通过以下几种方式确定：1.子页面的第一部分可以由电子设备预先设置。例如，电子设备可以将子页面的中间部分设置为该子页面的第一部分。2.子页面的第一部分可以由用户根据自身喜好自主设置。例如，用户可以将子页面的左半部分设置为该子页面的第一部分。

在显示图5B所示用户界面52的一段时间(例如200毫秒)后，电子设备可以在显示屏上显示如图5C所示的用户界面53。

参考图5C，电子设备可以在显示屏的第三区域持续显示父页面的第二部分，在显示屏的第四区域显示子页面的第二部分。这里，图5C示出的用户界面53中，可以看作电子设备在显示屏的第四区域叠加显示子页面的第二部分。

在本申请实施例中，显示屏的第三区域为显示屏的左侧区域，该第三区域属于第一区域。显示屏的第四区域为显示屏的右侧区域，该第四区域包括第二区域。第三区域和第四区域互不重叠且组合形成显示屏的显示区域。示例性地，参考图5C，该第三区域可以为显示屏的左三分之一部分，该第四区域可以为显示屏的右三分之二部分。在本申请的一些实施例中，第三区域或第四区域可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、半椭圆形或其他不规整形状等，例如第四区域也可以为显示屏的右上方的扇形区域等。

在本申请实施例中，父页面的第二部分为父页面在显示屏的第三区域显示的部分。父页面的第二部分属于父页面的第一部分。例如，参考图5C，该父页面的第二部分可以为父页面的左三分之一部分。

在本申请实施例中，子页面的第二部分包括子页面的第一部分。例如，该子页面的第二部分可以为子页面的左三分之二部分。在本申请的一些实施例中，该子页面的第二部分可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、版椭圆形或其他不规整形状等，例如该子页面的第二部分也可以为子页面右上方的扇形部分等。

在显示图5C所示用户界面53的一段时间(例如200毫秒)后，电子设备可以在显示屏上显示如图5D所示的用户界面54。该用户界面54可参考前文实施例的相关描述，在此不再赘述。

在本申请的一些实施例中，电子设备在从父页面切换到子页面的过程中，还可以提示用户当前正在从父页面切换到子页面。该提示方式可以包括：1.电子设备在从父页面切换到子页面的过程中，在显示屏上同时显示有父页面和子页面时，以不同的显示形式显示该父页面和该子页面。页面的显示形式可包括：页面的背景颜色、页面的透明度或页面的边框等。示例性地，参考图5B及图5C，电子设备在显示屏上同时显示有父页面和子页面时，该父页面的背景颜色为浅黑色，子页面的背景颜色为白色。2.电子设备在从父页面切换到子页面的过程中，显示屏上显示的父页面的背景颜色逐渐变深，或者，该父页面的透明度越来越高。3.电子设备在从父页面切换至子页面的过程中，显示屏上显示的子页面的透明度越来越低。

可理解的，图5B-图5D仅示出了在从显示屏右侧往左侧的方向移动显示子页面过程中的三个不同时间点上，电子设备在显示屏上提供的用户界面。在本申请的一些实施例中，在电子设备显示图5A-图5B，或者，图5B-图5C，或者，图5C-图5D之间的其他时间点上，电子设备还可以在显示屏上提供其他类似的用户界面，这里不再逐一示出。

可理解的，在上述图5A-图5D实施例提供的父页面切换至子页面的过程中，电子设备可在提供的用户界面上持续显示操作系统提供的系统级别的界面元素，例如图5A-图5D所示用户界面中的状态栏。

通过上述图5A-图5D实施例可知，电子设备在显示屏上全屏显示父页面时，若检测到用于从父页面切换至子页面的操作，响应于该操作，电子设备可以由全屏显示父页面切换为在显示屏的第一侧叠加显示子页面的中间部分，并控制子页面逐渐向显示屏的第二侧移动，同时，增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。其中，子页面的中间部分的高度与子页面的高度相同，子页面的中间部分的宽度小于子页面的宽度。第一侧可以是第二区域位于显示屏中的方向，第二侧可以是第一区域位于显示屏中的方向。在一些实施例中，显示屏的第一侧可以是显示屏的右侧，显示屏的第二侧可以是显示屏的左侧。

在从父页面切换至子页面的过程中，本申请实施例提供的从子页面的中间部分开始逐渐增加子页面在显示屏中显示的部分，和现有技术中从子页面的左侧边缘部分开始增加子页面在显示屏中的显示部分相比，其切换效果不同，更加富有趣味性。

在一些实施例中，电子设备可以逐渐往第一侧和第二侧增加子页面在显示屏上显示的部分。具体的，电子设备增加子页面在显示屏上显示的部分时有以下几种策略：

1.电子设备首先往第一侧增加子页面在显示屏上显示的部分，再往第二侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

2.电子设备首先往第二侧增加子页面在显示屏上显示的部分，再往第一侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

3.电子设备同时往第一侧和第二侧增加子页面在显示屏上显示的部分，直至子页面全屏显示在显示屏上。

电子设备通过上述任意一种策略来增加子页面在显示屏上显示的部分时，都可以增加父子页面切换时的趣味性。

电子设备往第一侧增加子页面在显示屏上显示的部分之后，电子设备上显示的子页面包括：该子页面的中间部分，和，该子页面的第一侧的部分。该子页面的第一侧的部分和子页面的中间部分接壤。子页面的第一侧的部分的高度与子页面的高度相同，子页面的第一侧的部分的宽度小于子页面的宽度。

电子设备往第二侧增加子页面在显示屏上显示的部分之后，电子设备上显示的子页面包括：该子页面的中间部分，和，该子页面的第二侧的部分。该子页面的第二侧的部分和子页面的中间部分接壤。子页面的第二侧的部分的高度与子页面的高度相同，子页面的第二侧的部分的宽度小于子页面的宽度。

通过上述图5A-图5D示出的用户界面，用户可以看到子页面占用显示屏的区域从显示屏右侧往左侧方向逐渐扩大，父页面占用显示屏的区域往显示屏左侧方向逐渐缩小，直至子页面全屏显示在显示屏上。电子设备提供的这种从父页面切换到子页面的方式，符合用户预期，视觉效果自然，用户的视觉运动动线较短，可以给用户最优的使用体验。

在本申请实施例中，电子设备从父页面切换到子页面的过程中，显示屏上显示的子页面的部分通过遮罩(mask)实现。子页面和遮罩层形成遮罩(mask)，子页面为被遮罩层。子页面(被遮罩层)和遮罩层相重叠并且位于显示屏上的部分，为电子设备在显示屏上显示的子页面的部分。

在本申请实施例中，由子页面和遮罩层形成的遮罩(mask)位于父页面之上，遮罩(mask)中遮罩层和被遮罩层非重叠的部分不影响父页面的显示。如果遮罩(mask)中有部分内容覆盖在了父页面的部分区域，若遮罩(mask)中的该部分内容不是子页面(被遮罩层)和遮罩层相重叠的部分(即为不可见的部分)，则电子设备仍然在该区域显示父页面。

图6A-图6D示例性示出了电子设备在从父页面切换至子页面的过程中，通过遮罩(mask)来显示子页面的部分或全部的方式。在图6A-图6D实施例中，父页面和子页面均由“联系人(contacts)”应用提供，父页面为“联系人主页”，子页面为某个具体联系人(例如联系人“Andy”)的通讯录详情页面。

图6A示出了电子设备在显示屏上全屏显示的一个用户界面，该用户界面包括状态栏和“联系人主页”(即父页面)。图6A所示的用户界面可参考图5A的相关描述，在此不再赘述。

响应于在图6A所示用户界面中联系人条目“Andy”上检测到的用户操作，电子设备可生成或者打开对应的子页面(被遮罩层)，并同时生成遮罩层。

参考图6B，图6B示例性示出了电子设备生成的子页面(被遮罩层)以及遮罩层。如图6B所示，电子设备生成的子页面(被遮罩层)的左半部分位于显示屏内左侧区域，子页面(被遮罩层)的右半部分位于显示屏外右侧区域，遮罩层位于显示屏外右侧区域。子页面(被遮罩层)的大小、遮罩层的大小均基本与显示屏相同。子页面(被遮罩层)和遮罩层有部分内容重叠，该重叠的内容位于显示屏外右侧区域。电子设备在生成如图6B所示的子页面(被遮罩层)和遮罩层时，由于子页面(被遮罩层)和遮罩层重叠的内容位于显示屏外，因此显示屏上仍然全屏显示父页面，即显示屏上仍然显示如图6A所示的用户界面。

电子设备生成子页面(被遮罩层)和遮罩层之后，可以控制子页面(被遮罩层)和遮罩层从显示屏右侧向左侧的方向移动。在子页面(被遮罩层)和遮罩层从显示屏右侧向左侧的方向移动的过程中，父页面保持不动。子页面(被遮罩层)的移动速度和遮罩层的移动速度可以相同，也可以不同，本申请对此不做限制。子页面(被遮罩层)的移动速度、遮罩层的移动速度均大于等于零。子页面(被遮罩层)和遮罩层可以做加速运动，也可以做匀速运动或减速运动，加速运动或减速运动可以使得从父页面切换至子页面的过程更加符合用户预期。子页面(被遮罩层)和遮罩层可以同时移动，也可以不同时移动，本申请对此不做限制。

在本申请实施例中，电子设备在控制子页面(被遮罩层)和遮罩层移动的过程中，子页面(被遮罩层)和遮罩层有重叠的部分位于显示屏内，并且，最后子页面(被遮罩层)和遮罩层均停止移动后，子页面(被遮罩层)的全部内容被遮罩层覆盖且该子页面全部位于显示屏内。

子页面(被遮罩层)的左侧边缘在移动至显示屏的左侧边缘后停止移动。遮罩层的左侧边缘在移动至显示屏的左侧边缘后停止移动。

参考图6C，其示例性示出了子页面(被遮罩层)和遮罩层移动一段时间之后所处的位置。在图6B-图6C所示的子页面(被遮罩层)和遮罩层的移动过程中，该遮罩层的移动速度大于该子页面(被遮罩层)的移动速度。如图6C所示，子页面(被遮罩层)中有部分内容位于显示屏内右侧区域，有部分内容位于显示屏外右侧区域；遮罩层中有部分内容位于显示屏内右侧区域，有部分内容位于显示屏外右侧区域。子页面(被遮罩层)和遮罩层有部分内容重叠并且位于显示屏内，该部分内容可以被显示在显示屏上，该部分内容即图为6C中示出的子页面的可见部分。父页面中和该可见部分非重叠的内容也可以被显示在显示屏上。也就是说，子页面(被遮罩层)和遮罩层移动至图6C所示的位置时，电子设备在显示屏上同时显示有父页面和子页面。

示例性地，可参考图5B，当子页面(被遮罩层)和遮罩层移动至图6C所示的位置时，电子设备可以显示如图5B所示的用户界面52，即电子设备可以在显示屏的第一区域持续显示父页面的第一部分，在显示屏的第二区域显示该子页面的第一部分。这里，父页面的第一部分、子页面的第一部分可参照前文实施例的相关描述。

参考图6D，其示例性示出了子页面(被遮罩层)的左侧边缘移动至显示屏的左侧边缘，并且，遮罩层的左侧边缘移动至显示屏的左侧边缘之后，显示屏上显示的用户界面。如图6D所示，子页面(被遮罩层)移动至显示屏左侧边缘，遮罩层也移动至显示屏左侧边缘，子页面(被遮罩层)、遮罩层均位于显示屏内。子页面(被遮罩层)和遮罩层的全部内容重叠并且均位于显示屏内，子页面(被遮罩层)的全部内容可以被显示在显示屏上，该全部内容即为图6D中示出的子页面的可见部分。父页面被子页面(被遮罩层)和遮罩层的重叠部分全部覆盖，因此显示屏上不显示父页面。也就是说，子页面(被遮罩层)和遮罩层移动至图6D所示的位置时，电子设备在显示屏上全屏显示子页面。

示例性地，可参考图5D，当子页面(被遮罩层)和遮罩层移动至图6D所示的位置时，电子设备可以显示如图5D所示的用户界面54，即电子设备在显示屏上全屏显示子页面。

在本申请实施例中，电子设备在显示屏上全屏显示子页面之后，该电子设备可以维持生成的遮罩(mask)，即电子设备持续将遮罩层和子页面(被遮罩层)组成遮罩(mask)。该电子设备也可以停止维持该遮罩(mask)，即电子设备不再将遮罩层和子页面(被遮罩层)组成遮罩，例如停止生成该遮罩层等。

可理解的，图6A-图6D仅仅示例性示出了电子设备生成的子页面(被遮罩层)、遮罩层以及其移动方向、移动速度等，实际应用中还可以不同，不应构成限定。

不限于图6A-图6D所示的子页面(被遮罩层)和遮罩层的位置，在一些实施例中，电子设备在生成子页面(被遮罩层)和遮罩层时，该子页面(被遮罩层)和遮罩层还可以位于其他位置。例如，子页面(被遮罩层)还可以全部位于显示屏内部，遮罩层也可以有部分位于显示屏内部等。

不限于图6A-图6D所示的子页面(被遮罩层)和遮罩层的移动方向及移动路线，在一些实施例中，电子设备还可以控制子页面(被遮罩层)和遮罩层按照其他方向例如从显示屏的右下角往左上角的方向等移动，还可以控制子页面(被遮罩层)和遮罩层的按照其他路线例如曲线移动。

在本申请实施例中，电子设备生成子页面(被遮罩层)和遮罩层后，子页面(被遮罩层)和遮罩层的移动速度可以根据用户体验预先设置。

示例性地，参考图7，图7示出了一种可能的贝塞尔曲线，该贝塞尔曲线可以反映电子设备生成如图6B所示位置的子页面(被遮罩层)和遮罩层，并且该子页面(被遮罩层)和遮罩层同时移动的情况下，该子页面(被遮罩层)或遮罩层的移动速度或者移动节奏。

贝塞尔是曲线路径的常用数学模型，三次贝塞尔曲线由按照顺序的4个点控制其路径。作为动画领域插值器使用时，贝塞尔曲线的起点(控制点1)和终点(控制点2)固定不变，由剩余两个点控制其路径。

如图7所示，该贝塞尔曲线由起点(控制点1)和终点(控制点2)涉及的四个值0.2、0、0.2、1确定。该贝塞尔曲线的纵坐标为插值结果，横坐标为当前时间点占整个动画时长(即父页面切换至子页面的时长)的比值。例如，横坐标为0时可以是指电子设备接收到用于从父页面切换到子页面的用户操作的时刻(如电子设备在如图5A所示的用户界面51上的联系人条目509B上接收到的点击操作的时刻)，横坐标为0.5时可以是指电子设备从父页面切换到子页面的过程的中间时间点。该贝塞尔曲线的斜率可用于表示子页面(被遮罩层)和/或遮罩层的移动速度。

从上述图6A-图6D可以看出，在本申请实施例中，通过遮罩(mask)实现从父页面切换到子页面的过程中显示屏上所显示的子页面的部分。用户触发电子设备从父页面切换至子页面后，电子设备生成遮罩，该遮罩由遮罩层和被遮罩层(子页面)组成。若遮罩层和被遮罩层(子页面)重叠并且位于显示屏上的部分为该子页面的中间部分，那么用户可以在显示屏上看到该子页面的中间部分。随着遮罩层和被遮罩层(子页面)从右往左的移动，用户可以在显示屏上看到该子页面在显示屏上显示的部分逐渐增加，父页面在显示屏上显示的部分逐渐减少，直至子页面全屏显示在显示屏上。这样的从父页面切换至子页面的方式，可以给用户更好的视觉效果，从而提升用户体验。

(二)从子页面切换至父页面的方法

在本申请实施例中，从子页面切换至父页面的过程，和从父页面切换至子页面的过程相比，子页面的移动方向相反，后面将详细描述。

在本申请实施例提供的从子页面切换至父页面的过程中，电子设备首先在显示屏上全屏显示子页面，然后在显示屏上显示父页面并且在显示屏的第一侧叠加显示子页面，再往显示屏的第一侧移动该子页面，在移动过程中该子页面在显示屏上显示的部分逐渐减少，直至显示屏不再显示该子页面并且全屏显示父页面。其中，第一侧和第二侧相反。

图8A-图8D以电子设备上安装的“联系人(contacts)”应用为例，示出了本申请实施例提供的从子页面切换至父页面的过程示意图。

在图8A-图8D实施例中，用于展示一个或多个联系人条目的用户界面(也可以被称为“联系人主页”)，和，用于展示某个具体联系人的通讯录详情的用户界面组成一对父子页面。该用于展示一个或多个联系人条目的用户界面为父页面，用于展示某个具体联系人的通讯录详情的用户界面为子页面。

下面说明图8A示例性示出的UI实施例提供的用户界面81。

参考图8A，电子设备可以在显示屏上全屏显示用户界面81。该用户界面81包括：状态栏、用于展示具体联系人(例如联系人“Andy”)的通讯录详情用户界面(即子页面)。该用户界面81可参考图5D所示的用户界面54，在此不再赘述。

图8A所示用户界面81中的返回键513可接收到用户操作(例如触摸操作)，响应于该用户操作，电子设备可在显示屏上全屏显示用于展示一个或多个联系人条目的用户界面(即父页面)。电子设备在用户界面81的返回键513上接收到的用户操作(例如触摸操作)为用于从子页面切换到父页面的用户操作。

图8D所示的用户界面84可以为用于展示一个或多个联系人条目的用户界面(即父页面)的一种实现方式。如图8D所示，该用户界面84可包括：状态栏512、用于展示某个具体联系人(例如联系人“Andy”)的通讯录详情的用户界面(即子页面)。该用户界面84可参考图5A所示的用户界面51，在此不再赘述。

在本申请实施例中，电子设备的显示屏从用于展示某个具体联系人的通讯录详情的用户界面切换至用于展示一个或多个联系人条目的用户界面的过程，即从子页面切换至父页面的过程。符合用户预期，视觉效果自然，用户的视觉运动动线较短，可以给用户最优的使用体验。

图8A-图8D示出了从用于展示某个具体联系人的通讯录详情的用户界面切换至用于展示一个或多个联系人条目的用户界面的过程，即从子页面切换至父页面的过程。

参考图8A-图8D，响应于在用户界面81中的返回键513上检测到的用户操作，电子设备生成或者打开对应的父页面(即“联系人主页”)，并从显示屏左侧往右侧的方向移动显示子页面，直至显示屏不再显示该子页面并且全屏显示父页面。

图8B-图8C示出了在从显示屏左侧往右侧的方向移动显示子页面过程中的两个不同时间点上，电子设备在显示屏上提供的用户界面。

参考图8B示出的用户界面82，电子设备可以在显示屏的第五区域显示父页面的第三部分，在显示屏的第六区域显示子页面的第三部分。这里，图8B示出的用户界面82中，可以看作电子设备在显示屏的第六区域叠加显示子页面的第三部分。

在本申请实施例中，显示屏的第五区域为显示屏的左侧区域，显示屏的第六区域为显示屏的右侧区域。第五区域和第六区域互不重叠且组合形成显示屏的显示区域。在一种可能的实施方式中，参考图8B，该第五区域为显示屏的三分之一部分，该第六区域为显示屏的右三分之二部分。在其他可能的实施方式中，第五区域或第六区域可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、半椭圆形或其他不规整形状等，例如第六区域也可以为显示屏的右上方的扇形区域等。第五区域和第六区域在显示屏中位置的确定方式，和上述图5B实施例中第一区域、第二区域在显示屏中位置的确定方式相同，可参考相关描述，在此不再赘述。

在本申请实施例中，父页面的第三部分为父页面在显示屏的第五区域显示的部分。例如，参考图8B，该父页面的第三部分可以为父页面的左三分之一部分。

在本申请实施例中，子页面的第三部分为子页面中的任意一部分。子页面的第三部分可以被称为子页面的一部分，该子页面的一部分的高度与子页面的高度相同，该子页面的一部分的宽度小于子页面的宽度。本申请对该子页面的一部分的面积大小不做限制。在一些实施例中，该子页面的一部分可以是子页面的中间部分。在一种具体的实施方式中，该子页面的一部分可以是图5A-图5D实施例中提及的子页面的中间部分，可参照相关描述。在另一些实施例中，该子页面的一部分也可以是子页面的左侧部分或者右侧部分。例如，参考图8B，该子页面的第三部分可以为子页面的中间三分之二部分。不限于子页面的中间三分之二部分，该子页面的第三部分还可以为子页面的左三分之二部分或者右三分之二部分或其他任意部分。在本申请的一些实施例中，该子页面的第三部分可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、版椭圆形或其他不规整形状等，例如该子页面的第三部分也可以为子页面右上方的扇形部分等。子页面的第三部分的确定方式，和上述图5B实施例中子页面的第一部分的确定方式相同，可参考相关描述，在此不再赘述。

在显示图8B所示用户界面82的一段时间(例如200毫秒)后，电子设备可以在显示屏上显示如图8C所示的用户界面83。

参考图8C，电子设备可以在显示屏的第七区域显示父页面的第四部分，在显示屏的第八区域显示子页面的第四部分。这里，图8C示出的用户界面83中，可以看作电子设备在显示屏的第八区域叠加显示子页面的第四部分。

在本申请实施例中，显示屏的第七区域为显示屏的左侧区域，该第七区域包括第五区域。显示屏的第八区域为显示屏的右侧区域，该第八区域属于第六区域。第七区域和第八区域互不重叠且组合形成显示屏的显示区域。示例性地，参考图8C，该第七区域可以为显示屏的左半部分，该第八区域可以为显示屏的右半部分。在本申请的一些实施例中，第七区域或第八区域可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、半椭圆形或其他不规整形状等，例如第八区域也可以为显示屏的右上方的扇形区域等。

在本申请实施例中，父页面的第四部分为父页面在显示屏的第七区域显示的部分。父页面的第四部分包括父页面的第三部分。例如，参考图8C，该父页面的第四部分可以为父页面的左半部分。

在本申请实施例中，子页面的第四部分属于子页面的第三部分。在本申请的一些实施例中，该子页面的第四部分可以不是矩形区域，还可以实现为其他形状，例如扇形、半圆形、版椭圆形或其他不规整形状等，例如该子页面的第四部分也可以为子页面右上方的扇形部分等。

在显示图8C所示用户界面83的一段时间(例如200毫秒)后，电子设备可以在显示屏上显示如图8D所示的用户界面84。该用户界面84可参考前文实施例的相关描述，在此不再赘述。

在本申请的一些实施例中，电子设备在从子页面切换到父页面的过程中，还可以提示用户当前正在从子页面切换到父页面。该提示方式可以包括：1.电子设备在从子页面切换到父页面的过程中，在显示屏上同时显示有子页面和父页面时，以不同的显示形式显示该子页面和该父页面。页面的显示形式可包括：页面的背景颜色、页面的透明度或页面的边框等。示例性地，参考图8B及图8C，电子设备在显示屏上同时显示有子页面和父页面时，该父页面的背景颜色为浅黑色，子页面的背景颜色为白色。2.电子设备在从子页面切换到父页面的过程中，显示屏上显示的父页面的背景颜色逐渐变浅，或者，该父页面的透明度越来越低。3.电子设备在从父页面切换至子页面的过程中，显示屏上显示的子页面的透明度越来越高。

可理解的，图8B-图8C仅示出了在从显示屏左侧往右侧的方向移动显示子页面过程中的两个不同时间点上，电子设备在显示屏上提供的用户界面。在本申请的一些实施例中，在电子设备显示图8A-图8B，或者，图8B-图8C，或者，图8C-图8D之间的其他时间点上，电子设备还可以在显示屏上提供其他类似的用户界面，这里不再逐一示出。

可理解的，在上述图8A-图8D实施例提供的子页面切换至父页面的过程中，电子设备可在提供的用户界面上持续显示操作系统提供的系统级别的界面元素，例如图8A-图8D所示用户界面中的状态栏。

通过上述图8A-图8D实施例可知，电子设备在显示屏上全屏显示子页面时，若检测到用于从子页面切换至父页面的操作，响应于该操作，电子设备可以由全屏显示子页面切换为在显示屏上显示父页面并且在显示屏的第一侧叠加显示子页面的一部分，控制子页面逐渐向显示屏的第一侧移动，同时，减少子页面在显示屏上显示的部分，直至父页面全屏显示在显示屏上。其中，该子页面的一部分的高度与子页面的高度相同，该子页面的一部分的宽度小于子页面的宽度。第一侧可以是第六区域位于显示屏中的方向，第二侧可以是第五区域位于显示屏中的方向。在一些实施例中，显示屏的第一侧可以是显示屏的右侧，显示屏的第二侧可以是显示屏的左侧。

在一些实施例中，电子设备可以逐渐往第一侧和/或第二侧减少子页面在显示屏上显示的部分。具体的，电子设备减少子页面在显示屏上显示的部分时有以下几种策略：

1.电子设备在显示屏上减少显示子页面的第一侧的部分，或者，电子设备在显示屏上减少显示子页面的第二侧的部分，直至显示屏上不再显示子页面，父页面全屏显示在显示屏上。

2.电子设备首先在显示屏上减少显示子页面的第一侧的部分，再在显示屏上减少显示子页面的第二侧的部分，直至显示屏上不再显示子页面，父页面全屏显示在显示屏上。

3.电子设备首先在显示屏上减少显示子页面的第二侧的部分，再在显示屏上减少显示子页面的第一侧的部分，直至显示屏上不再显示子页面，父页面全屏显示在显示屏上。

4.电子设备同时在显示屏上减少显示子页面的第一侧的部分和子页面的第二侧的部分，直至显示屏上不再显示子页面，父页面全屏显示在显示屏上。

这里，子页面的第一侧的部分的高度与子页面的高度相同，子页面的第一侧的部分的宽度小于子页面的宽度。子页面的第二侧的部分的高度与子页面的高度相同，子页面的第一侧的部分的宽度小于子页面的宽度。

通过上述图8A-图8D实施例，用户可以看到父页面占用显示屏的区域从显示屏左侧往右侧方向逐渐扩大，子页面占用显示屏的区域往显示屏右侧方向逐渐缩小，直至父页面全屏显示在显示屏上。电子设备提供的这种从子页面切换到父页面的方式，符合用户预期，视觉效果自然，用户的视觉运动动线较短，可以给用户最优的使用体验。

在本申请实施例中，用于从子页面切换至父页面的用户操作不限于图8A-图8D实施例中电子设备在用户界面81中的返回键513上接收到的操作，还可以为其他用户操作。例如，用于从子页面切换至父页面的用户操作还可以为：用户在用户界面81上从左往右的滑动手势。该滑动手势可以始于用户界面81的左侧边缘区域，也可以始于用户界面81的中间任意区域，本申请实施例对此不做限制。

参考图9A-图9D，其示出了用户通过在子页面上输入从左往右的拖移(pan)手势，使得电子设备从子页面切换至父页面的示意图。拖移(pan)手势是指用户手部(例如手指)在显示屏上慢速滑动的手势。在一些实施例中，该拖移(pan)手势也可以被称为跟手滑动手势。该拖移(pan)手势的持续时长大于预设时长。该拖移(pan)手势的滑动轨迹的长度大于预设长度，该预设长度可以预设设置，例如该预设长度可以为显示屏宽度的一般。

在一些实施例中，如图9A-图9D所示，该拖移(pan)手势的滑动轨迹可以始于显示屏左侧边缘，终止于显示屏右侧边缘。随着用户输入的拖移(pan)手势，电子设备在显示屏上显示的子页面开始随着用户的手部向右平移，直至显示屏上不再显示该子页面并全屏显示父页面。该子页面随着用户的手部向右平移的速度和用户手部在显示屏上滑动的速度相同。

在另一些实施例中，该拖移(pan)手势的滑动轨迹可以始于显示屏左侧边缘，终止于显示屏右半部分区域。随着用户输入的拖移(pan)手势，电子设备在显示屏上显示的子页面开始随着用户的手部向右移动，子页面的移动速度和该拖移(pan)手势的移动速度相同。当用户停止输入拖移(pan)手势后，该子页面可以按照预设的速度向右平移，直至显示屏上不再显示该子页面并全屏显示父页面。

在图9A-图9D实施例中，子页面随着用户的手部向右移动显示的过程中，电子设备逐渐停止显示该子页面的右侧区域，且停止显示的该子页面的右侧区域逐渐变大。

参考图10A-图10D，其示出了用户通过在子页面上输入从左往右的快速滑动(swipe)手势，使得电子设备从子页面切换至父页面的示意图。快速滑动(swipe)手势是指用户手部(例如手指)在显示屏上快速滑动的手势。该快速滑动(swipe)手势的移动轨迹可以是弧线、直线，也可以不是标准的弧线或直线，类似弧线或直线即可。快速滑动(swipe)手势的持续时长短于拖移(pan)手势的持续时长。本申请实施例对该快速滑动(swipe)手势的滑动轨迹的起始位置和终止位置不做具体限制。响应于用户输入的快速滑动(swipe)手势，电子设备在显示屏上显示的子页面从显示屏左侧往右侧平移，直至显示屏上不再显示该子页面并全屏显示父页面。该子页面的平移方式可参考图10B-图10D。该子页面的平移速度可以和图8A-图8D实施例中子页面的平移速度相同，也可以快于图8A-图8D实施例中子页面的平移速度，本申请实施例对此不做限制。

通过上述图9A-图9D实施例、图10A-图10D实施例可知，电子设备在显示屏上全屏显示子页面时，若检测到用户从父页面切换至子页面的操作(例如拖移(pan)手势或快速滑动(swipe)手势)，响应于该操作，电子设备可以由全屏显示子页面切换为在显示屏上显示父页面，并且，在显示屏的第一侧叠加显示子页面的左侧部分；子页面的左侧部分的高度与子页面的高度相同，子页面的左侧部分的宽度小于所述子页面的宽度；控制子页面逐渐向显示屏的第一侧移动，同时，逐渐减少子页面在显示屏上显示的部分，直至父页面全屏显示在显示屏上。本申请对子页面的左侧部分的面积大小不做限制。在一些实施例中，子页面的左侧部分包含子页面的左侧边缘。这里，在一些实施例中，电子设备可以逐渐往第一侧和/或第二侧减少子页面在显示屏上显示的部分。

参见图11，为了更清楚地解释本申请实施例中涉及的拖移(pan)手势和快速滑动(swipe)手势，图11示出了几种常用手势。

旋转画圈(rotate)手势是指用户手部(例如手指)在显示屏上以顺时针或者逆时针的方向绘制圆形的手势。可理解的，该圆形可以不是标准圆形，类似圆形即可。

缩放(princh)手势是指用户双指向内或向外滑动的手势。当两个手指之间的直线距离逐渐缩短时，可以看作用户双指向内滑动；当两个手指之间的直线距离逐渐变大时，可以看作用户双指向外滑动。

按压(press)手势是指用户手部(例如手指)作用于显示屏上的力度大于预设力度的按压操作。按压(press)手势可包括长按(long press)手势，执行长按手势时，用户手部和屏幕的接触时间超过预设时长。

轻触(tap)手势是指用户手部(例如手指)在显示屏上的点击、敲击或者触摸操作。轻触(tap)手势开始和结束之间的时间在预设时长内，该预设时长为毫秒级别。也就是说，执行该轻触(tap)手势时，用户手部和屏幕的接触时间在该预设时长内。

在本申请实施例中，电子设备从子页面切换到父页面的过程中，显示屏上移动显示的子页面的部分通过遮罩(mask)实现。子页面和遮罩层形成遮罩(mask)，子页面为被遮罩层。子页面(被遮罩层)和遮罩层相重叠并且位于显示屏上的部分，为电子设备在显示屏上显示的子页面的部分。该电子设备从子页面切换到父页面的过程，可参考上述图8A-图8D实施例、图9A-图9D实施例或者图10A-图10D实施例的相关描述。

电子设备通过遮罩(mask)实现从子页面切换到父页面的过程，和通过遮罩(mask)实现从父页面切换到子页面的过程相比，子页面(被遮罩层)和遮罩层的移动方向相反，下面将详细描述。

图12A-图12D示例性示出了电子设备在从子页面切换至父页面的过程中，通过遮罩(mask)来显示子页面的部分或全部的方式。在图12A-图12D实施例中，父页面和子页面均由“联系人(contacts)”应用提供，父页面为用于展示一个或多个联系人条目的用户界面，子页面为某个具体联系人(例如联系人“Andy”)的通讯录详情页面。

图12A示出了电子设备在显示屏上全屏显示的一个用户界面，该用户界面包括状态栏和某个具体联系人(例如联系人“Andy”)的通讯录详情页面(即子页面)。图12A所示的用户界面可参考图5D所示的用户界面54的相关描述，在此不再赘述。

在一些实施例中，响应于检测到的用于从子页面切换至父页面的用户操作，电子设备可以生成或者打开该子页面对应的父页面，并同时生成遮罩层，该遮罩层和子页面形成遮罩(mask)。这里，该用于从子页面切换至父页面的用户操作可包括：作用于子页面上返回键513的用户操作(例如触摸操作)、作用于子页面上从左往右的拖移(pan)手势或者快速滑动(swipe)手势。

在另一些实施例中，图12A所示的子页面是通过图6A-图6D所示的方式切换而来的，即电子设备在显示图12A所示的用户界面时，已经生成了父页面、遮罩层和被遮罩层(子页面)，并且，该父页面、遮罩层和被遮罩层(子页面)的位置和图6D中相同。电子设备在显示图12A所示的用户界面时，遮罩(mask)中的遮罩层和被遮罩层(子页面)可以是电子设备在图6B实施例中检测到用于从父页面切换至子页面的用户操作时生成的。

参考图12B，图12B示例性示出了电子设备生成的父页面以及遮罩层。如图12B所示，电子设备生成的父页面、遮罩层均位于显示屏内并占用显示屏的全部显示区域。父页面的大小、遮罩层的大小均基本与显示屏相同。子页面(被遮罩层)和遮罩层的全部内容重叠并且均位于显示屏内，因此子页面(被遮罩层)的全部内容可以被显示在显示屏上。父页面被子页面(被遮罩层)和遮罩层的重叠部分全部覆盖，因此显示屏上不显示父页面。也就是说，电子设备生成如图12B所示的父页面和遮罩层时，电子设备在显示屏上仍然全屏显示子页面。

响应于检测到的用于从子页面切换至父页面的用户操作并生成父页面和遮罩层之后，或者，响应于检测到的用于从子页面切换至父页面的用户操作，电子设备可以控制子页面(被遮罩层)和遮罩层从显示屏左侧向右侧的方向移动。在子页面(被遮罩层)和遮罩层从显示屏左侧向右侧的方向移动的过程中，父页面保持不动。子页面(被遮罩层)的移动速度和遮罩层的移动速度可以相同，也可以不同，本申请对此不做限制。子页面(被遮罩层)和遮罩层可以做加速运动，也可以做匀速运动或减速运动，加速运动或减速运动可以使得从子页面切换至父页面的过程更加符合用户预期。子页面(被遮罩层)的移动速度、遮罩层的移动速度均大于等于零。子页面(被遮罩层)和遮罩层可以同时移动，也可以不同时移动，本申请对此不做限制。

在本申请实施例中，电子设备在控制子页面(被遮罩层)和遮罩层移动的过程中，子页面(被遮罩层)和遮罩层有重叠的部分位于显示屏内，可以使得用户看到子页面在显示屏上从左往右移动。

参考图12C，其示例性示出了子页面(被遮罩层)和遮罩层移动一段时间之后所处的位置。在图12B-图12C所示的子页面(被遮罩层)和遮罩层的移动过程中，该遮罩层的移动速度大于该子页面(被遮罩层)的移动速度。如图12C所示，子页面(被遮罩层)中有部分内容位于显示屏内右侧区域，有部分内容位于显示屏外右侧区域；遮罩层中有部分内容位于显示屏内右侧区域，有部分内容位于显示屏外右侧区域。子页面(被遮罩层)和遮罩层有部分内容重叠并且位于显示屏内，该部分内容可以被显示在显示屏上，该部分内容即为图12C中示出的子页面的可见部分。父页面中和该可见部分非重叠的内容也可以被显示在显示屏上。也就是说，子页面(被遮罩层)和遮罩层移动至图12C所示的位置时，电子设备在显示屏上同时显示有父页面和子页面。

示例性地，可参考图8C，当子页面(被遮罩层)和遮罩层移动至图12C所示的位置时，电子设备可以显示如图8C所示的用户界面83，即电子设备可以在显示屏的第七区域显示父页面的第四部分，在显示屏的第八区域显示该子页面的第四部分。这里，父页面的第四部分、子页面的第四部分可参照前文实施例的相关描述。

参考图12D，其示例性示出了遮罩层的左侧边缘移动至显示屏的右侧边缘之后，显示屏上显示的用户界面。如图12D所示，遮罩层的左侧边缘移动至显示屏的右侧边缘，子页面(被遮罩层)和遮罩层有部分内容重叠，该重叠的内容位于显示屏外右侧区域。由于电子设备生成的遮罩(mask)中，子页面(被遮罩层)和遮罩层重叠的内容位于显示屏外，因此显示屏上全屏显示父页面。

示例性地，可参考图8D，当子页面(被遮罩层)和遮罩层移动至图12D所示的位置时，电子设备可以显示如图8D所示的用户界面84，即电子设备在显示屏上全屏显示父页面。

可理解的，图12A-图12D仅仅示例性示出了电子设备生成的子页面(被遮罩层)、遮罩层以及其移动方向、移动速度等，实际应用中还可以不同，不应构成限定。

不限于图12A-图12D所示的子页面(被遮罩层)和遮罩层的位置，在一些实施例中，电子设备在生成父页面和遮罩层时，子页面(被遮罩层)和遮罩层还可以位于其他位置。例如，子页面(被遮罩层)还可以部分位于显示屏内部，部分位于显示屏外部右侧区域，遮罩层也可以有部分位于显示屏内部，部分位于显示屏外部右侧区域等。

不限于图12A-图12D所示的子页面(被遮罩层)和遮罩层的移动方向及移动路线，在一些实施例中，电子设备还可以控制子页面(被遮罩层)和遮罩层按照其他方向例如从显示屏的左下角往右上角的方向等移动，还可以控制子页面(被遮罩层)和遮罩层的按照其他路线例如曲线移动。

在本申请实施例中，电子设备生成父页面和遮罩层后，子页面(被遮罩层)和遮罩层的移动速度可以根据用户体验预先设置。

示例性地，参考图13，图13示出了一种可能的贝塞尔曲线，该贝塞尔曲线可以反映电子设备生成如图12B所示位置的父页面和遮罩层后，子页面(被遮罩层)和遮罩层同时移动的情况下，该子页面(被遮罩层)或遮罩层的移动速度或者移动节奏。

如图13所示，该贝塞尔曲线由起点(控制点1)和终点(控制点2)涉及的四个值0.4、0、0.2、1确定。该贝塞尔曲线的纵坐标为插值结果，横坐标为当前时间点占整个动画时长(即子页面切换至父页面的时长)的比值。例如，横坐标为0时可以是指电子设备接收到用于从子页面切换到父页面的用户操作的时刻(如电子设备在如图8A所示的用户界面81上的返回键513上接收到点击操作的时刻)，横坐标为0.5时可以是指电子设备从子页面切换到父页面的过程的中间时间点。该贝塞尔曲线的斜率可用于表示子页面(被遮罩层)和/或遮罩层的移动速度。

在本申请的一些实施例中，父页面切换至子页面的过程和从子页面切换至父页面的过程相比，子页面(被遮罩层)和遮罩层的移动速度可以不同。例如，若在父页面切换至子页面的过程中子页面(被遮罩层)和遮罩层做加速运动，在子页面切换至父页面的过程中子页面(被遮罩层)和遮罩层做加速运动，该两个过程分别对应的加速度可以不同。不同的加速度更加符合用户预期。

从上述图12A-图12D可以看出，在本申请实施例中，通过遮罩(mask)实现从子页面切换到父页面的过程中显示屏上所显示的子页面的部分。用户触发电子设备从子页面切换至父页面后，电子设备生成遮罩层和被遮罩层(子页面)，随着遮罩层和被遮罩层(子页面)从左往右的移动，用户可以在显示屏上看到该子页面占用显示屏的区域从显示屏左侧往右侧方向逐渐缩小，父页面占用显示屏的区域往显示屏右侧方向逐渐扩大，直至父页面全屏显示在显示屏上。这样的从子页面切换至父页面的方式，可以给用户更好的视觉效果，从而提升用户体验。

在本申请另一些实施例中，不限于通过图12A-图12D所示实施例中示出的通过遮罩(mask)来实现电子设备在显示屏上显示的子页面的部分，从而完成从子页面切换至父页面的过程，本申请还可以通过遮罩(mask)来实现电子设备在显示屏上显示的父页面的部分，从而完成从子页面切换至父页面的过程。下面详细描述具体的实现方式。

首先，电子设备显示子页面。

然后，电子设备检测到用于从子页面切换至父页面的操作时，生成父页面以及遮罩层，不同于图12A-图12D实施例中子页面和遮罩层形成遮罩(mask)，这里，父页面和遮罩层形成遮罩(mask)，该父页面为被遮罩层。父页面(被遮罩层)和遮罩层相重叠并且位于显示屏上的部分，为电子设备在显示屏上显示的父页面的部分。

其次，电子设备控制父页面(被遮罩层)和遮罩层从显示屏左侧向右侧的方向移动。在该移动过程中，父页面(被遮罩层)和遮罩层有重叠的部分位于显示屏内，可以使得用户看到父页面在显示屏上从左往右平移。

最后，父页面(被遮罩层)和遮罩层的全部内容重叠并且均位于显示屏内，父页面(被遮罩层)的全部内容可以被显示在显示屏上，

可理解的，通过遮罩(mask)来实现电子设备在显示屏上显示的父页面的部分，和通过遮罩(mask)来实现电子设备在显示屏上显示的子页面的部分相比，遮罩(mask)的位置、移动方向或移动速度等是对称或者镜像的。本领域技术人员可根据前文图12A-图12D实施例的相关描述，清楚地确定通过遮罩(mask)来实现电子设备在显示屏上显示的父页面，从而完成从子页面切换至父页面时的具体操作，这里不再赘述。

下面结合图3B所示的电子设备的软件结构描述本申请实施例提供的切换父页面和子页面的方法。参考图14，图14示出了电子设备在切换父子页面时，各个软件模块及硬件模块之间的交互流程示意图。

应用程序层包括一系列应用程序，电子设备可以在应用程序层运行其中的一个或多个应用程序。电子设备当前运行的应用程序中包括占用显示屏焦点为用户提供图形用户界面的应用程序。

当用户在电子设备当前提供的图形用户界面上输入用于切换父子页面的用户操作时，该用户操作可以被电子设备的显示屏检测到，相应的硬件中断被发送给内核层。内核层将该用于切换父子页面的用户操作加工成原始输入事件并进行存储。这里，用于切换父子页面的用户操作可参照前文实施例的相关描述，在此不再赘述。

应用程序框架层从内核层获取该原始输入事件，并识别该原始输入事件所对应的操作的作用(即切换父子页面)。应用程序框架层的活动管理器(ActivityManagerService，AMS)或窗口管理器(WindowManagerService，WMS)读取显示屏当前显示的图层的相关参数，该相关参数例如可用于描述当前显示的父页面/子页面的显示区域、透明度、背景颜色等。应用程序框架层的AMS或WMS还用于输出用于控制父子页面切换过程的相关参数，该用于控制父页面/子页面切换过程的相关参数用于描述父子页面切换过程中父页面/子页面的显示区域的变化、透明度的变化、透明度的变化、移动速度、移动方向等。

系统库的表面管理器(surface manager)根据应用程序框架层输出的相关参数，合成最终在显示屏上显示的画面。

电子设备调用内核层的显示驱动，通过显示屏将表面管理器合成的画面显示给用户。这里，显示屏显示的画面可参照前文各个UI实施例的相关描述，在此不再赘述。

通过上述图5A-图5D、图6A-图6D、图8A-图8D、图9A-图9D、图10A-图10D、图12A-图12D实施例可以看出，电子设备在从父页面切换至子页面或从子页面切换至父页面时，子页面在显示屏上移动，直至显示屏全屏显示该子页面或者父页面。这样的切换方式，可以缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

不限于上面描述的切换父子页面的场景，本申请提供的页面之间的切换方法还可以应用到其他场景，例如切换同级页面的场景、切换主界面(Home screen)和应用程序主页的场景等。

同级页面是指同一应用程序提供的不需要通过返回键来切换的页面，例如“微信(WeChat)”提供的四个标签(tab)“微信”“通讯录”“发现”“我”分别对应的页面，又例如“联系人(contacts)”提供的三个控件510A-510C分别对应的拨号界面、联系人主页和收藏联系人的页面。在本申请中，电子设备在检测到用于切换同级页面的用户操作时，也可以通过和上述实施例描述的切换父子页面类似的方法切换同级页面，使得用户可以看到某个同级页面在显示屏上移动，直至显示屏全屏显示另一个同级页面，从而完成同级页面的切换。通过这样的方式来切换同级页面，可以缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

主界面(Home screen)可以是指电子设备提供的桌面，主界面的示例性实现方式可以为图4所示的用户界面41。应用程序主页是指电子设备首次打开该应用程序时在显示屏上显示的用户界面。本领域技术人员可以理解，一个应用程序的逻辑主页是固定的，在应用程序设计时便已确定。在本申请中，电子设备在检测到用于切换主界面和应用程序主页的用户操作时，也可以通过和上述实施例描述的切换父子页面类似的方法来切换主界面和应用程序主页。通过这样的方式来切换主界面和应用程序主页，可以缩短用户的视觉运动动线，提供更好的视觉效果，提升用户体验。

本申请的各实施方式可以任意进行组合，以实现不同的技术效果。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid StateDisk)等。

Claims (32)

1.一种切换父页面和子页面的方法，其特征在于，包括：

电子设备在显示屏上全屏显示应用程序提供的父页面；其中，所述应用程序还提供子页面，所述父页面是所述子页面的上级页面，且，所述父页面和所述子页面的大小相同；

所述电子设备检测到用于从所述父页面切换至所述子页面的操作，响应于所述用于从所述父页面切换至所述子页面的操作，所述电子设备自动执行以下步骤：

由全屏显示所述父页面切换为在所述显示屏的第一侧叠加显示所述子页面的中间部分，所述子页面的中间部分的高度与所述子页面的高度相同，所述子页面的中间部分的宽度小于所述子页面的宽度；

控制所述子页面逐渐向所述显示屏的第二侧移动，同时，逐渐增加所述子页面在所述显示屏上显示的部分，直至所述子页面全屏显示在所述显示屏上，其中，所述第二侧与所述第一侧相反。

2.根据权利要求1所述的方法，其特征在于，所述显示屏的第一侧为所述显示屏的右侧，所述显示屏的第二侧为所述显示屏的左侧。

3.根据权利要求1或2所述的方法，其特征在于，所述逐渐增加所述子页面在所述显示屏上显示的部分，具体包括：

逐渐往所述第一侧和所述第二侧增加所述子页面在所述显示屏上显示的部分。

4.根据权利要求1-3任一项所述的方法，其特征在于，在所述电子设备检测到用于从所述父页面切换至所述子页面的操作之后，在所述子页面全屏显示在所述显示屏上之前，所述显示屏上的所述父页面和所述子页面的显示形式不同；所述显示形式包括：背景颜色、透明度或者边框中的一项或多项。

5.根据权利要求1-4任一项所述的方法，其特征在于，

在控制所述子页面逐渐向所述显示屏的第二侧移动的过程中，所述显示屏上显示的父页面的背景颜色逐渐变深，或者，所述显示屏上显示的父页面的透明度逐渐变高。

6.根据权利要求1-5任一项所述的方法，其特征在于，响应于所述用于从所述父页面切换至所述子页面的操作，所述方法还包括：

所述电子设备自动执行以下步骤：

生成遮罩，所述遮罩由遮罩层和所述子页面组成；

控制所述遮罩层和所述子页面向所述显示屏的第二侧移动；其中，所述子页面和所述遮罩层相重叠并且位于所述显示屏内的部分，为，所述显示屏上显示的所述子页面的部分。

7.根据权利要求6所述的方法，其特征在于，

所述遮罩层和所述子页面向所述显示屏的第二侧移动的过程为减速运动过程。

8.根据权利要求1-7任一项所述的方法，其特征在于，在所述子页面全屏显示在所述显示屏上之后，所述方法还包括：

所述电子设备检测到用于从所述子页面切换至所述父页面的操作，响应于所述用于从所述子页面切换至所述父页面的操作，所述电子设备自动执行以下步骤：

由全屏显示所述子页面切换为在所述显示屏上显示所述父页面，并且，在所述显示屏的第一侧叠加显示所述子页面的一部分；所述子页面的一部分的高度与所述子页面的高度相同，所述子页面的一部分的宽度小于所述子页面的宽度；

控制所述子页面逐渐向所述显示屏的第一侧移动，同时，逐渐减少所述子页面在所述显示屏上显示的部分，直至所述父页面全屏显示在所述显示屏上。

9.根据权利要求8所述的方法，其特征在于，所述逐渐减少所述子页面在所述显示屏上显示的部分，具体包括：

逐渐往所述第一侧和/或所述第二侧减少所述子页面在所述显示屏上显示的部分。

10.根据权利要求1-7任一项所述的方法，其特征在于，在所述子页面全屏显示在所述显示屏上之后，所述方法还包括：

所述电子设备检测到用于从所述子页面切换至所述父页面的操作，响应于所述用于从所述子页面切换至所述父页面的操作，所述电子设备自动执行以下步骤：

由全屏显示所述子页面切换为在所述显示屏上显示所述父页面，并且，在所述显示屏的第一侧叠加显示所述子页面的左侧部分；所述子页面的左侧部分的高度与所述子页面的高度相同，所述子页面的左侧部分的宽度小于所述子页面的宽度；

控制所述子页面逐渐向所述显示屏的第一侧移动，同时，逐渐减少所述子页面在所述显示屏上显示的部分，直至所述父页面全屏显示在所述显示屏上。

11.根据权利要求8-10任一项所述的方法，其特征在于，在所述电子设备检测到用于从所述子页面切换至所述父页面的操作之后，在所述父页面全屏显示在所述显示屏上之前，所述显示屏上的所述父页面和所述子页面的显示形式不同；所述显示形式包括：背景颜色、透明度或者边框中的一项或多项。

12.根据权利要求8-11任一项所述的方法，其特征在于，

在所述子页面逐渐向所述显示屏的第一侧移动的过程中，所述显示屏上显示的父页面的背景颜色逐渐变浅，或者，所述显示屏上显示的父页面的透明度逐渐变低。

13.根据权利要求8-12任一项所述的方法，其特征在于，响应于所述用于从所述子页面切换至所述父页面的操作，所述方法还包括：

所述电子设备自动执行以下步骤：

控制遮罩层和所述子页面向所述显示屏的第一侧移动；所述遮罩层和所述子页面组成遮罩，所述遮罩是由所述电子设备响应于所述用于从所述父页面切换至所述子页面的操作而生成的；

其中，所述子页面和所述遮罩层相重叠并且位于所述显示屏内的部分，为，所述显示屏上显示的所述子页面的部分。

14.根据权利要求13所述的方法，其特征在于，

所述遮罩层和所述子页面向所述显示屏的第一侧移动的过程为减速运动过程。

15.根据权利要求1-14任一项所述的方法，其特征在于，

所述父页面为联系人应用提供的用于展示所述电子设备存储的一个或多个联系人信息的用户界面，所述子页面为所述联系人应用提供的用于展示第一联系人的通讯录详情的用户界面。

16.一种电子设备，其特征在于，包括：一个或多个处理器、存储器和显示屏；

所述存储器、所述显示屏与所述一个或多个处理器耦合，所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，所述一个或多个处理器调用所述计算机指令以使得所述电子设备执行：

在所述显示屏上全屏显示应用程序提供的父页面；其中，所述应用程序还提供子页面，所述父页面是所述子页面的上级页面，且，所述父页面和所述子页面的大小相同；

检测到用于从所述父页面切换至所述子页面的操作，响应于所述用于从所述父页面切换至所述子页面的操作，自动执行以下步骤：

由全屏显示所述父页面切换为在所述显示屏的第一侧叠加显示所述子页面的中间部分，所述子页面的中间部分的高度与所述子页面的高度相同，所述子页面的中间部分的宽度小于所述子页面的宽度；

控制所述子页面逐渐向所述显示屏的第二侧移动，同时，逐渐增加所述子页面在所述显示屏上显示的部分，直至所述子页面全屏显示在所述显示屏上，其中，所述第二侧与所述第一侧相反。

17.根据权利要求16所述的电子设备，其特征在于，所述显示屏的第一侧为所述显示屏的右侧，所述显示屏的第二侧为所述显示屏的左侧。

18.根据权利要求16或17所述的电子设备，其特征在于，所述逐渐增加所述子页面在所述显示屏上显示的部分，具体包括：

逐渐往所述第一侧和所述第二侧增加所述子页面在所述显示屏上显示的部分。

19.根据权利要求16-18任一项所述的电子设备，其特征在于，在检测到用于从所述父页面切换至所述子页面的操作之后，在所述子页面全屏显示在所述显示屏上之前，所述显示屏上的所述父页面和所述子页面的显示形式不同；所述显示形式包括：背景颜色、透明度或者边框中的一项或多项。

20.根据权利要求16-19任一项所述的电子设备，其特征在于，在控制所述子页面逐渐向所述显示屏的第二侧移动的过程中，所述显示屏上显示的父页面的背景颜色逐渐变深，或者，所述显示屏上显示的父页面的透明度逐渐变高。

21.根据权利要求16-20任一项所述的电子设备，其特征在于，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：

响应于所述用于从所述父页面切换至所述子页面的操作，自动执行以下步骤：

生成遮罩，所述遮罩由遮罩层和所述子页面组成；

控制所述遮罩层和所述子页面向所述显示屏的第二侧移动；其中，所述子页面和所述遮罩层相重叠并且位于所述显示屏内的部分，为，所述显示屏上显示的所述子页面的部分。

22.根据权利要求21任一项所述的电子设备，其特征在于，

所述遮罩层和所述子页面向所述显示屏的第二侧移动的过程为减速运动过程。

23.根据权利要求16-22任一项所述的电子设备，其特征在于，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：

在所述子页面全屏显示在所述显示屏上之后，检测到用于从所述子页面切换至所述父页面的操作，响应于所述用于从所述子页面切换至所述父页面的操作，自动执行以下步骤：

由全屏显示所述子页面切换为在所述显示屏上显示所述父页面，并且，在所述显示屏的第一侧叠加显示所述子页面的一部分；所述子页面的一部分的高度与所述子页面的高度相同，所述子页面的一部分的宽度小于所述子页面的宽度；

控制所述子页面逐渐向所述显示屏的第一侧移动，同时，逐渐减少所述子页面在所述显示屏上显示的部分，直至所述父页面全屏显示在所述显示屏上。

24.根据权利要求23所述的电子设备，其特征在于，所述逐渐减少所述子页面在所述显示屏上显示的部分，具体包括：

逐渐往所述第一侧和/或所述第二侧减少所述子页面在所述显示屏上显示的部分。

25.根据权利要求16-22任一项所述的电子设备，其特征在于，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：

在所述子页面全屏显示在所述显示屏上之后，检测到用于从所述子页面切换至所述父页面的操作，响应于所述用于从所述子页面切换至所述父页面的操作，自动执行以下步骤：

由全屏显示所述子页面切换为在所述显示屏上显示所述父页面，并且，在所述显示屏的第一侧叠加显示所述子页面的左侧部分；所述子页面的左侧部分的高度与所述子页面的高度相同，所述子页面的左侧部分的宽度小于所述子页面的宽度；

控制所述子页面逐渐向所述显示屏的第一侧移动，同时，逐渐减少所述子页面在所述显示屏上显示的部分，直至所述父页面全屏显示在所述显示屏上。

26.根据权利要求23-25任一项所述的电子设备，其特征在于，在所述电子设备检测到用于从所述子页面切换至所述父页面的操作之后，在所述父页面全屏显示在所述显示屏上之前，所述显示屏上的所述父页面和所述子页面的显示形式不同；所述显示形式包括：背景颜色、透明度或者边框中的一项或多项。

27.根据权利要求23-26任一项所述的电子设备，其特征在于，

在所述子页面逐渐向所述显示屏的第一侧移动的过程中，所述显示屏上显示的父页面的背景颜色逐渐变浅，或者，所述显示屏上显示的父页面的透明度逐渐变低。

28.根据权利要求23-27任一项所述的电子设备，其特征在于，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：

响应于所述用于从所述子页面切换至所述父页面的操作，自动执行以下步骤：

控制遮罩层和所述子页面向所述显示屏的第一侧移动；所述遮罩层和所述子页面组成遮罩，所述遮罩是由所述电子设备响应于所述用于从所述父页面切换至所述子页面的操作而生成的；

其中，所述子页面和所述遮罩层相重叠并且位于所述显示屏内的部分，为，所述显示屏上显示的所述子页面的部分。

29.根据权利要求28所述的电子设备，其特征在于，

所述遮罩层和所述子页面向所述显示屏的第一侧移动的过程为减速运动过程。

30.根据权利要求16-29任一项所述的电子设备，其特征在于，

所述父页面为联系人应用提供的用于展示所述电子设备存储的一个或多个联系人信息的用户界面，所述子页面为所述联系人应用提供的用于展示第一联系人的通讯录详情的用户界面。

31.一种包含指令的计算机程序产品，其特征在于，当所述计算机程序产品在电子设备上运行时，使得所述电子设备执行如权利要求1-15中任一项所述的方法。

32.一种计算机可读存储介质，包括指令，其特征在于，当所述指令在电子设备上运行时，使得所述电子设备执行如权利要求1-15中任一项所述的方法。