Interface display method, electronic device, and computer readable medium

Abstract

The application relates to an interface display method, an electronic device and a readable medium. In the method, the electronic device can acquire user operation data generated by a user operation on a screen of the electronic device; the user operation data is calculated by using a physical law corresponding to a type of the user operation to obtain display data corresponding to the user operation data; and a physical phenomenon simulating the user operation data and generated by following the physical law is displayed on the electronic device according to the display data. Through the method, the electronic device can previously establish a corresponding relationship between a display effect of a display element in a display interface of an application and at least one physical phenomenon. The display effect of the display element is adaptively calculated according to a display style loaded after the electronic device starts the application and an operation applied to the electronic device, thereby avoiding the need to respectively configure multiple display effects for each display interface of an application.

Description

Technical Field

[0001] This application relates to graphical user interface display technology in the field of electronic devices. More particularly, it relates to a user interface display method, an electronic device, and a computer-readable medium. Background Technology

[0002] To make the application's display interface adaptable to different display areas, different layouts need to be configured for the display elements within the application's interface. This layout can refer to the position of the display elements within the interface. For example, ... Figure 1 As shown in (a), the application's display interface includes six display elements, which are displayed in a three-row, two-column layout; while Figure 1 In (b), these six display elements are arranged in a two-row, three-column layout. Furthermore, the application can support multiple display styles, with each style resulting in different visual effects for the display elements. For example, for the same application supporting both a metallic and a waterdrop style, the display elements can have a metallic sheen and a waterdrop effect, respectively. Therefore, to accommodate different display areas and styles, it is typically necessary to pre-develop multiple display interfaces with varying layouts and effects for the same application, leading to higher costs for developing and maintaining these interfaces. Summary of the Invention

[0003] The purpose of this application is to provide an interface display method, an electronic device, and a computer-readable medium. The method of this application can correspond to at least one physical law generating a physical phenomenon based on user operations applied to the display interface of an application, and adaptively calculate the display effect of the user operation using the physical formula corresponding to the physical law, based on the physical data corresponding to the application's display style parameters and the physical data corresponding to the user operation data applied by the user.

[0004] The first aspect of this application provides a user interface display method applied to an electronic device, comprising:

[0005] Acquire user action data generated on the screen of an electronic device;

[0006] By utilizing the physical laws corresponding to the type of user operation, the user operation data is calculated to obtain the corresponding display data.

[0007] Based on the displayed data, the electronic device displays user operation data as physical phenomena generated according to physical laws.

[0008] In the embodiments of this application, user operation data can be the magnitude and direction of the force of the user operation obtained by the electronic device through the touch sensor; the type of user operation can include: pressing, clicking, and sliding operations applied by the user to the display elements of the application interface on the screen of the mobile phone; the physical law can be the physical formula corresponding to the pressing, clicking, and sliding operations; the display data can be the display effect of the display elements of the application interface calculated based on the user operation data using physical formulas, and the display effect can correspond to the physical phenomenon corresponding to the physical law.

[0009] For example, taking a mobile phone as an example, when a user applies a pressing action to a display element of an application interface on the phone screen, the phone can obtain the magnitude of the force of the pressing action through the touch sensor, i.e., the user action data; and through the elastic force formula corresponding to the pressing action, i.e., the physical law, the phone calculates a sinking display effect of the display element within the interface based on the magnitude of the pressing action force, i.e., the display data. The phone simulates the applied pressing action as the physical phenomenon of compression deformation caused by a spring being compressed, corresponding to the elastic force formula.

[0010] In one possible implementation of the first aspect described above, the user action includes at least one of pressing, clicking, and swiping.

[0011] In the embodiments of this application, user operations such as pressing, clicking, and swiping can be applied by the user to the screen of the electronic device.

[0012] In one possible implementation of the first aspect above, the physical phenomena corresponding to pressing include at least one of pressing down, deformation, and rebound;

[0013] The physical phenomena corresponding to clicks include at least one of jumping and bouncing;

[0014] The physical phenomena corresponding to sliding include at least one of sliding, rolling, rotating in place, and page turning.

[0015] In the embodiments of this application, the user operation of pressing can be simulated as the physical phenomenon of compression deformation caused by the compression of a spring corresponding to the elastic force formula; the user operation of sliding can be simulated as the physical phenomenon of displacement of an object corresponding to the friction force formula and the velocity / acceleration formula.

[0016] In one possible implementation of the first aspect above, the electronic device calculates the display data in the following manner:

[0017] Convert user operation data into physical data corresponding to physical laws, and obtain physical coefficients corresponding to the display style parameters of electronic devices;

[0018] The displayed data is calculated based on physical data and physical coefficients.

[0019] In the embodiments of this application, for example, the physical data of the pressing operation can be the magnitude of the pressing force obtained by the electronic device through the touch sensor; for the physical coefficients corresponding to the display style parameters, including at least one of the weight of the display element in the interface, the sliding coefficient, and the elastic coefficient under a display style, the electronic device calculates the distance of the pressing effect of the display element by using the elastic force formula corresponding to the pressing operation, such as: force = elastic coefficient * distance.

[0020] In one possible implementation of the first aspect above, the physical data includes at least one of the magnitude of the force, the duration of the force, and the displacement of the force, wherein the pressing, clicking, and sliding forces applied by the user to the screen of the electronic device correspond to the physical data.

[0021] In one possible implementation of the first aspect above, the physical coefficients include at least one of weight, friction coefficient, and elasticity coefficient; wherein the weight, friction coefficient, or elasticity coefficient of the object operated by the user differs depending on the display style parameters.

[0022] In the embodiments of this application, when the display style is "metal style", the elasticity coefficient included in the display style parameters can be 100N / M; when the display style is "water droplet style", the elasticity coefficient included in the display style parameters can be 200N / M.

[0023] In one possible implementation of the first aspect described above, the physical laws include at least one of the formulas for friction, acceleration, and elasticity.

[0024] A second aspect of this application provides an electronic device, characterized in that it comprises:

[0025] Memory, which stores instructions;

[0026] The processor, coupled with memory, causes the electronic device to perform the following actions when the program instructions stored in memory are executed by the processor:

[0027] Acquire user action data generated on the screen of an electronic device;

[0028] By utilizing the physical laws corresponding to the type of user operation, the user operation data is calculated to obtain the corresponding display data.

[0029] Based on the displayed data, the electronic device displays user operation data as physical phenomena generated according to physical laws.

[0030] In one possible implementation of the second aspect described above, the user action includes at least one of pressing, clicking, and swiping.

[0031] In one possible implementation of the second aspect above, the physical phenomena corresponding to pressing include at least one of pressing down, deformation, and rebound;

[0032] The physical phenomena corresponding to clicks include at least one of jumping and bouncing;

[0033] The physical phenomena corresponding to sliding include at least one of sliding, rolling, rotating in place, and page turning.

[0034] In one possible implementation of the second aspect above, the electronic device calculates the display data in the following manner:

[0035] Convert user operation data into physical data corresponding to physical laws, and obtain physical coefficients corresponding to the display style parameters of electronic devices;

[0036] The displayed data is calculated based on physical data and physical coefficients.

[0037] In one possible implementation of the second aspect above, the physical data includes at least one of the magnitude of the force, the duration of the force, and the displacement of the force, wherein...

[0038] The force exerted by a user on the screen of an electronic device, such as pressing, clicking, or swiping, corresponds to physical data.

[0039] In one possible implementation of the second aspect above, the physical coefficients include at least one of weight, friction coefficient, and elasticity coefficient; wherein the weight, friction coefficient, or elasticity coefficient of the object operated by the user differs depending on the display style parameters.

