Interface display method and electronic equipment

Abstract

According to the interface display method and the electronic device, in the pressing operation process, the electronic device can detect pressure values at different moments and make feedback on a display interface in response to the different pressure values. Different pressure values can correspond to different states (such as colors, moving speeds and the like) of the interface elements, the feedback mode is finer, more conforms to the motion law of the real world and is reflected on a human-computer interaction interface, the interface display effect of the electronic equipment is finer, more conforms to the operation intuition of a user, and the use experience of the user is better.

Description

[0001] This application is a divisional application. The original application has the application number 202510496285.0 and the application date is April 18, 2025. The entire contents of the original application are incorporated herein by reference. Technical Field

[0002] This application relates to the field of terminal device software, and more specifically, to a method for displaying an interface and an electronic device. Background Technology

[0003] Visual interactive animations, through dynamic feedback, help users understand the changing logic of human-computer interaction interfaces. For example, transition animations can clearly define hierarchical relationships, while feedback animations can indicate the results of operations and reduce the learning curve for users using electronic devices. A lack of visual animations may lead to difficulties in understanding or perceptual lag for users, such as abrupt page transitions or unresponsive operations, severely impacting the user experience. Summary of the Invention

[0004] This application provides a method for displaying an interface and an electronic device, which provides more timely feedback to user pressing operations, resulting in a better user experience.

[0005] In a first aspect, a method for displaying an interface is provided, applied to an electronic device, the electronic device including a pressure sensor, the method comprising: receiving a pressing operation continuously applied to the electronic device during a first time period, the pressing operation having a pressure value of a first pressure value at a first moment and a pressure value of a second pressure value at a second moment, the first pressure value and the second pressure value being different, the first time period including the first moment and the second moment; displaying an interface element of a first state in response to the first pressure value; and displaying the interface element of a second state in response to the second pressure value; wherein the first state and the second state are different.

[0006] In one possible implementation, a UI element may include multiple child elements.

[0007] In one possible implementation, the interface elements can be located in the entire display area of ​​the electronic device's interface, or they can be located in a local area of ​​the electronic device's interface.

[0008] For example, the difference between the first state and the second state could refer to the color of the interface elements in the first state being different from that in the second state, or it could refer to the movement speed of the interface elements in the first state being different from that in the second state.

[0009] In one possible implementation, the pressing operation can be applied to a button module of an electronic device, which may integrate a pressure sensor.

[0010] It's understandable that the first moment and the second moment are two different moments within the first time period. The first time period can also include more moments, such as the third moment, the fourth moment, etc., where the pressure value corresponding to the third moment is the third pressure value, and the pressure value corresponding to the fourth moment is the fourth pressure value. Interface elements can also include more states, such as the third state, the fourth state, etc., where the interface elements of the third state correspond to the third pressure value, and the interface elements of the fourth state correspond to the fourth pressure value. In other words, during the pressing operation, pressure can be applied to the electronic device at different moments, and correspondingly, the interface elements on the electronic device's display can show the state corresponding to the pressure value.

[0011] Typically, a pressing operation lasts for a period of time, during which the pressure applied to the electronic device gradually changes. Compared to solutions that only provide feedback on the maximum pressure or duration of the pressing operation, the technical solution of this application allows the electronic device to provide feedback on the pressure value at different moments during the pressing operation. This feedback method is more precise and more in line with the laws of motion in the real world. In terms of the human-computer interface, the electronic device's display effect is more refined, more intuitive, and the user experience is better.

[0012] In conjunction with the first aspect, in some implementations of the first aspect, the first state and the second state are related to the attributes of the interface element.

[0013] In conjunction with the first aspect, in some implementations of the first aspect, the attribute values ​​corresponding to the same attribute of the interface element in the first state and the interface element in the second state are different.

[0014] In other words, the state of a UI element can differ under different pressure values, which can also be understood as the value of a certain attribute of the UI element being different. For example, in the first state, the value of the UI element's transparency (attribute) is A; in the second state, the value of the UI element's transparency (attribute) is B, and A and B are different.

[0015] On the one hand, the attributes of interface elements can change with varying pressure values, and continuous changes in attributes can serve as real-time feedback on the pressure value. On the other hand, the rate of change of attributes can also be considered an attribute of the interface element, providing another form of feedback on the pressure value. In this technical solution, the electronic device can provide more precise feedback on the pressure value of a pressing operation from changes in two different dimensions, enriching the feedback mechanisms for pressing operations in electronic devices.

[0016] In conjunction with the first aspect, in some implementations of the first aspect, the attributes of the interface element include one or more of the following: the visual appearance of the interface element, the layout of the interface element, the rate of change of the visual appearance of the interface element, and the rate of change of the layout of the interface element.

[0017] Generally, the rate of change of an attribute is more closely related to the magnitude of the pressure value. Electronic devices respond to different pressure values ​​by changing the rate of attribute change, and this feedback is more realistic and more in line with the user's operating intuition.

[0018] In conjunction with the first aspect, in some implementations of the first aspect, the visual characteristics of the interface element include one or more of the following: color, transparency, blur level, brightness, contrast, shadow, shape, and animation of the interface element; and / or, the layout of the interface element includes one or more of the following: position, size, spacing, hierarchy, and angle.

[0019] In one possible implementation, the visual rate of change of the interface element includes one or more of the following: the rate of change of color, the rate of change of transparency, the rate of change of blur, the rate of change of brightness, the rate of change of contrast, the rate of change of shadow, the rate of change of shape, and the rate of change of animation.

[0020] In one possible implementation, interface elements can be dynamic elements (also known as motion effects, animations, videos, or GIFs), and the visuals of dynamic elements can include motion effects. The rate of change of the motion effects of interface elements can also be referred to as the rate of change of the dynamic elements.

[0021] In one possible implementation, the rate of change of the layout of the interface elements includes one or more of the following: the rate of change of position (speed), the rate of change of size, the rate of change of spacing, the rate of change of hierarchy, and the rate of change of angle (angular velocity).

[0022] In conjunction with the first aspect, in some implementations of the first aspect, the size of the interface element in the second state is different from the size of the interface element in the first state; the position of the interface element in the second state is different from the position of the interface element in the first state; the shape of the interface element in the second state is different from the shape of the interface element in the first state; the interface element in the second state is the second part of the interface element, and the interface element in the first state is the first part of the interface element, and the first part and the second part are different; the hierarchical relationship between multiple sub-elements in the interface element in the second state is different from the hierarchical relationship between multiple sub-elements in the interface element in the first state; the rate of change of the animation effect of the interface element in the second state is different from the rate of change of the animation effect of the interface element in the first state; the movement speed of the interface element in the second state is greater than the movement speed of the interface element in the first state; the rotation speed of the interface element in the second state is greater than the rotation speed of the interface element in the first state; or, the blurriness of the interface element in the second state is greater than the blurriness of the interface element in the first state.

[0023] In one possible implementation, the rate of change of the blurriness of the interface element in the second state is greater than the rate of change of the interface element in the first state; or, the rate of deformation of the interface element in the second state is greater than the rate of deformation of the interface element in the first state.

[0024] The greater the pressure, the faster the attribute changes; the smaller the pressure, the slower the attribute changes. This means that when a user presses hard, the interface elements change rapidly, while when the user presses lightly, the changes are smaller. This interface feedback scheme better aligns with real-world motion patterns and user intuition, resulting in a better user experience.

[0025] In conjunction with the first aspect, in some implementations of the first aspect, the attribute value of the interface element in the first state or the second state is determined according to a mapping relationship and a pressure value, wherein the mapping relationship is used to indicate the correspondence between the pressure value and M different attribute values ​​of the interface element.

[0026] In one possible implementation, this mapping relationship can be stored locally on the electronic device. During a press operation, in response to the pressure value, the electronic device can determine the attribute value of the interface element corresponding to that pressure value based on the mapping relationship, thereby determining the state of the interface element.

[0027] In one possible implementation, this mapping relationship can be stored in the form of a table.

[0028] It is understandable that different pressure values ​​can correspond to the same or different attribute values, and different attribute values ​​can correspond to different pressure values ​​or pressure value ranges.

[0029] By establishing a mapping relationship between pressure values ​​and attribute values, this technical solution provides an example of implementing the above-mentioned multiple technical solutions, which is conducive to the promotion and application of the technical solutions provided in this application.

[0030] In conjunction with the first aspect, in some implementations of the first aspect, the M attribute values ​​correspond to at least M pressure value levels, the M pressure value levels include a first level and a second level, and the pressure value range corresponding to the first level is different from the pressure value range corresponding to the second level.

[0031] In other words, this mapping relationship is non-linear.

[0032] Generally, during a pressing operation, the pressure value changes non-linearly over time, and the user's sensitivity to different pressure values ​​is also non-linear. Using a non-linear mapping relationship to indicate the connection between pressure values ​​and attribute values, the interface display method and human-computer interaction scheme based on this mapping relationship are more in line with the user's ability to perceive different pressure values. While providing rich interface feedback, it can reduce unnecessary feedback to a certain extent and improve the energy utilization efficiency of electronic devices.

[0033] In conjunction with the first aspect, in some implementations of the first aspect, the pressure value in the pressure value range corresponding to the first gear is less than the pressure value in the pressure value range corresponding to the second gear, and the pressure value range corresponding to the first gear is greater than the pressure value range corresponding to the second gear.

[0034] In other words, when the pressure value is low, the range of pressure values ​​corresponding to a single attribute value is wide; when the pressure value is high, the range of pressure values ​​corresponding to a single attribute value is narrow.

[0035] Typically, during a pressing operation, the increase in pressure is significant when the pressure is low, making the user less sensitive to smaller pressure values; conversely, the increase in pressure is smaller when the pressure is high, making the user more sensitive to larger pressure values. The non-uniform pressure level division in the above technical solution aligns with the human body's ability to perceive different pressure levels. While providing rich interface feedback, it can reduce unnecessary feedback to some extent, improving the energy efficiency of electronic devices.

[0036] In conjunction with the first aspect, in some implementations of the first aspect, M is greater than or equal to 3.

[0037] For M different attribute values, there can be at least M different pressure values. In other words, in this solution, interface elements can respond to at least three different pressure values ​​and present at least three different states. Thus, during a pressing operation, the electronic device can make more interface changes on the display screen corresponding to different pressure values, enriching the feedback scheme of the electronic device to user operations, and making the interface display of the electronic device more refined and sophisticated.

[0038] In conjunction with the first aspect, in some implementations of the first aspect, the interface element includes a first element and a second element, the first element having a first element attribute, the second element having a second element attribute, and the mapping relationship including a first relationship and a second relationship, the first relationship being used to indicate the correspondence between the pressure value and the attribute value of the first element attribute, and the second relationship being used to indicate the correspondence between the pressure value and the attribute value of the second element attribute.

[0039] In this technical solution, the mapping relationship can be used to indicate the correspondence between the attribute values ​​of multiple interface elements and the pressure values.

[0040] When there are multiple interface elements, each element can change its state and switch its attribute value in response to different pressure values. This technical solution is beneficial for enriching the human-computer interaction solutions of electronic devices.

[0041] In conjunction with the first aspect, in some implementations of the first aspect, the attribute includes a first sub-attribute and a second sub-attribute, the mapping relationship includes a first sub-relationship and a second sub-relationship, the first sub-relationship is used to indicate the correspondence between the pressure value and the attribute value of the first sub-attribute, and the second sub-relationship is used to indicate the correspondence between the pressure value and the attribute value of the second sub-attribute.

[0042] In this technical solution, the mapping relationship can be used to indicate the correspondence between the attribute values ​​of different attributes of interface elements and the pressure values.

[0043] When a single interface element includes multiple attributes, the attribute values ​​of different attributes can switch in response to different pressure values. This technical solution is beneficial for enriching the human-computer interaction solutions of electronic devices.

[0044] In conjunction with the first aspect, in some implementations of the first aspect, the interface element is located in a first interface, which also includes a reference element whose attribute value is determined based on the attribute value of the interface element.

[0045] In other words, when the state of an interface element changes in response to different pressure values, the resulting state change of the interface element will also affect the state of the reference element. Or, to put it another way, the state change of the interface element is a primary feedback of the pressure value change, and the state change of the reference element is a secondary feedback of the pressure value change.

[0046] In this technical solution, multiple interface elements located on the same interface can influence each other, and the electronic device can continuously respond to the pressure value during the pressing operation from multiple levels. This technical solution is conducive to enriching the human-computer interaction scheme of electronic devices.

[0047] In conjunction with the first aspect, in some implementations of the first aspect, the first pressure value belongs to a first pressure range, the second pressure value belongs to a second pressure range, the first pressure range corresponds to the first state, and the second pressure range corresponds to the second state.

[0048] One possibility is that the first pressure range is one of the M pressure value settings mentioned above, and the second pressure range is the other one of the M pressure value settings.

[0049] Mapping pressure value ranges to the states of interface elements, or in other words, mapping pressure levels to the states of interface elements, simplifies the mapping process. Compared to a one-to-one mapping of pressure values ​​to interface element states, this approach involves fewer attribute values ​​of interface elements in the mapping, requiring less data storage from the electronic device. In determining the attribute values ​​of interface elements using the mapping and pressure values, the electronic device needs to calculate less data and spends less time, improving the efficiency of pressure value feedback and reducing device lag.

[0050] In conjunction with the first aspect, in some implementations of the first aspect, before displaying the interface element of the first state or the interface element of the second state, the method further includes: acquiring a first pressure signal and a second pressure signal through the pressure sensor; determining the first pressure value based on the first pressure signal; and determining the second pressure value based on the second pressure signal.

[0051] In one possible implementation, the electronic device can process the pressure signal based on a baseline tracking algorithm to determine the pressure value.

[0052] One possibility is that environmental factors (such as temperature and humidity) and sensor aging can affect the sensor's detection results, potentially causing a deviation between the detected pressure value and the actual pressure applied to the electronic device. The electronic device can process the detected pressure signal using a baseline tracking algorithm, which can mitigate the adverse effects of environmental factors on the pressure detection results to some extent.

[0053] In conjunction with the first aspect, in some implementations of the first aspect, before displaying the interface element of the first state or the interface element of the second state, the method further includes: determining that the first pressure value and the second pressure value are greater than or equal to a first pressure threshold.

[0054] In scenarios such as impacts and drops, the button modules of electronic devices may also be subjected to external forces, resulting in accidental touches. This situation does not fall under the category of normal user pressing operations, and users do not have a need to obtain feedback from electronic devices. In order to avoid unnecessary device power consumption caused by these accidental touch scenarios, before displaying interface elements with different states in response to pressure values, electronic devices can determine whether there is a real pressing operation by detecting whether the pressure value is greater than a preset pressure threshold.

[0055] In conjunction with the first aspect, in some implementations of the first aspect, the electronic device further includes a photoelectric sensor and / or an electrocardiogram sensor. Before displaying the interface elements of the first state or the interface elements of the second state, the method further includes: determining one or more of the following: the detection result of the photoelectric sensor satisfies a first condition; the detection result of the electrocardiogram sensor satisfies a second condition; the electronic device is in a screen-on state; or, the electronic device is in a worn state.

[0056] All of the above technical solutions can be used to determine whether there is a real pressing operation, which can reduce unnecessary device power consumption caused by accidental touch events and improve the energy utilization efficiency of the device to a certain extent.

[0057] In conjunction with the first aspect, in some implementations of the first aspect, before receiving a pressing operation that continuously acts on the electronic device for a first time period, the method further includes: the electronic device being in a non-interactive state; receiving a first operation, wherein the electronic device switches from the non-interactive state to an interactive state; the receiving of the pressing operation that continuously acts on the electronic device for a first time period includes: in the interactive state, receiving the pressing operation that continuously acts on the electronic device for a first time period.

[0058] In one possible implementation, the second interface is used to indicate the non-interactive state, and the third interface is used to indicate the interactive state. Switching from the non-interactive state to the interactive state includes switching from the state of displaying the second interface to the state of displaying the third interface.

[0059] The number of interface elements contained in the second interface and the number of interface elements contained in the third interface may be different; and / or, the attributes (such as color, contrast, position, etc.) of the same interface elements contained in the second interface and the third interface may be different.

[0060] As an example, after switching from displaying the second interface to displaying the third interface, some or all of the interface elements originally contained in the second interface can be hidden in the third interface, and / or some or all of the interface elements originally not contained in the second interface can be displayed in the third interface.

