UI interaction method and device based on input box and selection box

Abstract

The invention relates to the technical field of UI interaction, and discloses a UI interaction method and device based on an input box and a selection box. The method comprises the steps that whether input information of a user exists in a target component or not is detected, when a detection result shows that the input information exists, a preset placeholder is hidden in the target component, prompt information is arranged at a first preset position of the target component and continuously displayed, and the prompt information is associated with the input information; and obtaining an interaction state of the user taking the target component as a focus, and adjusting an interaction result of the preset placeholder and / or the prompt information based on the interaction state. According to the method provided by the embodiment of the invention, the prompt information is continuously displayed in the input box and the selection box, so that after a user completes input or selection, the prompt information is still continuously displayed, a traditional tag function is effectively replaced, it is ensured that the user can clarify the purpose of a field under the condition that no additional title is needed, and the usability and guide visibility of components are improved.

Description

Technical Field

[0001] The present disclosure relates to the technical field of UI interaction, and in particular to a UI interaction method and device based on an input box and a selection box. Background Art

[0002] In modern interactive user interface (UI) design, input boxes and selection boxes are common basic components used to receive user input and operations. In traditional design patterns, these components usually rely on placeholders to provide initial input guidance, such as displaying "Please enter your user name" or "Select an option".

[0003] However, in traditional design patterns, there is often a lack of user guidance in the input process in input boxes and selection boxes in multi-field and multi-interaction scenarios, which results in users being unable to directly determine the function of the current field during the input process, seriously affecting user experience and operational efficiency. Therefore, how to improve the visibility of guidance in input boxes and selection boxes in multi-field and multi-interaction scenarios has become a problem that needs to be solved. Summary of the invention

[0004] In view of this, the present disclosure provides a UI interaction method and device based on an input box and a selection box to solve the problem of how to improve the guidance visibility of the input box and the selection box in a multi-field and multi-interaction scenario.

[0005] On the one hand, the present disclosure provides a UI interaction method based on an input box and a selection box, the method comprising: initializing a target component during the loading process of a page, setting a preset placeholder in the target component, the target component comprising an input box and / or a selection box; wherein the preset placeholder is used to prompt the input content of the target component; detecting whether there is user input information in the target component, and when the result of the detection is characterized by the presence of input information, hiding the preset placeholder in the target component, and setting prompt information at a first preset position of the target component and continuously displaying it, wherein the prompt information is associated with the input information; obtaining an interaction state of the user with the target component as the focus, and adjusting the preset placeholder and / or the interaction result of the prompt information based on the interaction state.

[0006] On the other hand, the present disclosure also provides a UI interaction device, which includes: a component initialization module, which is used to initialize the target component during the loading process of the page, and set a preset placeholder in the target component, the target component includes an input box, and / or a selection box; wherein the preset placeholder is used to prompt the input content of the target component; a component setting module, which is used to detect whether there is user input information in the target component, and when the detection result is characterized by the presence of input information, hide the preset placeholder in the target component, and set prompt information at a first preset position of the target component and continuously display it, wherein the prompt information is associated with the input information; a component interaction module, which is used to obtain the user's interaction state with the target component as the focus, and adjust the preset placeholder and / or the interaction result of the prompt information based on the interaction state.

[0007] On the other hand, the present disclosure further provides a computer-readable storage medium, on which computer instructions are stored, and the computer instructions are used to enable a computer to implement the above-mentioned UI interaction method based on an input box and a selection box.

[0008] On the other hand, the present disclosure further provides a computer program product, including computer instructions, where the computer instructions are used to enable a computer to execute the above-mentioned UI interaction method based on an input box and a selection box.

[0009] Through the UI interaction method and device based on the input box and selection box of the above-mentioned embodiment of the present invention, when there is user input information, prompt information is continuously displayed in the input box and the selection box while hiding the preset placeholders in the input box and the selection box, so that after the user completes the input or selection, the prompt information continues to be displayed, effectively replacing the traditional label function, ensuring that the user can clearly understand the purpose of the field without the need for an additional title, improving the usability of the form and the visibility of the guidance, thereby increasing the user experience and improving operational efficiency.

[0010] In addition, detecting the user's interaction status (such as focus, loss of focus, input changes, etc.) and dynamically adjusting the display effects of placeholders and prompt information improves the user's perception of form operations and makes the interface more responsive and interactive. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] In order to more clearly illustrate the specific embodiments of the present disclosure or the technical solutions in the related technologies, the drawings required for use in the specific embodiments or the related technical descriptions will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0012] Figure 1 It is a flowchart of a UI interaction method based on an input box and a selection box provided by an embodiment of the present disclosure;

[0013] Figure 2 It is a schematic diagram of a preset placeholder of a distributed use case execution method based on use case dependency provided by an embodiment of the present disclosure;

[0014] Figure 3 It is a prompt information diagram of a distributed use case execution method based on use case dependency provided by an embodiment of the present disclosure;

[0015] Figure 4 It is a schematic diagram of prompt information after input is completed in a distributed use case execution method based on use case dependency provided by an embodiment of the present disclosure;

[0016] Figure 5 It is a schematic diagram of a second preset placeholder and prompt information in a selection box of a distributed use case execution method based on use case dependency provided by an embodiment of the present disclosure;

