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

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

Info

Publication number
WO2020221063A1
WO2020221063A1 PCT/CN2020/085903 CN2020085903W WO2020221063A1 WO 2020221063 A1 WO2020221063 A1 WO 2020221063A1 CN 2020085903 W CN2020085903 W CN 2020085903W WO 2020221063 A1 WO2020221063 A1 WO 2020221063A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
display screen
electronic device
child
parent
Prior art date
Application number
PCT/CN2020/085903
Other languages
English (en)
French (fr)
Inventor
董锋
金鑫
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Priority to US17/607,666 priority Critical patent/US20220214800A1/en
Priority to KR1020217036079A priority patent/KR20210143320A/ko
Priority to EP20799389.0A priority patent/EP3944079A4/en
Priority to JP2021564666A priority patent/JP7337954B2/ja
Publication of WO2020221063A1 publication Critical patent/WO2020221063A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04804—Transparency, e.g. transparent or translucent windows
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04808—Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen

Definitions

  • This application relates to the field of terminals and computer graphics processing technology, and in particular to methods and related devices for switching between parent pages and child pages.
  • Existing method 1 The method of moving the subpages from the bottom of the screen to the top.
  • the user's visual movement path is from the bottom to the top of the screen, and the visual movement path is long and the experience is not good.
  • Existing method 2 The sub-page moves from the right to the left of the screen and changes the display method of transparency. Since switching between parent and child pages is a common operation, it usually takes a short time. In this switching method, the user can see the afterimage of the parent page, and the switching effect is abrupt and the experience is not good.
  • This application provides a method and related devices for switching between a parent page and a child page.
  • the user When switching from a parent page to a child page, the user’s visual movement lines are shortened, providing better visual effects and improving user experience.
  • this application provides a method for switching between a parent page and a child page, and the method is applied to an electronic device.
  • the method may include: the electronic device displays the parent page provided by the application program in full screen on the display screen; wherein, the application program also provides a child page, the parent page is the parent page of the child page, and the size of the parent page and the child page are the same;
  • the device detects the operation for switching from the parent page to the child page, and in response to the operation for switching from the parent page to the child page, the electronic device automatically performs the following steps:
  • the height of the middle part of the child page is the same as the height of the child page, and the width of the middle part of the child page is smaller than the width of the child page;
  • the control subpage gradually moves to the second side of the display screen, and at the same time, gradually increases the part of the subpage displayed on the display screen until the subpage is displayed on the display screen in full screen, wherein the second side is opposite to the first side.
  • the user can see that the child page moves to the second side and the part of the child page displayed on the display gradually increases, and the part of the parent page displayed on the display gradually decreases, until the child page is displayed in full screen on the display On the screen.
  • the way of switching from the parent page to the child page provided by the electronic device is in line with the user's expectations, the visual effect is natural, and the user's visual movement lines are short, which can give the user an optimal user experience.
  • the parent page may include one or more entries.
  • the one or more items can receive an operation (such as a touch operation) to open the corresponding interface.
  • the operation of switching from the parent page to the child page may include an operation (such as a touch operation) acting on the item.
  • the operation is not limited to the operation on the item, and the operation for switching from the parent page to the child page may also include a voice command input by the user, etc., which is not limited in this application.
  • this application does not limit the area of the middle part of the subpage.
  • the middle part of the sub-page does not include the edges on both sides of the sub-page.
  • the first side of the display screen is the right side of the display screen
  • the second side of the display screen is the left side of the display screen. That is to say, in the method of switching from the parent page to the child page provided in the first aspect, the child page moves to the left of the display screen and the content of the child page displayed on the display screen gradually increases until the child page is displayed in full screen on the display On the screen.
  • the electronic device may gradually increase the portion of the sub-page displayed on the display screen to the first side and the second side.
  • the electronic device has the following strategies when increasing the part of the subpage displayed on the display screen:
  • the electronic device first adds the part of the subpage displayed on the display screen to the first side, and then adds the part of the subpage displayed on the display screen to the second side, until the subpage is displayed on the display screen in full screen.
  • the electronic device first adds the part of the subpage displayed on the display screen to the second side, and then adds the part of the subpage displayed on the display screen to the first side, until the subpage is displayed on the display screen in full screen.
  • the electronic device adds the part of the subpage displayed on the display screen to the first side and the second side at the same time, until the subpage is displayed on the display screen in full screen.
  • the electronic device uses any of the above strategies to increase the portion of the child page displayed on the display screen, so that when switching from the parent page to the child page, the fun of switching between the parent and child pages can be increased.
  • the electronic device may also prompt the user that the user is currently switching from the parent page to the child page during the process of switching from the parent page to the child page.
  • the prompt method can include:
  • the display form of the parent page and the child page on the display screen are different.
  • the display form includes one or more of background color, transparency, or border.
  • the electronic device controls the child page to gradually move to the second side of the display screen, the background color of the parent page displayed on the display screen gradually becomes darker, or the transparency of the parent page displayed on the display screen gradually becomes higher.
  • the child page displayed on the display screen is realized by a mask.
  • the mask is composed of a mask layer and a masked layer. Only the overlapping areas of the mask layer and the masked layer can be displayed on the display screen, that is, the user can only see the overlapped area of the mask layer and the masked layer, and the rest of the area is invisible to the user.
  • the mask does not affect the display of other layers in the display.
  • the electronic device in response to the operation for switching from the parent page to the child page, can also automatically perform the following steps: generate a mask, which is composed of a mask layer and a child page; control the transfer of the mask layer and the child page to the display screen The second side moves; the part where the sub-page and the mask layer overlap and is located in the display screen is the part of the sub-page displayed on the display screen.
  • the process of moving the mask layer and the sub-page to the second side of the display screen is a process of decelerating motion. The deceleration movement process can make the process of switching from the parent page to the child page more in line with user expectations.
  • the electronic device may also switch from the child page back to the parent page.
  • the first method After the child page is displayed in full screen on the display screen, the electronic device detects the operation for switching from the child page to the parent page, and in response to the operation for switching from the child page to the parent page, the electronic device Automatically execute the following steps: switch from displaying the child page in full screen to displaying the parent page on the display, and superimpose a part of the child page on the first side of the display; the height of the part of the child page is the same as the height of the child page, The width of a part of the child page is smaller than the width of the child page; the child page is controlled to gradually move to the first side of the display screen, and at the same time, the part of the child page displayed on the display screen is gradually reduced until the parent page is displayed in full screen on the display screen.
  • a part of the subpage may be the middle part of the subpage.
  • a part of the subpage may be the middle part of the subpage mentioned in the first aspect, and reference may be made to related descriptions.
  • a part of the subpage may also be the left part or the right part of the subpage.
  • the child page may include a return key
  • the operation for switching from the child page to the parent page may include an operation (such as a touch operation) acting on the return key. It is not limited to the operation on the back key, and the operation for switching from the child page to the parent page may also include a voice command input by the user, etc., which is not limited in this application.
  • the electronic device may gradually reduce the portion of the subpage displayed on the display screen toward the first side and/or the second side. Specifically, the electronic device has the following strategies when reducing the part of the sub-page displayed on the display screen:
  • the electronic device gradually reduces the part of the subpage displayed on the display screen to the first side, or the electronic device gradually reduces the part of the subpage displayed on the display screen to the second side, until the subpage is no longer displayed on the display screen And the parent page is displayed on the display in full screen.
  • the electronic device first reduces the part of the child page displayed on the display to the first side, and then reduces the part of the child page displayed on the display to the second side, until the child page is no longer displayed on the display and the parent page The full screen is displayed on the display.
  • the electronic device first reduces the part of the child page displayed on the display to the second side, and then reduces the part of the child page displayed on the display to the first side, until the child page is no longer displayed on the display and the parent page The full screen is displayed on the display.
  • the electronic device reduces the part of the child page displayed on the display screen to the first side and the second side at the same time, until the child page is no longer displayed on the display screen and the parent page is displayed on the display screen in full screen.
  • the electronic device reduces the portion of the child page displayed on the display screen through any of the above strategies, so that when switching from the child page to the parent page, the fun of switching between the parent and child pages can be increased.
  • the second method After the child page is displayed on the display in full screen, the electronic device detects the operation for switching from the child page to the parent page, and in response to the operation for switching from the child page to the parent page, the electronic device The following steps are automatically performed: switch from displaying the child page in full screen to displaying the parent page on the display, and superimpose the left part of the child page on the first side of the display; the height of the left part of the child page is the same as the height of the child page With the same height, the width of the left part of the child page is smaller than the width of the child page; control the child page to gradually move to the first side of the display, and at the same time, gradually reduce the part of the child page displayed on the display until the parent page is displayed in full screen On the display.
  • the left part of the subpage includes the left edge of the subpage.
  • the user operation for switching from the child page to the parent page may include: 1. A drag gesture to the first side on the display screen; the duration of the drag gesture is greater than the preset duration. In some embodiments, when the electronic device controls the sub-page to gradually move to the first side of the display screen, the moving speed of the sub-page is determined by the moving speed of the drag gesture. 2. Act on the quick swipe gesture to the first side on the display screen, and the duration of the quick swipe gesture is less than the preset duration.
  • the electronic device may also prompt the user that the user is currently switching from the child page to the parent page.
  • the prompt method can include:
  • the electronic device displays the child page and the parent page in different display forms.
  • the display form of the page may include: the background color of the page, the transparency of the page, or the border of the page.
  • the electronic device controls the child page to gradually move to the first side of the display screen, the background color of the parent page displayed on the display screen gradually becomes lighter, or the transparency of the parent page becomes lower and lower.
  • the child page displayed on the display screen is realized by a mask.
  • the electronic device in response to the operation for switching from the child page to the parent page, can also automatically perform the following steps: control the mask layer and the child page to move to the first side of the display screen; the mask layer and the child page form a mask, The mask is generated by the electronic device in response to the operation for switching from the parent page to the child page; the part where the child page and the mask layer overlap and is located in the display screen is the child page displayed on the display screen part.
  • the process of moving the mask layer and the sub-page to the first side of the display screen is a process of decelerating motion. The decelerating motion process can make the process of switching from the child page to the parent page more in line with user expectations.
  • the parent page and the child page are both provided by the contacts application.
  • the parent page is a user interface provided by the contacts application for displaying one or more contact information stored in the electronic device
  • the child page is a user interface provided by the contacts application for displaying the address book details of the first contact .
  • this application provides an electronic device, which may include: one or more processors, memories, and display screens;
  • the memory and the display screen are coupled with one or more processors, and the memory is used to store computer program code, the computer program code includes computer instructions, and one or more processors call the computer instructions to make the electronic device execute:
  • the parent page provided by the application in full screen on the display screen; among them, the application also provides child pages, the parent page is the parent page of the child page, and the size of the parent page and the child page are the same;
  • the height of the middle part of the child page is the same as the height of the child page, and the width of the middle part of the child page is smaller than the width of the child page;
  • the control subpage gradually moves to the second side of the display screen, and at the same time, gradually increases the part of the subpage displayed on the display screen until the subpage is displayed on the display screen in full screen, wherein the second side is opposite to the first side.
  • the electronic device of the second aspect switches from the parent page to the child page
  • the user can see that the child page moves to the second side and the part of the child page displayed on the display screen gradually increases, and the part of the parent page displayed on the display screen Decrease gradually until the sub-page is displayed on the display in full screen.
  • This switching method meets the user's expectations, the visual effect is natural, and the user's visual movement line is short, which can give the user an optimal user experience.
  • the parent page may include one or more items.
  • the one or more items can receive an operation (such as a touch operation) to open the corresponding interface.
  • the operation of switching from the parent page to the child page may include an operation (such as a touch operation) acting on the item.
  • the operation is not limited to the operation on the item.
  • the operation used to switch from the parent page to the child page may also include a voice command input by the user, etc., which is not limited in this application.
  • this application does not limit the area of the middle part of the subpage.
  • the middle part of the sub-page does not include the edges on both sides of the sub-page.
  • the first side of the display screen is the right side of the display screen
  • the second side of the display screen is the left side of the display screen
  • the electronic device may gradually increase the portion of the sub-page displayed on the display screen to the first side and the second side.
  • the electronic device has the following strategies when increasing the part of the subpage displayed on the display screen:
  • the electronic device first adds the part of the subpage displayed on the display screen to the first side, and then adds the part of the subpage displayed on the display screen to the second side, until the subpage is displayed on the display screen in full screen.
  • the electronic device first adds the part of the subpage displayed on the display screen to the second side, and then adds the part of the subpage displayed on the display screen to the first side, until the subpage is displayed on the display screen in full screen.
  • the electronic device adds the part of the subpage displayed on the display screen to the first side and the second side at the same time, until the subpage is displayed on the display screen in full screen.
  • the electronic device uses any of the above strategies to increase the portion of the child page displayed on the display screen, so that when switching from the parent page to the child page, the fun of switching between the parent and child pages can be increased.
  • the one or more processors are also used to invoke computer instructions to make the electronic device prompt the user that the user is currently switching from the parent page to the child page.
  • the prompt method can include:
  • the display form of the parent page and the child page on the display screen are different.
  • the display form includes one or more of background color, transparency, or border.
  • the electronic device controls the child page to gradually move to the second side of the display screen, the background color of the parent page displayed on the display screen gradually becomes darker, or the transparency of the parent page displayed on the display screen gradually becomes higher.
  • the electronic device implements the child page displayed on the display screen during the process of switching from the parent page to the child page through a mask.
  • the one or more processors are also used for invoking computer instructions to make the electronic device execute: in response to the operation for switching from the parent page to the child page, the following steps are automatically executed: a mask is generated, and the mask is changed from the mask.
  • Layer and sub-page composition control the movement of the mask layer and sub-page to the second side of the display screen; among them, the part where the sub-page and the mask layer overlap and are located in the display screen is the part of the sub-page displayed on the display screen.
  • the process of moving the mask layer and the sub-page to the second side of the display screen is a process of decelerating motion.
  • the decelerating motion process can make the process of switching from the parent page to the child page more in line with user expectations.
  • the one or more processors are further used to invoke computer instructions to make the electronic device execute the process of switching from the child page back to the parent page.
  • the process of switching the electronic device from the child page back to the parent page in this application may include the following two types:
  • the first process of switching from the child page back to the parent page After the child page is displayed in full screen on the display, the operation for switching from the child page to the parent page is detected, in response to the switch from the child page to the parent page.
  • the operation of the page automatically performs the following steps: switch from displaying the child page in full screen to displaying the parent page on the display, and superimpose a part of the child page on the first side of the display; the height of the part of the child page is the same as that of the child page The height of the child page is the same, and the width of a part of the child page is smaller than the width of the child page; control the child page to gradually move to the first side of the display screen, and at the same time, gradually reduce the part of the child page displayed on the display screen until the parent page is displayed in full screen On the display.
  • a part of the subpage may be the middle part of the subpage.
  • a part of the subpage may be the middle part of the subpage mentioned in the first aspect, and reference may be made to related descriptions.
  • a part of the subpage may also be the left part or the right part of the subpage.
  • the child page may include a return key
  • the operation for switching from the child page to the parent page may include an operation (such as a touch operation) acting on the return key. It is not limited to the operation on the back key, and the operation for switching from the child page to the parent page may also include a voice command input by the user, etc., which is not limited in this application.
  • the electronic device may gradually reduce the portion of the subpage displayed on the display screen toward the first side and/or the second side. Specifically, the electronic device has the following strategies when reducing the part of the sub-page displayed on the display screen:
  • the electronic device gradually reduces the part of the subpage displayed on the display screen to the first side, or the electronic device gradually reduces the part of the subpage displayed on the display screen to the second side, until the subpage is no longer displayed on the display screen And the parent page is displayed on the display in full screen.
  • the electronic device first reduces the part of the child page displayed on the display to the first side, and then reduces the part of the child page displayed on the display to the second side, until the child page is no longer displayed on the display and the parent page The full screen is displayed on the display.
  • the electronic device first reduces the part of the child page displayed on the display to the second side, and then reduces the part of the child page displayed on the display to the first side, until the child page is no longer displayed on the display and the parent page The full screen is displayed on the display.
  • the electronic device reduces the part of the child page displayed on the display screen to the first side and the second side at the same time, until the child page is no longer displayed on the display screen and the parent page is displayed on the display screen in full screen.
  • the electronic device reduces the portion of the child page displayed on the display screen through any of the above strategies, so that when switching from the child page to the parent page, the fun of switching between the parent and child pages can be increased.
  • the second process of switching from the child page back to the parent page After the child page is displayed in full screen on the display, the electronic device detects the operation for switching from the child page to the parent page, and responds to the operation for switching from the child page To the parent page operation, the electronic device automatically executes the following steps: switch from displaying the child page in full screen to displaying the parent page on the display, and superimpose the left part of the child page on the first side of the display; the left part of the child page The height of the side part is the same as the height of the sub-page, and the width of the left part of the sub-page is smaller than the width of the sub-page; control the sub-page to gradually move to the first side of the display, and at the same time, gradually reduce the display of the sub-page on the display Part until the parent page is displayed on the display in full screen.
  • the left part of the subpage includes the left edge of the subpage.
  • the user operation for switching from the child page to the parent page may include: 1. A drag gesture that acts on the display screen to the first side; the drag gesture The duration of is greater than the preset duration. In some embodiments, when the electronic device controls the subpage to gradually move to the first side of the display screen, the moving speed of the subpage is determined by the moving speed during the drag gesture. 2. Act on the quick swipe gesture to the first side on the display screen, and the duration of the quick swipe gesture is less than the preset duration.
  • the one or more processors are also used to invoke computer instructions to cause the electronic device to prompt the user that the user is currently switching from the child page to the parent page.
  • the prompt method can include:
  • the electronic device displays the child page and the parent page in different display forms.
  • the display form of the page may include: the background color of the page, the transparency of the page, or the border of the page.
  • the electronic device controls the child page to gradually move to the first side of the display screen, the background color of the parent page displayed on the display screen gradually becomes lighter, or the transparency of the parent page becomes lower and lower.
  • the electronic device implements the child page displayed on the display screen in the process of switching from the child page to the parent page through a mask.
  • the one or more processors are also used to invoke computer instructions to make the electronic device execute: in response to the operation for switching from the child page to the parent page, automatically execute the following steps: control the mask layer and the child page to the display screen The first side of the mobile; the mask layer and the child page form a mask, the mask is generated by the electronic device in response to the operation for switching from the parent page to the child page; wherein the child page and the mask layer overlap and are located
  • the part in the display is the part of the subpage displayed on the display.
  • the process of moving the mask layer and the sub-page to the first side of the display screen is a process of decelerating motion.
  • the decelerating motion process can make the process of switching from the child page to the parent page more in line with user expectations.
  • the parent page and the child page are both provided by the contacts application.
  • the parent page is a user interface provided by the contacts application for displaying one or more contact information stored in the electronic device
  • the child page is a user interface provided by the contacts application for displaying the address book details of the first contact .
  • the present application provides a computer storage medium including computer instructions, which when the computer instructions are executed on an electronic device, cause the electronic device to execute the method provided in the first aspect.
  • this application provides a computer program product, which when the computer program product runs on a computer, causes the computer to execute the method as in the first aspect.
  • the present application provides an electronic device including a functional unit for executing the method of the first aspect.
  • the electronic device when the electronic device displays the parent page in full screen on the display screen, it detects an operation for switching from the parent page to the child page, and in response to this operation, the electronic device can switch from displaying the parent page in full screen to the first page on the display screen.
  • the side overlay displays the middle part of the sub-page, and controls the sub-page to gradually move to the second side of the display screen.
  • Fig. 1A is an exemplary schematic diagram of the parent page provided by the present application.
  • FIG. 1B is an exemplary schematic diagram of a subpage provided by this application.
  • Figure 2 is a schematic diagram of the mask provided by the present application.
  • 3A is a schematic diagram of the structure of the electronic device provided by the present application.
  • 3B is a block diagram of the software structure of the electronic device provided by this application.
  • Figure 4 is a schematic diagram of the main interface on the electronic device provided by the present application.
  • 5A-5D are schematic diagrams of human-computer interaction involved in the process of switching from a parent page to a child page provided by this application;
  • 6A-6D are schematic diagrams of layer movement involved in the process of switching from a parent page to a child page provided by this application;
  • Figure 7 is a schematic diagram of a Bezier curve provided by the present application.
  • 8A-8D are schematic diagrams of human-computer interaction involved in the process of switching from a child page to a parent page provided by this application;
  • 9A-9D are another schematic diagrams of human-computer interaction involved in the process of switching from a child page to a parent page provided by this application;
  • 10A-10D are another schematic diagrams of human-computer interaction involved in the process of switching from a child page to a parent page provided by this application;
  • Figure 11 is a schematic diagram of gestures involved in this application.
  • 12A-12D are schematic diagrams of layer movement involved in the process of switching from a child page to a parent page provided by this application;
  • Fig. 13 is another schematic diagram of Bezier curve provided by this application.
  • FIG. 14 is a schematic diagram of the interaction flow between various software modules and hardware modules when the electronic device provided by the present application switches between parent and child pages.
  • first and second are only used for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Thus, the features defined with “first” and “second” may explicitly or implicitly include one or more of these features. In the description of the embodiments of the present application, unless otherwise specified, “plurality” means two or more.
  • page in the description, claims and drawings of this application can also be called “user interface (UI)", which is the medium for interaction and information exchange between applications or operating systems and users Interface, which realizes the conversion between the internal form of information and the form acceptable to users.
  • UI user interface
  • the user interface of the application is the source code written in a specific computer language such as java, extensible markup language (XML), etc.
  • the interface source code is parsed and rendered on the terminal device, and finally presented as content that can be recognized by the user.
  • Control also called widget, is the basic element of user interface. Typical controls include toolbar, menu bar, text box, button, scroll bar (scrollbar), pictures and text.
  • the attributes and content of the controls in the interface are defined by tags or nodes.
  • XML specifies the controls contained in the interface through nodes such as ⁇ Textview>, ⁇ ImgView>, and ⁇ VideoView>.
  • a node corresponds to a control or attribute in the interface, and the node is parsed and rendered as user-visible content.
  • many applications such as hybrid applications, usually include web pages in their interfaces.
  • a web page can be understood as a special control embedded in the application program interface.
  • a web page is source code written in a specific computer language, such as hypertext markup language (HTML), cascading style sheets, CSS), java script (JavaScript, JS), etc.
  • the source code of a web page can be loaded and displayed as user-recognizable content by a browser or a web page display component with similar functions of the browser.
  • the specific content contained in a web page is also defined by tags or nodes in the source code of the web page.
  • HTML defines the elements and attributes of the web page through ⁇ p>, ⁇ img>, ⁇ video>, and
  • GUI graphical user interface
  • the commonly used form of user interface is a graphical user interface (GUI), which refers to a user interface related to computer operations that is displayed in a graphical manner. It can be an icon, window, control and other interface elements displayed on the display screen of an electronic device.
  • the control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, Widgets, etc. Visual interface elements.
  • the following embodiments of the present application provide a method and related device for switching between a parent page and a child page.
  • the method for switching between a parent page and a child page may include: a method of switching from a parent page to a child page, and switching from a child page to a parent page Methods.
  • a method of switching from a parent page to a child page may include: a method of switching from a parent page to a child page, and switching from a child page to a parent page Methods.
  • the electronic device displays the child page on the display screen, which is from the right side of the display screen
  • Such a switching method can shorten the user's visual movement lines, provide better visual effects, and enhance user experience.
  • the parent page and the child page are relative concepts involved when the application program in the electronic device is running.
  • Parent and child pages are usually provided by the same application.
  • the size of the parent page and the child page are the same, that is, the height of the parent page and the child page are the same, and the width of the parent page and the child page are the same.
  • the logical parent page of a page is fixed and has been determined during application design. When a page is used as a parent page, it can correspond to multiple child pages; when a page is used as a child page, there is only one parent page.
  • a page provided by an application program can be switched to display another page through the return key (the APP-level return key provided by the application or the return key provided by the system navigation bar), the page And another page can form a parent-child page, this page is a child page, and the other page is a parent page.
  • the return key the APP-level return key provided by the application or the return key provided by the system navigation bar
  • both the parent page and the child page are provided by applications installed in the electronic device, and do not include system-level interface elements provided by the operating system of the electronic device.
  • System-level interface elements may include but are not limited to: status bar, navigation bar, floating navigation ball, etc.
  • the main page used to display one or more stored contact information can be the parent page, used to display the address book of any specific contact
  • the detailed page can be a subpage.
  • 1A which shows a user interface 11 provided by an electronic device.
  • the user interface 11 includes a status bar and a user interface (ie, parent page) for displaying one or more contact information stored by the electronic device.
  • 1B which shows a user interface 12 provided by an electronic device.
  • the user interface 12 includes a status bar and a user interface (ie, a subpage) for displaying the address book details of any specific contact.
  • the main page (that is, the parent page) used to display one or more contact information stored in the electronic device, and the page (that is, the subpage) used to display the address book details of any specific contact are all composed of "contacts (contacts)" application, the status bar is provided by the operating system of the electronic device.
  • the page used to display recent contacts can be the parent page, which is used to display the chat details of the user and a specific contact among recent contacts. Can be a subpage.
  • the page used to display the chat details of a specific contact of the user and recent contacts can also be the parent page, which is used to set the chat background of the user and the specific contact, the way of prompting chat messages, etc. Can be a subpage.
  • parent page and child page are only words used in the embodiments of this application, and their meanings have been recorded in the embodiments of this application, and their names do not constitute any limitation on this application.
  • the "parent page” may also be referred to as other terms such as “upper level page”, “N level interface (for example, level 1 interface)".
  • “subpage” may also be referred to as other terms such as “lower level page”, “N+1 level interface (for example, second level interface)”.
  • N is a positive integer greater than or equal to 1.
  • the electronic device first displays the parent page, and when the electronic device detects the user's operation of switching from the parent page to the child page, the electronic device generates a mask,
  • the mask is composed of a mask layer and a masked layer (that is, a child page).
  • the mask allows a part of the child page to be covered and displayed opaquely on the right side of the parent page; the mask layer and the masked layer Move to the left of the screen at the same or different speeds until the sub-page is displayed on the full screen.
  • the user can see the sub-page moving from the right edge to the left edge of the screen, until the sub-page is displayed on the display in full screen.
  • the electronic device first displays the child page, and when the electronic device detects the user's operation of switching from the child page to the parent page, the electronic device generates the parent page And a mask, which is composed of a mask layer and a masked layer (that is, a child page); the mask allows a part of the child page to be covered and displayed opaquely on the right side of the parent page; mask The mask layer and the masked layer move to the right side of the screen at the same or different speeds until the full screen displays the parent page. During this process, the user can see that the child page moves from the left edge to the right edge of the screen, until the child page is no longer displayed on the display screen and the parent page is displayed in full screen on the display screen.
  • the method of switching between parent and child pages provided in the embodiments of the present application can shorten the user's visual movement lines, provide better visual effects, and improve user experience.
  • a mask is a combination of at least two layers.
  • the uppermost layer is called the mask layer
  • the lower layer is called the masked layer.
  • FIG. 2 shows a schematic diagram of a mask. As shown in Figure 2, only the overlapping areas of the masking layer and the masked layer can be displayed on the screen, that is, the user can only see the overlapped area of the masking layer and the masked layer, and the rest The area is not visible to the user.
  • a layer refers to a film containing elements such as text or graphics.
  • One or more layers can be superimposed and combined to form a user interface displayed on the display screen.
  • the full-screen display of the parent page or the child page by the electronic device may include any of the following situations: 1.
  • the parent page or the child page may occupy all the display area of the display screen.
  • the parent page or child page only occupies part of the display area of the display screen.
  • the display screen of the electronic device is a notch screen
  • the middle part of the notch screen displays the parent or child page, and when one or both edges are black, it can also be regarded as a full screen display The parent page or child page.
  • an electronic device when an electronic device displays a parent page or a child page while also displaying system-level interface elements (such as status bar, navigation bar, floating navigation ball, etc.), it can also be regarded as a full screen display of the parent page. Page or subpage.
  • system-level interface elements such as status bar, navigation bar, floating navigation ball, etc.
  • the electronic devices can be mobile phones, tablets, personal digital assistants (personal digital assistants, PDAs), wearable devices, laptops and other portable electronic devices.
  • portable electronic devices include, but are not limited to, portable electronic devices equipped with iOS, android, microsoft or other operating systems.
  • the aforementioned portable electronic device may also be other portable electronic devices, such as a laptop computer with a touch-sensitive surface (such as a touch panel).
  • the electronic device may not be a portable electronic device, but a desktop computer with a touch-sensitive surface (such as a touch panel), or a smart TV.
  • FIG. 3A shows a schematic structural diagram of an exemplary electronic device 100 provided by an embodiment of the present application.
  • the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, and a battery 142 , Antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, earphone jack 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193 , The display screen 194, and the subscriber identification module (SIM) card interface 195, etc.
  • SIM subscriber identification module
  • the sensor module 180 may include pressure sensor 180A, gyroscope sensor 180B, air pressure sensor 180C, magnetic sensor 180D, acceleration sensor 180E, distance sensor 180F, proximity light sensor 180G, fingerprint sensor 180H, temperature sensor 180J, touch sensor 180K, ambient light Sensor 180L, bone conduction sensor 180M, etc.
  • the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100.
  • the electronic device 100 may include more or fewer components than shown, or combine certain components, or split certain components, or arrange different components.
  • the illustrated components can be implemented in hardware, software, or a combination of software and hardware.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (NPU), etc.
  • AP application processor
  • modem processor modem processor
  • GPU graphics processing unit
  • image signal processor image signal processor
  • ISP image signal processor
  • controller video codec
  • digital signal processor digital signal processor
  • DSP digital signal processor
  • NPU neural-network processing unit
  • the different processing units may be independent devices or integrated in one or more processors.
  • the controller can generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching and executing instructions.
  • a memory may also be provided in the processor 110 to store instructions and data.
  • the memory in the processor 110 is a cache memory.
  • the memory can store instructions or data that have just been used or recycled by the processor 110. If the processor 110 needs to use the instruction or data again, it can be directly called from the memory. Repeated accesses are avoided, the waiting time of the processor 110 is reduced, and the efficiency of the system is improved.
  • the processor 110 may include one or more interfaces.
  • the interface may include an integrated circuit (inter-integrated circuit, I2C) interface, an integrated circuit built-in audio (inter-integrated circuit sound, I2S) interface, a pulse code modulation (pulse code modulation, PCM) interface, and a universal asynchronous transmitter (universal asynchronous transmitter) interface.
  • I2C integrated circuit
  • I2S integrated circuit built-in audio
  • PCM pulse code modulation
  • PCM pulse code modulation
  • UART universal asynchronous transmitter
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM subscriber identity module
  • USB Universal Serial Bus
  • the I2C interface is a two-way synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL).
  • the processor 110 may include multiple sets of I2C buses.
  • the processor 110 may be coupled to the touch sensor 180K, charger, flash, camera 193, etc. through different I2C bus interfaces.
  • the processor 110 may couple the touch sensor 180K through an I2C interface, so that the processor 110 and the touch sensor 180K communicate through an I2C bus interface to implement the touch function of the electronic device 100.
  • the I2S interface can be used for audio communication.
  • the processor 110 may include multiple sets of I2S buses.
  • the processor 110 may be coupled with the audio module 170 through an I2S bus to realize communication between the processor 110 and the audio module 170.
  • the audio module 170 may transmit audio signals to the wireless communication module 160 through an I2S interface, so as to realize the function of answering calls through a Bluetooth headset.
  • the PCM interface can also be used for audio communication to sample, quantize and encode analog signals.
  • the audio module 170 and the wireless communication module 160 may be coupled through a PCM bus interface.
  • the audio module 170 may also transmit audio signals to the wireless communication module 160 through the PCM interface, so as to realize the function of answering calls through the Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.
  • the UART interface is a universal serial data bus used for asynchronous communication.
  • the bus can be a two-way communication bus. It converts the data to be transmitted between serial communication and parallel communication.
  • the UART interface is generally used to connect the processor 110 and the wireless communication module 160.
  • the processor 110 communicates with the Bluetooth module in the wireless communication module 160 through the UART interface to implement the Bluetooth function.
  • the audio module 170 may transmit audio signals to the wireless communication module 160 through a UART interface, so as to realize the function of playing music through a Bluetooth headset.
  • the MIPI interface can be used to connect the processor 110 with the display screen 194, the camera 193 and other peripheral devices.
  • the MIPI interface includes camera serial interface (camera serial interface, CSI), display serial interface (display serial interface, DSI), etc.
  • the processor 110 and the camera 193 communicate through a CSI interface to implement the shooting function of the electronic device 100.
  • the processor 110 and the display screen 194 communicate through a DSI interface to realize the display function of the electronic device 100.
  • the GPIO interface can be configured through software.
  • the GPIO interface can be configured as a control signal or as a data signal.
  • the GPIO interface can be used to connect the processor 110 with the camera 193, the display screen 194, the wireless communication module 160, the audio module 170, the sensor module 180, and so on.
  • GPIO interface can also be configured as I2C interface, I2S interface, UART interface, MIPI interface, etc.
  • the USB interface 130 is an interface that complies with the USB standard specification, and specifically may be a Mini USB interface, a Micro USB interface, a USB Type C interface, and so on.
  • the USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect headphones and play audio through the headphones. This interface can also be used to connect other electronic devices, such as AR devices.
  • the interface connection relationship between the modules illustrated in the embodiment of the present application is merely a schematic description, and does not constitute a structural limitation of the electronic device 100.
  • the electronic device 100 may also adopt different interface connection modes in the foregoing embodiments, or a combination of multiple interface connection modes.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the charging management module 140 may receive the charging input of the wired charger through the USB interface 130.
  • the charging management module 140 may receive the wireless charging input through the wireless charging coil of the electronic device 100. While the charging management module 140 charges the battery 142, it can also supply power to the electronic device through the power management module 141.
  • the power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110.
  • the power management module 141 receives input from the battery 142 and/or the charging management module 140, and supplies power to the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160.
  • the power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle times, and battery health status (leakage, impedance).
  • the power management module 141 may also be provided in the processor 110.
  • the power management module 141 and the charging management module 140 may also be provided in the same device.
  • the wireless communication function of the electronic device 100 can be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor.
  • the antenna 1 and the antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization.
  • antenna 1 can be multiplexed as a diversity antenna of a wireless local area network.
  • the antenna can be used in combination with a tuning switch.
  • the mobile communication module 150 can provide a wireless communication solution including 2G/3G/4G/5G and the like applied to the electronic device 100.
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.
  • the mobile communication module 150 can receive electromagnetic waves by the antenna 1, and perform processing such as filtering, amplifying and transmitting the received electromagnetic waves to the modem processor for demodulation.
  • the mobile communication module 150 can also amplify the signal modulated by the modem processor, and convert it into electromagnetic waves for radiation via the antenna 1.
  • at least part of the functional modules of the mobile communication module 150 may be provided in the processor 110.
  • at least part of the functional modules of the mobile communication module 150 and at least part of the modules of the processor 110 may be provided in the same device.
  • the modem processor may include a modulator and a demodulator.
  • the modulator is used to modulate the low frequency baseband signal to be sent into a medium and high frequency signal.
  • the demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. Then the demodulator transmits the demodulated low-frequency baseband signal to the baseband processor for processing.
  • the low-frequency baseband signal is processed by the baseband processor and then passed to the application processor.
  • the application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the receiver 170B, etc.), or displays an image or video through the display screen 194.
  • the modem processor may be an independent device.
  • the modem processor may be independent of the processor 110 and be provided in the same device as the mobile communication module 150 or other functional modules.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), and global navigation satellites.
  • WLAN wireless local area networks
  • BT wireless fidelity
  • GNSS global navigation satellite system
  • FM frequency modulation
  • NFC near field communication technology
  • infrared technology infrared, IR
  • the wireless communication module 160 may be one or more devices integrating at least one communication processing module.
  • the wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110.
  • the wireless communication module 160 can also receive the signal to be sent from the processor 110, perform frequency modulation, amplify it, and convert it into electromagnetic wave radiation via the antenna 2.
  • the antenna 1 of the electronic device 100 is coupled with the mobile communication module 150, and the antenna 2 is coupled with the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology.
  • the wireless communication technologies may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), broadband Code division multiple access (wideband code division multiple access, WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC , FM, and/or IR technology, etc.
  • the GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi-zenith satellite system (quasi -zenith satellite system, QZSS) and/or satellite-based augmentation systems (SBAS).
  • GPS global positioning system
  • GLONASS global navigation satellite system
  • BDS Beidou navigation satellite system
  • QZSS quasi-zenith satellite system
  • SBAS satellite-based augmentation systems
  • the electronic device 100 implements a display function through a GPU, a display screen 194, and an application processor.
  • the GPU is a microprocessor for image processing, connected to the display 194 and the application processor.
  • the GPU is used to perform mathematical and geometric calculations for graphics rendering.
  • the processor 110 may include one or more GPUs, which execute program instructions to generate or change display information.
  • the display screen 194 is used to display images, videos, etc.
  • the display screen 194 includes a display panel.
  • the display panel can adopt liquid crystal display (LCD), organic light-emitting diode (OLED), active-matrix organic light-emitting diode or active-matrix organic light-emitting diode (active-matrix organic light-emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • active-matrix organic light-emitting diode active-matrix organic light-emitting diode
  • AMOLED flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, quantum dot light-emitting diode (QLED), etc.
  • the electronic device 100 may include one or N display screens 194, and N is a positive integer greater than one.
  • the electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.
  • the ISP is used to process the data fed back from the camera 193. For example, when taking a picture, the shutter is opened, the light is transmitted to the photosensitive element of the camera through the lens, the light signal is converted into an electrical signal, and the photosensitive element of the camera transfers the electrical signal to the ISP for processing and is converted into an image visible to the naked eye.
  • ISP can also optimize the image noise, brightness, and skin color. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene.
  • the ISP may be provided in the camera 193.
  • the camera 193 is used to capture still images or videos.
  • the object generates an optical image through the lens and projects it to the photosensitive element.
  • the photosensitive element may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor.
  • CMOS complementary metal-oxide-semiconductor
  • the photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP to convert it into a digital image signal.
  • ISP outputs digital image signals to DSP for processing.
  • DSP converts digital image signals into standard RGB, YUV and other formats.
  • the electronic device 100 may include 1 or N cameras 193, and N is a positive integer greater than 1.
  • Digital signal processors are used to process digital signals. In addition to digital image signals, they can also process other digital signals. For example, when the electronic device 100 selects the frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.
  • Video codecs are used to compress or decompress digital video.
  • the electronic device 100 may support one or more video codecs. In this way, the electronic device 100 can play or record videos in a variety of encoding formats, such as: moving picture experts group (MPEG) 1, MPEG2, MPEG3, MPEG4, and so on.
  • MPEG moving picture experts group
  • NPU is a neural-network (NN) computing processor.
  • NN neural-network
  • the NPU can realize applications such as intelligent cognition of the electronic device 100, such as image recognition, face recognition, voice recognition, text understanding, and so on.
  • the external memory interface 120 may be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to realize the data storage function. For example, save music, video and other files in an external memory card.
  • the internal memory 121 may be used to store computer executable program code, where the executable program code includes instructions.
  • the internal memory 121 may include a storage program area and a storage data area.
  • the storage program area can store an operating system, at least one application program (such as a sound playback function, an image playback function, etc.) required by at least one function.
  • the data storage area can store data (such as audio data, phone book, etc.) created during the use of the electronic device 100.
  • the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.
  • the processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 121 and/or instructions stored in a memory provided in the processor.
  • the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor. For example, music playback, recording, etc.
  • the audio module 170 is used to convert digital audio information into an analog audio signal for output, and is also used to convert an analog audio input into a digital audio signal.
  • the audio module 170 can also be used to encode and decode audio signals.
  • the audio module 170 may be provided in the processor 110, or part of the functional modules of the audio module 170 may be provided in the processor 110.
  • the speaker 170A also called a “speaker” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 can listen to music through the speaker 170A, or listen to a hands-free call.
  • the receiver 170B also called “earpiece” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 answers a call or voice message, it can receive the voice by bringing the receiver 170B close to the human ear.
  • the microphone 170C also called “microphone”, “microphone”, is used to convert sound signals into electrical signals.
  • the user can approach the microphone 170C through the mouth to make a sound, and input the sound signal to the microphone 170C.
  • the electronic device 100 may be provided with at least one microphone 170C. In other embodiments, the electronic device 100 may be provided with two microphones 170C, which can implement noise reduction functions in addition to collecting sound signals. In some other embodiments, the electronic device 100 can also be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify sound sources, and realize directional recording functions.
  • the earphone interface 170D is used to connect wired earphones.
  • the earphone interface 170D may be a USB interface 130, or a 3.5mm open mobile terminal platform (OMTP) standard interface, or a cellular telecommunications industry association (cellular telecommunications industry association of the USA, CTIA) standard interface.
  • OMTP open mobile terminal platform
  • CTIA cellular telecommunications industry association
  • the pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal.
  • the pressure sensor 180A may be provided on the display screen 194.
  • the capacitive pressure sensor may include at least two parallel plates with conductive material. When a force is applied to the pressure sensor 180A, the capacitance between the electrodes changes.
  • the electronic device 100 determines the intensity of the pressure according to the change in capacitance.
  • the electronic device 100 detects the intensity of the touch operation according to the pressure sensor 180A.
  • the electronic device 100 may also calculate the touched position according to the detection signal of the pressure sensor 180A.
  • touch operations that act on the same touch location but have different touch operation strengths may correspond to different operation instructions. For example: when a touch operation whose intensity of the touch operation is less than the first pressure threshold is applied to the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, an instruction to create a new short message is executed.
  • the gyro sensor 180B may be used to determine the movement posture of the electronic device 100.
  • the angular velocity of the electronic device 100 around three axes ie, x, y, and z axes
  • the gyro sensor 180B can be used for image stabilization.
  • the gyro sensor 180B detects the shake angle of the electronic device 100, calculates the distance that the lens module needs to compensate according to the angle, and allows the lens to counteract the shake of the electronic device 100 through reverse movement to achieve anti-shake.
  • the gyro sensor 180B can also be used for navigation and somatosensory game scenes.
  • the air pressure sensor 180C is used to measure air pressure.
  • the electronic device 100 calculates the altitude based on the air pressure value measured by the air pressure sensor 180C to assist positioning and navigation.
  • the magnetic sensor 180D includes a Hall sensor.
  • the electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip holster.
  • the electronic device 100 can detect the opening and closing of the flip according to the magnetic sensor 180D.
  • features such as automatic unlocking of the flip cover are set.
  • the acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of electronic devices, and used in applications such as horizontal and vertical screen switching, pedometers and so on.
  • the electronic device 100 can measure the distance by infrared or laser. In some embodiments, when shooting a scene, the electronic device 100 can use the distance sensor 180F to measure the distance to achieve fast focusing.
  • the proximity light sensor 180G may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.
  • the light emitting diode may be an infrared light emitting diode.
  • the electronic device 100 emits infrared light to the outside through the light emitting diode.
  • the electronic device 100 uses a photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that there is no object near the electronic device 100.
  • the electronic device 100 can use the proximity light sensor 180G to detect that the user holds the electronic device 100 close to the ear to talk, so as to automatically turn off the screen to save power.
  • the proximity light sensor 180G can also be used in leather case mode, and the pocket mode will automatically unlock and lock the screen.
  • the ambient light sensor 180L is used to sense the brightness of the ambient light.
  • the electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived brightness of the ambient light.
  • the ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures.
  • the ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in the pocket to prevent accidental touch.
  • the fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to realize fingerprint unlocking, access application locks, fingerprint photographs, fingerprint answering calls, etc.
  • the temperature sensor 180J is used to detect temperature.
  • the electronic device 100 uses the temperature detected by the temperature sensor 180J to execute a temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold value, the electronic device 100 executes to reduce the performance of the processor located near the temperature sensor 180J, so as to reduce power consumption and implement thermal protection.
  • the electronic device 100 when the temperature is lower than another threshold, the electronic device 100 heats the battery 142 to avoid abnormal shutdown of the electronic device 100 due to low temperature.
  • the electronic device 100 boosts the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.
  • Touch sensor 180K also called “touch panel”.
  • the touch sensor 180K may be disposed on the display screen 194, and the touch screen is composed of the touch sensor 180K and the display screen 194, which is also called a “touch screen”.
  • the touch sensor 180K is used to detect touch operations acting on or near it.
  • the touch sensor can pass the detected touch operation to the application processor to determine the type of touch event.
  • the visual output related to the touch operation can be provided through the display screen 194.
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100, which is different from the position of the display screen 194.
  • the bone conduction sensor 180M can acquire vibration signals.
  • the bone conduction sensor 180M can obtain the vibration signal of the vibrating bone mass of the human voice.
  • the bone conduction sensor 180M can also contact the human pulse and receive the blood pressure pulse signal.
  • the bone conduction sensor 180M may also be provided in the earphone, combined with the bone conduction earphone.
  • the audio module 170 can parse the voice signal based on the vibration signal of the vibrating bone block of the voice obtained by the bone conduction sensor 180M, and realize the voice function.
  • the application processor may analyze the heart rate information based on the blood pressure beat signal obtained by the bone conduction sensor 180M, and realize the heart rate detection function.
  • the button 190 includes a power button, a volume button, and so on.
  • the button 190 may be a mechanical button. It can also be a touch button.
  • the electronic device 100 may receive key input, and generate key signal input related to user settings and function control of the electronic device 100.
  • the motor 191 can generate vibration prompts.
  • the motor 191 can be used for incoming call vibration notification, and can also be used for touch vibration feedback.
  • touch operations applied to different applications can correspond to different vibration feedback effects.
  • Acting on touch operations in different areas of the display screen 194, the motor 191 can also correspond to different vibration feedback effects.
  • Different application scenarios for example: time reminding, receiving information, alarm clock, games, etc.
  • the touch vibration feedback effect can also support customization.
  • the indicator 192 may be an indicator light, which may be used to indicate the charging status, power change, or to indicate messages, missed calls, notifications, and so on.
  • the SIM card interface 195 is used to connect to the SIM card.
  • the SIM card can be inserted into the SIM card interface 195 or pulled out from the SIM card interface 195 to achieve contact and separation with the electronic device 100.
  • the electronic device 100 may support 1 or N SIM card interfaces, and N is a positive integer greater than 1.
  • the SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, etc.
  • the same SIM card interface 195 can insert multiple cards at the same time. The types of the multiple cards can be the same or different.
  • the SIM card interface 195 can also be compatible with different types of SIM cards.
  • the SIM card interface 195 may also be compatible with external memory cards.
  • the electronic device 100 interacts with the network through the SIM card to implement functions such as call and data communication.
  • the electronic device 100 adopts an eSIM, that is, an embedded SIM card.
  • the eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.
  • the software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.
  • the embodiment of the present application takes a layered Android system as an example to illustrate the software structure of the electronic device 100.
  • FIG. 3B is a software structure block diagram of the electronic device 100 according to an embodiment of the present application.
  • the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Communication between layers through software interface.
  • the Android system is divided into four layers, from top to bottom, the application layer, the application framework layer, the Android runtime and system library, and the kernel layer.
  • the application layer can include a series of application packages.
  • the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.
  • the application framework layer provides application programming interfaces (application programming interface, API) and programming frameworks for applications in the application layer.
  • the application framework layer includes some predefined functions.
  • the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and so on.
  • the window manager is used to manage window programs.
  • the window manager can obtain the size of the display, determine whether there is a status bar, lock the screen, take a screenshot, etc.
  • the content provider is used to store and retrieve data and make these data accessible to applications.
  • the data may include video, image, audio, phone calls made and received, browsing history and bookmarks, phone book, etc.
  • the view system includes visual controls, such as controls that display text and controls that display pictures.
  • the view system can be used to build applications.
  • the display interface can be composed of one or more views.
  • a display interface that includes a short message notification icon may include a view that displays text and a view that displays pictures.
  • the phone manager is used to provide the communication function of the electronic device 100. For example, the management of the call status (including connecting, hanging up, etc.).
  • the resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, etc.
  • the notification manager enables the application to display notification information in the status bar, which can be used to convey notification-type messages, and it can disappear automatically after a short stay without user interaction.
  • the notification manager is used to notify the download completion, message reminder, etc.
  • the notification manager can also be a notification that appears in the status bar at the top of the system in the form of a chart or scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialog window. For example, text messages are prompted in the status bar, prompt sounds, electronic devices vibrate, and indicator lights flash.
  • Android Runtime includes core libraries and virtual machines. Android runtime is responsible for the scheduling and management of the Android system.
  • the core library consists of two parts: one part is the function functions that the java language needs to call, and the other part is the core library of Android.
  • the application layer and the application framework layer run in a virtual machine.
  • the virtual machine executes the java files of the application layer and the application framework layer as binary files.
  • the virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.
  • the system library can include multiple functional modules. For example: surface manager (surface manager), media library (Media Libraries), three-dimensional graphics processing library (for example: OpenGL ES), 2D graphics engine (for example: SGL), etc.
  • the surface manager is used to manage the display subsystem and provides a combination of 2D and 3D layers for multiple applications.
  • the media library supports playback and recording of a variety of commonly used audio and video formats, as well as still image files.
  • the media library can support multiple audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.
  • the 3D graphics processing library is used to realize 3D graphics drawing, image rendering, synthesis, and layer processing.
  • the 2D graphics engine is a drawing engine for 2D drawing.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.
  • the corresponding hardware interrupt is sent to the kernel layer.
  • the kernel layer processes touch operations into original input events (including touch coordinates, time stamps of touch operations, etc.).
  • the original input events are stored in the kernel layer.
  • the application framework layer obtains the original input event from the kernel layer, and identifies the control corresponding to the input event. Taking the touch operation as a touch click operation, and the control corresponding to the click operation is the control of the camera application icon as an example, the camera application calls the interface of the application framework layer to start the camera application, and then starts the camera driver by calling the kernel layer.
  • the camera 193 captures still images or videos.
  • FIG. 4 exemplarily shows an exemplary user interface 41 on the electronic device 100 for displaying application programs installed by the electronic device 100.
  • the user interface 41 may include: a status bar 401, a calendar indicator 402, a weather indicator 403, a tray 404 with commonly used application icons, a navigation bar 405, and other application icons. among them:
  • the status bar 401 may include: one or more signal strength indicators 401A of mobile communication signals (also called cellular signals), the name of the operator (for example, "China Mobile") 401B, and wireless fidelity (Wi-Fi) )
  • One or more signal strength indicators 401C, battery status indicator 401D, and time indicator 401E of the signal are included in the signal.
  • the calendar indicator 402 can be used to indicate the current time, such as date, day of the week, hour and minute information, and so on.
  • the weather indicator 403 can be used to indicate the type of weather, such as cloudy to clear, light rain, etc., and can also be used to indicate information such as temperature.
  • the tray 404 with icons of commonly used application programs can display: a phone icon 404A, a contact icon 404B, a short message icon 404C, and a camera icon 404D.
  • the navigation bar 405 may include system navigation keys such as a return key 405A, a home screen key 405B, and a multi-task key 405C.
  • system navigation keys such as a return key 405A, a home screen key 405B, and a multi-task key 405C.
  • the electronic device 100 may display the previous page of the current page.
  • the electronic device 100 may display the home interface.
  • the electronic device 100 may display the task recently opened by the user.
  • the naming of each navigation key can also be other, which is not limited in this application. It is not limited to virtual keys, and each navigation key in the navigation bar 405 can also be implemented as a physical key.
  • Other application icons can be for example: Wechat icon 406, QQ icon 407, Twitter icon 408, Facebook icon 409, mailbox icon 210, cloud sharing icon 211, memo The icon 212 of, the icon 213 of Alipay, the icon 214 of gallery, and the icon 215 of settings.
  • the user interface 41 may also include a page indicator 216.
  • Other application program icons may be distributed on multiple pages, and the page indicator 216 may be used to indicate which application program in which page the user is currently browsing. The user can slide the area of other application icons left and right to browse application icons in other pages.
  • the user interface 41 exemplarily shown in FIG. 4 may be a home screen. It can be understood that FIG. 4 only exemplarily shows the user interface on the electronic device 100, and should not constitute a limitation to the embodiment of the present application.
  • the following uses the user interface provided by the "contacts" application installed on the electronic device as an example to respectively introduce the method of switching from the parent page to the child page provided in this application and the method of switching from the child page to the parent page.
  • the electronic device first displays the parent page in full screen on the display screen, and then superimposes the child page on the first side of the display screen and moves to the second side of the display screen.
  • the part of the subpage displayed on the display screen gradually increases during the movement until the subpage is displayed on the display screen in full screen.
  • the first side and the second side are opposite.
  • 5A-5D take the "contacts" application installed on the electronic device as an example, showing a schematic diagram of the process of switching from a parent page to a child page provided by an embodiment of the present application.
  • Contacts is an application program installed on electronic devices such as smart phones and tablet computers for displaying contact information. The embodiment of the present application does not limit the name of the application program.
  • the user interface used to display one or more contact entries (also referred to as the "contact home page"), and used to display the address book details of a specific contact
  • the user interface forms a pair of parent-child pages.
  • the user interface for displaying one or more contact entries is the parent page, and the user interface for displaying the address book details of a specific contact is a child page.
  • the user interface 51 provided by the UI embodiment exemplarily shown in FIG. 5A is described below.
  • the user interface 51 may be a user interface opened by the user clicking the contact icon 404B in FIG. 4.
  • the electronic device may display the user interface 51 in full screen on the display screen.
  • the user interface 51 may include: a status bar 501, and a user interface (that is, a parent page) for displaying one or more contact entries.
  • the status bar 501 can refer to the status bar 401 in the user interface 41 shown in FIG. 4, which will not be repeated here.
  • the user interface (ie parent page) for displaying one or more contact entries may include: application title bar 502, controls 503, search box 504, letter display bar 505, "group” entry 506, and "business card holder” Entry 507, "My Business Card” entry 508, one or more contact entries such as 509A-509E, menu 510, and control 511.
  • the application title bar 502 can be used to indicate that the current page is used to display one or more contact information stored in the electronic device.
  • the presentation form of the application title bar 502 may be text information "contacts", icons or other forms.
  • the control 503 may receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may display other controls, such as a control for setting a contact homepage.
  • a user operation for example, a touch operation
  • the electronic device may display other controls, such as a control for setting a contact homepage.
  • the "group" entry 506 may receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may display information of one or more groups created by the user.
  • a group consists of one or more contacts.
  • the "business card holder" item 507 may receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may display the information carried by one or more paper business cards that have been scanned (for example, scanned by a camera).
  • a user operation for example, a touch operation
  • the electronic device may display the information carried by one or more paper business cards that have been scanned (for example, scanned by a camera).
  • the "my business card” entry 508 may receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may display the information of the own business card created by the user.
  • a user operation for example, a touch operation
  • the contact entry is used to display the information of one or more contacts stored in the electronic device.
  • the information of the contact may include an avatar, name, nickname, phone number, etc.
  • the contact entry may also receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may display a page for displaying the contact details of the contact corresponding to the entry.
  • a user operation for example, a touch operation
  • the menu 510 includes a control 510A, a control 510B, and a control 510C.
  • the content displayed in the user interface for displaying one or more contact entries is related to the currently selected control in the menu 510.
  • the control 510B in the current menu 510 is selected, and the user interface 51 is used to display one or more contact entries stored in the electronic device.
  • the electronic device may display a dialing interface.
  • the control 510C is selected, that is, when the control 510C receives a user operation (such as a touch operation), in response to the detected user operation, the electronic device can display the information of the favorite contact.
  • the control 511 may receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may display an interface for adding a new contact.
  • a user operation for example, a touch operation
  • the contact entry 509B can receive a user operation (such as a touch operation), and in response to the user operation, the electronic device can display a full screen on the display screen for displaying the contact "Andy" corresponding to the contact entry 509B. "'S address book details page (ie sub-page).
  • the user operation (for example, touch operation) received by the electronic device on the contact entry 509B of the user interface 51 is a user operation for switching from a parent page to a child page.
  • the user interface 54 shown in FIG. 5D shows an implementation manner of the address book detail page (ie, sub-page) of the contact "Andy" corresponding to the contact entry 509B.
  • the user interface 54 may include: a status bar 512, and a user interface (ie, a sub-page) for displaying the address book details of a specific contact.
  • the status bar 512 can refer to the status bar 401 in the user interface 41 shown in FIG. 4, which will not be repeated here.
  • the user interface used to display the address book details of a specific contact may include: return key 513, contact avatar 514, contact name 515, mobile phone number or landline number display area 516, control 517, control 518.
  • the return key 513 may receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may return to display the user interface 51.
  • a user operation for example, a touch operation
  • the contact avatar 514 may be an avatar of a contact (for example, the contact "Andy") stored in the electronic device.
  • the contact name 515 may be the name of a contact (for example, the contact "Andy") stored in the electronic device, such as the text information "Andy”.
  • the mobile phone number or landline number display area 516 is used to display the mobile phone number or landline number of a contact (for example, the contact "Andy") stored in the electronic device.
  • the control 517 can receive a user operation (such as a touch operation), and in response to the detected user operation, the electronic device can initiate a video call with the contact.
  • the control 518 can receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device can display a short message chat interface with the contact.
  • the incoming call ringtone information display area 519 can display information about the ringtone that the electronic device responds to when it receives an incoming call initiated by the contact.
  • the recent call record display area 520 may display a detailed record of the most recent call between the electronic device and the contact, and the record may include call time, incoming/outgoing calls, call duration, caller number, and so on.
  • the record may be, for example, the text message "Yesterday 11:30, incoming call, 34 seconds" in the user interface 54 shown in FIG. 5D.
  • the control 521A may receive a user operation (for example, a touch operation), and in response to the detected user operation, the electronic device may save the contact (for example, the contact "Andy").
  • a user operation for example, a touch operation
  • the electronic device may save the contact (for example, the contact "Andy").
  • the control 521B can receive a user operation (such as a touch operation), and in response to the detected user operation, the electronic device displays an interface for editing the information of the contact (such as the contact "Andy").
  • the information of the contact may include an avatar, Name, phone number, landline number, etc.
  • the control 521C can receive a user operation (such as a touch operation), and in response to the detected user operation, the electronic device can display more controls, such as a control for deleting the contact, a control for adding the contact to a blacklist, etc. .
  • the process of switching the display screen of the electronic device from displaying the user interface 51 to displaying the user interface 54 that is, the process of switching from the parent page to the child page, conforms to the user's expectations, the visual effect is natural, and the user's visual movement is dynamic.
  • the line is shorter, which can give users the best experience.
  • Figures 5A-5D show the process of switching from the user interface for displaying one or more contact entries to the user interface for displaying the address book details of a specific contact, that is, switching from the parent page to the child page the process of.
  • the electronic device in response to a user operation detected on the contact entry 509B in the user interface 51, the electronic device generates or opens the corresponding subpage (ie, the address book details page of the contact "Andy"), and Move the sub-page from the right to the left of the display until the sub-page is displayed on the display in full screen.
  • the corresponding subpage ie, the address book details page of the contact "Andy”
  • Figures 5B-5D show the user interface provided by the electronic device on the display screen at three different time points in the process of moving from the right side to the left side of the display screen to display the sub-pages.
  • the electronic device can continuously display the first part of the parent page in the first area of the display screen, and display the first part of the child page in the second area of the display screen.
  • the user interface 52 shown in FIG. 5B can be regarded as the electronic device superimposing and displaying the first part of the sub-page in the second area of the display screen.
  • the first area of the display screen is the left area of the display screen
  • the second area of the display screen is the right area of the display screen.
  • the first area and the second area do not overlap each other and combine to form a display area of the display screen.
  • the first area is the left half of the display screen
  • the second area is the right half of the display screen.
  • the first area or the second area may not be a rectangular area, but may also be implemented in other shapes, such as fan-shaped, semi-circular, semi-elliptical, or other irregular shapes.
  • the first area may also be It is the fan-shaped area on the upper left of the display screen, etc.
  • the positions of the first area and the second area in the display screen can be determined in the following ways: 1.
  • the positions of the first area and the second area in the display screen can be preset by the electronic device.
  • the electronic device may set the left half of the display screen as the first area, and set the right half of the display screen as the second area.
  • the position of the first area and the second area in the display screen can be independently set by the user according to his own preferences. For example, the user can set the left half of the display screen as the first area, and set the right half of the display screen as the second area.
  • the first part of the parent page is the part of the parent page displayed in the first area of the display screen.
  • the first part of the parent page may be the left half of the parent page.
  • the first part of the subpage is any part of the subpage.
  • the first part of the subpage may be the middle part of the subpage.
  • the height of the middle part of the subpage is the same as the height of the subpage, and the width of the middle part of the subpage is smaller than the width of the subpage.
  • the embodiment of the present application does not limit the area of the middle part of the subpage.
  • the middle part of the sub-page does not include the edges on both sides of the sub-page. It is not limited to the middle part of the subpage, and the first part of the subpage may also be the left half, right half or any other part of the subpage.
  • the first part of the sub-page may not be a rectangular area, but may also be implemented in other shapes, such as a fan shape, a semicircle, an ellipse, or other irregular shapes, such as the first part of the sub-page.
  • a part can also be a fan-shaped part at the upper right of the subpage.
  • the first part of the subpage can be determined in the following ways: 1.
  • the first part of the subpage can be preset by the electronic device. For example, the electronic device may set the middle part of the subpage as the first part of the subpage.
  • the first part of the subpage can be set by the user according to his or her own preferences. For example, the user can set the left half of the subpage as the first part of the subpage.
  • the electronic device may display the user interface 53 shown in FIG. 5C on the display screen.
  • the electronic device may continuously display the second part of the parent page in the third area of the display screen, and display the second part of the child page in the fourth area of the display screen.
  • the user interface 53 shown in FIG. 5C can be regarded as the electronic device superimposing and displaying the second part of the sub-page in the fourth area of the display screen.
  • the third area of the display screen is the left area of the display screen, and the third area belongs to the first area.
  • the fourth area of the display screen is the right area of the display screen, and the fourth area includes the second area.
  • the third area and the fourth area do not overlap each other and combine to form a display area of the display screen.
  • the third area may be the left third of the display screen, and the fourth area may be the right two thirds of the display screen.
  • the third area or the fourth area may not be a rectangular area, but may also be implemented in other shapes, such as fan-shaped, semi-circular, semi-elliptical, or other irregular shapes.
  • the fourth area is also It can be a fan-shaped area on the upper right of the display screen.
  • the second part of the parent page is the part of the parent page displayed in the third area of the display screen.
  • the second part of the parent page belongs to the first part of the parent page.
  • the second part of the parent page may be the left third part of the parent page.
  • the second part of the subpage includes the first part of the subpage.
  • the second part of the subpage may be the left two-thirds part of the subpage.
  • the second part of the sub-page may not be a rectangular area, but may also be implemented in other shapes, such as a fan shape, a semicircle, an ellipse, or other irregular shapes, such as the sub-page
  • the second part can also be the fan-shaped part at the upper right of the subpage.
  • the electronic device may display the user interface 54 shown in FIG. 5D on the display screen.
  • the user interface 54 can refer to the related description of the foregoing embodiment, and details are not described herein again.
  • the electronic device may also prompt the user that the user is currently switching from the parent page to the child page.
  • the prompt method may include: 1.
  • the parent page and the child page are displayed on the display screen at the same time, the parent page and the child page are displayed in different display forms.
  • the display form of the page may include: the background color of the page, the transparency of the page, or the border of the page.
  • the background color of the parent page is light black, and the background color of the child page is white.
  • the background color of the parent page displayed on the display screen gradually becomes darker, or the transparency of the parent page becomes higher and higher. 3.
  • the transparency of the child page displayed on the display screen becomes lower and lower.
  • FIGS. 5B-5D only show the user interface provided by the electronic device on the display screen at three different time points in the process of moving from the right side to the left side of the display screen to display the sub-pages.
  • the electronic device when the electronic device displays FIG. 5A-5B, or, FIG. 5B-FIG. 5C, or, at other time points between FIG. 5C-FIG. 5D, the electronic device may also be displayed on the display screen.
  • Other similar user interfaces are provided, which are not shown one by one here.
  • the electronic device can continuously display system-level interface elements provided by the operating system on the provided user interface, for example, FIG. 5A- Figure 5D shows the status bar in the user interface.
  • the first side may be the direction in which the second area is located in the display screen, and the second side may be the direction in which the first area is located in the display screen.
  • the first side of the display screen may be the right side of the display screen, and the second side of the display screen may be the left side of the display screen.
  • the embodiment of the present application gradually increases the part of the child page displayed on the display screen from the middle part of the child page, and in the prior art, from the left edge part of the child page Compared with the display part of the display screen, the switching effect of adding sub-pages is different and more interesting.
  • the electronic device may gradually increase the portion of the sub-page displayed on the display screen to the first side and the second side. Specifically, the electronic device has the following strategies when increasing the part of the subpage displayed on the display screen:
  • the electronic device first adds the part of the subpage displayed on the display screen to the first side, and then adds the part of the subpage displayed on the display screen to the second side, until the subpage is displayed on the display screen in full screen.
  • the electronic device first adds the part of the sub-page displayed on the display to the second side, and then adds the part of the sub-page displayed on the display to the first side, until the sub-page is displayed on the display in full screen.
  • the electronic device adds the part of the subpage displayed on the display screen to the first side and the second side at the same time, until the subpage is displayed on the display screen in full screen.
  • the electronic device increases the portion of the child page displayed on the display screen through any of the above-mentioned strategies, it can increase the fun of the parent-child page switching.
  • the subpage displayed on the electronic device includes: the middle part of the subpage, and the part on the first side of the subpage.
  • the part on the first side of the subpage borders the middle part of the subpage.
  • the height of the portion on the first side of the subpage is the same as the height of the subpage, and the width of the portion on the first side of the subpage is smaller than the width of the subpage.
  • the subpage displayed on the electronic device includes: the middle part of the subpage and the second side part of the subpage.
  • the part on the second side of the subpage borders the middle part of the subpage.
  • the height of the portion on the second side of the subpage is the same as the height of the subpage, and the width of the portion on the second side of the subpage is smaller than the width of the subpage.
  • the user can see that the area occupied by the child page of the display gradually expands from the right to the left of the display, and the area occupied by the parent page gradually moves to the left of the display. Zoom out until the subpage is displayed on the display in full screen.
  • the way of switching from the parent page to the child page provided by the electronic device meets the user's expectations, the visual effect is natural, and the user's visual movement line is short, which can give the user an optimal user experience.
  • the part of the child page displayed on the display screen is realized by a mask.
  • the sub-page and the mask layer form a mask, and the sub-page is the masked layer.
  • the part where the subpage (masked layer) and the mask layer overlap and are located on the display screen is the part of the subpage displayed by the electronic device on the display screen.
  • the mask formed by the child page and the mask layer is located on the parent page, and the non-overlapping part of the mask layer and the masked layer in the mask does not affect the display of the parent page . If part of the content in the mask covers part of the parent page, if the part of the content in the mask is not the overlapped part of the child page (the masked layer) and the mask layer (that is, it is Invisible part), the electronic device still displays the parent page in this area.
  • FIG. 6A to 6D exemplarily show a manner in which the electronic device displays part or all of the sub-page through a mask during the process of switching from the parent page to the sub-page.
  • both the parent page and the child page are provided by the "contacts" application, the parent page is the "contact home page”, and the child page is a specific contact (for example, the contact "Andy” )'S address book details page.
  • FIG. 6A shows a user interface displayed in full screen on the display screen of the electronic device.
  • the user interface includes a status bar and a "contact home page" (ie, a parent page).
  • a status bar ie, a status bar
  • a "contact home page” ie, a parent page.
  • the electronic device may generate or open the corresponding sub-page (masked layer) and generate the mask layer at the same time.
  • FIG. 6B exemplarily shows a sub-page (masked layer) and a mask layer generated by the electronic device.
  • the left half of the subpage (masked layer) generated by the electronic device is located in the left area inside the display screen, and the right half of the subpage (masked layer) is located in the right area outside the display screen.
  • the mask layer is located in the right area outside the display screen.
  • the size of the subpage (masked layer) and the size of the mask layer are basically the same as those of the display screen. Part of the content of the subpage (masked layer) and the mask layer overlap, and the overlapped content is located in the right area outside the display screen.
  • the electronic device After the electronic device generates the sub-page (masked layer) and the mask layer, it can control the sub-page (masked layer) and the mask layer to move from the right to the left of the display screen. While the child page (masked layer) and the mask layer move from the right side to the left side of the display screen, the parent page remains motionless.
  • the moving speed of the sub-page (the masked layer) and the moving speed of the masking layer can be the same or different, which is not limited in this application.
  • the moving speed of the subpage (masked layer) and the moving speed of the masked layer are both greater than or equal to zero.
  • the child page (masked layer) and the mask layer can perform acceleration motion, or perform uniform motion or deceleration motion.
  • the acceleration motion or deceleration motion can make the process of switching from the parent page to the child page more in line with user expectations.
  • the sub-page (masked layer) and the mask layer can move at the same time or not at the same time, which is not limited in this application.
  • the electronic device controls the movement of the sub-page (masked layer) and the mask layer
  • the overlapping part of the sub-page (masked layer) and the mask layer is located in the display screen
  • the left edge of the subpage stops moving after moving to the left edge of the display screen.
  • the left edge of the mask layer stops moving after moving to the left edge of the display.
  • FIG. 6C which exemplarily shows the position of the sub-page (masked layer) and the masked layer after moving for a period of time.
  • the moving speed of the mask layer is greater than the moving speed of the sub-page (masked layer).
  • part of the content in the subpage (masked layer) is located in the right area of the display screen, and some content is located in the right area outside the display screen; part of the content in the mask layer is located in the right area of the display screen Area, some content is located in the right area outside the display screen.
  • Part of the content of the subpage (masked layer) and the mask layer overlaps and is located in the display screen.
  • This part of the content can be displayed on the display screen.
  • This part of the content is the visible part of the subpage shown in Figure 6C.
  • the non-overlapping content in the parent page and the visible part can also be displayed on the display screen. That is, when the child page (masked layer) and the mask layer are moved to the position shown in FIG. 6C, the electronic device simultaneously displays the parent page and the child page on the display screen.
  • the electronic device may display the user interface 52 shown in FIG. 5B, that is, the electronic device may The first part of the parent page is continuously displayed in the first area of the display screen, and the first part of the child page is displayed in the second area of the display screen.
  • the first part of the parent page and the first part of the child page can refer to the relevant description of the previous embodiment.
  • FIG. 6D which exemplarily shows that the left edge of the subpage (masked layer) moves to the left edge of the display screen, and after the left edge of the mask layer moves to the left edge of the display screen,
  • the user interface shown on the display As shown in Figure 6D, the sub-page (masked layer) is moved to the left edge of the display screen, and the mask layer is also moved to the left edge of the display screen.
  • the sub-page (masked layer) and the mask layer are located on the display screen. Inside.
  • the entire content of the subpage (masked layer) and the mask layer overlap and are located in the display screen.
  • the entire content of the subpage (masked layer) can be displayed on the display screen.
  • the entire content is shown in Figure 6D. The visible part of the subpage shown.
  • the parent page is completely covered by the overlapping part of the child page (masked layer) and the mask layer, so the parent page is not displayed on the display screen. That is to say, when the subpage (masked layer) and the mask layer are moved to the position shown in FIG. 6D, the electronic device displays the subpage in full screen on the display screen.
  • the electronic device may display the user interface 54 shown in FIG. 5D, that is, the electronic device is in The sub-page is displayed in full screen on the display.
  • the electronic device can maintain the generated mask (mask), that is, the electronic device continues to form the mask layer and the sub-page (masked layer) into a mask.
  • the electronic device can also stop maintaining the mask, that is, the electronic device no longer composes the mask layer and the sub-page (masked layer) into a mask, for example, stop generating the mask layer.
  • FIGS. 6A-6D only exemplarily show the sub-page (masked layer), the masked layer, and its moving direction, speed, etc. generated by the electronic device, which may be different in actual applications and should not be constituted. limited.
  • the electronic device generates the sub-pages (masked layer) and the mask layer.
  • the subpage (masked layer) and the mask layer can also be located in other positions.
  • the subpages (masked layer) can also be all located inside the display screen, and the mask layer can also be partially located inside the display screen.
  • the electronic device can also control the subpage (masked layer) and the masking layer.
  • the mask layer moves in other directions, such as the direction from the lower right corner to the upper left corner of the display, and can also control the sub-pages (masked layer) and the mask layer to move according to other routes such as curves.
  • the moving speed of the subpage (masked layer) and the mask layer can be preset according to user experience.
  • FIG. 7 shows a possible Bezier curve, which can reflect that the electronic device generates the sub-page (masked layer) and the mask in the position shown in FIG. 6B. If the sub-page (masked layer) and the mask layer move at the same time, the moving speed or movement rhythm of the sub-page (masked layer) or the mask layer.
  • Bézier is a commonly used mathematical model of curve path. Cubic Bézier curve is controlled by 4 points in sequence. When used as an interpolator in the animation domain, the start point (control point 1) and end point (control point 2) of the Bezier curve are fixed, and the path is controlled by the remaining two points.
  • the Bezier curve is determined by four values 0.2, 0, 0.2, 1 related to the starting point (control point 1) and the end point (control point 2).
  • the ordinate of the Bezier curve is the interpolation result
  • the abscissa is the ratio of the current time point to the entire animation duration (that is, the duration of switching from the parent page to the child page). For example, when the abscissa is 0, it may refer to the moment when the electronic device receives the user operation for switching from the parent page to the child page (for example, the electronic device receives the contact entry 509B on the user interface 51 as shown in FIG. 5A).
  • the abscissa When the time of the click operation is reached, when the abscissa is 0.5, it may refer to an intermediate time point in the process of switching the electronic device from the parent page to the child page.
  • the slope of the Bezier curve can be used to indicate the moving speed of the sub-page (masked layer) and/or the masked layer.
  • a mask is used to realize the part of the child page displayed on the display screen during the process of switching from the parent page to the child page.
  • the electronic device After the user triggers the electronic device to switch from the parent page to the child page, the electronic device generates a mask, which is composed of a mask layer and a masked layer (child page). If the mask layer and the masked layer (sub-page) overlap and the part on the display screen is the middle part of the sub-page, then the user can see the middle part of the sub-page on the display screen.
  • the user can see on the display that the part of the child page displayed on the display gradually increases, and the parent page is displayed on the display. The part is gradually reduced until the sub-page is displayed on the display in full screen.
  • Such a way of switching from the parent page to the child page can give the user a better visual effect, thereby enhancing the user experience.
  • the process of switching from the child page to the parent page is compared with the process of switching from the parent page to the child page.
  • the child page moves in the opposite direction, which will be described in detail later.
  • the electronic device first displays the child page in full screen on the display screen, then displays the parent page on the display screen and superimposes the child page on the first side of the display screen , And then move the child page to the first side of the display screen.
  • the part of the child page displayed on the display screen gradually decreases until the display screen no longer displays the child page and displays the parent page in full screen.
  • the first side and the second side are opposite.
  • the user interface (also called "contact homepage") used to display one or more contact entries, and used to display the address book details of a specific contact
  • the user interface forms a pair of parent-child pages.
  • the user interface for displaying one or more contact entries is the parent page, and the user interface for displaying the address book details of a specific contact is a child page.
  • the user interface 81 provided by the UI embodiment exemplarily shown in FIG. 8A is described below.
  • the electronic device may display the user interface 81 in full screen on the display screen.
  • the user interface 81 includes a status bar, and a user interface (ie, sub-page) for displaying the contact details of a specific contact (for example, the contact "Andy").
  • the user interface 81 can refer to the user interface 54 shown in FIG. 5D, which will not be repeated here.
  • the return key 513 in the user interface 81 shown in FIG. 8A can receive a user operation (such as a touch operation), and in response to the user operation, the electronic device can display a full screen on the display screen for displaying one or more contact entries. Interface (ie parent page).
  • the user operation (for example, touch operation) received by the electronic device on the return key 513 of the user interface 81 is a user operation for switching from a child page to a parent page.
  • the user interface 84 shown in FIG. 8D may be an implementation manner of a user interface (that is, a parent page) for displaying one or more contact entries. As shown in FIG. 8D, the user interface 84 may include: a status bar 512, and a user interface (ie, sub-page) for displaying the address book details of a specific contact (for example, the contact "Andy"). The user interface 84 can refer to the user interface 51 shown in FIG. 5A, which will not be repeated here.
  • the process of switching the display screen of the electronic device from the user interface for displaying the address book details of a specific contact to the user interface for displaying one or more contact entries that is, from the subpage
  • the process of switching to the parent page In line with user expectations, the visual effect is natural, and the user’s visual movement is shorter, which can give users the best experience.
  • Figures 8A-8D show the process of switching from a user interface for displaying the address book details of a specific contact to a user interface for displaying one or more contact entries, that is, switching from a child page to a parent page the process of.
  • the electronic device in response to a user operation detected on the return key 513 in the user interface 81, the electronic device generates or opens the corresponding parent page (ie, "contact home page"), and moves from the left side of the display screen to Move to the right to display the child page until the display no longer displays the child page and the parent page is displayed in full screen.
  • a parent page ie, "contact home page”
  • 8B-8C show the user interface provided by the electronic device on the display screen at two different time points in the process of moving from the left side to the right side of the display screen to display the sub-pages.
  • the electronic device may display the third part of the parent page in the fifth area of the display screen and the third part of the child page in the sixth area of the display screen.
  • the user interface 82 shown in FIG. 8B can be regarded as the electronic device superimposing and displaying the third part of the sub-page in the sixth area of the display screen.
  • the fifth area of the display screen is the left area of the display screen
  • the sixth area of the display screen is the right area of the display screen.
  • the fifth area and the sixth area do not overlap each other and combine to form a display area of the display screen.
  • the fifth area is one third of the display screen
  • the sixth area is the right two thirds of the display screen.
  • the fifth area or the sixth area may not be a rectangular area, but may also be implemented in other shapes, such as fan-shaped, semi-circular, semi-elliptical, or other irregular shapes.
  • the sixth area may also be It is the fan-shaped area at the top right of the display screen.
  • the method for determining the positions of the fifth area and the sixth area in the display screen is the same as the method for determining the positions of the first area and the second area in the display screen in the embodiment of FIG. 5B. You can refer to related descriptions, and will not be repeated here. .
  • the third part of the parent page is the part of the parent page displayed in the fifth area of the display screen.
  • the third part of the parent page may be the left third part of the parent page.
  • the third part of the subpage is any part of the subpage.
  • the third part of the subpage may be referred to as a part of the subpage, the height of the part of the subpage is the same as the height of the subpage, and the width of the part of the subpage is smaller than the width of the subpage.
  • This application does not limit the size of a part of the subpage.
  • a part of the subpage may be the middle part of the subpage.
  • a part of the sub-page may be the middle part of the sub-page mentioned in the embodiment of FIG. 5A to FIG. 5D, and reference may be made to related descriptions.
  • a part of the subpage may also be the left part or the right part of the subpage.
  • the third part of the subpage may be the middle two-thirds part of the subpage. It is not limited to the middle two-thirds part of the sub-page, and the third part of the sub-page can also be the left two-thirds or the right two-thirds of the sub-page or any other part.
  • the third part of the sub-page may not be a rectangular area, but may also be implemented in other shapes, such as fan-shaped, semi-circular, oval or other irregular shapes, etc., such as the sub-page
  • the third part can also be the fan-shaped part at the upper right of the subpage.
  • the method for determining the third part of the sub-page is the same as the method for determining the first part of the sub-page in the embodiment of FIG. 5B described above, and reference may be made to related descriptions, which will not be repeated here.
  • the electronic device may display the user interface 83 shown in FIG. 8C on the display screen.
  • the electronic device may display the fourth part of the parent page in the seventh area of the display screen, and display the fourth part of the child page in the eighth area of the display screen.
  • the electronic device in the user interface 83 shown in FIG. 8C, it can be seen that the electronic device superimposes and displays the fourth part of the sub-page in the eighth area of the display screen.
  • the seventh area of the display screen is the left area of the display screen, and the seventh area includes the fifth area.
  • the eighth area of the display screen is the right area of the display screen, and the eighth area belongs to the sixth area.
  • the seventh area and the eighth area do not overlap each other and combine to form a display area of the display screen.
  • the seventh area may be the left half of the display screen, and the eighth area may be the right half of the display screen.
  • the seventh area or the eighth area may not be a rectangular area, but may also be implemented in other shapes, such as fan-shaped, semi-circular, semi-elliptical, or other irregular shapes.
  • the eighth area is also It can be a fan-shaped area on the upper right of the display screen.
  • the fourth part of the parent page is the part of the parent page displayed in the seventh area of the display screen.
  • the fourth part of the parent page includes the third part of the parent page.
  • the fourth part of the parent page may be the left half of the parent page.
  • the fourth part of the subpage belongs to the third part of the subpage.
  • the fourth part of the sub-page may not be a rectangular area, but may also be implemented in other shapes, such as fan-shaped, semi-circular, elliptical, or other irregular shapes, such as the sub-page
  • the fourth part can also be the fan-shaped part at the upper right of the subpage.
  • the electronic device may display the user interface 84 shown in FIG. 8D on the display screen.
  • a period of time for example, 200 milliseconds
  • the electronic device may display the user interface 84 shown in FIG. 8D on the display screen.
  • the user interface 84 reference may be made to the related description of the foregoing embodiment, and details are not described herein again.
  • the electronic device in the process of switching from the child page to the parent page, may also prompt the user that the user is currently switching from the child page to the parent page.
  • the prompt method may include: 1.
  • the display form of the page may include: the background color of the page, the transparency of the page, or the border of the page.
  • the background color of the parent page is light black, and the background color of the child page is white.
  • the background color of the parent page displayed on the display screen gradually becomes lighter, or the transparency of the parent page becomes lower and lower. 3.
  • the transparency of the child page displayed on the display screen becomes higher and higher.
  • FIGS. 8B-8C only show the user interface provided by the electronic device on the display screen at two different time points in the process of moving from the left side to the right side of the display screen to display the sub-pages.
  • the electronic device when the electronic device displays FIG. 8A-8B, or, FIG. 8B-FIG. 8C, or, at other time points between FIG. 8C-FIG. 8D, the electronic device may also be displayed on the display screen.
  • Other similar user interfaces are provided, which are not shown one by one here.
  • the electronic device can continuously display system-level interface elements provided by the operating system on the user interface provided, such as FIG. 8A- Figure 8D shows the status bar in the user interface.
  • the first side may be the direction in which the sixth area is located in the display screen, and the second side may be the direction in which the fifth area is located in the display screen.
  • the first side of the display screen may be the right side of the display screen, and the second side of the display screen may be the left side of the display screen.
  • the electronic device may gradually reduce the portion of the subpage displayed on the display screen toward the first side and/or the second side. Specifically, the electronic device has the following strategies when reducing the part of the sub-page displayed on the display screen:
  • the electronic device reduces the portion of the first side of the child page on the display screen, or the electronic device reduces the portion of the second side of the child page on the display screen, until the child page is no longer displayed on the display screen, the parent page The full screen is displayed on the display.
  • the electronic device first reduces the part of the first side of the child page on the display screen, and then reduces the part of the second side of the child page on the display screen, until the child page is no longer displayed on the display screen, and the parent page is displayed in full screen On the display.
  • the electronic device first reduces the part of the second side of the child page on the display, and then reduces the part of the first side of the child page on the display, until the child page is no longer displayed on the display, and the parent page is displayed in full screen On the display.
  • the electronic device simultaneously reduces the part on the first side of the child page and the part on the second side of the child page on the display screen until the child page is no longer displayed on the display screen and the parent page is displayed on the display screen in full screen.
  • the height of the portion on the first side of the subpage is the same as the height of the subpage, and the width of the portion on the first side of the subpage is smaller than the width of the subpage.
  • the height of the portion on the second side of the subpage is the same as the height of the subpage, and the width of the portion on the first side of the subpage is smaller than the width of the subpage.
  • the user can see that the area occupied by the parent page on the display screen gradually expands from the left to the right of the display screen, and the area occupied by the child page gradually shrinks toward the right side of the display screen until The parent page is displayed in full screen on the display.
  • the way of switching from the child page to the parent page provided by the electronic device meets the user's expectations, the visual effect is natural, and the user's visual movement lines are short, which can give the user an optimal user experience.
  • the user operation for switching from the child page to the parent page is not limited to the operation received by the electronic device on the return key 513 in the user interface 81 in the embodiment of FIGS. 8A-8D, and may also be other User operation.
  • the user operation for switching from the child page to the parent page may also be: the user's sliding gesture on the user interface 81 from left to right. The sliding gesture may start from the left edge area of the user interface 81, or any area in the middle of the user interface 81, which is not limited in the embodiment of the present application.
  • a pan gesture refers to a gesture in which a user's hand (for example, a finger) slides slowly on the display screen.
  • the pan gesture may also be referred to as a swipe gesture.
  • the duration of the pan gesture is greater than the preset duration.
  • the length of the sliding track of the pan gesture is greater than a preset length, and the preset length may be preset.
  • the preset length may be the general width of the display screen.
  • the sliding track of the pan gesture may start from the left edge of the display screen and end at the right edge of the display screen.
  • the child page displayed on the display screen of the electronic device starts to pan to the right with the user's hand until the child page is no longer displayed on the display screen and the parent page is displayed in full screen.
  • the speed of the sub-page panning to the right with the user's hand is the same as the speed of the user's hand sliding on the display screen.
  • the sliding track of the pan gesture may start from the left edge of the display screen and end at the right half of the display screen.
  • the sub-page displayed on the display screen of the electronic device starts to move to the right with the user's hand, and the movement speed of the sub-page is the same as the pan gesture .
  • the subpage can pan to the right at a preset speed until the subpage is no longer displayed on the display screen and the parent page is displayed in full screen.
  • the electronic device gradually stops displaying the right area of the subpage while the subpage is displayed as the user's hand moves to the right, and stops displaying the right area of the subpage Gradually become bigger.
  • a swipe gesture refers to a gesture in which a user's hand (for example, a finger) slides quickly on the display screen.
  • the movement track of the swipe gesture may be an arc or a straight line, or it may not be a standard arc or a straight line, just like an arc or a straight line.
  • the duration of a swipe gesture is shorter than the duration of a pan gesture.
  • the embodiment of the present application does not specifically limit the starting position and ending position of the sliding track of the swipe gesture.
  • the child page displayed on the display screen of the electronic device is shifted from the left side to the right side of the display screen until the child page is no longer displayed on the display screen and the parent page is displayed in full screen.
  • the translation speed of the subpage may be the same as the translation speed of the subpage in the embodiment of FIGS. 8A-8D, or it may be faster than the translation speed of the subpage in the embodiment of FIGS. 8A-8D, which is not limited in this embodiment of the application .
  • FIG. 10A-10D embodiment it can be seen that when the electronic device displays the child page in full screen on the display screen, if it detects that the user switches from the parent page to the child page operation (such as drag (pan ) Gesture or swipe gesture). In response to this operation, the electronic device can switch from displaying the child page in full screen to displaying the parent page on the display screen, and superimpose the left side of the child page on the first side of the display screen.
  • the electronic device displays the child page in full screen on the display screen, if it detects that the user switches from the parent page to the child page operation (such as drag (pan ) Gesture or swipe gesture).
  • the electronic device can switch from displaying the child page in full screen to displaying the parent page on the display screen, and superimpose the left side of the child page on the first side of the display screen.
  • the height of the left part of the subpage is the same as the height of the subpage, and the width of the left part of the subpage is smaller than the width of the subpage; control the subpage to gradually move to the first side of the display screen, while gradually decreasing The part of the child page displayed on the display screen until the parent page is displayed in full screen on the display screen.
  • This application does not limit the area of the left part of the subpage.
  • the left part of the subpage includes the left edge of the subpage.
  • the electronic device may gradually reduce the portion of the subpage displayed on the display screen toward the first side and/or the second side.
  • FIG. 11 shows several commonly used gestures.
  • a rotate gesture refers to a gesture in which a user's hand (for example, a finger) draws a circle in a clockwise or counterclockwise direction on the display screen. It is understandable that the circle may not be a standard circle, but can be similar to a circle.
  • a princh gesture refers to a gesture in which the user slides in or out with two fingers.
  • the linear distance between the two fingers gradually decreases, it can be regarded as the user sliding inward with two fingers; when the linear distance between the two fingers gradually increases, it can be regarded as the user sliding outward with two fingers.
  • a press gesture refers to a pressing operation in which the user's hand (for example, a finger) exerts more force on the display screen than a preset force.
  • the press gesture may include a long press gesture. When the long press gesture is executed, the contact time between the user's hand and the screen exceeds a preset time.
  • a tap gesture refers to a click, tap or touch operation of a user's hand (for example, a finger) on the display screen.
  • the time between the beginning and the end of the tap gesture is within a preset duration, and the preset duration is milliseconds. That is to say, when the tap gesture is performed, the contact time between the user's hand and the screen is within the preset duration.
  • the part of the child page displayed on the display screen is moved by a mask.
  • the sub-page and the mask layer form a mask, and the sub-page is the masked layer.
  • the part where the subpage (masked layer) and the mask layer overlap and are located on the display screen is the part of the subpage displayed by the electronic device on the display screen.
  • the child page (masked layer) and the mask are compared with the process of switching from the parent page to the child page through the mask.
  • the layers move in the opposite direction, which will be described in detail below.
  • FIGS. 12A-12D exemplarily show a manner in which the electronic device displays part or all of the child page through a mask during the process of switching from the child page to the parent page.
  • both the parent page and the child page are provided by the "contacts" application
  • the parent page is a user interface for displaying one or more contact entries
  • the child page is a specific contact
  • the contact details page of a person such as the contact "Andy").
  • FIG. 12A shows a user interface displayed in full screen on the display screen of the electronic device.
  • the user interface includes a status bar and an address book detail page (ie, a subpage) of a specific contact (for example, the contact "Andy").
  • a specific contact for example, the contact "Andy"
  • FIG. 12A For the user interface shown in FIG. 12A, reference may be made to the related description of the user interface 54 shown in FIG. 5D, which will not be repeated here.
  • the electronic device in response to a detected user operation for switching from the child page to the parent page, may generate or open the parent page corresponding to the child page, and simultaneously generate a mask layer, the mask layer and the child page The page forms a mask.
  • the user operation for switching from the child page to the parent page may include: user operation (for example, touch operation) acting on the return key 513 on the child page, and dragging from left to right on the child page (pan) Gestures or swipe gestures.
  • the child page shown in FIG. 12A is switched through the method shown in FIGS. 6A-6D, that is, when the electronic device displays the user interface shown in FIG. 12A, the parent page, The mask layer and the masked layer (child page), and the positions of the parent page, the mask layer, and the masked layer (child page) are the same as in FIG. 6D.
  • the mask layer and the masked layer (child page) in the mask may be the electronic device detected in the embodiment of FIG. 6B for switching from the parent page Generated during user operations to subpages.
  • FIG. 12B exemplarily shows the parent page and the mask layer generated by the electronic device.
  • the parent page and the mask layer generated by the electronic device are both located in the display screen and occupy the entire display area of the display screen.
  • the size of the parent page and the mask layer are basically the same as the display screen.
  • the entire content of the subpage (masked layer) and the mask layer overlap and are located in the display screen, so the entire content of the subpage (masked layer) can be displayed on the display screen.
  • the parent page is completely covered by the overlapping part of the child page (masked layer) and the mask layer, so the parent page is not displayed on the display screen. In other words, when the electronic device generates the parent page and the mask layer as shown in FIG. 12B, the electronic device still displays the child page in full screen on the display screen.
  • the electronic device may Control the movement of the sub-page (masked layer) and the masked layer from the left to the right of the screen. While the child page (masked layer) and the mask layer move from the left to the right of the display screen, the parent page remains stationary.
  • the moving speed of the sub-page (the masked layer) and the moving speed of the masking layer can be the same or different, which is not limited in this application.
  • the child page (masked layer) and the mask layer can perform acceleration motion, or can perform uniform motion or deceleration motion.
  • the acceleration motion or deceleration motion can make the process of switching from the child page to the parent page more in line with user expectations.
  • the moving speed of the subpage (masked layer) and the moving speed of the masked layer are both greater than or equal to zero.
  • the sub-page (masked layer) and the mask layer can move at the same time or not at the same time, which is not limited in this application.
  • the electronic device controls the movement of the sub-page (masked layer) and the mask layer
  • the overlapping part of the sub-page (masked layer) and the mask layer is located in the display screen. This allows the user to see the sub-pages moving from left to right on the display screen.
  • FIG. 12C it exemplarily shows the position of the sub-page (masked layer) and the masked layer after moving for a period of time.
  • the moving speed of the mask layer is greater than the moving speed of the sub-page (masked layer).
  • part of the content in the subpage (masked layer) is located in the right area of the display screen, and some content is located in the right area outside the display screen; part of the content in the mask layer is located in the right area of the display screen Area, some content is located in the right area outside the display screen.
  • the electronic device when the sub-page (masked layer) and the mask layer are moved to the position shown in FIG. 12C, the electronic device can display the user interface 83 shown in FIG. 8C, that is, the electronic device can The fourth part of the parent page is displayed in the seventh area of the display screen, and the fourth part of the child page is displayed in the eighth area of the display screen.
  • the fourth part of the parent page and the fourth part of the child page can refer to the related description of the previous embodiment.
  • FIG. 12D which exemplarily shows the user interface displayed on the display screen after the left edge of the mask layer is moved to the right edge of the display screen.
  • the left edge of the mask layer moves to the right edge of the display screen
  • the sub-page (the masked layer) and the mask layer overlap partially, and the overlapped content is located in the right area outside the display screen.
  • the overlapping content of the child page (masked layer) and the mask layer is outside the display screen, the parent page is displayed in full screen on the display screen.
  • the electronic device may display the user interface 84 shown in FIG. 8D, that is, the electronic device is in The parent page is displayed in full screen on the display.
  • FIGS. 12A-12D only exemplarily show the sub-page (masked layer), masked layer, and its moving direction, moving speed, etc. generated by the electronic device, which may be different in actual applications and should not be constituted. limited.
  • the child page (masked layer) and the mask layer shown in FIGS. 12A-12D it is not limited to the position of the child page (masked layer) and the mask layer shown in FIGS. 12A-12D.
  • the child page (masked layer) ) And the mask layer can also be located in other positions.
  • the subpage (masked layer) may also be partly located inside the display screen and partly located in the right area outside the display screen, and the mask layer may also be partly located inside the display screen and partly located in the right area outside the display screen.
  • the electronic device can also control the subpage (masked layer) and the masking layer.
  • the mask layer moves in other directions, such as the direction from the lower left corner to the upper right corner of the display screen. You can also control the sub-page (masked layer) and the mask layer to move according to other routes such as curves.
  • the moving speed of the child page (the masked layer) and the mask layer can be preset according to user experience.
  • FIG. 13 shows a possible Bezier curve, which can reflect that after the electronic device generates the parent page and the mask layer in the position shown in FIG. 12B, the child page ( When the masked layer and the masked layer move at the same time, the movement speed or rhythm of the subpage (masked layer) or the masked layer.
  • the Bezier curve is determined by four values 0.4, 0, 0.2, 1 related to the starting point (control point 1) and the end point (control point 2).
  • the ordinate of the Bezier curve is the interpolation result
  • the abscissa is the ratio of the current time point to the entire animation duration (that is, the duration of the child page being switched to the parent page). For example, when the abscissa is 0, it may refer to the moment when the electronic device receives the user operation for switching from the child page to the parent page (for example, the electronic device receives the return key 513 on the user interface 81 as shown in FIG. 8A).
  • the moment of click operation when the abscissa is 0.5, it may refer to an intermediate point in the process of switching the electronic device from the child page to the parent page.
  • the slope of the Bezier curve can be used to indicate the moving speed of the sub-page (masked layer) and/or the masked layer.
  • the moving speed of the child page (masked layer) and the mask layer may be different. For example, if the child page (masked layer) and the mask layer accelerate during the process of switching from the parent page to the child page, the child page (masked layer) and the mask are in the process of switching from the child page to the parent page. When the layer is accelerated, the accelerations corresponding to the two processes can be different. Different accelerations are more in line with user expectations.
  • a mask is used to realize the part of the child page displayed on the display screen in the process of switching from the child page to the parent page.
  • the electronic device After the user triggers the electronic device to switch from the child page to the parent page, the electronic device generates a mask layer and a masked layer (child page).
  • the mask layer and the masked layer (child page) move from left to right, The user can see on the display that the area occupied by the child page gradually shrinks from the left to the right of the display, and the area occupied by the parent page gradually expands to the right of the display until the parent page is displayed in full screen. On the display.
  • Such a way of switching from the child page to the parent page can give the user a better visual effect, thereby enhancing the user experience.
  • this application can also implement the part of the parent page displayed by the electronic device on the display screen through a mask, thereby completing the process of switching from the child page to the parent page.
  • This application can also implement the part of the parent page displayed by the electronic device on the display screen through a mask, thereby completing the process of switching from the child page to the parent page. The specific implementation is described in detail below.
  • the electronic device displays a sub-page.
  • the electronic device detects the operation for switching from the child page to the parent page, it generates the parent page and the mask layer, which is different from the mask layer formed by the child page and the mask layer in the embodiment of FIGS. 12A-12D,
  • the parent page and the mask layer form a mask
  • the parent page is the masked layer.
  • the part where the parent page (masked layer) and the mask layer overlap and are located on the display screen is the part of the parent page displayed by the electronic device on the display screen.
  • the electronic device controls the parent page (masked layer) and the masked layer to move from the left to the right of the display screen. During this movement, the overlapping part of the parent page (masked layer) and the mask layer is located in the display screen, so that the user can see the parent page panning from left to right on the display screen.
  • the entire content of the parent page (masked layer) and the mask layer overlap and are located in the display screen, and the entire content of the parent page (masked layer) can be displayed on the display screen.
  • the part of the parent page displayed by the electronic device on the display screen is realized by a mask, compared with the part of the child page displayed by the electronic device on the display screen by a mask.
  • the position, moving direction, or moving speed of the mask is symmetrical or mirrored.
  • a person skilled in the art can clearly determine that the parent page displayed on the display screen of the electronic device is realized through a mask according to the related description of the embodiment in Figures 12A-12D, so as to complete the switching from the child page to the parent page. The specific operation is not repeated here.
  • FIG. 14 shows a schematic diagram of the interaction flow between various software modules and hardware modules when the electronic device switches between parent and child pages.
  • the application layer includes a series of applications, and the electronic device can run one or more applications in the application layer.
  • the application programs currently running on the electronic device include an application program that occupies the focus of the display screen to provide a user with a graphical user interface.
  • the user operation can be detected by the display screen of the electronic device, and the corresponding hardware interrupt is sent to the kernel layer.
  • the kernel layer processes the user operation for switching between parent and child pages into original input events and stores them.
  • the user operation for switching the parent-child page can refer to the related description of the previous embodiment, which will not be repeated here.
  • the application framework layer obtains the original input event from the kernel layer, and recognizes the function of the operation corresponding to the original input event (ie switching between parent and child pages).
  • the Activity Manager Service (AMS) or Window Manager Service (WMS) of the application framework layer reads the relevant parameters of the layer currently displayed on the display screen.
  • the relevant parameters can be used to describe the currently displayed parent page/child page, for example Display area, transparency, background color, etc.
  • the AMS or WMS of the application framework layer is also used to output related parameters used to control the switching process of the parent and child pages.
  • the related parameters used to control the switching process of the parent page/child page are used to describe the parent page/child page during the parent-child page switching process Change of display area, change of transparency, change of transparency, movement speed, movement direction, etc.
  • the surface manager of the system library synthesizes the final screen displayed on the screen according to the relevant parameters output by the application framework layer.
  • the electronic device calls the display driver of the kernel layer, and displays the screen synthesized by the surface manager to the user through the display screen.
  • the screen displayed on the display screen can refer to the relevant description of each UI embodiment above, which will not be repeated here.
  • Same-level pages refer to pages provided by the same application that do not need to be switched by the return key, for example, the four tabs provided by "WeChat”, “WeChat”, “Address Book”, “Discover” and “Me” correspond to
  • the three controls 510A-510C provided by "contacts” respectively correspond to the dialing interface, the contact homepage, and the favorite contact page.
  • the electronic device when it detects a user operation for switching pages of the same level, it can also switch pages of the same level by a method similar to the switching parent-child page described in the above embodiment, so that the user can see a certain level The page moves on the display screen until another page of the same level is displayed on the full screen of the display screen, thus completing the switch of the same level page. Switching pages at the same level in this way can shorten the user's visual movement, provide better visual effects, and improve user experience.
  • the home screen may refer to the desktop provided by the electronic device, and an exemplary implementation of the home screen may be the user interface 41 shown in FIG. 4.
  • the application homepage refers to the user interface displayed on the display screen when the electronic device first opens the application.
  • the electronic device detects a user operation for switching between the main interface and the application homepage, it can also switch between the main interface and the application homepage by a method similar to the switching parent-child page described in the foregoing embodiment. Switching between the main interface and the application homepage in this way can shorten the user's visual movement lines, provide better visual effects, and enhance the user experience.
  • the computer program product includes one or more computer instructions.
  • the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.
  • the computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions may be transmitted from a website, computer, server, or data center.
  • the computer-readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server or data center integrated with one or more available media.
  • the usable medium may be a magnetic medium (for example, a floppy disk, a hard disk, and a magnetic tape), an optical medium (for example, a DVD), or a semiconductor medium (for example, a solid state disk).

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

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

Description

切换父页面和子页面的方法、相关装置
本申请要求在2019年4月30日提交中国国家知识产权局、申请号为201910365499.9的中国专利申请的优先权，发明名称为“切换父页面和子页面的方法、相关装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及终端领域及计算机图形处理技术领域，特别涉及切换父页面和子页面的方法、相关装置。
背景技术
在使用手机、平板电脑等电子设备的过程中，用户在操作电子设备上安装的应用程序(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)，层叠样式表(cascading style 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 digital assistant，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 processing unit，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 circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/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)，显示屏串行接口(display serial 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上的包括无线局域网(wireless local 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)，码分多址接入(code division multiple access，CDMA)，宽带码分多址(wideband code division multiple access，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)，北斗卫星导航***(beidou navigation satellite system，BDS)，准天顶卫星***(quasi-zenith satellite system，QZSS)和/或星基增强***(satellite based augmentation systems，SBAS)。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot light emitting 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，蓝牙，音乐，视频，短信息等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming 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 State Disk)等。

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中任一项所述的方法。
PCT/CN2020/085903 2019-04-30 2020-04-21 切换父页面和子页面的方法、相关装置 WO2020221063A1 (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
US17/607,666 US20220214800A1 (en) 2019-04-30 2020-04-21 Method for Switching Between Parent Page and Child Page and Related Apparatus
KR1020217036079A KR20210143320A (ko) 2019-04-30 2020-04-21 부모 페이지와 자식 페이지 사이의 스위칭 방법 및 관련 장치
EP20799389.0A EP3944079A4 (en) 2019-04-30 2020-04-21 METHOD OF SWITCHING BETWEEN A PARENT PAGE AND A SUB PAGE AND RELATED DEVICE
JP2021564666A JP7337954B2 (ja) 2019-04-30 2020-04-21 親ページと子ページとの間を切り替えるための方法及び関連する機器

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910365499.9 2019-04-30
CN201910365499.9A CN110119296B (zh) 2019-04-30 2019-04-30 切换父页面和子页面的方法、相关装置

Publications (1)

Publication Number Publication Date
WO2020221063A1 true WO2020221063A1 (zh) 2020-11-05

Family

ID=67521805

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/085903 WO2020221063A1 (zh) 2019-04-30 2020-04-21 切换父页面和子页面的方法、相关装置

Country Status (6)

Country Link
US (1) US20220214800A1 (zh)
EP (1) EP3944079A4 (zh)
JP (1) JP7337954B2 (zh)
KR (1) KR20210143320A (zh)
CN (1) CN110119296B (zh)
WO (1) WO2020221063A1 (zh)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110119296B (zh) * 2019-04-30 2021-09-14 华为技术有限公司 切换父页面和子页面的方法、相关装置
CN110515524B (zh) * 2019-08-30 2021-02-02 Oppo广东移动通信有限公司 输入信息的方法、装置、终端及存储介质
CN111190753B (zh) * 2019-12-30 2023-03-21 腾讯科技（深圳）有限公司 分布式任务处理方法、装置、存储介质和计算机设备
CN113821266A (zh) * 2020-06-16 2021-12-21 网联清算有限公司 子页面初始化方法及装置
CN112351347B (zh) * 2020-10-26 2024-02-09 深圳Tcl新技术有限公司 屏幕焦点移动显示方法、显示设备及存储介质
CN112379953A (zh) * 2020-11-06 2021-02-19 深圳市越疆科技有限公司 终端、页面切换框架以及页面的切换方法
CN117032529A (zh) * 2021-04-22 2023-11-10 华为技术有限公司 一种显示方法及相关装置
CN113722028B (zh) * 2021-05-28 2022-10-28 荣耀终端有限公司 动态卡片显示方法及装置
CN113485778B (zh) * 2021-06-25 2023-06-13 青岛海尔科技有限公司 页面数据的处理方法、装置、存储介质和电子装置
CN114168036B (zh) * 2021-11-29 2022-10-14 北京五八信息技术有限公司 信息展示方法、装置、电子设备及存储介质
CN116048311B (zh) * 2022-06-24 2024-04-19 荣耀终端有限公司 窗口显示方法、电子设备和计算机可读存储介质
CN117149320A (zh) * 2022-08-09 2023-12-01 惠州Tcl移动通信有限公司 界面显示方法、装置、计算机设备和存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080109753A1 (en) * 2006-11-03 2008-05-08 Karstens Christopher K Most-Recently-Used Task Switching among Parent and Child Windows
CN104133725A (zh) * 2014-07-18 2014-11-05 深圳市金立通信设备有限公司 一种页面切换方法
CN106156066A (zh) * 2015-03-30 2016-11-23 阿里巴巴集团控股有限公司 一种页面切换方法、装置及客户端
CN108459888A (zh) * 2018-01-08 2018-08-28 平安科技（深圳）有限公司 多页面切换方法、装置、终端设备及存储介质
CN110119296A (zh) * 2019-04-30 2019-08-13 华为技术有限公司 切换父页面和子页面的方法、相关装置

Family Cites Families (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH07143399A (ja) * 1993-11-19 1995-06-02 Matsushita Electric Ind Co Ltd 特殊効果処理装置
US7770128B2 (en) * 2006-02-01 2010-08-03 Ricoh Company, Ltd. Compensating for cognitive load in jumping back
US7764291B1 (en) * 2006-08-30 2010-07-27 Adobe Systems Incorporated Identification of common visible regions in purposing media for targeted use
US8564544B2 (en) * 2006-09-06 2013-10-22 Apple Inc. Touch screen device, method, and graphical user interface for customizing display of content category icons
US8564543B2 (en) * 2006-09-11 2013-10-22 Apple Inc. Media player with imaged based browsing
US9772751B2 (en) * 2007-06-29 2017-09-26 Apple Inc. Using gestures to slide between user interfaces
TWI412963B (zh) * 2009-07-01 2013-10-21 Htc Corp 資料顯示與移動方法及系統，及其電腦程式產品
US9015641B2 (en) * 2011-01-06 2015-04-21 Blackberry Limited Electronic device and method of providing visual notification of a received communication
JP2013017068A (ja) * 2011-07-05 2013-01-24 Sanyo Electric Co Ltd 画像再生装置、画像再生方法および画像再生プログラム
US20130093764A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of animating a rearrangement of ui elements on a display screen of an electronic device
KR102042556B1 (ko) * 2012-09-05 2019-11-11 엘지전자 주식회사 이동 단말기 및 이동 단말기의 제어 방법
JP6244957B2 (ja) * 2014-02-10 2017-12-13 凸版印刷株式会社 表示制御装置、表示制御方法及びプログラム
JP2015219817A (ja) * 2014-05-20 2015-12-07 オリンパス株式会社 表示装置、表示方法、およびプログラム
KR20160020738A (ko) * 2014-08-14 2016-02-24 삼성전자주식회사 전자 장치 및 전자 장치의 사용자 인터페이스 제공 방법
KR102324398B1 (ko) * 2014-09-17 2021-11-10 삼성전자 주식회사 전자 장치 및 이의 화면 표시 제어 방법
US9891811B2 (en) * 2015-06-07 2018-02-13 Apple Inc. Devices and methods for navigating between user interfaces
US9924136B1 (en) * 2017-01-30 2018-03-20 Microsoft Technology Licensing, Llc Coordinated display transitions of people and content
CN107193445A (zh) * 2017-06-30 2017-09-22 上海传英信息技术有限公司 移动终端界面切换显示方法及显示装置
CN109032464B (zh) * 2018-09-10 2020-12-01 腾讯科技（深圳）有限公司 应用程序中的界面切换方法、装置、设备及存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080109753A1 (en) * 2006-11-03 2008-05-08 Karstens Christopher K Most-Recently-Used Task Switching among Parent and Child Windows
CN104133725A (zh) * 2014-07-18 2014-11-05 深圳市金立通信设备有限公司 一种页面切换方法
CN106156066A (zh) * 2015-03-30 2016-11-23 阿里巴巴集团控股有限公司 一种页面切换方法、装置及客户端
CN108459888A (zh) * 2018-01-08 2018-08-28 平安科技（深圳）有限公司 多页面切换方法、装置、终端设备及存储介质
CN110119296A (zh) * 2019-04-30 2019-08-13 华为技术有限公司 切换父页面和子页面的方法、相关装置

Also Published As

Publication number Publication date
US20220214800A1 (en) 2022-07-07
CN110119296A (zh) 2019-08-13
EP3944079A4 (en) 2022-05-18
JP2022531279A (ja) 2022-07-06
EP3944079A1 (en) 2022-01-26
JP7337954B2 (ja) 2023-09-04
CN110119296B (zh) 2021-09-14
KR20210143320A (ko) 2021-11-26

Similar Documents

Publication Publication Date Title
WO2020221063A1 (zh) 切换父页面和子页面的方法、相关装置
WO2021027747A1 (zh) 一种界面显示方法及设备
WO2021013158A1 (zh) 显示方法及相关装置
US11599254B2 (en) Method for quickly invoking small window when video is displayed in full screen, graphic user interface, and terminal
US20220269405A1 (en) Floating Window Management Method and Related Apparatus
WO2021103981A1 (zh) 分屏显示的处理方法、装置及电子设备
WO2021129326A1 (zh) 一种屏幕显示方法及电子设备
WO2021017889A1 (zh) 一种应用于电子设备的视频通话的显示方法及相关装置
WO2021139768A1 (zh) 跨设备任务处理的交互方法、电子设备及存储介质
US11921987B2 (en) System navigation bar display method, system navigation bar control method, graphical user interface, and electronic device
US11687235B2 (en) Split-screen method and electronic device
WO2020253758A1 (zh) 一种用户界面布局方法及电子设备
WO2021000804A1 (zh) 锁定状态下的显示方法及装置
WO2021036770A1 (zh) 一种分屏处理方法及终端设备
WO2021082835A1 (zh) 启动功能的方法及电子设备
US20240176628A1 (en) Display method for card component, graphical user interface, and related apparatus
EP3958106A1 (en) Interface display method and electronic device
WO2022068819A1 (zh) 一种界面显示方法及相关装置
WO2020155875A1 (zh) 电子设备的显示方法、图形用户界面及电子设备
WO2021190524A1 (zh) 截屏处理的方法、图形用户接口及终端
WO2024149088A1 (zh) 一种截图方法
WO2023160455A1 (zh) 删除对象的方法及电子设备
WO2024067551A1 (zh) 界面显示方法及电子设备
CN118331469A (zh) 一种截图方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20799389

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2021564666

Country of ref document: JP

Kind code of ref document: A

Ref document number: 2020799389

Country of ref document: EP

Effective date: 20211022

NENP Non-entry into the national phase

Ref country code: DE

ENP Entry into the national phase

Ref document number: 20217036079

Country of ref document: KR

Kind code of ref document: A