[0061] As an example, after switching from displaying the second interface to displaying the third interface, the interface elements that were originally displayed in color A in the second interface are displayed in color B in the third interface, and / or, the interface elements that were originally displayed in contrast C in the second interface are displayed in contrast D in the third interface, and / or, the interface elements that were originally displayed at position Ps1 in the second interface can be displayed at position Ps2 in the third interface.

[0062] Electronic devices respond to user presses only in interactive mode, which can reduce power consumption and extend battery life to some extent. Furthermore, the interface elements displayed on the electronic device can change before and after the switch between the two states, making it easier for users to distinguish between interactive and non-interactive states. This helps reduce the chance of accidental device operation and improves the user experience.

[0063] In conjunction with the first aspect, in some implementations of the first aspect, the electronic device is a wearable device, which includes a button module and the pressure sensor is located within the button module.

[0064] In conjunction with the first aspect, in some implementations of the first aspect, the wearable device is a watch or bracelet, and the interface element is located on the watch face of the wearable device.

[0065] For detailed explanations and descriptions of the beneficial effects of the following technical solutions, please refer to the relevant content in the first aspect; they will not be repeated hereafter.

[0066] In a second aspect, a wearable device is provided, including a button module, a memory, and a processor. The button module includes the pressure sensor, the memory stores program instructions, and the processor executes the program instructions to cause the electronic device to perform the methods of the first aspect and any possible implementation thereof.

[0067] In conjunction with the second aspect, in some implementations of the second aspect, the wearable device is a watch or bracelet, and the interface element is located on the watch face of the wearable device.

[0068] Thirdly, an electronic device is provided, including a memory and a processor, the memory storing computer program instructions, the processor executing the program instructions to cause the electronic device to implement the methods of the first aspect and any possible implementation thereof.

[0069] Fourthly, a display device is provided, the display device including functional modules for implementing the methods of the first aspect and any possible implementation thereof.

[0070] Fifthly, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a computer, enables the implementation of the methods in the first aspect and any possible implementation thereof.

[0071] In a sixth aspect, a computer program product is provided, the computer program product including computer program code, which, when run on a computer, causes the methods in the first aspect and any possible implementation thereof to be executed.

[0072] In a seventh aspect, a computer-readable storage medium is provided that stores computer program code, which, when run on a computer, causes the methods in the first aspect and any possible implementation thereof to be executed.

[0073] Eighthly, a chip is provided, including a processor for reading instructions stored in a memory, wherein when the processor executes the instructions, the chip implements the methods of the first aspect and any possible implementation thereof. Attached Figure Description

[0074] Figure 1 This is a schematic diagram of the hardware architecture of an electronic device provided in an embodiment of this application.

[0075] Figure 2 This is a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application.

[0076] Figure 3 This is a method for displaying an interface provided in an embodiment of this application.

[0077] Figure 4 This is another method for displaying the interface provided in the embodiments of this application.

[0078] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0079] Figure 6 This is a schematic diagram of the interface elements provided in the embodiments of this application.

[0080] Figure 7 This is a schematic diagram illustrating the relationship between pressure value and time during the pressing operation provided in the embodiments of this application.

[0081] Figures 8 to 21 This is a schematic diagram of the graphical user interface provided in the embodiments of this application.

[0082] Figure 22 This application provides a method for selecting a watch face.

[0083] Figure 23 This is a schematic block diagram of an interface display device provided in an embodiment of this application.

[0084] Figure 24 This is a schematic block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0085] The technical solutions in this application will now be described with reference to the accompanying drawings.

[0086] The terminology used in the following embodiments is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to also include expressions such as “one or more,” unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, “at least one” and “one or more” refer to one, two, or more than two. The term “and / or” is used to describe the relationship between related objects, indicating that three relationships may exist; for example, A and / or B can indicate: 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.

[0087] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0088] The methods provided in this application can be applied to mobile phones, tablets, wearable devices, in-vehicle devices (such as in-vehicle displays), augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), and large-screen electronic devices such as smart screens. This application does not impose any restrictions on the specific type of electronic device.

[0089] For example, Figure 1 A schematic diagram of the structure of electronic device 100 is shown. Electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, antenna 1, 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, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an electrocardiogram (ECG) sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a photoelectric sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0090] In some examples, electronic device 100 may also include a capacitive sensor (capacitive touch sensor).

[0091] As one implementation, the pressure sensor 180A described above can be a piezoresistive pressure sensor or a piezoelectric pressure sensor. The pressure sensor 180A can be used to detect pressure data at one or more locations, or in other words, it can be used to detect pressure data at a single location or in a specific area.

[0092] In one implementation, the photoelectric sensor 180H may include one or more light-emitting elements as a light source. The light-emitting element may be a light-emitting diode (LED) or a vertical-cavity surface-emitting laser (VCSEL). The photoelectric sensor 180H may also include one or more photodiodes (PDs) as light detection elements. In this case, multiple light-emitting elements may be arranged in an array to form a light-emitting element array, and multiple photodiodes may be arranged in an array to form a photodiode array.

[0093] As an example, the aforementioned photoelectric sensor 180H can be an infrared sensor, a photoplethysmogram (PPG) sensor, etc.

[0094] In some examples, multiple sensors within an electronic device 100 can work together to form a sensor module that can perform the functions of the multiple sensors it contains.

[0095] As an example, the electronic device 100 may include a button module, which may include a pressure sensor 180A, an ECG sensor 180C, and a photoelectric sensor 180H. One electrode of the ECG sensor 180C may be located on the surface of the contact surface of the button module. When a user presses the button, the ECG sensor can detect the user's electrocardiogram signal through the electrode, the pressure sensor 180A can detect the magnitude of the pressure applied by the user pressing the button, and the light emitted by the light-emitting element in the photoelectric sensor 180H can be received by a photodiode after being reflected by the human body, thereby enabling the detection of the corresponding light signal.

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

[0097] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0098] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction opcode and timing signals to complete the control of fetching and executing instructions.

[0099] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0100] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0101] USB port 130 is a USB standard compliant interface, specifically a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 130 can be used to connect a charger to charge electronic device 100, and can also be used for data transfer between electronic device 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0102] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0103] The charging management module 140 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 receives charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 receives wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also supply power to the electronic device via the power management module 141.

[0104] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, external memory, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

[0105] The wireless communication function of electronic device 100 can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, and baseband processor.

[0106] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with tuning switches.

[0107] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.

[0108] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0109] Electronic device 100 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 is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0110] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a miniature LED, a microLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 194, where N is a positive integer greater than 1.

[0111] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0112] The ISP (Image Signal Processor) is used to process data fed back from the camera 193. For example, when taking a picture, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, transforming it into an image visible to the naked eye. The ISP can also perform algorithmic optimizations on image noise, brightness, etc. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0113] Camera 193 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0114] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when electronic device 100 selects a frequency, the DSP can perform Fourier transforms on the frequency energy.

[0115] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. Thus, electronic device 100 can play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0116] An NPU (Neural Processing Unit) is a computational processor for neural networks (NNs). By borrowing the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it can rapidly process input information and continuously learn on its own. NPUs enable intelligent cognitive applications in electronic devices, such as image recognition, facial recognition, speech recognition, and text understanding.

[0117] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0118] Internal memory 121 can be used to store computer executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of electronic device 100 by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0119] Electronic device 100 can implement audio functions, such as music playback and recording, through audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

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

[0121] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch-sensitive buttons. Electronic device 100 can receive button input and generate key signal inputs related to user settings and function control of electronic device 100.

[0122] The electronic device provided in this application embodiment can run an operating system (OS). This operating system can be various operating systems currently used in the industry, such as an operating system based on OpenHarmony, such as HarmonyOS; or other operating systems such as Android. TM An operating system can refer to the iOS mobile operating system; it can also refer to various open-source operating systems or their derivatives, such as Linux OS and other embedded operating systems; or it can refer to future new operating systems, such as AI operating systems based on artificial intelligence. An operating system is a set of interconnected system software programs that manage and control the operation of electronic devices, utilize and run hardware and software resources, and provide public services to organize user interactions. In electronic devices, the operating system occupies a pivotal position, connecting to the physical hardware layer below and providing a runtime environment for application software above.

[0123] An operating system typically includes a kernel layer, a middleware layer, and an application layer. The application layer includes applications, which can include system applications and third-party applications. The middleware layer is a suite of software, or frameworks, that provides various services to application developers, such as databases, multimedia, and graphics, or capabilities like distributed scheduling and system expansion. For example, the middleware layer can also be broadly divided into a framework layer and / or a system service layer. The framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The system service layer includes the system's core capabilities, providing services to applications through the framework layer. The kernel layer is the layer between hardware and software. The kernel layer can include hardware drivers and the operating system kernel. In addition to providing hardware drivers, the kernel layer also supports functions such as memory management and system process management.

[0124] The basic functions of the electronic device provided in this application can be implemented using a general-purpose operating system or a dedicated operating system. To more clearly illustrate the implementation of the embodiments of this application under a specific operating system, exemplarily, Figure 2 The architecture of HarmonyOS is illustrated, and those skilled in the art can deduce the implementation of the embodiments of this application under other specific operating systems, such as Android. TM Implementation under the operating system.

[0125] The software architecture of electronic devices can be divided into several layers. In some embodiments, from bottom to top, these layers are: kernel layer, system service layer, framework layer, and application layer. The layers communicate with each other through software interfaces. System functions can be tailored, added, or combined at the subsystem level depending on the deployment scenario of different device forms. Each subsystem can also be tailored, added, or combined at the functional level.

[0126] The Kernel Abstraction Layer (KAL) provides basic kernel capabilities to upper layers by shielding the differences between multiple kernels, including but not limited to process / thread management, memory management, file system, network management, and peripheral device management.

[0127] Kernel Subsystem: Supports the selection of a suitable OS kernel for different resource-constrained devices, including but not limited to Linux kernel, HarmonyOS kernel, LiteOS, etc.

[0128] Driver Subsystem: The driver framework is the foundation for the open system hardware ecosystem, providing unified peripheral access capabilities and a framework for driver development and management. The driver framework includes: display drivers, camera drivers, audio drivers, Bluetooth drivers, sensor drivers, etc.

[0129] The system service layer comprises the core capabilities of the system, providing services to applications through the framework layer. This layer includes, but is not limited to, the following subsystems: The system's basic capability subsystems provide fundamental capabilities for the operation, scheduling, and migration of distributed applications across multiple devices. For example, they may include distributed soft bus, distributed data management, distributed task scheduling, and the Ark multi-language runtime. They may also include multi-modal input subsystems, graphics subsystems, security subsystems, and AI subsystems.

[0130] Basic software service subsystems: provide common and general software services; for example, event notification subsystem, telephone service subsystem, multimedia subsystem, etc.

[0131] Enhanced software service subsystem suite: Provides differentiated capability-enhancing software services for different devices; for example, it may include proprietary business subsystems for smart screens, wearable devices, and IoT devices.

[0132] Hardware service subsystem set: provides hardware services; for example, it may include location service subsystem, unified identity and access management (IAM) subsystem, wearable proprietary hardware service subsystem, biometric identification, IoT proprietary hardware service and other subsystems.

[0133] Distributed task scheduling enables distributed service management (discovery, synchronization, registration, and invocation), supporting remote startup, remote invocation, remote connection, and migration of applications across devices.

[0134] Distributed data management enables data synchronization, data storage, data sharing, and data access across all scenarios and devices.

[0135] The distributed soft bus provides communication-related capabilities for seamless interconnection between multiple devices, including: WLAN service capabilities, Bluetooth service capabilities, soft bus, inter-process communication RPC (Remote Procedure Call) and other communication capabilities.

[0136] Ark Multilingual Runtime is a unified compilation runtime platform designed to support the joint compilation and execution of multiple programming languages ​​and multiple chip platforms.

[0137] The framework layer provides application programming interfaces and programming frameworks for applications in the application layer. Examples include the ArkUI framework (which provides a complete infrastructure for UI development of system applications, including UI functionalities such as components, layouts, animations, and interactive events, as well as a real-time interface preview tool), the user application framework, and the Ability framework (an Ability is a lightweight application; the Ability framework schedules and manages the operation and lifecycle of Abilities). Different devices may run different operating systems, and therefore support different APIs.

[0138] The HarmonyOS API is a series of open capabilities provided to support HarmonyOS application development. The HarmonyOS API can be set at the framework layer or independently of the framework layer. Examples include: Audio API (audio service), Push API (push service), and Account API (account service).

[0139] Applications can include system apps and extended / third-party apps. System apps can include the desktop, control bar, settings, contacts, phone, camera, etc., while extended / third-party apps can include social apps, travel apps, etc.

[0140] like Figure 3 The diagram illustrates a method for displaying an interface according to an embodiment of this application, wherein the schematic diagram is located on the left side. Figure 3-1 An interface 10a of a desktop application for an electronic device (such as a mobile phone) is shown. This interface 10a can display icons for one or more applications, such as icon 11 for the "Camera" application. In response to a user tapping icon 11, the electronic device can display a central icon. Figure 3-2 The interface 10b shown is the interface for the camera application. In response to a user pressing icon 11, the electronic device can display a diagram on the right. Figure 3-3 The interface 10c shown may include a shortcut menu 14, which may include one or more functions associated with the camera application. Users can directly access the corresponding functions through the shortcut menu 14.

[0141] Figure 3 In the interactive scheme shown, the electronic device can respond based on the relationship between the pressure value during a pressing operation and a preset threshold. For example, if the maximum pressure value during the pressing and releasing phase is less than the preset threshold, the electronic device can respond to a light press; if the maximum pressure value during the pressing and releasing phase is greater than or equal to the preset threshold, the electronic device can respond to a heavy press. It is understandable that once the maximum pressure value is greater than or equal to the preset threshold and the electronic device has responded to the pressing operation, it will not respond further even if the user continues to press. However, in actual pressing operations, the force acting on the electronic device changes continuously, not just in two states: light press and heavy press. In other words, Figure 3 The interaction scheme shown ignores multiple different press operation states during the operation, or rather, Figure 3 In the interactive scheme shown, the electronic device does not provide feedback on multiple pressing states during the pressing operation, which is inconsistent with the visual, tactile, and other interactive methods based on motion patterns in the real world.

[0142] like Figure 4 The illustration shows a method for displaying an interface according to an embodiment of this application. The electronic device can continuously acquire pressure signals during a user's pressing operation, and can respond in various ways to different pressure signals. The electronic device's feedback to user operations is more consistent with real-world motion patterns, the interface display is more refined, and the user experience is improved.

[0143] S101, the electronic device receives a pressing operation that is continuously applied to the electronic device during the first time period.

[0144] In some examples, the pressing operation can be applied to the button module of an electronic device, which may include a pressing detection module (such as the pressure sensor 180A, touch sensor 180K, etc. mentioned above), or the pressing detection module may be integrated into the button module, which can detect the user's pressing operation.

[0145] For example, the button module can be a mechanical button or a solid-state button. In other words, the button module can achieve the pressing operation through a mechanical structure (such as a spring, a contact, etc.) or through a non-mechanical structure (such as capacitive sensing, pressure sensing, etc.).

[0146] In one possible example, the button module may also include other sensors, such as electrocardiogram sensors, photoelectric sensors, etc. These sensors can work in conjunction with the aforementioned press detection module to jointly realize functions such as detecting user operations (such as press operations).

[0147] For example, the electronic device can be a portable electronic device such as a mobile phone, tablet, or foldable screen device, and the aforementioned button module can be the power button, volume control button, camera function button, etc. of these electronic devices. As another example, the electronic device can be a wearable device such as a watch, bracelet, earphone, or ring, and the aforementioned button module can be the crown of a watch, the power button of a bracelet, the volume control button of an earphone, etc. Yet another example is that the aforementioned button module can be a button module additionally set on the electronic device.

[0148] As one possible implementation, the aforementioned electronic device can be, for example... Figure 5 The following description focuses on the watch 200 and introduces the technical solution provided in this application.

[0149] In some examples, such as Figure 5 As shown, the watch 200 may include a watch body 201 and a watch strap 202. The watch strap 202 can be fixed relative to the watch body 201 and is used to wear the watch 200 on the user's wrist. The watch body 201 may include a button module 204, which can be activated by the user's pressing operation. For example, the side wall of the watch body 201 may include an opening through which part or all of the button module 204 can protrude from the watch body 201.

[0150] As an example, watch 200 may include a display screen 203, which may be fixed to the watch body 201. The display screen 203 may be used to display the graphical user interface of watch 200, such as various watch face interfaces, application interfaces, etc., as described later. When user operation of button module 204 is detected, watch 200 may change the content displayed on display screen 203, thereby providing visual feedback.

