Methods for displaying graphical user interfaces, electronic devices, program products, and storage media.

Abstract

The application provides a method for displaying a graphical user interface and a mobile terminal comprising a touch screen and a camera, the touch screen of the mobile terminal comprising a first screen area and a second screen area, the first screen area being a rectangular area, and the second screen area being an area of the touch screen extending from the first screen area to the periphery of the camera. In the method, the mobile terminal displays an application interface of a first application in the first screen area; when there is a notification of a second application, the mobile terminal displays the notification in the second screen area; when a first touch operation performed on the notification is detected, the mobile terminal continues to display the application interface of the first application in the first screen area, and displays an application interface of the second application related to the notification on the application interface of the first application. The application improves the diversified interaction function of the mobile terminal, simplifies the operation process of the user, and improves the user experience.

Description

Technical Field

[0001] This application relates to the field of human-computer interaction, and more particularly to methods for displaying graphical user interfaces and mobile terminals. Background Technology

[0002] With the current development trend of smartphones and other terminal devices, the functions that terminals can perform are constantly expanding. Consumers are no longer satisfied with just making calls; their demands for display capabilities are also constantly increasing. From feature phones with numeric keys to smartphones with resistive and capacitive screens, screen sizes have also developed to 5.5 inches or even larger, with large-screen phones becoming increasingly popular among consumers. As competition in the smart terminal market intensifies, the concepts of ultra-high screen-to-body ratio and even full-screen phones have emerged. Considering the portability of phone sizes, the industry is committed to increasing the screen-to-body ratio. With various display structures and sizes being developed to increase the screen-to-body ratio, providing more diverse interactive functions within the display has become key to improving the user experience. Summary of the Invention

[0003] To address the aforementioned technical problems, embodiments of this application provide various methods for displaying graphical user interfaces and mobile terminals, aiming to enhance the diverse interactive functions of mobile terminals, simplify user operation processes, and improve user experience.

[0004] Firstly, embodiments of this application provide a method for displaying a graphical user interface on a mobile terminal. The method includes the following steps: First, the mobile terminal displays the application interface of a first application in a first screen area; then, when a second application sends a notification, the mobile terminal displays the notification in the second screen area; subsequently, when a first touch operation on the notification is detected, the mobile terminal continues to display the application interface of the first application in the first screen area, and displays the application interface of the second application related to the notification on the application interface of the first application. Therefore, the method can fully utilize the display area of ​​the mobile terminal. When displaying the interface content of the first application in the first screen area, such as video calls, audio-visual playback (movies, TV, animations, etc.), games, etc., when there is a notification from the second application, the mobile terminal can display notification-related information in the second screen area. On the one hand, compared with the method of popping up an interface in the first screen area to provide a prompt, it does not occupy the first screen area and does not affect the display content of the first screen area. On the other hand, the content of the notification can be persistently displayed in the second screen area, avoiding the problem that the notification disappears before the user can see the content clearly; and it provides a convenient function that allows the user to quickly handle the notification from the second application and continue to watch the interface content of the first application.

[0005] In some possible implementations, the mobile terminal displays the application interface of the second application on a portion of the application interface of the first application.

[0006] In some possible implementations, the mobile terminal displays the application interface of the second application on a portion of the application interface of the first application, and the mobile terminal displays the application interface of the second application on the application interface of the first application in a transparent or semi-transparent manner to improve the display effect of the mobile terminal on the touch screen.

[0007] In some possible implementations, when the mobile terminal displays the application interface of the second application related to the notification, and a second touch operation is detected on the application interface of the second application, the mobile terminal processes the notification so that the user can continue to view the interface content of the first application and quickly process the notification of the second application, including viewing, replying, etc.

[0008] In some possible implementations, after processing the notification, the mobile terminal continues to display the application interface of the first application in the first screen area, while not displaying the application interface of the second application. The process of closing the application interface of the second application displayed in the first screen area after processing the notification is simple, smooth, and adaptable to user habits.

[0009] In some possible implementations, when the mobile terminal displays the application interface of the second application related to the notification, if a third touch operation is detected in the first screen area but outside the application interface of the second application, the mobile terminal executes the instruction corresponding to the third touch operation in the second application and continues to display the application interface of the second application related to the notification in the first screen area. That is, when displaying the application interfaces of the second application and the first application on the first screen, the mobile terminal can choose to execute the instruction related to the second application or the instruction related to the second application based on the location of the detected touch operation in the first screen area.

[0010] In some possible implementations, when the mobile terminal displays the application interface of the second application related to the notification, upon detecting a fourth touch operation, the mobile terminal continues to display the application interface of the first application in the first screen area and does not display the application interface of the second application. The mobile terminal can exit the application interface of the second application displayed in the first screen area according to the corresponding fourth touch operation. The fourth touch operation can be determined according to a preset setting. The steps of the mobile terminal detecting the fourth touch operation include any of the following: the mobile terminal detects a touch operation on the notification of the second application in the second screen area; the mobile terminal detects a touch operation on the application interface of the second application; the mobile terminal detects a touch operation performed on an area of ​​the application interface of the first application but outside the application interface of the second application.

[0011] In some possible implementations, the mobile terminal displays an icon of at least one of the second applications in the second screen area.

[0012] In some possible implementations, the method further includes: when a first touch operation is detected on the icon of the second application, displaying the application interface of the second application in the first screen area and displaying the icon of the first application in the second screen area.

[0013] In some possible implementations, in conjunction with the embodiments described above, the method further includes: displaying the icon of the second application in the second screen area when the mobile terminal does not display the application interface of the second application in the second screen area.

[0014] The second application can be a system-level application or an application provided by a third-party service provider. Displaying at least one icon of the second application in the second screen area provides users with diverse display options. Furthermore, in some embodiments, the mobile terminal can quickly access the second application in response to detecting a user's touch operation where at least one icon of the second application is displayed in the second screen area. This provides the ability to quickly access frequently used applications and quickly return to the application interface of previously accessed applications, simplifying user operation processes and improving user experience.

[0015] In some possible implementations, the mobile terminal displays the notification by showing the content of the notification in the second screen area.

[0016] In some possible implementations, the mobile terminal displays the sender information of the notification in the second screen area, wherein the sender information includes one or more of the following: sender image, sender identity information, and sender sending time.

[0017] In some possible implementations, the mobile terminal displays the notification by changing the display method of the icon of the second application corresponding to the notification in the second screen area.

[0018] In some possible implementations, the method further includes: the mobile terminal displaying a control in the second screen area; when a third touch operation is detected on the control, the mobile terminal hiding the icon of the at least one second application and / or the notification of the second application. The mobile terminal may choose to turn off the second screen area based on the touch operation to save power consumption or reduce interference between the content displayed in the second screen area and the content displayed in the first screen area; or the mobile terminal may combine the first display area and the first screen area to display a continuous interface content based on the touch operation, improving the overall display effect and providing diverse display methods and functions.

[0019] In some possible implementations, when the mobile terminal displays the notification in the second screen area, the content of the notification is displayed in a scrolling manner in the second screen area to adapt to the size of the second screen area and fully display the content of the notification.

[0020] Secondly, this application provides a method for displaying a graphical user interface on a mobile terminal, wherein the mobile terminal includes a touchscreen and a camera, the touchscreen includes a first screen area and a second screen area, the first screen area is a rectangular area, and the second screen area is an area of ​​the touchscreen extending from the first screen area towards the periphery of the camera. The method executed on the mobile terminal includes the following steps: First, the mobile terminal displays the application interface of a first application in the first screen area and displays the icon of a second application in the second screen area; then, when a first touch operation is detected on the icon of the second application, the mobile terminal displays the application interface of the second application in the first screen area and the icon of the first application in the second screen area. By displaying at least one icon of a second application, such as some commonly used applications, in the second screen area, the mobile terminal can quickly enter the second application when a touch operation is detected on the icon of the second application, and switch to display the application interface of the second application in the first screen area, saving the touch operation that requires exiting the application interface of the first application first, thereby providing a function for quickly entering commonly used applications, simplifying the interaction process, and improving the user experience.

[0021] In some possible implementations, after the mobile terminal displays the application interface of the second application in the first screen area, when the mobile terminal does not display the application interface of the second application in the second screen area, it displays the icon of the second application in the second screen area. In response to detecting a touch operation on the icon of the first application, the display of the application interface of the second application in the first screen area is switched, thereby providing a function to quickly return to the previously accessed application, making the interaction process simple and fast.

[0022] Thirdly, this application provides a method for displaying on a mobile terminal, wherein the mobile terminal includes a touchscreen and a camera, the touchscreen includes a first screen area and a second screen area, the first screen area is a rectangular area, and the second screen area is an area of ​​the touchscreen extending from the first screen area towards the periphery of the camera. The method executed on the mobile terminal includes: first, the mobile terminal starts the camera to take a picture; then, the mobile terminal displays the image acquired by the camera on the first screen area and increases the display brightness of all or part of the second screen area above a threshold to provide supplementary lighting for the subject. In this method, the mobile terminal uses the second screen area as a supplementary light during the front-facing camera's shooting process, eliminating the need for additional supplementary lighting devices, and can provide supplementary lighting for the subject (e.g., a face), enabling users to obtain images with good brightness even in low-light environments. This provides supplementary lighting in applications such as photography, makeup, and facial recognition, improving the image quality in low-light environments. Therefore, the mobile terminal has more diverse interactive functions, improving user needs in shooting scenarios and enhancing the user experience.

[0023] In some possible implementations, the mobile terminal displays a preset color in all or at least a partial area of ​​the second screen area to provide supplemental lighting for the subject. In some embodiments, the mobile terminal adjusts the second screen area to a monochrome mode, such as white, yellow, or blue, which not only provides supplemental lighting for the subject but also helps improve the color of the image, enhances the imaging effect, and improves the user's shooting experience.

[0024] In some possible implementations, the method further includes: the mobile terminal also displays a prompt pattern pointing to the location of the camera in a second screen area.

[0025] Fourthly, this application provides a mobile terminal, wherein the mobile terminal includes: a camera; a touch screen, wherein the touch screen includes a first screen area and a second screen area, the first screen area being a rectangular area, and the second screen area being an area of ​​the touch screen extending from the first screen area towards the camera; one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and the one or more computer programs include instructions that, when executed by the mobile terminal, cause the mobile terminal to perform the following steps: firstly, displaying an application interface of a first application in the first screen area; when a notification is received from a second application, displaying the notification in the second screen area; then, upon detecting a first touch operation performed on the notification, continuing to display the application interface of the first application in the first screen area, and displaying an application interface of the second application related to the notification on the application interface of the first application.

[0026] In some possible implementations, when the instruction is executed by the mobile terminal, during the step of displaying the application interface of the second application related to the notification, the mobile terminal performs the following steps: displaying the application interface of the second application on a portion of the application interface of the first application.

[0027] In some possible implementations, when the instruction is executed by the mobile terminal, during the step of displaying the application interface of the second application related to the notification, the mobile terminal performs the following steps: displaying the application interface of the second application in a transparent or semi-transparent manner on the application interface of the first application.