[0017] Figure 6 This is a structural diagram of a UI interaction device provided by an embodiment of the present disclosure.

[0018] Figure 7 It is a structural schematic diagram of another UI interaction device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0019] In modern interactive UI design, input boxes and selection boxes are common basic components used to receive user input and operations. In traditional design patterns, these components usually rely on placeholders to provide initial input guidance, such as displaying "Please enter your user name" or "Select an option".

[0020] However, in traditional design patterns, there is often a lack of user guidance in the input process in input boxes and selection boxes in multi-field and multi-interaction scenarios, which results in users being unable to directly determine the function of the current field during the input process, seriously affecting user experience and operational efficiency.

[0021] Regarding the above problems, the following solutions are proposed in the related art:

[0022] 1. The first solution is to put a title in front of each input box and selection box. Since each input box and selection box needs to be placed side by side with the title, the title will take up a large horizontal space on the page, resulting in the width of the input box and selection box being compressed, especially in multi-field scenarios where it appears cramped and difficult to enter long text. Moreover, since the length of the title is random, there may be titles of varying lengths, and the overall visual effect is not neat, which can easily lead to a scattered or confusing user visual experience.

[0023] 2. The second solution is to put a title above each input box and selection box. Since the title needs to occupy the space above the input box and selection box, the vertical height of the form is increased. When the page contains multiple fields, it will greatly lengthen the page, making the page appear lengthy and reducing the content density. Moreover, in scenarios where the utilization of the upper and lower space of the page needs to be improved, this solution is inefficient and impractical, and cannot meet the needs of compact layout.

[0024] 3. The third solution is to directly cancel the title of the input box and the selection box. Without a title, users can only understand the function of the input box through the placeholder, but once the user starts to enter or select, the placeholder will disappear, resulting in the user being unable to intuitively understand the specific function or role of the field. Moreover, in a multi-field form, users may forget the function of a certain input box / selection box, especially when returning or modifying, which may lead to incorrect filling or selection.

[0025] 4. The fourth solution is to put the prompt text in the drop-down option. Since users must click on the selection box to see the prompt content, this solution is not friendly to first-time users, especially when the default state of the selection box is not obvious, it is easy for users to ignore the prompt information. In addition, the input box does not have a drop-down option structure, so it is impossible to provide function prompts through this method.

[0026] Therefore, how to balance the alignment of the input box and the selected page in UI design, the aesthetics of the layout and the practicality of the guidance, so as to improve the user experience and input efficiency, has become a problem that needs to be solved.

[0027] To solve the above problems, various embodiments of the present disclosure provide a UI interaction method based on an input box and a selection box, the method comprising: initializing a target component during the loading process of a page, and setting a preset placeholder in the target component, the target component comprising an input box, and / or a selection box; wherein the preset placeholder is used to prompt the input content of the target component; detecting whether there is user input information in the target component, and when the detection result indicates that there is input information, hiding the preset placeholder in the target component, and setting and continuously displaying prompt information at a first preset position of the target component, wherein the prompt information is associated with the input information; obtaining an interaction state of the user with the target component as the focus, and adjusting the preset placeholder and / or the interaction result of the prompt information based on the interaction state.

[0028] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present disclosure.

[0029] Please refer to Figure 1 , Figure 1 : is a flow chart of a UI interaction method based on an input box and a selection box provided by an embodiment of the present disclosure. The flow of the method may include the following steps:

[0030] Step S101, initializing the target component during the loading process of the page, setting a preset placeholder in the target component, the target component includes an input box and / or a selection box.

[0031] In this embodiment, the preset placeholder is used to prompt the input content of the target component. Here, the placeholder can be a design element in the UI interface, and can refer to the prompt text displayed in the input box or selection box to provide preliminary guidance before the user enters the content. The display content of the placeholder is associated with the input content of the input box or selection box.

[0032] Here, the preset placeholder may refer to a default prompt text pre-set in an input box or a selection box, and the content of the prompt text may be specifically set according to requirements.

[0033] In a possible implementation, the initialization of the target component may include, but is not limited to: style initialization, page layout initialization, and event binding initialization.

[0034] Step S102, detect whether there is user input information in the target component. When the detection result indicates that there is input information, hide the preset placeholder in the target component, and set prompt information at the first preset position of the target component and display it continuously, and the prompt information is associated with the input information.

[0035] In this embodiment, detecting whether the user input information exists in the target component may include: monitoring the user input event and determining whether the input content exists in the target component. Among them, monitoring the user input event may capture the real-time changes of the user input by binding the input event of the input box and the change event of the selection box. Determining whether the input content exists in the target component may be performed by detecting the value in the input box and detecting the current selection state in the selection box.

[0036] When the detection result indicates that input information exists, hiding the preset placeholder in the target component may include: using display:none to hide the preset placeholder. Here, using display:none can make the element completely hidden, compared with the opacity:0 mode in which the element still exists on the page, and the visibility:hidden mode in which the element still occupies the page position, it does not occupy space and does not affect mouse events.

[0037] When the preset placeholder is in the process of being hidden, a fade-in or sliding animation effect can be used to enhance the visual prompt effect.