[0151] As an example, watch 200 may also include a motor 205, which may be located inside watch case 201. As one implementation, the motor 205 may be positioned close to button module 204. Alternatively, the motor 205 may be integrated within button module 204. Upon detecting user interaction with button module 204, watch 200 may trigger motor 205 to vibrate, providing tactile feedback.

[0152] As an example, watch 200 may also include one or more speakers 206, which may be located inside watch case 201. Upon detecting user operation of button module 204, watch 200 may trigger speaker 206 to play audio to provide auditory feedback.

[0153] As an example, watch 200 may also include a crown (not shown), which may be located on the side wall of watch case 201. The crown may be located on the same side of watch case 201 as button module 204, or the crown and button module 204 may be located on opposite sides of watch case 201. Exemplarily, the crown may include a knob, by which the adjustment, selection, and other functions of watch 200 can be realized.

[0154] In some examples, the pressing operation can be applied to the display module of the electronic device, which may include a pressing detection module (such as the pressure sensor 180A, touch sensor 180K, etc. mentioned above), or the pressing detection module may be integrated into the display module, which can detect the user's pressing operation.

[0155] For example, the pressure detection module described above can be integrated into the display module of a portable electronic device, such as a mobile phone, or the pressure detection module can also be integrated into the display module of a wearable device, such as a watch.

[0156] When the pressure detection module is integrated into the button module, the user can trigger a press operation by pressing the buttons included in the button module with their fingers or other body parts. When the pressure detection module is integrated into the display module, the user can trigger a press operation by pressing the display screen with a stylus, fingers, or other means. This application does not limit the type of operating body used to trigger the press operation.

[0157] During a single press operation, the pressure applied by the user to the electronic device lasts for a period of time, which may include the aforementioned initial time.

[0158] Figure 6 The illustration in Figure 6-1 and indication Figure 6-2 This shows how the pressure applied to an electronic device changes over time during a single press operation.

[0159] As shown Figure 6-1 As shown by curve C1, in a scenario where a user presses and releases an electronic device, a single press operation can generally include a pressing phase and a releasing phase. During the pressing phase, the pressure gradually increases from zero to a maximum value P. m During the lifting phase, the pressure increases from its maximum value P. m It gradually decreases to zero. The pressure applied to the electronic device changes continuously throughout the duration of the pressing operation. The duration of the pressing operation includes both the duration of the pressing phase and the duration of the releasing phase.

[0160] As shown Figure 6-2 As shown by curve C2, in a scenario where a user presses and maintains the pressure on an electronic device, a single press operation can generally include a pressing phase and a holding phase. During the pressing phase, the pressure gradually increases from zero to a maximum value P. m During the maintenance phase, the pressure can be maintained at approximately its maximum value P. m Nearby, or rather, the pressure is roughly at its maximum value P. m The pressure can fluctuate up and down; it is understood that during the maintenance phase, the pressure can be increased and / or decreased. Users can change the pressure or maintain the pressure at a certain level in a single press operation as needed. This application embodiment does not limit this.

[0161] For example, the aforementioned first time can be located in the schematic Figure 6-1 The downward or upward phase, or, initially, partially within the indicated area. Figure 6-1 The downward pressure phase and / or upward pressure phase in the process.

[0162] For example, the aforementioned first time can be located in the schematic Figure 6-2 The downward pressure phase or the maintenance phase, or, initially, it can be partially located in the illustrated phase. Figure 6-2 The pressure phase and / or maintenance phase in the process.

[0163] At the beginning of the pressing phase, or when the user just begins to press (hereinafter referred to as the initial pressing phase), the user's pressing force increases rapidly, and the slope of curve C1 is relatively large during this segment; towards the end of the pressing phase, or when the force is about to reach its maximum value P...m Previously (hereinafter referred to as the end of the pressing phase), the user's pressing force increased slowly, and the slope of curve C1 was relatively small in this segment.

[0164] Generally, in the early stages of the downward pressure phase, the pressure value is small, and the user is not sensitive to changes in the force; in the later stages of the downward pressure phase, the pressure value is large, and the user can easily perceive the slight increase in the force.

[0165] Similar to the pressing phase, in the lifting phase of the pressing operation, at the maximum force P... m Near the point where the force is close to zero, the slope of curve C1 is smaller, and the user is more sensitive to changes in the force. When the force is close to zero, the slope of curve C1 is larger, and the user is less sensitive to changes in the force.

[0166] In some examples, the pressure value of the pressing operation at the first time t1 is the first pressure value P1, and the pressure value of the pressing operation at the second time t2 is the second pressure value P2.

[0167] One possible scenario is that the user presses down on the electronic device and then lifts it up. In this scenario, both the first time t1 and the second time t2 are either in the pressing or lifting phase, or one of the first time t1 and the second time t2 is in the pressing phase and the other is in the lifting phase.

[0168] One possible scenario is that the user presses and holds the electronic device. In this scenario, both the first time t1 and the second time t2 are in the pressing or holding phase, or one of the first time t1 and the second time t2 is in the pressing phase and the other is in the holding phase.

[0169] In some examples, electronic devices can detect the pressure signal corresponding to the pressing operation through a pressure sensor included in the button module, and then convert the pressure signal into a pressure value.

[0170] One possibility is that environmental factors (such as temperature and humidity) and sensor aging can affect the sensor's detection results, potentially causing a deviation between the detected pressure value and the actual pressure applied to the electronic device. In other words, the detected pressure value for the same pressing operation may differ under different environments.

[0171] To minimize the adverse effects of environmental factors on pressure detection results, electronic devices can process the detected pressure signal using a baseline tracking algorithm. Specifically, the electronic device can identify the valid signal and baseline drift in the detected pressure signal and separate these two signals, thereby extracting the valid signal as the basis for calculating the pressure applied during the pressing operation. In this way, the electronic device can promptly adjust the pressure signal to pressure value conversion method when the usage environment changes, thus more accurately detecting the pressure value applied by the user.

[0172] S102, in response to a first pressure value, the electronic device displays interface elements of a first state; in response to a second pressure value, the electronic device displays interface elements of a second state.

[0173] In other words, under the first pressure value, the electronic device displays the first state of the interface elements; under the second pressure value, the electronic device displays the second state of the interface elements.

[0174] The interface elements in the various embodiments of this application can be any element in the user interface displayed on the screen of an electronic device, such as patterns, icons, clocks, or other visual or operable controls displayed in the user interface.

[0175] It's understandable that a UI element can be composed of multiple child elements, and these child elements can all be considered a UI element. In other words, a combination of multiple UI elements can also be called a single UI element.

[0176] It's important to note that UI elements can be fully visible, partially visible and partially hidden, or they can switch between visible and hidden states. In other words, UI elements include both partially visible and partially invisible elements. UI elements can switch between visible and hidden states; for the same UI element, one element might be visible one moment and hidden the next, while another element might be hidden one moment and visible the next.

[0177] like Figure 7 As shown, schematic Figure 7-1 Interface element 21, illustration Figure 7-2 Interface element 22, illustration Figure 7-3 The interface elements 23 in the text are all interface elements.

[0178] Interface elements can have a variety of attributes. For example, the attributes of interface elements can include the visual appearance of the interface element, the layout, the rate of change of the visual appearance of the interface element, the rate of change of the layout of the interface element, etc.

[0179] The visual aspects of interface elements can include color, transparency, blur level, brightness, contrast, shadow, shape, and animation effects; the layout of interface elements can include position, size, spacing, hierarchy, and angle. The rate of change of the visual aspects of interface elements can include the rate of change of color, transparency, blur level, brightness, contrast, shadow, shape, and animation effects; the rate of change of the layout of interface elements can include the rate of change of position, size, spacing, hierarchy, and angle.

[0180] In one possible implementation, interface elements can be dynamic elements (also known as motion effects, animations, videos, or GIFs), and the visuals of dynamic elements can include motion effects. The rate of change of the motion effects of interface elements can also be referred to as the rate of change of the dynamic elements.

[0181] For example, to illustrate Figure 7-1 In this example, the color of interface element 21 can change from green to the yellow of interface element 21a. The visual appearance of interface element 21 can include its color, and the rate of change of its appearance can include the rate of change of its color. For another example, interface element 21 can move to the position of interface element 21a within the XY plane. In this example, the layout of interface element 21 can include its position within the XY plane, and the rate of change of the layout of interface element 21 can include the rate of change (or movement speed) of its position within the XY plane.

[0182] For example, to illustrate Figure 7-2 In this example, the transparency of interface element 22 can change from 20% to 50% as shown in interface element 22a. In this example, the visual appearance of interface element 22 can include transparency, and the rate of change of the visual appearance can include the rate of change of the transparency. For example, [illustration / example] Figure 7-2 In this example, interface element 22 can rotate around the Z-axis to the position of interface element 22a. The layout of interface element 22 can include its position in the XY plane, and the rate of change of the layout of interface element 22 can include the rotation speed of its rotation around the Z-axis to the position of interface element 22a.

[0183] For example, to illustrate Figure 7-3In this example, the contrast of interface element 23 can be changed from the default contrast to the default contrast shown in interface element 23a + 25%. In this example, the visual appearance of interface element 23 can include its contrast, and the rate of change of the visual appearance of interface element 23 can include the rate of change of its contrast. For another example, interface element 23 can move along the Z-axis to the position of interface element 23a. In this example, the layout of interface element 23 can include its position in the XYZ coordinate system, and the rate of change of the layout of interface element 23 can include its movement speed when moving to interface element 23a.

[0184] For example, to illustrate Figure 7-4 In this example, the shape of interface element 24 can be changed to the shape shown in interface element 24a. The visual appearance of interface element 24 can include its shape, and the rate of change of the visual appearance of interface element 24 can include the rate of change of its shape. Similarly, the size of interface element 24 can be changed to the size shown in interface element 24a. In this example, the layout of interface element 24 can include its size, and the rate of change of the layout of interface element 24 can include the rate of change of its size.

[0185] For example, to illustrate Figure 7-5 In this example, the blur level of interface element 25 can change from 0 to 50% as shown by interface element 25a. The visual appearance of interface element 25 can include the blur level, and the rate of change of the visual appearance of interface element 25 can include the rate of change of the blur level. Similarly, the spacing between two adjacent interface elements 25 can change to the spacing between two adjacent interface elements 25a. In this example, the layout of interface elements 25 can include spacing, and the rate of change of the layout can include the rate of change of the spacing.

[0186] The attributes of UI elements can be determined by their values. One possibility is that UI element attributes can have different values. For example, in visual attributes, color can be red (r), green (g), blue (b), etc.; transparency can be 5%, 10%, 65%, etc. In layout attributes, size can be 15 pixels × 30 pixels, 5 pixels × 6 pixels, etc.; position can be (x1, y1), (x2, y2), etc. In visual change rate attributes, color can change at a rate of 6 colors per second; transparency can increase by 5% per second. In layout attributes, size can increase by 2% per second; position can move 3 pixels per second.

[0187] All the attributes of a UI element collectively determine its state. In other words, when the state of a UI element changes, its attributes will change; or, the attributes of a UI element are different in different states; or, the attribute values ​​of the same attribute are different in different states.

[0188] For example, the difference between the first state and the second state may include: the attribute values ​​of the interface elements in the first state are different from the attribute values ​​of the same attributes in the second state.

[0189] In some examples, during a press operation, the state of the interface element can change continuously with the pressure value, or the attribute value of the interface element can change continuously with the pressure value.

[0190] In the preceding text, the interface element displaying a first state in response to a first pressure value may include: determining the attribute of the interface element in the first state in response to the first pressure value, or determining the attribute value of the attribute of the interface element in the first state; similarly, the interface element displaying a second state in response to a second pressure value may include: determining the attribute of the interface element in the second state in response to the second pressure value, or determining the attribute value of the attribute of the interface element in the second state.

[0191] During a user's pressing action, the electronic device can detect a continuous pressure signal and continuously acquire pressure values. The attribute values ​​corresponding to the same attribute can also be numerous and continuously changing. In some examples, the electronic device can respond to pressure values ​​at different times during the pressing action, rather than solely relying on the relationship between the maximum pressure value and a preset threshold. This way, the user can receive feedback from the electronic device's interface at different moments during the pressing action, resulting in a better user experience and a more refined and polished interface display.

[0192] In some examples, different from the preceding text Figure 3 The system can only recognize two pressing states: light press and heavy press. Figure 4 In the scheme shown, the number of different attribute values ​​for the same attribute can be M, and the value of M can be greater than or equal to 3, where M is an integer.

[0193] For M different attribute values, there can be at least M different pressure values. In other words, in this solution, interface elements can respond to at least three different pressure values ​​and present at least three different states. Thus, during a pressing operation, the electronic device can make more interface changes on the display screen corresponding to different pressure values, enriching the feedback scheme of the electronic device to user operations, and making the interface display of the electronic device more refined and sophisticated.

[0194] In some examples, the attribute values ​​of interface elements can be determined based on pressure values ​​and a mapping relationship that indicates the correspondence between pressure values ​​and multiple attribute values ​​of the attribute.

[0195] As an example, the mapping relationship can be represented by the following formula:

[0196] Where R represents the mapping relationship, p(i) can represent the i-th pressure value, q(i) can represent the attribute value corresponding to the aforementioned pressure value, q(i) can be one of the M different attribute values ​​mentioned above, and i is a natural number.

[0197] In some other examples, the mapping relationship can also be represented by graphs, matrices, etc., and this application does not limit this.

[0198] One possibility is that this mapping relationship can be stored on the local storage medium of the electronic device. Upon detecting a press operation, the electronic device can read this mapping relationship and determine the attribute value by combining it with the pressure detection result. Another possibility is that this mapping relationship can be established based on the identification, analysis, and other processing of interface elements contained in the interface. In other words, the above mapping relationship can be preset, or it can be generated by the electronic device based on the interface.

[0199] Table 1 shows a mapping relationship R1 provided in an embodiment of this application, where f0 is greater than 0, a is greater than 0, and n is a positive integer. The speed increment is based on the initial movement speed of the interface element. v Using 0 as a reference, for example, a speed increment of 0.2 times can represent the speed relative to the initial movement speed. v 0, movement speed increased by 0.2 v 0 to 1.2 v 0.

[0200] Table 1 Mapping Relationship R1

[0201] As an example, mapping relationship R1 can be used to indicate the correspondence between different pressure values ​​and the rate of change of the position of the aforementioned interface element 21. This rate of change of position can be represented by the velocity increment of element 21's movement speed in the XY plane. For example, when the pressure value is 0, the velocity increment of interface element 21 in the XY plane is 0; that is, when the pressure value is 0, the movement speed of interface element 21 does not change, and the movement speed is... v 0. For example, when the pressure value is f0 + n × a, the velocity increment of interface element 21 is 0.1 × n × v0, meaning that when the pressure value is f0 + n × a, the movement speed of interface element 21 is 0.1 × n + 1 times the initial movement speed, i.e., (0.1 × n + 1) × v 0.

[0202] In Table 1, as the pressure value gradually increases, the velocity increment also increases, and in a roughly linear manner. That is to say, the mapping relationship R1 shown in Table 1 is a linear relationship.

[0203] To make the feedback of electronic devices to user pressing operations more closely match the user's actual perception, and to improve the feedback efficiency of electronic devices, reduce unnecessary feedback, and improve the energy utilization efficiency of the devices, electronic devices can divide a certain range of pressure values ​​into multiple different pressure value levels in a non-uniform manner; in other words, the above mapping relationship can be a non-linear relationship.

[0204] For example, the pressure range D can be divided into multiple levels, such as a first level and a second level. Each level corresponds to a pressure range of a certain width, and the pressure ranges corresponding to different levels do not overlap. For example, the maximum pressure value corresponding to the first level is less than or equal to the minimum pressure value corresponding to the second level.

[0205] It is understandable that the range of pressure values ​​corresponding to a pressure setting can be equal to the difference between the maximum and minimum pressure values ​​corresponding to that pressure setting.

[0206] In some examples, when the pressure value is low, the range of pressure values ​​corresponding to the same pressure level can be wider, while when the pressure value is high, the range of pressure values ​​corresponding to the same pressure level can be narrower. This non-uniform division method conforms to the human body's ability to perceive low pressure values ​​less acutely and high pressure values ​​more acutely. Interaction schemes based on this non-uniform division method can improve the user experience.

