A user interface-oriented guide information generation method, device and equipment

Abstract

The present disclosure relates to the technical field of human-computer interaction, in particular to a method, device and equipment for generating guiding information for a user interface, wherein the method comprises: obtaining element indication information, and determining a target element in a current screen interface according to the element indication information; determining a highlight area in the current screen interface with the target element as the center, and setting a mask layer for the interface in the current screen interface except the highlight area; determining a target prompt script matched with the target element; calculating a target display position of the target prompt script according to an actual rendering size of the target prompt script, a center point position of the target element and an interface size of the current screen interface, and displaying the target prompt script at the target display position. The technical scheme provided by one or more embodiments of the present disclosure can efficiently, universally and with low maintenance cost deliver interface structure information and operation guide information to users.

Description

Technical Field

[0001] This disclosure relates to the field of human-computer interaction technology, specifically to a method, apparatus, and device for generating user-oriented guidance information. Background Technology

[0002] As mobile applications become increasingly complex, users often struggle to quickly grasp the page structure and key operation paths when first using the app or entering a new feature. Therefore, onboarding has become a crucial technique for reducing product learning costs and improving human-computer interaction efficiency. Onboarding is essentially the process of optimizing the clarity and navigation of the user interface (UI, the set of interface elements that presents visual content and receives user input).

[0003] Existing onboarding techniques mainly include: embedding prompt logic within the business page, providing overall explanations through pop-ups in fixed locations, and implementing simple guidance using page-level overlays. These methods can all influence the UI and provide basic onboarding prompts. However, with rapid business iteration, in some complex business scenarios, these onboarding methods have gradually revealed limitations in terms of versatility, maintenance costs, and user experience. Summary of the Invention

[0004] In view of this, one or more embodiments of this disclosure provide a method, apparatus and device for generating user interface-oriented guidance information, which can efficiently, universally and with low maintenance costs convey interface structure information and operation guidance information to users.

[0005] In a first aspect, this disclosure provides a method for generating user interface-oriented guidance information. The method includes: acquiring element indication information, and determining a target element and attribute information of the target element in the current screen interface based on the element indication information; determining a highlighted area in the current screen interface centered on the target element, and setting a mask layer for the interface in the current screen interface other than the highlighted area; determining a target prompt text matching the target element; calculating a target display position of the target prompt text based on the actual rendering size of the target prompt text, the center point position of the target element, and the interface size of the current screen interface, and displaying the target prompt text at the target display position.

[0006] Secondly, this disclosure provides a user interface-oriented guidance information generation device, the device comprising: an element search unit, configured to acquire element indication information, and determine a target element and attribute information of the target element in the current screen interface based on the element indication information; a region division unit, configured to determine a highlighted region in the current screen interface centered on the target element, and set a mask layer for the interface in the current screen interface other than the highlighted region; a prompt determination unit, configured to determine a target prompt text matching the target element; and a prompt display unit, configured to calculate the target display position of the target prompt text based on the actual rendering size of the target prompt text, the center point position of the target element, and the interface size of the current screen interface, and display the target prompt text at the target display position.

[0007] Thirdly, this disclosure provides an electronic device, which includes a memory and a processor. The memory is used to store a computer program, and when the computer program is executed by the processor, it implements the above-described user-oriented guide information generation method.

[0008] Fourthly, this disclosure provides a computer-readable storage medium for storing a computer program that, when executed by a processor, implements the above-described user-oriented boot information generation method.

[0009] This disclosure provides a technical solution through one or more embodiments, which, by using element indication information, can accurately locate the target element requiring guidance within the current screen interface. Based on the current location of the target element, a corresponding highlight area and masking area can be automatically calculated and generated, thereby visually highlighting the target element while weakening other page elements on the current screen interface. Furthermore, based on the screen interface size, the rendering size of the prompt content, and the real-time position of the target element, a prompt text component can be automatically created, ensuring that the prompt text component adaptively displays in an appropriate interface position.

[0010] The technical solutions provided by one or more embodiments of this disclosure can effectively provide guidance prompts for target elements in the form of independent components without modifying the original business page structure or embedding business logic code. This reduces the intrusiveness of novice guidance to business code and improves the adaptability of guidance information on different business pages and different application terminals. Attached Figure Description

