User interface element adjusting method and device, equipment, medium and product

Abstract

The invention relates to the technical field of computers, and discloses a user interface element adjusting method and device, equipment, a medium and a product. According to the user interface element adjusting method, the transverse inclination angle of a mobile terminal is monitored, and the layout state of multiple elements in a graphical user interface is determined according to the preset angle interval to which the angle belongs; wherein the layout state is defined by the alignment mode and the spacing of the elements. According to the method, the layout of the user interface elements is adjusted to be in the state corresponding to the interval where the current inclination angle is located. By establishing the corresponding relation between the transverse inclination angle of the mobile terminal and the interface layout state, the dynamic adjustment of the interface is realized, the method can adapt to the single-hand operation of the left hand and the right hand of the user, and the operation flexibility is improved. The problem that the user interface layout is statically solidified and is difficult to adapt to different single-hand operation habits in related technologies is solved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and specifically to methods, apparatus, devices, media, and products for adjusting user interface elements. Background Technology

[0002] In daily use of mobile devices, users often need to hold and operate them with one hand. However, existing user interface designs typically employ fixed, static layouts, where the alignment and spacing of various user interface elements cannot be changed once set. This static layout makes it difficult to simultaneously satisfy the one-handed operation habits of both left-handed and right-handed users. When users switch hands or operate in a specific posture, they often encounter situations where interface elements are difficult to reach and operations become inconvenient.

[0003] Therefore, there is an urgent need for a method to adjust user interface elements in order to solve the problem that the existing user interface layout is fixed and cannot dynamically adapt to changes in the user's one-handed operation posture. Summary of the Invention

[0004] This disclosure provides a method, apparatus, device, medium, and product for adjusting user interface elements to solve the problem that the existing user interface layout is fixed and cannot dynamically adapt to changes in the user's one-handed operation posture.

[0005] In a first aspect, this disclosure provides a method for adjusting user interface elements, providing a graphical user interface via a mobile terminal, the graphical user interface including multiple user interface elements; the method includes: Obtain the horizontal tilt angle of the mobile terminal; Identify the angle range in which the horizontal tilt angle is located; the angle range is used to indicate the layout state of multiple user interface elements, including the alignment of multiple user interface elements and the spacing between multiple user interface elements. Adjust the layout of multiple user interface elements within the user interface to the layout state corresponding to the angle range.

[0006] The user interface element adjustment method disclosed herein establishes a direct correspondence between the physical posture of the mobile terminal and the layout state of the graphical user interface by acquiring the horizontal tilt angle of the mobile terminal and identifying the preset angle range within which the angle falls. Since the layout state is explicitly defined to include the alignment and spacing of user interface elements, when the method adjusts the interface layout to a state corresponding to the current angle range, it can achieve overall left or rightward convergence and density changes of the interface elements. Compared to the statically fixed layout of existing user interfaces, this method transforms the originally fixed interface into one that can be dynamically adjusted according to the user's one-handed grip posture, thereby solving the problems of rigid layouts and difficulty in adapting to different one-handed operating habits in related technologies, and improving the flexibility of user operation.

[0007] In one optional implementation, obtaining the lateral tilt angle of the mobile terminal includes: The lateral tilt angle is obtained using the gyroscope within the mobile terminal.

[0008] The lateral tilt angle in this method is obtained using a gyroscope within the mobile terminal. Since the gyroscope can directly and sensitively measure the device's angular velocity and attitude changes, it ensures real-time acquisition of the tilt angle data and fast response speed.

[0009] In one optional implementation, obtaining the lateral tilt angle of the mobile terminal further includes: The accelerometer in the mobile terminal is used to acquire linear acceleration data to determine the direction of gravity. The lateral tilt angle is corrected based on the linear acceleration data.

[0010] There is a technical issue with the potential for cumulative errors when using a gyroscope alone due to prolonged operation. This method addresses this by continuously correcting angle data using a stable gravity reference provided by an accelerometer. This significantly improves the long-term accuracy and anti-interference capability of tilt angle measurements, ensuring the stability and reliability of user interface layout adjustments.

[0011] In one optional implementation, the angle range includes an initial angle range and multiple adjustment angle ranges; the initial angle range is used to characterize that the mobile terminal is not in a tilted state; the adjustment angle range is used to characterize that the mobile terminal is in a tilted state.

[0012] This method divides the angle range into an initial angle range and multiple adjustment angle ranges, which are used to characterize the device's untilted and tilted states, respectively, thus enabling a clear distinction between the user's unconscious small-range shaking and conscious tilting operations.

