Interface display method, electronic equipment, storage medium and chip

Abstract

The invention provides an interface display method, electronic equipment, a storage medium and a chip. According to the method, a navigation bar can be displayed in a main interface of a note application, a first search box is displayed in the navigation bar, the note application performs a process from the main interface to a search interface, and a second search box can perform length change in the navigation bar. According to the embodiment of the invention, the operation of changing the length of the search box in the navigation bar can be adopted to realize the change of the main interface to the search interface, and the operation of moving the search box from a position outside the navigation bar to a position in navigation is not needed to realize the change of the main interface to the search interface; according to the method, the probability of jamming during interface change caused by displacement of the search box can be reduced, the main interface can be smoothly changed to the search interface, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of terminals, and in particular to an interface display method, electronic equipment, storage medium and chip. Background Art

[0002] Currently, users can easily create, edit and manage various types of notes, such as text, pictures, recordings and to-do lists, through note-taking applications in electronic devices, providing convenience for users' work and life.

[0003] Typically, note-taking apps have a search function, allowing users to quickly find desired notes by entering keywords in the search box. For example, if a user taps the search box on the main interface of a note-taking app, the app will switch from the main interface to the search interface, where the user can enter keywords in the search box to perform a search.

[0004] Usually, when a note-taking application changes from the main interface to the search interface, the search box moves from one location in the main interface to another in the search interface, such as from a location outside the navigation bar to a location within the navigation bar. From the user's visual point of view, the interface change is not smooth and there is a freeze, which affects the user experience. Summary of the Invention

[0005] The present application provides an interface display method, electronic device, storage medium and chip, which reduce the probability of freeze when the interface changes, and can smoothly change the main interface to the search interface, thereby improving the user experience.

[0006] In a first aspect, an interface display method is provided, which is applied to an electronic device and includes:

[0007] Displaying a first interface of the note application, wherein the first interface displays a navigation bar, and a first search box is displayed in the navigation bar;

[0008] In response to the operation of the first search box, the second interface is displayed, and the second search box is displayed in the navigation bar of the second interface. The length of the second search box in the navigation bar is expanded from the initial length to the first length of the second search box displayed on the second interface, and the first length is greater than the length of the first search box.

[0009] In the relevant scheme, when the note application changes from the main interface to the search interface, the search box moves from one position in the main interface to another position in the search interface, for example, from a position outside the navigation bar to a position within the navigation. From the user's visual point of view, the interface change is not smooth and there is a freeze, which affects the user experience.

[0010] In an embodiment of the present application, a navigation bar is displayed in the first interface (which can be considered as the main interface), and a first search box is displayed in the navigation bar. Since the second search box can change in length in the navigation bar in response to an operation on the first search box (in this case, the note application changes the main interface to the search interface), the second search box can be expanded from the initial length to the first length, and then the second search box is displayed in the second interface (which can be considered as the search interface). The first length of the second search box displayed in the second interface is greater than the length of the first search box. Therefore, in an embodiment of the present application, the operation of changing the length of the search box in the navigation bar can be used to realize the change from the main interface to the search interface, without the need to move the search box from a position outside the navigation bar to a position within the navigation to realize the change from the main interface to the search interface. This can reduce the probability of a freeze phenomenon when the interface changes due to the displacement of the search box, and can make the main interface change smoothly to the search interface, thereby improving the user experience.

[0011] In conjunction with the first aspect, in a possible implementation of the first aspect, the first interface further displays a first title bar, the first title bar includes a navigation bar, and the transparency of the first title bar is a first transparency; the second interface further displays a second title bar, the second title bar includes a navigation bar, and the transparency of the second title bar is the first transparency; and the method further includes:

[0012] During the process of changing from the first interface to the second interface, the transparency of the first title bar gradually decreases from the first transparency to the second transparency, and the transparency of the second title bar gradually increases from the second transparency to the first transparency.

[0013] In an embodiment of the present application, during the process of the electronic device changing from the first interface to the second interface, the transparency of the first title bar gradually decreases from the first transparency to the second transparency, and the transparency of the second title bar gradually increases from the second transparency to the first transparency, so that the first title bar can change smoothly to the second title bar.

[0014] In addition, in the related scheme, the search box is located below the navigation bar, while the search box in the embodiment of the present application is located within the navigation bar. Since the size of the screen display area is certain, when the search box is located below the navigation bar, the search box will occupy a certain display area, while the search box in the embodiment of the present application is located within the navigation bar, and the search box does not occupy the display area. Therefore, more note content can be displayed in the display area of the screen.

[0015] In conjunction with the first aspect, in a possible implementation of the first aspect, a size of the first title bar in the first interface is a first initial title size; and the method further includes:

[0016] During the process of changing from the first interface to the second interface, the size of the first title bar is gradually reduced from the first initial title size to the first target title size.

[0017] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the size of the first title bar gradually decreases from the first initial title size to the first target title size, so that the first title bar can change smoothly.

[0018] In conjunction with the first aspect, in a possible implementation of the first aspect, the first title bar further includes title text, the title text has a first text size in the first interface, and the title text is positioned in the first title bar at a first position; and the method further includes:

[0019] During the process of changing from the first interface to the second interface, the text size of the title text in the first title bar is gradually reduced from the first text size to the second text size, and the position of the title text is moved from the first position to the second position.

[0020] In an embodiment of the present application, during the process of changing from the first interface to the second interface, the text size of the title text in the first title bar gradually decreases from the first text size to the second text size, and the position of the title text moves from the first position to the second position, so that the title text can change smoothly.

[0021] In conjunction with the first aspect, in a possible implementation of the first aspect, a size of the second title bar in the second interface is a second target title size; and the method further includes:

[0022] During the process of changing from the first interface to the second interface, the size of the second title bar is gradually reduced from the second initial title size to the second target title size.

[0023] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the size of the second title bar gradually decreases from the second initial title size to the second target title size, so that the second title bar can change smoothly.

[0024] In conjunction with the first aspect, in a possible implementation of the first aspect, the second title bar further includes a first interface element, and in the second interface, the first interface element is located at a third position within the second title bar; and the method further includes:

[0025] During the process of changing from the first interface to the second interface, the position of the first interface element in the second title bar gradually moves from the fourth position to the third position following the change in the length of the second search box.

[0026] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the position of the first interface element in the second title bar gradually moves from the fourth position to the third position, so that the first interface element can change smoothly.

[0027] In conjunction with the first aspect, in a possible implementation of the first aspect, the first interface further displays a first content area, the first content area is located below the navigation bar, and the transparency of the first content area is a first transparency; the second interface further displays a second content area, the second content area is located below the navigation bar, and the transparency of the second content area is the first transparency; and the method further includes:

[0028] During the process of changing from the first interface to the second interface, the transparency of the first content area gradually decreases from the first transparency to the second transparency, and the transparency of the second content area gradually increases from the second transparency to the first transparency.

[0029] In an embodiment of the present application, during the process of changing from the first interface to the second interface, the transparency of the first content area gradually decreases from the first transparency to the second transparency, and the transparency of the second content area gradually increases from the second transparency to the first transparency, so that the content area of the first interface can be smoothly changed to the content area of the second interface.

[0030] In conjunction with the first aspect, in a possible implementation of the first aspect, a size of the first content area in the first interface is a first initial content size; and the method further includes:

[0031] During the process of changing from the first interface to the second interface, the size of the first content area is gradually reduced from the first initial content size to the first target content size.

[0032] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the size of the first content area is gradually reduced from the first initial content size to the first target content size, so that the first content area can change smoothly.

[0033] In conjunction with the first aspect, in a possible implementation of the first aspect, a size of the second content area in the second interface is a second target content size; and the method further includes:

[0034] During the process of changing from the first interface to the second interface, the size of the second content area is gradually reduced from the second initial content size to the second target content size.

[0035] In the embodiment of the present application, during the process of changing from the first interface to the second interface, the size of the second content area is gradually reduced from the second initial content size to the second target content size, so that the first content area can change smoothly.

[0036] In conjunction with the first aspect, in a possible implementation of the first aspect, the second interface further displays a keyboard bar, the keyboard bar is located below the navigation bar, and the size of the keyboard bar in the second interface is a fifth position; and the method further includes:

[0037] During the process of changing from the first interface to the second interface, the position of the keyboard bar gradually moves from the sixth position to the fifth position.

[0038] In an embodiment of the present application, during the process of changing from the first interface to the second interface, the position of the keyboard bar gradually moves from the sixth position to the fifth position, so that the electronic device can smoothly deploy the keyboard bar when changing to the second interface (which can be considered as the search interface) to facilitate the user to perform search operations.

[0039] In a second aspect, an electronic device is provided, wherein the electronic device is configured to execute the method provided in the first aspect. Specifically, the electronic device may include a processing unit configured to execute any possible implementation of the first aspect.

[0040] In a third aspect, an electronic device is provided, comprising: one or more processors; one or more memories; the one or more memories storing one or more computer programs, the one or more computer programs comprising instructions, which, when executed by the one or more processors, enable the electronic device to execute a method in any possible implementation of the first aspect.

[0041] In a fourth aspect, a computer-readable storage medium is provided, comprising computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the method described in the first aspect.

[0042] In a fifth aspect, a chip is provided, comprising a memory for storing instructions; and a processor for calling and executing instructions from the memory, so that an electronic device equipped with the chip executes the method described in the first aspect above. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 This is a schematic diagram of an interface change provided in an embodiment of the present application.

[0044] Figure 2 This is a schematic diagram of another interface change provided in an embodiment of the present application.

[0045] Figure 3 This is a hardware structure diagram of an electronic device provided in an embodiment of the present application.

[0046] Figure 4 This is a software architecture diagram of an electronic device provided in an embodiment of the present application.

[0047] Figure 5 It is a schematic diagram of the overall process of the interface display method provided in an embodiment of the present application.

[0048] Figure 6 This is an example diagram of initial layout parameters provided in an embodiment of the present application.

[0049] Figure 7 This is an example diagram of changed layout parameters provided in an embodiment of the present application.

[0050] Figure 8 It is a schematic diagram of an interface display method provided in an embodiment of the present application.

[0051] Figure 9 It is a schematic diagram of another interface display method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0052] The technical solutions in the embodiments of the present application will be described below with reference to the accompanying drawings.

[0053] Currently, users can easily create, edit and manage various types of notes, such as text, pictures, recordings and to-do lists, through note-taking applications in electronic devices, providing convenience for users' work and life.

[0054] Typically, note-taking apps have a search function, allowing users to quickly find desired notes by entering keywords in the search box. For example, if a user taps the search box on the main interface of a note-taking app, the app will switch from the main interface to the search interface, where the user can enter keywords in the search box to perform a search.

