Optimization methods, systems, storage media, and devices for audio playback interfaces on circular screens

Abstract

This invention relates to the field of interactive technology for circular screen devices, and discloses a method, system, storage medium, and device for optimizing the audio playback interface of a circular screen. The method includes: acquiring the physical parameters of the circular screen and establishing a polar coordinate system with the center of the screen as the origin; dividing the screen display area into multiple functional areas according to radial distance; adaptively laying out multiple elements of the audio playback interface based on the polar coordinate system and the partitioning results; expanding the touch response area of ​​interactive elements and recognizing and responding to various interactive gestures, including rotation gestures; and triggering dynamic visual feedback during user interaction. The above method comprehensively solves the adaptation problem of traditional rectangular UIs on circular screen devices by establishing a dedicated coordinate system for circular screens, optimizing the layout of interface elements, integrating multimodal interactive gestures, enriching visual animation effects, and realizing dynamic adaptive optimization of the interface.

Description

Technical Field

[0001] This invention relates to the field of interactive technology for circular screen devices, and in particular to a method, system, storage medium, and device for optimizing the audio playback interface of a circular screen. Background Technology

[0002] With the rapid development of wearable devices and smart home products, smart terminals with circular screens, such as smartwatches, smart speakers, and in-vehicle displays, have become increasingly popular. These devices are favored for their traditional aesthetics, comfortable wear, and compact structure. However, their unique circular physical form is fundamentally contradictory to the current mainstream user interface design system based on rectangular screens, leading to serious challenges in user experience.

[0003] Currently, most circular screen devices on the market directly adopt rectangular screen interface solutions, causing a series of problems: In terms of visual presentation, rectangular elements conflict with the circular edges, resulting in blank corners or information truncation on the screen, wasting display area and damaging aesthetics; in terms of interface layout, the traditional linear layout model cannot effectively utilize radial and circumferential space, making it difficult to scientifically arrange core elements and resulting in low space utilization; in terms of interactive experience, the touch accuracy of the circular edge area decreases, the interaction logic based on the rectangular hot zone fails, and accidental touches occur frequently. Existing solutions have not been innovated from the bottom up, and the smoothness of operation is far inferior to that of rectangular screen devices.

[0004] In summary, existing technologies lack a comprehensive interface solution that is specifically tailored for circular screen shapes and fully optimized from the underlying coordinate system and layout algorithm to the upper-level interaction logic. Summary of the Invention

[0005] The purpose of this invention is to address the shortcomings of the existing technology by proposing an optimization method for the audio playback interface of a circular screen device. By establishing a polar coordinate layout system, designing a circular control and multimodal gesture interaction, the invention achieves efficient space utilization and significantly improves operational accuracy.

[0006] On the one hand, a method for optimizing the audio playback interface on a circular screen is provided, including the following steps: Obtain the physical parameters of the circular screen and establish a coordinate system with the center of the screen as the reference. The screen display area is divided into multiple functional areas according to radial distance; Based on the polar coordinate system and partitioning results, an adaptive layout is implemented for multiple elements of the audio playback interface. Expand the touch response area of ​​interactive elements and recognize and respond to various interactive gestures, including rotation gestures; Trigger dynamic visual feedback during user interaction.

[0007] Furthermore, the establishment of the coordinate system includes: The physical parameters obtained through the device hardware interface include screen radius, screen center point coordinates, screen physical resolution, screen pixel density, and screen refresh rate. Construct a polar coordinate representation system with the screen center point coordinates as the origin and radial distance and wrap angle as parameters; Establish a bidirectional conversion function between polar coordinates and the device's native Cartesian coordinates to provide a mathematical basis for interface layout.

[0008] Furthermore, the adaptive layout includes: The multiple functional areas include a core display area, a secondary display area, and an edge interaction area; The album cover image is aspect ratio detected and processed into a square using a center cropping algorithm. A circular mask is then used to make it fit the circular boundary of the core display area, thus achieving adaptive layout of the album cover. A circular progress bar is used instead of the traditional straight progress bar, and it is dynamically placed in the edge interaction area. Its progress is represented by the change of the angle range of the highlighted arc segment. The main playback control buttons are evenly distributed on the circumference of the secondary display area according to a preset angle, and their visual size and radial position are dynamically calculated based on the screen size.

[0009] Preferably, the adaptive layout of the album cover further includes: The optimal display size of the cover is dynamically calculated based on the upper limit of the radius of the core display area; An anti-aliasing algorithm is applied to the high-resolution cover image to ensure the smoothness of the circular edges. Add shadows with varying transparency and edge highlights around the cover visual elements to create a three-dimensional visual depth.

[0010] More preferably, replacing the traditional linear progress bar with a circular progress bar further includes: Set the starting position of the progress bar to the angle corresponding to the top center of the screen; The highlighted color arcs within the corresponding angle range are dynamically calculated and drawn based on the percentage progress of the audio playback time. A progress indicator that can be dragged by the user and moved along a circular trajectory is placed at the end of the highlighted arc segment to realize the interactive function of adjusting the playback progress by dragging.

[0011] Furthermore, the touch-responsive area of ​​the extended interactive element also includes: Fitts' law is used to optimize the extended heat zone; the farther an element is from the center of the screen, the greater its touch heat zone extension coefficient. A preset gap is maintained between the touch zones of adjacent elements to avoid accidental touches; Based on users' historical operation data, the size of the hot zone is dynamically adjusted. If the accidental touch rate of a button exceeds the set threshold, its hot zone is automatically reduced and the distance between it and adjacent buttons is increased.

[0012] Furthermore, the recognition and response to the various interactive gestures include: Detect the continuous swiping trajectory of the user's finger within the interactive area at the edge of the screen and recognize it as a rotation gesture used to adjust the volume; Detects and recognizes two-finger pinch or spread gestures within the album cover display area as two-finger zoom gestures used to zoom the cover display size; Long presses exceeding a threshold in the album cover area are detected and identified as long presses that trigger the lyrics display overlay.

[0013] Preferably, the recognition and response to the rotation gesture further includes: The Kalman filter algorithm is used to smooth continuous touch points in order to accurately calculate the angular displacement of finger sliding; The volume adjustment value is calculated and applied in real time according to a preset ratio based on the change in angular displacement. When the user performs a rotation gesture, a ring-shaped volume indicator is temporarily displayed in the center of the screen, providing phased haptic vibration feedback.

[0014] Furthermore, the method also includes visualizing the audio spectrum around the album cover: Perform a Fast Fourier Transform (FFT) on the playing audio signal to decompose it into multiple frequency bands. The amplitude value of each frequency band is mapped to the height of a columnar element that is uniformly distributed on the circumference, thus forming a ring spectrum. The ring spectrogram is dynamically changed with the audio using frequency-based hue mapping and inter-frame smoothing interpolation algorithms.