[0013] In one alternative implementation, the method further includes: When the horizontal tilt angle moves from the initial angle range into an adjacent adjustment angle range, only the alignment of multiple user interface elements is adjusted. When the horizontal tilt angle enters other adjustment angle ranges, adjust the spacing between multiple user interface elements.

[0014] This method breaks down the adjustment process into two stages: first adjusting the alignment, and then adjusting the spacing. This makes the visual changes of the interface more orderly and avoids the visual chaos that may result from the simultaneous changes of multiple layout attributes.

[0015] In one alternative implementation, the method further includes: When the spacing between user interface elements is equal to the preset minimum spacing value, if the horizontal tilt angle continues to increase, the current spacing between user interface elements will remain unchanged.

[0016] Spacing may shrink infinitely due to excessive user tilt, causing excessive overlap of user interface elements and making them unclickable. This method sets a minimum spacing value for spacing adjustment to ensure that the spacing between elements does not shrink infinitely. This guarantees that even in the maximum tilt state, each user interface element still retains a sufficient area that can be accurately clicked by the user, thereby avoiding the problem of being unable to operate due to element overlap.

[0017] In one optional implementation, adjusting the layout state of multiple user interface elements within the user interface to a layout state corresponding to the angle range includes: When the horizontal tilt angle crosses the boundary between the first angle interval and the adjacent second angle interval, and reaches the preset buffer angle, the layout state of multiple user interface elements in the user interface is adjusted from the first layout state corresponding to the first angle interval to the second layout state corresponding to the second angle interval.

[0018] This method limits the triggering of layout state adjustments to a preset buffer angle when crossing the boundary of an angle range. It solves the technical problem that when the tilt angle of the user's handheld device fluctuates slightly near the range boundary, it can cause frequent and rapid switching between two layout states, resulting in visual jitter, thus greatly enhancing the stability of state switching.

[0019] In one alternative implementation, the method further includes: In response to the user's lock command, the current layout state of the user interface elements is locked so that the layout state no longer adjusts with changes in the horizontal tilt angle.

[0020] This method can respond to user lock commands to lock the current interface layout, solving the technical problem that the automatic adjustment function cannot distinguish between the user's true operational intent and unintentional tilting (such as adjusting the viewing angle). By allowing users to lock the layout after adjusting it to their satisfaction, it effectively prevents all unnecessary layout changes without operational intent.

[0021] Secondly, this disclosure provides a device for adjusting user interface elements, providing a graphical user interface via a mobile terminal, the graphical user interface including multiple user interface elements; the device includes: The acquisition module is used to acquire the lateral tilt angle of the mobile terminal; The recognition module is used to identify the angle range in which the horizontal tilt angle is located; the angle range is used to indicate the layout state of multiple user interface elements, including the alignment of multiple user interface elements and the spacing between multiple user interface elements. The adjustment module is used to adjust the layout state of multiple user interface elements within the user interface to a layout state corresponding to the angle range.

[0022] Thirdly, this disclosure provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the user interface element adjustment method of the first aspect or any corresponding embodiment described above.

[0023] Fourthly, this disclosure provides a computer-readable storage medium storing computer instructions for causing a computer to perform a method for adjusting user interface elements according to the first aspect or any corresponding embodiment described above.

[0024] Fifthly, this disclosure provides a computer program product, including computer instructions for causing a computer to execute a method for adjusting user interface elements of the first aspect or any corresponding embodiment described above. Attached Figure Description

[0025] To more clearly illustrate the technical solutions in the specific embodiments of this disclosure or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0026] Figure 1 This is a schematic diagram illustrating an application scenario according to an embodiment of this disclosure; Figure 2This is a schematic flowchart of a first method for adjusting user interface elements according to an embodiment of the present disclosure; Figure 3 This is a second flowchart illustrating a method for adjusting user interface elements according to an embodiment of the present disclosure; Figure 4 This is a schematic diagram showing that, according to an embodiment of the present disclosure, the card elements in the interface are in a default centered layout when the device is in a vertical state. Figure 5 This is a schematic diagram showing that when the device is tilted to the right according to an embodiment of the present disclosure, the card elements in the interface align to the right and move closer together. Figure 6 This is a schematic diagram showing that when the device is tilted to the left according to an embodiment of the present disclosure, the card elements in the interface align to the left and move closer together. Figure 7 This is a structural block diagram of a user interface element adjustment device according to an embodiment of the present disclosure; Figure 8 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of this disclosure. Detailed Implementation

[0027] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0028] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0029] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this disclosure, "a plurality of" means two or more, unless otherwise expressly specified.

