Display method and apparatus

Abstract

Embodiments of the present application relate to the technical field of terminals, and provide a display method and apparatus. The method comprises: displaying a first display area, wherein the first display area comprises a first icon and a second icon, the first icon corresponds to a first proportion, the second icon corresponds to a second proportion, and when the first proportion is greater than the second proportion, the background of the first display area is related to the first icon; in response to a second operation, switching from the first display area to a second display area, wherein the second display area comprises the first icon and a third icon, the third icon corresponds to a third proportion, and when the first proportion is less than the third proportion, the background of the first display area is related to the third icon. In this way, the electronic device can associate the background of the first display area with icons on the basis of the respective proportions, so that users can determine, by means of the background of the display area, which type of data has reached a target value, without viewing the icons or specific data.

Description

Display method and apparatus

[0001] This application claims priority to Chinese Patent Application No. 202411227230.1, filed on August 30, 2024, entitled "Display Method and Apparatus", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of terminal technology, and in particular to a display method and apparatus. Background Technology

[0003] With the popularization and development of the internet, people's functional needs for electronic devices are becoming increasingly diversified. For example, in order to improve users' ability to use multiple services, many electronic devices can support sports and health applications and record users' exercise data within these applications.

[0004] Typically, after a user launches a fitness app, the electronic device can display exercise data on the app's homepage, allowing the user to monitor their exercise progress at any time.

[0005] However, the above display methods are rather simplistic and negatively impact the user experience. Summary of the Invention

[0006] This application provides a display method and apparatus, applied in the field of terminal technology, for improving the interface display effect after launching a sports and health application.

[0007] In a first aspect, embodiments of this application propose a display method. The method includes: in response to a first operation of launching a first application, displaying a first interface, the first interface including: a first display area, the first display area including: a first icon and a second icon, the first icon corresponding to a first percentage, the second icon corresponding to a second percentage, and when the first percentage is greater than the second percentage, the background of the first display area is related to the first icon; in response to a second operation on the first interface, switching from the first display area to a second display area, the second display area including: a first icon and a third icon, the third icon corresponding to a third percentage, and when the first percentage is less than the third percentage, the background of the first display area is related to the third icon.

[0008] Electronic devices can associate the background of the display area with the icons based on the proportion of each data point, allowing users to determine which data has reached the target value simply by looking at the background of the display area without having to view the icons or specific data, thus providing a certain sense of immersion for the user.

[0009] In one possible implementation, during the display of the first interface, the progress bar in the first icon increases from its starting position to the first position where the first proportion is located, and the progress bar in the second icon increases from its starting position to the second position where the second proportion is located. The background of the first display area displays a first animation effect, which is related to the first icon.

[0010] The starting positions in the first and second icons can be found in Figure 5B, and the ending positions in both the first and second positions can be found in Figure 5C.

[0011] Electronic devices can use the animation of the progress bar in the icon to indicate the percentage change during the display of the first interface, and use the first animation to indicate which data has reached the target value, thereby improving the flexibility of data display.

[0012] In one possible implementation, the first animation includes a first image, which satisfies one or more of the following conditions: the color of the first image is the same as or similar to the color of the first icon, or the texture of the first image is the same as the texture of the first icon, or the grayscale of the first image is the same as or similar to the grayscale of the first icon.

[0013] Electronic devices can display in the form of animation, and the animation includes a first image frame. The color, texture or grayscale presented in the first image is linked with the first icon, so that the user can perceive which data has reached the target value through the color, texture or grayscale.

[0014] In one possible implementation, the first image is the last frame of the first animation. The electronic device can gradually change from the initial image to the last frame, i.e., the first image. The effect of the last frame being linked with the first icon can also allow the user to quickly perceive which data has reached the target value.

[0015] In one possible implementation, if the color of the first image is the same as the color of the first icon, the first icon includes the first color, and the first image displays the first color in the form of a solid color or a gradient.

[0016] The electronic device does not limit the content displayed in the first image. Whether it is displayed in solid color or gradient form, it can reflect the effect related to the first icon, thus improving the flexibility of the display method.

[0017] In one possible implementation, the first display area further includes a third icon, and the background of the first display area also satisfies one or more of the following conditions: when the first proportion, the second proportion, and the third proportion are all greater than 0 and less than 1, and the first proportion is greater than the second proportion and the first proportion is greater than the third proportion, the background of the first display area is related to the first icon; or, when the first proportion, the second proportion, and the third proportion are all 0, the background of the first display area is related to the first icon; or, when the first proportion, the second proportion, and the third proportion are all greater than or equal to 1, the background of the first display area is related to the first icon.

[0018] The electronic device can display default content in the first display area when multiple percentages are all 0 or greater than or equal to 1. The default content can be related to the first icon so that the user can adjust the background of the first display area according to the changes.

[0019] In one possible implementation, the background of the first display area also satisfies one or more of the following conditions: When the first proportion is the same as the second proportion and the first proportion is greater than the third proportion, the background of the first display area is related to the first icon; or, when the first proportion is the same as the third proportion and the first proportion is greater than the second proportion, the background of the first display area is related to the first icon; or, when the second proportion is the same as the third proportion and the first proportion is less than the second proportion, the background of the first display area is related to the second icon; or, when both the first and second proportions are greater than or equal to 1 and the third proportion is less than 1, the background of the first display area is related to the first icon; or, when both the second and third proportions are greater than or equal to 1 and the first proportion is less than 1, the background of the first display area is related to the second icon; wherein the first icon corresponds to the first priority, the second icon corresponds to the second priority, the third icon corresponds to the third priority, the first priority is higher than the second priority, and the second priority is higher than the third priority.

[0020] Electronic devices can adjust the background of the primary display area based on priority. This means that when multiple data points are identical, or at least two data points meet the target, the electronic device can prioritize and display content related to the highest-priority icons in the primary display area. High-priority icons typically describe the percentage of important data, allowing users to quickly focus on the achievement rate of key metrics.

[0021] In one possible implementation, the first application is a sports and health application, the first percentage is used to indicate the achievement rate of the first exercise data relative to the first target value, the second percentage is used to indicate the achievement rate of the second exercise data relative to the second target value, and the third percentage is used to indicate the achievement rate of the third data relative to the first target value.

[0022] Electronic devices can adjust the content in the first display area of ​​sports and health applications based on the achievement rate of different exercise data, so that users can see their exercise status more intuitively and improve the user experience of sports and health applications.

[0023] In one possible implementation, the first motion data is the number of steps taken, the second motion data is calorie consumption, and the third data is the exercise duration.

[0024] Electronic devices can record three types of exercise data: steps, calories burned, and exercise duration, so that users can quickly perceive the achievement rate of these three data points.

[0025] Secondly, embodiments of this application provide a display device, which may be an electronic device, or a chip or chip system within an electronic device. The display device may include a display unit and a processing unit. When the display device is an electronic device, the display unit may be a display screen. The display unit is used to perform display steps to enable the electronic device to implement a display method described in the first aspect or any possible implementation of the first aspect. When the display device is an electronic device, the processing unit may be a processor.

[0026] The display device may further include a storage unit, which may be a memory. The storage unit stores instructions, and the processing unit executes the instructions stored in the storage unit to cause the electronic device to implement a display method described in the first aspect or any possible implementation of the first aspect. When the display device is a chip or chip system within an electronic device, the processing unit may be a processor. The processing unit executes the instructions stored in the storage unit to cause the electronic device to implement a display method described in the first aspect or any possible implementation of the first aspect. The storage unit may be a storage unit within the chip (e.g., a register, cache, etc.) or a storage unit located outside the chip within the electronic device (e.g., read-only memory, random access memory, etc.).

[0027] Thirdly, embodiments of this application provide an electronic device, which includes: one or more processors and a memory; the memory is coupled to one or more processors, and the memory is used to store computer program code, the computer program code including computer instructions, and the one or more processors call the computer instructions to cause the electronic device to perform the methods described in the first aspect or any possible implementation of the first aspect.