[0038] Setting the prompt information at the first preset position of the target component and continuously displaying it may include: dynamically generating the prompt information according to the user's input information and continuously displaying it.

[0039] As an example, the first preset position may include, but is not limited to: right, top, or bottom.

[0040] Furthermore, the style of the prompt information can be set to distinguish the prompt information from the input box content. For example, the input information of the input box and the selection box can be represented in black, and the prompt information can be represented in light gray.

[0041] For example, the style of the preset placeholder in the input box can be as follows Figure 2 As shown, Figure 2 It is a preset placeholder schematic diagram of a distributed use case execution method based on use case dependency provided in an embodiment of the present disclosure, and the displayed text is "Please enter the instance name" to provide guidance for the user's input.

[0042] The style of the prompt information in the input box can be as follows Figure 3 As shown, Figure 3 It is a prompt information diagram of a distributed use case execution method based on use case dependency provided in an embodiment of the present disclosure. A preset placeholder is hidden in the input box, and prompt information is displayed. The prompt content of the prompt information is "Example Name", which provides further guidance for the user's input.

[0043] When the user finishes inputting, the prompt message in the input box can be as follows Figure 4 As shown, Figure 4 It is a schematic diagram of prompt information after input is completed in a distributed use case execution method based on use case dependency provided by an embodiment of the present disclosure. When the user input is completed, the prompt information continues to be displayed to continuously provide guidance to the user.

[0044] As an optional implementation, the method may also include: when the user starts to input information and the prompt information is displayed, the preset placeholder is not completely hidden, and the preset placeholder is moved to the frame of the input box or selection box by shrinking or suspending it, thereby further improving the user's input experience.

[0045] Step S103, obtaining the user's interaction state with the target component as the focus, and adjusting the preset placeholder and / or the interaction result of the prompt information based on the interaction state.

[0046] In this embodiment, the interactive state of focus may include a focused state and an out-of-focus state, wherein the focused state may refer to a state in which the user activates the input box and the selection box, and the out-of-focus state may refer to a state in which the user leaves the input box and the selection box.

[0047] Obtaining the user's interactive state with the target component as the focus may include: monitoring the focus events of the input box and the selection box to determine that the input box and the selection box are in a focused state; monitoring the blur events of the input box and the selection box to determine that the input box and the selection box are in a lost-focus state.

[0048] Adjusting the preset placeholder and / or the interaction result of the prompt information based on the interaction state may include: when in a focused state, adjusting the first interaction result of the preset placeholder and the prompt information; when in an out-of-focus state, adjusting the second interaction result of the preset placeholder and the prompt information.

[0049] In the UI interaction method and device based on input boxes and selection boxes in the above-mentioned embodiments of the present disclosure, by optimizing the interaction logic of the placeholders and prompt information of the input boxes and selection boxes, the user experience and interaction efficiency are significantly improved by avoiding the trouble of users getting lost in the function location after the traditional placeholders disappear while maintaining the beauty and functionality of the page. The UI interaction logic of the unified placeholders and prompt information avoids the tedious work of designing a title or description for each input box or selection box separately. When a new component is needed, efficient function expansion can be achieved by simply inheriting the unified logic and style, thereby improving the efficiency of UI design.

[0050] In a possible implementation of the above step S101, initializing the target component during the loading process of the page and setting a preset placeholder in the target component include:

[0051] Determine the type of the target component during the loading process of the page. When the target component is an input box, set a first preset placeholder at a second preset position on the left side of the input box. The content of the first preset placeholder is associated with the input box and is used to guide the user to input content.

[0052] When the target component is a selection box, a second preset placeholder is set at a second preset position on the left side of the selection box. The content of the second preset placeholder is associated with the selection box and is used to guide the user to select input content in the drop-down bar of the selection box.

[0053] In this embodiment, when the page is loaded, the initialization logic is triggered to detect and traverse each input box or selection box that needs to be initialized in the current page.

[0054] The method of determining the type of the target component during the loading process of the page may include, but is not limited to: determining according to a HyperText Markup Language (HTML) tag, and determining according to a tag in the target component.

[0055] When the target component is an input box, setting a first preset placeholder at a second preset position on the left side of the input box may include: when it is determined that the type of the target component is an input box, inserting the text of the first preset placeholder at the second preset position on the left side of the input box, and setting the style of the first preset placeholder.

[0056] As an example, setting the style of the first preset placeholder may include: setting the default color to light gray, setting the font size to be consistent with the default font of the input box, and setting the transparency to 0.8.

[0057] When the target component is a selection box, setting a second preset placeholder at a second preset position on the left side of the selection box may include: when it is determined that the type of the target component is a selection box, inserting the text of the second preset placeholder at the second preset position on the left side of the selection box, and setting the style of the second preset placeholder.

[0058] As an example, the position of the second preset placeholder may maintain a certain distance from the drop-down arrow of the selection box, and the distance may be specifically set according to the page size.

[0059] The method may also include: checking whether each input box or selection box in the page has successfully completed initialization; ensuring that the first preset placeholder and the second placeholder are clearly visible when the user does not operate, thereby providing sufficient guidance.