[0030] As one optional application scenario of this disclosure embodiment, such as Figure 1 As shown, application 101 is installed in terminal device 110, and user 130 can interact with application 101 through terminal device 110 and / or access device of terminal device 110.

[0031] For example, application 101 can be any application that provides question-and-answer related services. For instance, application 101 could be a question-and-answer interactive application, such as a text-to-text application, an image-to-text application, etc. Figure 1 In the application scenario shown, if application 101 is active, the terminal device 110 can display the interface 102 of application 101. The interface 102 may include various pages that application 101 can provide, such as interactive pages, settings pages, query pages, etc.

[0032] In some embodiments, terminal device 110 is communicatively connected to server 120 to provide services to application 101. Terminal device 110 may be a mobile terminal, fixed terminal, or portable terminal, etc., including but not limited to mobile phones, desktop computers, laptop computers, multimedia tablets, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, terminal device 110 may also support any type of interface, and server 120 may be various types of computing systems or servers capable of providing computing power, including but not limited to mainframes, edge computing nodes, computing devices in cloud environments, etc.

[0033] It should be noted that, Figure 1 This is merely an example of an application scenario and does not limit the scope of protection of this disclosure.

[0034] The embodiments of this disclosure will now be described with reference to the accompanying drawings. It should be understood that the pages shown in the drawings are merely examples, and various page designs are possible in practice. The various graphic elements on the page may have different arrangements and different visual representations, one or more elements may be omitted or replaced, and one or more other elements may also be present; no limitations are imposed on the embodiments described in this disclosure. Furthermore, the embodiments are primarily described below with reference to terminal device 110. It should be understood that the actions described relative to terminal device 110 can be performed by application 101 on terminal device 110, or can be performed by application 101 in conjunction with its server (e.g., server 120).

[0035] In current mobile applications, graphical user interfaces (GUIs) typically contain multiple user interface elements to facilitate user operations such as tapping and swiping on the screen. In existing technologies, the vast majority of mobile application GUIs employ a static, pre-defined layout. Under this approach, the alignment and spacing between multiple user interface elements, such as cards, list items, or function buttons, remain fixed. This design is usually optimized based on mainstream user habits (e.g., right-handed use), which, while meeting the needs of some scenarios, exposes significant limitations due to its inherently one-size-fits-all approach. When a user is left-handed, or in specific situations (such as when the other hand is occupied) requires temporary use of the left hand, this fixed, right-hand-optimized interface layout becomes difficult to reach, severely impacting operational efficiency and user experience.

[0036] To address these issues, some simple solutions merely provide a manual left / right-hand mode switching option in system settings. However, this approach is not only cumbersome but also completely fails to meet users' needs for rapid, dynamic adjustments within a task flow. A deeper technical challenge lies in the fact that even if the user interface responds to the device's physical posture (e.g., tilt), an unoptimized, simplistic response mechanism can introduce new problems. For example, natural hand tremors can cause the interface to switch frequently and meaninglessly near critical angles, leading to visual fatigue and operational difficulties; boundless adjustments can result in excessive overlap of interface elements, making them unclickable; and unexpected changes in the interface layout during unintentional user actions (such as walking or riding in a vehicle) can also be disruptive. Therefore, existing technologies lack a complete solution that not only enables dynamic adjustments to the interface layout but also ensures that this adjustment process is precise, stable, controllable, and intuitive for the user.

[0037] According to an embodiment of this disclosure, a method for adjusting user interface elements is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0038] This embodiment provides a method for adjusting user interface elements, which can be used in the aforementioned mobile terminals, such as mobile phones and tablet computers.

[0039] First, this method provides a graphical user interface (GUI) through the aforementioned mobile terminal. A GUI refers to a visual interface composed of graphics and text displayed on the mobile terminal screen, such as the main interface of an application. A GUI includes multiple user interface elements, which are the basic units that constitute the GUI, such as multiple cards, icons, buttons, or list items displayed side-by-side or vertically on the interface. For example, when a user opens a news application, its main interface is the GUI, with multiple news cards arranged vertically on the screen; these news cards are the multiple user interface elements.

[0040] Figure 2 This is a flowchart of a method for adjusting user interface elements according to an embodiment of the present disclosure, such as... Figure 2 As shown, the process includes the following steps: Step S201: Obtain the horizontal tilt angle of the mobile terminal.

[0041] In this step, the lateral tilt angle refers to the angle of tilt of the mobile terminal in the left and right directions around its own longitudinal axis (i.e., the long axis from top to bottom). This is different from flipping the device forward or backward. For example, when a user holds the phone vertically, tilting it to the right will result in a positive angle (e.g., +15 degrees); tilting it to the left will result in a negative angle (e.g., -15 degrees).