[0055] Typically, when a note-taking application changes from the main interface to the search interface, the search box moves from one location in the main interface to another in the search interface. From the user's visual point of view, the interface change is not smooth and there are freezes, which affects the user experience.

[0056] In order to solve the above problems, the present application embodiment provides an interface display method, for example, please refer to Figure 1 , Figure 1 This is a schematic diagram of an interface change provided in an embodiment of the present application.

[0057] Figure 1 The interface 110 shown in (a) includes an icon 111 of a note application. The user can click on the icon 111. In response to the user clicking on the icon 111, the electronic device can display Figure 1The interface 120 shown in (b) can be considered as the main interface of the note application. The interface 120 includes a title bar 121 and a content area 122. The title bar includes title text 1211 and a search control 1213, as well as other controls, such as control 1212 and control 1214. The content area 122 displays the contents of multiple notes that have been created, such as the first note 1221.

[0058] The user can click control 1213. In response to the user clicking control 1213, the electronic device gradually disappears the main interface 120 and gradually appears the search interface 140. Interface 130 refers to the transition interface between the main interface 120 and the search interface 140. From the change from interface 120 to interface 130 and finally to interface 140, it can be seen that:

[0059] The transparency of the title bar of the main interface gradually decreases, and the transparency of the title bar of the search interface gradually increases. Figure 1 The transparency of the title bar 121 in the main interface 120 shown in (b) is reduced to Figure 1 The transparency of the title bar 131 in the interface 130 shown in (c) is increased until it is reduced to the transparency of the title bar 141 in the search interface 140 (in the interface 140, the transparency of the title bar 141 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the title bar 141). For another example, the transparency of the title bar 123 in the main interface 120 (in the interface 120, the transparency of the title bar 123 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the title bar 123) is increased to the transparency of the title bar 133 in the interface 130 until it is increased to the transparency of the title bar 143 in the search interface 140.

[0060] The transparency of the search box on the main interface gradually decreases, and the search box on the search interface begins to appear and the transparency of the search box gradually increases. For example, the transparency of the search box 1213 in the title bar 121 in the main interface 120 is reduced to the transparency of the search box 1313 in the title bar 131 in the interface 130, until it is reduced to the transparency of the search box 1413 in the title bar 141 in the search interface 140 (in the interface 140, the transparency of the search box 1413 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the search box 1413). For another example, the transparency of the search box 1232 in the title bar 123 in the main interface 120 (in the interface 120, the transparency of the search box 1232 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the search box 1232) increases to the transparency of the search box 1332 in the title bar 133 in the interface 130, until it increases to the transparency of the search box 1432 in the title bar 143 in the search interface 140.

[0061] After the search box appears in the search interface, its height remains unchanged and its length gradually increases. For example, the height of search box 1332 in interface 130 and the height of search box 1432 in interface 140 remain unchanged, and the length of search box 1332 changes to the length of search box 1432.

[0062] The size of the title text of the main interface is gradually reduced. For example, the size of the title text 1211 of the title bar 121 in the main interface 120 is reduced to Figure 1 (c) in the figure shows the size of the title text 1311 in the title bar 131 in the interface 130, until it is reduced to the size of the title text 1411 in the title bar 141 in the search interface 140 (in the interface 140, the transparency of the title bar 141 is reduced to 0 for example. When the transparency is 0, the user cannot visually see the title text 1411).

[0063] The transparency of the content area of the main interface gradually decreases, while the transparency of the content area of the search interface gradually increases. For example, the transparency of content area 122 in main interface 120 decreases to the transparency of content area 132 in interface 130, until it decreases to the transparency of content area 142 in interface 140 (in interface 140, the transparency of content area 142 is shown as completely transparent, and the user cannot visually see content area 142). For another example, the transparency of content area 125 in main interface 120 (in interface 120, the transparency of content area 125 is shown as completely transparent, and the user cannot visually see content area 125) increases to the transparency of content area 135 in interface 130, until it increases to the transparency of content area 145 in interface 140.

[0064] In the process of changing from interface 120 to interface 130 and finally to interface 140 , a keyboard bar will gradually appear in the interface. For example, a partial keyboard bar 134 first appears in interface 130 until the keyboard bar 144 displayed in interface 140 appears.

[0065] From the above, it can be seen that: the interface display method provided in the embodiment of the present application, in the process of changing from the main interface to the search interface, the transparency of the title bar of the main interface gradually decreases, the transparency of the title bar of the search interface gradually increases, and the transparency of the search box of the main interface gradually decreases, the search box of the search interface begins to appear and the transparency of the search box gradually increases, and after the search box of the search interface appears, its height remains unchanged and the length gradually increases, and the size of the title text of the main interface gradually decreases, and the transparency of the content area of the main interface gradually decreases, and the transparency of the content area of the search interface gradually increases. This can make the main interface change smoothly to the search interface, reduce the probability of freezes when the interface changes, and improve the user experience.

[0066] In another scenario, the electronic device can also use the interface display method provided in the embodiment of the present application to smoothly change the main interface to the search interface. For example, please refer to Figure 2 , Figure 2 This is a schematic diagram of another interface change provided in an embodiment of the present application.

[0067] Figure 2 The interface 210 shown in (a) is Figure 1 The interface 120 shown in (b) is the same as the one shown in FIG. 1 , the user can slide up in the interface 210, and the electronic device responds to the user operation and displays Figure 2 (b) shows interface 220. This interface can be considered as the main interface of the note-taking application. Interface 220 includes a title bar 221 and a content area 222. The title bar includes title text 2211 and a search control 2213, as well as other controls such as control 2222 and control 2214. The content area 222 displays the contents of multiple created notes, such as the first note 2221.

[0068] The user can click control 2213. In response to the user clicking control 2213, the electronic device gradually disappears the main interface 220 and gradually appears the search interface 240. Interface 230 refers to the transition interface between the main interface 220 and the search interface 240. From the change from interface 220 to interface 230 and finally to interface 240, it can be seen that:

[0069] The transparency of the title bar of the main interface gradually decreases, and the transparency of the title bar of the search interface gradually increases. Figure 1 The transparency of the title bar 221 in the main interface 220 shown in (b) is reduced to Figure 1 The transparency of the title bar 231 in the interface 230 shown in (c) is reduced until it reaches the transparency of the title bar 241 in the search interface 240 (in the interface 240, the transparency of the title bar 241 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the title bar 241). For another example, the transparency of the title bar 223 in the main interface 220 (in the interface 220, the transparency of the title bar 223 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the title bar 223) is increased to the transparency of the title bar 233 in the interface 230 until it reaches the transparency of the title bar 243 in the search interface 240.

[0070] The transparency of the search box on the main interface gradually decreases, and the search box on the search interface begins to appear and the transparency of the search box gradually increases. For example, the transparency of the search box 2213 in the title bar 221 of the main interface 220 is reduced to the transparency of the search box 2323 in the title bar 231 of the interface 230, until it is reduced to the transparency of the search box 2413 in the title bar 241 of the search interface 240 (in the interface 240, the transparency of the search box 2413 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the search box 2413). For another example, the transparency of the search box 2232 in the title bar 223 of the main interface 220 (in the interface 220, the transparency of the search box 2232 is reduced to completely transparent for example. When the transparency is completely transparent, the user cannot visually see the search box 2232) increases to the transparency of the search box 2332 in the title bar 233 of the interface 230, until it increases to the transparency of the search box 2432 in the title bar 243 of the search interface 240.

[0071] After the search box of the search interface appears, its height remains unchanged and its length gradually increases. For example, the height of search box 2332 in interface 230 remains unchanged from the height of search box 2432 in interface 240, and the length of search box 2332 changes to the length of search box 2432.

[0072] The transparency of the content area of the main interface gradually decreases, while the transparency of the content area of the search interface gradually increases. For example, the transparency of content area 222 in main interface 220 decreases to the transparency of content area 232 in interface 230, until it decreases to the transparency of content area 242 in interface 240 (in interface 240, the transparency of content area 242 is shown as completely transparent, and the user cannot visually see content area 242). For another example, the transparency of content area 225 in main interface 220 (in interface 220, the transparency of content area 225 is shown as completely transparent, and the user cannot visually see content area 225) increases to the transparency of content area 235 in interface 230, until it increases to the transparency of content area 245 in interface 240.

[0073] In the process of changing from interface 220 to interface 230 and finally to interface 240, a keyboard bar will gradually appear in the interface. For example, a partial keyboard bar 234 first appears in interface 230 until the keyboard bar 244 displayed in interface 240 appears.

[0074] Figure 2 Compared to Figure 1 In the process of changing from the main interface to the search interface, the size of the title text in the search bar in the main interface does not change.

[0075] From the above, it can be seen that: the interface display method provided in the embodiment of the present application, in the process of changing from the main interface to the search interface, the transparency of the title bar of the main interface gradually decreases, the transparency of the title bar of the search interface gradually increases, and the transparency of the search box of the main interface gradually decreases, the search box of the search interface begins to appear and the transparency of the search box gradually increases, and after the search box of the search interface appears, its height remains unchanged and the length gradually increases, and the transparency of the content area of the main interface gradually decreases, and the transparency of the content area of the search interface gradually increases. This method can make the main interface change smoothly to the search interface, reduce the probability of freezes when the interface changes, and improve the user experience.

[0076] It should be noted that the interface display method provided in the embodiment of the present application can be applied to an application program for storing notes in an electronic device, including but not limited to the above Figure 1 and Figure 2 The note application shown may also be a memo application, etc. The embodiment of the present application is described using the note application as an example.

[0077] The interface display method provided in the embodiment of the present application is applied to electronic devices. The electronic device may also be referred to as a terminal, user equipment (UE), mobile station (MS), mobile terminal (MT), etc. The electronic device may be a mobile phone, a tablet computer (Pad), a laptop computer, a desktop computer, a computer with wireless transceiver function, a virtual reality (VR) electronic device, an augmented reality (AR) electronic device, a wireless terminal in industrial control (industrial control), a wireless terminal in self-driving, a wireless terminal in remote medical surgery, a wireless terminal in smart grid (smart grid), a wireless terminal in transportation safety (transportation safety), a wireless terminal in smart city (smart city), a wireless terminal in smart home (smart home), etc. The embodiments of the present application do not limit the specific technology and specific device form adopted by the electronic device.

[0078] In order to better understand the embodiments of the present application, the structure of the electronic device according to the embodiments of the present application is introduced below.

[0079] For example, Figure 3The figure shows a schematic diagram of the structure of an electronic device 300. The electronic device 300 may include a processor 310, an external memory interface 320, an internal memory 330, an antenna 1, an antenna 2, a mobile communication module 340, a wireless communication module 350, an audio module 360, a speaker 360A, a receiver 360B, a microphone 360C, an earphone interface 360D, a sensor module 370, a camera 380, a display screen 390, etc. The sensor module 370 may include a pressure sensor 370A, a touch sensor 370B, etc.