[0011] The features and advantages of the embodiments of this disclosure will be more clearly understood by referring to the accompanying drawings, which are illustrative and should not be construed as limiting the present disclosure in any way. In the drawings: Figure 1 A schematic diagram illustrating the steps of a user interface-oriented guide information generation method in one embodiment of this disclosure is shown. Figure 2 A schematic diagram of the design of the highlighted area in one embodiment of this disclosure is shown; Figure 3 A schematic diagram illustrating the practical application of the highlighted area in one embodiment of this disclosure is shown; Figure 4 This illustration shows a design schematic of adding a window outline to the highlighted area in one embodiment of the present disclosure; Figure 5 This illustration shows a practical application diagram of adding window outlines to the highlighted area in one embodiment of the present disclosure; Figure 6 A schematic diagram of a mask layer setting process is shown in one embodiment of this disclosure; Figure 7 This illustration shows another mask layer setting process in one embodiment of the present disclosure; Figure 8 A schematic diagram illustrating the target prompt text in one embodiment of this disclosure is shown; Figure 9 A schematic diagram illustrating the target interactive component in one embodiment of this disclosure is shown; Figure 10 A schematic diagram of the functional modules of a user interface-oriented guide information generation device is shown in one embodiment of the present disclosure. Figure 11 A schematic diagram of the structure of an electronic device according to one embodiment of the present disclosure is shown. Detailed Implementation

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

[0013] This disclosure provides a user-oriented guide information generation method according to one embodiment, primarily applied to mobile devices and applications (APPs) running on them. The mobile device or application can receive user input information through the user interface and provide human-computer interaction functions.

[0014] Please see Figure 1The present disclosure provides a user interface-oriented guide information generation method, which may include the following steps.

[0015] S1: Obtain element indication information, and determine the target element and the attribute information of the target element in the current screen interface based on the element indication information.

[0016] In this implementation, element indication information is typically a unique identifier for the target element (such as an element ID), an index path, or a control reference bound to a user interaction event (such as a click or long press). Based on the element indication information, the corresponding UI component object, i.e., the target element (e.g., a selection button, a text input box, text description information, an image, etc.), can be accurately located on the current screen interface. After successfully locating the target element, its attribute information can be extracted. The attribute information of the target element may include, but is not limited to: element type (button, text box, image, etc.), absolute coordinate information, width and height dimensions, whether it is interactive, text / image content, etc. The attribute information of the target element can not only be used for the accurate calculation of the subsequent highlighted area (e.g., determining the center point and expansion boundary), but also serve as the basis for generating guidance information.

[0017] In a practical application example, the style of the tooltip can be adjusted according to the element type and text content of the target element (for example, tooltip text starting with verbs for actionable elements, and tooltip text starting with noun phrases for descriptive elements).

[0018] In a practical application example, depending on whether the target element is interactive, it can be determined whether to add interactive components to the prompt text to enhance guidance.

[0019] Optionally, based on the element indication information, the container element of the target element, as well as the attribute information of that container element (e.g., container type, coordinate range, scrolling state, etc.), can also be obtained. The container boundary can constrain the expansion range of the subsequent highlighted area and provide a reference anchor point for the display position of the tooltip, preventing the tooltip from being clipped by the container or overlapping with external elements.

[0020] S2: Centered on the target element, determine a highlighted area in the current screen interface, and set a mask layer for the interface in the current screen interface other than the highlighted area.

[0021] In this embodiment, please refer to Figure 2 and Figure 3Using the target element's boundary as a reference, its geometric center coordinates can first be calculated. Then, based on the target element's size and a preset magnification factor (usually 1 to 1.5 times) or fixed margin, a highlighted area can be generated outwards. This highlighted area is rectangular by default, but can also be adaptively circular depending on the element type (such as a circular button) to maintain a natural visual appearance. Subsequently, a semi-transparent overlay layer (e.g., 50% to 70% transparency) can be drawn on top of the current screen interface, covering the entire interface except for the highlighted area, making the highlighted area completely transparent, thus making the target element visually stand out.

[0022] In a practical application example, when the mobile device screen rotates or the window size of the mobile application changes, the highlighted area is recalculated and refreshed to ensure that the guidance information is always aligned with the target element.