[0040] In one possible implementation of the second aspect above, the physical laws include at least one of the formulas for friction, acceleration, and elasticity.

[0041] A third aspect of this application provides a computer-readable medium, characterized in that the computer-readable medium stores instructions that, when executed on an electronic device, cause the electronic device to perform the interface display method of the first aspect.

[0042] Fourthly, embodiments of this application provide a chip system applied to an electronic device including the aforementioned touchscreen. The chip system includes one or more interface circuits and one or more processors. The interface circuits and processors are interconnected via lines. The interface circuits are used to receive signals from the electronic device's memory and send the signals to the processors, the signals including computer instructions stored in the memory. When the processor executes the computer instructions, the electronic device performs any of the above aspects and any possible implementation thereof.

[0043] Fifthly, embodiments of this application provide a computer program product that, when run on a computer, causes the computer to perform any of the above aspects and any possible implementation thereof. Attached Figure Description

[0044] Figure 1 (a) and Figure 1 (b) illustrates the display interface of an electronic device in the prior art on the screen of an electronic device with different screen sizes;

[0045] Figure 2 (a) and Figure 2 (b) An embodiment of the present application illustrates the display interface of the application of the electronic device on the screen of an electronic device with different screen sizes;

[0046] Figure 3 (a) Figure 3 (b) and Figure 3 (c) An embodiment of this application illustrates the process of setting the default display interface for the image details interface of a gallery application;

[0047] Figure 4 (a) and Figure 4 (b) An embodiment of this application illustrates the process by which a user performs a zoom-in operation on the display area of ​​the image details interface of a gallery application;

[0048] Figure 5 A schematic diagram of the structure of an electronic device is shown according to an embodiment of this application;

[0049] Figure 6 A software structure block diagram of an electronic device is shown according to an embodiment of this application;

[0050] Figure 7 The present application illustrates the process of setting a default display interface for a gallery application's image overview interface according to an embodiment of the present application;

[0051] Figure 8 (a) and Figure 8 (b) An embodiment of the present application illustrates a display interface for a gallery application's image overview;

[0052] Figure 9 (a) and Figure 9 (b) An embodiment of the present application illustrates a display interface for an electronic display gallery application, and a flowchart illustrating the display effect generated in response to user operations;

[0053] Figure 10 (a) Figure 10 (b) and Figure 10 (c) An embodiment of this application illustrates the process by which a user performs a pressing operation in the image overview interface of a gallery application;

[0054] Figure 11 (a) Figure 11 (b) and Figure 11 (c) An embodiment of this application illustrates the process by which a user performs a display style switching operation on a gallery application;

[0055] Figure 12 (a) and Figure 12 (b) An embodiment of this application illustrates the process by which a user performs a swiping action in the image overview interface of a gallery application;

[0056] Figure 13 (a) and Figure 13 (b) An embodiment of this application illustrates the process by which a user performs a swipe-down operation in the image overview interface of a gallery application;

[0057] Figure 14 (a) Figure 14 (b) and Figure 14 (c) An embodiment of this application illustrates an expanded user operation process performed by a user on the image overview interface of a gallery application;

[0058] Figure 15 (a) and Figure 15 (b) An embodiment of this application illustrates a process for switching from a picture overview interface to a picture detail interface in a gallery application;

[0059] Figures 16(a) and 16(b) illustrate another process for switching from a picture overview interface to a picture details interface in a gallery application, according to an embodiment of this application. Detailed Implementation

[0060] Embodiments of this application include, but are not limited to, an interface display method, a computer-readable medium, and an electronic device. To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be further described in detail below with reference to the accompanying drawings.

[0061] To address the problem of needing to develop multiple display interfaces with different layouts and display effects for the same application, this application provides an interface display method. In the embodiments of this application, after the electronic device installs the application, it pre-generates corresponding default display interfaces for each display interface of the application. In the default display interface, a central display element is selected from multiple display elements included in the default display interface. The positions of the other display elements in the default display interface are configured relative to the position of the central display element, that is, each display element in the default display interface has a relative position.

[0062] After the electronic device launches the application, it determines the absolute position of the central display element and the absolute positions of other display elements relative to the central display element based on the size of the application's display area. Furthermore, when the user adjusts the size of the display area or the size of the display elements, the electronic device can dynamically adjust the positions of each display element.

[0063] Furthermore, for various user operations on the application's display interface, electronic devices can generate display effects that respond to user actions by simulating physical laws in the real world. For example, when a user presses a display element on the application interface, such as an icon, the icon can deform in different ways depending on the pressure applied. The relationship between the deformation and the pressure applied can be determined using a physical formula similar to the elastic force formula. Similarly, when a user swipes an icon on the application interface, the icon can roll a different distance depending on the pressure applied by the user's finger. The relationship between the rolling distance and the pressure applied by the finger can be determined using a physical formula similar to the friction force formula. Moreover, the same user operation on an icon can produce different display effects, or different physical phenomena, depending on the application's different display effects. Specific solutions will be described in detail below.

[0064] It is understood that, in the embodiments of this application, the display elements in the application display interface may be buttons, text boxes, images, drop-down boxes, etc. in the application display interface.

[0065] Furthermore, it can be understood that in the embodiments of this application, physical laws refer to physical formulas such as friction force formula, velocity / acceleration formula, and elastic force formula, or data processing models established based on physical laws.

[0066] Furthermore, it can be understood that, in the embodiments of this application, the physical phenomenon of the display elements displayed on the electronic device refers to a display effect exhibited by the display elements in response to user operation, such as display effects like pressing, deformation, rebound, jumping, bouncing, sliding, and scrolling.

[0067] The following example uses a mobile phone 100 as the electronic device and a gallery application 101 as the application. It describes how a default display interface is set for the image details interface 1012 of the gallery application 101, in which the display elements of the image details interface 1012 have default positions. When the mobile phone 100 opens and displays the image details interface 1012, the mobile phone 100 dynamically adjusts the positions of each display element in the image details interface 1012 according to the display area of ​​the image details interface 1012 on the screen of the mobile phone 100.

[0068] Figure 2 (a) to Figure 2 (b) illustrates the process by which mobile phone 100 opens and displays the image detail interface 101, such as... Figure 2 As shown in (a), after the user clicks the Gallery app 101 icon on the desktop, the phone 100 launches the Gallery app 101. Figure 2 As shown in (b), mobile phone 100 displays a picture overview interface 1011 of the gallery application 101 on the screen. The picture overview interface 1011 may include thumbnails of pictures 10111 to 10116. If the user of mobile phone 100 wants to browse the details of picture 10112, after the user clicks on the thumbnail of picture 10112, mobile phone 100 can jump to and display the picture detail interface 1012 corresponding to picture 10112.

[0069] Before the phone opens and displays the detailed image interface 1012 on phone 100, such as Figure 3 As shown in (a), the mobile phone 100 can generate a default display interface for the image details interface 1012. The default display interface includes four display elements: image 10121, image details 10122, "details" button 10123, and "next image" button 10124. In the default display interface, the mobile phone 100 can configure image 10121 as the central display element and configure the position of image 10121. Image details 10122, "details" button 10123, and "next image" button 10124 are arranged in left-to-right order based on the position of image 10121.