[0207] For example, refer to Figure 8 The pressure values ​​corresponding to gears 0, 1, 2, and 3 are relatively small, while the intervals between gears 0 and 1, 1 and 2, and 2 and 3 are relatively large, resulting in a wider pressure range (L1). Conversely, the pressure values ​​corresponding to gears 998, 999, and 1000 are relatively large, while the intervals between gears 998 and 999, and 999 and 1000 are relatively small, resulting in a narrower pressure range (L2).

[0208] Between gear 0 and gear 1000, there can be more pressure value gears corresponding to different pressure value ranges. For example, refer to... Figure 8 Between gear 0 and gear 1000, there can also be gears j-1, j, and j+1. The pressure values ​​corresponding to these gears are between the pressure values ​​corresponding to gear 3 and gear 998. The pressure value range L3 corresponding to the interval between gear j-1 and gear i, and the interval between gear j and gear j+1, can be between the aforementioned pressure value ranges L1 and L2. Here, j is an integer greater than or equal to 1.

[0209] In some other examples, by dividing the pressure into more granular segments, electronic devices can provide different feedback for different time periods during the pressure-down phase. This makes the electronic devices more responsive to user actions, more in line with the laws of motion in the real world, and provides a better user experience.

[0210] Based on the above-mentioned non-uniform division method, Table 2 shows another mapping relationship R2 provided by the embodiments of this application. In Table 2, the velocity increment is based on the initial movement velocity of the interface element. v 0 is for reference.

[0211] Table 2 Mapping Relationship R2

[0212] As an example, the mapping relationship R2 can be used to indicate the correspondence between different pressure values ​​and the rate of change of the position of the aforementioned interface element 21. The rate of change of the position of interface element 21 can be used to represent the velocity increment of its movement speed in the XY plane. For example, when the pressure is 0-100gf or 100gf-180gf, the velocity increment of interface element 21 in the XY plane is 0.2. v 0; Under pressures of 180-220gf, 220-260gf, and 260-300gf, the velocity increment of interface element 21 in the XY plane is 0.3. v 0; Under a pressure of 998-999 gf, the velocity increment of interface element 21 in the XY plane is 2.9. v 0; Under pressure of 999-1000gf, the velocity increment of interface element 21 in the XY plane is 3. v 0.

[0213] In mapping relationship R2, under low pressure conditions (e.g., less than 180 gf), the velocity increment remains relatively small, and an increase in pressure does not map to a change in velocity increment. For example, when the pressure increases from 10 gf to 150 gf, the velocity increment remains 0.2. v0. In other words, an increase in pressure of 140gf will not change the speed increment; the movement speed of interface element 21 will increase uniformly. Under higher pressure (e.g., greater than 998gf), the mapping relationship between speed increment and pressure changes more rapidly. For example, at a pressure of 998.5gf, the speed increment is 2.9. v 0; at a pressure of 999.5 gf, the velocity increment is 3. v 0. In other words, if the pressure increases by 1gf, the speed increment will change, and the movement speed of interface element 21 will increase faster.

[0214] In some examples, the attributes of a UI element may include a first sub-attribute and a second sub-attribute. This mapping relationship may include a first sub-relationship and a second sub-relationship. The first sub-relationship can be used to indicate the correspondence between the pressure value and the attribute value of the first sub-attribute, and the second sub-relationship can be used to indicate the correspondence between the pressure value and the attribute value of the second sub-attribute. In other words, the above mapping relationship can be used to indicate the correspondence between the attribute values ​​of different attributes of the UI element and the pressure value, respectively.

[0215] As an example, Table 3 shows another mapping relationship R3 provided by the embodiments of this application. In Table 3, the shape variable is based on the initial shape of the interface element (the shape when no pressing operation occurs), and the blur degree is also based on the initial blur degree of the interface element (the blur degree when no pressing operation occurs).

[0216] Table 3 Mapping Relationship R3

[0217] The mapping relationship R3 shown in Table 3 can be used to indicate the correspondence between different pressure values ​​and the dimensions of the aforementioned interface element 24. The dimensions of the interface element 24 can be represented by its deformation. The mapping relationship R3 can also be used to indicate the correspondence between different pressure values ​​and the degree of ambiguity of the interface element 24. For example, when the pressure is 0-100gf or 100gf-180gf, the deformation of the interface element 24 is 0% (i.e., no deformation occurs), and the degree of ambiguity is 0% (i.e., no ambiguity); when the pressure is 180-220gf, 220-260gf, or 260-300gf, the deformation of the interface element 24 is 2% (the size becomes 98% of the initial size), and the degree of ambiguity is 0.5%; when the pressure is 998-999gf, the deformation of the interface element 24 is 95%, and the degree of ambiguity is 99%; when the pressure is 999-1000gf, the deformation of the interface element 24 is 97%, and the degree of ambiguity is 100%.

[0218] In some examples, a single interface may include multiple interface elements, such as a first element and a second element. The first element may have a first element attribute, and the second element may have a second element attribute. The mapping relationship described above can include a first relationship and a second relationship. The first relationship can be used to indicate the correspondence between the pressure value and the attribute value of the first element, and the second relationship can be used to indicate the correspondence between the pressure value and the attribute value of the second element. In other words, the mapping relationship described above can be used to indicate the correspondence between the attribute values ​​of the respective attributes of multiple interface elements on the interface and the pressure value.

[0219] One possibility is that interface elements 24 and 25 mentioned above can be located on the same interface. Based on this, taking the above mapping relationship R3 as an example, the mapping relationship R3 can be used to indicate the correspondence between different pressure values ​​and the deformation of interface element 24. The mapping relationship R3 can also be used to indicate the correspondence between different pressure values ​​and the degree of fuzziness of interface element 25.

[0220] For example, under pressures of 0-100gf or 100gf-180gf, the deformation of interface element 24 is 0% (i.e., no deformation occurs), and the blurriness of interface element 25 is 0% (i.e., no blurriness); under pressures of 180-220gf, 220-260gf, and 260-300gf, the deformation of interface element 24 is 2% (the size becomes 98% of the initial size), and the blurriness of interface element 25 is 0.5%; under pressures of 998-999gf, the deformation of interface element 24 is 95%, and the blurriness of interface element 25 is 99%; under pressures of 999-1000gf, the deformation of interface element 24 is 97%, and the blurriness of interface element 25 is 100%.

[0221] In some examples, electronic devices can determine the attribute values ​​of interface elements based on real-time test results of pressure values ​​during the pressing operation and the above mapping relationship, and provide feedback to the user's pressing operation.

[0222] For example, an electronic device can determine the attribute value corresponding to the pressure value based on the real-time test results of the pressure value.

[0223] For example, in the above mapping relationship R3, the gear corresponding to a pressure value of 200gf is 3, the deformation is 2%, and the ambiguity is 1%; the gear corresponding to a pressure value of 240gf is 4, the deformation is 3%, and the ambiguity is 1.5%.

[0224] For example, an electronic device can determine the attribute value corresponding to the pressure value based on the change in the pressure value (increase or decrease) and the real-time test results of the pressure value.

[0225] As an example, when the pressure value increases from gear PB to gear PA, for a pressure value that is greater than the upper limit of the pressure value range corresponding to gear PB and less than the upper limit threshold PT+ of gear PB (the upper limit threshold PT+ is within the pressure value range corresponding to gear PA), its corresponding attribute value can be the attribute value corresponding to gear PB; when the pressure value decreases from gear PA to gear PB, for a pressure value that is less than the lower limit of the pressure value range corresponding to gear PA and greater than the lower limit threshold PT- of gear PA (the lower limit threshold PT- is within the pressure value range corresponding to gear PB), its corresponding attribute value is the attribute value corresponding to gear PA.

[0226] For example, the mapping relationship R3 described above can also include information on multiple upper limit thresholds and multiple lower limit thresholds. These upper and lower limit thresholds can correspond to pressure value gears. For example, the lower limit threshold for gear 3 is 145gf, and the upper limit threshold for gear 2 is 205gf. Thus, when the pressure value increases from 150gf to 200gf, the deformation and ambiguity corresponding to the 200gf pressure value can be the same as those corresponding to gear 2; when the pressure value decreases from 200gf to 150gf, the deformation and ambiguity corresponding to the 150gf pressure value can be the same as those corresponding to gear 3.

[0227] The method of determining attribute values ​​based on pressure values ​​and mapping relationships described above conforms to the Schmitt trigger principle, which can improve the smoothness of electronic devices' response to user pressing operations and enhance the user experience to a certain extent.

[0228] In actual use, the button module of electronic devices may be subjected to external force and accidentally touched in scenarios such as impact or drop. This situation does not belong to the normal pressing operation of the user, and the user does not need to obtain feedback from the electronic device. In order to avoid unnecessary power consumption caused by these accidental touch scenarios, the electronic device can first determine whether there is a real user pressing operation before displaying interface elements with different states in response to pressure values.

[0229] In some examples, the electronic device can determine whether a genuine press operation has occurred by detecting whether the pressure value is greater than a preset pressure threshold. Specifically, before displaying a first-state interface element in response to a first pressure value, or before displaying a second-state interface element in response to a second pressure value, the electronic device can determine whether the first and second pressure values ​​are greater than or equal to the first pressure threshold. If the first pressure value is greater than or equal to the first pressure threshold, the interface element of the first state is displayed; if the second pressure value is greater than or equal to the second pressure threshold, the interface element of the second state is displayed.

[0230] For example, refer to the preceding text Figure 6The first pressure threshold can be the pressure value P. th Before displaying the interface elements of the first state, the electronic device can first determine that the first pressure value P1 is greater than or equal to the pressure value P. th Before displaying the interface elements of the second state, the electronic device can first determine that the second pressure value P2 is greater than or equal to the pressure value P. th .

[0231] The first pressure value P1 is greater than or equal to the pressure value P th In this case, the electronic device displays the interface elements of the first state; the first pressure value P1 is less than the pressure value P. th In such cases, the electronic device can determine that the first pressure value P1 does not correspond to a real pressing operation, and therefore will not display the interface elements of the first state, or in other words, the electronic device can ignore the first pressure value P1.

[0232] The second pressure value P2 is greater than or equal to the pressure value P. th In this case, the electronic device displays the interface elements of the second state; the second pressure value P2 is less than the pressure value P. th In such cases, the electronic device can determine that the second pressure value P2 does not correspond to a real pressing operation, and therefore will not display the interface elements of the second state, or in other words, the electronic device can ignore the second pressure value P2.

[0233] Similarly, in order to reduce unnecessary device power consumption caused by accidental touch events, electronic devices can also use other methods to determine whether a real press operation has occurred.

[0234] In some examples, an electronic device can determine the presence of a genuine press operation by one or more of the following: the result of a photoelectric sensor meets a first condition; the detection result of an electrocardiogram sensor meets a second condition; the electronic device is in a screen-on state; or the electronic device is in a wearing state.

[0235] In one possible example, the photoelectric sensor functions through the principle of light reflection; that is, light emitted by the light source component of the photoelectric sensor is reflected by the human body and then received by the receiving component of the photoelectric sensor. For example, the photoelectric sensor can be the PPG sensor mentioned earlier. In this case, the first condition can be that the intensity of the light received by the photoelectric sensor is greater than or equal to an intensity threshold, or the first condition can be that the ratio of the intensity of the light received by the photoelectric sensor to the intensity of the light emitted by the light source can be greater than or equal to a ratio threshold.

[0236] An electrocardiogram (ECG) sensor can include two electrodes, which can be located on two different surfaces of an electronic device. For example, one electrode could be on the bottom of a watch, and the other on the side (such as on a button module). When different, relatively far parts of the human body come into contact with these two electrodes, the ECG sensor can detect an electrocardiogram (ECG) signal, thereby determining whether there has been a genuine user interaction. Based on this working principle, the second condition mentioned above can be the detection of an ECG signal.

[0237] Whether the screen is on or off, electronic devices may be squeezed or bumped. In most cases, the user's actual pressing operation is based on the electronic device being in the on state. Therefore, determining that the electronic device is in the on state before responding to the pressure value on the interface can reduce the power consumption waste caused by accidental touches to a certain extent.

[0238] In one possible implementation, the electronic device can determine whether the device is in a screen-on state based on the operating status of the display module.

[0239] For wearable devices like watches, users interact with the device more frequently and are more likely to perform press operations while the device is being worn. Therefore, confirming that the wearable device is being worn before responding to pressure values ​​on the interface can reduce power consumption waste caused by accidental touches.

[0240] In one possible implementation, the wearable device can determine whether it is being worn based on one or more of an accelerometer, gyroscope, ambient light sensor, etc.

[0241] like Figures 9 to 15 The illustration shows an example of the application of the interface display method provided in this application on a wearable device. In these examples, interface elements capable of continuously changing in response to pressure values ​​are located on the watch face of the wearable device.

[0242] It should be noted that in the following examples, the interface elements can continuously change in response to changes in pressure value, thus providing feedback effects that are more consistent with the laws of motion in the real world and enhance the user experience. For a detailed explanation of these beneficial effects, please refer to the introduction above.

[0243] For ease of explanation, in the following examples, the direction perpendicular to the dial interface is taken as the Z-axis direction, the plane on which the dial interface is located is called the XY plane, the horizontal direction of the dial interface is taken as the X-axis direction, and the vertical direction of the dial interface is taken as the Y-axis direction.

[0244] Figure 9 The image shows three different display states of the dial interface 30, which are illustrated below. Figure 9-1The dial interface 30a in the middle is illustrated. Figure 9-2 The dial interface 30b and illustration Figure 9-3 The dial interface in the 30c.

[0245] As an example, the dial interface 30 may include elements 32, 34, and 36. Element 32 may include elements such as mountains and trees; element 36 may contain a digital clock and date; and element 34 may include figures and a small boat. Parts of element 32 may be obscured by element 36 and / or element 34.

[0246] For example, the dial interface 30 can be considered as composed of layers stacked along the Z-axis. The dial interface 30 may include a background layer and a foreground layer, with the foreground layer located on the side of the background layer closer to the paper along the Z-axis. Elements 32, 34, and 36 can be located on different layers. Specifically, element 32 can be located on the background layer of the dial interface 30; element 36 can be located on the foreground layer of the dial interface 30; and element 34 can be located on the foreground layer.

[0247] exist Figure 9 In the example shown, the interface element that can change state in response to pressure value can be element 32 and / or element 34. The layout of element 32 (and / or element 34) can be its position on the dial interface 30, and the rate of change of the layout of element 32 (and / or element 34) can be the rate of change of its position in the XY plane.

[0248] When a pressing operation is detected that continues over a period of time on the electronic device, relative movement can occur between elements 32 and 34 in the XY plane. For example, combined with Figure 9 The three diagrams show that when the user continuously presses the electronic device, element 34 can move to the left (or right) of the dial interface relative to element 32, and correspondingly, element 32 can move to the right (or left) of the dial interface relative to element 34.

[0249] Optionally, in the absence of a press operation applied to the electronic device, elements 32 and 34 may undergo relative movement in the XY plane, having an initial relative movement velocity. If a press operation is detected that continues for a period of time on the electronic device, the relative movement velocity between elements 32 and 34 can be determined based on the pressure value of the press operation.

[0250] It is understandable that the relative movement between elements 32 and 34 can be achieved in various ways. For example, element 32 may remain stationary while element 34 moves, or element 32 may move while element 34 remains stationary, or both elements 32 and 34 may move.

[0251] In one possible example, element 34 remains stationary, while element 32 moves in response to a user's continuous pressing action on the electronic device. Element 32 can move continuously, and optionally, the position of element 32 can be cyclical. For example, element 32 moves according to the diagram. Figure 9-1 To indicate Figure 9-2 Then to the indication Figure 9-3 After the order is changed, it can be transformed into a schematic diagram. Figure 9-1 The relative positions shown, and then continue according to the diagram. Figure 9-1 To indicate Figure 9-2 Then to the indication Figure 9-3 The order of elements changes, thus visually creating the effect that element 34 is constantly moving.

[0252] During the pressing operation, when the pressure value is large, the relative movement speed between elements 32 and 34 can be large; when the pressure value is small, the relative movement speed between elements 32 and 34 can be small.

[0253] For example, to illustrate Figure 9-1 The corresponding pressure value can be F11, and the relative moving speed between elements 32 and 34 in this diagram is V11; Figure 9-2 The corresponding pressure value can be F12. The relative moving speed between elements 32 and 34 in this diagram is V12. Figure 9-3 The corresponding pressure value can be F13, and the relative moving speed between elements 32 and 34 is V13. When F11 is less than F12 and F12 is less than F13, V11 is less than V12 and V12 is less than V13.