[0042] This step utilizes the mobile terminal's internal sensing capabilities to monitor and obtain a numerical value representing the current degree of lateral tilt in real time. For example, the system detects that the user tilts the phone to the right and obtains a specific value of "+22 degrees".

[0043] In one example, a user holds a smartphone in their right hand and naturally tilts the phone to the right to bring user interface elements closer to the right side of the screen so that their right thumb can reach them more easily. As step S201 of this method is executed, the mobile terminal obtains the lateral tilt angle produced by this action and quantifies it into a specific value, such as "+22 degrees".

[0044] Step S202: Identify the angle range of the horizontal tilt angle. The angle range is used to indicate the layout state of multiple user interface elements, including the alignment of the multiple user interface elements and the spacing between them.

[0045] An angle range refers to a predefined range of angles. Multiple such ranges can be preset; for example, range A is greater than or equal to -20 degrees and less than or equal to +20 degrees, and range B is greater than or equal to +20 degrees and less than or equal to +30 degrees. Layout state refers to a specific, pre-designed arrangement of multiple user interface elements on the screen. Alignment refers to whether an element is aligned to the left, right, or center edge of the screen. Spacing refers to the distance between adjacent elements. Spacing can be negative when user interface elements can overlap; for example, if cards are partially obscured due to overlap, but the information on the cards can still be discerned, the spacing between the cards is negative.

[0046] Continuing from the previous example, after obtaining the horizontal tilt angle of "+22 degrees", this step is executed. According to the preset mapping relationship, the layout state indicated by angle interval B is "right-aligned, spacing of 10 pixels". Comparing "+22 degrees" with these intervals, it is identified that the current angle belongs to interval B. Therefore, the system determines that the target layout state should be "right-aligned, spacing of 10 pixels", which defines both the alignment method (right alignment) and the spacing (10 pixels). When the spacing between user interface elements is -10 pixels, it means that the width of the user interface elements partially overlapping and obscuring each other is 10 pixels.

[0047] Step S203: Adjust the layout state of multiple user interface elements within the user interface to the layout state corresponding to the angle range.

[0048] This step, based on the target layout state determined in the previous step, actually changes the visual presentation of multiple user interface elements on the screen so that their positions and spacing are completely consistent with the target state.

[0049] Continuing from the previous example, the target layout state has been determined to be "right-aligned with 10-pixel spacing." In this step, this adjustment will be performed. The previously centered news cards (i.e., multiple user interface elements) on the screen will be adjusted to the new state: all cards will be aligned to the right edge of the screen, and the vertical spacing between each card will become 10 pixels. At this point, the entire method has completed a full adjustment from the user's physical tilt to a visual change in the interface.

[0050] The user interface element adjustment method provided in this embodiment establishes a direct correspondence between the physical posture of the mobile terminal and the layout state of the graphical user interface by acquiring the horizontal tilt angle of the mobile terminal and identifying the preset angle range in which the angle is located. Since the layout state is explicitly defined to include the alignment and spacing of user interface elements, when the method adjusts the interface layout to a state corresponding to the current angle range, it can achieve overall left or rightward convergence and density changes of the interface elements. Compared to the static and fixed layout of user interfaces in existing technologies, this embodiment transforms the originally fixed interface into an interface that can be dynamically adjusted according to the user's one-handed grip posture, thereby solving the problems of rigid layout and difficulty in adapting to different one-handed operating habits in related technologies, and improving the flexibility of user operation.

[0051] This embodiment provides a method for adjusting user interface elements, which can be used in the aforementioned mobile terminals, such as mobile phones and tablets. The mobile terminal's screen provides a graphical user interface, such as the main interface of an application, which contains multiple user interface elements, such as multiple function cards displayed side-by-side. Figure 3 This is a flowchart of a method for adjusting user interface elements according to an embodiment of the present disclosure, such as... Figure 3 As shown, the process includes the following steps: Step S301: Obtain the horizontal tilt angle of the mobile terminal.

[0052] The lateral tilt angle here refers to the left and right tilt of the mobile terminal around its longitudinal axis (i.e., the long axis from top to bottom).

[0053] In a preferred embodiment, this step is primarily implemented using the gyroscope built into the mobile terminal. The gyroscope can monitor the angular velocity of the device in real time and with high sensitivity, thereby accurately calculating the lateral tilt angle. For example, when the user tilts the phone to the right, the gyroscope obtains a specific value of "+25 degrees".