[0070] After mobile phone 100 opens and displays the image details interface 1012, when the display area of ​​the image details interface 1012 is the entire screen of mobile phone 100, mobile phone 100 dynamically adjusts the position of the display elements in the image details interface 1012 according to the screen size, so that the position of the display elements in the image details interface 1012 is different from that in the default display interface, for example, such as Figure 3As shown in (b), in the image details interface 1012 of the gallery application 101, the image 10121, image details 10122, "details" button 10123 and "next" button 10124 can be arranged in a vertical order.

[0071] It is understandable that when the display area of ​​the image detail interface 1012 is a partial area of ​​the screen of the mobile phone 100, such as Figure 3 As shown in (c), the mobile phone 100 opens and displays the image details interface 1012 of the gallery application 101 on the screen via a floating window. At this time, the position of the display elements in the image details interface 1012 can also be aligned with the screen. Figure 3 (b) shows differences in the detailed interface 1012 of the image, for example, in Figure 3 In the image details interface 1012 of (c), the image details 10122, the "Details" button 10123, the "Next" button 10124, and the image 10121 can be arranged horizontally.

[0072] It is understood that in the embodiments of this application, the types and numbers of display elements in the application's display interface are exemplary; that is, any number and type of display elements may be included. For example, in Figure 3 (a) to Figure 3 In the default display interface in (c), in addition to the display elements 10121 to 10124 mentioned above, other numbers and types of display elements may also be included in some embodiments, which are not limited.

[0073] Furthermore, in response to user actions such as zooming in or out of the display area of ​​the image detail interface 1012, or adjusting the size of display elements, the phone 100 can dynamically adjust the position of each display element in the image detail interface 1012 of the gallery application 101. For example, as... Figure 4 As shown in (a), the mobile phone 100 responds to the user's operation of zooming in on the display area of ​​the detailed image interface 1012, such as... Figure 4 As shown in (b), the mobile phone 100 arranges the image 10121, image details 10122, "details" button 10123 and "next" button 10124 in the image details interface 1012 in a vertical arrangement.

[0074] Furthermore, as mentioned above, in some embodiments, after the mobile phone 100 installs the gallery application 101, it will also generate a display style model, that is, a data processing model, for each display interface of the gallery application 101. The display style model will determine the physical phenomena generated by at least one physical law corresponding to the user operation applied to the display interface, and can dynamically calculate the display effect of each display interface of the gallery application 101 based on the default display style parameters loaded after the gallery application 101 is opened or the physical data corresponding to the display style parameters selected by the user, as well as the physical data corresponding to the user operation data applied by the user.

[0075] For example, mobile phone 100 can also configure a display style model for a press operation effect on image 10121 in the image detail interface 1012, so that image 10121 can respond to a user's press operation on image 10121 and display a pressing and rebound effect. For example, the press and rebound display style model can simulate the principle of a spring and use the elastic force formula, such as force = elastic coefficient * distance. Here, the force can be the force of the user's press operation obtained by mobile phone 100 through the touch sensor, such as: force = 2N, where N can be the mechanical unit Newton (N); the elastic coefficient can be the physical data corresponding to the display style parameters of the gallery application 101. For example, when the display style is "metallic style", the physical data corresponding to the display style parameters can include, for example, elastic coefficient: 100N / M, where N / M can be the elastic coefficient unit Newton (N) / meter (M). Based on the above display style model, the mobile phone 100 can calculate that the image 10121 will display a downward pressure effect that moves 0.01M inward from the screen in response to the pressing operation; after the user's pressing operation ends, the image 10121 can bounce back to its original position.

[0076] Using the method described in this application, after an application is installed on an electronic device, the device can pre-generate a default display interface for each of the application's display screens. After the application is launched, the electronic device can dynamically adjust the layout of the display elements within each screen based on its display area size. Furthermore, the electronic device can pre-configure display style models for the application's display screens. After the application is launched, the electronic device can dynamically calculate the display effect of the display elements based on user actions and the loaded application's display style parameters or the user-selected display style parameters. This avoids the need to configure multiple layouts and display effects separately for each display screen of an application.

[0077] The electronic device 100 in the embodiments of this application can be various electronic devices, such as, but not limited to, laptop computers, desktop computers, tablet computers, mobile phones, servers, wearable devices, head-mounted displays, mobile email devices, portable game consoles, portable music players, e-reader devices, or other electronic devices capable of accessing the network. In some embodiments, the embodiments of this application can also be applied to wearable devices worn by users. For example, smartwatches, bracelets, jewelry (e.g., devices made into decorative items such as earrings, bracelets, etc.), or glasses, or as part of watches, bracelets, jewelry, or glasses. The following description uses a mobile phone 100 as an example of electronic device 100.

[0078] It is understood that the display area of ​​the above application can be the screen of electronic device 100 or a local area of ​​the screen of electronic device 100. The display style parameters can include: the proportion of display elements, the sliding coefficient, etc.

[0079] It is understandable that various applications can be installed on the mobile phone 100, such as gallery applications, video conferencing applications, instant messaging applications, video playback applications, and navigation applications. These applications can use the technical solution of this application to lay out the application's display interface.

[0080] Figure 5 A schematic diagram of the structure of a mobile phone 100 according to an embodiment of this application is shown.

[0081] The mobile phone 100 may include a processor 110, a screen 111, an internal memory 120, an interface module 130, a power module 140, a wireless communication module 150, a mobile communication module 160, an audio module 170, a camera 180, and a touch sensor 190.

[0082] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the mobile phone 100. In other embodiments of this application, the mobile phone 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0083] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors.

[0084] The processor 110 may also include a memory for storing instructions and data. In embodiments of this application, the processor 110 can execute a method for displaying an application's interface.

[0085] Screen 111 is used to display images, videos, etc. In embodiments of this application, mobile phone 100 can dynamically adjust the position of each display element in the application's display interface according to the size of the display area of ​​the application's display interface on screen 111.

[0086] The internal memory 120 can be used to store computer executable program code, which includes instructions. The internal memory 120 may include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of the mobile phone 100 (such as audio data, phonebook, etc.). In embodiments of this application, the internal memory 120 may store application display style parameters, layout rules for display elements in the application's display interface, and display style models for display elements. These layout rules are used to configure the application's default display interface.

[0087] Interface module 130 can be used to connect an external storage card, such as a Micro SD card, to expand the storage capacity of mobile phone 100. The external storage card communicates with processor 110 through interface module 130 to achieve data storage function. For example, music, video, and other files can be saved on the external storage card.

[0088] The power module 140 receives input from the battery and supplies power to the processor 110, internal memory 120, display screen 111, etc.

[0089] The wireless communication module 150 can provide wireless communication solutions for mobile phones 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc.

[0090] The mobile communication module 160 can provide wireless communication solutions, including 2G / 3G / 4G / 5G, for use on the mobile phone 100.

[0091] The mobile phone 100 uses a GPU, display screen 111, and application processor to achieve its display function.

[0092] The audio module 170 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. The audio module 170 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 170 may be located in the processor 110, or some functional modules of the audio module 170 may be located in the processor 110.

[0093] The mobile phone 100 can achieve the shooting function through the camera 180 and application processor.

[0094] Touch sensor 190, also known as a "touch device," can be disposed on screen 111. Touch sensor 190 and screen 111 together form a touchscreen, also known as a "touchscreen." In embodiments of this application, touch sensor 190 is used to identify user operations performed by the user on screen 111 of mobile phone 100 and to acquire physical data of the user operations, such as the force and direction of the user operations.

[0095] Figure 6 This is a software structure block diagram of the mobile phone 100 according to an embodiment of the present invention.

[0096] like Figure 6 As shown, the mobile phone 100 can be divided into the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer.

[0097] The application layer can include a series of application packages.