[0028] Fourthly, embodiments of this application provide a computer-readable storage medium including computer instructions that, when executed on an electronic device, cause the electronic device to perform the methods described in the first aspect or any possible implementation thereof.

[0029] Fifthly, embodiments of this application provide a computer program product including a computer program. When the computer program product includes computer program code, when the computer program code is run on an electronic device, it causes the electronic device to perform the method described in the first aspect or any possible implementation of the first aspect.

[0030] Sixthly, this application provides a chip system applied to an electronic device. The chip system includes one or more processors, which are used to invoke computer instructions to cause the electronic device to perform the methods described in the first aspect or any possible implementation of the first aspect.

[0031] In one possible implementation, the chip system described above in this application further includes at least one memory storing instructions. The memory can be an internal storage unit of the chip system, such as a register or cache, or it can be a storage unit of the chip system itself (e.g., read-only memory, random access memory, etc.).

[0032] It should be understood that the second to sixth aspects of this application correspond to the technical solutions of the first aspect of this application, and the beneficial effects achieved by each aspect and the corresponding feasible implementation are similar, and will not be repeated here. Attached Figure Description

[0033] Figure 1 is a schematic diagram of a scenario provided by an embodiment of this application;

[0034] Figure 2 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application;

[0035] Figures 3A-3G are schematic diagrams of an interface provided in an embodiment of this application;

[0036] Figure 4 is a schematic diagram of an interface provided in an embodiment of this application;

[0037] Figure 5 is a schematic diagram of a three-ring icon variation provided in an embodiment of this application;

[0038] Figures 6A and 6B are schematic diagrams of another interface provided in the embodiments of this application;

[0039] Figures 7A and 7B are schematic diagrams of another interface provided in the embodiments of this application;

[0040] Figures 8A-8C are schematic diagrams of another interface provided in the embodiments of this application;

[0041] Figure 9 is a flowchart illustrating a display method provided in an embodiment of this application;

[0042] Figure 10 is a schematic diagram of the hardware structure of another electronic device provided in an embodiment of this application. Detailed Implementation

[0043] To facilitate a clear description of the technical solutions in the embodiments of this application, some terms and technologies involved in the embodiments of this application will be briefly introduced below:

[0044] 1. Sports and Health Applications

[0045] A fitness and health app is an application that helps users record and analyze exercise data. Fitness and health apps also support device connectivity and management. For example, they may offer features such as exercise data recording and analysis, sleep tracking, heart rate monitoring, fitness guidance, and synchronization of exercise data from wearable devices.

[0046] 2. Motion data

[0047] Motion data refers to data collected in real-time by motion detection sensors on an electronic device during user movement. These sensors can include one or more of the following: gyroscope sensors, accelerometers, etc.

[0048] Exercise data can also be called exercise and health data, or user exercise data. Exercise data can include: number of steps taken, calories burned during moderate-to-high intensity exercise such as jogging and jumping, and duration of moderate-to-high intensity exercise.

[0049] For example, when a user is walking while carrying an electronic device, the device uses motion detection sensors to collect and record the user's real-time step count, real-time calorie consumption, and real-time exercise duration. Upon receiving a user's activation of a fitness app, the electronic device can calculate the percentage of real-time steps to the target step count (1), the percentage of real-time calorie consumption to the target calorie consumption (2), and the percentage of real-time exercise duration to the target exercise duration (3). These percentages (1, 2, and 3) are then displayed as circular icons on the fitness app's homepage, as shown in Figure 1.

[0050] It is understood that the electronic device can display percentage 1, percentage 2 and percentage 3 in the form of circular icons. For ease of description, the embodiments of this application can refer to percentage 1, percentage 2 and percentage 3 as three-ring data.

[0051] 3. Target area (or first display area)

[0052] The target area can be a portion of the page displayed after launching the fitness app. The target area can display: exercise data and a circular icon. The circular icon can indicate the ratio between the exercise data and the target value.

[0053] The target area can be filled with any pre-set color, texture, or grayscale. The color or grayscale can be displayed in the target area as a solid color or as a gradient; this embodiment does not limit this.

[0054] The target area may include a punch-hole area, which may include the area where the front-facing camera is located (such as two circular areas displayed side by side). The punch-hole area may appear black and display no content. The punch-hole area may also be capsule-shaped. The style of the punch-hole area can be seen in the description of Figure 3B.

[0055] It is understood that the cutout area can be set in the middle of the top of the interface, or it can be set on the left or right side of the top of the interface, etc., and this application embodiment does not limit this.

[0056] 3. Circular icon

[0057] A circular icon, also known as a ring icon, can be circular in shape and composed of two concentric circles with different radii.

[0058] The circular icon can include a progress bar, which can be used to illustrate the ratio between the real-time value and the target value. For example, when the ratio is 1 / 2, the progress bar can occupy half of the circular icon; when the ratio is 1, the progress bar can fill the entire circular icon, which can be understood as a full ring; when the ratio is greater than 1, the progress bar can continue to grow beyond filling one ring of the circular icon, which can be understood as exceeding the ring.

[0059] As is understandable, a circular icon with a progress bar can also be called a circular progress ring or a circular progress bar. A circular progress bar serves as a progress display function, used to visually show progress or completion status. It reflects the percentage of progress or completion by showing a portion of a circle being filled.

[0060] 4. Other terms

[0061] In the embodiments of this application, terms such as "first" and "second" are used to distinguish identical or similar items with substantially the same function and purpose. For example, "first chip" and "second chip" are used only to distinguish different chips and do not limit their order of execution. Those skilled in the art will understand that terms such as "first" and "second" do not limit the quantity or execution order, and that "first" and "second" do not necessarily imply that they are different.

[0062] It should be noted that, in the embodiments of this application, the terms "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design scheme described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or design schemes. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0063] In this application embodiment, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, ab, a--c, bc, or abc, where a, b, and c can be single or multiple.

[0064] 5. Electronic equipment

[0065] The electronic devices in this application embodiment may include handheld devices, vehicle-mounted devices, etc., with motion data recording functions. For example, some electronic devices include: mobile phones, tablets, PDAs, laptops, mobile internet devices (MIDs), wearable devices, virtual reality (VR) devices, augmented reality (AR) devices, wireless terminals in industrial control, wireless terminals in self-driving, wireless terminals in remote medical surgery, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, wireless terminals in smart homes, cellular phones, cordless phones, session initiation protocol (SIP) phones, wireless local loop (WLL) stations, personal digital assistants (PDAs), handheld devices with wireless communication capabilities, computing devices or other processing devices connected to wireless modems, in-vehicle devices, wearable devices, terminal devices in 5G networks, or future evolution of public land mobile communication networks. Terminal devices in a network (PLMN), etc., are not limited to this in the embodiments of this application.

[0066] By way of example and not limitation, in this embodiment, the electronic device can also be a wearable device. Wearable devices, also known as wearable smart devices, are a general term for devices that utilize wearable technology to intelligently design and develop everyday wearables, such as glasses, gloves, watches, clothing, and shoes. Wearable devices are portable devices that are worn directly on the body or integrated into the user's clothing or accessories.

[0067] The electronic devices in the embodiments of this application may also be referred to as: terminal equipment, user equipment (UE), mobile station (MS), mobile terminal (MT), access terminal, user unit, user station, mobile station, mobile station, remote station, remote terminal, mobile device, user terminal, terminal, wireless communication equipment, user agent, or user device, etc.

[0068] In this embodiment, the electronic device or various network devices include a hardware layer, an operating system layer running on top of the hardware layer, and an application layer running on top of the operating system layer. The hardware layer includes hardware such as a central processing unit (CPU), a memory management unit (MMU), and memory (also called main memory). The operating system can be any one or more computer operating systems that implement business processing through processes, such as Linux, Unix, Android, iOS, or Windows. The application layer includes applications such as browsers, address books, word processing software, and instant messaging software.