[0023] It should be noted that step S2 aims to visually capture the user's attention by using the contrast between the "highlighted area" and the "masked area" to create a guiding effect. This step does not involve any guiding text; it only lays the visual groundwork.

[0024] In some implementations, determining a highlighted area in the current screen interface with the target element as the center includes adding a window outline to the transparent window corresponding to the highlighted area to enhance the visual emphasis of the target element.

[0025] Specifically, please refer to Figure 4 and Figure 5 The window outline can use a striking color that contrasts sharply with the mask layer (e.g., red, orange, blue, etc.) to delineate a clear visual boundary along the outer edge of the highlighted area, ensuring that the target element remains clearly defined even under the semi-transparent background. Furthermore, the window outline can be combined with a gentle breathing animation (such as periodic fluctuations in brightness, saturation, and width) to further enhance the visual focus, drawing the user's attention more intently to the target element.

[0026] In some implementations, please refer to Figure 6 The step of determining a highlighted area in the current screen interface with the target element as the center, and setting a mask layer for the interface in the current screen interface other than the highlighted area, includes: determining a target rectangle containing the target element and setting the target rectangle as the highlighted area; dividing the current screen interface into a top block, a middle block, and a bottom block using the top and bottom sides of the target rectangle; dividing the middle block into a left block, a highlighted area, and a right block using the left and right sides of the target rectangle; and setting the mask layer in the top block, the bottom block, the left block, and the right block.

[0027] In some implementations, please refer to Figure 7 The step of determining a highlighted area in the current screen interface centered on the target element and setting a mask layer for the interface other than the highlighted area in the current screen interface includes: determining a target rectangle containing the target element and setting the target rectangle as the highlighted area; dividing the current screen interface into a left block, a middle block, and a right block using the left and right sides of the target rectangle; dividing the middle block into a top block, a highlighted area, and a bottom block using the top and bottom sides of the target rectangle; and setting the mask layer in the top block, the bottom block, the left block, and the right block.

[0028] Specifically, using the rectangular boundary of the target element as a reference, its four sides (top, bottom, left, and right) are directly used as dividing lines, ensuring precise coverage of the target element by the highlighted area. No additional offset calculations are needed, resulting in accurate positioning and a simple logic. The two-step sequential division of the masking area breaks down the complex one-time "punch-hole" masking operation into two ordered planar divisions, making each mask block a standard rectangle. This facilitates the use of solid color fills or gradient rendering, significantly reducing the complexity of graphics rendering and CPU / GPU overhead. The block-based masking layer brings significant flexibility and maintainability—each mask block can independently adjust its transparency, color, or animation (e.g., fading the top block and darkening the bottom block). Furthermore, when the target element's position or screen size changes, only the four boundaries need to be recalculated to automatically update all blocks, without needing to reconstruct the entire mask.

[0029] Furthermore, the independent rectangular masking blocks facilitate subsequent calculations to avoid obstructing the placement of prompts. Because the available space in each masking block can be clearly determined, prompts can be prioritized for placement within the largest masking block, preventing them from obscuring highlighted areas. Overall, this rectangular block-based masking solution is both efficient and robust, making it particularly suitable for dynamic interfaces and complex layouts.

[0030] S3: Determine the target hint text that matches the target element.

[0031] In this implementation, the source of the target prompt text can be flexible and diverse, and is not limited to a fixed rule base. The target prompt text can be encapsulated as a target text component (e.g., a rounded rectangle containing text plus a guide arrow). In a practical application example, the target prompt text can be encapsulated as a floating bubble component.

[0032] Alternatively, target hints can be extracted directly from the attribute information of the target element. For example, the content description or reserved fields of the target element may contain target hints written and filled in by developers during the design phase of the target element. This type of target hint can precisely match the function of the target element itself.

[0033] Optionally, the target message can be stored in the mobile application's local database or resource files and can be retrieved by indexing the element ID. This type of target message facilitates multilingual adaptation and dynamic updates by operations personnel.

[0034] Optionally, the target prompt text can come from the cloud configuration center of the mobile application. The cloud configuration center can dynamically adjust the target prompt text in real time according to the current business scenario. For example, new users can see detailed guidance, while existing users can only see concise prompts.