[0080] It should be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device 300. In other embodiments of the present application, the electronic device 300 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0081] The processor 310 may include one or more processing units, for example, a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0082] The controller may be the nerve center and command center of the electronic device 300. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0083] A hardware decoder can be configured in the GPU. Creating a hardware decoder will occupy the hardware macroblock resources of the GPU.

[0084] The decoding program of the soft decoder can be run on the CPU, and creating a soft decoder will not occupy the hardware macroblock resources of the GPU.

[0085] Processor 310 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 310 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 310. If processor 310 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 310 latency, and thus improves system efficiency.

[0086] In this embodiment of the present application, the processor 310 can set layout parameters of the keyboard bar, the main page, the search page, etc.

[0087] The wireless communication function of the electronic device 300 can be implemented through the antenna 1, the antenna 2, the mobile communication module 340, the wireless communication module 350, the modem processor and the baseband processor.

[0088] In some embodiments, antenna 1 of electronic device 300 is coupled to mobile communication module 340 , and antenna 2 is coupled to wireless communication module 350 , so that electronic device 300 can communicate with the network and other devices through wireless communication technology.

[0089] The electronic device 300 implements the display function through a GPU, a display screen 390 , and an application processor.

[0090] The display screen 390 is used to display images, videos, etc.

[0091] The electronic device 300 can implement a shooting function through an ISP, a camera 380, a video codec, a GPU, a display screen 390, and an application processor.

[0092] The ISP is used to process the data fed back by the camera 380.

[0093] The external memory interface 320 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 300.

[0094] The internal memory 330 can be used to store computer executable program codes, which include instructions. The processor 310 executes various functional applications and data processing of the electronic device 300 by running the instructions stored in the internal memory 330. The internal memory 330 can include a program storage area and a data storage area.

[0095] The electronic device 300 can implement audio functions such as music playback and recording through the audio module 360, the speaker 360A, the receiver 360B, the microphone 360C, the headphone jack 360D, and the application processor.

[0096] The pressure sensor 370A is used to sense pressure signals and convert them into electrical signals. In some embodiments, the pressure sensor 370A can be provided on the display screen 390. When a touch operation is applied to the display screen 390, the electronic device 300 detects the intensity of the touch operation based on the pressure sensor 370A.

[0097] Touch sensor 370B, also known as a "touch panel," can be mounted on display screen 390. Together, touch sensor 370B and display screen 390 form a touch screen, also known as a "touch screen." Touch sensor 370B is used to detect touch operations applied to or near it.

[0098] This concludes the introduction to the hardware structure of the electronic device 300. It is understood that Figure 3 The components included in the illustrated hardware structure do not constitute a specific limitation on the electronic device 300. The electronic device 300 may have more or fewer components than shown in the figure, may combine two or more components, or may have a different component configuration. Figure 3 The various components shown in the drawings may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application specific integrated circuits.

[0099] Furthermore, an operating system runs on top of the aforementioned components, such as the iOS operating system, the Android open-source operating system, the Windows operating system, and the Hongmeng operating system. Applications can be installed and run on these operating systems.

[0100] The operating system of the electronic device 300 can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. In the embodiment of the present application, the Android operating system with a layered architecture is used as an example to illustrate the operating system of the electronic device 300.

[0101] Figure 4 This is a block diagram of the software structure of the electronic device 300 according to an embodiment of the present application. A layered architecture divides software into several layers, each with distinct roles and responsibilities. Layers communicate with each other via software interfaces. In some embodiments, the Android system is divided from top to bottom into an application layer, a software development kit (UIKit), and an application framework layer.

[0102] The application layer can include a series of application packages. Figure 4 As shown, the application layer includes applications such as camera, gallery, calculator, map, and notes.

[0103] The application framework layer provides an application programming interface (API) and programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0104] like Figure 4 As shown in Figure 1, between the application layer and the application framework layer lies the Software Development Kit (UIKit), the core framework for building and managing application user interfaces. UIKit provides a rich set of interface elements, view controllers, controls, and related functional classes, enabling developers to efficiently create beautiful, smooth, and interactive user interfaces.

[0105] Among them, UIKit includes a layout container (CoordinatorLayout).

[0106] CoordinatorLayout allows dependencies between subviews, allowing one view to rely on the behavior of another. Electronic devices can use CoordinatorLayout to easily implement interactive effects between scrolling views and other views, such as hiding, showing, and sliding during scrolling. CoordinatorLayout supports custom animation effects and can define animations for dependent views during interactions such as scrolling and dragging. By coordinating the behavior of subviews, CoordinatorLayout reduces the amount of manually written code, making the layout more concise and reducing resource consumption.

[0107] CoordinatorLayout also handles the delivery of touch events, making interactions between subviews more natural. Custom behaviors can be created by implementing the CoordinatorLayout.Behavior interface to meet specific layout needs. CoordinatorLayout also supports nested scrolling and can handle scroll events for multiple scroll views, making the scrolling experience smoother.

[0108] like Figure 4 As shown, the application framework layer may include a view framework and a motion effect framework.

[0109] Among them, the view framework is used to provide a series of UI components, such as buttons (Button), text boxes (TextView), lists (ListView), etc., which can be used to build the user interface of the application. The view framework is also responsible for managing the layout of subviews, which defines the position and size of subviews. The view framework also supports user interaction and can handle touch events, keyboard events, etc. The view framework is also responsible for drawing UI components on the screen. When the UI needs to be updated, the view framework is responsible for marking the areas that need to be redrawn and redrawing them at the appropriate time to ensure the smoothness and efficiency of the UI. The view framework is also responsible for the three major processes of the view: measurement, layout, and drawing.

[0110] Motion frameworks are used to add smooth and engaging animations to user interfaces, significantly enhancing the user experience. These animations can make apps appear more lively and modern, while also helping users better understand the app's functionality and operational outcomes. Motion frameworks also allow developers to create complex animations and transitions that enhance the visual appeal of an app.

[0111] It should be understood that Figure 4 The software architecture diagram shown is only for illustrative purposes and should not be construed as limiting the embodiments of the present application. Figure 4 More or fewer layers may also include, for example, a kernel layer, a hardware layer, etc.

[0112] The above embodiment introduces the hardware structure and software architecture of the electronic device 300. The following introduces the overall process of the interface display method provided in the embodiment of the present application.

[0113] Please refer to Figure 5 , Figure 5 Schematic diagram of the overall process of the interface display method provided in the embodiment of the present application. The method can be applied to the electronic device mentioned in the above embodiment, and the method includes S51 to S53.

[0114] S51, the electronic device obtains initial layout parameters of the note application main interface, initial layout parameters of the search interface, and initial layout parameters of the keyboard bar.

[0115] It should be understood that the initial layout parameters of the main interface of the note application include the data shown in Table 1 below:

[0116] Table 1

[0117]

[0118] It should be understood that the initial layout parameters of the main interface, search interface and keyboard bar can refer to Figure 1(b) or Figure 2 In order to facilitate the above-mentioned initial layout parameters, this example combines the layout parameters shown in (b). Figure 1 The interface shown in (b) and Figure 6 Provides examples of initial layout parameters.

[0119] For example, please refer to Figure 6 , Figure 6 This is an example diagram of initial layout parameters provided in an embodiment of the present application.

[0120] Figure 6 The initial layout parameters of the main interface of the note application are displayed in the middle note layer. Among them, the rectangular area surrounded by A1a, A2a, A3a and A4a is the initial area of the title bar of the main interface. The coordinates of these four points can be considered as the position of the initial area. Usually, the coordinates refer to the coordinate system of the electronic device. For example, the coordinate system uses the upper left point of the display area of the electronic device's screen as the coordinate origin, the length direction as the positive direction of the X axis (for example, the direction from point A1a to point A2a), and the height direction as the positive direction of the Y axis (for example, the direction from point A1a to point A3a). The display area can refer to Figure 6 The display area shown is shown. Usually the coordinates are in pixels. For example, the coordinates of point A1a are (x, y), which means that point A1a is x pixels away from the origin on the X axis and y pixels away from the origin on the Y axis.

[0121] Figure 6 The coordinates of point A5a can be considered as the initial position of the title text, the coordinates of point A7a can be considered as the initial position of the search box, and the coordinates of points A6a and A8a can be considered as the initial positions of other interface elements.

[0122] It should also be understood that transparency is generally used to describe the opacity of an object or color. The value of transparency is generally between 0 and 1, where 0 represents complete transparency, i.e., the object or color is completely invisible and any content below it can be seen. 1 represents complete opacity, i.e., the object or color completely covers all content below it. In other embodiments, the value of transparency can also be expressed as a percentage, where 0% is equivalent to 0 (completely transparent) and 100% is equivalent to 1 (completely opaque). In other embodiments, transparency may be represented by an integer from 0 to 255, where 0 represents complete transparency and 255 represents complete opacity. Therefore, the initial transparency of the title bar of the main interface in Table 1 refers to the overall transparency of the title bar, including the background transparency of the title bar, the transparency of each interface element in the title bar, etc. The initial transparency can be a value greater than the minimum value within a preset numerical range. The preset transparency numerical range can be, for example, [0, 1]. Then the initial transparency of the title bar can be 1, 0.9, etc. The embodiment of the present application is illustrated with a transparency of 1. In other embodiments, the preset transparency numerical range can be, for example, [0%, 100%]. The initial transparency of the title bar can be 100%, 99%, etc., and this embodiment of the application uses a transparency of 100% for illustration. In other embodiments, the preset transparency value range can also be, for example, [0, 255]. The initial transparency of the title bar can be 255, 254, etc., and this embodiment of the application uses a transparency of 255 for illustration.

[0123] The initial transparency of the search box, the initial transparency of the title text, and the initial transparency of other interface elements in Table 1 are the same as the initial transparency of the entire title bar, and will not be repeated here.

[0124] The initial size of the title text in Table 1 is a preset value, and the unit of the initial size is pixel. For example, the initial size of the title text is 16 pixels.

[0125] Figure 6 The rectangular area enclosed by B1a, B2a, B3a, and B4a in the middle note layer is the initial area of the main interface's content area. The coordinates of these four points can be considered the location of the initial area. The initial transparency of the content area in Table 1 is the same as the initial transparency of the entire title bar, so we will not repeat it here.

[0126] It should also be understood that the initial layout parameters of the note application search interface include the data shown in Table 2 below:

[0127] Table 2

[0128]

[0129] Please refer to Figure 6 , Figure 6The middle search layer displays the initial layout parameters of the note application search interface. The rectangular area enclosed by C1a, C2a, C3a, and C4a is the initial area of the title bar of the search interface. The coordinates of these four points can be considered as the positions of the initial areas in Table 2.