[0015] Furthermore, the method also includes implementing adaptive switching between multiple interface states: The system responds to an upward swipe gesture, switching from the main playback interface to a circular playlist interface with items arranged in an arc around the circumference. Long press on a specific area to bring up the sound effect settings panel, which is organized into multiple sound effect adjustment controls in a concentric ring pattern; The system automatically switches between daytime and nighttime color themes based on ambient light sensor data or system time information.

[0016] Preferably, the automatic switching between daytime and nighttime color themes includes: Real-time monitoring of ambient light intensity or system time, and comparison with preset thresholds to determine whether mode switching is triggered; Adjust the color scheme of the interface background, buttons, text and other elements to a dark color scheme and reduce the global color saturation. Cross-fade-in and cross-fade-out animations are used to achieve a smooth transition between the old and new color themes.

[0017] Furthermore, the method also includes adaptive processing for changes in the physical orientation of the device: The device's directional rotation angle is continuously monitored using an accelerometer or gyroscope. Based on the aforementioned rotation angle, the overall layout orientation of all interface elements is dynamically adjusted to ensure that the core interactive controls always face the physical bottom of the device. During interface rotation, text elements are independently oriented to ensure readability for the user.

[0018] On the other hand, a circular screen audio playback interface optimization system is provided, including: The coordinate system establishment module is used to obtain the physical parameters of the circular screen and establish a coordinate system with the center of the screen as the reference. The display area dynamic division module is used to divide the screen display area into multiple functional areas according to radial distance; The element adaptive layout module is used to adaptively layout multiple elements of the audio playback interface based on the polar coordinate system and the partitioning results. The interactive gesture recognition and response module is used to expand the touch response area of ​​interactive elements and recognize and respond to various interactive gestures, including rotation gestures. The dynamic visual feedback generation module is used to trigger dynamic visual feedback during user interaction.

[0019] In addition, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the circular screen audio playback interface optimization method described in any of the above claims.

[0020] Meanwhile, an electronic device is provided, comprising: one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement the circular screen audio playback interface optimization method described above.

[0021] Compared with the prior art, the beneficial effects of the present invention are: This invention establishes a polar coordinate system and divides the screen into concentric circular regions, enabling intelligent and coordinated arrangement of interface elements along the circumference and radial direction. This solves the problems of edge blanks and information truncation caused by traditional rectangular interfaces on circular screens, allowing the screen display space to be maximized and the visual presentation to be more harmonious and beautiful. This invention employs an adaptive expansion algorithm for touch hot zones to enlarge the actual touch response area of ​​elements. It also uses a circular progress bar, circumferentially distributed control buttons, and multimodal interaction methods such as rotation gestures, two-finger zoom, and long presses. This makes user operation more in line with the natural operation logic of a circular screen, significantly reducing the accidental touch rate and improving the smoothness and responsiveness of core functions such as playback control, progress adjustment, and volume adjustment. This invention integrates dynamic visual effects such as album cover rotation animation, smooth progress bar growth, button press feedback, and audio spectrum visualization, making the interface no longer static but able to respond to playback status and user operations in real time, greatly enhancing the sense of feedback and the user's immersive experience. This invention systematically constructs a set of interface optimization methods specifically designed for circular screen devices. From the establishment of the underlying coordinates to the implementation of the upper-level interaction, the steps are clear and complete, with strong operability and wide applicability. It can effectively solve the long-standing pain points faced by various circular screen devices in audio playback interfaces. Attached Figure Description

[0022] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings: Figure 1 This is a flowchart of a method for optimizing a circular screen audio playback interface according to the present invention; Figure 2 This is a structural block diagram of a circular screen audio playback interface optimization system according to the present invention; Figure 3 This is a schematic diagram of an embodiment of an electronic device according to the present invention. Detailed Implementation

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