[0069] Figure 1 is a schematic diagram of a scenario provided by an embodiment of this application. In the embodiment corresponding to Figure 1, a mobile phone is used as an example for illustration, and this example does not constitute a limitation on the embodiment of this application.

[0070] After receiving the user's command to launch the sports and health application, the interface shown in Figure 1 is displayed. Figure 1 can be called the homepage of the sports and health application.

[0071] Figure 1 may include: target area 101, and other controls or cards for display.

[0072] The target area 101 may include: real-time step count (e.g., 4000 steps), target step count (e.g., 8000 steps), and a circular icon 102; real-time calorie consumption (e.g., 100 kcal), target calorie consumption (e.g., 300 kcal), and a circular icon 103; real-time exercise duration (e.g., 5 minutes), target exercise duration (e.g., 30 minutes), and a circular icon 104.

[0073] The circular icon 102 can be used to indicate the ratio between the real-time step count and the target step count. For example, if the ratio between the real-time step count and the target step count is 1 / 2, the progress bar 1021 in the circular icon 102 can occupy half of the circular icon 102.

[0074] The circular icon 103 can be used to indicate the ratio between real-time heat consumption and target heat consumption. For example, if the ratio between real-time heat consumption and target heat consumption is 1 / 3, the progress bar 1031 in the circular icon 103 can occupy 1 / 3 of the circular icon 103.

[0075] The circular icon 104 can be used to indicate the ratio between real-time exercise duration and target exercise duration. For example, if the ratio between real-time exercise duration and target exercise duration is 1 / 6, the progress bar in the circular icon 1041 can occupy 1 / 6 of the circular icon 104.

[0076] The motion data depicted in Figure 1 is merely an example. In response to a user's action to refresh the motion data, the electronic device can display the updated motion data and the updated circular icon in the target area 101.

[0077] It is understandable that electronic devices can display various motion data, target values ​​for each motion data, and percentages of each motion data relative to its corresponding target value using a circular icon, as shown in Figure 1.

[0078] However, the above display methods are rather simplistic and fail to provide users with an immersive experience. For example, users would need to compare the progress bars in the three circular areas to determine which motion data is closest to the target value.

[0079] In view of this, this application provides a display method. After detecting that a user has launched a sports and health application, the electronic device can display the color (or texture, or grayscale) corresponding to the highest percentage of exercise data in the target area. This allows the user to understand which exercise data is closest to the target value without having to look at the icons corresponding to each percentage, thus providing the user with a certain sense of immersion.

[0080] To better understand the embodiments of this application, the structure of the electronic device according to the embodiments of this application will be described below. For example, FIG2 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application.

[0081] The electronic device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, an indicator 192, a camera 193, and a display screen 194, etc.

[0082] The sensor module 180 may also include one or more of the following: proximity light sensor, ambient light sensor, touch sensor, pressure sensor, gyroscope sensor, barometric pressure sensor, magnetic sensor, accelerometer, distance sensor, fingerprint sensor, temperature sensor, or bone conduction sensor, etc. (not shown in Figure 2). This application embodiment does not specifically limit these.

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

[0084] The processor 110 may include one or more processing units, and the processor 110 may implement the execution steps in the interface display method provided in the embodiments of this application.

[0085] For example, after detecting the user's operation of launching the sports and health application, the processor 110 can calculate the proportion of each sports data, determine the display animation of the background area based on the proportion of each sports data, and determine the display animation of the circular icon corresponding to each sports data based on the proportion of each sports data.

[0086] USB interface 130 is an interface that conforms to the USB standard specification, specifically it can be a Mini USB interface, Micro USB interface, USB Type C interface, etc.

[0087] The charging management module 140 is used to receive charging input from the charger. The power management module 141 is used to connect the charging management module 140 and the processor 110.

[0088] The wireless communication function of electronic devices can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0089] The electronic device implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU can be used to implement the image processing procedures in the display method described in the embodiments of this application.

[0090] The display screen 194 is used to display images and videos, such as the always-on display settings interface provided in the embodiments of this application and other interfaces.

[0091] Electronic devices can achieve shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0092] Camera 193 is used to capture still images or videos.

[0093] The external storage interface 120 can be used to connect an external storage card.

[0094] Internal memory 121 can be used to store computer executable program code, which includes instructions.

[0095] Electronic devices can implement audio functions such as music playback and recording through audio modules 170, speakers 170A, receivers 170B, microphones 170C, headphone jacks 170D, and application processors.

[0096] A touch sensor can be placed on the display screen 194. The touch sensor and the display screen 194 together form a touch screen, also known as a "touchscreen". The touch sensor can detect user operations on the touch screen, such as detecting the user launching a fitness and health application or refreshing exercise data.

[0097] Button 190 includes the power button, volume buttons, etc.

[0098] The software systems of electronic devices can adopt layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture, etc., which will not be elaborated here.

[0099] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. The following specific embodiments can be implemented independently or in combination with each other. The same or similar concepts or processes may not be described again in some embodiments.

[0100] This application provides an interface display method that enables electronic devices to display the homepage of a sports and health application according to the following rules:

[0101] Rule 1: When there are motion data with proportions all greater than 0 and proportions all less than 1, the electronic device can display the motion effect (such as color, texture, or grayscale) corresponding to the motion data with the highest proportion in the target area.

[0102] Optionally, if there is a motion data point with a percentage greater than or equal to 1, the electronic device can display the motion effect corresponding to the motion data with the highest percentage in the target area.

[0103] Rule 2: When there are at least two motion data with the highest and the same percentage, the electronic device can display the motion effect corresponding to the highest priority motion data in the target area according to the preset priority order.

[0104] Rule 3: When there is no motion data (i.e., the percentage of each data point is 0) or the percentage of each data point is greater than or equal to 1, the electronic device can display the motion effect 1 corresponding to the motion health data in the target area.

[0105] Rule 4: When there are two motion data points with a proportion greater than or equal to 1, the electronic device can display the motion effect corresponding to the highest priority motion data in the target area according to the preset priority order.

[0106] In Rules 2 and 4, the priority order from highest to lowest can be: exercise health, calorie consumption, and exercise duration.

[0107] The following explanations of rules 1-4, in conjunction with the user interface, will illustrate these rules.

[0108] Regarding rule 1, when there are motion data with proportions all greater than 0 and proportions all less than 1, the electronic device can display the motion effect (such as color, texture, or grayscale) corresponding to the motion data with the highest proportion in the target area. Figures 3A-3G are schematic diagrams of an interface provided by an embodiment of this application.

[0109] After detecting that the user has launched the sports and health application, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 3B.

