User graphical interface display method and system

Abstract

The invention discloses a user graphical interface display method and system, and the method specifically comprises the following steps: S1, initializing an interface layout strategy which comprises a plane layout mode and a three-dimensional layout mode, and allowing a user to select according to the demands; s2, under the selected layout mode, according to user input or a preset rule, adding visual units on the graphical interface, and distributing a unique identifier and attribute information for each visual unit; the invention relates to the technical field of user graphical interfaces. According to the user graphical interface display method and system, through an innovative interface layout strategy (including a plane layout mode and a three-dimensional layout mode) and an associated label mechanism, a user can more intuitively and efficiently manage and operate a plurality of visual units, interaction operations such as dragging, activating and hiding are introduced, and the user experience is improved. The operation process of the user is further simplified, the cognitive burden is reduced, and therefore the working efficiency and the operation experience of the user are remarkably improved.

Description

Technical Field

[0001] The present invention relates to the technical field of user graphical interface, and in particular to a user graphical interface display method and system. Background Art

[0002] With the rapid development of information technology, Graphical User Interface (GUI) has become the main way for users to interact with computers. Traditional GUI design often focuses on the aesthetics and intuitiveness of the interface, but in complex data processing and multi-task operations, users often face cumbersome operations and low efficiency. Although there are many GUI design methods and systems, most of them focus on the aesthetics of the interface and the realization of a single function, and lack optimized support for the simultaneous processing of multiple objects and multiple tasks. In addition, although some systems support interaction methods such as dragging and dropping, they still have deficiencies in the processing of associations between objects and the dynamic adjustment of interface layout. In this regard, we propose a user graphical interface display method and system to solve the above problems. Summary of the invention

[0003] In view of the deficiencies in the prior art, the present invention provides a user graphical interface display method and system, which solves the problems raised in the background technology.

[0004] To achieve the above objectives, the present invention is implemented through the following technical solutions: a user graphical interface display method, specifically comprising the following steps:

[0005] S1. Initialize the interface layout strategy, including the plane layout mode and the three-dimensional layout mode, and allow the user to select according to needs;

[0006] S2. In the selected layout mode, according to user input or preset rules, visual units are added to the graphical interface, and a unique identifier and attribute information are assigned to each visual unit;

[0007] S3. Introduce an association tag mechanism to generate a corresponding association tag for each visual unit to indicate its hierarchical or category relationship in the interface layout;

[0008] S4. Monitor and process user interaction operations, including but not limited to dragging, activating, hiding, and updating the position, status, and relationship of visual units on the interface in real time;

[0009] S5, synchronizing the user's interactive operation results and the changes in the attribute information of the visual unit to the server to achieve real-time update and synchronization of data;

[0010] S6. Dynamically adjust and re-render the graphical interface based on the synchronized data to ensure consistency between the interface display and user operations.

[0011] Preferably, the association tag mechanism in S3 further includes:

[0012] S31, automatically generating and assigning associated tags for newly added visual units;

[0013] S32, allowing the user to customize or modify the content, style and position of the associated tag;

[0014] S33. Realize quick navigation, filtering and batch operation between visual units through associating tags.

[0015] Preferably, the S4 drag operation processing step includes:

[0016] S41, when a dragging action is detected, recording the starting position and the dragging direction;

[0017] S42, calculating the new position of the visual unit during the dragging process in real time, and considering collision detection and avoidance with other visual units;

[0018] S43, updating the interface display, moving the visual unit to a new position, and synchronously updating its attribute information;

[0019] S45: Send the dragging result and location information to the server for data synchronization.

[0020] The present invention discloses a user graphical interface display system, comprising an interface layout module, an interaction processing module, a data management module, and a display control module. The interface layout module is used to initialize and manage interface layout strategies, the interaction processing module is used to monitor and process user interaction operations, the data management module is used to manage attribute information of visual units and data synchronization with a server, the display control module is used to dynamically adjust and render a graphical interface according to the interface layout, interaction operations, and data synchronization results, the input end of the interface layout module is electrically connected to the output end of the interaction processing module, the input end of the interaction processing module is electrically connected to the input end of the data management module, and the output end of the data management module is electrically connected to the input end of the display control module.