[0060] In the UI interaction method and device based on the input box and the selection box of the above-mentioned embodiment of the present disclosure, a first preset placeholder (such as "Please enter your user name") is set in the input box, which can intuitively prompt the user of the type of content that needs to be input, reducing the user's cognitive burden, and a second preset placeholder (such as "Please select an option") is set in the selection box to guide the user to operate the drop-down list to avoid misoperation or unclear interaction. The placeholder adopts the second preset position and does not overlap with the content of the input box or the selection box, ensuring that the interface layout is neat and consistent, especially suitable for complex pages with multiple input boxes or selection boxes. By replacing the traditional title with a placeholder, the space occupied by the page title and explanatory text is reduced, and the space utilization rate of the page is significantly improved. The placeholder style of the input box and the selection box is consistent, which avoids the confusion caused by the differences in prompt methods between different components and improves the consistency of the user experience when operating the page. The content of the placeholder is directly related to the function of the input box or the selection box, providing users with continuous function guidance.

[0061] In a possible implementation of the above step S102, it is detected whether there is user input information in the target component, and when the detection result indicates that there is input information, a preset placeholder is hidden in the target component, and prompt information is set at a first preset position of the target component and continuously displayed, which is implemented based on the following steps:

[0062] Detect whether there is user input information in the target component. When there is input information in the target component, detect whether the input information belongs to an input box or a selection box;

[0063] When the input information belongs to the input box, hiding the first preset placeholder at the second preset position of the input box, and setting the first prompt information at the first preset position on the right side of the input box and continuously displaying it;

[0064] When the input information belongs to a selection box, hiding a second preset placeholder at a second preset position of the selection box, and setting a second prompt information at a first preset position on the right side of the selection box and continuously displaying it;

[0065] Detecting whether the format of the input information meets the requirements of the input box or the selection box, and when the format of the input information does not meet the requirements of the input box, updating the first prompt information to the first error information; wherein the requirements of the input box are associated with the type of the input box;

[0066] When the format of the input information does not meet the requirements of the selection box, the second prompt information is updated to a second error message; wherein the requirements of the selection box are associated with the type of the selection box, and the content of the first error message or the content of the second error message is associated with the content of the input information.

[0067] In this embodiment, the first preset position may be located at the right side between the input box and the selection box.

[0068] When the input information belongs to an input box, hiding the first preset placeholder at the second preset position of the input box, and setting the first prompt information at the first preset position on the right side of the input box and continuously displaying it may include:

[0069] When it is detected that there is user input information in the input box, the first preset placeholder on the left side of the input box is hidden, and the first prompt information is displayed on the right side of the input box.

[0070] When the input information belongs to a selection box, hiding a second preset placeholder at a second preset position of the selection box, and setting and continuously displaying second prompt information at a first preset position on the right side of the selection box may include:

[0071] When it is detected that there is user input information in the selection box, the second preset placeholder on the left side of the selection box is hidden, and the second prompt information is displayed on the right side of the selection box.

[0072] Detecting whether the format of the input information meets the requirements of the input box or the selection box, and when the format of the input information does not meet the requirements of the input box, updating the first prompt information to the first error information may include:

[0073] The first format detection logic is bound to the input box, and based on the first format detection logic, it is determined whether the format of the input information meets the requirements of the input box. When the format of the input information does not meet the requirements of the input box, the first prompt information is updated to the first error information, and the first error information may include the reason for the input error.

[0074] Here, the first format detection logic may include: text box detection and number box detection. The text box detection may detect the word limit, character type and other contents, and the number box detection may detect whether it is a valid number, whether it is within a specified value range and other contents.

[0075] As an example, the first error message may include but is not limited to: Please enter a valid email address.

[0076] When the format of the input information does not meet the requirements of the selection box, the second prompt information is updated to the second error information, which may include:

[0077] The second format detection logic is bound to the selection box, and based on the second format detection logic, it is determined whether the format of the input information meets the requirements of the selection box. When the format of the input information does not meet the requirements of the selection box, the second prompt information is updated to the second error information, and the second error information may include the reason for the input error.

[0078] Here, the second format detection logic may include: whether the selected value complies with the business logic, for example, whether the default value is not selected, and whether a disabled item is selected.

[0079] As an example, the second error message may include but is not limited to: Please select a valid state.

[0080] As an example, the content of the first error message or the content of the second error message is associated with the content of the input information, and may include: the first error message refers to the error value of the input box to prompt the specific error content; the second error message refers to the error value of the selection box to prompt the selection of the error content. For example, the first error message is "The input length is too short, only 3 characters are entered", and the second error message is "The option 'Invalid' is not available".

[0081] In the UI interaction method and device based on the input box and selection box of the above-mentioned embodiment of the present disclosure, when the user performs input or selection operations, the preset placeholder is automatically hidden, which can reduce visual interference, and at the same time, prompt information related to the current component content is displayed to guide the user to clarify the purpose of the input box or selection box. In scenarios where there is no input box title, the continuous display of prompt information can replace the traditional title to achieve a balance between page simplicity and functional clarity. Compared with the traditional title and placeholder design, this method can greatly improve the space utilization and visual neatness of the page when multiple input boxes / selection boxes are parallel. The prompt information changes dynamically according to the input content, and is directly related to the user's interactive behavior, further improving the intuitiveness and accuracy of the interaction.