[0110] One method to launch the fitness and health app is through a cold start. A cold start occurs when the app is launched without any background processes running (e.g., during the app's first launch or after it has been killed). In this case, the system creates a new process for the app.

[0111] Figure 3A may include a target area 301, the background of which does not display any animation effects. For example, the target area 301 may not display any color, or the target area 301 may be transparent, or the target area 301 may display a default color (such as white), which is different from any of the colors in the three rings.

[0112] The target area 301 can display: initial number of steps (e.g., 0 steps), target number of steps, and a circular icon 302; initial calorie consumption (e.g., 0 kcal), target calorie consumption, and a circular icon 303; initial exercise duration (e.g., 0 minutes), target exercise duration, and a circular icon 304.

[0113] If the initial number of steps is 0, the ratio 1 between the initial number of steps and the target number of steps is 0, so no progress bar is displayed in the circular icon 302. If the initial calorie expenditure is 0 kcal, the ratio 2 between the initial calorie expenditure and the target calorie expenditure is 0, so no progress bar is displayed in the circular icon 303. If the initial exercise duration is 0 minutes, the ratio 3 between the initial exercise duration and the target exercise duration is 0, so no progress bar is displayed in the circular icon 304.

[0114] The three-ring icon consisting of ring icon 302, ring icon 303, and ring icon 304 is in the initial state.

[0115] It is understandable that Figure 3A can be the default interface displayed when a sports and health application is cold-started. This interface can be switched to the interface with sports data shown in Figure 3B after the display time reaches a preset duration (such as 100 milliseconds or 1 second).

[0116] Figure 3B may include: target area 305.

[0117] The target area 305 can display: real-time step count (e.g., 4000 steps), target step count, and a circular icon 306; real-time calorie consumption (e.g., 100 kcal), target calorie consumption, and a circular icon 307; real-time workout duration (e.g., 5 minutes), target workout duration, and a circular icon 308.

[0118] The three-ring pattern in Figure 3B is the same as the three-ring pattern in Figure 1, and will not be described again here.

[0119] When the percentages 1, 2, and 3 are all less than 1, and the percentage 1 is greater than the percentage 2 and the percentage 1 is greater than the percentage 3, the background of the target area 305 can display a motion effect 1 related to sports and health.

[0120] Animation 1 may include: a single frame image (such as image 1), or it may include multiple frames of images (multiple frames of images may include image 2, such as image 2 being the last frame of multiple frames of images).

[0121] When image 1 is included in animation 1, the color in image 1 is the same as the color in circular icon 306 (or the color in image 1 and the color in circular icon 306 belong to the same hue), or the grayscale of image 1 is the same as the grayscale of circular icon 306, or the texture in image 1 is the same as the texture in circular icon 306.

[0122] When image 2 is included in animation 1, the color in image 2 is the same as the color in the circular icon 306, or the grayscale of image 2 is the same as the grayscale of the circular icon 306, or the texture of image 2 is the same as the texture of the circular icon 306. In this case, in animation 1, the electronic device can sequentially play multiple frames of images, such as starting with the initial image in the multiple frames and continuing until image 2 is played. The initial image can be a pure white or transparent image to distinguish it from image 2.

[0123] It is understandable that the playback format of animation effect 2 or animation effect 3 is the same as that of animation effect 1, and will not be repeated hereafter.

[0124] The three-ring icon consisting of ring icon 306, ring icon 307, and ring icon 307 is in its final state.

[0125] It should be noted that in animation effect 1, the target area 305 can be displayed as a solid color of orange, in which case the target area contains only orange. Alternatively, the target area 305 can also be displayed as a gradient of orange, where the darkest color in the target area 305 can be orange and the lightest color in the target area 305 can be white. In this case, the target area 305 can display a gradient image from orange to white. This embodiment of the application does not limit this.

[0126] Optionally, when proportion 1 is greater than proportion 2, and proportion 1 is greater than proportion 3, in animation effect 1, the grayscale value in target area 305 is the same as the grayscale value in circular icon 306. For example, if the grayscale value in circular icon 306 is grayscale value 1, the grayscale value in target area 305 can also be grayscale value 1, as shown in Figure 3B. In this case, the grayscale value in circular icon 307 can be grayscale value 2, and the grayscale value in circular icon 308 can be grayscale value 3, where grayscale value 2 is different from grayscale value 1, and grayscale value 3 is different from grayscale value 1.

[0127] It should be noted that the target area 305 can display an image with a grayscale value of 1 in a solid color. Alternatively, the target area 305 can also display an image with a grayscale value of 1 in a gradient form. In this case, the darkest grayscale value in the target area 305 can be grayscale value 1, and the lightest grayscale value in the target area 305 can be grayscale value 4. Grayscale value 1 is less than grayscale value 4, and grayscale value 4 can be 255. This embodiment of the application does not limit this.

[0128] Optionally, if proportion 1 is greater than proportion 2, and proportion 1 is greater than proportion 3, in animation 1, the texture in target area 305 is the same as the texture in circular icon 306. If texture 1 is displayed in circular icon 306, texture 1 is also displayed in target area 305.

[0129] As shown in Figure 4, texture 1 is displayed in both the target area 401 and the annular area 402, texture 2 is displayed in the annular area 403, and texture 3 is displayed in the annular area 404. Texture 1 can be a texture that tilts to the left, texture 2 can be a texture that tilts to the right, and texture 3 can be a mesh-like texture.

[0130] Optionally, the top of the screen in Figure 3B may include a punch-hole area 310. The punch-hole area 310 may be capsule-shaped and may be located within the area of ​​the target area 305. The color (or texture, or grayscale) displayed in the background of the target area 305 is unrelated to the punch-hole area 310.

[0131] It is understandable that the electronic device can display interfaces such as Figure 3A and Figure 3B within a time threshold of 1. During the transition from Figure 3A to Figure 3B, the following two changes occur:

[0132] (1) The target area gradually displays animation 1. At this time, the color or grayscale of the target area gradually deepens (the texture gradually appears) until the background color of the target area 305 is consistent with the color (or texture, or grayscale, or hue, etc.) of the circular icon 306.

[0133] (2) The progress bars in the three-ring image all move clockwise from the starting position to their respective ending positions.

[0134] It should be noted that the content displayed in the target area (such as color, grayscale, or texture) can be pre-stored in the electronic device as an animation (or GIF). After detecting that the user has launched a fitness app, the electronic device can play the animation in the target area within a time threshold of 1, based on the proportion of each exercise data point. For example, the electronic device can complete an orange-themed animation (or orange.gif) within 5 seconds, at which point the proportion of 1 is highest.

[0135] It is understandable that after displaying motion effect 1 in the target area within the time threshold 1, the electronic device can display the last frame of motion effect 1 in the target area by default, and the electronic device will not loop motion effect 1.

[0136] In the process of changing from Figure 3A to Figure 3B, the three-ring icon can be changed as shown in Figure 5. Figure 5 is a schematic diagram of the change of the three-ring icon provided by an embodiment of this application.

[0137] Figure 5A illustrates the three-ring icon in its initial state. For example, after launching a fitness app, an electronic device can display the three-ring icon shown in Figure 5A.

[0138] Figure 5B illustrates the three-ring icon in the beginning of its growth phase. For example, the progress bars in each of the three rings can start from their respective starting positions and grow clockwise (as indicated by the dashed arrows). The starting position can be the center left position within the rings.

[0139] Figure 5C illustrates the three-ring icon in its final state. The progress bars within the three-ring icon can increase according to their respective percentages until they reach their respective end positions.

[0140] For example, if percentage 1 is 1 / 2, then in the circular icon corresponding to the number of steps, the end position of the progress bar can be located in the middle of the right side of the circle; if percentage 2 is 1 / 3, then in the circular icon corresponding to calorie consumption, the end position of the progress bar can be located slightly to the right of the upper side of the circle; if percentage 3 is 1 / 6, then in the circular icon corresponding to exercise duration, the end position of the progress bar can be located slightly to the left of the upper side of the circle. The meanings of percentages 1, 2, and 3 can be found in Figure 1 or Figures 3A-3B.

[0141] Based on Figure 3B, in response to the user's swipe down from the top of the page (or refresh the fitness app), the electronic device can refresh the displayed content in the target area according to the proportion of each exercise data.

[0142] For example, when the electronic device detects that percentage 2 is the highest, it can display an animation 2 related to calorie consumption in the background of the target area, such as when the electronic device can switch from the interface shown in Figure 3B to the interface shown in Figure 3C. Alternatively, when the electronic device detects that percentage 3 is the highest, it can display an animation 3 related to exercise duration in the background of the target area, such as when the electronic device can switch from the interface shown in Figure 3B to the interface shown in Figure 3D.

[0143] In one implementation, in response to a user swiping down from the top of the page, the electronic device can display a motion effect 2 related to heat consumption in the background of the target area when the highest percentage 2 is detected, as shown in the interface of Figure 3C.

[0144] Figure 3C may include: target region 311.

[0145] The target area 311 can display: real-time step count (e.g., 4200 steps), target step count, and a circular icon 312; real-time calorie consumption (e.g., 200 kcal), target calorie consumption, and a circular icon 313; real-time workout duration (e.g., 10 minutes), target workout duration, and a circular icon 314.

[0146] The percentage 1 can be approximately 1 / 2, the percentage 2 can be 2 / 3, and the percentage 3 can be 1 / 3. When the percentage 2 is greater than the percentage 1 and the percentage 2 is greater than the percentage 3, the background of the target area 311 can display an animation 2 related to heat consumption.

[0147] In animation effect 2, the background color of the target area 311 is the same as the color of the circular icon 313. For example, if the circular icon 313 displays yellow, the background of the target area 311 will also display yellow, which is not shown in Figure 3C.

[0148] Optionally, if proportion 2 is greater than proportion 1 and proportion 2 is greater than proportion 3, in animation effect 2, the grayscale value in the background of target area 311 is the same as the grayscale value in the circular icon 313. For example, if the grayscale value in the circular icon 313 is grayscale value 2, the grayscale value in the background of target area 311 can also be grayscale value 2, as shown in Figure 3C.

[0149] Optionally, if proportion 2 is greater than proportion 1 and proportion 2 is greater than proportion 3, in animation effect 2, the texture in the background of target area 311 is the same as the texture in the circular icon 313. If texture 2 is displayed in the circular icon 313, texture 2 is also displayed in the background of target area 311, which is not shown in Figure 3C.

[0150] It is understandable that the electronic device can gradually switch from Figure 3B to Figure 3C within a time threshold of 1. During the transition from Figure 3B to Figure 3C, the following two changes occur:

[0151] (1) The target area switches from the last frame of animation 1 to animation 2. At this time, the color (or grayscale or texture) of the target area gradually changes until the background color of the target area 311 is consistent with the color (or texture, or grayscale, or hue, etc.) of the circular icon 313.

[0152] (2) The progress bars in the three-ring icon all move clockwise from the position shown in Figure 3B to the position shown in Figure 3C.

[0153] It is understandable that after displaying animation 2 in the target area within the time threshold 1, the electronic device can display the last frame of animation 2 in the target area by default, and the electronic device will not loop animation 2.

[0154] In another implementation, in response to the user swiping down from the top of the page, the electronic device can display an animation 3 related to the exercise duration in the background of the target area when the highest percentage of 3 is detected, as shown in Figure 3D.

[0155] Figure 3D may include: target region 321.

[0156] The target area 321 can display: real-time step count (e.g., 4200 steps), target step count, and a circular icon 322; real-time calorie consumption (e.g., 210 kcal), target calorie consumption, and a circular icon 323; real-time workout duration (e.g., 25 minutes), target workout duration, and a circular icon 324.

[0157] The percentage 1 can be approximately 1 / 2, the percentage 2 can be approximately 2 / 3, and the percentage 3 can be 5 / 6. When the percentage 3 is greater than the percentage 1 and the percentage 3 is greater than the percentage 2, the background of the target area 321 can display an animation 3 related to the exercise duration.

[0158] In animation 3, the background color of the target area 321 is the same as the color of the circular icon 323. For example, if the circular icon 323 displays blue, the background of the target area 321 will also display blue, which is not shown in Figure 3D.

[0159] Optionally, if the proportion 3 is greater than the proportion 1, and the proportion 3 is greater than the proportion 2, then in animation effect 3, the grayscale value in the background of the target area 321 is the same as the grayscale value in the circular icon 323. For example, if the grayscale value in the circular icon 323 is grayscale value 3, then the grayscale value in the background of the target area 321 will also display grayscale value 3, as shown in Figure 3D.

[0160] Optionally, if the proportion 3 is greater than the proportion 1, and the proportion 3 is greater than the proportion 2, then in animation effect 3, the texture in the background of target area 321 is the same as the texture in the circular icon 323. If texture 3 is displayed in the circular icon 323, texture 3 is also displayed in the background of target area 321, but this is not shown in Figure 3D.

[0161] It is understandable that the electronic device can gradually switch from Figure 3B to Figure 3D within a time threshold of 1. During the transition from Figure 3B to Figure 3D, the following two changes occur:

[0162] (1) The target area switches from the last frame of animation 1 to animation 3. At this time, the color (or grayscale or texture) of the target area gradually changes until the background color of the target area 321 is consistent with the color (or texture, or grayscale, or hue, etc.) of the circular icon 323.

[0163] (2) The progress bars in the three-ring icon all move clockwise from the position shown in Figure 3B to the position shown in Figure 3C.

[0164] It is understandable that after displaying motion effect 3 in the target area within the time threshold 1, the electronic device can display the last frame of motion effect 3 in the target area by default, and the electronic device will not loop motion effect 3.

[0165] It is understood that the electronic device can switch between Figures 3A, 3B, 3C, and 3D according to the proportion of each motion data. The changes in the target area during the switching process will not be described in detail in the embodiments of this application.

[0166] Optionally, when there is a motion data with a proportion greater than or equal to 1, the electronic device can display the motion effect corresponding to the motion data with the highest proportion (i.e., a proportion greater than or equal to 1) in the target area, see Figures 3E-3G.

[0167] In one implementation, based on Figure 3B, in response to the user's swiping down from the top of the page, when the proportion 1 is greater than or equal to 1, and the proportions 2 and 3 are both less than 1, the electronic device can display the motion effect 1 corresponding to sports and health in the background of the target area, such as when the electronic device switches from the interface shown in Figure 3B to the interface shown in Figure 3E.

[0168] Figure 3E shows the target area 331.

[0169] The target area 331 can display: real-time step count (e.g., 10177 steps), target step count, and a circular icon 332; real-time calorie consumption (e.g., 100 kcal), target calorie consumption, and a circular icon 333; real-time workout duration (e.g., 5 minutes), target workout duration, and a circular icon 334.

[0170] During the transition from Figure 3B to Figure 3E, the electronic device can display animation 1 again in the background of the target area 331; the progress bars in the three-ring icons all move clockwise from the position shown in Figure 3B to the position shown in Figure 3E. Compared to the ring icon 306, the progress bar in the ring icon 332 continues to increase clockwise until it reaches the full ring and then exceeds the ring to the position where the percentage 1 is located.

[0171] In another implementation, based on Figure 3B, in response to the user's swiping down from the top of the page, when the proportion 2 is greater than or equal to 1, and both proportion 1 and proportion 3 are less than 1, the electronic device can display the heat consumption corresponding animation 2 in the background of the target area, such as when the electronic device switches from the interface shown in Figure 3B to the interface shown in Figure 3F.

[0172] Figure 3F shows the target area 341.

[0173] The target area 341 can display: real-time step count (e.g., 4000 steps), target step count, and a circular icon 342; real-time calorie consumption (e.g., 512 kcal), target calorie consumption, and a circular icon 343; real-time workout duration (e.g., 5 minutes), target workout duration, and a circular icon 344.

[0174] During the transition from Figure 3B to Figure 3F, the electronic device can display animation effect 2 in the background of the target area 341; the progress bars in the three ring icons all move clockwise from the position shown in Figure 3B to the position shown in Figure 3F. For example, compared to the ring icon 307, the progress bar in the ring icon 343 continues to increase clockwise until it reaches the full ring and then exceeds the ring to the position where the percentage 2 is located.

[0175] In another implementation, based on Figure 3B, in response to the user's swiping down from the top of the page, when the proportion 3 is greater than or equal to 1, and both proportions 2 and 3 are less than 1, the electronic device can display the animation 3 corresponding to the exercise duration in the target area, such as when the electronic device switches from the interface shown in Figure 3B to the interface shown in Figure 3G.

[0176] Figure 3G shows the target area 351.

[0177] The target area 351 can display: real-time step count (e.g., 4000 steps), target step count, and a circular icon 352; real-time calorie consumption (e.g., 100 kcal), target calorie consumption, and a circular icon 353; real-time workout duration (e.g., 47 minutes), target workout duration, and a circular icon 354.

[0178] During the transition from Figure 3B to Figure 3G, the electronic device can display animation effect 3 in the background of the target area 351; the progress bars in the three ring icons all move clockwise from the position shown in Figure 3B to the position shown in Figure 3G. For example, compared to the ring icon 308, the progress bar in the ring icon 354 continues to increase clockwise until it reaches the full ring and then exceeds the ring to the position where the percentage 3 is located.

[0179] Regarding rule 2: When there are at least two motion data points with the highest and equal proportions, the electronic device can display the animation corresponding to the highest-priority motion data in the target area according to a preset priority order. Figures 6A and 6B are another interface schematic diagram provided by an embodiment of this application.

[0180] The order of priority from highest to lowest is: exercise health, calorie consumption, and exercise duration.

[0181] It is understandable that if motion data has a higher priority, then the corresponding circular icon will have a higher priority, and the background of the target area is more likely to display animations related to the circular icon with that higher priority.

[0182] For example, when an electronic device detects two motion data points with equal proportions and high percentages, it can display the animation corresponding to the highest-priority motion data according to a preset priority order, as shown in Figure 6A. Alternatively, when an electronic device detects three motion data points with equal proportions, it can display the animation corresponding to the highest-priority motion data according to a preset priority order, as shown in Figure 6B.

[0183] In one implementation, after detecting that the user has launched a sports and health application, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 6A according to a preset priority order when it detects that there are two sports data that have the highest and the same proportion. Figure 3A will not be described again here.

[0184] For example, after detecting that the user has launched a fitness app, the electronic device can determine, based on a preset priority order, to display the animation effect 1 corresponding to the number of steps in the target area, such as the interface shown in Figure 6A, when the proportion 1 is 1 / 2, the proportion 2 is 1 / 2, and the proportion 3 is 1 / 6.

[0185] Figure 6A may include: target area 601.

[0186] The target area 601 can display: real-time step count (e.g., 4000 steps), target step count, and a circular icon 602; real-time calorie consumption (e.g., 150 kcal), target calorie consumption, and a circular icon 603; real-time workout duration (e.g., 5 minutes), target workout duration, and a circular icon 604.

[0187] When ratio 2 equals ratio 1 and ratio 2 is greater than ratio 3, the electronic device can display animation 1 in the background of target area 601 (which can be understood as sports and health having the highest priority). In animation 1, the background color of target area 601 is the same as the color in the circular icon 602. For example, if the circular icon 602 displays orange, the background of target area 601 will also display orange, which is not shown in Figure 6A.

[0188] Optionally, when proportion 2 equals proportion 1 and proportion 2 is greater than proportion 3, in animation effect 1, the grayscale value in the background of target area 601 is the same as the grayscale value in the circular icon 602. For example, if the grayscale value in the circular icon 602 is grayscale value 1, the grayscale value in the background of target area 601 can also be grayscale value 1, as shown in Figure 6A.

[0189] Optionally, when ratio 2 equals ratio 1 and ratio 2 is greater than ratio 3, in animation effect 1, the texture in the background of target area 601 is the same as the texture in the circular icon 602. If texture 1 is displayed in the circular icon 602, texture 1 is also displayed in the background of target area 601, as not shown in Figure 6A.

[0190] It is understandable that the electronic device can gradually switch from Figure 3A to Figure 6A within a time threshold of 1. During the transition from Figure 3A to Figure 6A, the following two changes occur:

[0191] (1) The target area gradually displays animation 1. At this time, the color (or grayscale, or texture) of the target area gradually deepens until the color of the target area 601 is consistent with the color (or texture, or grayscale, or hue, etc.) of the circular icon 602.

[0192] (2) The progress bars in the three-ring icon all move clockwise from the starting position to the position shown in Figure 6A.

[0193] In another implementation, after detecting that the user has launched a sports and health application, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 6B according to a preset priority order when it detects that there are three sports data with the same proportion.

[0194] For example, after detecting that the user has launched a sports and health application, the electronic device can determine, based on a preset priority order, to display the animation effect 1 corresponding to the number of steps in the target area (which can be understood as sports and health having the highest priority), when the proportions 1, 2, and 3 are 1 / 2, as shown in Figure 6B.

[0195] Figure 6B may include: target area 611.

[0196] The target area 611 can display: real-time step count (e.g., 4000 steps), target step count, and a circular icon 612; real-time calorie consumption (e.g., 150 kcal), target calorie consumption, and a circular icon 613; real-time workout duration (e.g., 15 minutes), target workout duration, and a circular icon 614.

[0197] The animation 1 displayed in target area 611 can be seen in the description in Figure 6A, and will not be repeated here. When proportions 1, 2, and 3 are all 1 / 2, the progress bar in any of the three ring icons can occupy half of the ring icon.

[0198] Regarding rule 3: When there is no motion data, or when the proportion of each motion data is greater than or equal to 1, the electronic device can display the motion effect 1 corresponding to the motion health data in the background of the target area. Figures 7A and 7B are another interface schematic diagram provided by the embodiment of this application.

[0199] It should be noted that the reason why electronic devices display animation 1 in the background of the target area can also be understood as the highest priority of sports and health.

[0200] In one implementation, in response to a user launching a fitness and health application, when the electronic device detects that all exercise data are 0, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 7A.

[0201] Figure 7A may include: target area 701.

[0202] The target area 701 can display: real-time step count (e.g., 0 steps), target step count, and a circular icon 702; real-time calorie consumption (e.g., 0 kcal), target calorie consumption, and a circular icon 703; real-time workout duration (e.g., 0 minutes), target workout duration, and a circular icon 704.

[0203] When percentages 1, 2, and 3 are all 0, the target area 701 can display motion effect 1 related to sports and health. The content displayed in motion effect 1 can be seen in the description in Figure 3B. The progress bar is not displayed in the circular icons 702, 703, and 704.

[0204] Understandably, when all motion data is 0, the electronic device can display a pre-set animation, such as animation 1, in the background of the target area after detecting that the user has opened a fitness app. The electronic device can use animation 1 to determine that the motion data detection has been completed.

[0205] In another implementation, in response to the user's operation of launching the sports and health application, when the electronic device detects that the proportions 1, 2 and 3 are all greater than or equal to 1, the electronic device can display animation 1 in the background of the target area. For example, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 7B.

[0206] Figure 7B may include: target area 711.

[0207] The target area 711 can display: real-time step count (e.g., 10177 steps), target step count, and a circular icon 712; real-time calorie consumption (e.g., 512 kcal), target calorie consumption, and a circular icon 713; real-time workout duration (e.g., 47 minutes), target workout duration, and a circular icon 714.

[0208] The percentage 1 can be approximately 1.27, the percentage 2 can be approximately 1.7, and the percentage 3 can be approximately 1.56. When the percentages 1, 2, and 3 are all greater than or equal to 1, a motion effect 1 related to sports and health can be displayed in the background of the target area 711. The content displayed in the motion effect 1 can be seen in the description in Figure 3B. The circular icon 712 displays the progress bar when the percentage is 1, the circular icon 713 displays the progress bar when the percentage is 2, and the circular icon 714 displays the progress bar when the percentage is 3.

[0209] Based on the description in 7B, when percentages 1, 2, and 3 are all greater than or equal to 1, each exercise data point achieves its respective target value. In this case, users may only focus on whether important exercise data (such as the number of steps taken) has achieved its target value. Therefore, electronic devices can display animations related to important exercise data (such as animation 1) in the target area, so that users can focus on the completion status of important exercise data when they open the fitness and health app, thus improving the user experience.

[0210] Figure 7B illustrates when the important motion data of the electronic device is determined to be the number of steps. Optionally, when the important motion data is calorie consumption, the electronic device can display the corresponding motion effect 2 in the target area if it detects that proportions 1, 2, and 3 are all greater than or equal to 1. Alternatively, when the important motion data is the duration of exercise, the electronic device can display the corresponding motion effect 3 in the target area if it detects that proportions 1, 2, and 3 are all greater than or equal to 1. This embodiment of the application does not limit this aspect.

[0211] Rule 4: When two motion data points have a proportion greater than or equal to 1, the electronic device can display the motion effect corresponding to the highest priority motion data in the target area according to a preset priority order. Figures 8A-8C are another interface schematic diagram provided by an embodiment of this application.

[0212] In one implementation, in response to the user's operation of launching the sports and health application, when the electronic device detects that the proportion 1 is greater than or equal to 1, the proportion 2 is greater than or equal to 1, and the proportion 3 is less than 1, the electronic device can display animation 1 in the background of the target area (which can be understood as sports and health having the highest priority). For example, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 8A.

[0213] Among them, in the display of animation effects in the target area, the priority of displaying animation effect 1 is higher than the priority of displaying animation effect 2.

[0214] Figure 8A shows the target area 801.

[0215] The target area 801 can display: real-time step count (e.g., 10177 steps), target step count, and a circular icon 802; real-time calorie consumption (e.g., 512 kcal), target calorie consumption, and a circular icon 803; real-time workout duration (e.g., 15 minutes), target workout duration, and a circular icon 804.

[0216] In the embodiment corresponding to Figure 8A, the percentage can be approximately 1.27, the percentage 2 can be approximately 1.7, and the percentage 3 can be 1 / 2.

[0217] During the transition from Figure 3A to Figure 8A, the background of the target area 801 can gradually display animation effect 1; the progress bars in the three ring icons all move clockwise from the starting position shown in Figure 3A to the position shown in Figure 8A. For example, compared to ring icon 306, the progress bar in ring icon 802 increases clockwise until it is full and extends beyond the ring to the position where percentage 1 is located; compared to ring icon 307, the progress bar in ring icon 803 increases clockwise until it is full and extends beyond the ring to the position where percentage 2 is located; compared to ring icon 308, the progress bar in ring icon 804 increases clockwise until it reaches the position where percentage 3 is located.

[0218] In this scenario, even if the proportion 2 is greater than the proportion 1, the electronic device will not display animation 2 in the target area.

[0219] In another implementation, in response to the user's operation of launching the sports and health application, when the electronic device detects that the proportion 1 is greater than or equal to 1, the proportion 2 is less than 1, and the proportion 3 is greater than or equal to 1, the electronic device can display animation 1 in the target area (which can be understood as sports and health having the highest priority). For example, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 8B.

[0220] Among them, in the display of animation effects in the target area, the priority of displaying animation effect 1 is higher than the priority of displaying animation effect 3.

[0221] Figure 8B shows the target area 811.

[0222] The target area 811 can display: real-time step count (e.g., 10177 steps), target step count, and a circular icon 812; real-time calorie consumption (e.g., 100 kcal), target calorie consumption, and a circular icon 813; real-time workout duration (e.g., 47 minutes), target workout duration, and a circular icon 814.

[0223] In the embodiment corresponding to Figure 8B, the percentage can be approximately 1.27, percentage 2 can be 1 / 3, and percentage 3 can be approximately 1.56.

[0224] During the transition from Figure 3A to Figure 8B, the background of the target area 811 can gradually display animation effect 1; the progress bars in the three ring icons all move clockwise from the starting position shown in Figure 3A to the position shown in Figure 8B. For example, compared to ring icon 306, the progress bar in ring icon 812 increases clockwise until it reaches the full ring and extends beyond the ring to the position where percentage 1 is located; compared to ring icon 307, the progress bar in ring icon 813 increases clockwise until it reaches the position where percentage 2 is located; compared to ring icon 308, the progress bar in ring icon 814 increases clockwise until it reaches the full ring and extends beyond the ring to the position where percentage 3 is located.

[0225] In this scenario, even if the proportion 3 is greater than the proportion 1, the electronic device will not display animation 3 in the target area.

[0226] In another implementation, in response to the user's operation of launching the sports and health application, when the electronic device detects that the proportion 1 is less than 1, the proportion 2 is greater than or equal to 1, and the proportion 3 is greater than or equal to 1, the electronic device can display animation 2 in the target area (which can be understood as having a higher priority for calorie consumption). For example, the electronic device can display the interface shown in Figure 3A and the interface shown in Figure 8C.

[0227] Among them, in the display of animation effects in the target area, the priority of displaying animation effect 2 is higher than the priority of displaying animation effect 3.

[0228] Figure 8C shows the target area 821.

[0229] The target area 821 can display: real-time step count (e.g., 4000 steps), target step count, and a circular icon 822; real-time calorie consumption (e.g., 512 kcal), target calorie consumption, and a circular icon 823; real-time workout duration (e.g., 47 minutes), target workout duration, and a circular icon 824.

[0230] In the embodiment corresponding to Figure 8C, the proportion can be 1 / 2, the proportion 2 can be approximately 1.7, and the proportion 3 can be approximately 1.56.

[0231] During the transition from Figure 3A to Figure 8C, the background of the target area 821 can gradually display animation effect 2; the progress bars in the three ring icons all move clockwise from the starting position shown in Figure 3A to the position shown in Figure 8C. For example, compared to ring icon 306, the progress bar in ring icon 822 increases clockwise until it reaches the position of percentage 1; compared to ring icon 307, the progress bar in ring icon 823 increases clockwise until it reaches the full ring and then extends beyond the ring to the position of percentage 2; compared to ring icon 308, the progress bar in ring icon 824 increases clockwise until it reaches the full ring and then extends beyond the ring to the position of percentage 3.

[0232] Based on the descriptions in Figures 8A-8C, it can be understood that when an electronic device determines that there are two cases where the percentage is greater than or equal to 1, the electronic device can display the animation corresponding to the higher priority motion data in the target area according to a preset priority order, so that users can pay attention to the completion status of important motion data when launching or refreshing the sports and health application.

[0233] Optionally, the electronic device can also preset animation effect 4 for a certain time period. In this case, when the electronic device launches the fitness and health application during that time period, the electronic device can display animation effect 4 in the target area. The three-ring changing animation effect is the same as that described in Figures 3A-3B, and will not be repeated here.

[0234] It is understood that the motion effects 1, 2, and 3 described in the embodiments of this application can all be understood as motion effects targeting a target area. During the display of any motion effect, the images in each frame of the motion effect may be the same or different.

[0235] Referring to the descriptions in Figures 3A-8C above, Figure 9 is a flowchart illustrating a display method provided by an embodiment of this application. As shown in Figure 9, the display method may include the following steps:

[0236] S901, in response to the first operation of launching the first application, the first interface is displayed.

[0237] The first interface includes a first display area, which includes a first icon and a second icon. The first icon corresponds to a first proportion, and the second icon corresponds to a second proportion. When the first proportion is greater than the second proportion, the background of the first display area is related to the first icon.

[0238] The first interface can be the interface shown in Figure 3B, the first display area can be the target area 301, the first icon can be a circular icon 306, the second icon can be a circular icon 307, the first proportion can be 1 (e.g., 1 / 2), and the second proportion can be 2 (e.g., 1 / 3). The first application is a sports and health application.

[0239] S902, In response to a second operation on the first interface, switch from the first display area to the second display area.

[0240] The second action can be the user swiping down from the top of the page (or refreshing the fitness and health app).

[0241] The second display area includes a first icon and a third icon. The third icon corresponds to a third proportion. When the first proportion is less than the third proportion, the background of the first display area is related to the third icon.

[0242] The second display area can be the target area 351 in Figure 3G, the third icon can be the circular icon 354, and the third proportion can be a proportion of 3, such as approximately 1.5.

[0243] In this way, electronic devices can associate the background of the display area with the icons based on the proportion of each data point. This allows users to determine which data has reached the target value simply by looking at the background of the display area, without having to look at the progress bar or specific data in the icons, thus providing a certain sense of immersion for the user.

[0244] It is understood that the user interface provided in this application embodiment (except for Figure 1) can be switched back and forth after refreshing the sports and health application, and the specific process will not be described in detail here.

[0245] It should be noted that the module names involved in the embodiments of this application can all be defined as other names, as long as they can achieve the function of each module, and no specific restrictions are placed on the module names.

[0246] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the embodiments of this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0247] The display method of the embodiments of this application has been described above. The apparatus for performing the above method provided in the embodiments of this application is described below. Those skilled in the art will understand that the methods and apparatus can be combined and referenced with each other, and the related apparatus provided in the embodiments of this application can perform the steps in the above list sorting method.