[0028] In some possible implementations, when the instruction is executed by the mobile terminal while displaying the application interface of the second application related to the notification, the mobile terminal performs the following steps: when a second touch operation is detected on the application interface of the second application, the notification is processed.

[0029] In some possible implementations, after the notification has been processed, when the instruction is executed by the mobile terminal, the mobile terminal further performs the following steps: continuing to display the application interface of the first application in the first screen area, and not displaying the application interface of the second application.

[0030] In some possible implementations, when the mobile terminal displays the application interface of the second application related to the notification, when the instruction is executed by the mobile terminal, the mobile terminal performs the following steps: when a third touch operation is detected in the first screen area and in an area outside the application interface of the second application, the instruction corresponding to the third touch operation in the second application is executed, and the application interface of the second application related to the notification in the first screen area continues to be displayed.

[0031] In some possible implementations, when the instruction is executed by the mobile terminal while displaying the application interface of the second application related to the notification, the mobile terminal performs the following steps: when a fourth touch operation is detected, the application interface of the first application continues to be displayed in the first screen area, and the application interface of the second application is not displayed.

[0032] In the step of detecting the fourth touch operation, when the instruction is executed by the mobile terminal, the mobile terminal performs any of the following steps: detecting a touch operation on a notification corresponding to the second application in the second screen area; detecting a touch operation on the application interface of the second application; detecting a touch operation performed on an area in the application interface of the first application but outside the application interface of the second application.

[0033] In some possible implementations, when the instruction is executed by the mobile terminal, the mobile terminal also performs the following steps: displaying at least one icon of the second application in the second screen area.

[0034] In some possible implementations, when the instruction is executed by the mobile terminal, during the step of displaying the notification in the second screen area, the mobile terminal performs at least one of the following steps: displays the content of the notification in the second screen area; displays the sender information of the notification in the second screen area, the sender information including any one or more of the sender's image, sender's identity information, and sender's sending time; and changes the display mode of the icon of the second application corresponding to the notification in the second screen area.

[0035] In some possible implementations, when the instruction is executed by the mobile terminal, the mobile terminal also performs the following steps: displaying a control in the second screen area; and when a third touch operation on the control is detected, hiding the icon of the at least one second application and / or the notification of the second application.

[0036] In some possible implementations, when the instruction is executed by the mobile terminal while the notification is displayed in the second screen area, the mobile terminal performs the following steps: displaying the content of the notification in the second screen area in a scrolling manner.

[0037] Fifthly, this application provides a mobile terminal, wherein the mobile terminal includes: a camera; a touchscreen, wherein the touchscreen includes a first screen area and a second screen area, the first screen area being a rectangular area, and the second screen area being an area of ​​the touchscreen extending from the first screen area toward the camera; one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and the one or more computer programs include instructions that, when executed by the mobile terminal, cause the mobile terminal to perform the following steps: first, displaying an application interface of a first application in the first screen area and displaying an icon of a second application in the second screen area; then, when a first touch operation is detected on the icon of the second application, displaying the application interface of the second application in the first screen area and displaying the icon of the first application in the second screen area.

[0038] In some possible implementations, after the mobile terminal displays the application interface of the second application in the first screen area, when the instruction is executed by the mobile terminal, the mobile terminal further performs the following steps: when the mobile terminal does not display the application interface of the second application in the second screen area, the icon of the second application is displayed in the second screen area.

[0039] Sixthly, this application provides a mobile terminal displayed on a mobile terminal, comprising: a camera; a touchscreen, wherein the touchscreen includes a first screen area and a second screen area, the first screen area being a rectangular area, and the second screen area being an area of ​​the touchscreen extending from the first screen area toward the periphery of the camera; one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and the one or more computer programs include instructions that, when executed by the mobile terminal, cause the mobile terminal to perform the following steps: initiating the camera to capture an image; then, displaying the image captured by the camera on the first screen area, and increasing the display brightness of all or part of the second screen area above a threshold to provide supplemental lighting for the photographed object.

[0040] In some possible implementations, when the instruction is executed by the mobile terminal, the mobile terminal also performs the following steps: displaying a preset color in all or at least a partial area of ​​the second screen area to provide supplemental lighting for the subject.

[0041] In some possible implementations, when the instruction is executed by the mobile terminal, the mobile terminal also performs the following steps: displaying a prompt pattern pointing to the location of the camera in a second screen area.

[0042] In a seventh aspect, this application provides a graphical user interface (GUI) stored in an electronic device, the electronic device including a touchscreen, a memory, and one or more processors, the touchscreen including a first screen area and a second screen area, the first screen area being a rectangular area, the second screen area being an area of ​​the touchscreen extending from the first screen area towards the vicinity of a camera, the one or more processors being configured to execute one or more computer programs stored in the memory, characterized in that the graphical user interface includes: a first GUI displayed in the first screen area, the first GUI including an application interface of a first application; a second GUI displayed in the second screen area in response to detecting a notification from a second application, the second GUI including the notification; and, in response to detecting a first touch operation performed on the notification, continuing to display the first GUI in the first screen area and displaying a third GUI on the first GUI, the third GUI including an application interface of the second application related to the notification.

[0043] In some possible implementations, the first GUI may further include: at least one icon of the second application.

[0044] Eighthly, this application provides a computer program product, wherein when the computer program product is run on a mobile terminal, the mobile terminal performs the method as described in any one of the first to third aspects and their respective embodiments.

[0045] In a ninth aspect, this application provides a computer-readable storage medium including instructions, wherein when the instructions are executed on a mobile terminal, the mobile terminal causes the mobile terminal to perform the method of any one of the first to third aspects and their respective embodiments.

[0046] Tenthly, this application provides a mobile terminal with a touchscreen, the mobile terminal comprising: a display unit, a detection unit, and a control unit. The display unit is configured to display an application interface of a first application in a first screen area of ​​the touchscreen; the detection unit is configured to detect whether a second application has a notification and to detect whether there is a touch operation on the touchscreen; the control unit is configured to, when the detection unit detects that the second application has a notification, cause the display unit to display the notification in a second screen area of ​​the touchscreen, and, when the detection unit detects a first touch operation performed on the notification, continue to display the application interface of the first application in the first screen area, and display an application interface of the second application related to the notification on the application interface of the first application. The mobile terminal further comprises a camera, and the touchscreen comprises a first screen area and a second screen area, the first screen area being a rectangular area, and the second screen area being an area of ​​the touchscreen extending from the first screen area towards the periphery of the camera.

[0047] In some possible implementations, the display unit is also used to display an icon of at least one of the second applications in the second screen area.

[0048] In some possible implementations, the control unit is further configured to, upon the detection unit detecting a first touch operation performed on the icon of the second application, cause the display unit to display the application interface of the second application in the first screen area and the icon of the first application in the second screen area.

[0049] In some possible implementations, in conjunction with the embodiments described above, the display unit is further configured to display the icon of the second application in the second screen area when the application interface of the second application is not displayed in the second screen area.

[0050] The second application can be a system-level application or an application provided by a third-party service provider.

[0051] In some possible implementations, the display unit is configured to display a control in the second screen area; the control unit is further configured to, upon the detection unit detecting a third touch operation performed on the control, cause the display unit to hide the icon of the at least one second application and / or the notification of the second application.

[0052] In some possible implementations, the display unit is used to display the application interface of the second application on a portion of the application interface of the first application.

[0053] In some possible implementations, the control unit is further configured to process the notification when the detection unit detects a second touch operation performed on the application interface of the second application.

[0054] In some possible implementations, after the control unit processes the notification, the processing unit is further configured to enable the display unit to continue displaying the application interface of the first application in the first screen area, and not to display the application interface of the second application.

[0055] In some possible implementations, when the display unit displays the application interface of the second application related to the notification, the control unit is configured to execute the instruction corresponding to the third touch operation in the second application when the detection unit detects a third touch operation performed in the first screen area and outside the application interface of the second application, and to cause the display unit to continue displaying the application interface of the second application related to the notification in the first screen area.

[0056] In some possible implementations, when the display unit displays the application interface of the second application related to the notification, the control unit continues to display the application interface of the first application in the first screen area and does not display the application interface of the second application when the detection unit detects a fourth touch operation. Further, the control unit exits the application interface of the second application displayed in the first screen area according to the corresponding fourth touch operation. The fourth touch operation can be determined according to a preset setting, and the step of the detection unit detecting the fourth touch operation includes any of the following: the mobile terminal detects a touch operation on the notification corresponding to the second application in the second screen area; the mobile terminal detects a touch operation on the application interface of the second application; the mobile terminal detects a touch operation performed on an area within the application interface of the first application but outside the application interface of the second application.

[0057] In some possible implementations, the display unit prompts the notification by displaying the content of the notification in the second screen area.

[0058] In some possible implementations, the display unit prompts the notification by displaying the sender information of the notification in the second screen area, wherein the sender information includes one or more of the following: sender image, sender identity information, and sender sending time.

[0059] In some possible implementations, the display unit prompts the notification by changing the display method of the icon of the second application corresponding to the notification in the second screen area.

[0060] In some possible implementations, the display unit is further configured to display a control in the second screen area; the control unit is further configured to, upon the detection unit detecting a third touch operation performed on the control, cause the display unit to hide the icon of the at least one second application and / or the notification of the second application.

[0061] In some possible implementations, when the display unit displays the notification in the second screen area, the content of the notification is displayed in the second screen area in a scrolling manner.

[0062] Eleventhly, this application provides a mobile terminal with a touchscreen, the mobile terminal comprising: a display unit and a control unit, wherein the display unit is configured to display an application interface of a first application in a first screen area of ​​the touchscreen and an icon of a second application in a second screen area of ​​the touchscreen; the detection unit is configured to detect whether there is a touch operation on the touchscreen; the control unit is configured to, when the detection unit detects a first touch operation performed on the icon of the second application, cause the display unit to display the application interface of the second application in the first screen area and the icon of the first application in the second screen area.

[0063] In some possible implementations, the display unit is further configured to display the icon of the second application in the second screen area after the application interface of the second application is displayed in the first screen area, when the application interface of the second application is not displayed in the second screen area.

[0064] In a twelfth aspect, this application provides a mobile terminal with a touch screen, the mobile terminal comprising: a shooting unit, a display unit, and a control unit, wherein the shooting unit is used to capture images; the display unit is used to display the images captured by the camera on a first screen area of ​​the touch screen; and the control unit is used to control the display unit to increase the display brightness of all or part of a second screen area of ​​the touch screen above a threshold to provide supplemental lighting for the subject being photographed.

[0065] In some possible implementations, the display unit is also used to display a preset color in all or at least a partial area of ​​the second screen area to provide supplemental lighting for the subject.

[0066] In some possible implementations, the display unit is also configured to display a prompt pattern pointing to the location of the camera in a second screen area. Attached Figure Description

[0067] Figure 1 This is a schematic diagram of the hardware structure of a mobile terminal provided according to some embodiments of this application;

[0068] Figure 2 This is a schematic diagram of a portion of the hardware and software of a mobile terminal provided according to some embodiments of this application;