[0082] In a possible implementation of the above embodiment, the method further includes:

[0083] When it is detected that the user is inputting information in the input box or the selection box, the appearance of the input box or the selection box is updated from a default color to a first color, where the first color is used to represent the user input;

[0084] When it is detected in the input box or the selection box that the input information does not meet the requirements, the appearance of the input box and the first error message in the input box is updated from the first color to the second color, or the appearance of the selection box and the second error message in the selection box is updated from the first color to the second color, and the second color is used to prompt the user that the input information does not meet the requirements.

[0085] In this embodiment, the default colors of the appearance of the input box and the selection box are used to indicate the initial state of the component.

[0086] The first color may be used to indicate that the user has input into the input box or the selection box, or that the input box or the selection box is activated. For example, the first color may include, but is not limited to, blue and green. The second color may include, but is not limited to, red and orange.

[0087] Furthermore, the method may also include: during the user input process, dynamically adjusting the shadow or animation effect of the component border to further prompt the user that the component is in use.

[0088] Furthermore, the appearance of the input box or the selection box may be updated to yellow to indicate a pending confirmation state.

[0089] In the UI interaction method and device based on the input box and the selection box of the above embodiment of the present disclosure, intuitive and clear user interaction feedback is achieved by dynamically adjusting the appearance and status prompt information of the input box or the selection box. The consistency of the dynamic feedback mechanism between the input box and the selection box improves the coherence of the page interaction and the user experience. Through reasonable color changes and prompt information, the input box or the selection box is more guiding in the page, optimizing the overall visual effect.

[0090] In a possible implementation of the above embodiment, the interaction state of the user with the target component as the focus is obtained, and based on the interaction state, the preset placeholder and / or the interaction result of the prompt information are adjusted, which is implemented based on the following steps:

[0091] Determine the relative position relationship between the input box or selection box and the user's cursor. When the user's cursor is located in the area where the input box or selection box is located, determine that the input box or selection box is in an interactive focus state; when the user's cursor is not located in the area where the input box or selection box is located, determine that the input box or selection box is in an interactive out-of-focus state;

[0092] When the input box is in the interactive focus state, at least one of the input box, the first preset placeholder and the first prompt information is adjusted, or,

[0093] When the selection box is in an interactive focus state, adjusting at least one of the selection box, the second preset placeholder, and the second prompt information;

[0094] When the input box is in an interactive out-of-focus state, at least one of the input box, the first preset placeholder, and the first prompt information is adjusted, or,

[0095] When the selection box is in an interactive out-of-focus state, at least one of the input box, the second preset placeholder, and the second prompt information is adjusted.

[0096] In this embodiment, the user's cursor may include but is not limited to the position coordinates of a mouse or a touch point.

[0097] Get the coordinate range of the target component in the page, and determine whether the user cursor is within the coordinate range of the target component. If so, determine that the target component is in an interactive focus state; if not, determine that the target component is in an interactive out-of-focus state.

[0098] When the input box is in an interactive focus state, adjusting at least one of the input box, the first preset placeholder and the first prompt information may include: adjusting the appearance of the input box, hiding the first preset placeholder, and displaying the first prompt information.

[0099] When the input box is in an interactive out-of-focus state, restoring at least one of the input box appearance, the first preset placeholder, and the first prompt information may include: adjusting the input box appearance, displaying the first preset placeholder, and adjusting the first prompt information.

[0100] Here, displaying the first preset placeholder may mean redisplaying the first preset placeholder at the default position of the input box when the user has not input any information. Adjusting the first prompt information may mean keeping the first prompt information displayed if the user has input valid content, and hiding the first prompt information if the user has not input any content.

[0101] When the selection box is in an interactive focus state, adjusting at least one of the selection box, the second preset placeholder and the second prompt information may include: adjusting the appearance of the selection box, hiding the second preset placeholder, and displaying the second prompt information.

[0102] When the selection box is in an interactive out-of-focus state, restoring at least one of the selection box appearance, the second preset placeholder, and the second prompt information may include: adjusting the selection box appearance, displaying the second preset placeholder, and adjusting the second prompt information.

[0103] In the UI interaction method and device based on the input box and selection box of the above embodiment of the present disclosure, the focus and out-of-focus state of the target component is dynamically monitored, and its appearance and the presentation mode of prompt information can be adjusted in real time, so that the user can get timely feedback when inputting or selecting content. By adjusting the highlight border, background color, etc., instant feedback at the visual level is achieved to help users quickly locate the current interactive target.

[0104] In a possible implementation of the above embodiment, when the input box is in an interactive focus state, adjusting at least one of the input box, the first preset placeholder, and the first prompt information includes:

[0105] When the input box is in an interactive focus state, a preset highlight color is used for highlighting, the background colors of the input box, the first preset placeholder, and the first prompt information are updated to the preset highlight color, and detection of input information of the input box is started;

[0106] Obtain the user's historical input information in the input box, analyze the context information of the historical input information based on natural language analysis technology and large language models, and determine the recommended input information for the input box.

[0107] In this embodiment, the preset highlight color may refer to the first color mentioned above.

[0108] The detection of the input information of the input box may refer to the detection using a first format detection logic.