[0130] The rectangular area enclosed by C6a, C7a, C8a and C9a is the initial area of the search box in the title bar of the search interface. The coordinates of these four points can be considered as the initial position of the search box in Table 2.

[0131] The initial positions of other interface elements in Table 2 can be, for example Figure 6 The location of the C5a point in the .

[0132] The initial transparency of the search interface title bar in Table 2 refers to the overall transparency of the title bar, including the background transparency of the title bar, the transparency of each interface element within the title bar, etc. The initial transparency of the search interface title bar can be a value within a preset numerical range that is greater than the minimum value and less than the initial transparency of the main interface title bar. For example, the initial transparency of the search interface title bar can be 0, 0%, etc. For the value of the preset numerical range, please refer to the above embodiment and will not be repeated here.

[0133] The initial transparency of the search box and other interface elements in Table 2 are the same as the initial transparency of the entire title bar, and will not be repeated here.

[0134] Figure 6 The rectangular area enclosed by D1a, D2a, D3a and D4a shown in the middle search layer is the initial area of the content area of the search interface. The coordinates of these four points can be considered as the positions of the initial area of the content area in Table 2.

[0135] The initial transparency of the content area in Table 2 is the same as the initial transparency of the entire title bar, and will not be repeated here.

[0136] It should also be understood that the initial layout parameters of the note application keyboard bar include the location of the initial area of the keyboard bar. Figure 6 , Figure 6 The middle keyboard layer displays the initial layout parameters of the note application keyboard bar, where the rectangular area enclosed by E1a, E2a, E3a, and E4a is the initial area of the keyboard bar. The coordinates of these four points can be considered as the position of the initial area of the keyboard bar. It should be understood that the position of the initial area of the keyboard bar is a preset value.

[0137] It should be noted that the initial layout parameters of the title bar shown in Table 1 and Table 2 above are preset layout parameters, and the initial position in the layout parameters of the content area needs to be determined based on the data of the note content filled in the main interface and search interface of the electronic device, and the initial transparency in the layout parameters of the content area is the preset transparency.

[0138] S52, the electronic device determines the changed layout parameters of the main interface, the changed layout parameters of the search interface and the changed layout parameters of the keyboard bar based on the initial layout parameters of the main interface, the initial layout parameters of the search interface and the initial layout parameters of the keyboard bar.

[0139] It should be understood that the changed layout parameters of the main interface, search interface and keyboard bar can refer to Figure 1 The layout parameters shown in (c) or (d) can also refer to Figure 2 The layout parameters shown in (c) or (d) in this example are combined with Figure 1 The interface shown in (d) and Figure 7 Provide examples to illustrate the changed layout parameters. Figure 7 This is an example diagram of changed layout parameters provided in an embodiment of the present application.

[0140] in, Figure 7 The changed layout parameters shown in FIG. 3 include the data in Table 3 below:

[0141] Table 3

[0142]

[0143]

[0144] It should be understood that in implementation, the electronic device determines the changed layout parameters of the main interface, the changed layout parameters of the search interface and the changed layout parameters of the keyboard bar based on the initial layout parameters of the main interface, the initial layout parameters of the search interface and the initial layout parameters of the keyboard bar at a preset frequency within the preset time length when the main interface changes to the search interface. Each time the changed layout parameters, the changed layout parameters of the search interface and the changed layout parameters of the keyboard bar are determined, an interface will be drawn and displayed once to achieve Figure 1 and Figure 2 The animation effect displayed. For example, if the preset duration is 1 second and the preset frequency can be the screen refresh rate, such as 60 times / s, then after the animation starts, the layout parameters after the change will be calculated 60 times within 1 second.

[0145] Figure 6 The data shown in Table 1 and Table 2 can be considered as the initial layout parameters. Figure 7The changed layout parameters shown in Table 3 can be considered as the last calculated layout parameters. The change pattern from the initial layout parameters to the last calculated layout parameters within the preset time period is:

[0146] The area of the title bar of the main interface gradually shrinks and moves upward until it shrinks to the area shown in Table 3 and moves upward to the area position shown in Table 3. The overall transparency of the title bar of the main interface gradually decreases until it is reduced to the transparency shown in Table 3. The position of the title bar of the main interface gradually moves upward until it moves to the position shown in Table 3. The size of the title text of the title bar of the main interface gradually shrinks until it is reduced to the size shown in Table 3. The transparency of the title text of the title bar of the main interface gradually decreases until it is reduced to the transparency shown in Table 3. The position of the search box in the title bar of the main interface does not change, but its transparency gradually decreases until it is reduced to the transparency shown in Table 3. The positions of other interface elements of the title bar of the main interface do not change, but their transparency gradually decreases until it is reduced to the transparency shown in Table 3. The area of the content area of the main interface gradually expands and gradually moves upward until it expands to the area shown in Table 3 and moves upward to the position shown in Table 3. The transparency of the content area of the main interface gradually decreases until it is reduced to the transparency shown in Table 3.

[0147] The area of the title bar of the search interface gradually shrinks and moves upward until it shrinks to the area shown in Table 3 and moves upward to the position shown in Table 3. The overall transparency of the title bar of the search interface gradually increases until it reaches the transparency shown in Table 3. The height of the search box of the title bar of the search interface remains unchanged, and the length gradually increases until it increases to the distance between C8b and C9b in the position of the search box shown in Table 3. The transparency of the search box of the title bar of the search interface gradually increases until it reaches the transparency shown in Table 3. The positions of other interface elements of the title bar of the search interface gradually move until they move to the position shown in Table 3. The transparency of other interface elements of the title bar of the search interface gradually increases until it reaches the transparency shown in Table 3. The area of the content area of the search interface gradually expands and gradually moves upward until it expands to the area shown in Table 3 and moves upward to the position shown in Table 3. The transparency of the content area of the search interface gradually increases until it reaches the transparency shown in Table 3.

[0148] The position of the keyboard bar gradually moves upward until it moves to the area position shown in Table 3.

[0149] It should be noted that for the specific implementation process of step S52, reference may be made to the following embodiments, which will not be described in detail here.

[0150] S53 , the electronic device draws and displays the page based on the changed layout parameters of the interface, the changed layout parameters of the search interface, the changed layout parameters of the keyboard bar, and the hierarchical relationship.

[0151] A page in an embodiment of the present application may include multiple layers. In an embodiment of the present application, a layer may also be referred to as a view. The multiple layers have a hierarchical relationship, which refers to the upper and lower layer relationships of the multiple layers when displayed. Generally, a layer in an upper layer will partially or completely obscure a layer in a lower layer when displayed.

[0152] The hierarchical relationship can be referred to Figure 6 The multiple layers include three types of layers: the keyboard bar layer, the note layer, and the search layer. The keyboard bar layer is the top layer, the note layer is below it, and the search layer is below it. The keyboard bar layer is used to draw and display the keyboard bar, the note layer is used to draw and display the main interface of the note application mentioned above, and the search layer is used to display the search interface of the note application mentioned above.

[0153] For example, the electronic device is based on the above Table 3 and Figure 6 The changed layout parameters and hierarchical relationships in the drawing and display pages can be referred to Figure 1 The interface 140 is shown in (d).

[0154] It should be noted that the contents of multiple layers can only be displayed on the screen when the contents of multiple layers are within the display area of the screen of the electronic device. For example: Figure 6 If the content of the keyboard bar in the middle keyboard layer is not located within the display area of the screen of the electronic device, the content of the keyboard bar will not be displayed on the screen.

[0155] The above embodiment introduces the overall process of the interface display method provided by the embodiment of the present application. In order to more clearly illustrate the solution provided by the embodiment of the present application, the following embodiment is combined with Figure 4 The software architecture shown is Figure 1 The implementation process of the interface display method provided in the embodiment of the present application is introduced in the illustrated scenario.

[0156] For example, please refer to Figure 8 , Figure 8 Schematic diagram of an interface display method provided by an embodiment of the present application. The method includes S81 to S825.

[0157] S81, the note application of the application layer receives user operation 1 and generates input event 1.

[0158] It should be understood that user operation 1 may refer to, for example, Figure 1 The operation of clicking the icon 111 in the interface 110 shown in (a) is shown.

[0159] In implementation, for example, after the user clicks control 111, the electronic device can trigger a hardware interrupt and generate an interrupt signal. The interrupt signal carries the click operation, and then the click operation in the interrupt signal is processed into an input event. The input event includes the event type, timestamp, etc. For example, the event type included in input event 1 is a click event.

[0160] S82, the note application inputs event 1 to the layout container in the software toolkit, and the event carries information such as event type.

[0161] S83, the layout container fills the note content into the content area 1 of page 1 and the content area 2 of page 2, and generates the initial layout parameters 1 of page 1 and the initial layout parameters 1 of page 2, wherein page 1 includes the title bar 1 and the content area 1, and page 2 includes the title bar 2 and the content area 2. Therefore, the initial layout parameters 1 of page 1 include the initial layout parameters 1 of the title bar 1 and the initial layout parameters 1 of the content area 1, and the initial layout parameters 1 of page 2 include the initial layout parameters 1 of the title bar 2 and the initial layout parameters 1 of the content area 2.

[0162] It should be understood that page 1 refers to the main interface of the note application mentioned above, and page 2 refers to the search page of the note application. As can be seen from the above embodiment, the initial position of the layout parameters of the content area needs to be determined according to the data of the note content filled in the main interface and search interface of the electronic device. For example, please refer to Figure 6 , assuming that the main interface of the content area is filled with ten notes, then the initial area of the content area is Figure 6 As shown, the initial area of the content area is Figure 6 The coordinates of the four vertices of the initial area are shown. Assuming that the main interface of the content area is filled with five notes, then the initial area of the content area is larger than Figure 6 The size of the area shown is smaller. The embodiment of the present application is described by taking ten notes as an example.

[0163] The initial layout parameters 1 of the title bar 1 and the content area 1 may refer to the data shown in Table 1 above, and the initial layout parameters 1 of the title bar 2 and the content area 2 may refer to the data shown in Table 2 above.

[0164] S84, the layout container sends the initial layout parameter 1 of the title bar 1, the initial layout parameter 1 of the content area 1, the initial layout parameter 1 of the title bar 2, the initial layout parameter 1 of the content area 2, and the initial layout parameter 1 of the keyboard bar to the view framework through the animation framework in the application framework layer.

[0165] It should be understood that the initial layout parameters 1 of the keyboard bar can refer to the above Figure 6 The layout parameters shown in the keyboard layer are not repeated here.