[0069] Figure 3A and Figure 3B These are schematic diagrams provided according to some embodiments of this application;

[0070] Figure 4 This is a schematic diagram of a graphical user interface of a mobile terminal provided according to some embodiments of this application;

[0071] Figure 5 This is a flowchart illustrating the GUI display process in a mobile terminal according to some embodiments of this application;

[0072] Figure 6A and Figure 6B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0073] Figure 7A and Figure 7B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0074] Figure 8A and Figure 8B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0075] Figure 9A , Figure 9B and Figure 9C This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0076] Figure 10A and Figure 10B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0077] Figure 11A and Figure 11B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0078] Figure 12A , Figure 12B and Figure 12C This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0079] Figure 13A and Figure 13B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0080] Figure 14A and Figure 14B This is a schematic diagram of a GUI displayed in a mobile terminal according to some embodiments of this application;

[0081] Figure 15A and Figure 15B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0082] Figure 16A and Figure 16B This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0083] Figure 17A , Figure 17B and Figure 17C This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application;

[0084] Figure 18 This is a schematic diagram of the GUI display process in a mobile terminal according to some embodiments of this application. Detailed Implementation

[0085] The present application will be further described below with reference to the accompanying drawings and embodiments.

[0086] Reference will now be made in detail to embodiments, examples of which are illustrated in the accompanying drawings. Numerous specific details are set forth in the following detailed description in order to provide a full understanding of the present application. However, it will be apparent to those skilled in the art that the present application can be practiced without these specific details. In other instances, well-known methods, processes, components, circuits, and networks have not been described in detail so as not to unnecessarily obscure aspects of the embodiments.

[0087] It should also be understood that while terms such as "first," "second," etc., may be used herein to describe various elements, these elements should not be limited by these terms. These terms are merely used to distinguish one element from another. For example, a first contact may be named a second contact, and similarly, a second contact may be named a first contact, without departing from the scope of this application. Both a first contact and a second contact are contacts, but they may not be the same contact, or in some contexts they may be the same contact.

[0088] The terminology used in the description of this application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used herein in the specification and appended claims, the singular expressions “a,” “an,” and “this” are intended to include the plural expressions as well, unless the context clearly indicates otherwise. It will also be understood that the term “and / or” as used herein refers to and covers any and all possible combinations of one or more items of the associated list. It will also be understood that the terms “comprising” and / or “including” as used in this specification specify the presence of the stated features, integers, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0089] As used herein, depending on the context, the term "if" can be interpreted as meaning "when," "after," "in response to determination," or "in response to detection." Similarly, depending on the context, the phrases "if determination..." or "if detection [the stated condition or event]" can be interpreted as meaning "when determination..." or "in response to determination..." or "when [the stated condition or event] is detected," or "in response to detection [the stated condition or event]."

[0090] The following describes embodiments of a mobile terminal, a user interface for such a mobile terminal, and associated processes for using such a mobile terminal. In some embodiments, the mobile terminal is a portable mobile terminal that also includes other functions such as a personal digital assistant and / or music player functions, such as a mobile phone, tablet computer, etc. Exemplary embodiments of the portable mobile terminal include, but are not limited to, those equipped with... Alternatively, portable mobile terminals with other operating systems can be used. Other portable mobile terminals, such as laptops or tablets with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads), can also be used.

[0091] The following discussion describes a mobile terminal that includes a display and a touch-sensitive surface. However, it should be understood that a mobile terminal may include one or more other physical user interface devices, such as a physical keyboard, mouse, and / or joystick.

[0092] Mobile devices typically support a variety of applications, such as one or more of the following: drawing applications, word processing applications, web page creation applications, spreadsheet applications, game applications, phone applications, video conferencing applications, email applications, instant messaging applications, exercise support applications, photo management applications, gallery applications, digital video camera applications, web browsing applications, digital music player applications, and / or digital video player applications.

[0093] Various applications that can run on a mobile terminal may use at least one shared physical user interface device, such as a touch-sensitive surface. One or more functions of the touch-sensitive surface, as well as the corresponding information displayed on the mobile terminal, may be displayed and / or changed from one application to the next and / or within the respective application. In this way, the shared physical architecture of the mobile terminal (such as the touch-sensitive surface) can support various applications using a user interface that is intuitive and clear to the user.

[0094] Now we focus on embodiments of portable mobile terminals with touch-sensitive displays. Figure 1 This is a block diagram illustrating a portable mobile terminal (taking mobile phone 100 as an example) having a touch-sensitive display 115 according to some embodiments. The touch-sensitive display 115 is sometimes also referred to as a "touchscreen" and may also be referred to as a touch-sensitive display system, or a display system having a touch-sensitive surface and a display screen.

[0095] It should be understood that, Figure 1 The mobile phone 100 shown is merely an example of the aforementioned mobile terminal. The mobile phone 100 may have more or fewer components than those shown in the figure, may combine two or more components, or may have different component configurations. The various components shown in the figure can be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application-specific integrated circuits.

[0096] like Figure 1 As shown, the mobile phone 100 may include components such as a processor 101, a radio frequency circuit 102, a memory 103, an input / output subsystem 104, a Bluetooth device 105, a sensor 106, a Wi-Fi device 107, a positioning device 108, an audio circuit 109, a peripheral interface 110, and a power system 111. These components can communicate via one or more communication buses or signal lines. Those skilled in the art will understand that... Figure 1 The hardware structure shown does not constitute a limitation on the mobile terminal and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0097] The following is combined Figure 1 A detailed introduction to the various components of the mobile phone 100:

[0098] The processor 101 is the control center of the mobile phone 100. It connects to various parts of the mobile phone 100 via various interfaces and lines. It executes various functions and processes data by running or executing applications (Apps) stored in the memory 103 and calling data and instructions stored in the memory 103. In some embodiments, the processor 101 may include one or more control units; the processor 101 may also integrate an application processor and a modem processor; wherein the application processor mainly handles the operating system, user interface, and applications, while the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 101. For example, the processor 101 may be a Kirin 960 chip manufactured by Huawei Technologies Co., Ltd. In some embodiments of this application, the processor 101 may also include a fingerprint verification chip for verifying the collected fingerprint.

[0099] The radio frequency (RF) circuit 102 can be used for receiving and transmitting wireless signals during information transmission or calls. Specifically, the RF circuit 102 can receive downlink data from the base station and pass it to the processor 101 for processing; additionally, it can transmit uplink data to the base station. Typically, the RF circuit includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low-noise amplifier, a duplexer, etc. Furthermore, the RF circuit 102 can also communicate with other devices wirelessly. The wireless communication can use any communication standard or protocol, including but not limited to Global System for Mobile Communications (GSMO), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WDMA), Long Term Evolution (LTE), email, Short Message Service (SMS), etc.

[0100] The memory 103 is used to store applications, software, and data. The processor 101 executes various functions and data processing of the mobile phone 100 by running the applications and data stored in the memory. The memory 103 mainly includes a program storage area and a data storage area. The program storage area can store the operating system and applications required for at least one function (such as sound playback function, image management function, etc.). The data storage area can store data created based on the use of the mobile phone (such as audio data, phonebook, calendar events, etc.). In addition, the memory may include high-speed random access memory, and may also include non-volatile memory, such as disk storage devices, flash memory devices, or other volatile solid-state storage devices.

[0101] The input / output subsystem (I / O subsystem) 104 couples input / output devices on device 100, such as touch-sensitive display 115 and other input control devices 116, to processor 101. I / O subsystem 104 may include display controller 117 and one or more input controllers 118 for the other input control devices 116. The one or more input controllers 118 receive electrical signals from / send electrical signals to the other input control devices 116. The other input control devices 116 may include physical buttons (e.g., push-buttons, rocker buttons, etc.), dial pads, slide switches, joysticks, click dials, etc. In some other embodiments, input controllers 118 may be coupled (or not coupled) to any of the following: a keyboard, an infrared port, a USB port, and a pointing device such as a mouse. The one or more buttons may include up / down buttons for volume control of speaker 112 and / or microphone 113. The one or more buttons may include push-buttons.

[0102] The touch-sensitive display 115 provides an input and output interface between the mobile terminal and the user. The display controller 117 receives electrical signals from and / or sends electrical signals to the touch-sensitive display 115. The touch-sensitive display 115 displays visual output to the user. Visual output may include graphics, text, icons, video, and any combination thereof (collectively, "graphics"). In some embodiments, some or all of the visual output may correspond to interface elements. The touch-sensitive display 115 is sometimes referred to as a "touchscreen" for convenience, and may also be called a touch-sensitive display system, or a display system with a touch-sensitive surface and a display screen.

[0103] The touch-sensitive display 115 has a touch-sensitive surface, display, sensor, or sensor array that receives input from a user based on tactile and / or tactile contact. The touch-sensitive display 115 and display controller 117 (along with any associated modules and / or instruction set in memory 103) detect contact on the touch-sensitive display 115 (and any movement or interruption of that contact), translating the detected contact into interaction with interface elements displayed on the touch-sensitive display 115 (e.g., one or more soft keys, icons, web pages, or images). In an exemplary embodiment, the contact point between the touch-sensitive display 115 and the user corresponds to the user's finger.

[0104] The touch-sensitive surface (e.g., a touch panel) can collect touch events from the user of the mobile phone 100 on or near the touch-sensitive surface (e.g., user actions using a finger, stylus, or any suitable object on or near the touch-sensitive surface), and send the collected touch information to other devices such as the processor 101. Touch events near the touch-sensitive surface can be termed hover touch; hover touch refers to a situation where the user does not need to directly touch the touchpad to select, move, or drag a target (e.g., an icon), but only needs to be near the mobile terminal to perform the desired function. In hover touch applications, the terms "touch" or "contact" do not imply direct contact with the touchscreen, but rather contact near or close to it. Touch-sensitive surfaces capable of hover touch can be implemented using capacitive, infrared, or ultrasonic sensors. The touch-sensitive surface may include a touch detection device and a touch controller. The touch detection device detects the user's touch location and the signal generated by the touch operation, transmitting the signal to the touch controller. The touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 101. The touch controller can also receive and execute instructions sent by the processor 101. Furthermore, various types of touch-sensitive surfaces, such as resistive, capacitive, infrared, and surface acoustic wave, can be used. The display (also called a screen) can be used to display information input by the user or information provided to the user, as well as various menus of the mobile phone 100. The display can be configured using liquid crystal displays, organic light-emitting diodes, etc. The touch-sensitive surface can cover the display. When the touch-sensitive surface detects a touch event on or near it, it transmits the information to the processor 101 to determine the type of touch event. Subsequently, the processor 101 provides corresponding visual output on the display based on the type of touch event. Although in Figure 1 In this embodiment, the touch-sensitive surface and the display are two separate components for implementing the input and output functions of the mobile phone 100. However, in some embodiments, the touch-sensitive surface and the display can be integrated to achieve the input and output functions of the mobile phone 100. It is understood that the touchscreen 115 is composed of multiple layers of stacked materials. In this embodiment, only the touch-sensitive surface (layer) and the display (layer) are shown; other layers are not described. Furthermore, in other embodiments of this application, the touch-sensitive surface can cover the display, and the size of the touch-sensitive surface is larger than the size of the display, so that the display is completely covered by the touch-sensitive surface. Alternatively, the touch-sensitive surface can be configured as a full-screen panel on the front of the mobile phone 100, meaning that all touches made by the user on the front of the mobile phone 100 can be sensed by the phone, thus achieving a full touch experience on the front of the phone. In other embodiments, the touch-sensitive surface is configured as a full-screen panel on the front of the mobile phone 100, and the display can also be configured as a full-screen panel on the front of the mobile phone 100, thus achieving a borderless structure on the front of the phone.