[0248] Figure 10 is a schematic diagram of the hardware structure of another electronic device provided in an embodiment of this application.

[0249] The electronic device includes a processor 1001, a communication line 1004, and at least one communication interface (in FIG10, communication interface 1003 is used as an example for illustration).

[0250] The processor 1001 may be a general-purpose CPU, a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits used to control the execution of the program of the present application.

[0251] The communication line 1004 may include circuitry for transmitting information between the aforementioned components.

[0252] Communication interface 1003 uses any transceiver-like device for communicating with other devices or communication networks, such as Ethernet, wireless local area networks (WLAN), etc.

[0253] Possibly, the electronic device may also include a memory 1002.

[0254] The memory 1002 may be a read-only memory (ROM) or other type of static storage device capable of storing static information and instructions, random access memory (RAM) or other type of dynamic storage device capable of storing information and instructions, or electrically erasable programmable read-only memory (EEPROM), compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto. The memory may exist independently and be connected to the processor via communication line 1004. The memory may also be integrated with the processor.

[0255] The memory 1002 stores computer execution instructions for implementing the scheme of this application, and the processor 1001 controls the execution. The processor 1001 executes the computer execution instructions stored in the memory 1002 to implement the method provided in the embodiments of this application.

[0256] It is possible that the computer execution instructions in the embodiments of this application may also be referred to as application code, and the embodiments of this application do not specifically limit this.