[0166] S85, the view framework draws and displays interface 1 based on the initial layout parameter 1 of title bar 1, the initial layout parameter 1 of content area 1, the initial layout parameter 1 of title bar 2, the initial layout parameter 1 of content area 2, the initial layout parameter 1 of keyboard bar and the hierarchical relationship.

[0167] For example, the hierarchical relationship can refer to Figure 6 and Figure 7 , drawing and displaying interface 1 can refer to Figure 1 The interface 120 is shown in (b).

[0168] S86, the note application receives user operation 2 and generates input event 2.

[0169] It should be understood that user operation 2 may refer to, for example, the user Figure 1 (b) shows the operation of clicking the control 1213 in the interface 120.

[0170] In implementation, for example, after the user clicks control 1213, the electronic device can trigger a hardware interrupt and generate an interrupt signal. The interrupt signal carries the click operation, and then the click operation in the interrupt signal is processed into an input event. The input event includes the event type, timestamp, etc. For example, the event type included in input event 2 is a click event, and the clicked control is control 1213.

[0171] S87, the note application sends input event 2 to the animation framework in the application framework layer. The event carries information such as the event type.

[0172] The animation framework performs the operation in step S88 to modify some of the layout parameters in the initial layout parameters 1 of the keyboard bar, thereby obtaining modified layout parameters 2 of the keyboard bar. It should be noted that this embodiment of the present application only modifies the position of the initial layout parameters 1 of the keyboard bar, and does not modify other layout parameters such as the transparency and color of the keyboard bar.

[0173] S88, the animation framework changes the position of the keyboard bar.

[0174] For example, the animation framework may determine the changed position of the keyboard bar based on the following formula 1:

[0175]

[0176] Among them, the initial position of the keyboard bar is the preset position, the final position of the keyboard bar is the preset position, the preset duration refers to the preset duration for the main interface mentioned above to change to the search interface, and the current duration is equal to the current number multiplied by the inverse of the preset frequency.

[0177] For example, the initial position of the keyboard bar can be Figure 6The coordinates of the four points E1a, E2a, E3a, and E4a are shown. The final position of the keyboard bar can be referred to as Figure 7 The coordinates of the four points E1b, E2b, E3b, and E4b are shown. Since the keyboard bar is composed of Figure 6 The initial position shown changes to Figure 7 The final position shown is moved upward along the Y-axis. Therefore, when changing the position of the keyboard bar, only the vertical coordinates of the above four points can be changed, and the horizontal coordinates remain unchanged. In other words, the animation framework can substitute only the vertical coordinates of the four vertices of the keyboard bar area into the above formula to calculate the position of the changed keyboard bar. In other embodiments, only the horizontal coordinates of the above four points can be changed, and the vertical coordinates remain unchanged. This embodiment of the application is not limited to this.

[0178] For example, the preset duration is 1s, the preset frequency is 60 times / s, and if the animation framework currently starts calculating the position of the keyboard bar after the 30th change, then the current duration is

[0179] S89, the animation framework sends layout parameter 2 of the keyboard bar to the view framework.

[0180] The animation framework performs operations S810 to S812 to modify some of the layout parameters in the initial layout parameters 1 of the title bar 1, thereby obtaining modified layout parameters 2 of the title bar 1. It should be noted that in this embodiment of the present application, only the transparency, title text size, and position of the title bar 1 in the initial layout parameters 1 of the title bar 1 are modified, and other layout parameters in the layout parameters 1 of the title bar 1 are not modified.

[0181] S810, the animation framework changes the transparency of title bar 1.

[0182] It should be understood that the transparency of the title bar 1 refers to the overall transparency of the title bar. After changing the transparency of the title bar 1, the transparency of the title text in the title bar 1, the transparency of the search box, and the transparency of other interface elements will also change accordingly.

[0183] The animation framework can determine the transparency of the title bar 1 after the change based on the following formula 2:

[0184]

[0185] The initial transparency of the title bar 1 is a preset value, such as the transparency of 1 mentioned in the above embodiment, and the final transparency of the title bar 1 is also a preset value, such as the transparency of 0 mentioned in the above embodiment. For the duration of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0186] S811, the animation framework changes the size and position of the title text of title bar 1.

[0187] It should be understood that, illustratively, the motion effect framework may determine the position of the title text of the changed title bar 1 based on the following formula 3:

[0188]

[0189] Among them, the initial position of the title text is the preset value, such as Figure 6 The coordinates of point A5a are shown, and the final position of the title text is also the preset value, such as Figure 7 The coordinates of point A5b are shown. For the duration of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0190] For example, the animation framework may determine the size of the title text of the changed title bar 1 based on the following formula 4:

[0191]

[0192] Among them, the initial position of the title text is the preset value, such as Figure 6 The size of the title text in the note layer is shown. The final size of the title text is also the preset value, such as Figure 7 The size of the title text in the note layer is shown. For the length of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0193] S812, the animation framework changes the position of title bar 1.

[0194] For example, the animation framework may determine the changed position of the title bar 1 based on the following formula 5:

[0195]

[0196] The initial position and final position of the title bar 1 are both preset values. For example, the initial position of the title bar 1 can be Figure 6 The coordinates of the four points A1a, A2a, A3a, and A4a are shown. The final position of the title bar 1 can be referred to as Figure 7 The coordinates of the four points A1b, A2b, A3b, and A4b are shown. Since the title bar 1 is composed of Figure 6 The initial position shown changes to Figure 7 The final position shown is an upward movement along the Y-axis, with the upper boundary of Title Bar 1 remaining unchanged and only the lower boundary moving. When changing the position of Title Bar 1, only the vertical coordinates of the two vertices at the lower boundary can be changed, while the horizontal coordinate remains unchanged. In other words, the animation framework can substitute only the vertical coordinates of the two vertices at the lower boundary of Title Bar 1 (e.g., A3a and A4a) into the above formula to calculate the changed position of Title Bar 1.

[0197] S813, the animation framework sends the layout parameter 2 of the title bar 1 to the view framework.

[0198] The animation framework performs operations S814 to S815 to modify some of the initial layout parameters 1 of content area 1, thereby obtaining modified layout parameters 2 of content area 1. It should be understood that in this embodiment of the present application, only the layout parameters mentioned in S814 to S815 are modified, and other layout parameters are not modified.

[0199] S814, the animation framework changes the transparency of content area 1.

[0200] For example, the motion effect framework may determine the transparency of the content area 1 after the change based on the following formula 6:

[0201]

[0202] The initial transparency of content area 1 is a preset value, such as the transparency of 1 mentioned in the above embodiment, and the final transparency of content area 1 is also a preset value, such as the transparency of 0 mentioned in the above embodiment. For explanations of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0203] S815, the motion effect framework changes the position of content area 1.

[0204] For example, the motion effect framework may determine the changed position of the content area 1 based on the following formula 7:

[0205]

[0206] The initial position of the content area 1 is the preset position, and the final position of the content area 1 is the preset position. For explanations of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0207] For example, the initial position of content area 1 can be Figure 6 The coordinates of the four points B1a, B2a, B3a, and B4a are shown. The final position of the content area 1 can be referred to as Figure 7 The coordinates of the four points B1b, B2b, B3b, and B4b are shown. Since the content area 1 is composed of Figure 6 The initial position shown changes to Figure 7 The final position shown is moved upward along the Y-axis. Therefore, when changing the position of content area 1, only the vertical coordinates of the above four points can be changed, and the horizontal coordinates remain unchanged. In other words, the animation framework can substitute only the vertical coordinates of the four vertices of content area 1 into the above formula to calculate the changed position of content area 1. In other embodiments, only the horizontal coordinates of the above four points can be changed, while the vertical coordinates remain unchanged. This embodiment of the application is not limited to this.

[0208] S816: The animation framework sends layout parameter 2 of content area 1 to the view framework.

[0209] The animation framework changes some parameters in the initial layout parameter 1 of the title bar 2 by executing the operations from S817 to S820, thereby obtaining the changed layout parameter 2 of the title bar 2. In the embodiment of the present application, only the layout parameters mentioned in S817 to S820 are changed, and other layout parameters are not changed.

[0210] S817, the animation framework changes the transparency of title bar 2.

[0211] It should be understood that the transparency of the title bar 2 refers to the overall transparency of the title bar. After changing the transparency of the title bar 2, the transparency of the title text in the title bar 2, the transparency of the search box, and the transparency of other interface elements will also change accordingly.

[0212] The animation framework can determine the transparency of the title bar 2 after the change based on the following formula 8:

[0213]

[0214] The initial transparency of the title bar 2 is a preset value, such as the transparency of 0 mentioned in the above embodiment, and the final transparency of the title bar 2 is also a preset value, such as the transparency of 1 mentioned in the above embodiment. For the duration of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0215] S818, the dynamic effect framework changes the position of the search box in the title bar 2.

[0216] It should be understood that, illustratively, the motion effect framework may determine the changed position of the search box in the title bar 2 based on the following formula 9:

[0217]

[0218] Among them, the initial position and final position of the search box in the title bar 2 are both preset values. For example, the initial position of the search box in the title bar 2 can be Figure 6 The coordinates of the four points C6a, C7a, C8a, and C9a are shown. The final position of the search box in the title bar 2 can refer to Figure 7 The coordinates of the four points C6b, C7b, C8b, and C9b are shown. Since the search box in the title bar 2 is Figure 6 The initial position shown changes to Figure 7The final position shown is moved upward along the X-axis, and the right boundary of the search box in title bar 2 remains unchanged, while only the left boundary moves. When changing the position of the search box in title bar 2, only the horizontal coordinates of the two vertices of the left boundary can be changed, while the vertical coordinate remains unchanged. In other words, the animation framework can substitute only the horizontal coordinates of the two vertices (such as C6a and C8a) of the left boundary of the search box area in title bar 2 into the above formula to calculate the changed position of the search box in title bar 2.

[0219] S819, the animation framework changes the position of the "return" control 1.

[0220] It should be understood that, illustratively, the motion effect framework may determine the changed position of the control 1 within the title bar 2 based on the following formula 10:

[0221]

[0222] Among them, control 1 refers to Figure 1 In the control 1431 shown in the interface 140, the initial position of the control 1 in the title bar 2 is the preset value, such as Figure 6 The coordinates of C5a shown in FIG, the final position of the control 1 in the title bar 2 is the preset value, such as Figure 7 The coordinates of C5b are shown in .

[0223] S820, the animation framework changes the position of title bar 2.

[0224] It should be understood that, illustratively, the motion effect framework may determine the changed position of the title bar 2 based on the following formula 11:

[0225]