[0021] Preferably, the interface layout module includes a layout strategy unit and an associated tag unit, which are respectively used to implement the management of the interface layout strategy and the generation and management of the associated tags; the interaction processing module includes a drag operation unit and an activation and hiding unit, which are respectively used to process the drag operation and implement the activation and hiding functions of the visual unit; the data management module includes an attribute information management unit and a data synchronization unit; and the display control module includes a drawing and rendering unit and a prompt and feedback unit.

[0022] Preferably, the output end of the layout strategy unit is electrically connected to the input end of the associated label unit, and the output end of the drag operation unit is electrically connected to the input end of the activation and hiding unit.

[0023] Preferably, the output end of the attribute information management unit is electrically connected to the input end of the data synchronization unit, and the output end of the drawing and rendering unit is electrically connected to the input end of the prompt and feedback unit.

[0024] Beneficial Effects

[0025] The present invention provides a user graphical interface display method and system. Compared with the prior art, it has the following beneficial effects:

[0026] (1) The present invention uses innovative interface layout strategies (including plane layout and three-dimensional layout modes) and an associated label mechanism to enable users to manage and operate multiple visual units more intuitively and efficiently. The introduction of interactive operations such as dragging, activating and hiding further simplifies the user's operation process and reduces the cognitive burden, thereby significantly improving the user's work efficiency and operating experience.

[0027] (2) The system design of the present invention fully considers the real-time and synchronization requirements of data. Through the close collaboration of the data management module and the display control module, the user's interactive operation results can be synchronized to the server in real time, and the display content of the graphical interface can be updated in real time. This design ensures that what the user sees is what he gets, avoids operational errors or confusion caused by data asynchrony, and improves the reliability and stability of the system.

[0028] (3) The system of the present invention adopts a modular design concept. Each module is independent of each other but cooperates with each other, which is convenient for subsequent expansion and maintenance. At the same time, the system supports different operating systems and devices, including PCs, mobile phones, tablet computers, etc., and has good interface adaptability and can automatically adapt to different screen sizes and resolutions. This design enables the system to flexibly respond to new demands and challenges that may arise in the future, maintaining the long-term competitiveness and vitality of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Figure 1 is a system block diagram of the present invention;

[0030] Figure 2 It is a schematic diagram of the interface layout module of the present invention;

[0031] Figure 3 It is a schematic diagram of the interactive processing module of the present invention;

[0032] Figure 4 It is a schematic diagram of a data management module of the present invention;

[0033] Figure 5It is a schematic diagram of a display control module of the present invention.

[0034] In the figure: 01, interface layout module; 02, interaction processing module; 03, data management module; 04, display control module; 011, layout strategy unit; 012, association label unit; 021, drag operation unit; 022, activation and hiding unit; 031, attribute information management unit; 032, data synchronization unit; 041, drawing and rendering unit; 042, prompt and feedback unit. DETAILED DESCRIPTION

[0035] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0036] The present invention provides three technical solutions, including the following embodiments:

[0037] Example 1

[0038] A method for displaying a user graphical interface comprises the following steps:

[0039] S1. Initialize the interface layout strategy, including the plane layout mode and the three-dimensional layout mode, and allow the user to select according to needs;

[0040] S2. In the selected layout mode, according to user input or preset rules, visual units are added to the graphical interface, and a unique identifier and attribute information are assigned to each visual unit;

[0041] S3. Introduce an association tag mechanism to generate a corresponding association tag for each visual unit to indicate its hierarchical or category relationship in the interface layout;

[0042] S4. Monitor and process user interaction operations, including but not limited to dragging, activating, hiding, and updating the position, status, and association relationship of visual units on the interface in real time;

[0043] S5. Synchronize the user's interactive operation results and the changes in the attribute information of the visual unit to the server to achieve real-time update and synchronization of data;

[0044] S6. Dynamically adjust and re-render the graphical interface based on the synchronized data to ensure consistency between the interface display and user operations.

[0045] The S3 tagging mechanism further includes:

[0046] S31, automatically generating and assigning associated tags for newly added visual units;

[0047] S32, allowing the user to customize or modify the content, style and position of the associated tag;

[0048] S33. Realize quick navigation, filtering and batch operation between visual units through associating tags.