[0105] The touch-sensitive display 115 may use LCD (Liquid Crystal Display) technology, LPD (Light Emitting Diode) technology, or LED (Light Emitting Diode) technology, but other display technologies may be used in other embodiments. The touch-sensitive display 115 and the display controller 117 may utilize any of the various touch sensing technologies now known or to be developed thereafter, as well as other proximity sensor arrays or other elements for determining one or more points of contact with the touch-sensitive display 115, to detect contact and any movement or interruption. These various touch sensing technologies include, but are not limited to, capacitive, resistive, infrared, and surface acoustic wave technologies. In one exemplary embodiment, projected mutual capacitance sensing technology is used.

[0106] The touch-sensitive display 115 can have a video resolution exceeding 100 dpi. In some embodiments, the touchscreen has a video resolution of approximately 160 dpi. Users can interact with the touch-sensitive display 115 using any suitable object or attachment, such as a stylus, finger, etc. In some embodiments, the user interface is designed to work primarily with finger-based touch and gestures, which may be less precise than stylus-based input due to the larger contact area of ​​the finger on the touchscreen. In some embodiments, the device translates coarse finger-based input into precise pointer / cursor positions or commands to perform the user-expected actions.

[0107] In some embodiments, the touchscreen may include a group of pressure-sensitive sensors.

[0108] In other embodiments, in addition to the touchscreen, the mobile phone 100 may include a touchpad (not shown) for activating or deactivating specific functions. In some embodiments, the touchpad is a touch-sensitive area of ​​the mobile terminal that differs from the touchscreen and does not display visual output. The touchpad may be a touch-sensitive surface separate from the touch-sensitive display 115, or an extension of the touch-sensitive surface formed by the touchscreen.

[0109] The mobile phone 100 may also include one or more light sensors 119. Figure 1An optical sensor 119 coupled to a light sensor controller 120 in the I / O subsystem 104 is shown. The light sensor 119 may include a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The light sensor 119 receives light projected through one or more lenses from the external environment and converts the light into data representing an image. In conjunction with a camera module 213, the light sensor 119 can capture still images or video. In some embodiments, one or more light sensors are located at the front and / or rear of the mobile phone 100, opposite a touch-sensitive display 115 on the front of the device, such that the touch-sensitive display 115 can be used as a viewfinder for still image and / or video image acquisition. In some embodiments, another one or more light sensors are located at the front of the device, allowing the user to view images of other video conference participants on a touchscreen display for use in video conferencing; the light sensor 119 may be a camera.

[0110] In various embodiments of this application, the mobile phone 100 may also have a fingerprint recognition function. For example, a fingerprint reader may be configured on the back of the mobile phone 100 (e.g., below the rear camera) or on the front of the mobile phone 100 (e.g., below the touchscreen 115). Alternatively, the fingerprint recognition function can be implemented by configuring a fingerprint reader in the touchscreen 115, that is, the fingerprint reader can be integrated with the touchscreen 115 to realize the fingerprint recognition function of the mobile phone 100. In this case, the fingerprint reader may be configured in the touchscreen 115, may be part of the touchscreen 115, or may be configured in the touchscreen 115 in other ways. In addition, the fingerprint reader may also be implemented as a full-screen fingerprint reader, so the touchscreen 115 can be regarded as a panel that can collect fingerprints at any location. The fingerprint reader can send the collected fingerprint to the processor 101 so that the processor 101 can process the fingerprint (e.g., fingerprint verification). The main component of the fingerprint reader in the embodiments of this application is a fingerprint sensor, which can adopt any type of sensing technology, including but not limited to optical, capacitive, piezoelectric, or ultrasonic sensing technologies.

[0111] In addition, for the specific technical solutions of integrating fingerprint acquisition devices in the touch screen in the embodiments of this application, please refer to the patent application US2015 / 0036065 A1 published by the United States Patent and Trademark Office, entitled "Fingerprint Sensor in Mobile Terminal", the entire contents of which are incorporated herein by reference in various embodiments.

[0112] Bluetooth device 105 is used to establish a wireless link with other mobile terminals (such as smartwatches, tablets, etc.) and exchange data via the Bluetooth communication protocol.

[0113] The mobile phone 100 may also include at least one sensor 106, such as the aforementioned light sensor 119, motion sensor, and other sensors. Specifically, the light sensor 119 may include an ambient light sensor and a proximity sensor. The ambient light sensor can adjust the brightness of the touch-sensitive display 115's display panel according to the ambient light level, and the proximity sensor can turn off the power to the display panel when the mobile phone 100 is moved to the ear. As a type of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in various directions (generally three axes). When stationary, it can detect the magnitude and direction of gravity, and can be used for applications that identify the mobile terminal's posture (such as landscape / portrait switching, related games, magnetometer posture calibration), vibration recognition-related functions (such as pedometers, taps), etc. Other sensors that the mobile phone 100 may also be equipped with, such as gyroscopes, barometers, hygrometers, thermometers, and infrared sensors, will not be described in detail here.

[0114] Wi-Fi device 107 is used to provide Wi-Fi network access to mobile phone 100. Mobile phone 100 can use Wi-Fi device 107 to help users send and receive emails, browse web pages and access streaming media, etc. It provides users with wireless broadband Internet access.

[0115] The positioning device 108 provides geographical location information to the mobile phone 100, which indicates the current geographical location of the phone. It is understood that the positioning device 108 can specifically be a receiver for a GPS system, a BeiDou Navigation Satellite System, or the Russian GLONASS system. After receiving the geographical location information from the aforementioned positioning communication system, the positioning device 108 sends the information to the processor 101 for further processing or to the memory 103 for storage.

[0116] The audio circuit 109, speaker 112, and microphone 113 provide an audio interface between the user and the mobile phone 100. The audio circuit 109 converts the received audio data into electrical signals and transmits them to the speaker 112, where the speaker 112 converts them into sound signals for output. The speaker 112 may include a power amplifier speaker, earpiece, etc. On the other hand, the microphone 113 converts the collected sound signals into electrical signals, which are received by the audio circuit 109, converted into audio data, and then output to the radio frequency circuit 102 for transmission to, for example, another mobile phone, or to the memory 103 for further processing.

[0117] The mobile phone 100 may also include a power system 111 (including a power fault detection circuit, a power converter or inverter, a power status indicator, a battery, and a power management chip) that supplies power to the various components. The battery can be logically connected to the processor 101 through the power management chip, thereby enabling the power system 111 to manage functions such as charging, discharging, and power consumption.

[0118] The mobile phone 100 may also include a peripheral interface 110 for providing an interface for external input / output devices (such as a mouse, keyboard, external display, external memory, etc.). The peripheral interface 110 can be used to couple the device's input and output peripherals to the processor 101 and the memory 103. The processor 101 runs or executes various applications and / or instruction sets stored in the memory 103 to perform various functions of the mobile phone 100 and process data. In some embodiments, the processor 101 may include an image signal processor and a dual-core or multi-core processor.

[0119] Although not shown, the mobile phone 100 may also include a camera (front-facing camera and / or rear-facing camera), a SIM card slot, a flash, a micro-projection device, a near field communication (NFC) device, etc.

[0120] In some embodiments, such as Figure 2 As shown, the software stored in memory 103 may include an operating system 201, a communication module (or instruction set) 202, a contact / movement module (or instruction set) 203, a graphics module (or instruction set) 204, a text input module (or instruction set) 205, a positioning module (or instruction set) 206, a Wi-Fi module (or instruction set) 207, and an application program (or instruction set) 208. Furthermore, in some embodiments, memory 103 may also store device / global internal state 209, such as... Figure 1 and 2 As shown in the figure. The device / global internal state 209 may include at least one of the following states: active application state, indicating which applications (if any) are currently active; display state, indicating what applications, views or other information occupy various areas of the touchscreen 115; sensor state, including information obtained from various sensors and peripheral interfaces 110 of the mobile terminal; and information about the geographical location and orientation of the mobile terminal.

[0121] The operating system 201 (e.g., Darwin, RTXC, LINUX, UNIX, OS X, WINDOWS, ANDROID, or an embedded operating system such as VxWorks) includes various software and / or drivers for controlling and managing general system tasks (e.g., memory management, storage device control, power management, etc.) and facilitates communication between various hardware and software components. Furthermore, in some embodiments, the memory 103 may also store the gallery 210.

[0122] The communication module 202 can communicate with other mobile terminals via the peripheral interface 110, and may also include various software for processing data received by the radio frequency circuit 102 and / or the peripheral interface 110. The peripheral interface (e.g., Universal Serial Bus (USB), FireWire, etc.) is adapted to be directly coupled to other mobile terminals or indirectly coupled via a network (e.g., the Internet, wireless LAN, etc.). In some embodiments, the peripheral interface 110 may also be a multi-pin (e.g., 30-pin) connector that is the same as or similar to, and / or compatible with, the 30-pin connector used on iPod (Apple Inc. trademark) devices.

[0123] The touch / movement module 203 can detect contact with the touchscreen 115 and other touch-sensitive devices (e.g., a touchpad or physical click wheel). The touch / movement module 203 may include multiple software components for performing various operations related to touch detection, such as determining whether a contact has occurred (e.g., detecting a finger press event), determining whether there is movement of the contact and tracking that movement on the touch panel (e.g., detecting one or more finger drag events), and determining whether the contact has terminated (e.g., detecting a finger lift event or a contact interruption). The touch / movement module 203 receives touch data from the touch panel. Determining the movement of the contact point may include determining the velocity (magnitude), velocity (magnitude and direction), and / or acceleration (change in magnitude and / or direction) of the contact point, the movement of which is represented by a series of touch data. These operations can be applied to single-point contact (e.g., a single finger contact) or simultaneous multi-point contact (e.g., "multi-touch" / multiple finger contact).

[0124] The touch / movement module 203 can also detect user gesture input. Different types of gestures on a touch-sensitive surface have different contact patterns. Therefore, the type of gesture can be detected by detecting the specific contact pattern. For example, detecting a single-finger tap gesture includes detecting a finger press event, and then detecting a finger lift-off (lift-away) event at the same (or substantially the same) location as the finger press event (e.g., at the icon location). As another example, detecting a finger swipe gesture on a touch-sensitive surface includes detecting a finger press event, then detecting one or more finger drag events, and subsequently detecting a finger lift-off (lift-away) event.