[0226] The initial position and final position of the title bar 2 are both preset values. For example, the initial position of the title bar 2 can be Figure 6 The coordinates of the four points C1a, C2a, C3a, and C4a are shown. The final position of the title bar 2 can be referred to as Figure 7 The coordinates of the four points C1b, C2b, C3b, and C4b are shown. Since the title bar 2 is composed of Figure 6 The initial position shown changes to Figure 7 The final position shown is an upward movement along the Y-axis, with the upper boundary of Title Bar 2 remaining unchanged and only the lower boundary moving. When changing the position of Title Bar 2, only the vertical coordinates of the two vertices at the lower boundary can be changed, while the horizontal coordinates remain unchanged. In other words, the animation framework can substitute only the vertical coordinates of the two vertices at the lower boundary of Title Bar 2 (e.g., C3a and C4a) into the above formula to calculate the changed position of Title Bar 2.

[0227] S821, the animation framework sends layout parameter 2 of title bar 2 to the view framework.

[0228] The animation framework performs operations S822 to S823 to modify some parameters of the initial layout parameters 1 of content area 2, thereby obtaining modified layout parameters 2 of content area 2. It should be noted that this embodiment of the application only modifies the layout parameters mentioned in S822 to S823, and does not modify other layout parameters.

[0229] S822, the animation framework changes the transparency of content area 2.

[0230] For example, the motion effect framework may determine the transparency of the content area 2 after the change based on the following formula 12:

[0231]

[0232] The initial transparency of content area 2 is a preset value, such as the transparency of 0 mentioned in the above embodiment, and the final transparency of content area 2 is also a preset value, such as the transparency of 1 mentioned in the above embodiment. For the duration of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0233] S823, the motion effect framework changes the position of content area 2.

[0234] For example, the motion effect framework may determine the changed position of the content area 2 based on the following formula 13:

[0235]

[0236] The initial position of the content area 2 is the preset position, and the final position of the content area 2 is the preset position. For explanations of the preset duration and the current duration, please refer to the above embodiment and will not be repeated here.

[0237] For example, the initial position of content area 2 may be Figure 6 The coordinates of the four points D1a, D2a, D3a, and D4a are shown. The final position of the content area 2 can be referred to as Figure 7 The coordinates of the four points D1b, D2b, D3b, and D4b are shown. Since the content area 2 is composed of Figure 6 The initial position shown changes to Figure 7 The final position shown is moved upward along the Y-axis. Therefore, when changing the position of content area 2, only the vertical coordinates of the above four points can be changed, while the horizontal coordinates remain unchanged. In other words, the animation framework can substitute only the vertical coordinates of the four vertices of content area 2 into the above formula to calculate the changed position of content area 2. In other embodiments, only the horizontal coordinates of the above four points can be changed, while the vertical coordinates remain unchanged. This embodiment of the application is not limited to this.

[0238] S824: The animation framework sends layout parameter 2 of content area 2 to the view framework.

[0239] S825, the view framework draws and displays interface 2 based on layout parameter 2 of title bar 1, layout parameter 2 of content area 1, layout parameter 2 of title bar 2, layout parameter 2 of content area 2, layout parameter 2 of keyboard bar and the hierarchical relationship.

[0240] For example, the layout parameters 2 drawn on multiple layers can refer to Figure 7 , interface 2 can refer to Figure 1 Interface 130 and interface 140 are shown.

[0241] The above embodiment introduces Figure 1 The following examples illustrate the implementation process of the interface display method provided by the embodiment of the present application in the scenario shown. Figure 2 The implementation process of the interface display method provided in the embodiment of the present application in the scenario shown.

[0242] For example, please refer to Figure 9 , Figure 9 Schematic diagram of another interface display method provided by an embodiment of the present application. The method includes S91 to S923. It should be noted that Figure 9 The implementation of the relevant steps in can refer to Figure 8 , Figure 9 I will not go into details here.

[0243] S91, the note application of the application layer receives user operation 3 and generates input event 3.

[0244] It should be understood that user operation 3 may refer to, for example, Figure 2 In the interface 210 shown in (a), an upward sliding operation is performed. The event type included in the input event 3 is a sliding event.

[0245] S92, the note application inputs event 3 to the animation framework, and the event carries information such as the event type.

[0246] S93, the animation framework maintains the initial layout parameter 1 of page 2 and the keyboard bar unchanged.

[0247] S94, the animation framework changes the initial layout parameter 1 of page 1 based on the page sliding distance to obtain the initial layout parameter 1 of page 3, wherein page 3 includes title bar 3 and content area 3.

[0248] It should be understood that page 3 can refer to Figure 2 The interface 220 is shown in (b).

[0249] It should also be understood that compared with layout parameter 1 of page 1, the initial layout parameter 1 of page 3 has changed the position of the initial area of the title bar, the initial size and initial position of the title text, and the position of the initial area of the content area, while the other layout parameters have not changed.

[0250] In implementation, the position of the initial area of the title bar of page 3, the initial size of the title text, and the initial position can be preset positions, or can be generated based on the position of the initial area of the title bar of page 1, the initial size of the title text, and the initial position, and this embodiment of the present application does not limit this. The position of the initial area of the content area of page 3 can be preset positions, or can be generated based on the position of the initial area of the content area of page 1, and this embodiment of the present application does not limit this.

[0251] S95 , the motion effect framework sends the initial layout parameter 1 of the title bar 3 and the initial layout parameter 1 of the content area 3 to the view framework.

[0252] S96, the view framework draws and displays interface 1 based on the initial layout parameters 1 of the title bar 3, the initial layout parameters 1 of the content area 3, the initial layout parameters 1 of the title bar 2, the initial layout parameters 1 of the content area 2, the initial layout parameters 1 of the keyboard bar and the hierarchical relationship.

[0253] S97, the note application receives user operation 4 and generates input event 4.

[0254] User operation 4 may refer to the user Figure 2 The operation of clicking the control 2213 in the illustrated interface 220. The input event 4 includes an event type, for example, the event type is a click type.

[0255] S98, the note application sends input event 4 to the motion effect framework in the application framework layer. The event carries information such as the event type.

[0256] The motion effect framework changes some layout parameters in the initial layout parameter 1 of the keyboard bar by executing the operation of S99, thereby obtaining the changed layout parameter 2 of the keyboard bar.

[0257] S99, the animation framework changes the position of the keyboard bar.

[0258] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0259] S910: The animation framework sends layout parameter 2 of the keyboard bar to the view framework.

[0260] The motion effect framework changes some layout parameters in the initial layout parameter 1 of the title bar 3 by executing the operation of S911 , thereby obtaining the changed layout parameter 2 of the title bar 3 .

[0261] S911, the animation framework changes the transparency of title bar 3.

[0262] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0263] S912, the animation framework sends the layout parameter 2 of the title bar 3 to the view framework.

[0264] The motion effect framework changes some of the initial layout parameters 1 of the content area 3 by executing the operation of S913 , thereby obtaining the changed layout parameters 2 of the content area 3 .

[0265] S913, the animation framework changes the transparency of content area 3.

[0266] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0267] S914: The animation framework sends layout parameter 2 of content area 3 to the view framework.

[0268] The motion effect framework changes some parameters in the initial layout parameter 1 of the title bar 2 by executing the operations from S915 to S918 , thereby obtaining the changed layout parameter 2 of the title bar 2 .

[0269] S915, the animation framework changes the transparency of title bar 2.

[0270] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0271] S916, the animation framework changes the position of the search box in title bar 2.

[0272] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0273] S917, the animation framework changes the position of the "Return" control 1.

[0274] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0275] S918, the animation framework changes the position of title bar 2.

[0276] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0277] S919, the animation framework sends layout parameter 2 of title bar 2 to the view framework.

[0278] The motion effect framework changes some parameters of the initial layout parameter 1 of the content area 2 by executing the operations from S920 to S921 , thereby obtaining the changed layout parameter 2 of the content area 2 .

[0279] S920, the animation framework changes the transparency of content area 2.

[0280] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0281] S921, the motion effect framework changes the position of content area 2.

[0282] For the implementation of this step, please refer to the above embodiment and will not be repeated here.

[0283] S922: The animation framework sends layout parameter 2 of content area 2 to the view framework.

[0284] S923, the view framework draws and displays interface 4 based on layout parameter 2 of title bar 3, layout parameter 2 of content area 3, layout parameter 2 of title bar 2, layout parameter 2 of content area 2, layout parameter 2 of keyboard bar and hierarchical relationship.

[0285] For example, interface 4 can refer to the above embodiment. Figure 2 Interface 230 and interface 240 are shown.

[0286] The following section summarizes the above embodiments.

[0287] An interface display method provided by an embodiment of the present application can be Figure 3 The electronic device shown here may also be executed by a processor or chip in the electronic device, and the present application does not impose any limitation thereto. For ease of description, the method is described in detail by taking the method executed by the electronic device as an example. The method includes:

[0288] The electronic device displays a first interface of a note-taking application, wherein a navigation bar is displayed in the first interface, and a first search box is displayed in the navigation bar; in response to an operation on the first search box, a second interface is displayed, wherein a second search box is displayed in the navigation bar of the second interface, and the length of the second search box is expanded from an initial length in the navigation bar to a first length of the second search box displayed on the second interface, and the first length is greater than the length of the first search box.

[0289] It should be understood that a note application may refer to an application for storing notes on an electronic device, for example, a note application may be Figure 1 The application 111 shown in (a) in FIG. 1 may be a memo application or the like in other embodiments.

[0290] The first interface refers to the main interface of the note application mentioned in the above embodiment. For example, the first interface can refer to Figure 1In interface 120 shown in (b), the navigation bar may include controls 1212, 1213, and 1214 shown in interface 120. The navigation bar is located at the top of the first interface and its position in the first interface is fixed. The first search box refers to the search box in the main interface, such as control 1213 in interface 120.

[0291] The first interface can also refer to Figure 2 In the interface 220 shown in (b), the navigation bar may include controls 2212, 2213, and 2214 shown in the interface 220. The navigation bar is located at the top of the first interface and its position in the first interface is fixed. The first search box refers to control 2213 in the interface 220.

[0292] It should be understood that the operation on the first search box can be understood as the operation of the user clicking the control 1213 in the interface 120.

[0293] The second interface may refer to the search interface of the note application mentioned in the above embodiment, such as Figure 1 The interface 140 shown in (d) and Figure 2 Interface 240 shown in (d) of FIG. 140 and interface 240 are the same interface. The navigation bar in the second interface may include controls 1431 and 1432 in interface 140. The navigation bar is located at the top of the second interface. The position of the navigation bar in the second interface is the same as the position of the navigation bar in the first interface within the screen display area of the electronic device. The second search box refers to the search box in the search interface. For example, the second search box may be control 1431 in interface 140.

[0294] It should also be understood that the first length of the second search box is the length of the search box in the second interface. As can be seen from interfaces 140 and 120, the first length of the second search box is greater than the length of the first search box.