[0098] like Figure 6 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS. In embodiments of this application, the application package may include a gallery application 101, etc.

[0099] The application framework layer can include a view system, a gesture recognition system, etc.

[0100] In embodiments of this application, a gesture recognition system is used to recognize user operations performed by a user on the gallery application 101 on the screen of a mobile phone 100.

[0101] The view system includes visual controls, such as controls for displaying text and controls for displaying images. The view system can be used to construct the display interface of an application. The display interface can consist of one or more display elements, where a display element refers to an element within the application's display interface on the screen of an electronic device. For example, display elements may include buttons, text, images, pop-ups, menus, title bars, lists, or search boxes. The application's display interface may include at least one display element. In embodiments of this application, the view system can be used to implement the layout scheme of the application's display interface. For example, when the application starts, the view system can dynamically adjust the position of the display elements in the display interface based on the size of the display area of ​​the application's display interface on the screen 111 of the mobile phone 100; simultaneously, the view system can also configure a display style model for the application's display interface, and when the application starts, the view system uses the application's display style parameters to calculate the display effect of the display elements in the display interface through the display style model.

[0102] The Android Runtime consists of core libraries and a virtual machine. The Android runtime is responsible for the scheduling and management of the Android system.

[0103] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0104] The application layer and application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0105] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0106] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0107] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0108] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0109] A 2D graphics engine is a graphics engine for 2D drawing.

[0110] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver, camera driver, audio driver, and sensor driver.

[0111] In the embodiments of this application, an application may include multiple display interfaces. For example, a gallery application 101 may include a picture overview interface 1011 and a picture detail interface 1012. After the gallery application 101 is installed on the mobile phone 100, the mobile phone 100 configures a default display interface for each display interface of the gallery application 101 and configures a display style model for the display effect of each display interface. The following description uses the picture overview interface 1011 as an example. Figure 5 The solution shown can be implemented by the processor 110 of the mobile phone 100 calling the relevant program.

[0112] Specifically, such as Figure 7 As shown, the above interface display method includes the following solutions:

[0113] Figure 7 This illustrates the process of setting the default display interface for the image overview interface 1011. As shown in the figure, it includes:

[0114] S701: Obtain the display elements included in the image overview interface 1011.

[0115] For example, such as Figure 8 As shown in (a), the mobile phone 100 has 6 display elements in the picture overview interface 1011 of the gallery application 101, namely pictures 10111 to 10116.

[0116] S702: Determine the center display element.

[0117] Phone 100 uses image 10111 as the central display element in the image overview interface 1011. Phone 100 can configure the relative position of image 10111 within the image overview interface 1011 as follows: Left: width of display area * 1 / 6; Right: width of display area * 5 / 6; Top: height of display area * 3 / 10; Bottom: height of display area * 7 / 10. This relative position refers to the location of the center of image 10111 within the display area of ​​the image overview interface 1011. This display area can be a partial area of ​​the phone 100's screen or the entire screen.

[0118] S703: Configure the position of other display elements relative to the center display element.

[0119] For images 10112 to 10116, taking image 10112 as an example, mobile phone 100 can configure the relative position of image 10112 as "Sequence number: 2; Interval: 30", where "Sequence number: 2" means that image 10112 can be the second display element in the image overview interface 1011 and is adjacent to image 10111, which is the center display element, and "Interval: 30" means that image 10112 is 30 pixels apart from image 10111.

[0120] In addition to the relative positions mentioned above, the mobile phone 100 can also configure the images 10111 to 10116, for example, the size: 160×250.

[0121] It is understandable that by first setting a central display element in the image overview interface 1011, and then configuring the relative positions of other display elements with respect to the central display element, the display elements in the image overview interface 1011 can present a layout adapted to the display area in display areas of different sizes, without having to configure multiple layouts for the image overview interface 1011.

[0122] S704: Display style model for configuring the display effects of elements in the display interface.

[0123] In the embodiments of this application, the display effect of a display element can be a display effect displayed in response to a user's operation. For example, image 10112 can display a press-and-rebound effect in response to a user's press-and-hold operation, that is, image 10112 can present a spring-like display effect. Mobile phone 100 can configure a display style model for image 10112 to display the press-and-rebound effect. For example, the display style model can be: force = elastic coefficient * distance, where the force can be the force of the user's press operation obtained by mobile phone 100 through the touch sensor, and the elastic coefficient can be the physical data corresponding to the display style parameters of the gallery application 101. Mobile phone 100 can calculate the press-and-rebound display effect of image 10112 through this display style model.

[0124] In the embodiments of this application, the display effect of a display element can also be the display effect of one display element relative to another. For example, in response to a user's press-and-slide operation, image 10112 slides to image 10113. Then, image 10112 can slide to the position of image 10113 within the display interface of the image overview interface 1011 with a sliding display effect. Simultaneously, image 10113 can slide to the position of image 10112 in the opposite direction with the same sliding display effect. The display style model of the display effect corresponding to the above-mentioned sliding user operation can be, for example, acceleration = (force - specific gravity * sliding coefficient) / specific gravity; speed = acceleration * sliding duration, where the force can be the force exerted by the user sliding image 10112, and the specific gravity and sliding coefficient can be the physical data corresponding to the display style parameters of the gallery application 101. The mobile phone 100 calculates the speed at which image 10112 is slid using acceleration to display a display effect of image 10112 sliding at that speed.

[0125] After configuring the relative positions and display style models of the display elements of the gallery application 101's image overview interface 1011 using the above-described S701 to S704, the mobile phone 100 can launch the gallery application 101 in response to the user's startup operation and display the gallery application 101's display interface within the screen's display area. The following is a summary of the process... Figure 9 (a) and Figure 9 (b) Taking the display of the gallery application 101 on the display area of ​​the screen by the mobile phone 100, and responding to a user's operation on a display element in the gallery application 101's display interface to produce a display effect, as an example, this paper details the use of the interface display method provided in this application. Figure 9 (a) and Figure 9(b) The solution shown can be implemented by the processor 110 of the mobile phone 100 calling relevant programs, such as the view system. As shown in 9(a), the interface display method of the gallery application 101 in the embodiments of this application includes:

[0126] S901: The user's action of opening the application was detected.

[0127] Mobile phone 100 can respond to the user clicking the "Gallery" icon on the desktop of mobile phone 100, that is, the user interface (UI) of mobile phone 100. After receiving the instruction of the user's click operation, mobile phone 100 launches the Gallery application 101.

[0128] S902: Get the size of the display area of ​​the application's first display interface.

[0129] The display area here can be the entire screen of the phone 100, or a portion of that screen. The following explanation uses the entire screen of the phone 100 as an example. The size of the display area can be its resolution, which is measured in pixels. The resolution value can be the number of horizontal and vertical pixels within the display area. For example, for a 600×800 resolution display area, this means the horizontal display length is 600 pixels and the vertical display length is 800 pixels. Obtaining the size of the display area helps determine the position of the display elements within that area in subsequent steps.

[0130] S903: Adjust the display elements of the first display interface according to the size of the display area and display the first display interface.

[0131] For example, the first display interface here could be an image overview interface 1011. After the phone 100 launches the gallery application 101, the gallery application 101 can open and display the image overview interface 1011. The phone 100 can adjust the layout of the central display element in the image overview interface 1011 of the gallery application 101 according to the size of the display area in S902.