[0254] For example, if the relative movement speed between elements 32 and 34 changes, element 34 can also change accordingly. (See reference) Figure 9 , indicating Figure 9-1 The water ripples around the small boat are relatively slight, indicating the low relative speed of movement between elements 32 and 34; Figure 9-3 In the image, the ripples around the small boat are quite noticeable, indicating a relatively high speed of movement between elements 32 and 34; this also suggests... Figure 9-2 In the middle, the water ripples around the small boat are between the first two, used to illustrate that the relative speed of movement between element 32 and element 34 is between the first two cases.

[0255] Understandably, during the pressing operation, if the pressure value is maintained at F11, the relative movement speed between elements 32 and 34 can be maintained at V11. Similarly, if the pressure value is maintained at F13, the relative movement speed between elements 32 and 34 can be maintained at V13.

[0256] In one possible example, the relative positions of elements 32 and 34 are as shown in the diagram. Figure 9-1 To indicate Figure 9-2 Then to the indication Figure 9-3 The sequential cyclical change, as illustrated Figure 9-3 The corresponding pressure value is relatively large, and it is shown in the diagram. Figure 9-3 The state change shown is illustrated. Figure 9-1 During the process shown, the pressure value remains at a relatively high level. In this case, when it changes to the indicated state... Figure 9-1 At that time, the ripples around the small boat can be quite noticeable, consistent with the indication. Figure 9-3 Similar to the water waves in the middle.

[0257] In another possible example, element 34 could be a dynamic element depicting a person rowing a boat. The rate of change of the animation of element 34 is the rate at which the person is rowing. In response to an increase in pressure, the person can row faster. In response to a decrease in pressure, the person can row slower.

[0258] It is understood that the changes in the relative speed between elements 32 and 34 described above are merely illustrative, and the relative speed between elements 32 and 34 can also be shown in the diagram. Figure 9-3 To indicate Figure 9-2 Then to the indication Figure 9-1 The order of elements may vary, or other variations are not limited in this application.

[0259] For example, during the pressing phase of the pressing operation, elements 32, 34, etc., can be executed as shown in the diagram. Figure 9-1 , indication Figure 9-2 , indication Figure 9-3 The sequence changes, and during the lifting phase of the pressing operation, elements 32, 34, etc., can be arranged according to the diagram. Figure 9-3 , indication Figure 9-2 , indication Figure 9-1 The order of elements is not restricted in this application.

[0260] For example, during the pressing phase of the pressing operation, elements 32, 34, etc., can be executed as shown in the diagram. Figure 9-1 , indication Figure 9-2 , indication Figure 9-3 The sequence of changes occurs during the maintenance phase of the press operation, when the pressure value maintained by the user corresponds to... Figure 9-3 In the state shown, elements 32, 34, etc., can maintain the schematic representation. Figure 9-3 The state shown.

[0261] It should be noted that, in the illustration Figure 9-1 The state and illustration of element 32, etc. Figure 9-2Between the states of element 32 shown, the electronic device can also display more states of element 32 that fall between these two states. Similarly, in the illustration... Figure 9-2 The state and illustration of element 32 shown Figure 9-3 Between the states of element 32 shown, the electronic device can also display more states of element 32 that are between these two states. Figure 9 The three states of element 32 shown are merely illustrative; other states are not shown.

[0262] The dial interface 30 may also include more interface elements, such as interface elements for indicating the remaining battery power of the device. These interface elements may also change in appearance, layout, rate of visual change, or rate of layout change in response to different pressure values. For example, the interface elements for indicating the remaining battery power of the device may display different colors under different pressure values, and the rate of color switching may also be different for different pressure values.

[0263] Figure 10 The image shows three different display states of the dial interface 40, which are illustrated below. Figure 10-1 The dial interface 40a in the middle is illustrated. Figure 10-2 The dial interface 40b and illustration Figure 10-3 The dial interface in the 40c.

[0264] As an example, the dial interface 40 may include elements 42, 44, and 46. Element 42 may be a sphere (displayed as a circle in the diagram); element 46 may include a digital clock and partially obscure element 42; element 44 is a ring and surrounds elements 42 and 46. In other words, in the dial interface 40, elements 42 and 46 are roughly located in the middle area of ​​the interface, while element 44 is roughly located at the edge area of ​​the interface.

[0265] exist Figure 10 In the example shown, the interface element that can change state in response to pressure value can be element 42. The layout of element 42 can include at least one of size, position, and angle. The rate of change of the layout of element 42 can include at least one of the rate of change of size, the rate of change of position, or the rate of change of angle.

[0266] If a pressing operation is detected that continues for a period of time on the electronic device, element 42 can rotate while moving along the Z-axis. For example, combined with Figure 10 The three diagrams show that when the user continuously presses the electronic device, element 42 can be activated from the diagram. Figure 10-1 While rotating, it moves to the position shown in the diagram along the Z-axis, closer to the paper. Figure 10-2The center position is located at the middle position along the Z-axis, then moved to the indicated position. Figure 10-3 The position of element 42 away from the paper along the Z-axis. Because the position of element 42 changes along the Z-axis, its dimensions also change. (Illustration) Figure 10-1 In the diagram, element 42 is closest to the paper surface and has the largest area; Figure 10-3 In the diagram, element 42 is the furthest from the paper and has the smallest area; illustration Figure 10-2 In the above, element 42 is positioned between the two elements along the Z-axis, and its area is also between the two elements.

[0267] As another interpretation, when a pressing operation is detected that continues over a period of time on the electronic device, the size of element 42 can change in response to different pressure values ​​within that period. For example, combined with Figure 10 The three diagrams show that, with the user continuously pressing the electronic device, the size of element 42 can be adjusted from the schematic diagram. Figure 10-1 The larger changes are illustrated in the diagram. Figure 10-2 The middle part, then changed to the illustration Figure 10-3 The smaller one.

[0268] In one possible example, element 42 can be as shown in the diagram. Figure 10-1 , indication Figure 10-2 and indication Figure 10-3 The sequence changes and remains in the indicated position. Figure 10-3 The state shown. Alternatively, element 42 can be as illustrated. Figure 10-1 , indication Figure 10-2 and indication Figure 10-3 After the order changes, follow the diagram. Figure 10-3 , indication Figure 10-2 , indication Figure 10-1 The order is reversed.

[0269] For example, when a user presses and releases the button, the pressure applied by the user to the electronic device rises from zero to a maximum value and then falls back to zero, and this maximum value corresponds to the indicated value. Figure 10-3 Element 42 can be followed as shown in the diagram. Figure 10-1 , indication Figure 10-2 and indication Figure 10-3 After the order changes, follow the diagram. Figure 10-3 , indication Figure 10-2 , indication Figure 10-1 The order is reversed.

[0270] For example, when a user presses and maintains pressure, the pressure applied by the user to the electronic device rises from zero to its maximum value and then remains near that maximum value. When the pressure maintained by the user corresponds to... Figure 10-3 In the state shown, element 42 can be executed as illustrated. Figure 10-1 , indication Figure 10-2and indication Figure 10-3 The sequence changes and remains in the indicated position. Figure 10-3 The state shown.

[0271] It is understood that the above-described changes in the state of element 42 are merely illustrative, and element 42 can also be modified as shown in the diagram. Figure 10-3 To indicate Figure 10-2 Then to the indication Figure 10-1 The order of elements may vary, or other variations are not limited in this application.

[0272] It should be noted that, in the illustration Figure 10-1 The state and illustration of element 42 shown Figure 10-2 Between the states of element 42 shown, the electronic device can also display more states of element 42 that are between these two states. Similarly, in the illustration Figure 10-2 The state and illustration of element 42 shown Figure 10-3 Between the states of element 42 shown, the electronic device can also display more states of element 42 that are between these two states. Figure 10 The three states of element 42 shown are merely illustrative; many other states are not shown.

[0273] During the pressing operation, when the pressure value is large, the movement speed of element 42 can be large; when the pressure value is small, the movement speed of element 42 can be small.

[0274] For example, to illustrate Figure 10-1 The corresponding pressure value is F21, and the moving speed of element 42 in this diagram is V21; (Diagram) Figure 10-2 The corresponding pressure value is F22, and the moving speed of element 42 in this diagram is V22; Figure 10-3 The corresponding pressure value is F23, and the moving speed of element 42 in this diagram is V23. When F21 is less than F22 and F22 is less than F23, V21 is less than V22 and V22 is less than V23.

[0275] One possibility is that element 42 can also rotate as it moves along the Z-axis. Its rotational speed could also change continuously in response to different pressure values. For example, its rotational speed would be higher under higher pressure and lower under lower pressure.

[0276] In one possible example, element 42 follows the schematic. Figure 10-1 , indication Figure 10-2 and indication Figure 10-3 The sequence changes and remains in the indicated position. Figure 10-3 The state shown. (Compared to the example) Figure 10-3The corresponding pressure value is relatively high, and it remains at a relatively high pressure value. In this case, element 42 can maintain the schematic. Figure 10-3 The state shown is such that its position and size no longer change, but it continues to rotate. Accordingly, the rate of change of position and the rate of change of size can be zero, and the rotation speed can correspond to the magnitude of the pressure value.

[0277] Figure 11 The image shows a watch face 50. As an example, the watch face 50 may include elements 52, 54, and 56. Element 52 includes a sphere (shown as a circle in the image); element 56 includes a digital clock; element 54 is ring-shaped and includes multiple scales in its circumference, and element 54 surrounds elements 52 and 56; element 56 may obscure a portion of element 52.

[0278] exist Figure 11 In the example shown, the interface elements that can change state in response to pressure values ​​can be elements 52 and 54. The layout of element 52 can be angled, and the rate of change of the layout can be the rate of change of the angle; the layout of element 54 can also be angled, and the rate of change of the layout can also be the rate of change of the angle. When a pressing operation is detected that continues for a period of time on the electronic device, element 52 can rotate around axis T, and element 54 can rotate around the Z-axis in response to different pressure values ​​within that period. During the pressing operation, when the pressure value is large, the rotation speed of both elements 52 and 54 is large; when the pressure value is small, the rotation speed of both elements 52 and 54 is small.

[0279] For example, when the pressure value is F31, the rotational speed of element 52 is ω312, and the rotational speed of element 54 is ω314; when the pressure value is F32, the rotational speed of element 52 is ω322, and the rotational speed of element 54 is ω324; when the pressure value is F33, the rotational speed of element 52 is ω332, and the rotational speed of element 54 is ω334. When F31 is less than F32, and F32 is less than F33, ω312 is less than ω322, and ω322 is less than ω332; ω314 is less than ω324, and ω324 is less than ω334.

[0280] In one possible example, element 52 can rotate cyclically about axis T, and element 54 can rotate cyclically about axis Z. In other words, element 52 can return to its starting position and continue rotating after rotating 360 degrees about axis T, and element 54 can return to its starting position and continue rotating after rotating 360 degrees about axis Z.

[0281] Optionally, elements 52 and 54 may have an initial rotational speed when no pressing operation is received on the electronic device. When a pressing operation is detected that continues to act on the electronic device for a period of time, the rotational speed of elements 52 and 54 may change with the pressure value of the pressing operation.

[0282] The dial interface 50 may also include more interface elements, such as interface elements for indicating heart rate, interface elements for indicating date, etc. These interface elements may also change their visual attributes, interactive attributes, or layout attributes in response to different stress values, and this application does not limit this.

[0283] Figure 12 The image shows three different display states of the dial interface 60, which are illustrated below. Figure 12-1 The dial interface 60a in the middle is illustrated. Figure 12-2 The dial interface 60b and illustration Figure 12-3 The dial interface in the 60c.

[0284] As an example, the dial interface 60 may include element 62 and element 66. Element 62 is a sphere (displayed as a circle in the diagram); element 66 includes a digital clock. Element 62 may include a shaded area 62-1 and a highlighted area 62-2, which can be combined to form a circle. Element 66 may obscure a portion of element 62.

[0285] Understandably, in some other examples, the shadow portion 62-1 and the highlight portion 62-2 of element 62 can also be two separate interface elements, for example, the shadow portion 62-1 is a child element 62-1, and the highlight portion 62-2 is a child element 62-2.

[0286] exist Figure 12 In the example shown, the interface elements that can change state in response to pressure values ​​can be a shadow portion 62-1 and a highlight portion 62-2. The layout of the shadow portion 62-1 can include size and / or angle, and visually it can include shape; the layout of the highlight portion 62-2 can include size and / or angle, and visually it can include shape.

[0287] When a pressing operation that has been continuously applied to the electronic device for a period of time is detected, the shape and size of the shaded portion 62-1 and the highlighted portion 62-2 of element 62 may change.

[0288] For example, combining Figure 12 The three diagrams in the diagram show that, with the user continuously pressing the electronic device, the size of the shaded area 62-1 can be determined by the diagram. Figure 12-1 Transform the larger area in the diagram to the schematic Figure 12-2The medium area in the diagram is then transformed to the schematic. Figure 12-3 The smaller area in the diagram. Accordingly, when the user continues to press the electronic device, the size of the highlighted portion 62-2 can be determined by the schematic diagram. Figure 12-1 Transform the smaller area in the diagram to the schematic Figure 12-2 The medium area in the diagram is then transformed to the schematic. Figure 12-3 The larger area in it.

[0289] For example, when a user continuously presses the electronic device, the shape of the shaded portion 62-1 can be represented by the schematic diagram. Figure 12-1 The wider ellipse in the diagram is transformed to the schematic. Figure 12-2 The medium-width ellipse in the diagram is then transformed to the indicated shape. Figure 12-3 The narrower oval shape in the diagram. Correspondingly, the shape of the highlighted portion 62-2 can be represented by the schematic diagram. Figure 12-1 The narrower crescent shape is transformed into the schematic. Figure 12-2 The medium-width crescent shape in the diagram is then transformed into the schematic. Figure 12-3 The wider crescent shape in the middle.

[0290] For example, to illustrate Figure 12-1 The corresponding pressure value is F41, and the dimension of the highlighted part 62-2 in this diagram is S11; (Illustration) Figure 12-2 The corresponding pressure value is F42, and the size of the highlighted part 62-2 in this diagram is S12; (Illustration) Figure 12-3 The corresponding pressure value is F43, and the size of the highlighted part 62-2 in the diagram is S13. When F41 is less than F42 and F42 is less than F43, S11 is less than S12 and S12 is less than S13.

[0291] In some other examples, the rate of visual change and / or the rate of layout change of the shadow portion 62-1 (and / or the highlight portion 62-2) may also change in response to changes in the pressure value.

[0292] For example, Figure 12 In the example shown, the rate of change of the layout of the shaded portion 62-1 may include the rate of change of size and / or the rate of change of angle, and the visual rate of change may include the rate of change of shape; the rate of change of the layout of the highlighted portion 62-2 may include the rate of change of size and / or the rate of change of angle, and the visual rate of change may include the rate of change of shape.

[0293] During the pressing operation, when the pressure value is large, the rate of change of the shape and size of the shaded part 62-1 (and / or the highlighted part 62-2) can be large; when the pressure value is small, the rate of change of the shape and size of the shaded part 62-1 (and / or the highlighted part 62-2) can be small.

[0294] In one possible example, element 62 can be represented as shown in the diagram. Figure 12-1 , indication Figure 12-2 and indication Figure 12-3 The sequence changes and remains in the indicated position. Figure 12-3 The state shown. Alternatively, element 62 can be represented as shown. Figure 12-1 , indication Figure 12-2 and indication Figure 12-3 After the order changes, follow the diagram. Figure 12-3 , indication Figure 12-2 , indication Figure 12-1 The order is reversed.

[0295] For example, when a user presses and releases the button, the pressure applied by the user to the electronic device rises from zero to a maximum value and then falls back to zero, and the maximum pressure value corresponds to... Figure 12-3 In the state, element 62 can be represented as shown in the diagram. Figure 12-1 , indication Figure 12-2 and indication Figure 12-3 After the order changes, follow the diagram. Figure 12-3 , indication Figure 12-2 , indication Figure 12-1 The order is reversed.

[0296] For example, when a user presses and holds the pressure, the pressure applied by the user to the electronic device rises from zero to a maximum value and then remains near that maximum value, and the pressure value maintained by the user can be compared with the schematic diagram. Figure 12-3 Correspondingly, element 62 can be represented as shown in the diagram. Figure 12-1 , indication Figure 12-2 and indication Figure 12-3 The sequence changes and remains in the indicated position. Figure 12-3 The state shown.

[0297] The dial interface 60 may also include more interface elements, such as interface elements for indicating blood oxygen levels, interface elements for indicating calorie consumption, etc. These interface elements may also change their visual attributes, interactive attributes, or layout attributes in response to different pressure values, and this application does not limit this.