[0049] S4 drag operation processing steps include:

[0050] S41, when a dragging action is detected, recording the starting position and the dragging direction;

[0051] S42, calculating the new position of the visual unit during the dragging process in real time, and considering collision detection and avoidance with other visual units;

[0052] S43, updating the interface display, moving the visual unit to a new position, and synchronously updating its attribute information;

[0053] S45: Send the dragging result and location information to the server for data synchronization.

[0054] Example 2

[0055] Based on Example 1, see Figure 1 As shown, the present invention also discloses a user graphical interface display system, including an interface layout module 01, an interaction processing module 02, a data management module 03, and a display control module 04. The interface layout module 01 is used to initialize and manage the interface layout strategy, the interaction processing module 02 is used to monitor and process the user's interaction operations, the data management module 03 is used to manage the attribute information of the visual unit and the data synchronization with the server, the display control module 04 is used to dynamically adjust and render the graphical interface according to the interface layout, interaction operations and data synchronization results, the input end of the interface layout module 01 is electrically connected to the output end of the interaction processing module 02, the input end of the interaction processing module 02 is electrically connected to the input end of the data management module 03, and the output end of the data management module 03 is electrically connected to the input end of the display control module 04.

[0056] Example 3

[0057] Based on Example 2, see Figure 1-Figure 5As shown, the interface layout module 01 includes a layout strategy unit 011 and an associated label unit 012, which are respectively used to implement the management of the interface layout strategy and the generation and management of the associated labels. The layout strategy unit 011 is responsible for designing the basic layout strategy of the interface, including two modes: plane layout and three-dimensional layout. In the plane layout mode, the interface is displayed in two dimensions and supports basic operations such as dragging and zooming. In the three-dimensional layout mode, the interface introduces the Z-axis dimension to realize the three-dimensional display and space management of the object. The user can choose the appropriate layout mode according to the actual needs. In order to handle the association relationship between objects, the associated label unit 012 designs an associated label mechanism. When the user adds a new visual unit, the system will automatically generate the corresponding Z-axis dimension according to its attribute information. The interactive processing module 02 includes a drag operation unit 021 and an activation and hiding unit 022, which are respectively used to process the drag operation and realize the activation and hiding functions of the visual unit. The drag operation unit 021 is responsible for processing the user's drag operation. When the user drags a visual unit, the system will calculate and update the position information of the unit in the interface in real time, and adjust the position and layout of other units associated with it at the same time to ensure the neatness and order of the interface. In addition, the system will send corresponding coordinate information to the server according to the result of the drag operation so as to synchronize the data update. For multi-layer planes in the three-dimensional layout mode, the activation and hiding unit 022 provides an activation and hiding function. The user can activate or hide the corresponding plane by clicking the corresponding Z-axis dimension label, thereby quickly switching the displayed content. This function helps users quickly navigate and switch between different levels or categories. The data management module 03 includes an attribute information management unit 031 and a data synchronization unit 032. The attribute information management unit 031 is responsible for managing the attribute information of all visual units, including basic attributes (such as name, type, etc.) and special attributes (such as position, size, color, etc.). When the user adds a new unit or modifies an existing unit, the system will obtain and update the corresponding attribute information through the unit. This information will be used for interface drawing and layout adjustment. To ensure the consistency of data between the client and the server, the data synchronization unit 032 is responsible for realizing the data synchronization function. When the user performs operations such as dragging, adding, deleting, etc., the system will send the changed data to the server for storage and processing in real time. At the same time, the system will also obtain the latest data from the server to update the interface display. The display control module 04 includes a drawing and rendering unit 041 and a prompt and feedback unit 042. The drawing and rendering unit 041 is responsible for the drawing and rendering of the interface. According to the layout information provided by the interface layout module and the attribute information provided by the data management module, the unit will draw the corresponding graphical interface on the display device. At the same time, the unit also supports rendering optimization of the interface to improve the display effect and performance of the interface.In order to improve the user experience, the feedback unit 042 provides a rich prompt and feedback mechanism. When the user performs operations such as dragging and adding, the system will give the user timely prompts and feedback through pop-up windows, color changes, etc. In addition, when the user's operation exceeds the preset range or an error occurs, the system will also give corresponding error prompts and suggestions.