[0109] Based on natural language analysis technology and large language models, the context information of historical input information is analyzed to determine the recommended input information of the input box, which may include: analyzing the user's historical input content through natural language processing technology, extracting keywords, topics or common phrases, using word segmentation, part-of-speech tagging and grammatical parsing technology to understand the structure and intention of historical input content, building a context model based on the user's input habits and scene context, and predicting the user's possible input content.

[0110] Similarly, when the selection box is in the interactive focus state, the selection box, the second preset placeholder and at least one of the second prompt information are adjusted by the above method, which will not be repeated here.

[0111] In the UI interaction method and device based on input box and selection box in the above embodiment of the present disclosure, personalized recommended input content is provided by obtaining the user's historical input information and combining natural language analysis technology with a large language model for context analysis. This allows the user to complete input by simply selecting a recommended option without having to re-enter similar content, significantly improving input efficiency, especially in complex forms or multiple repeated input scenarios.

[0112] In a possible implementation of the above embodiment, when the input box is in an interactive out-of-focus state, adjusting at least one of the input box, the first preset placeholder, and the first prompt information includes:

[0113] When the input box is in an interactive out-of-focus state, the detection of input information in the input box is turned off, and the background colors of the input box, the first preset placeholder, and the first prompt information are restored to the default colors;

[0114] When the input information in the input box is empty, the first preset placeholder is restored to be displayed at the second preset position on the left side of the input box;

[0115] When the input information in the input box is not empty, the input information is saved as a draft, and when it is detected that the user refreshes the page, the input information in the input box is restored.

[0116] In this embodiment, when the input information in the input box is empty, restoring the display of the first preset placeholder at the second preset position on the left side of the input box may include:

[0117] When the user enters the input state but the input content is empty, the first preset placeholder is hidden first, and then the first preset placeholder is displayed again.

[0118] When the input information in the input box is not empty, the input information is saved in draft, which may include: calling a draft saving function to store the current content in the input box to a local cache or a remote database.

[0119] Similarly, when the selection box is in an interactive out-of-focus state, at least one of the selection box, the second preset placeholder and the second prompt information is adjusted using the above method, which will not be repeated here.

[0120] In the UI interaction method and device based on the input box and selection box of the above embodiment of the present disclosure, in the case of out-of-focus, the content of the input box is automatically saved at regular intervals to ensure the minimum loss of the content not submitted by the user. The cross-device synchronization of drafts is achieved through cloud storage to improve the user experience. According to the user's operation history and input habits, the placeholder and prompt information content are dynamically changed to provide more personalized guidance that fits the user.

[0121] In one example, the styles of the second preset placeholder and prompt information in the selection box can be as follows: Figure 5 As shown, Figure 5 This is a schematic diagram of a second preset placeholder and prompt information in a selection box of a distributed use case execution method based on use case dependency provided by an embodiment of the present disclosure.

[0122] In one embodiment, a UI interaction device 60 is provided, and the UI interaction device 60 corresponds one-to-one to the UI interaction method based on the input box and the selection box in the above embodiment. Figure 6 As shown, the UI interaction device 60 includes a component initialization module 601, a component setting module 602 and a component interaction module 603, wherein each functional module is described in detail as follows:

[0123] The component initialization module 601 is used to initialize the target component during the loading process of the page, and set a preset placeholder in the target component. The target component includes an input box and / or a selection box; wherein the preset placeholder is used to prompt the input content of the target component;

[0124] The component setting module 602 is used to detect whether there is user input information in the target component. When the detection result indicates that there is input information, a preset placeholder is hidden in the target component, and prompt information is set at a first preset position of the target component and continuously displayed, wherein the prompt information is associated with the input information.

[0125] The component interaction module 603 is used to obtain the user's interaction state with the target component as the focus, and adjust the preset placeholder and / or the interaction result of the prompt information based on the interaction state.

[0126] In a specific embodiment, the component initialization module 601 is used to determine the type of the target component during the loading process of the page, and when the target component is an input box, a first preset placeholder is set at a second preset position on the left side of the input box, and the content of the first preset placeholder is associated with the input box, and is used to guide the user to input content;

[0127] When the target component is a selection box, a second preset placeholder is set at a second preset position on the left side of the selection box. The content of the second preset placeholder is associated with the selection box and is used to guide the user to select input content in the drop-down bar of the selection box.

[0128] In a specific embodiment, the component setting module 602 is used to detect whether there is user input information in the target component, and when there is input information in the target component, detect whether the input information belongs to an input box or a selection box;

[0129] When the input information belongs to the input box, hiding the first preset placeholder at the second preset position of the input box, and setting the first prompt information at the first preset position on the right side of the input box and continuously displaying it;

[0130] When the input information belongs to a selection box, hiding a second preset placeholder at a second preset position of the selection box, and setting a second prompt information at a first preset position on the right side of the selection box and continuously displaying it;

[0131] Detecting whether the format of the input information meets the requirements of the input box or the selection box, and when the format of the input information does not meet the requirements of the input box, updating the first prompt information to the first error information; wherein the requirements of the input box are associated with the type of the input box;

[0132] When the format of the input information does not meet the requirements of the selection box, the second prompt information is updated to a second error message; wherein the requirements of the selection box are associated with the type of the selection box, and the content of the first error message or the content of the second error message is associated with the content of the input information.