[0125] The gestures described above can be varied. For example, a Flick gesture involves tapping the touch-sensitive surface of the touch-sensitive display 115 with a single finger, then quickly sliding and then quickly leaving the touch-sensitive surface, such as scrolling up and down the screen or switching images left and right; a Slide gesture involves tapping the touch-sensitive surface with a single finger, then maintaining contact and moving it, such as sliding to unlock; a Swipe gesture involves multiple fingers touching the touch-sensitive surface, then maintaining contact and moving it, such as a three-finger grab to return to the home screen; a Tap gesture involves tapping the touch-sensitive surface with a single finger and then immediately leaving the touch-sensitive surface; and a Double gesture... The Tap gesture is an operation of performing two Tap gestures within a very short period of time; the above gesture can also be the Touch & Hold gesture, which is a finger lightly tapping the touch-sensitive surface and holding it still; the above gesture can also be the Drag gesture, which is a finger lightly tapping the touch-sensitive surface and slowly moving the finger without leaving the touch-sensitive surface (generally with a clear target location, such as dragging a file to the trash can to delete the file); the above gesture can also be the Pinch gesture, which is two fingers (usually the thumb and index finger) pinching together on the touch-sensitive surface; the above gesture can also be the Unpinch gesture, which is two fingers (usually the thumb and index finger) spreading apart on the touch-sensitive surface; it is understood that gestures can be other types of gestures besides those listed above, and this embodiment does not impose any restrictions on the type of gesture.

[0126] The graphics module 204 includes various known software for rendering and displaying graphics on the touch-sensitive display 115 or other displays, including components for changing the intensity of the displayed graphics. As used herein, the term "graphics" includes any object that can be displayed to a user, and includes, without limitation, text, web pages, icons (such as user interface objects including soft keys), digital images, videos, animations, and the like.

[0127] In some embodiments, the graphics module 204 stores data representing graphics to be used. Each graphic may be assigned a corresponding code. The graphics module 204 receives one or more codes specifying the graphics to be displayed from applications, etc., and also receives coordinate data and other graphic attribute data if necessary, and then generates screen image data to output to the display controller 117.

[0128] The text input module 205, which can be a component of the graphics module 204, provides a soft keyboard for entering text in various applications 208 (e.g., Contacts 208-1, Browser 208-6, and any other application that requires text input).

[0129] The positioning module 206 is used to determine the geographical location of the mobile terminal and provides this information for use in various applications 208 (e.g., provided to the phone 2082 for geographical location-based dialing, provided to the camera module 208-3 as image / video metadata, and provided to other applications that provide geographical location-based services, such as weather desktop applet 211-1, map / navigation desktop applet 211-2, etc.).

[0130] Wi-Fi module 207 is used to run various instructions required by Wi-Fi device 107.

[0131] Application 208 may include the following modules (or instruction sets) or subsets or supersets thereof:

[0132] • The Contacts module 208-1 (sometimes also called the address book or contacts) is used to manage stored contacts;

[0133] ●Telephone module 208-2;

[0134] • Camera module 208-3 for still images and / or video images, for receiving user instructions to perform digital imaging (taking pictures) using light sensor 119;

[0135] • Image management module 208-4 is used to perform operations such as editing, deleting, moving, and renaming on the image library 210 stored in memory 103;

[0136] • Exercise Support Module 208-5;

[0137] • Browser module 208-6;

[0138] ◆ Desktop mini-program module 211 may include one or more of the following: weather desktop mini-program 211-1, map / navigation desktop mini-program 211-2 and other desktop mini-programs obtained by the user, and user-defined desktop mini-program 211-3;

[0139] • Multimedia player module (i.e., video and music player module) 208-7, which can be composed of a video player module and a music player module;

[0140] • Word processing module 208-8;

[0141] Video conferencing module 208-9,

[0142] • Email module 208-10;

[0143] • Instant messaging module 208-11;

[0144] ●Notification module 208-12;

[0145] • Map module 208-13;

[0146] ◆ Calendar module 208-14; and / or

[0147] • App Store Module 208-15.

[0148] Examples of other applications 208 that can be stored in memory 103 include other word processing applications, other image editing applications, drawing applications, Java-enabled applications, encryption, digital rights management, voice recognition, and voice copying.