[0132] Here, the default central display element in the image overview interface 1011 can be image 10111, and the layout of image 10111 can be as follows: Figure 8As shown in (b), when the screen of mobile phone 100 has a resolution of 600×800, according to the configuration of image 10111 in step S702 above, the position of image 10111 can be: left: 100; right: 500; top: 250; bottom: 550, meaning that the distance between the center of image 10111 and the left, right, top, and bottom edges of the screen of mobile phone 100 are 100 pixels, 500 pixels, 250 pixels, and 550 pixels, respectively. It can be understood that if the screen resolution of mobile phone 100 is other values, the position of the preset center display element in the image overview interface 1011 can also be different from the above positions.

[0133] After adjusting the layout of image 10111 on phone 100, phone 100 can also adjust the size of image 10111. For example, the size of image 10111 can be adjusted to 160×250, so that the center of image 10111 is positioned 100 pixels away from the left edge, 500 pixels away from the right edge, 250 pixels away from the top edge, and 550 pixels away from the bottom edge of the display area of ​​image overview interface 1011, occupying an area of ​​size 160×250.

[0134] After adjusting the layout of the central display element in the image overview interface 1011 of the gallery application 101, the phone 100 adjusts the other display elements in the image overview interface 1011 according to the central display element. Here, we will take images 10111 and 10112 as examples. The phone 100 can determine the position of image 10112 in the image overview interface 1011 based on the attributes of "serial number: 2; interval: 30" included in image 10112 as described in step S702.

[0135] For example, if the center of image 10111 is 100 pixels away from the left, right, top, and bottom edges of the image overview interface 1011, respectively, then the position of image 10112, which is adjacent to image 10111, could be 300 pixels away from the center of image 10112 relative to the left, right, top, and bottom edges of the image overview interface 10111, respectively.

[0136] It is understandable that for images 10113 to 10116 in the image overview interface 1011, the mobile phone 100 can determine the positions of images 10113 to 10116 in sequence.

[0137] By first determining the position of the central display element, image 10111, in the image overview interface 1011, and then determining the relative positions of images 10112 to 10116 relative to image 10111, images 10111 to 10116 in the image overview interface 1011 are arranged in two rows and three columns in a 600×800 display area.

[0138] S904: Load the application's display style parameters.

[0139] In the embodiments of this application, when the mobile phone 100 launches the gallery application 101, the mobile phone 100 can also obtain the display style corresponding to the gallery application 101. After the mobile phone 100 determines the position of the display elements in the image overview interface 1011 of the gallery application 101, the mobile phone 100 can use the display style parameters corresponding to the display style of the gallery application 101 to configure the display elements in the image overview interface 1011.

[0140] For example, if the display style of the gallery application 101 is "metallic," the mobile phone 100 can obtain the display style parameters corresponding to the "metallic" display style. These display style parameters can be used to configure the display effects of the display elements in the gallery application 101. For example, the display style parameters may include: a specific gravity of 2, a sliding coefficient of 0.15, and an elasticity coefficient of 100 N / m. These display style parameters can be stored in the internal memory 120 of the mobile phone 100.

[0141] S905: Displays the adjusted first display interface.

[0142] After adjusting the position of the display elements of the picture overview interface 1011 of the gallery application 101 and configuring the display style parameters of the display elements of the picture overview interface 1011 through the above S901 to S904, the mobile phone 100 displays the picture overview interface 1011 on the screen 111.

[0143] S906: Detect whether there is a user operation on the first display interface.

[0144] Mobile phone 100 can detect whether the user has performed a user operation on the image overview interface 1011. If so, mobile phone 100 executes S907, whereby mobile phone 100 responds to the user operation on the first display interface by changing the position of the display element or causing the display element to display at least one display effect. If not, mobile phone 100 continues to return to S906 and maintains the detection.

[0145] S907: Responds to user actions that change the position of display elements or display the display effects of display elements.

[0146] In one embodiment of this application, the user operation of the image overview interface 1011 can be a user operation performed by the user on the display elements of the image overview interface 1011. The mobile phone 100 can respond to the user operation and change the position of one or more display elements in the image overview interface 1011. During the process of the position of the display element changing, the display element can also display at least one display effect.

[0147] For example, such as Figure 10 (a) to Figure 10 (c) and Figure 12 (a) to Figure 12 As shown in (b), the mobile phone 100 can respond to a user operation of pressing and sliding the image 10112 in the image overview interface 1011 to the position of image 10113, thereby swapping the positions of images 10112 and 10113 in the image overview interface 1011. In the above process, when the mobile phone 100 responds to the user operation of pressing image 10112, image 10112 calculates and displays a display effect corresponding to the pressed user operation based on the display style parameters loaded in step S904 and the display style model corresponding to the pressed user operation; when the user slides image 10112, image 10112 generates a display effect responsive to the sliding user operation based on the display style parameters loaded in step S904 and the display style model corresponding to the sliding user operation; and when images 10112 and 10113 swap positions, images 10112 and 10113 will generate a swapped position display effect based on the display style parameters loaded in step S904. The process of changing the position of a display element or displaying the display effect of a display element can be achieved through S907a to S907d below.

[0148] S908: Loads the application's display style in response to an operation that switches the application's display style.

[0149] In the embodiments of this application, after the mobile phone 100 adjusts the position of the display elements of the image overview interface 1011 of the gallery application 101 and configures the display style parameters of the display elements of the image overview interface 1011 through the above-described S901 to S904, and after the image overview interface 1011 is displayed on the screen 111, the mobile phone 100 can switch the display style of the gallery application 101 in response to the user's display style switching operation. For example, as Figure 11 (a) to Figure 11As shown in (c), the user touches the upper right corner of the image overview interface 1011 of the gallery application 101 to display the toolbar 1111 of the gallery application 101. In the toolbar 1111, the user clicks to select a display style option. After selecting "Water Drop Style," which is different from the current display style "Metallic Style," the phone 100 uses the display style parameters corresponding to "Water Drop Style" to reset the display elements of the image overview interface 1011 of the gallery application 101. For example, in addition to switching the appearance of the display elements to the appearance corresponding to "Water Drop Style," the phone 100 can also obtain the display style parameters corresponding to the display style "Water Drop Style." These display style parameters can be used to configure the display effect of the display elements of the gallery application 101. The display style parameters corresponding to "Water Drop Style" can be different from those of "Metallic Style." For example, the display style parameters of "Water Drop Style" can include: a weight of 3, a sliding coefficient of 0.30, etc.

[0150] After the mobile phone 100 switches the display style of the gallery application 101 in step S908, the mobile phone 100 returns to step S906 to continue to detect whether there is a user operation on the first display interface. If there is, the mobile phone 100 executes S907 to respond to the user's operation on the display elements in the first display interface, and uses the "water droplet style" display style parameters to calculate the display effect of the display elements through the display style model.

[0151] Here, through steps S904 to S908, mobile phone 100 can set the display style model for the display elements in the display interface of gallery application 101 only once, thus avoiding the need to set different display effects for different display styles. After each display style switch in gallery application 101, the display style model is used to calculate the different display effects of the display elements based on the display style parameters corresponding to the switched display style.

[0152] The following is a detailed description of step S907, as shown in 9(b). The process of mobile phone 100 executing step S907 includes:

[0153] S907a: Obtain physical data of user operations.

[0154] Mobile phone 100 acquires physical data of user operations through its own touch sensor 180K. This physical data can include the type of user operation and / or the force applied by the user operation. For example, ... Figure 10 (a) shows the user action of pressing image 10112, and as shown in the image 10112. Figure 12(a) As shown in the image 10112, the user operation of sliding the image 10112 can be obtained by the mobile phone 100 through its own touch sensor 180K. This application can use mechanical concepts from the field of physics to simulate the force generated by the user's touch operation. For example, the force of the user operation of pressing the image 10112 and the force of the user operation of sliding the image 10112 can be, for example, force 1 = 1N and force 2 = 2N respectively. It is understood that N here can be the mechanical unit Newton (N). In some embodiments of this application, other units can also be used to calculate the force, and there is no limitation on this.