[0133] In a specific embodiment, the UI interaction device 60 further includes: a color update module 604, wherein:

[0134] A color updating module 604, configured to update the appearance of the input box or the selection box from a default color to a first color when it is detected that the user is inputting information in the input box or the selection box, wherein the first color is used to represent the user input;

[0135] When it is detected in the input box or the selection box that the input information does not meet the requirements, the appearance of the input box and the first error message in the input box is updated from the first color to the second color, or the appearance of the selection box and the second error message in the selection box is updated from the first color to the second color, and the second color is used to prompt the user that the input information does not meet the requirements.

[0136] In a specific embodiment, the component interaction module 603 is used to determine the relative position relationship between the input box or the selection box and the user's cursor. When the user's cursor is located in the area where the input box or the selection box is located, it is determined that the input box or the selection box is in an interactive focus state; when the user's cursor is not located in the area where the input box or the selection box is located, it is determined that the input box or the selection box is in an interactive out-of-focus state;

[0137] When the input box is in the interactive focus state, at least one of the input box, the first preset placeholder and the first prompt information is adjusted, or,

[0138] When the selection box is in an interactive focus state, adjusting at least one of the selection box, the second preset placeholder, and the second prompt information;

[0139] When the input box is in an interactive out-of-focus state, at least one of the input box, the first preset placeholder, and the first prompt information is adjusted, or,

[0140] When the selection box is in an interactive out-of-focus state, at least one of the input box, the second preset placeholder, and the second prompt information is adjusted.

[0141] In a specific embodiment, the component interaction module 603 is used to use a preset highlight color to perform highlight processing when the input box is in an interactive focus state, update the background colors of the input box, the first preset placeholder and the first prompt information to the preset highlight color, and start detecting the input information of the input box;

[0142] Obtain the user's historical input information in the input box, analyze the context information of the historical input information based on natural language analysis technology and large language models, and determine the recommended input information for the input box.

[0143] In a specific embodiment, the component interaction module 603 is used to turn off the detection of input information of the input box when the input box is in an interactive out-of-focus state, and restore the background colors of the input box, the first preset placeholder and the first prompt information to the default color;

[0144] When the input information in the input box is empty, the first preset placeholder is restored to be displayed at the second preset position on the left side of the input box;

[0145] When the input information in the input box is not empty, the input information is saved as a draft, and when it is detected that the user refreshes the page, the input information in the input box is restored.

[0146] It should be noted that: when the UI interaction device provided in the above embodiment implements the corresponding UI interaction method based on the input box and the selection box, only the division of the above program modules is used as an example. In actual application, the above processing can be assigned to different program modules as needed, that is, the internal structure of the above system can be divided into different program modules to complete all or part of the above-described processing. Figure 1 The embodiments of the method shown belong to the same concept, and the specific implementation process is detailed in the method embodiments, which will not be repeated here.

[0147] The present disclosure also provides a computer device having the above Figure 6 The UI interaction device shown.

[0148] See also Figure 7 , Figure 7 is a structural diagram of another UI interaction device provided by an embodiment of the present disclosure, such as Figure 7 As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 7 A processor 10 is taken as an example.

[0149] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0150] The memory 20 stores instructions executable by at least one processor 10, so that at least one processor 10 executes the method shown in the above embodiment.

[0151] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0152] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.

[0153] The computer device also includes an input device 30 and an output device 40. The processor 10, the memory 20, the input device 30 and the output device 40 may be connected via a bus or other means. Figure 7 The example of connecting through bus is taken in the following.

[0154] The input device 30 can receive input digital or character information, and generate key signal input related to the user settings and function control of the computer device, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, an indicator bar, one or more mouse buttons, a trackball, a joystick, etc. The output device 40 may include a display device, an auxiliary lighting device (e.g., an LED) and a tactile feedback device (e.g., a vibration motor), etc. The above-mentioned display device includes but is not limited to a liquid crystal display, a light emitting diode, a display and a plasma display. In some optional embodiments, the display device can be a touch screen.

[0155] The computer device further comprises a communication interface 30 for the computer device to communicate with other devices or a communication network.

[0156] The embodiments of the present disclosure also provide a computer-readable storage medium. The above-mentioned method according to the embodiments of the present disclosure can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium and downloaded through a network, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state drive, etc.; further, the storage medium can also include a combination of the above-mentioned types of memory. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

[0157] A part of the present disclosure may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present disclosure through the operation of the computer. Those skilled in the art should understand that the existence of computer program instructions in computer-readable media includes, but is not limited to, source files, executable files, installation package files, etc., and accordingly, the way in which computer program instructions are executed by a computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to the computer.

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

Claims

1. A UI interaction method based on an input box and a selection box, characterized in that: The method comprises: Initializing the target component during the loading process of the page, setting a preset placeholder in the target component, the target component including an input box and / or a selection box; wherein the preset placeholder is used to prompt the input content of the target component; Detecting whether there is user input information in the target component, and when the detection result indicates that there is input information, hiding the preset placeholder in the target component, and setting and continuously displaying prompt information at a first preset position of the target component, wherein the prompt information is associated with the input information; The interaction state of the user with the target component as the focus is obtained, and based on the interaction state, the preset placeholder and / or the interaction result of the prompt information are adjusted.