[0149] In conjunction with the touch-sensitive display 115, the contact module 203, the graphics module 204, and the text input module 205, the contact module 208-1 can be used to manage an address book or contact list (e.g., stored in the application's internal state in memory 103), including: adding names to the address book; deleting names from the address book; associating phone numbers, email addresses, home addresses, or other information with names; associating images with names; categorizing and classifying names; providing phone numbers or email addresses to initiate and / or facilitate communication via telephone 208-2, email; and so on.

[0150] Combining the radio frequency circuit 102, audio circuit 109, speaker 112, microphone 113, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, and text input module 205, the telephone module 208-2 can be used to input character sequences corresponding to telephone numbers, access one or more telephone numbers in the contact module 208-1, modify already entered telephone numbers, dial corresponding telephone numbers, initiate calls, and disconnect or hang up when a call is completed. As described above, wireless communication can use any of a number of communication standards, protocols, and technologies.

[0151] Combining radio frequency circuit 102, audio circuit 109, speaker 112, microphone 113, touch-sensitive display 115, display controller 117, light sensor 119, light sensor controller 120, motion contact module 203, graphics module 204, text input module 205, contact module 208-1, and telephone module 208-2, video conferencing module 208-9 includes executable instructions for initiating, conducting, and terminating video conferences between the user and one or more other participants based on user instructions.

[0152] Incorporating the radio frequency circuitry 102, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, and text input module 205, the email client module 208-10 includes executable instructions for creating, sending, receiving, and managing emails in response to user commands. Combined with the image management module 208-4, the email client module 208-10 makes it very easy to create and send emails containing still images or video images captured by the camera module 208-3.

[0153] In conjunction with the radio frequency circuit 102, touch-sensitive display 115, display controller 117, contact module 203, graphics module 204, and text input module 205, the instant messaging module 208-11 may include executable instructions for inputting a character sequence corresponding to an instant message, modifying previously input characters, transmitting a corresponding instant message (e.g., using the Short Message Service (SMS) or Multimedia Messaging Service (MMS) protocol for telephone-based instant messaging or using XMPP, SIMPLE, or IMPS for Internet-based instant messaging), receiving an instant message, and viewing a received instant message. In some embodiments, the transmitted and / or received instant messages may include graphics, photographs, audio files, video files, and / or other attachments supported by MMS and / or Enhanced Messaging Service (EMS). As used herein, "instant message" refers to both telephone-based messages (e.g., messages sent using SMS or MMS) and Internet-based messages (e.g., messages sent using XMPP, SIMPLE, or IMPS).

[0154] Incorporating the radio frequency circuit 102, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, text input module 205, positioning module 206, map module 208-13, and multimedia player module 208-7, the exercise support module 208-5 includes executable instructions for creating exercises (e.g., with time, distance, and / or calorie consumption goals); communicating with exercise sensors (sports equipment); receiving exercise sensor data; calibrating sensors used to monitor exercise; selecting and playing music for exercise; and displaying, storing, and transmitting exercise data.

[0155] In conjunction with the touch-sensitive display 115, display controller 117, light sensor 119, light sensor controller 120, motion / contact module 203, graphics module 204, and image management module 208-4, camera module 208-3 includes executable instructions for capturing still images or videos (including video streams) and storing them in memory 103 (e.g., in digital photo 210), modifying the characteristics of still images or videos, or deleting still images or videos from memory 1023 (e.g., from digital photo 210).

[0156] In conjunction with the touch-sensitive display 115, display controller 117, motion / touch module 203, graphics module 204, text input module 205, and camera module 208-3, the image management module 208-4 includes executable instructions for arranging, modifying (e.g., editing), or otherwise manipulating, tagging, deleting, presenting (e.g., in a digital slideshow or album), and storing still images and / or video images (including still images and / or video images stored in gallery 210).

[0157] Combining the radio frequency circuit 102, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, and text input module 205, the browser module 208-6 includes executable instructions for browsing the Internet (including searching, linking to, receiving, and displaying web pages or portions thereof, as well as attachments and other files linked to web pages) according to user instructions.

[0158] Combining the radio frequency circuit 102, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, text input module 205, email client module 208-10, and browser module 208-6, the calendar module 208-14 includes executable instructions for creating, displaying, modifying, and storing calendars and calendar-related data (e.g., calendar entries, to-do lists, etc.) according to user instructions.

[0159] In conjunction with the radio frequency circuit 102, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, text input module 205, and browser module 208-6, the desktop applet module 149 is a micro-application that can be downloaded and used by a user (e.g., weather desktop applet 211-1, map / navigation desktop applet 211-2) or a user-created micro-application (e.g., a user-defined desktop applet 211-3). In some embodiments, the desktop applet includes HTML (Hypertext Markup Language) files, CSS (Cascading Style Sheets) files, and JavaScript files. In some embodiments, the desktop applet includes XML (Extensible Markup Language) files and JavaScript files (e.g., Yahoo! desktop applet).

[0160] In conjunction with the touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, audio circuitry 109, speaker 112, radio frequency circuitry 102, and browser module 208-6, the multimedia player module 208-7 includes executable instructions allowing users to download and play back recorded music and other sound files stored in one or more file formats (such as MP3 or AAC files), and executable instructions for displaying, presenting, or otherwise playing back video (e.g., on the touch-sensitive display 115 or on an external display connected via peripheral interface 110). In some embodiments, the mobile phone 100 may include MP3 player functionality.

[0161] In conjunction with the radio frequency circuit 102, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, text input module 205, positioning module 206, and browser module 208-6, the map module 208-13 can be used to receive, display, modify, and store maps and map-related data (e.g., driving routes; data on shops and other points of interest at or near specific geographic locations; and other geographic location-based data) according to user instructions.

[0162] Combining the radio frequency circuit 102, touch-sensitive display 115, display controller 117, motion / contact module 203, graphics module 204, text input module 205, and browser module 208-6, the application store module 208-15 can be used to receive and display data related to the application store, such as prices and content, according to user instructions.

[0163] In conjunction with the touch-sensitive display 115, display controller 117, motion / contact module 203, and graphics module 204, notification module 208-12 includes executable instructions to display notifications or warnings (such as incoming messages or calls, calendar event reminders, application events, etc.) on the touch-sensitive display 115.

[0164] Each of the modules and application programs described above corresponds to a set of executable instructions for performing one or more of the functions described above, as well as the methods described in this application (e.g., computer-implemented methods and other information processing methods described herein). These modules (i.e., instruction sets) need not be implemented as separate software programs, processes, or modules; therefore, various subgroups of these modules can be combined or otherwise rearranged in various embodiments. In some embodiments, memory 103 may store a subgroup of the modules and data structures described above. Furthermore, memory 103 may store additional modules and data structures not described above.

[0165] Figure 2Each of the elements identified above may be stored in one or more of the aforementioned memories 103. Each of the modules identified above corresponds to a set of instructions for performing the functions described above. The modules or programs identified above (i.e., instruction sets) need not be implemented as separate software programs, processes, or modules, and therefore various subgroups of these modules may be combined or otherwise rearranged in various embodiments. In some embodiments, memory 103 may store subgroups of the modules and data structures described above. Furthermore, memory 103 may also store additional modules and data structures not described above.

[0166] In some embodiments, a mobile terminal is a device on which the operation of a predefined set of functions is performed exclusively via a touchscreen and / or touchpad. By using a touchscreen and / or touchpad as the primary input control device for operation of the mobile terminal, the number of physical input control devices (such as push-buttons, dial pads, etc.) on the mobile terminal can be reduced.

[0167] The predefined set of functions that can be performed via a touchscreen and / or touchpad includes navigation between user interfaces. In some embodiments, when the touchpad is touched by a user, it navigates the mobile terminal from any graphical user interface that can be displayed on the mobile terminal to a main menu, primary menu, or root menu. In such embodiments, the touchpad may be referred to as a "menu button." In some other embodiments, the menu button may be a physical push-button or other physical input control device, rather than a touchpad.

[0168] The following embodiments can all be implemented in a mobile terminal (e.g., mobile phone 100) with the above-described hardware.

[0169] Figure 3A and Figure 3B A mobile terminal with a touchscreen (taking mobile phone 100 as an example) according to some embodiments is shown. Mobile terminal 100 may also include physical devices such as a camera 306, an earpiece 307, and an ambient light sensor (not shown). The camera may include one or more front-facing cameras and one or more rear-facing cameras, wherein the front-facing cameras are disposed on the same side as the display screen, and the rear-facing cameras are disposed on the back of the display screen. The front-facing cameras may be disposed on the front of the phone and closely arranged with the display screen, for example... Figure 3A As shown, the front-facing camera 306 is located in the center near the top of the phone, and the earpiece 307 is located above the front-facing camera 306, or for example... Figure 3BAs shown, the front-facing camera 306 is located near the top of the mobile terminal 100, slightly to one side. The earpiece 307 is positioned directly above the front-facing camera 306. Alternatively, the front-facing camera 306 can also be positioned near the bottom of the mobile terminal 100; specific designs can be determined according to product design. The touchscreen 115 is an irregularly shaped rectangular touchscreen. The irregular area of ​​the touchscreen 115 extends to both sides of the front-facing camera 306 at the top of the mobile terminal 100, providing working space for devices such as the camera 306 and earpiece 307, while significantly increasing the screen-to-body ratio and improving the visual effect. In the following embodiment, the front-facing camera 306 is positioned at the top center of the mobile terminal 100 as an example.

[0170] Touchscreen 115 can display one or more graphics within a graphical user interface (GUI). In this embodiment, and in other embodiments described below, the mobile terminal can detect actions by which a user selects one or more of these graphics by, for example, making gestures on the graphics with one or more fingers 301 (not drawn to scale in the figures) or with one or more styluses (not shown). In some embodiments, the selection of one or more graphics occurs when the user breaks contact with the graphics. In some embodiments, gestures may include one or more taps, one or more swipes (from left to right, from right to left, up and / or down), and / or flicks by a finger already in contact with the mobile terminal 100 (from right to left, from left to right, up and / or down). In some embodiments, unintentional contact with a graphic will not select the graphic. For example, a swipe gesture over an application icon will not select the corresponding application when the gesture corresponding to selection is a tap.

[0171] Mobile terminal 100 may also include one or more physical buttons, such as a home button 303, a menu button 304, and a back button 305. As previously described, the menu button 304 can be used to navigate to any of the applications 208 in a set of applications that can run on mobile terminal 100. In some other embodiments, the above buttons may be implemented as virtual keys displayed in a graphical user interface (GUI) on touchscreen 115.

[0172] In some embodiments, the mobile terminal 100 may further include a push-button for powering on / off and locking the device, one or more volume control buttons, a SIM card slot, a headset jack, and a docking / charging external port. The push-button can be used to power on / off the device by pressing the button and holding it in the pressed state for a predefined time interval; to lock the device by pressing the button and releasing it before the predefined time interval has elapsed; and / or to unlock the device or initiate an unlocking process. In an alternative embodiment, the device 100 may also accept voice input via a microphone 113 for activating or deactivating certain functions.

[0173] Now let’s turn our attention to an embodiment of the graphical user interface (GUI) that can be implemented on the mobile terminal 100.

[0174] like Figure 4 As shown, the mobile terminal provided in this application embodiment has a display screen and a camera. The display screen can be a touch screen, which includes a first screen area 308 and a second screen area 309. The first screen area 308 is a rectangular area, and the second screen area 309 is the area of ​​the touch screen extending from the first screen area 308 towards the periphery of the front-facing camera. Therefore, the touch screen 115 differs from the regular rectangular touch screens in the prior art. The display area of ​​the touch screen 115 extends to both sides of the front-facing camera 306 at the top of the mobile terminal 100, providing working space for devices such as the camera 306 and the earpiece 307, while greatly increasing the screen-to-body ratio of the touch screen 115 and improving the visual effect. In some of the following embodiments, the front-facing camera 306 is set at the top center of the mobile terminal 100 as shown in the accompanying drawings for illustration.

[0175] In this embodiment, the first screen area 308 and the second screen area 309 can be controlled by the same display controller 117.

[0176] In some embodiments, when the display is turned on or when the user clicks the home screen button 303, the mobile terminal displays a series of exemplary graphical user interfaces (GUIs) on the touch screen, including displaying the home screen in the first screen area 303, displaying device status icons such as Wi-Fi signal, communication signal, battery level, and time in the second screen area 309, and also displaying application icons such as SMS, email, camera, music, and WeChat in the second screen area.

[0177] The main screen can include multiple sub-screens, each containing different content. Figure 4Taking this as an example, the GUI can be the first sub-screen in the main screen of the mobile terminal. This first sub-screen is displayed on the touchscreen of the mobile terminal and may include a main screen indicator 403 and icons of various apps. The main screen indicator 403 is used to indicate to the user which sub-screen is currently displayed. For example, this first sub-screen includes multiple rows and columns of app icons; when the mobile terminal detects that the user's finger (or stylus, etc.) touches a location on the touchscreen, in response to the touch event, the mobile terminal can open the graphical user interface of the app corresponding to a specific app icon. It is understood that in some other embodiments, the main screen may also include a Dock bar, which may include commonly used app icons, etc., which will not be elaborated further.

[0178] Combination Figure 4 In some embodiments, the graphical user interface 400 exemplarily includes the following elements or a subset or superset thereof:

[0179] Displayed on the first screen area 308:

[0180] • Homepage indicator 403;

[0181] Home button 303;

[0182] ●Menu button 304;

[0183] • Back button 305;

[0184] ◆The application icon, for example:

[0185] ◆Email 404;

[0186] ◆Calendar 405;

[0187] ◆Settings 406 provide access to the settings of device 100 and its various applications 208;

[0188] ◆Camera 407;

[0189] ◆Tel: 408;

[0190] ◆Contact person 409;

[0191] ◆Short message 410;

[0192] ◆Image Gallery 411;

[0193] ◆Weather 412;

[0194] ◆Reading 413;

[0195] ◆App Store 414;

[0196] ◆Map 415;

[0197] ◆Browser 416;

[0198] ◆Video and music player 417; and

[0199] ◆Instant messaging application (WeChat) 418.

[0200] Displayed on the second screen area 309:

[0201] • Wireless communication signal strength indicator 421;

[0202] • Time indicator 402;

[0203] • Battery status indicator 401;

[0204] • Wi-Fi signal strength indicator 419;

[0205] ● Alarm clock indicator 420;

[0206] • Application icon 422, etc.

[0207] Furthermore, while the examples below are given primarily with reference to finger input (e.g., single-finger touch, single-finger tap gesture, single-finger swipe gesture), it should be understood that in some embodiments, one or more of these finger inputs may be replaced by input from another input device (e.g., stylus input).

[0208] The focus now shifts to embodiments of user interfaces (“UIs”) and associated processes that can be implemented on mobile terminals (such as portable mobile terminal 100) having displays and touch-sensitive surfaces. The mobile terminal 100 described in this application aims to fully utilize the discontinuously displayed second screen area 309 of the display screen 115 to provide diverse interactive functions and enhance the user experience.

[0209] In this document, unless otherwise specified, user gestures are flexible and can include clicks, double-clicks, swipes, circles, lines, single-finger touches, or multi-finger touches, etc. Those skilled in the art will understand that the specific gesture choice is flexible as long as a substantially similar effect is achieved. In this document, unless otherwise specified, the location or area on which user gestures act on the touch-sensitive surface is also flexible; it can be an area or nearby of an application interface element displayed on the screen, a blank area where the screen does not display application interface elements, an area displaying a function setting on the screen, etc. Those skilled in the art will understand that the specific location or area on which gestures act on the touch-sensitive surface can be flexibly set as long as a substantially similar effect is achieved.

[0210] In some embodiments, the mobile terminal 100 can determine the intention of the gesture by detecting the pressure, duration, area, position, distance to one or more application icons, or distance to the boundary of the touch-sensitive surface of the finger 301, and thus respond to the gesture.

[0211] Figure 5 A flowchart illustrating a method for displaying a graphical user interface according to some embodiments is shown. The method is performed on a mobile terminal 100 with a display, as mentioned in the following embodiments. In some embodiments, the display is a touchscreen display, and a touch-sensitive surface is on the display. In some embodiments, the display and the touch-sensitive surface are separate. Some operations in the method can be combined, and / or the order of some operations can be changed.

[0212] like Figure 5 As shown, the method includes steps 501 to 503. First, in step 501, the mobile terminal displays the application interface of the first application in the first screen area; then, in step 502, when the second application receives a notification, the mobile terminal displays the notification in the second screen area; in step 503, when a first touch operation on the notification is detected, the mobile terminal continues to display the application interface of the first application in the first screen area, and displays the application interface of the second application related to the notification on top of the application interface of the first application.

[0213] The following is a detailed description with reference to some embodiments and accompanying drawings.

[0214] like Figure 6A As shown, finger 301 can be detected on the touch-sensitive surface of touchscreen 115. In response to finger 301 tapping application icon 418 on the first screen area 308, mobile terminal 100 launches application icon 418. Afterwards, the graphical user interface of mobile terminal 100 transitions to... Figure 6B The application interface content is displayed on the first screen area 308.

[0215] In some embodiments, the mobile terminal 100 may explicitly or implicitly prompt the user that the application icon 418 can be activated, for example, by the mobile terminal 100 vibrating.

[0216] In some embodiments, application icon 503 may not respond to finger 301. Mobile terminal 100 may also explicitly or implicitly prompt the user that application icon 418 is not responding to finger 301.

[0217] In other embodiments, when the touchscreen displays such as Figure 4 When the main screen interface is displayed, the mobile terminal 100 responds to a finger 301 swiping from a non-application icon area in the first screen area 308, and displays an interface in the first screen area 308 that transitions from one screen to another.

[0218] In the above embodiments, in response to a finger 301 moving in the first screen area 308, when the mobile terminal 100 changes the corresponding display content in the first screen area 308, the same content can be displayed in the second screen area 309, for example... Figures 6A to 6B After the transition, the mobile terminal 100 still displays some device status icons and application icons in the second screen area 309. Even when the first screen area 308 is not lit, the mobile terminal 100 can still display some device status icons and application icons in the second screen area 309, so that users can still obtain some device-related information without fully charging the mobile terminal 100, saving device power and improving the user experience.

[0219] Of course, the mobile terminal 100 can respond to a finger 301 to set whether to show or hide the content displayed in the first screen area 309.

[0220] like Figure 7A As shown, the mobile terminal 100 has a show / hide icon 423 in the second screen area 309. In the display state, when the mobile terminal 100 detects an operation (e.g., single click, double click, long press, drag, etc.) of a finger 301 on the show / hide icon 423, the mobile terminal 100 can select from the display / hide icon 423 as shown in the image. Figure 7A As shown in the second screen area 309, some device status icons and application icons are displayed, transitioning to... Figure 7B The device status icons and application icons shown are hidden in the second screen area 309 (show / hide icon 423 is retained). In the hidden state, when the mobile terminal 100 detects a finger 301 operating on the show / hide icon 423, the mobile terminal 100 can access it from the display / hide icon 423. Figure 7B The device status icons and application icons shown are hidden in the second screen area 309 (retaining the show / hide icon 423) transitioning to... Figure 7A The second screen area 309 shows some device status icons and application icons.

[0221] After being hidden, the mobile terminal 100 can turn off the second screen area 309 to save power consumption and reduce the interference of the display content of the second screen area 309 on the display content of the first screen area 308. Alternatively, the first display area 308 and the first screen area 308 can work together to display a continuous interface content, thereby improving the overall display effect.

[0222] In some embodiments, the mobile terminal 100 may also provide pressure-sensitive functionality, replacing or in conjunction with the display / hide icon 423. When the mobile terminal 100 detects input by pressing the touchscreen or the device frame, and the input pressure reaches a certain threshold, the mobile terminal 100 may display or hide the aforementioned icon displayed in the second screen area 309, similar to... Figure 8A and Figure 8B .

[0223] In some embodiments, after a period of time without any detected operation on the second screen area 309, the mobile terminal 100 may reduce the brightness or transparency of the second screen area 309, which may reduce the interference of the displayed content of the second screen area 309 on the user's viewing of the first screen area 308.

[0224] like Figure 8A and Figure 8B As shown, in some embodiments, when the mobile terminal 100 detects that the finger 301 operates on the application icon 422 of the second screen area 309 (e.g., clicks the application icon 422), the mobile terminal 100 can run the application and display the interface content of the corresponding application in the first screen area 308.

[0225] In some embodiments, the mobile terminal 100 may display icons of designated applications, such as frequently used applications or user-defined applications, on the second screen area 308. The mobile terminal 100 can then coordinate with the second screen area 309 and the first screen area 308 to quickly access the application interface of frequently used applications, simplifying the user's operation process. For example, as... Figure 9A As shown, when the mobile terminal 100 detects that a finger 301 taps the settings application icon 406 in the first screen area 308, the settings application interface is displayed in the first screen area 308, such as... Figure 9B As shown, next, when finger 301 is detected tapping the WeChat application icon 422 in the second screen area 309, the mobile terminal 100 displays the following in the first screen area 308: Figure 9C The WeChat application interface displays the settings application icon 406a in the second screen area 309; subsequently, when a touch operation 301a is detected (finger 301 tapping the settings application icon 406a in the second screen area 309), the mobile terminal 100 displays the following on the first screen area 308: Figure 9B The settings application interface shown also displays the WeChat application icon 422 on the second screen interface 309; or when a tap is detected by finger 301. Figure 9C The touch operation 301b of the return control 425 shown indicates that the mobile terminal 100 displays the following on the first screen area 308: Figure 9AThe main interface is shown, and the WeChat application icon 422 is displayed in the second screen area 309. Compared with the prior art, which requires exiting the settings application interface and returning to the main screen before entering the WeChat application interface, or which requires entering the background running list to enter the WeChat application interface, the method of this application embodiment can provide the function of quickly entering frequently used applications and quickly returning to the application interface of the previously accessed application, simplifying the user operation process and improving the user experience.

[0226] The following description, in conjunction with the accompanying drawings and the above embodiments, further describes steps 501 to 503 of the method.

[0227] In step 501, the mobile terminal 100 displays the application interface of the first application in the first screen area 308, for example... Figure 10A As shown, the mobile terminal 100 displays the interface of the instant messaging application during a video call in the first screen area 308.

[0228] In some embodiments, the mobile terminal 100 may also display at least one icon 422 of a second application in the second screen area 309. The specific second application displayed and the number displayed can be determined and adjusted according to the settings.

[0229] Next, in step 502, when there is a notification from the second application, the mobile terminal 100 displays the content of the notification in the second screen area 309; the application interface of the first application continues to be displayed in the first screen area.

[0230] In some embodiments, when the mobile terminal 100 detects a notification from the second application, the mobile terminal 100 may flash the icon of the corresponding second application in the second screen area 309 or display the number of messages on the icon of the corresponding second application to provide a notification. For social or communication applications, the mobile terminal 100 may also modify the application icon to an image of the message source, i.e., the message sender, to facilitate user identification of the sender.

[0231] The notification can be an instant message received by the mobile terminal 100 via the radio frequency circuit 102. Alternatively, it can be triggered by a second application running in the background when specific conditions (e.g., a specific time, location, or temperature) are met, such as a timed reminder notification. The specific content of the notification can include, but is not limited to, text, images, and animations. The notification information can also be information about the sender, such as the sender's image (e.g., avatar, icon), sender's identity information (e.g., name, title, number), and the sender's sending time.

[0232] Combination Figure 10BThe mobile terminal 100 displays a notification 424 next to the icon (e.g., WeChat) 422 of the first application in the second screen area 309. The notification 424 includes the sender's avatar and the text content of the notification, "Where are you?".

[0233] In some embodiments, when the mobile terminal 100 detects a notification from a second application, the mobile terminal can automatically adjust the positions of other application icons on the second screen area 309 according to the length of the notification content. It can also display only the notification content across the entire second screen area 309, scroll when the notification content is long, and make the corresponding second application icon flash, change color, or display the message count next to it to make the notification noticeable to the user. In some embodiments, the mobile terminal 100 can display the notification permanently on the second screen area, which is convenient for the user to view the notification content at any time. The mobile terminal 100 can close the notification prompt information and return to a previous state when it detects a user's action of selecting to close (pressing the screen, swiping, clicking, double-tapping an icon or message) or triggering the second application. Figure 10A The initial state shown indicates that the message has been effectively notified.

[0234] In some embodiments, when the mobile terminal 100 displays notification 424, due to the size limitation of the second screen area 309, icons of other applications can be hidden, such as... Figure 10B As shown, the mobile terminal 100 displays notification 424 next to the icon 422 of the second application, and the icons to the right of notification 424 are moved to the right as a whole, and other icons that have been "moved out" of the second screen area 309 are not displayed.

[0235] In some embodiments, combined with Figure 11A and Figure 11B The mobile terminal 100 can move and display other icons outside the second screen area 309 according to the sliding operation of the finger 301 on the second screen area 309, so that the user can display the aforementioned hidden other icons when needed.

[0236] In other embodiments, the mobile terminal 100 can fix the display size of the notification 424 and display the message content of the notification within the display size area of ​​the notification, such as scrolling from right to left or scrolling from top to bottom.

[0237] Then, in step 503, when the mobile terminal 100 responds to the detection of a first operation performed by the finger 301 on the notification displayed in the second screen area 309, it continues to display the application interface of the first application in the first screen area 308, and displays an application interface 430 related to the second application in all or part of the application interface of the first application.

[0238] The application interface 430 may be an application interface related to the notification, or it may be an application interface that calls other functions of the second application.

[0239] like Figure 12A As shown, when the mobile terminal 100 detects that a finger 301 drags a notification 402 from the second screen area 309 to the first screen area 308, it continues to display the interface of the running instant messaging application and the notification of the ongoing video call. The application interface 430 is displayed on the instant messaging application's interface, and the application interface 430 may include... Figure 12B The application interface showing the specific content of the notification.

[0240] In some embodiments, combined with Figure 15A and Figure 15B The application interface 430 may also include application interfaces for other related functions of the second application. For example, if the mobile terminal 100 detects the user's single-click or double-click operation on the icon 422 of the second application, it can display a contact list in the first screen area 308. If the user's sliding operation of the contact list input is detected, the display context can be moved. If the user's sliding or input of a confirmed contact is detected, the contact display interface 431 is entered.

[0241] In some embodiments, the method may further include step 504, in which, when the mobile terminal 100 detects an operation performed by the finger 301 on the interactive interface of the touchscreen (e.g., clicking "Reply"), the application interface 430 displayed by the mobile terminal 100 changes from... Figure 12B Transition to Figure 12C As shown in the input interface, the mobile terminal 100 obtains the second operation of the finger 301 in the input area of ​​the application interface 430, obtains the reply message, and when it detects that the finger 301 clicks "send", the second application sends the reply message to the corresponding recipient (corresponding to the aforementioned sender).

[0242] Then, the application interface 430 displayed on the mobile terminal 100... Figure 12B Transition to Figure 12C The input interface shown continues to display the interface of the running instant messaging application, the notification of the ongoing video call, and the application interface 430 on the instant messaging application interface.

[0243] During this period, the mobile terminal 100 continues to run the first application, and the application interface of the first application is still displayed in real time in the first screen area 308, for example, Figures 12A-12CThe mobile terminal 100 continues the video call in real time in the first screen area 308, that is, it continues to display the dynamic images of both parties in the call and transmit their voices. The application interface 430 can be displayed in a semi-transparent or opaque manner, wherein the semi-transparent display allows the user to continue to view the interface content of the first application.

[0244] In some embodiments, when the mobile terminal 100 displays the application interface of the second application related to the notification, if a third touch operation is detected in the first screen area 308 and in an area outside the application interface of the second application, the mobile terminal 100 executes the instruction corresponding to the third touch operation in the second application and continues to display the application interface of the second application related to the notification in the first screen area.

[0245] like Figure 12C As shown, the input interface 430 of the second application may include a virtual keyboard, which can be set to a full keyboard or a 9-key keyboard, and can also be... Figure 14B As shown, the input interface 430 of the second application is split into left and right parts, leaving the middle part of the interface content of the first application empty. For example, during the game, the central area is more important, and leaving the middle part empty will not easily interfere with the game.

[0246] In some embodiments, the application interface of the second application can also integrate voice input in the input method. After the mobile terminal 100 converts the user's voice input into text, it runs the second application to reply to the message, further reducing the interference of the keyboard on the display screen of the first application.

[0247] In other embodiments, when the mobile terminal 100 detects an operation where a finger 301 drags a notification 402 from the second screen area 309 to the first screen area 308, the content displayed by the mobile terminal 100 can be changed from... Figure 13A Transition to Figure 13B The application interface 430 shown means that the notification content displayed on the first screen area 308 of the mobile terminal is switched to the content being entered, and the input interface is displayed on the first screen area 309. In this embodiment, the method uses the first screen area 308 and the second screen area 309 to process the notification of the second application, which further simplifies the interaction process and interface of the second application displayed on the first screen area 308. This helps users to quickly process the notification of the second application, shortens the time of impact on the application interface of the first application, and allows users to quickly return to activities such as watching movies, playing games, or making video calls, thereby improving the user experience.

[0248] In some embodiments, after the mobile terminal 100 processes the notification, the mobile terminal 100 continues to display the application interface of the first application in the first screen area, and does not display the application interface of the second application, for example... Figure 13B After mobile terminal 100 detects gesture 301 clicking "send", it exits the application interface of the second application and displays the following: Figure 13A As shown.

[0249] In some embodiments, when a third touch operation is detected on the first screen area 308 and outside the application interface of the second application, the mobile terminal 100 can execute the instruction corresponding to the third touch operation in the second application. For example, when the first application is a game application, if an enemy is detected approaching in the game during the processing of the notification of the second application, the user can immediately operate the interface of the first application, and the mobile terminal can continue to display the application interface of the second application related to the notification in the first screen area.

[0250] In some embodiments, the mobile terminal 100 may, according to the user's operation, continue to display the application interface of the first application in the first screen area 308 and exit the application interface of the second application. The exit method may be, but is not limited to, the mobile terminal 100 detecting that the finger 301 clicks the icon corresponding to the second application in the second screen area 308; the mobile terminal 100 detecting that the finger 301 long-presses the application interface of the second application; the mobile terminal detecting that the finger 301 double-clicks an area outside the application interface of the second application, etc.

[0251] Therefore, when the mobile terminal 100 displays the interface content of the first application in the first screen area 308, such as video calls, audio and video playback (movies, TV, animations, etc.), games, etc., when there is a notification from the second application, the mobile terminal 100 can display the notification-related information in the second screen area 309. On the one hand, compared with the method of popping up an interface in the first screen area 308 to provide a notification, it will not occupy the first screen area 308 and will not affect the display content of the first screen area 308. On the other hand, the notification-related information can be displayed persistently in the second screen area 309, unlike the pop-up interface which quickly disappears after popping up, thus avoiding the problem that the notification disappears before the user has time to see the content of the notification.

[0252] When the mobile terminal 100 detects the user's first operation on the notification, while displaying the interface content of the first application in the first screen area 308, it also displays the application interface 430 of the second application on top of the interface content of the first application. This application interface 430 can respond to the second operation performed by the user on it, processing the notification, including viewing the notification content, processing the notification, or replying to the notification. Therefore, the mobile terminal 100 does not need to jump from the currently displayed interface content of the first application to the interface content of the second application on the first screen area 308, allowing the user to continue viewing the interface content of the first application. Simultaneously, the application interface 430 provides the user with the ability to quickly process notifications from the second application.

[0253] Therefore, in certain specific use cases, it greatly improves the user experience. For example, when watching a movie, users can handle notifications without stopping the movie or exiting the player application in the first screen area to switch to other applications; when playing a game, users can handle notifications without leaving the game application to avoid being judged by the game service provider as "disconnected" or "abandoned"; and when video calls are being made, users can handle notifications without closing the video call interface to avoid affecting the call with the other party.

[0254] The mobile terminal 100 can detect when a user clicks on a message, icon, or presses a certain part of the screen or border to enter a message input mode. In the input mode, the mobile terminal 100 displays part or the entire area of ​​the first screen area as an input area, and the input area does not affect the original display of applications such as games, movies, or reading. For example, message content, keyboard, handwriting input trajectory, input method, etc. can be superimposed on it in a semi-transparent or opaque manner, and the input message is sent after being obtained.

[0255] In some embodiments, when the mobile terminal 100 detects rotation using an accelerometer sensor, a gravity sensor, and a gyroscope, the icons in the second screen area 309 can also rotate accordingly, for example... Figure 14A As shown, the display direction provides the user with an appropriate viewing angle, and the application interface 430 displayed on the first screen area 308 also provides an appropriate display direction.

[0256] According to another aspect of this application, a method for displaying a graphical user interface is provided, the method comprising steps 601 to 602.

[0257] In step 601, the mobile terminal 100 activates the front-facing camera function, such as... Figure 16AAs shown, the mobile terminal 100 detects the operation of finger 301 clicking the camera icon 407 to start the shooting function, and also detects the operation of finger 301 clicking the control 425 to switch between front and rear cameras, and starts the front camera to take pictures.

[0258] Subsequently, in step 602, the mobile terminal 100 displays the image captured by the front-facing camera on the first screen area 308, and enters a fill light mode on the second screen area 309. The fill light mode may include increasing the display brightness of all or part of the second screen area above a threshold to provide fill light to the subject, for example... Figure 16B As shown, the display brightness of the second screen area 309 is increased to a certain threshold or even to the maximum value. In other words, the backlight brightness in the second screen area 309 is increased to a certain threshold or even to the maximum value.

[0259] In some embodiments, the mobile terminal 100 can also adjust the second screen area 309 to a monochrome mode, such as white, yellow, blue, etc., to provide supplementary lighting for the subject and help improve the color of the subject image, thereby improving the imaging effect and enhancing the user's shooting experience.

[0260] Therefore, in the method described above, the mobile terminal displays the second screen area 309 as a fill light strip during the front-facing camera's shooting process to provide fill light for the subject (e.g., a face), enabling the user to obtain a brighter image even in low-light conditions. For example, it allows for selfies and video calls in dark environments. Thus, when the front-facing camera is activated for taking a picture, the mobile terminal 100 uses the second screen area as a fill light, illuminating discontinuous screen areas and providing fill light in applications such as photography, makeup application, and face recognition, thereby improving image quality in low-light environments. The backlight brightness in discontinuous screen areas can be enhanced to achieve a better fill light effect. Combined with the aforementioned embodiments, the display screen has more diverse functions, improving user needs in various scenarios and enhancing the user experience.

[0261] In some embodiments, during step 602, when the second screen area 309 enters the fill light mode for fill light application, the mobile terminal 100 can apply fill light to one or more partial areas of the second screen area 309, such as... Figure 17A , Figure 17B and Figure 17CWhen the front-facing camera enters 3D depth mode during shooting, and a finger tap (301) is detected, the front-facing camera takes three photos consecutively. For each photo, 426a, 426b, and 426c are illuminated for supplementary lighting. The processor (101) of the mobile terminal (100) then combines the three images, utilizing the changes in light and shadow from both front-facing cameras to obtain high-precision 3D depth information. Supplementary lighting from different angles creates a more accurate image, further improving the imaging effect.

[0262] When implementing iris recognition on a mobile terminal, the front-facing camera and iris scanning camera are activated. The captured human eye is displayed in the first screen area 308, and infrared light is added to the visible light displayed in the second screen area 309 to provide infrared supplementary lighting for iris recognition or face recognition, thereby improving the iris recognition function.

[0263] Therefore, the mobile terminal utilizes a second screen area to achieve a soft fill light effect, resulting in better shooting effects without affecting the display of application content. This application provides a solution that uses a discontinuous screen area as a fill light. Compared to existing technologies, it eliminates the need to occupy additional space and add extra openings on the device panel, enabling a fill light effect even in solutions with a large screen ratio.

[0264] In some embodiments, such as Figure 18 As shown, the mobile terminal 100 can also display a prompt pattern 435 pointing to the location of the front-facing camera 306 in the second screen area 309, thereby improving the shooting effect.

[0265] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid state disk (SSD)).