[0054] To further improve data accuracy and anti-interference capabilities, this step can also include acquiring linear acceleration data for determining the direction of gravity using the accelerometer within the mobile terminal. Since gyroscopes may experience slight drift errors over time, while accelerometers provide an absolute, drift-free direction of gravity as a reference, the lateral tilt angle acquired by the gyroscope can be continuously corrected based on this linear acceleration data. For example, data fusion algorithms such as Kalman filtering can be used to combine the data from both sensors, ensuring that the final acquired angle value is both responsive and stable over the long term.

[0055] Step S302: Identify the angle range in which the horizontal tilt angle is located. The angle range is used to indicate the layout state of multiple user interface elements, including the alignment of the multiple user interface elements and the spacing between the multiple user interface elements.

[0056] The purpose of this step is to map continuous angle values ​​to discrete, predefined state intervals. These angle intervals are used directly to indicate the layout state of interface elements, which specifically defines the alignment and spacing of the elements.

[0057] In this embodiment, the angle range is divided into an initial angle range and multiple adjustment angle ranges.

[0058] The initial angle range is used to characterize a device that is not in, or is only in, a slight, unintentional tilt. For example, an initial angle range can be defined as greater than or equal to -20 degrees and less than or equal to +20 degrees. When the obtained lateral tilt angle falls within this range, the interface will maintain its default layout (such as center alignment).

[0059] The adjustment angle range is used to represent a user's conscious and intentional tilting operation. These ranges can be set as a series of continuous but non-overlapping ranges. For example, the adjustment angle range on the right can be set to greater than +20 degrees and less than or equal to +25 degrees, greater than +25 degrees and less than or equal to +30 degrees, etc.; while the left side corresponds to greater than or equal to -25 degrees and less than -20 degrees, greater than or equal to -30 degrees and less than -25 degrees, etc.

[0060] Step S303: Adjust the layout state of multiple user interface elements within the user interface to the layout state corresponding to the angle range.

[0061] This step involves rendering and adjusting the interface based on the angle range identified in the previous step.

[0062] This embodiment employs a step-by-step adjustment logic, specifically including the following steps: Step S3031: When the horizontal tilt angle moves from the initial angle range to the adjacent adjustment angle range, only the alignment of multiple user interface elements is adjusted.

[0063] Specifically, when the horizontal tilt angle first enters an adjacent adjustment angle range from the initial angle range, for example, from +18 degrees to +22 degrees, only the alignment of multiple user interface elements is adjusted. In practice, the alignment reference for all cards can be switched from the center line of the screen to the right edge of the screen, while the spacing between the cards remains unchanged during this stage.

[0064] Step S3032: When the horizontal tilt angle enters other adjustment angle ranges, adjust the spacing between multiple user interface elements.

[0065] Specifically, as the horizontal tilt angle continues to change and enters other adjustment angle ranges, such as from +22 degrees to +27 degrees, in addition to maintaining the alignment reference at the right edge of the screen, the spacing between multiple user interface elements also begins to adjust. For example, each time a new adjustment angle range is entered, the horizontal spacing between cards decreases by 5 pixels, making the entire element stack more compactly and closer to the user's thumb's operating hotspot.

[0066] To improve the stability and smoothness of the interaction, a buffer angle mechanism is introduced during state transitions. When the horizontal tilt angle crosses the boundary (i.e., 25 degrees) between the first angle interval (e.g., greater than +20 degrees and less than or equal to +25 degrees) and the adjacent second angle interval (e.g., greater than +25 degrees and less than or equal to +30 degrees), the system does not immediately trigger an adjustment. Instead, the angle value needs to continue changing and reach a preset buffer angle (e.g., 2 degrees), i.e., 27 degrees, before the layout state is adjusted from the state corresponding to the first interval to the state corresponding to the second interval. Similarly, when the angle returns from 27 degrees, it needs to return to 23 degrees (25 degrees - 2 degrees) before switching back to the previous state. This mechanism effectively avoids the problem of frequent flickering of the interface layout when the user makes slight movements near the critical angle.

[0067] In addition, to ensure basic usability of the interface during the adjustment process, this step also sets a minimum spacing boundary condition. A minimum spacing value is preset, especially when user interface elements are allowed to overlap (i.e., the spacing is negative). To prevent user interface elements from becoming unrecognizable and untouchable due to complete or excessive overlap, the spacing between user interface elements should not be less than the minimum spacing value. For example, if the user interface elements are cards, the minimum spacing value for spacing adjustment should ensure that each card, after overlapping due to spacing adjustment, has at least 48 pixels of visible and clickable width. When the width of the visible part of the card after spacing adjustment is about to be less than 48 pixels, even if the horizontal tilt angle continues to increase, the current spacing between each user interface element will remain unchanged and will not shrink further, thus avoiding the situation where the elements become unusable due to complete overlap.