[0035] Optionally, by utilizing natural language generation models or template filling engines, target prompt text can be synthesized in real time by combining the semantic content of the target element. The target prompt text generated in this way is more closely aligned with the user's current operational context.

[0036] In a practical application example, target tooltips can employ a tiered adoption strategy to balance flexibility, reliability, and user experience. For instance, the latest tooltips delivered by the server can be used first; if no cloud-based tooltips are available, the local database can be consulted to find local tooltips; if no local tooltips are available, the target element's attribute information can be checked for reserved tooltips.

[0037] S4: Calculate the target display position of the target prompt text based on the actual rendering size of the target prompt text, the center point position of the target element, and the interface size of the current screen interface, and display the target prompt text at the target display position.

[0038] In this embodiment, the actual rendered size (width × height) of the target prompt text can be calculated based on the text font size, line spacing, and maximum width limit (typically 70% of the screen width). Based on the actual rendered size of the target prompt text, the center coordinates of the target element, and the effective interface size of the screen (e.g., excluding the status bar, navigation bar, etc.), the optimal placement position of the target prompt text can be calculated (e.g., ensuring the text component is completely within the screen while maintaining a certain distance between the text component and the boundary of the highlighted area). The target display position ensures that the target prompt text is clearly visible without interfering with the target element.

[0039] In a practical application example, please refer to Figure 8 The target element is the "Grab an Order" button, and the corresponding target prompt text is: Click "Grab an Order" to start service. After the "Grab an Order" button expands outward, it forms a rectangular highlighted area. The area of ​​the screen interface other than the rectangular highlighted area is covered by a gray semi-transparent overlay. After calculation, a highlighted prompt text component (placed on top of the gray overlay) can be displayed at an appropriate position below the highlighted area.

[0040] In some implementations, the method steps of the user interface-oriented guidance information generation method further include: determining a target interactive component corresponding to the target element; calculating the component display position of the target interactive component based on the interface size of the current screen interface, the actual rendering size of the target interactive component, the current position of the highlighted area, and the current position of the target prompt text, and displaying the target interactive component at the component display position.

[0041] Specifically, please refer to Figure 9 After displaying the target prompt text, a target interactive component (e.g., an "I understand" button) can be added to collect user feedback on their understanding of the guidance content. The calculation of the interactive component's display position can comprehensively consider screen size, its own rendering size, highlighted area, and the current position of the prompt text. An avoidance algorithm can be used to ensure that the target interactive component neither obscures the target element and the target prompt text, nor exceeds the screen boundaries. Preferably, the target interactive component is placed below the target prompt text or in the bottom safe area of ​​the screen.

[0042] In some implementations, if the target interactive component does not exist, the masking layer of the current screen interface is closed when a first interactive instruction from the user for the target element is received; if the target interactive component exists, the masking layer of the current screen interface is closed when a second interactive instruction from the user for the target interactive component is received.

[0043] Specifically, depending on whether a confirmation-type interactive component exists, different trigger conditions can be used to close the overlay. If no target interactive component such as "I understand" is set, the user can directly click on the target element (i.e., the first interactive instruction) to be considered as having understood the guidance, and the overlay on the current screen can be closed directly. If a target interactive component such as "I understand" is set, clicking on the target element will not trigger the closure of the page overlay. Instead, the page overlay will only be closed after the user clicks on the target interactive component (i.e., the second interactive instruction). This ensures that the user completes the guidance process through an explicit confirmation action and avoids incomplete guidance caused by accidental premature closure of the overlay.

[0044] In some implementations, during the mask layer setup phase, an event callback function can be registered; after the mask layer is closed, the event callback function is executed to trigger the preset business logic corresponding to the event callback function.

[0045] Specifically, when the Application Programming Interface (API) calls to enable the masking layer, an event callback for disabling the masking layer can be injected via configuration parameters. When the masking layer is closed due to user action or timeout, this event callback can be executed automatically, allowing the API layer to execute subsequent business logic. Using this callback mechanism, the next step of the onboarding process can be triggered sequentially, thus linking multiple onboarding steps together to achieve a complete simulated operation flow guidance. This chain-triggered approach based on the closing callback enables the construction of multi-step continuous guidance in a simple and controllable manner, forming a clear onboarding flow control mechanism.