[0257] In a specific implementation, as one embodiment, the processor 1001 may include one or more CPUs, such as CPU0 and CPU1 in FIG10.

[0258] In a specific implementation, as one embodiment, the electronic device may include multiple processors, such as processor 1001 and processor 1005 in FIG. 10. Each of these processors may be a single-core (single-CPU) processor or a multi-core (multi-CPU) processor. Here, a processor may refer to one or more devices, circuits, and / or processing cores for processing data (e.g., computer program instructions).

[0259] The display method provided in this application can be applied to electronic devices with communication functions. Electronic devices include terminal devices, and the specific device form of the terminal device can be referred to the above-described related descriptions, which will not be repeated here.

[0260] This application provides a terminal device, which includes a processor and a memory; the memory stores computer execution instructions; the processor executes the computer execution instructions stored in the memory, causing the terminal device to perform the above-described method.

[0261] This application provides a chip. The chip includes a processor, which is used to call a computer program in memory to execute the technical solutions in the above embodiments. Its implementation principle and technical effects are similar to those in the related embodiments described above, and will not be repeated here.

[0262] This application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program. When the computer program is executed by a processor, it implements the methods described above. The methods described in the above embodiments can be implemented wholly or partially by software, hardware, firmware, or any combination thereof. If implemented in software, the functionality can be stored as one or more instructions or code on or transmitted over the computer-readable medium. The computer-readable medium can include computer storage media and communication media, and can also include any medium that can transfer a computer program from one place to another. The storage medium can be any target medium accessible by a computer.