[0155] S907b: Determine the display effect of display elements based on the physical data of user operations and display style parameters through the display style model.

[0156] Here, for example Figure 10 (a) Regarding the user operation of pressing image 10112, after the mobile phone 100 obtains the force 1 corresponding to the pressed user operation, the mobile phone 100 can calculate the display effect of the user operation of pressing image 10112 according to the display style parameters configured in step S904 through the display style model. For example, as shown in the image 10112... Figure 10 As shown in (b), the display effect of the user pressing the image 10112 can be that the image 10112 displays a downward display effect. For this downward display effect, the mobile phone 100 can use the force corresponding to the user's operation 1 = 1N, and the display style parameters of "metallic style" described in step S904: specific gravity: 2, sliding coefficient: 0.15, elastic coefficient: 100N / M to calculate the distance of the downward display effect of the image 10112. This distance can be calculated by the display style model (1) of the display effect configured for the image 10112 in step S704, where the display style model (1) can be the elastic force formula.

[0157] Force 1 = Elastic modulus * Distance

[0158] Display Style Model (1)

[0159] Substituting the force of 1:1N and the elastic coefficient of 100N / M into the display style model (1), a distance of 0.01M can be obtained. That is to say, when the user presses on the image 10112, such as Figure 10 As shown in (c), image 10112 will display a downward pressure effect that moves 0.01M inward from the screen in response to a press operation.

[0160] Similarly, for such Figure 12(a) Regarding the user's sliding operation of image 10112, after the mobile phone 100 obtains the force 2 corresponding to the sliding operation, the mobile phone 100 can calculate the display effect of the user sliding image 10112 based on the display style parameters of "metallic style" and the display style model corresponding to the sliding operation. For example, as shown in the figure... Figure 12 As shown in (a), during the user's swipe from image 10112 to image 10113, image 10112 displays a swipe effect. The mobile phone 100 can use the force 2 = 2N corresponding to the swipe operation, the aforementioned display style parameters (specific gravity: 2, swipe coefficient: 0.15), and the swipe duration from image 10112 to image 10113 to calculate the speed of the swipe effect of image 10112. The acceleration here can be calculated using the following display style model (2). This display style model (2) can include the velocity / acceleration formula and the friction formula.

[0161] Acceleration = (Force² - Specific Gravity * Slip Coefficient) / Specific Gravity

[0162] Speed ​​= Acceleration * Sliding Time

[0163] Display Style Model (2)

[0164] Substituting the force 2:2N, specific gravity 2, sliding coefficient 0.15, and sliding duration 0.3 into the display style model (2), we can obtain an acceleration of 0.85 and a speed of 0.255. That is to say, during the process of the user sliding from image 10112 to image 10113, image 10112 will display a sliding effect with a speed of 0.255.

[0165] It can be understood that there is a connection between image 10112 and image 10113, that is, as shown... Figure 12 As shown in (b), while the user slides image 10112 to the position of image 10113, image 10113 can slide to the position of image 10112 in the opposite direction of sliding image 10112. After image 10112 and image 10113 have swapped positions, that is, when the user no longer applies a press-and-hold operation to image 10112, image 10112 can display a bounce effect.

[0166] Here, the display effect of sliding image 10113 to the position of image 10112 can be obtained based on the force 2 corresponding to the user's sliding operation of image 10112, and the display style parameters calculated through the above display style model (2).

[0167] For example, by substituting the force 2:2N, specific gravity 2, sliding coefficient 0.15, and sliding duration 0.3 into the display style model (2), we can obtain an acceleration of 0.85 and a speed of 0.255. That is to say, during the process of the user sliding from image 10112 to image 10113, image 10113 will display a sliding effect with a speed of 0.255 as it slides to the position of image 10112.

[0168] It is understandable that the display effects of the interface elements in the Gallery application 101 loaded on the mobile phone 100 can be different depending on the display style of the Gallery application 101. For example, for the "Metal style", the sliding effect between image 10112 and image 10113 can be a rigid sliding; for the "Water Drop style", the display style parameters corresponding to this display style can include: a specific gravity of 3, a sliding coefficient of 0.30, and an elastic coefficient of 200 N / M. The mobile phone 100 uses the display style parameters of the "Water Drop style" and calculates a display effect that is different from the "Metal style" through the above display style models (1) and (2). Under the "Water Drop style", the sliding effect between image 10112 and image 10113 can be a fluid sliding.

[0169] S907c: Changes the position of a display element or changes the display effect of a display element.

[0170] After the mobile phone 100 determines the display effect of images 10112 and 10113, the mobile phone 100 responds to the user's operation of swiping from image 10112 to image 10113. When the user presses on image 10112, as follows: Figure 10 As shown in (c), image 10112 will display a downward sliding effect. During the user's swipe from image 10112 to image 10113, image 10112 will display a sliding effect with a speed of 0.255; simultaneously, image 10113 will display a sliding effect with a speed of 0.255 sliding to the position of image 10112.

[0171] In another embodiment of this application, the mobile phone 100 can also change the position of the display elements in the display interface in response to user operations on areas outside the display elements of the application's display interface.

[0172] like Figure 13 As shown in (a), the user performs a swipe-down operation on the image overview interface 1011 of the Gallery application 101. In response to this swipe-down operation, the mobile phone 100 changes the displayed elements in the image overview interface 1011 of the Gallery application 101 to images 10114 through 10119. At this time, as... Figure 13As shown in (b), the pre-configured central display element, namely image 10111, is already outside the image overview interface 1011 of the Gallery application 101. Therefore, the mobile phone 100 needs to change the central display element of the image overview interface 1011 of the Gallery application 101. For example, after the display elements in the image overview interface 1011 of the Gallery application 101 are changed to images 10114 to 10119, the mobile phone 100 can determine that image 10114 is the central display element.

[0173] For example, mobile phone 100 can configure the central display element in the image overview interface 1011 based on the size of the display area obtained in S902, the attributes of the central display element in the image overview interface 1011 of the gallery application 101, and the position of the preset central display element in the image overview interface 1011.

[0174] Here, the position of the preset center display element in the image overview interface 1011 can be the same as that described in S903. The position of the center display element can be: left: 100; right: 500; top: 250; bottom: 550, which means that the distance between the center of the center display element and the left, right, top and bottom edges of the screen of the mobile phone 100 is 100 pixels, 500 pixels, 250 pixels and 550 pixels respectively.

[0175] In another embodiment of this application, such as Figure 14 As shown in (a), the mobile phone 100 can also respond to an expanded user operation performed by the user on the image overview interface 1011 of the gallery application 101, by changing the displayed elements in the image overview interface 1011 of the gallery application 101 to images 10111 to 10114. At this time, as... Figure 14 As shown in (b), the mobile phone 100 needs to change the image 10111 in the image overview interface 1011 of the gallery application 101. At the same time, the positions of images 10112 to 10114 will also change relative to image 10111.

[0176] Mobile phone 100 acquires physical data of user operations through its own touch sensor 180K. This physical data may include the magnification factor of the user operation. Mobile phone 100 adjusts the size of the displayed elements in the picture overview interface 1011 of the gallery application 101 according to the magnification factor.