[0266] This application embodiment can divide the device into functional modules according to the above method example. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. The module division in this application embodiment is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.

[0267] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the mobile device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, mobile device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0268] In summary, the above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the above embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the above embodiments, or equivalent substitutions can be made to some of the technical features. These modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A method of displaying a graphical user interface on an electronic device, the method comprising: The electronic device includes a touch screen, the touch screen includes a first screen area and a second screen area, the first screen area and the second screen area are not overlapped, the first screen area is a rectangular area, the first screen area is used for displaying a main interface of the electronic device, the second screen area is an area of the touch screen extending from the first screen area to both sides of a front camera at the top of the electronic device, and the second screen area is a status bar. An application interface of a first application is displayed on the first screen area. A status icon and a first control are displayed on the second screen area, the status icon includes at least one of a wireless communication signal strength identifier, a time, a battery status, a Wi-Fi signal strength identifier, and an alarm. When a notification message of a second application is received, message content of the notification message is displayed on the second screen area, the message content includes at least one of an image, a number, and an animation, and at least one icon corresponding to another application is stopped from being displayed on the second screen area, the at least one icon is displayed on the second screen area before the notification message of the second application is received, a first operation of a user on the message content is received, the notification message of the second application is stopped from being displayed on the second screen area, and the at least one icon corresponding to the another application is displayed, and the application interface of the first application is continuously displayed on the first screen area, the first operation includes at least one of clicking, sliding, and pressing. In response to the user clicking the first control, the status icon and the notification message on the second screen area are hidden, and the first control is continuously displayed. In response to the user clicking the first control again, the status icon, the notification message, and the first control on the second screen area are displayed.