[0295] It can also be understood that, from the above embodiments, reference Figure 1 After the user clicks the control 1213 in the interface 120, the main interface 120 gradually disappears and the search interface 140 gradually appears. In the process of the search interface 140 gradually appearing, the length of the second search box gradually expands, and the height remains unchanged until it expands to the length of the second search box shown in the interface 140. For the explanation of the length and height, please refer to the above embodiment.

[0296] In the relevant scheme, when the note application changes from the main interface to the search interface, the search box moves from one position in the main interface to another position in the search interface, for example, from a position outside the navigation bar to a position within the navigation. From the user's visual point of view, the interface change is not smooth and there is a freeze, which affects the user experience.

[0297] In an embodiment of the present application, a navigation bar is displayed in the first interface (which can be considered as the main interface), and a first search box is displayed in the navigation bar. Since the second search box can change in length in the navigation bar in response to an operation on the first search box (in this case, the note application changes the main interface to the search interface), the second search box can be expanded from the initial length to the first length, and then the second search box is displayed in the second interface (which can be considered as the search interface). The first length of the second search box displayed in the second interface is greater than the length of the first search box. Therefore, in an embodiment of the present application, the operation of changing the length of the search box in the navigation bar can be used to realize the change from the main interface to the search interface, without the need to move the search box from a position outside the navigation bar to a position within the navigation to realize the change from the main interface to the search interface. This can reduce the probability of a freeze phenomenon when the interface changes due to the displacement of the search box, and can make the main interface change smoothly to the search interface, thereby improving the user experience.

[0298] In some embodiments, the first interface further displays a first title bar, the first title bar includes a navigation bar, and the transparency of the first title bar is a first transparency; the second interface further displays a second title bar, the second title bar includes a navigation bar, and the transparency of the second title bar is the first transparency; and the method further includes:

[0299] When the electronic device changes from the first interface to the second interface, the transparency of the first title bar gradually decreases from the first transparency to the second transparency, and the transparency of the second title bar gradually increases from the second transparency to the first transparency.

[0300] It should be understood that the first title bar refers to the title bar in the main interface, such as title bar 121 in interface 120, and title bar 221 in interface 220. As can be seen from interface 120, title bar 121 includes a navigation bar (for example, the navigation bar includes controls 1212, 1213, and 1214).

[0301] The first transparency of the first title bar refers to the initial transparency of the title bar of the main interface. For the explanation of the initial transparency of the title bar of the main interface, please refer to the above embodiment and will not be repeated here. For example, the first transparency is transparency 1 shown in Table 1.

[0302] The second transparency of the first title bar refers to the changed transparency of the title bar of the main interface. For the explanation of the changed transparency of the title bar of the main interface, please refer to the above embodiment and will not be repeated here. For example, the second transparency is the changed transparency of the title bar of the main interface shown in Table 3, and the value is 0.

[0303] The second title bar refers to the title bar in the search interface, such as title bar 143 in interface 140 , where title bar 143 includes a navigation bar (eg, the navigation bar includes controls 1431 and 1432 ).

[0304] The first transparency of the second title bar refers to the initial transparency of the search interface. For an explanation of the initial transparency of the search interface, please refer to the above embodiment. For example, the first transparency of the second title bar may be the transparency 0 shown in Table 2.

[0305] The second transparency of the second title bar refers to the transparency of the search interface after the change. For the explanation of the transparency of the search interface after the change, please refer to the above embodiment. For example, the second transparency of the second title bar may refer to the transparency of the title bar of the search interface shown in Table 3, which has a value of 1.

[0306] It should also be understood that in the process of the note application changing from the first interface to the second interface, the transparency of the first interface gradually decreases, for example, the transparency of the first interface changes from 1 to 0.5, and from 0.5 to 0, and the transparency of the second interface gradually increases, for example, the transparency of the second interface changes from 0 to 0.5, and from 0.5 to 1.

[0307] In an embodiment of the present application, during the process of the electronic device changing from the first interface to the second interface, the transparency of the first title bar gradually decreases from the first transparency to the second transparency, and the transparency of the second title bar gradually increases from the second transparency to the first transparency, so that the first title bar can change smoothly to the second title bar.

[0308] In addition, in the related scheme, the search box is located below the navigation bar, while the search box in the embodiment of the present application is located within the navigation bar. Since the size of the screen display area is certain, when the search box is located below the navigation bar, the search box will occupy a certain display area, while the search box in the embodiment of the present application is located within the navigation bar, and the search box does not occupy the display area. Therefore, more note content can be displayed in the display area of the screen.

[0309] In some embodiments, the size of the first title bar in the first interface is a first initial title size; and the method further includes:

[0310] When the electronic device changes from the first interface to the second interface, the size of the first title bar gradually decreases from the first initial title size to the first target title size.

[0311] For example, the first initial title size may be Figure 6 The size of the area enclosed by the four points A1a, A2a, A3a, and A4a in the note layer shown. The first target title size can be Figure 7 The size of the area enclosed by the four points A1b, A2b, A3b, and A4b in the note layer shown is given by Figure 6 and Figure 7 It can be seen that the size of the area enclosed by the four points A1a, A2a, A3a and A4a is larger than the size of the area enclosed by the four points A1b, A2b, A3b and A4b.

[0312] It should also be understood that Figure 6 The first initial title size shown can be considered as the initial size of the first title bar. Figure 7 The first target size shown can be considered the final size of the first title bar after the first interface changes to the second interface. During the process of changing from the first interface to the second interface, the size of the first title bar gradually decreases from the initial size to the final size. The implementation of this process can be referred to the above embodiment and will not be repeated here.

[0313] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the size of the first title bar gradually decreases from the first initial title size to the first target title size, so that the first title bar can change smoothly.

[0314] In some embodiments, the first title bar further includes title text, the title text has a first text size in the first interface, and the title text is positioned in the first title bar at a first position; and the method further includes:

[0315] During the process of changing from the first interface to the second interface, the text size of the title text in the first title bar is gradually reduced from the first text size to the second text size, and the position of the title text is moved from the first position to the second position.

[0316] It should be understood that the first text size can refer to the initial size of the title text in the title bar of the main interface shown in Table 1, for example, the first text size is 16 pixels, and the first position can refer to the initial position of the title text in the title bar of the main interface shown in Table 1, for example, the first position can be Figure 6 The coordinates of A5a are shown.

[0317] The second text size can refer to the size of the title text after the change in the title bar of the main interface shown in Table 3, for example, the second text size is 5 pixels, and the second position can refer to the position of the title text after the change in the title bar of the main interface shown in Table 3, for example: the second position Figure 7 The coordinates of A5b are shown.

[0318] It should also be understood that during the transition from the first interface to the second interface, the size of the title text in the first title bar gradually decreases from the first size to the second size. For example, the size of the title text decreases from 16 pixels to 10 pixels, and finally to 5 pixels. The position of the title text moves from the first position to the second position. For example, the position of the title text gradually moves from the coordinates of A5a to the coordinates of A5b. The implementation of this process can be referred to the above embodiment and will not be repeated here.

[0319] In an embodiment of the present application, during the process of changing from the first interface to the second interface, the text size of the title text in the first title bar gradually decreases from the first text size to the second text size, and the position of the title text moves from the first position to the second position, so that the title text can change smoothly.

[0320] In some embodiments, the size of the second title bar in the second interface is the second target title size; and the method further includes:

[0321] During the process of changing from the first interface to the second interface, the size of the second title bar is gradually reduced from the second initial title size to the second target title size.

[0322] For example, the second initial title size can refer to Figure 6 The size of the area enclosed by the four points C1a, C2a, C3a and C4a in the search layer shown. The size of the second target title can be referred to Figure 7 The size of the area enclosed by the four points C1b, C2b, C3b and C4b in the search layer shown is given by Figure 6 and Figure 7 It can be seen that the size of the area enclosed by the four points C1a, C2a, C3a and C4a is larger than the size of the area enclosed by the four points C1b, C2b, C3b and C4b.

[0323] It should also be understood that Figure 6 The second initial title size shown can be considered as the initial size of the second title bar. Figure 7 The second target size shown can be considered the final size of the second title bar after the second interface changes to the second interface. During the process of changing from the second interface to the second interface, the size of the second title bar gradually decreases from the initial size to the final size. The implementation of this process can be referred to the above embodiment and will not be repeated here.

[0324] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the size of the second title bar gradually decreases from the second initial title size to the second target title size, so that the second title bar can change smoothly.

[0325] In some embodiments, the second title bar further includes a first interface element, and the first interface element is located at a third position within the second title bar in the second interface; and the method further includes:

[0326] During the process of changing from the first interface to the second interface, the position of the first interface element in the second title bar gradually moves from the fourth position to the third position.

[0327] It should be understood that the first interface element may refer to an interface element outside the second search box in the second title bar, such as Figure 1 The control 1331 shown in the interface 130, and the magnifying glass icon and text in the second search box. Figure 1 The control 1431 shown in the interface 140, and the magnifying glass icon and text in the second search box, etc.

[0328] The fourth position of the first interface element refers to the initial position of the first interface element during the process of changing from the first interface to the second interface, for example: Figure 6 The coordinates of C5a are shown in the search layer, along with the magnifying glass icon and text.

[0329] The third position of the first interface element refers to the final position of the first interface element in the process of changing from the first interface to the second interface, for example: Figure 7 The coordinates of C5b, as well as the magnifying glass icon and text positions are shown in the search layer.

[0330] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the position of the first interface element in the second title bar gradually moves from the fourth position to the third position, so that the first interface element can change smoothly.

[0331] In some embodiments, the first interface further displays a first content area, the first content area is located below the navigation bar, and the transparency of the first content area is a first transparency; the second interface further displays a second content area, the second content area is located below the navigation bar, and the transparency of the second content area is the first transparency; and the method further includes:

[0332] During the process of changing from the first interface to the second interface, the transparency of the first content area gradually decreases from the first transparency to the second transparency, and the transparency of the second content area gradually increases from the second transparency to the first transparency.

[0333] The first content area can refer to Figure 1The content area 122 shown in the interface 120 is located below the first title bar 121. The first title bar 121 includes a navigation bar (refer to the above explanation of the navigation bar). Therefore, the first content area is located below the navigation bar. The first transparency of the first content area can be considered as the initial transparency of the content area of the main interface, such as the transparency 1 shown in Table 1. The second transparency of the first content area can be considered as the final transparency of the content area of the main interface, such as the changed transparency of the content area of the main interface shown in Table 3, which can be 1.