[0177] For example, with a magnification factor of 1.5, the phone 100 adjusts the size of the displayed elements in the picture overview interface 1011 of the gallery application 101 to 240×375.

[0178] Next, the mobile phone 100 can adjust the size and position of the central display element in the picture overview interface 1011 of the gallery application 101 based on the size of the display area obtained in S902, for example: 600×800, to reconfigure the central display element in the picture overview interface 1011.

[0179] Here, the position of the preset center display element in the image overview interface 1011 can also be adjusted according to the magnification factor of the user operation. For example, when the magnification factor is 1.5, the position of the center display element can be: Left: 160; Right: 440; Top: 205; Bottom: 595, indicating that the distance between the center of the center display element and the left, right, top, and bottom edges of the phone 100 screen are 160 pixels, 440 pixels, 205 pixels, and 595 pixels, respectively. Figure 14 As shown in (c), the mobile phone 100 can position image 10111 at distances of 160 pixels from the left edge, 440 pixels from the right edge, 205 pixels from the top edge, and 595 pixels from the bottom edge of the screen of the mobile phone 100, and image 10111 occupies an area of ​​240×375 pixels on the screen of the mobile phone 100. At the same time, the positions and sizes of images 10112 to 10114 will also be adjusted accordingly.

[0180] The steps S901 to S907 described above describe the process of mobile phone 100 opening and displaying the picture overview interface 1011 of the gallery application 101, and changing the position of the display elements of the picture overview interface 1011 and displaying the display effect of the display elements in response to user operations performed by the user on the picture overview interface 1011. In another embodiment of this application, mobile phone 100 may also switch the application from the first display interface to the second display interface in response to user operations, and display the display effect of the display elements of the second display interface when the second display interface is opened and displayed.

[0181] like Figure 15 As shown in (a), mobile phone 100 can switch from image overview 1011 to image detail 1012 in response to a user click on image 10112 in image overview 1011. Figure 15 As shown in (b), the image details interface 1012 includes four display elements: image 10121, "details" button 10122, "next" button 10123, and image details 10124.

[0182] Mobile phone 100 can use the same method as S702 to S703 above to configure the position of the display elements and the display style model of the display effect in the picture detail interface 1012 before opening the picture detail interface 1012.

[0183] For example, before opening the image details interface 1012, the phone 100 can configure image 10121 as the central display element. Simultaneously, the phone 100 can configure the position of image 10121 within the image details interface 1012. This position could be: left: screen width * 1 / 2; right: screen width * 1 / 2; top: screen height * 1 / 4; bottom: screen height * 3 / 4. The layout of image details 10124 could be: "Number 2; Interval: 30". Similarly, the phone 100 will also configure a "Details" button 10122 and a "Next" button 10123, for example: "Number 3; Interval: 30" and "Number 4; Interval: 30".

[0184] While configuring the display elements in the image details interface 1012 on mobile phone 100, mobile phone 100 can also configure the display style model of the display effects of the display elements in the image details interface 1012 of the gallery application 101. For example, taking image 10121 in image details interface 1012 as an example, mobile phone 100 can configure the display effect of image 10121 so that when mobile phone 100 opens image details interface 1012, image 10121 falls from outside the top boundary of image details interface 1012 to the position where image 10121 is located in image details interface 10122. Similarly, mobile phone 100 can also configure the same display effect as image 10121 for image details 10124, "Details" button 10122, and "Next" button 10123.

[0185] After configuring the display elements' positions and display style models in the detailed image interface 1012 on mobile phone 100, mobile phone 100 can adopt the above-mentioned... Figure 9 (a) and Figure 9 A similar method to that in (b) is used to display the second display interface and trigger display effects by opening display elements of the second display interface, including:

[0186] S1101: Adjust the layout of the second display interface according to the size of the display area and display the second display interface.

[0187] After displaying the detailed image interface 1012 on phone 100, if the phone 100's screen resolution is 600×800, as follows: Figure 15As shown in (b), the position of image 10121 in the image details interface 1012 can be: left: 300; right: 300; top: 200; bottom: 600. That is, the distances between the center of image 10121 and the left, right, top, and bottom boundaries of the image details interface 1012 are 300 pixels, 300 pixels, 200 pixels, and 600 pixels, respectively. The position of image details 10124 can be 30 pixels below image 10121.

[0188] After configuring image details 10124, phone 100 then configures the positions of the "Details" button 10122 and the "Next" button 10123 in sequence, as follows: Figure 10 As shown in (b), the "Details" button 10122 and the "Next" button 10123 are at the same horizontal level and are located directly below the image details 10124.

[0189] S1102: Load the application's display style.

[0190] The display style here can be the same as the display style in S904. However, the difference lies in the weight value of image 10121. For example, the display style parameters of image 10121 include: weight: 6, sliding coefficient: 0.15.

[0191] S1103: Triggers the display effect of the display elements in the second display interface.

[0192] For example, the position of image 10121 is as follows: left: 300; right: 300; top: 200; bottom: 600. The display style parameters of image 10121 include: specific gravity: 6, sliding coefficient: 0.15. The display effect of image 10121 is that image 10121 falls from outside the upper boundary of the image detail interface 1012 to the position of image 10121 in the image detail interface 1012. That is to say, the position of image 10121 in the image detail interface 1012 is the end point, and the position of image 10121 outside the upper boundary of the image detail interface 1012 is the starting point. Mobile phone 100 can calculate the falling display effect of image 10121 based on the distance between the end point and the starting point, as well as the display style parameters of image 10121, through the display style model (3). In the display style model (3), the falling force 3 of image 10121 can be configured as 3N. The display style model (3) here also includes the velocity / acceleration formula and the friction formula.

[0193] Distance = End point pixel value - Start point pixel value

[0194] Acceleration = (Force 3 - Specific Gravity * Slip Coefficient) / Specific Gravity

[0195] Speed ​​= Initial velocity + Acceleration * Duration

[0196] Distance = Speed ​​* Duration

[0197] Display Style Model (3)

[0198] Substituting the force 3:3N, specific gravity 6, sliding coefficient 0.15, and distance 500 into the display style model (2), we can obtain an acceleration of 1.05 and a speed of 22. That is to say, when the user slides the image 10112, the image 10113 will have a falling display effect at a speed of 22, entering the image detail interface 1012 from outside the upper boundary of the image detail interface 1012 with a falling display effect.

[0199] Similarly, phone 100 can calculate the display effect of the "Details" button 10122 and the "Next" button 10123 falling.

[0200] In another embodiment of this application, the display effect of switching from the image overview interface 1011 to the image detail interface 1012 can also be as shown in Figure 16(a). The image detail interface 1012, as a whole, is displayed on the screen of the mobile phone 100 from below the image overview interface 1011 in a pop-up display effect. At the same time, the display elements in the image detail interface 1012 are displayed through... Figure 15 The display effect described in (b) is displayed in the image detail interface 1012 from outside the upper boundary of the image detail interface 1012 through a falling display effect.

[0201] It is understandable that mobile phone 100 can also configure display effects for switching between the display interfaces of the gallery application 101 and other applications. For example, as shown in Figure 16(b), when the user modifies the image details 10124 in the image details interface 1012 of the gallery application 101, the input method application 102 can be displayed from the bottom of the screen of mobile phone 100 with a floating display effect. When mobile phone 100 receives a message, the instant messaging application 103 of mobile phone 100 can be displayed from the top of the screen of mobile phone 100 with a falling display effect.

[0202] It is understood that in the embodiments of this application, the parameters and values ​​in the above display style models (1) to (3) are exemplary, that is, they can include any number and type of other parameters and values, without limitation.