[0046] This disclosure provides a technical solution through one or more embodiments, which, by using element indication information, can accurately locate the target element requiring guidance within the current screen interface. Based on the current location of the target element, a corresponding highlight area and masking area can be automatically calculated and generated, thereby visually highlighting the target element while weakening other page elements on the current screen interface. Furthermore, based on the screen interface size, the rendering size of the prompt content, and the real-time position of the target element, a prompt text component can be automatically created, ensuring that the prompt text component adaptively displays in an appropriate interface position.

[0047] The technical solutions provided by one or more embodiments of this disclosure can effectively provide guidance prompts for target elements in the form of independent components without modifying the original business page structure or embedding business logic code. This reduces the intrusiveness of novice guidance to business code and improves the adaptability of guidance information on different business pages and different application terminals.

[0048] Please see Figure 10 This disclosure also provides a user interface-oriented guide information generation apparatus, the apparatus comprising: The element lookup unit 100 is used to obtain element indication information and, based on the element indication information, determine the target element in the current screen interface, as well as the attribute information of the target element. The region division unit 200 is used to determine a highlight area in the current screen interface with the target element as the center, and to set a mask layer for the interface in the current screen interface other than the highlight area. The prompt determination unit 300 is used to determine the target prompt text that matches the target element; The prompt display unit 400 is used to calculate the target display position of the target prompt text based on the actual rendering size of the target prompt text, the center point position of the target element, and the interface size of the current screen interface, and to display the target prompt text at the target display position.

[0049] In one embodiment, the region segmentation unit 200 is further configured to: add a window outline to the transparent window corresponding to the highlighted region to enhance the visual emphasis effect of the target element.

[0050] In one embodiment, the region division unit 200 is specifically used to: determine a target rectangle containing the target element and set the target rectangle as the highlighted area; divide the current screen interface into a top block, a middle block, and a bottom block using the top and bottom sides of the target rectangle; divide the middle block into a left block, a highlighted area, and a right block using the left and right sides of the target rectangle; and set the masking layer in the top block, the bottom block, the left block, and the right block.

[0051] In one embodiment, the region division unit 200 is specifically used to: determine a target rectangle containing the target element and set the target rectangle as the highlighted area; divide the current screen interface into a left block, a middle block, and a right block using the left and right sides of the target rectangle; divide the middle block into a top block, a highlighted area, and a bottom block using the top and bottom sides of the target rectangle; and set the mask layer in the top block, the bottom block, the left block, and the right block.

[0052] In one embodiment, the prompt display unit 400 is further configured to: determine a target interactive component corresponding to the target element; calculate the component display position of the target interactive component based on the interface size of the current screen interface, the actual rendering size of the target interactive component, the current position of the highlighted area, and the current position of the target prompt text, and display the target interactive component at the component display position.

[0053] In one embodiment, the prompt display unit 400 is further configured to: if the target interactive component does not exist, then upon receiving a first interactive instruction from the user for the target element, close the mask layer of the current screen interface; if the target interactive component exists, then upon receiving a second interactive instruction from the user for the target interactive component, close the mask layer of the current screen interface.

[0054] In one embodiment, the prompt display unit 400 is further configured to: register an event callback function during the setting phase of the mask layer; and execute the event callback function after the mask layer is closed to trigger the preset business logic corresponding to the event callback function.

[0055] The various units described in the above embodiments can be implemented by computer chips or by products with certain functions. A typical implementation device is a computer. Specifically, the computer can be, for example, a personal computer, a laptop computer, a smartphone, a game console, a tablet computer, a wearable device, or any combination of these devices.

[0056] For ease of description, the above devices are described separately by function as various units. Of course, in implementing this application, the functions of each unit can be implemented in one or more software and / or hardware.

[0057] Please see Figure 11 This disclosure also provides an electronic device, which includes a memory and a processor. The memory is used to store a computer program, and when the computer program is executed by the processor, it implements the above-described user-oriented guide information generation method.

[0058] This disclosure also provides a computer-readable storage medium for storing a computer program that, when executed by a processor, implements the above-described user-oriented boot information generation method.

[0059] The processor can be a central processing unit (CPU). It can also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or combinations thereof.