[0058] The output end of the layout strategy unit 011 is electrically connected to the input end of the association tag unit 012 , and the output end of the drag operation unit 021 is electrically connected to the input end of the activation and hiding unit 022 .

[0059] The output end of the attribute information management unit 031 is electrically connected to the input end of the data synchronization unit 032 , and the output end of the drawing and rendering unit 041 is electrically connected to the input end of the prompt and feedback unit 042 .

[0060] Meanwhile, the contents not described in detail in this specification belong to the prior art known to those skilled in the art.

[0061] The above embodiments of the invention are described in detail, but the contents are only preferred embodiments of the invention and cannot be considered to limit the scope of the invention. All equivalent changes and improvements made within the scope of the invention should still fall within the scope of the invention.

Claims

1. A method for displaying a user graphical interface, characterized in that: The specific steps include: S1. Initialize the interface layout strategy, including the plane layout mode and the three-dimensional layout mode, and allow the user to select according to needs; S2. In the selected layout mode, according to user input or preset rules, visual units are added to the graphical interface, and a unique identifier and attribute information are assigned to each visual unit; S3. Introduce an association tag mechanism to generate a corresponding association tag for each visual unit to indicate its hierarchical or category relationship in the interface layout; S4. Monitor and process user interaction operations, including but not limited to dragging, activating, hiding, and updating the position, status, and association relationship of visual units on the interface in real time; S5. Synchronize the user's interactive operation results and the changes in the attribute information of the visual unit to the server to achieve real-time update and synchronization of data; S6. Dynamically adjust and re-render the graphical interface based on the synchronized data to ensure consistency between the interface display and user operations.

2. A method for displaying a user graphical interface according to claim 1, characterized in that: The S3 association tag mechanism further includes: S31, automatically generating and assigning associated tags for newly added visual units; S32, allowing the user to customize or modify the content, style and position of the associated tag; S33. Realize quick navigation, filtering and batch operation between visual units through associating tags.

3. A method for displaying a user graphical interface according to claim 1, characterized in that: The S4 drag operation processing step includes: S41, when a dragging action is detected, recording the starting position and the dragging direction; S42, calculating the new position of the visual unit during the dragging process in real time, and considering collision detection and avoidance with other visual units; S43, updating the interface display, moving the visual unit to a new position, and synchronously updating its attribute information; S45: Send the dragging result and location information to the server for data synchronization.

4. A user graphical interface display system, characterized in that: The invention comprises an interface layout module (01), an interaction processing module (02), a data management module (03) and a display control module (04); the interface layout module (01) is used to initialize and manage the interface layout strategy; the interaction processing module (02) is used to monitor and process the user's interaction operation; the data management module (03) is used to manage the attribute information of the visual unit and the data synchronization with the server; the display control module (04) is used to dynamically adjust and render the graphical interface according to the interface layout, interaction operation and data synchronization results; the input end of the interface layout module (01) is electrically connected to the output end of the interaction processing module (02); the input end of the interaction processing module (02) is electrically connected to the input end of the data management module (03); the output end of the data management module (03) is electrically connected to the input end of the display control module (04).

5. A user graphical interface display system according to claim 4, characterized in that: The interface layout module (01) comprises a layout strategy unit (011) and an associated tag unit (012), which are respectively used to implement the management of the interface layout strategy and the generation and management of the associated tags; the interaction processing module (02) comprises a drag operation unit (021) and an activation and hiding unit (022), which are respectively used to process the drag operation and implement the activation and hiding functions of the visual unit; the data management module (03) comprises an attribute information management unit (031) and a data synchronization unit (032); and the display control module (04) comprises a drawing and rendering unit (041) and a prompt and feedback unit (042).

6. A user graphical interface display system according to claim 5, characterized in that: The output end of the layout strategy unit (011) is electrically connected to the input end of the associated label unit (012), and the output end of the drag operation unit (021) is electrically connected to the input end of the activation and hiding unit (022).

7. A user graphical interface display system according to claim 5, characterized in that: The output end of the attribute information management unit (031) is electrically connected to the input end of the data synchronization unit (032), and the output end of the drawing and rendering unit (041) is electrically connected to the input end of the prompt and feedback unit (042).

Images