[0068] Finally, this embodiment also provides a global user control mechanism. At any stage of execution, the current layout state of user interface elements can be locked in response to a user's lock command. The user can send this command by clicking a lock icon on the interface. Once the command is received, the system will pause the acquisition and recognition of the horizontal tilt angle, preventing the layout state from adjusting with changes in angle, even if the user is walking or riding in a vehicle. Clicking the icon again will unlock the interface and restore its dynamic adjustment functionality.

[0069] In summary, the user interface element adjustment method provided in this embodiment constructs a stable and user-friendly dynamic user interface adjustment scheme. By acquiring the horizontal tilt angle of the mobile terminal and mapping it to a preset angle range to adjust the layout, the problem of fixed interface layout in related technologies is fundamentally solved, enabling users to intuitively adjust the interface through physical posture. To ensure the accuracy and reliability of this core function, a gyroscope is further used for precise measurement, combined with an accelerometer for drift correction, thus providing stable and high-precision input.

[0070] Building upon this foundation, by dividing the angle range into initial and adjustment intervals and implementing different adjustment strategies accordingly (adjusting alignment first, then spacing), this embodiment breaks down the complex adjustment task into predictable steps, avoiding abrupt changes in operation. Simultaneously, to ensure the function's safe availability under all circumstances, a minimum spacing limit is set to prevent elements from overlapping and becoming unclickable, and a buffer angle mechanism is introduced to prevent interface jitter at critical angles. Finally, by providing a user lock function, the problem of unintended adjustments that may occur in complex scenarios such as walking is resolved. Through the organic combination of the above technical features, this embodiment not only achieves dynamic adaptation of the interface layout but also ensures, through a series of optimized designs, that the adjustment process is precise, controllable, stable, and practical, thereby providing users with a convenient and comfortable one-handed operation experience.

[0071] To better illustrate the technical solution of this disclosure, a preferred embodiment will be provided below. This embodiment is intended to describe the implementation process of the present invention in detail, but is not intended to limit the scope of protection of the present invention.

[0072] This embodiment provides a user interface adjustment method based on device posture. Its application environment is a mobile terminal application that supports portrait mode, such as a card game. Figure 4 As shown. In the application's interface, the user's multiple cards are displayed in a stacked manner, and the user needs to be able to easily select them with one hand (whether left or right).

[0073] The method disclosed in this embodiment is based on dynamically adjusting the alignment and spacing of a group of card elements in the interface by sensing the left and right tilt of the device, thereby realizing a user interface that can quickly adapt to single-handed operation with either hand. Specifically, it includes the following process: This embodiment first requires obtaining the device's tilt angle. This is mainly achieved by calling the gyroscope built into the mobile terminal. The gyroscope can accurately measure the device's angular velocity, and the real-time tilt angle of the device is obtained through integration. To improve the accuracy, speed, and anti-interference capability of the response, this method can also selectively combine accelerometer data for auxiliary judgment and correction, in order to filter out jitter caused by non-operational intentions such as user walking, and correct any drift that may be caused by the gyroscope.

[0074] The core of this method is a step-by-step linear adjustment logic, and its specific interaction flow is as follows: Figure 4 , Figure 5 and Figure 6 As shown, it includes the following steps: When the device is in a vertical or near-vertical position, the cards in the interface are in a default layout, such as centered alignment, and maintain a preset maximum spacing, such as... Figure 4 As shown. When a user tilts the device to the right, and the tilt angle first exceeds a preset initial activation threshold (e.g., 20°), the first layout adjustment is triggered. At this time, the card group's alignment changes from center alignment to right alignment, as shown below. Figure 5 As shown. Similarly, when tilted to the left by more than -20°, it will become left-aligned, as shown. Figure 6 As shown. This initial threshold of 20° is a user-customizable parameter that users can set according to their own operating habits.

[0075] After the cards are right-aligned, if the user continues to tilt them to the right, the spacing adjustment phase begins. Each time the tilt angle increases by a certain amount beyond the initial threshold (20°), the spacing between the cards decreases quantitatively. However, when the spacing is negative, the cards overlap. This "certain angle" is a user-defined parameter, for example, it can be set to 5°. This means that when the tilt angle reaches 25°, the spacing decreases once; when it reaches 30°, it decreases again. In other words, the layout changes discretely when crossing specific angle thresholds, rather than changing continuously with the angle.