[0263] In one possible implementation, a computer-readable medium may include RAM, ROM, compact disc read-only memory (CD-ROM) or other optical disc storage, disk storage or other magnetic storage devices, or any other medium targeted to carry or to store the required program code in the form of instructions or data structures, and accessible by a computer. Furthermore, any connection is appropriately referred to as a computer-readable medium. For example, if software is transmitted from a website, server, or other remote source using coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave, then coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of medium. As used herein, disks and optical discs include optical discs, laser discs, optical discs, Digital Versatile Discs (DVDs), floppy disks, and Blu-ray discs, where disks typically reproduce data magnetically, while optical discs optically reproduce data using lasers. Combinations of the above should also be included within the scope of computer-readable media.

[0264] This application provides a computer program product, which includes a computer program that, when run, causes a computer to perform the above-described method.

[0265] This application describes embodiments with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processing unit of a general-purpose computer, special-purpose computer, embedded processor, or other programmable device to produce a machine, such that the instructions, which execute via the processing unit of the computer or other programmable data processing device, create means for implementing the functions specified in one or more flowchart illustrations and / or one or more block diagrams.

[0266] The above specific embodiments further illustrate the purpose, technical solution, and beneficial effects of the present invention. It should be understood that the above are merely specific embodiments of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made on the basis of the technical solution of the present invention should be included within the scope of protection of the present invention.