2. The method of claim 1, further comprising: The message content of the notification message is displayed on the second screen area, the message content includes at least one of text, an image, a number, and an animation.

3. The method of claim 2, wherein, The method further includes: A first operation of a user on the notification message is received. An interface related to the notification message is displayed on the application interface of the first application, and content displayed in the interface includes the message content.

4. The method of claim 3, wherein, The interface related to the notification message is displayed on the application interface of the first application, including: The interface related to the notification message is displayed on a partial area of the application interface of the first application.

5. The method according to any one of claims 2-4, characterized in that, The method further includes: While the message content is displayed on the second screen area, prompt information is also displayed on the second screen area, and the prompt information includes at least one of an image of a sender of the notification message, identity information of the sender, and a sending time of the sender.

6. The method according to any one of claims 2-4, characterized in that, The second application is an application program running in the background.

7. The method according to any one of claims 2-4, characterized in that, The notification message is dynamically displayed on the second screen area.

8. The method according to any one of claims 2-4, characterized in that, The method further includes: A third operation of a user on the notification message is detected, and a message reply interface is displayed, the message reply interface includes a virtual keyboard or a handwriting input area. receiving a reply message input by a user, and sending the reply message to a sender of the notification message.

9. The method of claim 8, wherein, The message reply interface comprises a first part and a second part, and the first part and the second part are not connected.

10. The method of claim 9, wherein, The method further comprises: after hiding the status icon and / or the notification message on the second screen area, turning off the screen of the second screen area.

11. An electronic device, comprising: The electronic device comprises: a camera; a touch screen; one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and the one or more computer programs comprise instructions which, when executed by the electronic device, cause the electronic device to perform the method of any one of claims 1-10.

12. A computer program product, wherein, The computer program product, when running on a computer, causes the computer to perform the method of any one of claims 1-10.

13. A computer-readable storage medium comprising instructions, wherein, The instructions, when running on a computer, cause the computer to perform the method of any one of claims 1-10.

Images