[0334] The second content area can refer to Figure 1 The interface 140 shows a content area 145, which is located below the second title bar 143. The second title bar 143 includes a navigation bar (refer to the above explanation of the navigation bar), so the second content area is located below the navigation bar. The first transparency of the first content area can be considered as the final transparency of the content area of the search interface, such as the changed transparency of the content area of the search interface shown in Table 3, which can be 1. The second transparency of the first content area can be considered as the initial transparency of the content area of the search interface, such as the initial transparency of the content area of the search interface shown in Table 2 is 0.

[0335] It should be understood that during the transition from the first interface to the second interface, the transparency of the first content area gradually decreases from the first transparency to the second transparency, for example, the transparency of the first content area decreases from 1 to 0.5 and finally to 0. The transparency of the second content area gradually increases from the second transparency to the first transparency, for example, the transparency of the second content area increases from 0 to 0.5 and finally to 1.

[0336] In an embodiment of the present application, during the process of changing from the first interface to the second interface, the transparency of the first content area gradually decreases from the first transparency to the second transparency, and the transparency of the second content area gradually increases from the second transparency to the first transparency, so that the content area of the first interface can be smoothly changed to the content area of the second interface.

[0337] In some embodiments, the size of the first content area in the first interface is a first initial content size; and the method further includes:

[0338] During the process of changing from the first interface to the second interface, the size of the first content area is gradually reduced from the first initial content size to the first target content size.

[0339] It should be understood that the first initial content size can refer to Figure 6 The size of the area consisting of B1a, B2a, and the two vertices of the lower boundary of the display area shown in the note layer. The first target content size can be referred to Figure 7The note layer in the figure shows the size of the area consisting of B1b, B2b, and the two vertices at the bottom edge of the display area.

[0340] It should also be understood that Figure 6 The first initial content size shown can be considered as the initial size of the first content area. Figure 7 The first target content size shown can be considered the final size of the first content area after the first interface changes to the second interface. During the process of changing from the first interface to the second interface, the size of the first content area gradually decreases from the initial size to the final size. The implementation of this process can be referred to the above embodiment and will not be repeated here.

[0341] In an embodiment of the present application, when the electronic device changes from the first interface to the second interface, the size of the first content area is gradually reduced from the first initial content size to the first target content size, so that the first content area can change smoothly.

[0342] In some embodiments, the size of the second content area in the second interface is the second target content size; and the method further includes:

[0343] During the process of changing from the first interface to the second interface, the size of the second content area is gradually reduced from the second initial content size to the second target content size.

[0344] It should be understood that the second initial content size can refer to Figure 6 The size of the area consisting of D1a, D2a and the two vertices of the lower boundary of the display area shown in the note layer. The second target content size can be referred to Figure 7 The note layer in the figure shows the size of the area consisting of D1a, D2a, and the two vertices at the bottom edge of the display area.

[0345] It should also be understood that Figure 6 The second initial content size shown can be considered as the initial size of the second content area. Figure 7 The second target content size shown can be considered the final size of the second content area after the second interface changes to the second interface. During the process of changing from the second interface to the second interface, the size of the second content area gradually decreases from the initial size to the final size. The implementation of this process can be referred to the above embodiment and will not be repeated here.

[0346] In the embodiment of the present application, during the process of changing from the first interface to the second interface, the size of the second content area is gradually reduced from the second initial content size to the second target content size, so that the first content area can change smoothly.

[0347] In some embodiments, the second interface further displays a keyboard bar, the keyboard bar is located below the navigation bar, and the size of the keyboard bar in the second interface is a fifth position; and the method further includes:

[0348] During the process of changing from the first interface to the second interface, the position of the keyboard bar gradually moves from the sixth position to the fifth position.

[0349] For example, the keyboard bar can refer to Figure 1 The interface 140 is shown with a keyboard bar 144 .

[0350] The sixth position of the keyboard bar can be considered as the initial position in the process of changing from the first interface to the second interface. The initial position can be referred to Figure 6 The coordinates of the four points E1a, E2a, E3a, and E4a are shown on the keyboard layer.

[0351] The fifth position of the keyboard bar can be considered as the final position in the process of changing from the first interface to the second interface. The final position can be referred to Figure 7 The coordinates of the four points E1b, E2b, E3b, and E4b are shown on the keyboard layer.

[0352] It should be understood that in the process of changing from the first interface to the second interface, the position of the keyboard bar changes from Figure 6 The position shown gradually moves to Figure 5 The location shown.

[0353] In an embodiment of the present application, during the process of changing from the first interface to the second interface, the position of the keyboard bar gradually moves from the sixth position to the fifth position, so that the electronic device can smoothly deploy the keyboard bar when changing to the second interface (which can be considered as the search interface) to facilitate the user to perform search operations.

[0354] It should be noted that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0355] The present application provides a computer program product that, when executed on an electronic device, enables the electronic device to execute the technical solution in the above embodiment. The implementation principle and technical effects are similar to those of the above method-related embodiments and will not be described in detail here.

[0356] The embodiment of the present application provides a readable storage medium, which contains instructions. When the instructions are executed on an electronic device, the electronic device executes the technical solution of the above embodiment. The implementation principle and technical effect are similar and will not be repeated here.

[0357] The present application provides a chip for executing instructions. When the chip is running, the technical solution of the above embodiment is executed. The implementation principle and technical effect are similar and will not be described here.

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

[0359] It should be understood that the “embodiment” mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, the various embodiments in the entire specification do not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in the various embodiments of the present application, the size of the sequence number of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present application.

[0360] Those skilled in the art will understand that the various numerical numbers such as first and second involved in this application are only for the convenience of description and are not used to limit the scope of the embodiments of this application, and also indicate the order of precedence.

[0361] In this application, elements expressed in the singular are intended to mean "one or more" rather than "one and only one" unless otherwise specified. In this application, unless otherwise specified, "at least one" is intended to mean "one or more" and "a plurality" is intended to mean "two or more."

[0362] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. A can be singular or plural, and B can be singular or plural.

[0363] The term "at least one of..." in this document refers to all or any combination of the listed items. For example, "at least one of A, B and C" can mean: A exists alone, B exists alone, C exists alone, A and B exist at the same time, B and C exist at the same time, and A, B and C exist at the same time. A can be singular or plural, B can be singular or plural, and C can be singular or plural.

[0364] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0365] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0366] The same or similar parts between the various embodiments in this application can refer to each other. In the various embodiments in this application, and the various implementation methods / implementation methods / implementation methods in each embodiment, if there is no special explanation and logical conflict, the terms and / or descriptions between different embodiments and the various implementation methods / implementation methods / implementation methods in each embodiment are consistent and can be referenced to each other. The technical features in different embodiments and the various implementation methods / implementation methods / implementation methods in each embodiment can be combined to form new embodiments, implementation methods, implementation methods, or implementation methods according to their inherent logical relationships. The above-described implementation methods of this application do not constitute a limitation on the scope of protection of this application.

[0367] The above is only a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or replacements within the technical scope disclosed in the present application, which should be included in the scope of protection of the present application. Therefore, the scope of protection of the present application should be based on the scope of protection of the claims. In short, the above is only a preferred embodiment of the technical solution of the present application, and is not used to limit the scope of protection of the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should be included in the scope of protection of the present application.

Claims

1. An interface display method, characterized in that: Applied to electronic equipment, the method includes: Displaying a first interface of the note application, wherein the first interface displays a navigation bar, and a first search box is displayed in the navigation bar; In response to the operation of the first search box, a second interface is displayed, and a second search box is displayed in the navigation bar in the second interface. The length of the second search box in the navigation bar is expanded from the initial length to the first length of the second search box displayed in the second interface, and the first length is greater than the length of the first search box.

2. The method according to claim 1, characterized in that The first interface further displays a first title bar, the first title bar includes the navigation bar, and the transparency of the first title bar is the first transparency; the second interface further displays a second title bar, the second title bar includes the navigation bar, and the transparency of the second title bar is the first transparency; And, the method further comprises: During the process of changing from the first interface to the second interface, the transparency of the first title bar gradually decreases from the first transparency to the second transparency, and the transparency of the second title bar gradually increases from the second transparency to the first transparency.

3. The method according to claim 2, characterized in that The size of the first title bar in the first interface is a first initial title size; And, the method further comprises: During the process of changing from the first interface to the second interface, the size of the first title bar gradually decreases from the first initial title size to a first target title size.

4. The method according to claim 2 or 3, characterized in that The first title bar also includes title text, the text size of the title text in the first interface is a first text size, and the position of the title text in the first title bar is a first position; And, the method further comprises: During the process of changing from the first interface to the second interface, the text size of the title text in the first title bar gradually decreases from the first text size to the second text size, and the position of the title text moves from the first position to the second position.

5. The method according to any one of claims 2 to 4, characterized in that The size of the second title bar in the second interface is a second target title size; and the method further includes: During the process of changing from the first interface to the second interface, the size of the second title bar gradually decreases from the second initial title size to the second target title size.

6. The method according to any one of claims 2 to 5, characterized in that The second title bar also includes a first interface element, and in the second interface, the first interface element is located at a third position in the second title bar; and the method further includes: During the process of changing from the first interface to the second interface, the position of the first interface element in the second title bar gradually moves from the fourth position to the third position following the change in the length of the second search box.

7. The method according to any one of claims 1 to 6, characterized in that The first interface further displays a first content area, the first content area is located below the navigation bar, and the transparency of the first content area is a first transparency; the second interface further displays a second content area, the second content area is located below the navigation bar, and the transparency of the second content area is the first transparency; And, the method further comprises: During the process of changing from the first interface to the second interface, the transparency of the first content area gradually decreases from the first transparency to the second transparency, and the transparency of the second content area gradually increases from the second transparency to the first transparency.

8. The method according to claim 7, characterized in that The size of the first content area in the first interface is a first initial content size; And, the method further comprises: During the process of changing from the first interface to the second interface, the size of the first content area is gradually reduced from the first initial content size to the first target content size.

9. The method according to claim 7 or 8, characterized in that The size of the second content area in the second interface is a second target content size; and the method further includes: During the process of changing from the first interface to the second interface, the size of the second content area is gradually reduced from the second initial content size to the second target content size.

10. The method according to any one of claims 1 to 9, characterized in that The second interface further displays a keyboard bar, the keyboard bar being located below the navigation bar, and the size of the keyboard bar in the second interface being a fifth position; and the method further includes: During the process of changing from the first interface to the second interface, the position of the keyboard bar gradually moves from the sixth position to the fifth position.

11. An electronic device, characterized in that: The electronic device comprises: one or more processors, and memory; The memory is coupled to the one or more processors, and the memory is used to store computer program code, where the computer program code includes computer instructions. The one or more processors call the computer instructions to enable the electronic device to execute the method according to any one of claims 1 to 10.

12. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the one or more processors are used to call computer instructions to enable the electronic device to execute the method as described in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that The computer-readable storage medium comprises instructions, which, when executed on an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 10.

Images