[0076] To ensure the stability and user experience of the above adjustment logic, this embodiment also sets boundary conditions. Specifically, there is a lower limit to the reduction of card spacing. For example, when the spacing is negative, due to card overlap, the horizontal width of the unobstructed portion of each card shrinks to 48px, at which point further reduction will stop, even if the tilt angle continues to increase. This 48px value is set based on the minimum size to ensure reasonable user clicks (of course, it can be set to other values ​​according to specific needs or customized by the user), ensuring that even in the most compact layout, each card can still be accurately selected.

[0077] To prevent frequent UI layout jitter when users make slight movements near critical angles, this implementation introduces a buffering mechanism. For example, when tilting from 18° to 20°, the change won't be triggered immediately upon reaching 20°, but rather after exceeding 2 degrees (i.e., reaching 22°) before responding. Similarly, when returning from 25° to 20°, the state won't immediately return at 20°, but will only be triggered when returning to 18°. This 2° buffer ensures the intentionality of state transitions, greatly improving system stability.

[0078] All layout changes, whether switching alignment or compressing spacing, are not instantaneous. A smooth transition animation will be used to demonstrate this process, providing clear visual feedback to the user and helping them understand the interface changes.

[0079] Considering that users may unintentionally trigger this function while walking or riding in a vehicle, this embodiment provides a lock button. Users can adjust the card layout to their desired state and then click the lock button; at this point, the device will no longer respond to any tilt changes. Furthermore, as a preferred solution, this function can be locked by default when a user first enters the interface, requiring the user to actively click to unlock it, to avoid inconveniencing new users.

[0080] The core of the method provided in this embodiment lies in its ability to quickly adjust the user interface to align it to the left or right, thus conveniently adapting to different user grip styles for one-handed operation. It not only utilizes sensors such as gyroscopes to respond to device tilt but also employs a stepped adjustment mechanism to make the user's adjustment process clear and controllable. Furthermore, this embodiment includes a buffering mechanism to effectively prevent interface jitter at critical angles, a minimum spacing setting to ensure the usability of interface elements at all times, and a user locking function to ensure the stability and reliability of the solution in complex scenarios such as walking. This fundamentally solves the problem of rigid UI layouts and inability to flexibly adapt to users' real-time operational needs in existing technologies.

[0081] This embodiment also provides a device for adjusting user interface elements, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0082] This embodiment provides a device for adjusting user interface elements, providing a graphical user interface via a mobile terminal. The graphical user interface includes multiple user interface elements; such as... Figure 7As shown, the device includes: The acquisition module 701 is used to acquire the horizontal tilt angle of the mobile terminal; The recognition module 702 is used to identify the angle range in which the horizontal tilt angle is located; the angle range is used to indicate the layout state of multiple user interface elements, including the alignment of multiple user interface elements and the spacing between multiple user interface elements. The adjustment module 703 is used to adjust the layout state of multiple user interface elements within the user interface to a layout state corresponding to the angle range.

[0083] In one optional implementation, the acquisition module 701 is specifically used for: The lateral tilt angle is obtained using the gyroscope within the mobile terminal.

[0084] In one optional implementation, the acquisition module 701 is further configured to: The accelerometer in the mobile terminal is used to acquire linear acceleration data to determine the direction of gravity. The lateral tilt angle is corrected based on the linear acceleration data.

[0085] In one alternative implementation, the adjustment module 703 is specifically used for: When the horizontal tilt angle moves from the initial angle range into an adjacent adjustment angle range, only the alignment of multiple user interface elements is adjusted. When the horizontal tilt angle enters other adjustment angle ranges, adjust the spacing between multiple user interface elements.

[0086] In an alternative implementation, the adjustment module 703 is further configured to: When the spacing between user interface elements is equal to the preset minimum spacing value, if the horizontal tilt angle continues to increase, the current spacing between user interface elements will remain unchanged.

[0087] In an alternative implementation, the adjustment module 703 is further configured to: When the horizontal tilt angle crosses the boundary between the first angle interval and the adjacent second angle interval, and reaches the preset buffer angle, the layout state of multiple user interface elements in the user interface is adjusted from the first layout state corresponding to the first angle interval to the second layout state corresponding to the second angle interval.

[0088] In an alternative implementation, the adjustment module 703 is further configured to: In response to the user's lock command, the current layout state of the user interface elements is locked so that the layout state no longer adjusts with changes in the horizontal tilt angle.

[0089] The user interface element adjustment device provided in this disclosure can execute the user interface element adjustment method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects for executing the method. Further functional descriptions of the various modules and units described above are the same as in the corresponding embodiments described above, and will not be repeated here.

[0090] Figure 8 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure.