[0203] It should be understood that although the terms "first," "second," etc., may be used herein to describe various features, these features should not be limited by these terms. The use of these terms is merely for distinction and should not be construed as indicating or implying relative importance. For example, without departing from the scope of the exemplary embodiments, a first feature may be referred to as a second feature, and similarly, a second feature may be referred to as a first feature.

[0204] Furthermore, the various operations will be described as multiple separate operations in a manner most conducive to understanding the illustrative embodiments; however, the order of description should not be construed as implying that these operations must depend on the order of description, and many of these operations may be performed in parallel, concurrently, or simultaneously. Moreover, the order of the operations may also be rearranged. The process may be terminated when the described operations are completed, but additional operations not included in the figures may also be present. The process may correspond to a method, function, procedure, subroutine, subroutine, etc.

[0205] References to "an embodiment," "an embodiment," "an illustrative embodiment," etc., in this specification indicate that the described embodiment may include specific features, structures, or properties; however, each embodiment may or may not necessarily include specific features, structures, or properties. Furthermore, these phrases are not necessarily directed to the same embodiment. Additionally, when specific features are described in conjunction with specific embodiments, the knowledge of those skilled in the art can influence the combination of these features with other embodiments, whether or not those embodiments are explicitly described.

[0206] Unless the context otherwise specifies, the terms “comprising,” “having,” and “including” are synonyms. The phrase “A / B” means “A or B.” The phrase “A and / or B” means “(A), (B), or (A and B).”

[0207] As used herein, the term “module” may refer to, as part of, or include: a memory (shared, dedicated, or grouped) for running one or more software or firmware programs, an application-specific integrated circuit (ASIC), electronic circuitry and / or a processor (shared, dedicated, or grouped), combinational logic circuitry, and / or other suitable components that provide the said functionality.

[0208] In the accompanying drawings, some structural or methodological features may be shown in a specific arrangement and / or order. However, it should be understood that such a specific arrangement and / or order is not necessary. Rather, in some embodiments, these features may be illustrated in a manner and / or order different from that shown in the illustrative drawings. Furthermore, the inclusion of structural or methodological features in a particular drawing does not mean that all embodiments need to include such features; in some embodiments, these features may be omitted, or they may be combined with other features.

[0209] The embodiments of this application have been described in detail above with reference to the accompanying drawings. However, the use of the technical solutions of this application is not limited to the various applications mentioned in the embodiments of this patent. Various structures and modifications can be easily implemented with reference to the technical solutions of this application to achieve the various beneficial effects mentioned herein. Within the scope of knowledge possessed by those skilled in the art, all changes made without departing from the spirit of this application should be considered within the scope of this patent application.

Claims

1. A method for displaying an interface, applied to an electronic device, characterized in that, include: The user's action of opening the first application was detected; Obtain the size of the display area of ​​the first display interface of the first application, wherein the display area is a local area of ​​the screen of the electronic device; Adjust the position of the central display element in the first display interface according to the size of the display area; Adjust the positions of the other display elements relative to the central display element in the first display interface; Display the adjusted first display interface; Acquire user operation data generated on the screen of an electronic device by user operations, wherein the user operations are operations on display elements of the first display interface of the first application; By utilizing the physical laws corresponding to the type of user operation, the user operation data is calculated to obtain the display data corresponding to the user operation data; Based on the displayed data, the electronic device displays physical phenomena that simulate the user operation data as following the physical laws. The first application's display elements support multiple display styles, and the multiple display styles correspond to multiple display style parameters; The electronic device calculates the display data in the following manner: The user operation data is converted into physical data corresponding to the physical laws. The display style of the display element of the first application selected by the user is determined as the first display style, which is either a metal style or a water droplet style; Convert the display style parameters corresponding to the first display style into the corresponding physical coefficients; The display data is calculated based on the physical data and the physical coefficients; When the user operation is pressing, the physical data is the force of the pressing, the physical coefficient is the elastic coefficient of the first display element, the display data is the distance of the display effect of the first display element being pressed down, and the distance is the ratio of the force to the elastic coefficient.

2. The method according to claim 1, characterized in that, The user actions also include at least one of clicking and swiping.

3. The method according to claim 2, characterized in that, The physical phenomena corresponding to pressing also include at least one of deformation and rebound; The physical phenomena corresponding to clicks include at least one of jumping and bouncing; The physical phenomena corresponding to sliding include at least one of sliding, rolling, rotating in place, and page turning.

4. The method according to claim 2, characterized in that, The physical data also includes at least one of the duration of action and the displacement of the force, wherein... The pressure, click, and swipe forces applied by the user to the screen of the electronic device correspond to the physical data.

5. The method according to claim 4, characterized in that, The physical coefficients also include at least one of weight and coefficient of friction; wherein the weight, coefficient of friction, or elasticity coefficient of the object operated by the user differs depending on the display style parameters.

6. The method according to claim 1, characterized in that, The physical laws mentioned also include at least one of the friction formula and the acceleration formula.

7. An electronic device, characterized in that, include: Memory, which stores instructions; A processor coupled to memory, which, when executed by the processor, causes the electronic device to perform the following operations: The user's action of opening the first application was detected; Obtain the size of the display area of ​​the first display interface of the first application, wherein the display area is a local area of ​​the screen of the electronic device; Adjust the position of the central display element in the first display interface according to the size of the display area; Adjust the positions of the other display elements relative to the central display element in the first display interface; Display the adjusted first display interface; Acquire user operation data generated on the screen of an electronic device by user operations, wherein the user operations are operations on display elements of the first display interface of the first application; By utilizing the physical laws corresponding to the type of user operation, the user operation data is calculated to obtain the display data corresponding to the user operation data; Based on the displayed data, the electronic device displays physical phenomena that simulate the user operation data as following the physical laws. The first application's display elements support multiple display styles, and the multiple display styles correspond to multiple display style parameters; The electronic device calculates the display data in the following manner: The user operation data is converted into physical data corresponding to the physical laws. The display style of the display element of the first application selected by the user is determined as the first display style, which is either a metal style or a water droplet style; Convert the display style parameters corresponding to the first display style into the corresponding physical coefficients; The display data is calculated based on the physical data and the physical coefficient; when the user operation is pressing, the physical data is the pressing force, the physical coefficient is the elastic coefficient of the first display element, the display data is the distance of the display effect of the first display element being pressed down, and the distance is the ratio of the force to the elastic coefficient.

8. The electronic device according to claim 7, characterized in that, The user actions also include at least one of clicking and swiping.

9. The electronic device according to claim 8, characterized in that, The physical phenomena corresponding to pressing also include at least one of deformation and rebound; The physical phenomena corresponding to clicks include at least one of jumping and bouncing; The physical phenomena corresponding to sliding include at least one of sliding, rolling, rotating in place, and page turning.

10. The electronic device according to claim 8, characterized in that, The physical data also includes at least one of the duration of action and the displacement of the force, wherein... The pressure, click, and swipe forces applied by the user to the screen of the electronic device correspond to the physical data.

11. The electronic device according to claim 10, characterized in that, The physical coefficients include at least one of weight and coefficient of friction; wherein the weight, coefficient of friction, or elasticity coefficient of the object operated by the user differs depending on the display style parameters.

12. The electronic device according to claim 7, characterized in that, The physical laws mentioned also include at least one of the friction formula and the acceleration formula.

13. A computer-readable medium, characterized in that, The computer-readable medium stores instructions that, when executed on an electronic device, cause the electronic device to perform the interface display method of any one of claims 1 to 6.

Images