[0298] It is understandable that element 62 in the above example follows the schematic diagram. Figure 12-1 To indicate Figure 12-3 The manner in which the order changes should not be construed as a limitation of this application; element 62 can also be interpreted as shown in the illustration. Figure 12-3 To indicate Figure 12-2 Then to the indication Figure 12-1 This application does not limit the order of the elements, or any other different order variations.

[0299] It should be noted that, in the illustration Figure 12-1 The state and illustration of element 62 shown Figure 12-2 Between the states of element 62 shown, the electronic device can also display more states of element 62 that fall between these two states. Similarly, in the illustration... Figure 12-2 The state and illustration of element 62 shown Figure 12-3 Between the states of element 62 shown, the electronic device can also display more states of element 62 that are between these two states. Figure 12 The three states of element 62 shown are merely illustrative; other states are not shown.

[0300] Figure 13 The image shows three different display states of the dial interface 70, which are illustrated below. Figure 13-1 The dial interface 70a in the middle is shown. Figure 13-2 The dial interface 70b and illustration Figure 13-3 The dial interface in the 70c.

[0301] As an example, the dial interface 70 may include elements 72 and 76. Element 72 contains multiple shape units of varying lengths, arranged approximately vertically to form a near-circular shape. Element 76 includes a digital clock and partially obscures element 72.

[0302] In this example, the interface element that can change state in response to pressure value can be element 72, and the visual representation of element 72 can include shape.

[0303] When a pressing operation is detected that continues to act on the electronic device for a period of time, the shape and number of shape units contained in element 72 can change in response to different pressure values ​​during that period of time.

[0304] For example, when a user continuously presses the electronic device, the shape of the shape unit contained in element 72 can be represented by a schematic diagram. Figure 13-1 The narrower strip shape is transformed into a schematic diagram. Figure 13-2 The medium-width strip shape is then transformed into the schematic diagram. Figure 13-3 The wider, elongated shape; in this process, the number of shape units contained in element 72 can be determined by the schematic diagram. Figure 13-1 The number of elements in the diagram is relatively large, so it can be transformed into an illustration. Figure 13-2 The quantity is moderate, then transformed into the illustration. Figure 13-3 The number is relatively small.

[0305] In some other examples, the rate of change of the shape of element 72 can also vary in response to changes in pressure. For example, during a pressing operation, when the pressure is high, the rate of change of both the shape and the number of shape elements can be high; when the pressure is low, the rate of change of both the shape and the number of shape elements can be low.

[0306] For example, to illustrate Figure 13-1 The corresponding pressure value is F51. In this schematic diagram, the rate of change of the shape of the shape unit is K211, and the rate of change of the number of units is K221. Figure 13-2 The corresponding pressure value is F52. In this schematic diagram, the rate of change of the shape of the shape unit is K221, and the rate of change of the number of units is K222. Figure 13-3 The corresponding pressure value is F53. The rate of change of the shape of the shape unit in this diagram is K213, and the rate of change of the quantity is K223. When F51 is greater than F52 and F52 is greater than F53, K211 is greater than K221 and K221 is greater than K231, K212 is greater than K222 and K222 is greater than K232.

[0307] In one possible example, element 72 can be represented as shown in the diagram. Figure 13-1 , indication Figure 13-2 and indication Figure 13-3 The sequence changes and remains in the indicated position. Figure 13-3 The state shown. Alternatively, element 72 can be represented as shown. Figure 13-1 , indication Figure 13-2 and indication Figure 13-3 After the order changes, follow the diagram. Figure 13-3 , indication Figure 13-2 , indication Figure 13-1 The sequence is reversed, and the process is repeated in this manner. This application does not impose any restrictions on this.

[0308] The dial interface 70 may also include more interface elements, such as interface elements for indicating blood oxygen levels and interface elements for indicating calorie consumption. These interface elements may also change their visual attributes, interactive attributes, or layout attributes in response to different pressure values, and this application does not impose any limitations on this.

[0309] Figure 14 The image shows three different display states of the dial interface 80, which are illustrated below. Figure 14-1 The dial interface 80a in the middle is shown. Figure 14-2 The dial interface 80b in the middle, illustration Figure 14-3 The dial interface 80c in the middle, illustration Figure 14-4 The dial interface in the middle is 80d, illustration. Figure 14-5 The dial interface 80e and illustration Figure 14-6 The dial interface in the 80f.

[0310] As an example, the dial interface 80 may include element 82 and element 86. Element 82 may be an image; element 86 includes a digital clock, and element 86 partially obscures element 82.

[0311] In this example, the status change interface elements that can respond to pressure values may include element 82 and element 86. The visual of element 82 includes the degree of blur, and the visual of element 86 includes the degree of blur.

[0312] In the case where a pressing operation continuously acting on the electronic device is detected within a period of time, in response to different pressure values within this period, the degree of blur of part or all of the area of the dial interface 80 may change.

[0313] Exemplarily, in the case where the user continuously presses the electronic device, the degree of blur of all areas of the dial interface 80 may change from the non-blurred state shown in Figure 14-1 to the medium blur state shown in Figure 14-5 and then to the fully blurred state shown in Figure 14-6 .

[0314] Exemplarily, in the case where the user continuously presses the electronic device, the blur situation of the dial interface 80 may spread from the local area where element 86 is located to all areas. For example, according to the state change from Figure 14-1 to Figure 14-5 . Among them, in Figure 14-1 , all areas in the dial interface 80 are not blurred; in Figure 14-2 ... Figure 14-2 Figure 14-3 Figure 14-3 Figure 14-4 Figure 14-4 In

[0315]

[0315] Figure 14-1 Figure 14-2 Figure 14-3 Figure 14-4

[0316] Figure 14-1 Figure 14-5 <000092k>

[0316] Figure 14-1 Figure 14-5 Figure 14-6 ​Corresponding to pressure values ​​F61, F65, and F66 respectively, the blur levels of all areas of the dial interface 80 in these schematic diagrams can be Q31, Q35, and Q36 respectively. When F61 is less than F65 and F65 is less than F66, Q31 is less than Q35 and Q35 is less than Q36.

[0317] It is understandable that there are various ways to achieve a blur effect, such as particle decomposition (different parts of an interface element are dispersed in the form of particles), Gaussian blur, mean blur, motion blur, radial blur, depth of field blur, etc. This application does not limit these methods. Figure 14 The example uses the particle decomposition effect.

[0318] Understandably, during the pressing operation, if the pressure value is maintained at F61, the blurriness of some or all areas of the dial interface 80 can be maintained at Q31; similarly, if the pressure value is maintained at F64, the blurriness of some or all areas of the dial interface 80 can be maintained at Q34.

[0319] In some other examples, the rate of change of the ambiguity of element 82 and the rate of change of the ambiguity of element 86 may also change in response to changes in pressure value.

[0320] For example, during the pressing operation, when the pressure value is large, the rate of change of the blur degree of some or all areas of the dial interface 80 can be large; when the pressure value is small, the rate of change of the blur degree of some or all areas of the dial interface 80 can be small.

[0321] In one possible example, the dial interface 80 can be as shown in the diagram. Figure 14-1 To indicate Figure 14-4 The sequence changes and remains in the indicated position. Figure 14-4 The state shown. Alternatively, the dial interface 80 can also be displayed as shown. Figure 14-1 To indicate Figure 14-4 After the order changes, follow the diagram. Figure 14-4 To indicate Figure 14-1 The order is reversed.

[0322] For example, when the user presses down and releases, and the maximum pressure value of the press corresponds to... Figure 14-4 In the state shown, elements 82 and 86 can be represented as illustrated. Figure 14-1 To indicate Figure 14-4 After the order changes, follow the diagram. Figure 14-4 To indicate Figure 14-1 The order is reversed.

[0323] For example, when the user presses and holds, and the held pressure value corresponds to... Figure 14-4In the state shown, elements 82 and 86 can be represented as illustrated. Figure 14-1 To indicate Figure 14-4 The sequence changes and remains in the indicated position. Figure 14-4 The state shown.

[0324] The dial interface 80 may also include more interface elements, such as interface elements for indicating the date, etc. These interface elements may also change their visual attributes, interactive attributes or layout attributes in response to different pressure values, and this application does not limit this.

[0325] It is understood that the variations of elements 82 and 86 described above are merely illustrative, and elements 82 and 86 can also be represented as shown in the illustrations. Figure 14-4 To indicate Figure 14-1 The order of elements may vary, or other variations are not limited in this application.

[0326] It should be noted that, in the illustration Figure 14-1 The state and illustration of elements 82 and 86 are shown. Figure 14-2 Between the states of element 82 and element 86 shown, the electronic device can also display more states of element 82 and element 86 that fall between these two states. Similarly, in the illustration... Figure 14-2 With illustration Figure 14-3 Between, in the indication Figure 14-3 With illustration Figure 14-4 In between, the electronic device can also display the status of more elements 82 and 86. Figure 14 The states of the four elements 82 and 86 shown are merely illustrative; many other states are not shown.

[0327] Figure 15 The diagram shows three different display states of dial 90, which are illustrated below. Figure 15-1 The dial interface 90a in the middle is shown. Figure 15-2 The dial interface 90b and illustration Figure 15-3 The dial interface in the 90c.

[0328] As an example, the dial interface 90 may include elements 92 and 96. Element 96 includes a digital clock and can move along the Z-axis. Element 92 is approximately ring-shaped and surrounds element 96. Element 92 may include sub-elements 92-1 and 92-2, which can rotate circumferentially around element 92. Sub-elements 92-1 are located in the upper half of element 92, and sub-elements 92-2 are located in the lower half. The rotation directions of sub-elements 92-1 and 92-2 can be the same or opposite.

[0329] In this example, the interface elements that can change state in response to pressure values ​​may include element 92 (including sub-elements 92-1 and 92-2) and element 96. The visuals of element 92 include color, and the layout includes angle. The layout of element 96 includes at least one of position, size, and hierarchy.

[0330] When a pressing operation is detected that continues to act on the electronic device for a period of time, the position of sub-element 92-1, the position of sub-element 92-2, the color of element 92, and the size, position, and / or hierarchy of element 96 may be changed.

[0331] For example, when a user continuously presses the electronic device, sub-element 92-1 can be represented as shown in the diagram. Figure 15-1 The positional changes shown are for illustrative purposes only. Figure 15-2 The position shown is then changed to the schematic. Figure 15-3 The position shown; child element 92-2 can be represented as shown in the diagram. Figure 15-1 The positional changes shown are for illustrative purposes only. Figure 15-2 The position shown is then changed to the schematic. Figure 15-3 The location shown.

[0332] For example, when a user continuously presses the electronic device, the color of the outer periphery of element 92 can be represented by a schematic diagram. Figure 15-1 The blue color in the diagram is changed to indicate Figure 15-2 The purple in the image is then transformed into the illustration. Figure 15-3 The red in the middle.

[0333] For example, when a user continuously presses an electronic device, the position and / or hierarchy of element 96 can be represented by a schematic diagram. Figure 15-1 The partially occluded area of ​​element 92 (located above element 92) changes to the illustrated state. Figure 15-2 The center is located further away from the paper, and then it changes to a schematic diagram. Figure 15-3 The central area is obscured by element 92 (located below element 92).

[0334] For example, when a user continuously presses the electronic device, the size of element 96 can be represented by the schematic diagram. Figure 15-1 The larger dimensions in the diagram are shown below. Figure 15-2 A slightly smaller size in the diagram, then changed to the schematic. Figure 15-3 The smaller size in the middle.

[0335] When a pressing operation is detected that is continuously applied to the electronic device over a period of time, the rotation speed of sub-element 92-1, the rotation speed of sub-element 92-2, and the movement speed of element 96 may change in response to different pressure values ​​during that period of time.

[0336] For example, when a user continuously presses the electronic device, the rotation speed of sub-element 92-1 (or the rotation speed of sub-element 92-2) can be represented by the schematic diagram. Figure 15-1 The slower transformation in the diagram is illustrated. Figure 15-2 The middle part, then transformed into a diagram Figure 15-3 The movement speed of element 96 can be represented by the diagram. Figure 15-1 The slower transformation in the diagram is illustrated. Figure 15-1 The middle part, then transformed into a diagram Figure 15-3 The middle one is faster.

[0337] During the pressing operation, when the pressure value is large, the rotation speed of sub-element 92-1 (or the rotation speed of sub-element 92-2) and the moving speed of element 96 can be faster, and the color change rate of the outer periphery of element 92 is faster; when the pressure value is small, the rotation speed of sub-element 92-1 (or the rotation speed of sub-element 92-2) and the moving speed of element 96 can be slower, and the color change rate of the outer periphery of element 92 is slower.

[0338] For example, to illustrate Figure 15-1 The corresponding pressure value is F71. In this schematic diagram, the rotational speed of sub-element 92-1 is ω41, the rotational speed of sub-element 92-2 is ω51, the moving speed of element 96 is V31, and the rate of color change around element 92 is K41. Figure 15-2 The corresponding pressure value is F72, the rotational speed of sub-element 92-1 is ω42, the rotational speed of sub-element 92-2 is ω52, the moving speed of element 96 is V32, and the rate of color change around element 92 is K42; (Illustration) Figure 15-3 The corresponding pressure value is F73, the rotational speed of sub-element 92-1 is ω43, ​​the rotational speed of sub-element 92-2 is ω53, the moving speed of element 96 is V33, and the rate of color change around element 92 is K43. When F71 is less than F72 and F72 is less than F73, ω41 is less than ω42 and ω42 is less than ω43, ​​ω51 is less than ω52 and ω52 is less than ω53, V31 is less than V32 and V32 is less than V33, K41 is less than K42 and K42 is less than K43.

[0339] Understandably, during the pressing operation, if the pressure value is maintained at F72, the rotation speed of sub-element 92-1 can be maintained at ω42, the rotation speed of element 92-2 can be maintained at ω52, the movement speed of element 96 can be maintained at V32, and the rate of color change of the outer periphery of element 92 can be maintained at K42; similarly, if the pressure value is maintained at F73, the rotation speed of sub-element 92-1 can be maintained at ω43, ​​the rotation speed of element 92-2 can be maintained at ω53, the movement speed of element 96 can be maintained at V33, and the rate of color change of the outer periphery of element 92 can be maintained at K43.

[0340] In one possible example, the dial interface 90 can be as shown in the diagram. Figure 15-1 To indicate Figure 15-3 The sequence changes and remains in the indicated position. Figure 15-3 The state shown. Alternatively, the dial interface 90 can also be displayed as shown. Figure 15-1 To indicate Figure 15-3 After the order changes, follow the diagram. Figure 15-3 To indicate Figure 15-1 The sequence is reversed, and the loop continues in this manner.

[0341] For example, when the user presses and releases, elements 92 and 96 can be arranged as shown in the diagram. Figure 15-1 To indicate Figure 15-3 After the order changes, follow the diagram. Figure 15-3 To indicate Figure 15-1 The order is reversed.

[0342] For example, when the user presses and holds the pressure, elements 92 and 96 can be arranged as shown in the diagram. Figure 15-1 To indicate Figure 15-3 The sequence changes and remains in the indicated position. Figure 15-3 The state shown.

[0343] In one possible example, element 96 follows the schematic. Figure 15-1 To indicate Figure 15-3 The sequence changes and remains in the indicated position. Figure 15-3 The state shown. (Compared to the example) Figure 15-3 The corresponding pressure value is relatively high, and it remains at a relatively high pressure value. In this case, element 96 can maintain the schematic. Figure 15-3 The state shown has no change in position or size; correspondingly, the rate of change of position and the rate of change of size can be zero.

[0344] It is understood that the variations of elements 92 and 96 described above are merely illustrative, and elements 92 and 96 can also be represented as shown in the illustration. Figure 15-3 To indicate Figure 15-2 Then to the indication Figure 15-1 The order of elements may vary, or other variations are not limited in this application.

[0345] It should be noted that, in the illustration Figure 15-1 The state and illustration of elements 92 and 96 shown Figure 15-2 Between the states of element 92 and element 96 shown, the electronic device can also display more states of element 92 and element 96 that fall between these two states. Similarly, in the illustration... Figure 15-2 The state and illustration of elements 92 and 96 shown Figure 15-3Between the states of element 92 and element 96 shown, the electronic device can also display more states of element 92 and element 96 that are between these two states. Figure 15 The states of the three elements 92 and 96 shown are merely illustrative; many other states are not shown.