2. The method according to claim 1, characterized in that Initializing the target component during the loading process of the page and setting a preset placeholder in the target component include: Determining the type of the target component during the loading process of the page, when the target component is an input box, setting a first preset placeholder at a second preset position on the left side of the input box, wherein the content of the first preset placeholder is associated with the input box and is used to guide the user to input content; When the target component is a selection box, a second preset placeholder is set at a second preset position on the left side of the selection box, and the content of the second preset placeholder is associated with the selection box to guide the user to select input content in the drop-down bar of the selection box.

3. The method according to claim 2, characterized in that Detecting whether there is user input information in the target component, and when the result of the detection indicates that there is input information, hiding the preset placeholder in the target component, and setting prompt information at a first preset position of the target component and continuously displaying it, is achieved based on the following steps: Detecting whether there is user input information in the target component, and when there is input information in the target component, detecting whether the input information belongs to an input box or a selection box; When the input information belongs to the input box, hiding the first preset placeholder at the second preset position of the input box, and setting the first prompt information at the first preset position on the right side of the input box and continuously displaying it; When the input information belongs to the selection box, hiding the second preset placeholder at the second preset position of the selection box, and setting the second prompt information at the first preset position on the right side of the selection box and continuously displaying it; Detecting whether the format of the input information meets the requirements of the input box or the selection box, and when the format of the input information does not meet the requirements of the input box, updating the first prompt information to a first error message; wherein the requirements of the input box are associated with the type of the input box; When the format of the input information does not meet the requirements of the selection box, the second prompt information is updated to a second error message; wherein the requirements of the selection box are associated with the type of the selection box, and the content of the first error message or the content of the second error message is associated with the content of the input information.

4. The method according to claim 3, characterized in that The method further comprises: When it is detected in the input box or the selection box that the user is inputting information, updating the appearance of the input box or the selection box from a default color to a first color, where the first color is used to represent the user input; When it is detected in the input box or the selection box that the input information does not meet the requirements, the appearance of the input box and the first error message in the input box is updated from the first color to the second color, or the appearance of the selection box and the second error message in the selection box is updated from the first color to the second color, and the second color is used to prompt the user that the input information does not meet the requirements.

5. The method according to claim 4, characterized in that Acquiring the interaction state of the user with the target component as the focus, and adjusting the preset placeholder and / or the interaction result of the prompt information based on the interaction state, is achieved based on the following steps: Determine the relative position relationship between the input box or the selection box and the user's cursor, and when the user's cursor is located in the area where the input box or the selection box is located, determine that the input box or the selection box is in an interactive focus state; when the user's cursor is not located in the area where the input box or the selection box is located, determine that the input box or the selection box is in an interactive out-of-focus state; When the input box is in the interactive focus state, at least one of the input box, the first preset placeholder and the first prompt information is adjusted, or, When the selection box is in the interactive focus state, adjusting at least one of the selection box, the second preset placeholder and the second prompt information; When the input box is in the interactive out-of-focus state, at least one of the input box, the first preset placeholder and the first prompt information is adjusted, or, When the selection box is in the interactive out-of-focus state, at least one of the input box, the second preset placeholder and the second prompt information is adjusted.

6. The method according to any one of claim 5, characterized in that: When the input box is in the interactive focus state, adjusting at least one of the input box, the first preset placeholder, and the first prompt information includes: When the input box is in an interactive focus state, a preset highlight color is used for highlighting, the background colors of the input box, the first preset placeholder and the first prompt information are updated to the preset highlight color, and detection of input information of the input box is started; The historical input information of the user in the input box is obtained, and based on the natural language analysis technology and the large language model, the context information of the historical input information is analyzed to determine the recommended input information of the input box.

7. The method according to any one of claims 5, characterized in that When the input box is in the interactive out-of-focus state, adjusting at least one of the input box, the first preset placeholder, and the first prompt information includes: When the input box is in an interactive out-of-focus state, turning off detection of input information of the input box, and restoring the background colors of the input box, the first preset placeholder, and the first prompt information to a default color; When the input information in the input box is empty, restoring the display of the first preset placeholder at the second preset position on the left side of the input box; When the input information in the input box is not empty, the input information is saved as a draft, and when it is detected that the user refreshes the page, the input information in the input box is restored.

8. A UI interaction device, characterized in that: The device comprises: A component initialization module, used to initialize a target component during the loading process of a page, and to set a preset placeholder in the target component, wherein the target component includes an input box and / or a selection box; wherein the preset placeholder is used to prompt the input content of the target component; a component setting module, configured to detect whether there is user input information in the target component, and when the detection result indicates that there is input information, hide the preset placeholder in the target component, and set and continuously display prompt information at a first preset position of the target component, wherein the prompt information is associated with the input information; The component interaction module is used to obtain the interaction state of the user with the target component as the focus, and adjust the preset placeholder and / or the interaction result of the prompt information based on the interaction state.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the UI interaction method based on the input box and the selection box described in claims 1-7.

10. A computer program product, characterized in that The method comprises computer instructions for causing a computer to execute the UI interaction method based on an input box and a selection box according to any one of claims 1 to 7.

Images