[0024] This invention addresses the geometric characteristics of circular screens by establishing a coordinate system (preferably polar coordinates) with the screen center as the reference point. This system adaptively lays out interface elements circumferentially or radially, dividing the screen into multiple functional areas (such as a core display area, secondary display area, and edge interaction area) based on radial distance. A circular progress bar and circumferentially distributed controls are used to maximize screen space utilization. The invention expands the touch response area of ​​interactive elements (preferably dynamically expanded based on Fitts's law), integrating the recognition and response to multimodal interactive gestures such as rotation, two-finger zoom, and long press. Dynamic visual feedback is triggered during user interaction, significantly improving operational accuracy, space utilization, and visual experience on circular screens. This invention is applicable to various circular screen applications, including audio playback, video playback, health monitoring, and navigation.

[0025] The following detailed description uses an audio playback interface as a representative embodiment, and the technical solution is also applicable to other types of circular screen interactive interfaces. This embodiment uses a mainstream smartwatch (1.5-inch AMOLED circular screen, 480×480 pixel resolution) as an example.

[0026] Example 1 Please see Figure 1 The technical solution for optimizing a circular screen audio playback interface provided in this embodiment includes the following steps: S1: Obtain the physical parameters of the circular screen and establish a coordinate system with the center of the screen as the reference. S2: Divide the screen display area into multiple functional areas according to radial distance; S3: Based on the polar coordinate system and partitioning results, adaptively layout multiple elements of the audio playback interface; S4: Expand the touch response area of ​​interactive elements and recognize and respond to various interactive gestures, including rotation gestures; S5: Triggers dynamic visual feedback during user interaction.

[0027] First, considering the geometric characteristics of a circular screen, various coordinate systems can be used for interface layout, including polar coordinate systems, Cartesian coordinate systems, or hybrid coordinate systems. Among them: (1) Polar coordinate system: with the center of the screen as the origin, the position is described by radial distance (r) and surrounding angle (θ), which best matches the natural geometric characteristics of the circular screen. It is simple and intuitive to calculate when making circular and radial layouts, and is the preferred solution of the present invention.

[0028] (2) Cartesian coordinate system: The position is described by horizontal and vertical coordinates (x, y). Although it is consistent with the original coordinates of the device, complex trigonometric function transformations are required when dealing with circular layouts.

[0029] (3) Hybrid coordinate system: Polar coordinates are used during layout, and Cartesian coordinates are used during rendering, taking into account both calculation convenience and system compatibility.

[0030] This embodiment preferably uses a polar coordinate system and establishes a transformation relationship with Cartesian coordinates. The specific steps are as follows: S101: Physical parameters obtained through the device hardware interface include screen radius (in pixels) and screen center point coordinates. The system stores basic physical parameters such as screen physical resolution (width W and height H in pixels), screen pixel density (PPI, pixels per inch), and screen refresh rate. For example, a smartwatch equipped with a 1.5-inch circular AMOLED screen has a screen radius R = 240 pixels, center coordinates (Cx, Cy) = (240, 240), a resolution of 480×480 pixels, a PPI of 326, and a refresh rate of 60Hz. These parameters are stored in a global configuration object for subsequent interface layout calculations.

[0031] S102: Construct a polar coordinate system with the screen center point coordinates as the origin and radial distance and wrap-around angle as parameters. Specifically, based on the obtained screen physical parameters, establish a polar coordinate system with the screen center as the origin. This coordinate system adopts... Notation, where r represents the radial distance from the center of the screen ( ), Indicates the angle relative to the right direction ( Simultaneously, a conversion function between polar coordinates and Cartesian coordinates is established, expressed as follows: , , in, These are the pixel coordinates of the point in the Cartesian coordinate system. This represents the pixel coordinates of the center point in the Cartesian coordinate system. This coordinate system provides the mathematical basis for the circular layout and radial arrangement of subsequent interface elements. For example, placing a play button at the bottom of the screen (θ=270°, r=180) yields Cartesian coordinates of (240, 420) through coordinate transformation.

[0032] S103: Establish a bidirectional conversion function between polar coordinates and the device's native Cartesian coordinates, providing a mathematical basis for subsequent interface layouts based on circles and radial coordinates.

[0033] Next, the safety display area is divided in step S2. Based on the radial characteristics of the circular screen and human-computer interaction requirements, the screen can be divided into different numbers and functions of areas according to radial distance. Common division schemes include: (1) Two-area division: core display area (r ≤ 0.8R) and edge interaction area (0.8R < r ≤ 0.95R), which is suitable for simple scenarios with fewer interface elements.

[0034] (2) Three-area division: core display area (r ≤ 0.7R), secondary display area (0.7R < r ≤ 0.85R), and edge interaction area (0.85R < r ≤ 0.95R), which can arrange interface elements of different priorities more precisely, and is the preferred solution of the present invention.

[0035] (3) Four or more zones: can be further subdivided into core zone, inner ring zone, middle ring zone, outer ring zone, etc., which is suitable for complex interfaces with high information density.

[0036] The specific radius ratio thresholds for each region can be adjusted based on screen size, application scenario, and user test results.

[0037] To ensure that interface elements are not clipped by the circular edges and to reserve sufficient touch margins, this embodiment divides the circular screen into three concentric circular areas, as detailed below: Core display area ( Secondary display area ( ) and edge interaction area ( The core display area is used to display main content such as album art and song information; the secondary display area is used to place secondary control elements such as volume icons and lyric scrolling areas; the edge interaction area is used for the circular progress bar and rotation gesture recognition. Areas exceeding 0.95R are designated as protected areas and no interactive elements are placed there.

[0038] For example, on a screen with a radius of 240 pixels, the core display area has a radius of 168 pixels, the secondary display area has a radius of 168-204 pixels, the edge interaction area has a radius of 204-228 pixels, and the album cover is ultimately displayed with a diameter of 160 pixels.

[0039] Then, step S3 involves adaptive layout of interface elements, including adaptive circular display of the album cover, design of a circular playback progress bar, circular distribution of playback control buttons, and circular layout of song information text. Specifically, this includes: S301: The album cover image is aspect ratio detected, and a center-cropping algorithm is used to process it into a square. A circular mask is then applied to make it fit the circular boundary of the core display area. The adaptive layout of the album cover further includes: The optimal display size of the cover is dynamically calculated based on the upper limit of the radius of the core display area; An anti-aliasing algorithm is applied to the high-resolution cover image to ensure the smoothness of the circular edges. Add shadows with varying transparency and edge highlights around the cover visual elements to create a three-dimensional visual depth.

[0040] Specifically, for the album cover, a core visual element of the audio playback interface, intelligent cropping and scaling algorithms are employed. First, the dimensions and aspect ratio of the original album cover image are detected. If it's a square cover, it's directly inscribed within the circular boundary of the core display area, with a radius of 0.6R. If it's a rectangular cover, a center-cropping method is used to extract the square area before circular cropping. A circular mask is applied to ensure perfectly rounded edges. Subtle shadow effects and edge highlights are also added to enhance visual depth. For high-resolution cover images, an anti-aliasing algorithm is applied to ensure smooth edges.

[0041] In this embodiment, if the original size of the album cover is 1000×1000 pixels, on a screen with a radius of 240 pixels, the cover is scaled to 288×288 pixels and a circular mask is applied, only displaying a circular area with a radius of 144 pixels, and adding shadow and highlight effects around it to create a stereoscopic visual effect.

[0042] S302: Replace the traditional straight progress bar with a circular arc visual element and dynamically place it within the edge interaction area. Its progress is represented by changes in the angle range of the highlighted arc segment. The replacement of the traditional straight progress bar with a circular arc visual element further includes: Set the starting position of the progress bar to the angle corresponding to the top center of the screen; The highlighted color arcs within the corresponding angle range are dynamically calculated and drawn based on the percentage progress of the audio playback time. A progress indicator that can be dragged by the user and moved along a circular trajectory is placed at the end of the highlighted arc segment to realize the interactive function of adjusting the playback progress by dragging.

[0043] Specifically, we abandoned the traditional rectangular horizontal progress bar and designed a circular progress bar distributed along the edge of the circular screen. The circular progress bar is located in the edge interaction area, specifically within a circular region of 0.88R to 0.92R, with a line width of 0.04R. The progress bar starts at -90° (at the 12 o'clock position) and increases clockwise. The current playback progress is indicated by a highlighted color segment, while the unplayed portion is indicated by a semi-transparent color segment. A draggable indicator is added to the current playback position on the progress bar, allowing users to fast forward or rewind by touching and dragging the indicator along the circumference. The progress bar uses a gradient fill to enhance visual appeal, and a scale mark is added every 15° to help users judge the progress.

[0044] In this embodiment, the center radius of the circular progress bar is set to 0.9R, the line width is 0.04R, and a highlighted arc segment is drawn clockwise from the starting position of -90° to represent the playback progress. A draggable circular indicator is added at the progress position for the user to adjust the playback progress.

[0045] S303: The main playback control buttons are evenly distributed around the circumference of the secondary display area according to a preset angle, and their visual size and radial position are dynamically calculated based on the screen size. Specifically, the playback control buttons (including the three main buttons: previous track, play / pause, and next track) are evenly distributed around the circumference of the secondary display area. The centers of the three buttons are located at angles of 180° (left side - previous track), 270° (bottom - play / pause), and 0° (right side - next track), respectively, with a radial distance of 0.75R from the center of the screen. The play / pause button, as the main operation button, has a diameter of 0.15R; the previous track and next track buttons, as secondary buttons, have a diameter of 0.12R. Each button uses a circular background with a semi-transparent design (70% transparency). When pressed, the transparency drops to 50% and a ripple animation effect is added, providing clear tactile feedback. The button icons use vector graphics to ensure clear display at different resolutions.

[0046] In addition, the song titles, artist names, and other text information are arranged in an arc shape, distributed along a circular path. The song title is displayed in an arc-shaped area above the album cover (angle range -45° to 45°, on an arc with a radius of 0.35R), and the artist name is displayed in an arc-shaped area below the album cover (angle range 135° to 225°, on an arc with a radius of 0.35R). The text is arranged along the arc path, and each character is rotated according to its position on the arc so that the text baseline is tangent to the arc. The font size adaptively adjusts according to the screen size, with the title font size at 0.04R and the artist name font size at 0.03R. If the text is too long and exceeds the arc area, a scrolling marquee effect or ellipsis is used to truncate it. The text uses an outline effect to enhance readability, especially against a light-colored album cover background.

[0047] In addition to the album cover, circular progress bar, and playback control buttons mentioned above, the adaptive layout method of this invention can also be applied to other types of interface elements, including but not limited to: (1) Notification icons: distributed along a specific angle of the circumference, such as displaying message notifications at the 12 o'clock position and call reminders at the 3 o'clock position; (2) Quick function buttons: evenly distributed along the circumference of the secondary display area, supporting user-defined functions; (3) Circular menu: Multiple menu items are arranged along a circle and can be switched by rotating the gesture; (4) Circular instrument panel: such as heart rate display, step count, etc., using a circular scale and pointer design; (5) Multi-layer concentric circle information: Different types of data are displayed in radial layers, such as the temperature, humidity and wind speed in the weather forecast are displayed in layers.

[0048] The specific selection and layout of interface elements can be flexibly adjusted according to the application scenario, while maintaining the same adaptive layout principle in the circumferential or radial direction.

[0049] Next, step S4, touch interaction optimization and gesture recognition, is performed. First, the dynamic adaptive expansion algorithm for the touch hotspot in step S4 addresses the higher difficulty of touch control at the edges of circular screens. The actual touch response area of ​​each interactive element (button, progress bar indicator, etc.) is expanded by 1.5 times compared to its visual display area, forming an invisible expanded touch hotspot. The expansion of the touch response area can employ various strategies, including: (1) Fixed ratio expansion: The touch hot area of ​​all interactive elements is expanded at a uniform ratio (e.g., 1.5 times), which is simple to implement but does not take into account position differences.

[0050] (2) Adaptive scaling based on Fitts's Law (preferred solution): The scaling factor is dynamically adjusted according to the distance of the element from the center of the screen; the farther the distance, the greater the scaling, which conforms to ergonomic principles. The scaling factor calculation formula is: , Where k is the expansion coefficient, k_base is the base coefficient (e.g., 1.5), k_factor is the adjustment factor (e.g., 0.5), r is the distance of the element from the center of the screen, and R is the screen radius.

[0051] (3) Dynamic expansion based on user behavior: Adjust the size of the hot zone in real time according to the user's historical operation data (such as accidental touch rate, touch time, etc.) to achieve personalized optimization.

[0052] This embodiment preferably employs an adaptive expansion based on Fitts's law, and dynamically adjusts it in conjunction with user behavior data. Specifically, it includes: The expansion of the hot zone is optimized using Fitts' Law. The farther an element is from the center of the screen, the greater its touch hot zone expansion coefficient. The hot zone of the farthest element can be expanded up to 2 times. A preset gap (at least 0.05R) is maintained between the touch hot areas of adjacent elements to avoid accidental touches; Based on users' historical operation data, the size of the hot zone is dynamically adjusted. If the accidental touch rate of a button exceeds the set threshold, its hot zone is automatically reduced and the distance between it and adjacent buttons is increased.

[0053] On a screen with a radius of 240 pixels in this embodiment, the play / pause button has a visual diameter of 36 pixels, but its touch area diameter is expanded to 54 pixels (36×1.5). The previous and next track buttons are farther from the center of the screen, with a visual diameter of 29 pixels and a touch area expanded to 58 pixels (29×2.0). The circular progress bar indicator has a visual diameter of 16 pixels, and due to its location in the outermost edge interaction area, its touch area is expanded to 32 pixels (16×2.0). The system detects that the user accidentally touched the next track button twice in the last 10 operations (a 20% accidental touch rate), automatically reducing the touch area of ​​this button to 1.6 times (46 pixels), while increasing the distance between it and the play button from the standard 12 pixels to 20 pixels.

[0054] In addition, the recognition and response to the multiple modal interactive gestures in step S4 includes: S401: Detects the continuous sliding trajectory of the user's finger within the interactive area at the edge of the screen and recognizes it as a rotation gesture used to adjust the volume.

[0055] To address the touch point jitter issue in rotation gesture recognition, various filtering algorithms can be employed: (1) Simple moving average filtering: Calculate the average position of the most recent N touch points. It is simple to implement but has a delayed response.

[0056] (2) Gaussian filtering: Gaussian weighted smoothing of contact data can effectively reduce noise, but parameter selection is complicated.

[0057] (3) Kalman filtering (preferred solution): Based on the system dynamic model and measurement noise model, the optimal estimation can be performed. It can effectively suppress jitter while maintaining fast response (delay of 15-25 milliseconds), and improve the gesture recognition accuracy by 78%. It is the preferred solution of this invention.

[0058] (4) Particle filtering: It is suitable for nonlinear systems, but has high computational complexity and poor real-time performance on mobile devices.

[0059] This embodiment preferably uses the Kalman filtering algorithm, specifically including: The Kalman filter algorithm is used to smooth continuous touch points in order to accurately calculate the angular displacement of finger sliding; The volume adjustment value is calculated and applied in real time according to a preset ratio based on the change in angular displacement. When the user performs a rotation gesture, a ring-shaped volume indicator is temporarily displayed in the center of the screen, providing phased haptic vibration feedback.

[0060] Specifically, we fully utilize the characteristics of a circular screen, introducing rotation gestures as the primary interaction method for volume control. Users place their fingers on the screen's edge interaction area (within the 0.85R to 0.95R range) and slide them clockwise or counter-clockwise. The system detects the angular displacement of the finger in real time. A clockwise rotation increases the volume, while a counter-clockwise rotation decreases it, changing the volume by 5% for every 15° rotation. The rotation gesture recognition employs multi-point sampling and a Kalman filter algorithm to improve accuracy and smoothness, avoiding jitter. While the user performs a rotation gesture, a volume indicator is temporarily displayed in the center of the screen, showing the current volume percentage in a circular shape, and automatically fades out after one second when the operation stops. Haptic feedback is also provided, generating a short vibration for every 5% volume change. The formula we use to calculate the volume increase is as follows: , , in, This indicates the amount of change in volume. This represents the angular displacement (angle) of the finger rotation. This indicates the change in angle per unit (default 15°). This indicates the percentage change in volume per unit (default 5%). This indicates the current volume percentage. This indicates the new volume percentage.

[0061] In this embodiment, when a user slides their finger 90° clockwise around the edge interaction area, the system calculates a volume increase of 30% (90° ÷ 15° × 5%), resulting in a new volume of 80%. A circular volume indicator is displayed in the center of the screen, providing intermittent haptic vibration feedback. After the user releases their finger, the indicator remains displayed for 1 second before fading out.

[0062] S402: Detects and recognizes two-finger pinch or spread gestures within the album art display area as two-finger zoom gestures used to scale the album art display size. Specifically, to allow users to view album art details more clearly, a two-finger zoom gesture interaction is implemented. When a user performs a two-finger pinch or spread gesture in the album art area, the system detects changes in the distance between the two touch points and adjusts the album art display size in real time. A shrink gesture can shrink the album art to a minimum of 0.4R, while a zoom gesture can expand the album art to a maximum of 0.8R (at which point the edge of the album art is close to the boundary of the secondary display area). During the zooming process, the album art maintains its circular shape and center position on the screen, only changing its radius. Simultaneously, other interface elements (playback control buttons, progress bar, etc.) automatically adjust their position and size to avoid overlapping with the enlarged album art. When zooming in, the song title and artist name are temporarily hidden to free up more space for the album art display. The zoom animation uses an elastic easing function to make the zooming process more natural and smooth.

[0063] S403: Detects long-press operations exceeding a threshold duration in the album cover area and identifies them as long-press gestures that trigger the lyrics display overlay. Specifically, we introduce a long-press gesture interaction to allow users to quickly view lyrics. When a user long-presses on the album cover area for more than 500 milliseconds, a semi-transparent circular lyrics overlay pops up from the bottom, covering the top of the interface. The lyrics overlay has a radius of 0.8R, a frosted glass effect (Gaussian blur) background, and 60% transparency, making the underlying interface faintly visible. The lyrics content scrolls along a timeline, with the currently playing lyric line highlighted (0.04R font size, white color), and the preceding and following lyric lines displayed in a smaller font size (0.03R) and semi-transparent color (50% transparency). Users can swipe up and down in the lyrics overlay area to browse the complete lyrics, and clicking on any lyric line will jump to the corresponding playback time. Releasing the finger or clicking outside the overlay area causes the lyrics overlay to slide down and fade away, taking 250 milliseconds.

[0064] Next, regarding the dynamic effects and visual feedback in step S5, the triggering of the dynamic visual effects includes: S501: Drives a continuous and smooth rotation animation of the album art around the center of the screen while audio is playing. First, during audio playback, the album art performs a smooth rotation animation, simulating the visual experience of a classic record player. The album art rotates clockwise around the center of the screen at a constant angular velocity, with a rotation period of 8 seconds (7.5 rotations per minute), or 45° per second. The rotation animation uses linear easing to maintain a constant speed, ensuring visual smoothness. When the audio pauses, the album art rotation gradually decelerates and stops, a deceleration process lasting 500 milliseconds, using an ease-out interpolation function to simulate physical inertia. When audio resumes playback, the album art accelerates its rotation from the current angle back to normal speed, an acceleration process lasting 300 milliseconds, using an ease-in interpolation function. The rotation animation utilizes GPU-accelerated rendering to ensure a smooth 60 frames per second refresh rate, avoiding stuttering.

[0065] S502: Enables the highlighted arc of the circular progress bar to extend smoothly with a color gradient effect according to the playback time. Specifically, the circular progress bar uses a smooth growth animation to reflect the playback progress in real time. The system updates the progress bar 20 times per second (50 millisecond update interval), converting the current playback time into an angle increment, gradually extending the highlighted arc clockwise. The progress bar color uses a dynamic gradient effect, grading from dark blue at the starting point (-90°) to light blue at the current playback position, creating a visual sense of flow. The progress bar indicator (circular marker) moves smoothly along the circumference, keeping its position synchronized with the end of the highlighted arc. When the user drags the progress bar indicator, the highlighted arc follows the indicator's position in real time. After releasing the finger, the playback position jumps to the corresponding time point on the indicator, and the progress bar continues to grow from the new position. When fast-forwarding or rewinding, the progress bar grows or shortens at a faster rate (2 times), providing immediate visual feedback.

[0066] S503: Triggers a combination of visual feedback, including button scaling, transparency changes, and a center-diffusing ripple animation, when the user presses an interactive button. Specifically, the interactive button implements a refined press feedback animation, enhancing the realism and responsiveness of the interactive experience. When the user presses the button, the following visual feedback is triggered: the button immediately shrinks to 95% of its original size, while the background transparency decreases from 70% to 50% in 80 milliseconds using an ease-out interpolation function; a ripple animation spreads outward from the center of the button, with the ripple radius rapidly expanding from 0 to 1.5 times the button radius in 300 milliseconds, and the transparency decreasing from 50% to 0%, creating a ripple effect; the button shadow distance increases by 2 pixels, simulating a pressing effect. When the user releases their finger, the button returns to its original size in 100 milliseconds using an elastic ease-out interpolation function, producing a slight rebound effect. Simultaneously, the device provides haptic feedback, generating a short 50-millisecond vibration. For function switching buttons (such as play / pause), the button icon will smoothly transform into a pause icon when switching states, with the transformation process lasting 200 milliseconds.

[0067] In addition, this dynamic display effect also includes visualizing the audio spectrum around the album cover: Perform a Fast Fourier Transform (FFT) on the playing audio signal to decompose it into multiple frequency bands. The amplitude value of each frequency band is mapped to the height of a columnar element that is uniformly distributed on the circumference, thus forming a ring spectrum. The ring spectrogram is dynamically changed with the audio using frequency-based hue mapping and inter-frame smoothing interpolation algorithms.

[0068] Specifically, we added an audio spectrum visualization ring around the album cover to display the frequency distribution of the audio in real time, enhancing the dynamism and technological feel of the interface. The spectrum ring is located in the circular area between the album cover and the playback control buttons, with a radius ranging from 0.65R to 0.7R. The audio signal is decomposed into 32 frequency bands using FFT (Fast Fourier Transform), with each band corresponding to a bar-shaped element on the circumference, evenly distributed within a 360° range. The height of each bar changes in real time according to the amplitude of the corresponding frequency, with a maximum height of 0.05R and a minimum height of 0.01R. The bar-shaped elements use a gradient fill, with the color transitioning from a semi-transparent white (40% transparency) on the inside to a highly saturated color on the outside (mapped to different hues according to frequency: red for low frequencies, green for mid frequencies, and blue for high frequencies). The spectrum ring updates at a 60FPS refresh rate, employing a smooth transition algorithm to avoid abrupt jumps and present a smooth, rhythmic effect.

[0069] The formula for calculating the height of the spectral column is as follows: , in, This represents the final height (in pixels) of the frequency band bar. Indicates the minimum height of the frequency band (default 0.01R). Indicates the maximum altitude of the frequency band (default 0.05R). This represents the normalized amplitude value (0-1) of the current frequency band, where R is the screen radius (pixels).

[0070] In this embodiment, the spectrum loop is located in the region with a radius of 0.65R to 0.7R. The audio FFT is decomposed into 32 frequency bands, each represented by a bar graph element. The height changes dynamically according to the amplitude, and the color is mapped according to the frequency (red for low frequency, green for mid frequency, and blue for high frequency). The system refreshes at 60 FPS and uses smooth interpolation to avoid flickering.

[0071] In addition to the methods mentioned above, this project also includes implementing adaptive switching between multiple interface states: First, the interface responds to an upward swipe gesture, switching from the main playback interface to a circular playlist interface with items arranged in an arc around its circumference. Specifically, the circular playlist interface is designed so that users can switch from the main playback interface to the playlist via an upward swipe. The playlist uses a circular scrolling view, with list items arranged circumferentially to form a ring menu effect. Each list item is a sector containing the song title, artist name, and duration information, with a sector angle of 30°, allowing for the simultaneous display of 12 songs (360° ÷ 30°). The currently playing song is highlighted at the 12 o'clock position (-90° position), and other songs are arranged clockwise in playback order. Users can scroll the list by rotating it within the list area, switching items every 30° rotation. Clicking any list item switches the interface back to the main playback interface and begins playing the selected song. The switching animation uses a circular contraction / expansion effect, taking 400 milliseconds; the main playback interface expands circularly from the center of the screen to cover the entire screen, while the playlist interface contracts from a full-screen circle until it disappears at the center of the screen.

[0072] For example, when a user swipes up to expand the playlist, the main interface exits with a circular shrinking animation, and the playlist enters with a circular expanding animation, both taking 400 milliseconds. List items are arranged in a 30° fan shape along the circumference, with the currently playing item highlighted at the 12 o'clock position. Users can scroll the list using rotation gestures and tap to switch songs.

[0073] Secondly, long-pressing a specific area brings up a sound effects settings panel, which displays multiple sound effect adjustment controls arranged in concentric circles. Specifically, we provide a circular sound effects settings panel; users can access the sound effects adjustment interface by long-pressing the volume control area. The sound effects panel features a concentric ring design, with different rings corresponding to different sound effect parameters: the innermost ring (radius 0.3R to 0.4R) is the preset sound effect mode selection ring, containing 6 preset modes (Pop, Rock, Classical, Jazz, Vocal, and Bass Boost), distributed as fan-shaped buttons around the circumference; the middle ring (radius 0.5R to 0.6R) is the equalizer adjustment ring, containing 5 equalizer bands (80Hz, 250Hz, 1kHz, 4kHz, and 16kHz), each represented by a slider that can be dragged up and down. Moving the slider radially along the corresponding angle adjusts the gain value (range -12dB to +12dB); the outer ring (radius 0.7R to 0.8R) is the soundstage adjustment ring, containing two parameters: stereo width and reverberation intensity, using circular knob controls. Users can rotate the knobs to adjust the parameter values. All adjustments take effect in real time, and users can hear the sound effect changes immediately during the adjustment process. After adjustment, click the confirmation button in the center or slide down to exit the sound effects panel.

[0074] For example, a long press triggers the sound effects panel to expand. The panel uses a concentric circle design: the inner circle displays 6 preset sound effect modes, the middle circle displays a 5-band equalizer slider, and the outer circle displays stereo and reverb knobs. Users can adjust the parameters in real time and the adjustments take effect immediately. After adjustment, click the center confirmation button to exit.

[0075] Finally, the system automatically switches between daytime and nighttime color themes based on ambient light sensor data or system time information. This automatic switching between daytime and nighttime color themes includes: Real-time monitoring of ambient light intensity or system time, and comparison with preset thresholds to determine whether mode switching is triggered; Adjust the color scheme of the interface background, buttons, text and other elements to a dark color scheme and reduce the global color saturation. Cross-fade-in and cross-fade-out animations are used to achieve a smooth transition between the old and new color themes.

[0076] Specifically, the system uses the device's ambient light sensor to detect light intensity (in lux) in real time. When the light intensity is below 10 lux or the system time is between 10:00 PM and 6:00 AM the next day, it automatically switches to night mode. Night mode uses a dark background theme, and the overall interface color scheme changes from light to dark: the background color changes from white (#FFFFFF) to dark gray (#1A1A1A), album covers are covered with a dark semi-transparent mask to reduce brightness, button backgrounds change from light semi-transparent to dark semi-transparent, text colors change from dark to light, and the color saturation of the progress bar and spectrum ring is reduced by 30%. The mode switching animation uses a cross-fade-in / fade-out effect with a smooth transition of 500 milliseconds to avoid abrupt color jumps. Users can also manually force night mode to be turned on or off, and manually setting its priority is higher than automatic detection. In night mode, the overall screen brightness is automatically reduced by 20% to reduce eye strain.

[0077] For example, when the ambient light is below 10 lux or the time is between 22:00 and 6:00, the system will switch the interface from a light color scheme to a dark color scheme within 500 milliseconds. This includes adjusting the colors of elements such as background, buttons, and text, reducing the spectral saturation by 30%, reducing the screen brightness by 20%, and using cross-fade-in and cross-fade-out animations to achieve a smooth transition.

[0078] In addition to the methods mentioned above, adaptive processing for changes in the physical orientation of the equipment is also included: The device's directional rotation angle is continuously monitored using an accelerometer or gyroscope. Based on the aforementioned rotation angle, the overall layout orientation of all interface elements is dynamically adjusted to ensure that the core interactive controls always face the physical bottom of the device. During interface rotation, text elements are independently oriented to ensure readability for the user.

[0079] Specifically, while circular screens don't visually differ significantly from portrait / landscape screens, some devices (such as in-vehicle displays) may support screen rotation. The system detects changes in device orientation using accelerometers or gyroscopes. When a 90°, 180°, or 270° rotation is detected, the system automatically adjusts the orientation of interface elements. Specifically, the system maintains the overall circular layout of the interface, but keeps the bottom position of the playback control buttons (where the play / pause button is located) always aligned with the physical bottom of the device, ensuring ergonomic button placement when the user holds the device. During rotation, all interface elements rotate around the screen center by the corresponding angle, with the rotation animation taking 300 milliseconds and employing an ease-in-out interpolation function. Text content (song titles, artist names) maintains its readable orientation during rotation; that is, the text itself does not rotate or only rotates to the nearest readable angle (0°, 90°, 180°, 270°), ensuring users can read the text information normally in any device orientation.

[0080] In this embodiment, when the device rotates 90°, the system rotates the playback control button to a new lower position within 300 milliseconds, the album cover and progress bar remain in their original positions, and the text elements are independently rotated to the nearest readable direction to maintain readability. The animation uses easing-in and easing-out interpolation to achieve a smooth transition.

[0081] In summary, this invention comprehensively solves the adaptation problem of traditional rectangular UIs on circular screen devices by establishing a dedicated coordinate system for circular screens, optimizing the layout of interface elements, integrating multimodal interactive gestures, enriching visual animation effects, and achieving dynamic adaptive optimization of the interface. By fully utilizing the unique shape characteristics of circular screens and scientifically distributing interface elements along the circumference and radial direction, it not only significantly improves space utilization and visual aesthetics but also achieves real-time optimization of interface performance through the combination of multimodal interaction methods such as touch, rotation, two-finger zoom, and long press with innovative technologies such as circular progress bars and dynamic optimization of touch hot zones, significantly improving the user experience.

[0082] Furthermore, the technical solution of this invention is not only applicable to audio playback interfaces, but can also be extended to other circular screen application scenarios: (1) Video playback interface: The album cover is replaced with a video thumbnail, the circular progress bar indicates the playback progress, and the playback control buttons maintain a similar layout.

[0083] (2) Health data display interface: The core area displays the main health indicators (such as heart rate), the secondary area distributes data points for different time periods along the circumference, and the edge area uses a circular chart to display trends. The rotation gesture can switch between different time ranges.

[0084] (3) Navigation interface: The core area displays directional arrows, the secondary area displays distance markers along the circumference, and the edge area displays a circular path plan. The rotation gesture can rotate the map.

[0085] (4) Notification reminder interface: The core area displays the main notification content, and the secondary area arranges different types of notification icons along the circumference. You can zoom with two fingers to view the notification details, and long press to enter the edit mode.

[0086] (5) Clock display interface: The core area displays the digital time, the secondary area displays the analog clock face, and the edge area displays the date and day of the week. The interface elements are always arranged along the circumference and radial direction, making full use of the circular screen features.

[0087] These application scenarios all follow the same design principles: establishing a coordinate system, dividing areas radially, circular or radial layout, expanding the touch hotspot, multi-gesture interaction, and dynamic visual feedback.

[0088] In addition, this embodiment also provides a circular screen audio playback interface optimization system, as shown in Figure 2, including: The coordinate system establishment module 10 is used to obtain the physical parameters of the circular screen and establish a coordinate system with the center of the screen as the reference. The display area dynamic division module 20 is used to divide the screen display area into multiple functional areas according to radial distance; The element adaptive layout module 30 is used to adaptively layout multiple elements of the audio playback interface based on the polar coordinate system and the partitioning results. The interactive gesture recognition and response module 40 is used to expand the touch response area of ​​interactive elements and recognize and respond to various interactive gestures, including rotation gestures. The dynamic visual feedback generation module 50 is used to trigger dynamic visual feedback during user interaction.

[0089] It should be noted that the steps in the circular screen audio playback interface optimization method provided in this embodiment can be implemented based on the corresponding modules in the circular screen audio playback interface optimization system. Those skilled in the art can refer to the technical solution of the system to implement the steps of the method. That is, the embodiments in the system can be understood as preferred examples of implementing the method, and will not be elaborated here.

[0090] This embodiment also provides an electronic device, such as... Figure 3 As shown, the electronic device includes a processor 14 and a memory 13. The memory 13 stores machine-executable instructions that can be executed by the processor 14. The processor 14 executes the machine-executable instructions to implement the above-described circular screen audio playback interface optimization method.

[0091] Furthermore, Figure 3The electronic device shown also includes a bus 12 and a communication interface 11, with the processor 14, the communication interface 11 and the memory 13 connected via the bus 12.

[0092] The memory 13 may include high-speed random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 11 (which can be wired or wireless), such as the Internet, wide area network, local area network, metropolitan area network, etc. The bus 12 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 3 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0093] Processor 14 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 14 or by instructions in software form. Processor 14 can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in this embodiment. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this embodiment can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software modules can reside in random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or other mature storage media in the art. The storage medium is located in memory 13. The processor 14 reads the information in memory 13 and, in conjunction with its hardware, completes the steps of the method for optimizing the audio playback interface of the circular screen.

[0094] This disclosure also provides a computer-readable storage medium, which can be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium, storing a computer program that, when run on a computer, causes the computer to perform the steps of the circular screen audio playback interface optimization method.

[0095] Finally, it should be noted that the above description is only a preferred embodiment of the present invention, and the scope of protection of the present invention is not limited to the above embodiments. All technical solutions falling within the scope of the present invention's concept are within the scope of protection of the present invention. It should be pointed out that for those skilled in the art, any improvements and modifications made without departing from the principle of the present invention should also be considered within the scope of protection of the present invention.

[0096] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

Claims

1. A method for optimizing a circular screen audio playback interface, characterized in that, Includes the following steps: Obtain the physical parameters of the circular screen and establish a polar coordinate system with the center of the screen as the reference. The screen display area is divided into multiple functional areas according to radial distance; Based on the polar coordinate system and partitioning results, an adaptive layout is applied to multiple elements of the audio playback interface. This adaptive layout includes: The multiple functional areas include a core display area, a secondary display area, and an edge interaction area. The album cover image is aspect ratio detected, and a center-cropping algorithm is used to process it into a square. A circular mask is then applied to adapt it to the circular boundary of the core display area, achieving adaptive layout of the album cover. A circular progress bar replaces the traditional straight progress bar and is dynamically placed within the edge interaction area; its progress is represented by the change in the angle range of the highlighted arc segment. The main playback control buttons are evenly distributed on the circumference of the secondary display area according to a preset angle, and their visual size and radial position are dynamically calculated based on the screen size. The main playback control buttons include a previous track button, a play / pause button, and a next track button. The touch response area of ​​the extended interactive element is expanded, and various interactive gestures, including rotation gestures, are recognized and responded to. The touch response area of ​​the extended interactive element further includes: Fitts' Law is used to optimize the expansion of the touch area. The farther an element is from the center of the screen, the larger its touch area expansion coefficient. A preset gap is maintained between the touch areas of adjacent elements to avoid accidental touches. The size of the touch area is dynamically adjusted according to the user's historical operation data. If the accidental touch rate of a button exceeds the set threshold, its touch area is automatically reduced and the distance between it and adjacent buttons is increased. Trigger dynamic visual feedback during user interaction.

2. The method for optimizing a circular screen audio playback interface according to claim 1, characterized in that, The establishment of the polar coordinate system includes: The physical parameters obtained through the device hardware interface include screen radius, screen center point coordinates, screen physical resolution, screen pixel density, and screen refresh rate. Construct a polar coordinate representation system with the screen center point coordinates as the origin and radial distance and wrap angle as parameters; Establish a bidirectional conversion function between polar coordinates and the device's native Cartesian coordinates to provide a mathematical basis for interface layout.

3. The method for optimizing a circular screen audio playback interface according to claim 1, characterized in that, The adaptive layout of the album cover further includes: The optimal display size of the cover is dynamically calculated based on the upper limit of the radius of the core display area; An anti-aliasing algorithm is applied to the high-resolution cover image to ensure the smoothness of the circular edges. Add shadows with varying transparency and edge highlights around the cover visual elements to create a three-dimensional visual depth.

4. The method for optimizing a circular screen audio playback interface according to claim 1, characterized in that, Replacing the traditional linear progress bar with a circular progress bar further includes: Set the starting position of the progress bar to the angle corresponding to the top center of the screen; The highlighted color arcs within the corresponding angle range are dynamically calculated and drawn based on the percentage progress of the audio playback time. A progress indicator that can be dragged by the user and moved along a circular trajectory is placed at the end of the highlighted arc segment to realize the interactive function of adjusting the playback progress by dragging.

5. The method for optimizing a circular screen audio playback interface according to claim 1, characterized in that, The recognition and response to the various interactive gestures include: Detect the continuous swiping trajectory of the user's finger within the interactive area at the edge of the screen and recognize it as a rotation gesture used to adjust the volume; Detect and recognize two-finger pinch or spread gestures within the album cover display area as two-finger zoom gestures used to zoom the cover display size; Long presses exceeding a threshold in the album cover area are detected and identified as long presses that trigger the lyrics display overlay.

6. The method for optimizing the audio playback interface of a circular screen according to claim 5, characterized in that, The recognition and response to the rotation gesture further includes: Kalman filtering algorithm is used to smooth continuous touch points in order to accurately calculate the angular displacement of finger sliding; The volume adjustment value is calculated and applied in real time according to a preset ratio based on the change in angular displacement. When the user performs a rotation gesture, a ring-shaped volume indicator is temporarily displayed in the center of the screen, providing phased haptic vibration feedback.

7. The method for optimizing a circular screen audio playback interface according to claim 1, characterized in that, The method also includes visualizing the audio spectrum around the album cover: Perform a Fast Fourier Transform (FFT) on the playing audio signal to decompose it into multiple frequency bands. The amplitude value of each frequency band is mapped to the height of a columnar element that is uniformly distributed on the circumference, thus forming a ring spectrum. The ring spectrogram is dynamically changed with the audio using frequency-based hue mapping and inter-frame smoothing interpolation algorithms.

8. The method for optimizing a circular screen audio playback interface according to claim 1, characterized in that, The method also includes enabling adaptive switching between multiple interface states: The system responds to an upward swipe gesture, switching from the main playback interface to a circular playlist interface with items arranged in an arc around the circumference. Long press on a specific area to bring up the sound effect settings panel, which is organized into multiple sound effect adjustment controls in a concentric ring pattern; The system automatically switches between daytime and nighttime color themes based on ambient light sensor data or system time information.

9. The method for optimizing a circular screen audio playback interface according to claim 8, characterized in that, The automatic switching between daytime and nighttime color themes includes: Real-time monitoring of ambient light intensity or system time, and comparison with preset thresholds to determine whether mode switching is triggered; Adjust the color scheme of the interface background, buttons, text and other elements to a dark color scheme and reduce the global color saturation. Cross-fade-in and cross-fade-out animations are used to achieve a smooth transition between the old and new color themes.

10. The method for optimizing a circular screen audio playback interface according to claim 1, characterized in that, The method also includes adaptive processing for changes in the physical orientation of the device: The device's directional rotation angle is continuously monitored using an accelerometer or gyroscope. Based on the aforementioned rotation angle, the overall layout orientation of all interface elements is dynamically adjusted to ensure that the core interactive controls always face the physical bottom of the device. During interface rotation, text elements are independently oriented to ensure readability for the user.

11. A circular screen audio playback interface optimization system, characterized in that, include: The coordinate system establishment module is used to obtain the physical parameters of the circular screen and establish a polar coordinate system with the center of the screen as the reference. The display area dynamic division module is used to divide the screen display area into multiple functional areas according to radial distance; An element adaptive layout module is used to adaptively layout multiple elements of the audio playback interface based on the polar coordinate system and partitioning results. The adaptive layout includes: The multiple functional areas include a core display area, a secondary display area, and an edge interaction area. The album cover image is aspect ratio detected, and a center-cropping algorithm is used to process it into a square. A circular mask is then applied to adapt it to the circular boundary of the core display area, achieving adaptive layout of the album cover. A circular progress bar replaces the traditional straight progress bar and is dynamically placed within the edge interaction area; its progress is represented by the change in the angle range of the highlighted arc segment. The main playback control buttons are evenly distributed on the circumference of the secondary display area according to a preset angle, and their visual size and radial position are dynamically calculated based on the screen size. The main playback control buttons include a previous track button, a play / pause button, and a next track button. An interactive gesture recognition and response module is used to expand the touch response area of ​​interactive elements and recognize and respond to various interactive gestures, including rotation gestures. The expanded touch response area of ​​the interactive elements further includes: Fitts' Law is used to optimize the expansion of the touch area. The farther an element is from the center of the screen, the larger its touch area expansion coefficient. A preset gap is maintained between the touch areas of adjacent elements to avoid accidental touches. The size of the touch area is dynamically adjusted according to the user's historical operation data. If the accidental touch rate of a button exceeds the set threshold, its touch area is automatically reduced and the distance between it and adjacent buttons is increased. The dynamic visual feedback generation module is used to trigger dynamic visual feedback during user interaction.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the circular screen audio playback interface optimization method as described in any one of claims 1-10.

13. An electronic device, characterized in that, include: One or more processors; A storage device for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the circular screen audio playback interface optimization method as described in any one of claims 1-10.

Images