[0346] The dial interface 90 may also include more interface elements, such as interface elements for indicating heart rate, interface elements for users to indicate calorie consumption, etc. These interface elements may also change visually or in layout in response to different stress values, and this application does not limit this.

[0347] Figures 9 to 15 The various dial interfaces shown can change in response to variations in the pressure applied by the user when pressing the electronic device, enriching the display effects and interaction methods. These interface changes consume a certain amount of energy. To reduce power consumption and extend the device's lifespan, the electronic device can include a normal mode (or all-around mode) and a power-saving mode. In normal mode, the device can display different dial interface states as described above. In power-saving mode, the device can disable these functions; in other words, it can avoid detecting the user's pressure, thus reducing power consumption caused by pressure sensors. Alternatively, the electronic device's dial interface can remain unchanged in response to the user's pressure.

[0348] In one possible example, the electronic device can include an interactive state and a non-interactive state. In the interactive state, the electronic device can display different states of the dial interface as described above; in the non-interactive state, the dial interface of the electronic device may not change in response to the pressure value of the user's pressing operation.

[0349] In some examples, the state of interface elements on the watch face of an electronic device can differ depending on whether it is in an interactive or non-interactive state.

[0350] For example, the color and / or contrast of the same interface element can be different in interactive and non-interactive states.

[0351] For example, the position of the same interface element on the dial may be different in interactive and non-interactive states.

[0352] For example, for the same interface element, the part displayed may be different in interactive mode and non-interactive mode; for example, in interactive mode, the complete interface element is displayed, while in non-interactive mode, only a part of the interface element is displayed.

[0353] For example, for the same interface element, the number of interface elements on the watch face of an electronic device can increase and / or decrease in interactive and non-interactive states. For example, the number of interface elements on the watch face can increase, decrease, increase first and then decrease, or decrease first and then increase; the interface elements on the watch face can switch from a hidden state to a displayed state, and can switch from a displayed state to a hidden state.

[0354] In one possible implementation, the second interface is used to indicate the non-interactive state, and the third interface is used to indicate the interactive state. Switching from the non-interactive state to the interactive state includes switching from the state of displaying the second interface to the state of displaying the third interface.

[0355] The number of interface elements contained in the second interface and the number of interface elements contained in the third interface may be different; and / or, the attributes (such as color, contrast, position, etc.) of the same interface elements contained in the second interface and the third interface may be different.

[0356] In one possible implementation, the element whose state changes when switching from a non-interactive state to an interactive state can be an element whose state does not change with a press operation in the interactive state. For example, for elements whose state does not change with a press operation in the interactive state, their color saturation and contrast can be reduced, thereby allowing the eye to focus more on the element whose state changes with a press operation, improving the user experience.

[0357] In another possible implementation, the element whose state changes when switching from a non-interactive state to an interactive state can also be an element whose state changes with a press operation in the interactive state. For example, for an element whose state changes with a press operation in the interactive state, its color saturation and contrast can be increased, thereby making the visual focus more on the element whose state changes with a press operation, thus improving the user experience.

[0358] In another possible implementation, when switching from a non-interactive state to an interactive state, the element whose state changes can be either an element whose state changes with a press operation in the interactive state or an element whose state does not change with a press operation. For example, for elements whose state does not change with a press operation in the interactive state, their color saturation and contrast can be reduced; for elements whose state changes with a press operation in the interactive state, their color saturation and contrast can be increased. This allows the eye to focus more on the elements whose state changes with a press operation, improving the user experience.

[0359] like Figure 16 As shown, schematic Figure 16-1 This illustrates the non-interactive state of the dial interface 40 mentioned above (dial interface 40a), as shown in the diagram. Figure 16-2The interactive state of the dial interface 40 mentioned above (dial interface 40d) is shown.

[0360] The dial interface 40a may include elements 42, 44, and 46. Element 42 may be a sphere (displayed as a circle in the diagram) and is located on the background layer; element 46 may include a digital clock and is located on the foreground layer; element 44 is a ring and surrounds elements 42 and 46. Element 44 may include sub-elements 44-1, 44-2, 44-3, and 44-4, where sub-element 44-1 indicates the remaining battery power of the electronic device, sub-element 44-2 indicates the heart rate test result, sub-element 44-3 indicates the cumulative steps for the day, and sub-element 44-4 indicates the date.

[0361] The dial interface 40d may include elements 48-1, 48-2, 48-3, 48-4, and 48-5. Element 48-1 is used to indicate the daily target water intake and remaining water intake, element 48-2 is used to indicate the daily number of times you stand up, element 48-3 is part of the sphere represented by the aforementioned element 42, element 48-4 is used to indicate the date and current location, and element 48-5 is used to indicate the daily target sleep duration and actual sleep duration.

[0362] Comparing watch face interfaces 40a and 40d, after switching from a non-interactive state to an interactive state, element 46 in the original watch face disappears (or is hidden), and child elements 44-1, 44-2, and 44-3 in watch face interface 40a also disappear (or are hidden). Elements 48-1, 48-2, and 48-5 appear in the current watch face. Child element 44-4 in the original watch face moves from the left edge to the bottom right edge. Element 42 (a complete sphere) in the original watch face can be transformed into element 48-3 (a partial sphere) in watch face interface 40d. Alternatively, a portion of element 42 in the original watch face can be hidden.

[0363] Optionally, in the non-interactive state, the element's properties can have initial property values. For example, the rate of change of position can have initial values, the rate of change of angle can have initial values, and these initial values ​​can be zero (corresponding to the element being stationary, not moving, or not rotating), or these initial values ​​can also be non-zero (corresponding to the element moving, having an initial moving speed or an initial rotating speed).

[0364] For example, as illustrated Figure 16-1 As shown, element 42 can have an initial rotational speed. After entering the interactive state based on user operation, element 42 can change to a schematic state. Figure 16-2Element 48-3. It is understood that when entering the interactive state, element 48-3 can have the same rotational speed as element 42. When a pressing operation is received on the electronic device, the rotational speed of element 48-3 is determined according to the pressure value of the pressing operation.

[0365] Optionally, after switching from non-interactive to interactive mode, an element AE (not shown in the figure) can be added. For example, element AE can be a paper airplane, which can be displayed as a paper airplane flying into the dial after switching to interactive mode. Optionally, after adding an element, an element can also be removed. For example, if the removed element is element AE, it can be displayed as a paper airplane flying out of the dial and no longer displayed on the dial.

[0366] For example, such as Figure 9 As shown, element 32 may have an initial moving speed, and / or element 34 may also have an initial moving speed. In other words, elements 32 and 34 may move relative to each other when the user is not pressing the electronic device.

[0367] For example, such as Figure 10 As shown, element 42 can have an initial rotational speed and a moving speed; as Figure 11 As shown, both element 52 and element 54 can have an initial rotational speed.

[0368] For example, such as Figure 15 As shown, elements 92-1 and 92-2 can both have an initial rotational speed, and element 96 can have an initial moving speed.

[0369] like Figure 17 As shown, schematic Figure 17-1 This illustrates the non-interactive state of the dial interface 80 mentioned above (dial interface 80a), as shown in the diagram. Figure 17-2 The interactive state of the dial interface 80 mentioned above (dial interface 80g) is shown.

[0370] As shown above, the dial interface 80a may include elements 82 and 86. Element 82 can be an image, and element 86 includes a digital clock; element 86 can partially obscure element 82. Furthermore, the dial interface 80a also includes elements 84 and 88. Element 84 is a circular scale used to indicate the current time in seconds, and element 88 indicates the date.

[0371] The dial interface 80g may include elements 82 and 86, but does not include elements 84 and 88.

[0372] Comparing watch face 80a and watch face 80g, after switching from non-interactive to interactive state, elements 84 and 88 in the original watch face disappear (or are hidden), the contrast of element 86 is reduced, and its color changes from white to light gray.

[0373] Similarly, for the watch face interface in the aforementioned example, when switching from a non-interactive state to an interactive state, some elements in the watch face interface can optionally be hidden, have their contrast reduced, or have their colors changed, so that in the interactive state, the visual focus can be more on the elements whose state has changed.

[0374] For example, in the watch face 30 described above, when the electronic device is in a non-interactive state, element 36 can be brighter, have higher contrast, and higher color saturation. Conversely, when the electronic device is in a non-interactive state, element 36 on the watch face 30 can be dimmer, have lower contrast, and lower color saturation. This allows the user to more clearly see the changes in the state of element 32 and / or element 34 following the press operation.

[0375] Similarly, for the aforementioned dial interface 50, when the electronic device is in a non-interactive state, element 56 can be brighter, have higher contrast, and higher color saturation. When the electronic device is in a non-interactive state, the brightness of element 56 on the dial interface 50 can be dimmer, the contrast can be lower, and the color saturation can be lower.

[0376] Similarly, for the aforementioned watch face interface 60, when the electronic device is in a non-interactive state, the elements on the watch face used to indicate exercise data (such as steps, calories) and physiological parameters (such as blood oxygen levels) can be brighter, have higher contrast, and higher color saturation. When the electronic device is in a non-interactive state, the elements on the watch face interface 60 used to indicate exercise data (such as steps, calories) and physiological parameters (such as blood oxygen levels) can be dimmer, have lower contrast, and lower color saturation.

[0377] Similarly, for the aforementioned dial interface 70, when the electronic device is in a non-interactive state, the brightness of element 72 on the dial interface 70 can be darker, the contrast can be lower, and the color saturation can be lower, while element 56 can be brighter; when the electronic device is in an interactive state, the brightness of element 72 can be brighter, the contrast can be higher, the color saturation can be higher, while element 56 can be darker.

[0378] Similarly, for the aforementioned dial interface 90, when the electronic device is in a non-interactive state, the color of element 92 can be purple. When the electronic device is in a non-interactive state, the color of element 92 on the dial interface 90 can be pink.

[0379] Furthermore, similar to the aforementioned dial interfaces 40 and 80, the number of interface elements and the attribute values ​​of these dial interfaces can differ in non-interactive and interactive states. For related information, please refer to the descriptions of dial interfaces 40 and 80, which will not be elaborated here.

[0380] In some other examples, when in interactive mode, the electronic device can display interface elements near the button module to indicate press operations. These interface elements can be highlighted arc-shaped or arc-shaped halo areas, as described below. Figure 18 Element 1002 shown can be used as an example.

[0381] In some other examples, during the transition between non-interactive and interactive states, electronic devices can also use vibration, sound, or other means to indicate the switch from non-interactive to interactive (or from interactive to non-interactive).

[0382] In one possible example, a user can switch between a non-interactive and interactive state of an electronic device by tapping its screen. Specifically, when the electronic device is in a non-interactive state, it switches to interactive mode in response to the user's screen tap; when the electronic device is in interactive mode, it switches to non-interactive mode in response to the user's screen tap.

[0383] like Figures 18 to 20 The illustration shows another example of the application of the interface display method provided in this application to a wearable device. In these examples, interface elements that can continuously change in response to pressure values ​​are located on the application interface of the wearable device.

[0384] Figure 18 The diagram illustrates the startup process of a wearable device's micro-health check application. As the user continuously presses the button module on the electronic device, the device can sequentially display... Figure 18 The illustration in Figure 18-1 , indication Figure 18-2 , indication Figure 18-3 and indication Figure 18-4 The illustration is shown below. Figure 18-1 , indication Figure 18-2 and indication Figure 18-3 This is a countdown screen before the micro-health check application can be launched, illustrating... Figure 18-4 This is the interface for the physical examination application.

[0385] One possible scenario is that if the pressure applied by the user to the button module exceeds the pressure threshold Pc1, the electronic device may display the following diagram. Figure 18-1The countdown interface shown indicates that if the pressure value exceeds the pressure threshold Pc1 for a certain duration (e.g., 3 seconds), the electronic device can activate the micro-physical examination application function and display a schematic. Figure 18-4 The interface shown.

[0386] Reference illustration Figure 18-1 , indication Figure 18-2 and indication Figure 18-3 All three diagrams include element 1002, which indicates the state of the user's press operation. The state of element 1002 can be different in these three diagrams. For example, the diagram shows... Figure 18-1 , indication Figure 18-2 and indication Figure 18-3 The elements 1002 are elements 1002a, 1002b, and 1002c.

[0387] When a pressing operation is detected that continues over a period of time on an electronic device, the area and color saturation of element 1002 can change in response to different pressure values ​​during that period. In other words, in this example, interface elements that can change state in response to pressure values ​​can include element 1002, whose visual properties include saturation and layout includes size, and these properties can change in response to changes in pressure values.

[0388] For example, when a user continuously presses the electronic device, the area of ​​element 1002 can be represented by the schematic diagram. Figure 18-1 Larger transformations in the diagram are shown below. Figure 18-2 The middle part, then changed to an illustration Figure 18-3 The smaller element; the color saturation of element 1002 can be represented by the schematic diagram. Figure 18-1 The high saturation transformation in the diagram is shown below. Figure 18-2 The general saturation in the middle is then transformed into a schematic diagram. Figure 18-3 Low saturation in.

[0389] During the pressing operation, when the pressure value is large, the rate of change of the area and the rate of change of color saturation of element 1002 can be faster; when the pressure value is small, the rate of change of the area and the rate of change of color saturation of element 1002 can be slower.

[0390] For example, to illustrate Figure 18-1 The corresponding pressure value is F81. In this schematic diagram, the rate of change of the area of ​​element 1002 is K51, and the rate of change of color saturation is K61. Figure 18-2 The corresponding pressure value is F82. In this schematic diagram, the rate of change of the area of ​​element 1002 is K52, and the rate of change of color saturation is K62. Figure 18-3The corresponding pressure value is F83. In this diagram, the rate of change of the area of ​​element 1002 is K53, and the rate of change of color saturation is K63. When F81 is greater than F82 and F82 is greater than F83, K51 is greater than K52 and K52 is greater than K53, K61 is greater than K62 and K62 is greater than K63.

[0391] Reference illustration Figure 18-4 The interface of a health check application can also include element 1002, for example, element 1002d. The area and color saturation of 1002d can correspond to the pressure value applied by the user during the health check. Under higher pressure, the rate of change of the area and color saturation of element 1002d can be faster; under lower pressure, the rate of change of the area and color saturation of element 1002d can be slower. For detailed information, please refer to the above illustration. Figure 18-1 , indication Figure 18-2 , indication Figure 18-3 Explanation.

[0392] In some possible examples, Figure 18 The interface shown can also include more interface elements that can continuously change in response to changes in pressure values. For example, the illustration... Figure 18-1 , indication Figure 18-2 and indication Figure 18-3 The interface element used to represent the remaining countdown time can also change continuously in response to changes in pressure value. For example, the size of the interface element can gradually decrease as the pressure value decreases.

[0393] Figure 19 The image shows an interface 1100 for the volume adjustment function of a wearable device. For example, the interface 1100 may include an element 1102, which can be used to indicate the current volume.

[0394] One possible scenario is that, during the user's pressing of the wearable device's button module, if the pressure applied by the user is greater than or equal to a pressure threshold Pc2, the electronic device increases the volume; if the pressure applied by the user is less than the pressure threshold Pc2, the electronic device decreases the volume. For example, the pressure threshold Pc2 is greater than the pressure value P. th .

[0395] In some examples, the height of element 1102 can increase when the volume is turned up, and decrease when the volume is turned down.

[0396] One possibility is that the rate of change of the height of element 1102 can vary with the magnitude of the pressure applied to the electronic device. In other words, in this example, an interface element capable of changing its state in response to a pressure value may include element 1102, specifically, the size of element 1102 can change in response to changes in the pressure value.

[0397] For example, when the pressure value is greater than or equal to the pressure threshold Pc2 and is relatively large, the increase rate of the height of element 1102 is relatively large, and the volume is increased by a relatively large amount; when the pressure value is greater than or equal to the pressure threshold Pc2 and is relatively small, the increase rate of the height of element 1102 is relatively small, and the volume is increased by a relatively small amount.

[0398] For example, when the pressure value is less than the pressure threshold Pc2 and is relatively small, the rate at which the height of element 1102 decreases is relatively large, and the volume is reduced by a relatively large amount; when the pressure value is less than the pressure threshold Pc2 and is relatively large, the rate at which the height of element 1102 decreases is relatively small, and the volume is reduced by a relatively small amount.

[0399] In other words, the greater the difference between the pressure value and the pressure threshold Pc2, the greater the rate at which the height of element 1102 increases or decreases; conversely, the smaller the difference between the pressure value and the pressure threshold Pc2, the smaller the rate at which the height of element 1102 increases or decreases.