[0060] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs, non-transitory computer-executable programs, and modules, such as the program instructions / modules corresponding to the methods in the embodiments of this disclosure. The processor executes various functional applications and data processing by running the non-transitory software programs, instructions, and modules stored in the memory, thereby implementing the methods in the above-described embodiments.

[0061] The memory may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created by the processor, etc. Furthermore, the memory may include high-speed random access memory and non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, the memory may optionally include memory remotely located relative to the processor, which can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0062] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The storage medium can be a magnetic disk, optical disk, read-only memory (ROM), random access memory (RAM), flash memory, hard disk drive (HDD), or solid-state drive (SSD), etc.; the storage medium can also include combinations of the above types of memory.

[0063] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, embodiments of apparatus, devices, and storage media are basically similar to method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0064] The above description is merely an embodiment of this application and is not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

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

Claims

1. A method for generating user-friendly guidance information, characterized in that, The method includes: Obtain element indication information, and determine the target element and its attribute information in the current screen interface based on the element indication information; Centered on the target element, a highlighted area is determined in the current screen interface, and a mask layer is set for the interface in the current screen interface other than the highlighted area. Determine the target prompt text that matches the target element; Based on the actual rendering size of the target prompt text, the center point position of the target element, and the interface size of the current screen interface, the target display position of the target prompt text is calculated, and the target prompt text is displayed at the target display position.

2. The method according to claim 1, characterized in that, The step of determining the highlighted area in the current screen interface with the target element as the center includes: Add a window stroke to the transparent window corresponding to the highlighted area to enhance the visual emphasis of the target element.

3. The method according to claim 1 or 2, characterized in that, The step of determining a highlighted area in the current screen interface centered on the target element, and setting a mask layer for the interface outside the highlighted area in the current screen interface, includes: Determine the target rectangle containing the target element, and set the target rectangle as the highlighted area; The current screen interface is divided into a top block, a middle block, and a bottom block using the top and bottom sides of the target rectangle. The middle block is divided into a left block, a highlighted block, and a right block using the left and right sides of the target rectangle. The masking layer is provided in the top block, the bottom block, the left block, and the right block.

4. The method according to claim 1 or 2, characterized in that, The step of determining a highlighted area in the current screen interface centered on the target element, and setting a mask layer for the interface outside the highlighted area in the current screen interface, includes: Determine the target rectangle containing the target element, and set the target rectangle as the highlighted area; The current screen interface is divided into a left block, a middle block, and a right block using the left and right sides of the target rectangle. The middle block is divided into a top block, a highlight block, and a bottom block using the top and bottom edges of the target rectangle. The masking layer is provided in the top block, the bottom block, the left block, and the right block.

5. The method according to claim 1, characterized in that, The method further includes: Identify the target interactive component corresponding to the target element; Based on the current screen size, the actual rendering size of the target interactive component, the current position of the highlighted area, and the current position of the target prompt text, the component display position of the target interactive component is calculated, and the target interactive component is displayed at the component display position.

6. The method according to claim 5, characterized in that, The method further includes: If the target interactive component does not exist, the mask layer of the current screen interface is turned off when the user's first interactive instruction for the target element is received. If the target interactive component exists, the mask layer of the current screen interface is closed when a second interactive instruction from the user is received for the target interactive component.

7. The method according to claim 6, characterized in that, The method further includes: During the setup phase of the mask layer, an event callback function is registered; After the mask layer is closed, the event callback function is executed to trigger the preset business logic corresponding to the event callback function.

8. A user interface-oriented guidance information generation device, characterized in that, The device includes: An element lookup unit is used to obtain element indication information and, based on the element indication information, determine the target element in the current screen interface, as well as the attribute information of the target element. The region division unit is used to determine a highlighted area in the current screen interface with the target element as the center, and to set a mask layer for the interface in the current screen interface other than the highlighted area. The prompt determination unit is used to determine the target prompt text that matches the target element. The prompt display unit is used to calculate the target display position of the target prompt text based on the actual rendering size of the target prompt text, the center point position of the target element, and the interface size of the current screen interface, and to display the target prompt text at the target display position.

9. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory being used to store a computer program that, when executed by the processor, implements the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program that, when executed by a processor, implements the method as described in any one of claims 1 to 7.

Images