[0091] The following is a detailed reference. Figure 8 The diagram illustrates a structural schematic suitable for implementing an electronic device according to embodiments of the present disclosure. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 801, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 802 or a program loaded from memory 808 into random access memory (RAM) 803. The RAM 803 also stores various programs and data required for the operation of the electronic device. The processor 801, ROM 802, and RAM 803 are interconnected via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0092] Typically, the following devices can be connected to I / O interface 805: input devices 806 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 807 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 808 including, for example, magnetic tapes, hard disks, etc.; and communication devices 809. Communication device 809 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 8 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0093] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 809, or installed from a memory 808, or installed from a ROM 802. When the computer program is executed by the processor 801, it performs the functions defined in the method for adjusting user interface elements of embodiments of this disclosure.

[0094] Figure 8The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0095] This disclosure also provides a computer-readable storage medium in which the methods described in this disclosure can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code originally stored on a remote storage medium or a non-transitory machine-readable storage medium and subsequently stored on a local storage medium after being downloaded via a network. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium may also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code, which, when accessed and executed by the computer, processor, or hardware, implements the method for adjusting user interface elements shown in the above embodiments.

[0096] A portion of this disclosure can be applied to computer program products, such as computer program instructions, which, when executed by a computer, can invoke or provide methods and / or technical solutions according to this disclosure through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, and installation package files. Accordingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions; the computer compiling the instructions and then executing the corresponding compiled program; the computer reading and executing the instructions; or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0097] Although embodiments of the present disclosure have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A method for adjusting user interface elements, characterized in that, The method includes providing a graphical user interface via a mobile terminal, the graphical user interface comprising multiple user interface elements; the method includes: Obtain the lateral tilt angle of the mobile terminal; Identify the angle range in which the horizontal tilt angle is located; the angle range is used to indicate the layout state of the plurality of user interface elements, the layout state including the alignment of the plurality of user interface elements and the spacing between the plurality of user interface elements; Adjust the layout of multiple user interface elements within the user interface to a layout state corresponding to the angle range.

2. The method according to claim 1, characterized in that, The step of obtaining the lateral tilt angle of the mobile terminal includes: The lateral tilt angle is obtained using the gyroscope within the mobile terminal.

3. The method according to claim 2, characterized in that, The step of obtaining the lateral tilt angle of the mobile terminal further includes: The accelerometer in the mobile terminal is used to acquire linear acceleration data for determining the direction of gravity. The lateral tilt angle is corrected based on the linear acceleration data.

4. The method according to claim 1, characterized in that, The angle range includes an initial angle range and multiple adjustment angle ranges; the initial angle range is used to indicate that the mobile terminal is not in a tilted state; the adjustment angle range is used to indicate that the mobile terminal is in a tilted state.

5. The method according to claim 4, characterized in that, The method further includes: When the lateral tilt angle moves from the initial angle range into an adjacent adjustment angle range, only the alignment of the multiple user interface elements is adjusted. When the lateral tilt angle enters other adjustment angle ranges, the spacing between the multiple user interface elements is adjusted.

6. The method according to claim 5, characterized in that, The method further includes: When the spacing between user interface elements is equal to the preset minimum spacing value, if the horizontal tilt angle continues to increase, the current spacing between user interface elements remains unchanged.

7. The method according to claim 1, characterized in that, Adjusting the layout of multiple user interface elements within the user interface to a layout state corresponding to the angle range includes: When the lateral tilt angle crosses the boundary between the first angle interval and the adjacent second angle interval, and reaches the preset buffer angle, the layout state of multiple user interface elements in the user interface is adjusted from the first layout state corresponding to the first angle interval to the second layout state corresponding to the second angle interval.

8. The method according to claim 1, characterized in that, The method further includes: In response to a user's lock command, the current layout state of the user interface elements is locked so that the layout state no longer adjusts with changes in the horizontal tilt angle.

9. A device for adjusting user interface elements, characterized in that, A graphical user interface is provided via a mobile terminal, the graphical user interface including multiple user interface elements; the device includes: The acquisition module is used to acquire the lateral tilt angle of the mobile terminal; The identification module is used to identify the angle range in which the horizontal tilt angle is located; the angle range is used to indicate the layout state of the plurality of user interface elements, the layout state including the alignment of the plurality of user interface elements and the spacing between the plurality of user interface elements; The adjustment module is used to adjust the layout state of multiple user interface elements within the user interface to a layout state corresponding to the angle range.

10. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory storing computer instructions, and the processor executing the computer instructions to perform the method for adjusting user interface elements according to any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to perform the method for adjusting user interface elements according to any one of claims 1 to 8.

12. A computer program product, characterized in that, Includes computer instructions for causing a computer to perform a method for adjusting user interface elements according to any one of claims 1 to 8.

Images