[0400] Figure 20 The diagram shows three different states of the interface 1200 of application 1 of the wearable device, i.e., schematic diagrams. Figure 20-1 Interface 1200a, illustration Figure 20-2 Interface 1200b, illustration Figure 20-3 The interface 1200c is shown in the image. This application 1 can be a game application, or it can be a function for viewing, editing, and selecting applications on a watch face; this application does not impose any restrictions on this.

[0401] like Figure 20 As shown, interface 1200 can be used to simulate the diving process. As an example, interface 1200 can include elements 1202, 1204, and 1206. Element 1202 can represent the diving board, element 1204 can represent the diver, and element 1206 can represent the water in the pool.

[0402] When a pressing operation is detected that continues over a period of time on the electronic device, the shape of element 1202 can change in response to different pressure values ​​during that period. In other words, in this example, an interface element that can change its state in response to pressure values ​​may include element 1202, whose shape can change in response to changes in pressure values.

[0403] For example, when a user continuously presses the electronic device, the shape of element 1202 can be represented by a schematic diagram. Figure 20-1 The smaller changes in curvature are illustrated. Figure 20-2 The greater degree of curvature in the middle is then changed to a schematic diagram. Figure 20-3 The unbent shape.

[0404] During the pressing operation, the rate of change of the shape of element 1202 can be greater when the pressure value is larger; and the rate of change of the shape of element 1202 can be smaller when the pressure value is smaller.

[0405] For example, to illustrate Figure 20-1 The corresponding pressure value is F91, and the rate of change of the shape of element 1202 in this schematic diagram is K71; Figure 20-2 The corresponding pressure value is F92, and the rate of change of the shape of element 1202 in this schematic diagram is K72; Figure 20-3 The corresponding pressure value is F93, and the rate of change of the shape of element 1202 in this diagram is K73. When F91 is less than F92 and F92 is greater than F93, K72 is greater than K71, and K71 is greater than K73. When F93 is zero, K73 is zero.

[0406] With varying degrees of curvature of element 1202, the movement path of element 1204 differs, and the intersection point (the water entry point in the diagram) between the movement path of element 1204 and element 1206 also varies. For example, see illustration. Figure 20-2 In this diagram, element 1202 has a greater degree of curvature, allowing the water ingress point to be located far away from element 1202; for example, as shown in the illustration. Figure 20-1 In this case, element 1202 has a smaller degree of curvature, allowing the water inlet point to be close to element 1202. Considering the explanation of the effect of pressure value on the curvature of element 1202, under higher pressure, the water inlet point of element 1204 is farther from element 1202, while under lower pressure, the water inlet point of element 1204 is closer to element 1202. In other words, the user can control the shape of element 1202 by controlling the pressure value, thereby adjusting the position of the water inlet point of element 1204.

[0407] Figure 21 The diagram shows three different states of the interface 1250 of application 2 for wearable devices, i.e., schematic diagrams. Figure 21-1 Interface 1250a, illustration Figure 21-2 Interface 1250b, illustration Figure 21-3 The interface 1250c is shown in the image. Application 2 can be a game application, or it can be a function for viewing, editing, and selecting applications on a watch face; this application does not impose any restrictions on this.

[0408] like Figure 21 As shown, interface 1250 can be used to simulate multiple jumps. As an example, interface 1250 may include elements 53a, 53b, 53c, 55, and 57. Elements 53a, 53b, and 53c represent three of multiple diving platforms located at different positions. Each platform includes a pad and a spring, with the spring located below the pad. Element 55 represents the athlete, and element 57 represents the water. The aforementioned diving platforms are located in the water, and the athlete can stand on the pad of the platform. Under the action of an external force, element 55 drives the spring on the platform to deform. During the spring's recovery process, it can propel element 55 from the current platform and move it to an adjacent platform.

[0409] When a pressing operation is detected that is continuously applied to the electronic device over a period of time, the spring on the platform will deform differently in response to different pressure values ​​during that period of time.

[0410] For example, combined with illustration Figure 21-1 and indication Figure 21-2 When element 55 is on the platform shown in element 53a, as the user continues to press the electronic device, the compression of the spring on the platform shown in element 53a gradually increases with the increase of the pressure value. When the user stops pressing (or reduces the pressure value to a certain pressure threshold), element 55 can jump to the platform shown in element 53b; similarly, referring to the diagram... Figure 21-2 and indication Figure 21-3 When element 55 is on the platform shown in element 53b, as the user continues to press the electronic device, the compression of the spring on the platform shown in element 53b will gradually increase as the pressure value increases. When the user stops pressing (or reduces the pressure value to a certain pressure threshold), element 55 can jump to the platform shown in element 53c.

[0411] During the pressing operation, when the pressure value is large, the rate of change of the shape of element 53a (or element 53b) can be large; when the pressure value is small, the rate of change of the shape of element 53a (or element 53b) can be small.

[0412] For example, to illustrate Figure 21-1 The corresponding pressure value is F101, and the rate of change of the shape of element 53a in this schematic diagram is K81; Figure 21-2 The corresponding pressure value is F102, and the rate of change of the shape of element 53b in this diagram is K82. When F101 is greater than F102, K81 is greater than K82.

[0413] The amount of compression of the spring on the jump platform shown in element 53a (or element 53b) affects the jump distance of element 55. Specifically, when the amount of compression of the spring on the jump platform shown in element 53a (or element 53b) is greater, the jump distance of element 55 is longer; when the amount of compression of the spring on the jump platform shown in element 53a (or element 53b) is smaller, the jump distance of element 55 is shorter.

[0414] exist Figure 21 and Figure 22 In the example shown, the attribute value of one interface element in the interface of an electronic device can affect the attribute value of another interface element. In some other examples, the attribute values ​​of multiple interface elements can collectively affect the attribute value of another interface element. For example, Figure 22 In the example shown, the size (length) of the pad, the position of the spring beneath the pad, and the height of the spring all affect the jump distance of element 55. These will not be explained in detail here.

[0415] Figure 22 The image shows a schematic diagram of the user interface during the process of selecting a watch face for a wearable device. Users can change the watch face of their wearable device using electronic devices such as smartphones.

[0416] like Figure 22 As shown, schematic Figure 22-1 The interface 1300 shown can display multiple selectable dials, such as those mentioned above. Figures 9 to 15 The watch face shown is illustrated. In response to a user selecting one of the watch faces (e.g., watch face B2), the electronic device can display a schematic. Figure 22-2 The interface 1400 shown can display detailed information such as the functions of the dial B2. This interface 1400 can also be used to preview how the interface elements on the dial continuously change with varying pressure values. The interface 1400 may also include an installation control. When the user selects this control, the electronic device can send the data information from the dial B2 to a wearable device, allowing the wearable device to use the dial B2 to change the currently used dial.

[0417] It should be noted that in the above examples, the state changes of each interface element are introduced in a basically left-to-right and top-to-bottom order. It is understood that the interface elements can also change in the reverse order of the diagram, and this application does not restrict this.

[0418] It should also be noted that the above examples only illustrate a limited number of different states of interface elements. Electronic devices may also display more states of interface elements that fall between the states already shown, and this application does not limit this.

[0419] Based on the same concept, such as Figure 23 As shown in the illustration, this application also provides an interface display device 2300. This device 2300 can possess the functions of an electronic device described in the above method embodiments and can be used to execute the steps performed by the functions of the electronic device in the above method embodiments. This function can be implemented in hardware, or in software, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above functions.

[0420] In one possible implementation, the interface display device 2300 may include an acquisition module 2310 and a processing module 2320, which are coupled to each other.

[0421] In some examples, the acquisition module 2310 can be used to support the electronic device in the foregoing embodiments to acquire the operation of the user pressing the button module, etc.

[0422] The processing module 2320 is used to support the electronic device in performing the processing actions in the above method embodiments, such as determining the attribute values ​​of the interface elements based on the pressure value.

[0423] Optionally, the interface display device 2300 may further include a storage unit 2330 for storing the program code and data of the interface display device 2300.

[0424] Figure 24 An electronic device 2400 provided in this application embodiment is shown in the figure. The electronic device 2400 includes at least one processor 2410 and a transceiver 2420. The processor 2410 is coupled to a memory and is used to execute instructions stored in the memory to control the transceiver 2420 to transmit and / or receive signals.

[0425] Optionally, the electronic device 2400 also includes a memory 2430 for storing instructions.

[0426] In some embodiments, the processor 2410 and the memory 2430 can be combined into a single processing device, with the processor 2410 executing program code stored in the memory 2430 to implement the aforementioned functions. In specific implementations, the memory 2430 can be integrated into the processor 2410 or independent of the processor 2410.

[0427] In some embodiments, transceiver 2420 may include a receiver and a transmitter.

[0428] The transceiver 2420 may further include an antenna, and the number of antennas may be one or more. The transceiver 2420 may be a communication interface or an interface circuit.

[0429] When the electronic device 2400 is a chip, the chip includes a transceiver module and a processing module. The transceiver module can be an input / output circuit or a communication interface; the processing module can be a processor, microprocessor, or integrated circuit integrated on the chip.

[0430] This embodiment also provides a computer-readable storage medium storing computer instructions. When the computer instructions are executed on an electronic device, the electronic device performs the aforementioned method steps to implement the interface display method in the above embodiment.

[0431] This embodiment also provides a computer program product that, when run on a computer, causes the computer to perform the aforementioned related steps to implement the interface display method in the above embodiment.

[0432] Furthermore, embodiments of this application also provide an apparatus, which may specifically be a chip, component, or module. This apparatus may include a connected processor and a memory. The memory stores computer execution instructions. When the apparatus is running, the processor can execute the computer execution instructions stored in the memory to cause the chip to perform the interface display methods described in the above-described method embodiments.

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

[0434] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0435] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0436] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0437] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0438] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0439] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for displaying an interface, applied to an electronic device, characterized in that, The method includes: The electronic device receives a pressing operation that is continuously applied to it during a first time period. The pressing operation has a pressure value of a first pressure value at a first moment and a pressure value of a second pressure value at a second moment. The first pressure value and the second pressure value are different. The first time period includes the first moment and the second moment. During the first time period, in response to the first pressure value, the interface elements of the first state are displayed; During the first time period, the interface elements display a second state in response to the second pressure value; The first state and the second state are different.

2. The method according to claim 1, characterized in that, The first state and the second state are related to the attributes of the interface element.

3. The method according to claim 2, characterized in that, The attribute values ​​corresponding to the same attribute of the interface element in the first state and the interface element in the second state are different.

4. The method according to claim 3, characterized in that, The attributes of the interface element include one or more of the following: the visual appearance of the interface element, the layout of the interface element, the rate of change of the visual appearance of the interface element, and the rate of change of the layout of the interface element.

5. The method according to claim 4, characterized in that, The visual aspects of the interface elements include one or more of the following: color, transparency, blur level, brightness, contrast, shadow, shape, and animation effects; and / or, The layout of the interface elements includes one or more of the following: position, size, spacing, hierarchy, and angle.

6. The method according to any one of claims 1 to 5, characterized in that, The second pressure value is greater than the first pressure value, and the first state and the second state are different, including one or more of the following: The size of the interface element in the second state is different from the size of the interface element in the first state; The positions of the interface elements in the second state are different from those in the first state; The shape of the interface element in the second state is different from the shape of the interface element in the first state; The interface element in the second state is the second part of the interface element, and the interface element in the first state is the first part of the interface element. The first part and the second part are different. The hierarchical relationship between multiple sub-elements in the interface element in the second state is different from the hierarchical relationship between multiple sub-elements in the interface element in the first state. The rate of change of the animation effects of the interface elements in the second state is different from the rate of change of the animation effects of the interface elements in the first state. The movement speed of the interface element in the second state is greater than the movement speed of the interface element in the first state; The rotation speed of the interface element in the second state is greater than the rotation speed of the interface element in the first state; or, The degree of blurriness of the interface elements in the second state is greater than that of the interface elements in the first state.

7. The method according to any one of claims 2 to 6, characterized in that, The attribute values ​​of the interface element in the first state or the second state are determined according to the mapping relationship and the pressure value. The mapping relationship is used to indicate the correspondence between the pressure value and M different attribute values ​​of the interface element.

8. The method according to claim 7, characterized in that, The M attribute values ​​correspond to at least M pressure value levels, including a first level and a second level, wherein the pressure value range corresponding to the first level is different from the pressure value range corresponding to the second level.

9. The method according to claim 8, characterized in that, The pressure value in the pressure range corresponding to the first gear is less than the pressure value in the pressure range corresponding to the second gear, and the pressure range corresponding to the first gear is greater than the pressure range corresponding to the second gear.

10. The method according to any one of claims 7 to 9, characterized in that, M is greater than or equal to 3.

11. The method according to any one of claims 7 to 10, characterized in that, The interface elements include a first element and a second element. The first element has a first element attribute, and the second element has a second element attribute. The mapping relationship includes a first relationship and a second relationship. The first relationship is used to indicate the correspondence between the pressure value and the attribute value of the first element attribute, and the second relationship is used to indicate the correspondence between the pressure value and the attribute value of the second element attribute.

12. The method according to any one of claims 7 to 11, characterized in that, The attribute includes a first sub-attribute and a second sub-attribute, and the mapping relationship includes a first sub-relationship and a second sub-relationship. The first sub-relationship is used to indicate the correspondence between the pressure value and the attribute value of the first sub-attribute, and the second sub-relationship is used to indicate the correspondence between the pressure value and the attribute value of the second sub-attribute.

13. The method according to any one of claims 2 to 12, characterized in that, The interface element is located in the first interface, which also includes a reference element. The attribute value of the reference element is determined based on the attribute value of the interface element.

14. The method according to any one of claims 1 to 13, characterized in that, The first pressure value belongs to a first pressure range, the second pressure value belongs to a second pressure range, the first pressure range corresponds to the first state, and the second pressure range corresponds to the second state.

15. The method according to any one of claims 1 to 14, characterized in that, The electronic device includes a pressure sensor; the method further includes, before displaying the interface element of the first state or the interface element of the second state: The pressure sensor acquires a first pressure signal and a second pressure signal. The first pressure value is determined based on the first pressure signal; The second pressure value is determined based on the second pressure signal.

16. The method according to any one of claims 1 to 15, characterized in that, Before displaying the interface element of the first state or the interface element of the second state, the method further includes: The first pressure value and the second pressure value are determined to be greater than or equal to the first pressure threshold.

17. The method according to any one of claims 1 to 16, characterized in that, The electronic device further includes a photoelectric sensor and / or an electrocardiogram sensor. Before displaying the interface elements of the first state or the interface elements of the second state, the method further includes: Determine one or more of the following: The detection result of the photoelectric sensor meets the first condition; The detection result of the electrocardiogram sensor meets the second condition; The electronic device is in a screen-on state; or... The electronic device is in a worn state.

18. The method according to any one of claims 1 to 17, characterized in that, Before receiving a pressing operation that is continuously applied to the electronic device during a first time period, the method further includes: The electronic device is in a non-interactive state; Upon receiving the first operation, the electronic device switches from the non-interactive state to the interactive state; The receiving of a pressing operation continuously applied to the electronic device during a first time period includes: in the interactive state, receiving a pressing operation continuously applied to the electronic device during the first time period.

19. The method according to any one of claims 1 to 18, characterized in that, The electronic device is a wearable device, which includes a button module and a pressure sensor.

20. The method according to claim 19, characterized in that, The wearable device is a watch or a bracelet, and the interface elements are located on the watch face of the wearable device.

21. A wearable device, characterized in that, The device includes a button module, a memory, and a processor. The button module includes a pressure sensor, the memory stores program instructions, and the processor executes the program instructions to cause the wearable device to perform the method of any one of claims 1 to 20.

22. The wearable device according to claim 21, characterized in that, The wearable device is a watch or a bracelet, and the interface elements are located on the watch face of the wearable device.

23. An electronic device, characterized in that, The device includes a memory and a processor, the memory storing program instructions and the processor executing the program instructions to cause the electronic device to perform the method of any one of claims 1 to 20.

24. A computer-readable storage medium, characterized in that, It contains a computer program that, when executed by a computer, enables the implementation of the method according to any one of claims 1 to 20.

25. A computer program product, characterized in that, It includes computer program code that, when run on a computer, causes the method of any one of claims 1 to 20 to be performed.

26. A display device, characterized in that, Includes modules for implementing the method of any one of claims 1 to 20.

27. A chip, characterized in that, The device includes a processor and a memory, wherein the processor is configured to read instructions from the memory, and when the processor executes the instructions, causes the chip to implement the method of any one of claims 1 to 20.

Images