Claims

1. A display method, characterized in that, Applied to electronic devices, the method includes: In response to a first operation of launching a first application, a first interface is displayed. The first interface includes a first display area, which includes a first icon and a second icon. The first icon corresponds to a first proportion, and the second icon corresponds to a second proportion. When the first proportion is greater than the second proportion, the background of the first display area is related to the first icon. In response to a second operation on the first interface, the display area is switched from the first display area to the second display area. The second display area includes a first icon and a third icon. The third icon corresponds to a third proportion. When the first proportion is less than the third proportion, the background of the first display area is related to the third icon.

2. The method according to claim 1, characterized in that, During the display of the first interface, the progress bar in the first icon increases from its starting position to the first position where the first percentage is located, and the progress bar in the second icon increases from its starting position to the second position where the second percentage is located. The background of the first display area displays a first animation effect, which is related to the first icon.

3. The method according to claim 2, characterized in that, The first animation includes a first image, which satisfies one or more of the following conditions: the color of the first image is the same as or similar to the color of the first icon, or the texture of the first image is the same as the texture of the first icon, or the grayscale of the first image is the same as or similar to the grayscale of the first icon.

4. The method according to claim 3, characterized in that, The first image is the last frame of the first animation.

5. The method according to claim 2 or 3, characterized in that, When the color of the first image is the same as the color of the first icon, the first icon includes the first color, and the first image displays the first color in the form of a solid color or a gradient.

6. The method according to any one of claims 1-5, characterized in that, The first display area also includes the third icon, and the background of the first display area further satisfies one or more of the following conditions: When the first proportion, the second proportion, and the third proportion are all greater than 0 and less than 1, and the first proportion is greater than the second proportion and the first proportion is greater than the third proportion, the background of the first display area is related to the first icon; Alternatively, when the first proportion, the second proportion, and the third proportion are all 0, the background of the first display area is related to the first icon; Alternatively, if the first proportion, the second proportion, and the third proportion are all greater than or equal to 1, the background of the first display area is related to the first icon.

7. The method according to claim 5, characterized in that, The background of the first display area also satisfies one or more of the following conditions: When the first proportion is the same as the second proportion, and the first proportion is greater than the third proportion, the background of the first display area is related to the first icon; Alternatively, if the first proportion is the same as the third proportion, and the first proportion is greater than the second proportion, the background of the first display area is related to the first icon; Alternatively, if the second proportion is the same as the third proportion, and the first proportion is less than the second proportion, the background of the first display area is related to the second icon; Alternatively, if both the first percentage and the second percentage are greater than or equal to 1, and the third percentage is less than 1, the background of the first display area is related to the first icon; Alternatively, if both the second percentage and the third percentage are greater than or equal to 1, and the first percentage is less than 1, the background of the first display area is related to the second icon. Wherein, the first icon corresponds to the first priority, the second icon corresponds to the second priority, and the third icon corresponds to the third priority. The first priority is higher than the second priority, and the second priority is higher than the third priority.

8. The method according to any one of claims 1-7, characterized in that, The first application is a sports and health application; the first percentage is used to indicate the achievement rate of the first exercise data relative to the first target value; the second percentage is used to indicate the achievement rate of the second exercise data relative to the second target value; and the third percentage is used to indicate the achievement rate of the third data relative to the first target value.

9. The method according to claim 8, characterized in that, The first exercise data is the number of steps taken, the second exercise data is the calorie consumption, and the third data is the exercise duration.

10. An electronic device, characterized in that, The electronic device includes: one or more processors and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 9.

11. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the one or more processors being used to invoke computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 9.

13. A computer program product, characterized in that, The computer program product includes computer program code that, when run on an electronic device, causes the electronic device to perform the method as described in any one of claims 1 to 9.

Images